FOUR-20583-A: Tasks Main change to new layout , adjustments in preview

ryancooley · Jan 23, 2025 · Dec 5, 2024 · Dec 6, 2024 · Dec 6, 2024 · Dec 6, 2024
commit 78d6fa219e7d7b2bc251ffd3752445976bac53ab
diff --git a/resources/js/next/config/momentConfig.js b/resources/js/next/config/momentConfig.js
diff --git a/resources/js/next/config/openAI.js b/resources/js/next/config/openAI.js
@@ -1,9 +1,9 @@
 import { setGlobalPMVariable } from "../globalVariables";
 
-const openAiEnabled = document.head.querySelector("meta[name=\"open-ai-nlq-to-pmql\"]");
+const openAi = document.head.querySelector("meta[name=\"open-ai-nlq-to-pmql\"]");
 
-setGlobalPMVariable("openAiEnabled", openAiEnabled ? {
-  enabled: openAiEnabled.content,
+setGlobalPMVariable("openAi", openAi ? {
+  enabled: openAi.content,
 } : {
   enabled: false,
 });
diff --git a/resources/js/next/layout/sidebar.js b/resources/js/next/layout/sidebar.js
@@ -8,14 +8,6 @@ const Vue = getGlobalVariable("Vue");
 // Vue.use(VueHtml2Canvas);
 Vue.prototype.$sanitize = sanitizeUrl;
 
-Vue.component("LanguageSelectorButton", (resolve) => {
-  if (window.ProcessMaker.languageSelectorButtonComponent) {
-    resolve(window.ProcessMaker.languageSelectorButtonComponent);
-  } else {
-    window.ProcessMaker.languageSelectorButtonComponentResolve = resolve;
-  }
-});
-
 new Vue({
   el: "#sidebar",
   components: {

diff --git a/resources/js/next/screenBuilder.js b/resources/js/next/screenBuilder.js
@@ -3,7 +3,6 @@ import {
 } from "./globalVariables";
 
 const Vue = getGlobalVariable("Vue");
-const apiClient = getGlobalPMVariable("apiClient");
 
 const addScriptsToDOM = async function (scripts) {
   for (const script of scripts) {
@@ -26,6 +25,7 @@ componentsScreenBuilder.forEach((component) => {
     if (screenBuilderScripts) {
       addScriptsToDOM(screenBuilderScripts).then(() => {
         import("@processmaker/screen-builder").then((ScreenBuilder) => {
+          const apiClient = getGlobalPMVariable("apiClient");
           Vue.use(ScreenBuilder.default);
 
           const { initializeScreenCache } = ScreenBuilder;

diff --git a/resources/js/tasks/loaderPreview.js b/resources/js/tasks/loaderPreview.js
@@ -2,53 +2,43 @@ import Vue from "vue";
 import * as vue from "vue";
 import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";
 import moment from "moment-timezone";
-
 import debounce from "lodash/debounce";
 import Mustache from "mustache";
 
-import { loadModulesSequentially } from "../next/globalVariables";
-
 window.Vue = Vue;
 window.vue = vue;
 window.moment = moment;
 
 window.Vue.prototype.moment = moment;
 window.Vue.use(BootstrapVue);
 window.Vue.use(BootstrapVueIcons);
-
 window.debounce = debounce;
 window.Mustache = Mustache;
 
-import("../next/libraries/vuex");
-import("../next/libraries/bootstrap");
-import("../next/libraries/jquery");
-import("../next/libraries/vueRouter");
-import("../next/libraries/vueCookies");
-// Load components
-import("../next/components/index");
-import("../next/libraries/sharedComponents");
-import("../next/libraries/vueFormElements");
-
 window.ProcessMaker = {
   EventBus: new Vue(),
   events: new Vue(),
   packages: window.packages,
 };
 
-loadModulesSequentially([
-  // Screen builder
-  import("../next/config/processmaker"),
-  import("../next/config/i18n"),
-  import("../next/libraries/broadcast"),
-  import("../next/config/session"),
-  import("../next/screenBuilder"),
-]).then(() => {
-  import("./preview");
-});
+import("../next/components/index");
+import("../next/screenBuilder");
+import("../next/libraries/vueFormElements");
+import("../next/libraries/sharedComponents");
+
+import("../next/libraries/vuex");
+import("../next/libraries/bootstrap");
+import("../next/libraries/lodash");
+import("../next/libraries/jquery");
+import("../next/libraries/vueCookies");
+import("../next/config/i18n");
+import("../next/libraries/vueRouter");
+import("../next/libraries/broadcast");
 
+import("../next/config/processmaker");
 import("../next/config/notifications");
 import("../next/config/user");
-import("../next/config/momentConfig");
+import("../next/config/session");
 import("../next/config/openAI");
 
 // Load libraries dependencies first

diff --git a/resources/js/tasks/preview.js b/resources/js/tasks/preview.js
@@ -18,16 +18,16 @@ const main = new Vue({
     usersList: [],
     filter: "",
     showReassignment: false,
-    task: window.task,
-    userHasAccessToTask: window.userHasAccessToTask,
+    task,
+    userHasAccessToTask,
     statusCard: "card-header text-capitalize text-white bg-success",
     selectedUser: [],
     hasErrors: false,
     redirectInProcess: false,
     formData: {},
     submitting: false,
-    userIsAdmin: window.userIsAdmin,
-    userIsProcessManager: window.userIsProcessManager,
+    userIsAdmin,
+    userIsProcessManager,
     is_loading: false,
     autoSaveDelay: 5000,
     userHasInteracted: false,
@@ -162,7 +162,7 @@ const main = new Vue({
     },
     filterScreenFields(taskData) {
       const filteredData = {};
-      window.screenFields.forEach((field) => {
+      screenFields.forEach((field) => {
         _.set(filteredData, field, _.get(taskData, field, null));
       });
       return filteredData;

diff --git a/resources/views/tasks/preview.blade.php b/resources/views/tasks/preview.blade.php
@@ -128,17 +128,17 @@ class="card border-0"
 <script src="{{ mix('js/vue-vendor.js') }}"></script>
 <script src="{{ mix('js/fortawesome-vendor.js') }}"></script>
 <script src="{{ mix('js/bootstrap-vendor.js') }}"></script>
-<script type="module">
+<script>
   window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
-  window.screenBuilderScripts = @json($manager->getScripts());
-  window.task = @json($task);
-  window.userHasAccessToTask = {{ Auth::user()->can('update', $task) ? "true": "false" }};
-  window.userIsAdmin = {{ Auth::user()->is_administrator ? "true": "false" }};
-  window.userIsProcessManager = {{ Auth::user()->id === $task->process?->manager_id ? "true": "false" }};
-  window.screenFields = @json($screenFields);
+  const screenBuilderScripts = @json($manager->getScripts());
+  const task = @json($task);
+  const userHasAccessToTask = {{ Auth::user()->can('update', $task) ? "true": "false" }};
+  const userIsAdmin = {{ Auth::user()->is_administrator ? "true": "false" }};
+  const userIsProcessManager = {{ Auth::user()->id === $task->process?->manager_id ? "true": "false" }};
+  const screenFields = @json($screenFields);
 </script>
-<script type="module" src="{{ mix('js/tasks/loaderPreview.js')}}"></script>
-<script type="module">
+<script src="{{ mix('js/tasks/loaderPreview.js')}}"></script>
+<script>
   window.ProcessMaker.EventBus.$on("screen-renderer-init", (screen) => {
     if (screen.watchers_config) {
       screen.watchers_config.api.execute = @json(route('api.scripts.execute', ['script_id' => 'script_id', 'script_key' => 'script_key']));
@@ -155,6 +155,8 @@ class="card border-0"
   };
 </script>
 
+<script src="{{mix('js/tasks/preview.js')}}"></script>
+
 <style>
   .inline-input {
       margin-right: 6px;

diff --git a/webpack.mix.js b/webpack.mix.js
@@ -151,6 +151,7 @@ mix
   .js("resources/js/tasks/loaderPreview.js", "public/js/tasks")
   .js("resources/js/tasks/loaderEdit.js", "public/js/tasks")
   .js("resources/js/tasks/edit.js", "public/js/tasks/edit.js")
+  .js("resources/js/tasks/preview.js", "public/js/tasks/preview.js")
 
   .js("resources/js/app.js", "public/js");
 // .polyfill({