FOUR-20583: Updating observations

resources/js/next/config/i18n.js

@@ -3,8 +3,11 @@ import Backend from "i18next-chained-backend";
 import LocalStorageBackend from "i18next-localstorage-backend";
 import XHR from "i18next-xhr-backend";
 import VueI18Next from "@panter/vue-i18next";
+import { setGlobalPMVariables, setUses, getGlobalVariable } from "../globalVariables";
+
+export default () => {
+  const Vue = getGlobalVariable("Vue");
 
-export default (globalInput) => {
   const isProd = document.head.querySelector("meta[name=\"is-prod\"]")?.content === "true";
   let translationsLoaded = false;
 
@@ -48,15 +51,12 @@ export default (globalInput) => {
 
   i18nPromise.then(() => { translationsLoaded = true; });
 
-  return {
-    pm: {
-      i18n: i18next,
-      i18nPromise,
-      missingTranslations,
-      missingTranslation,
-    },
-    use: {
-      VueI18Next,
-    },
-  };
+  setUses(Vue, { VueI18Next });
+  Vue.mixin({ i18n: new VueI18Next(i18next) });
+  setGlobalPMVariables({
+    i18n: i18next,
+    i18nPromise,
+    missingTranslations,
+    missingTranslation,
+  });
 };

resources/js/next/config/notifications.js

@@ -1,5 +1,7 @@
-export default (globalInput) => {
-  const { apiClient } = globalInput;
+import { setGlobalPMVariables, getGlobalPMVariable } from "../globalVariables";
+
+export default () => {
+  const apiClient = getGlobalPMVariable("apiClient");
 
   const notifications = [];
 
@@ -28,13 +30,11 @@ export default (globalInput) => {
     icons: {},
   };
 
-  return {
-    pm: {
-      notifications,
-      pushNotification,
-      removeNotifications,
-      unreadNotifications,
-      $notifications,
-    },
-  };
+  setGlobalPMVariables({
+    notifications,
+    pushNotification,
+    removeNotifications,
+    unreadNotifications,
+    $notifications,
+  });
 };

resources/js/next/config/openAI.js

@@ -1,15 +1,13 @@
-// import { setGlobalPMVariable } from "../globalVariables";
+import { setGlobalPMVariables } from "../globalVariables";
 
 export default () => {
   const openAi = document.head.querySelector("meta[name=\"open-ai-nlq-to-pmql\"]");
 
-  return {
-    pm: {
-      openAi: openAi ? {
-        enabled: openAi.content,
-      } : {
-        enabled: false,
-      },
+  setGlobalPMVariables({
+    openAi: openAi ? {
+      enabled: openAi.content,
+    } : {
+      enabled: false,
     },
-  };
+  });
 };

resources/js/next/config/processmaker.js

@@ -1,8 +1,9 @@
 import axios from "axios";
+import { setGlobalPMVariables, getGlobalPMVariable } from "../globalVariables";
 
-export default (globalInput) => {
+export default () => {
   const token = document.head.querySelector("meta[name=\"csrf-token\"]");
-  const { EventBus } = globalInput;
+  const EventBus = getGlobalPMVariable("EventBus");
 
   // Setup api versions
   const apiVersionConfig = [
@@ -134,9 +135,7 @@ export default (globalInput) => {
     }
   });
 
-  return {
-    pm: {
-      apiClient,
-    },
-  };
+  setGlobalPMVariables({
+    apiClient,
+  });
 };

resources/js/next/config/session.js

@@ -1,13 +1,16 @@
-// import { getGlobalPMVariable, setGlobalPMVariable, getGlobalVariable } from "../globalVariables";
+import { getGlobalPMVariable, setGlobalPMVariables, getGlobalVariable } from "../globalVariables";
 
-export default ({ global, processmaker }) => {
+export default () => {
   const timeoutScript = document.head.querySelector("meta[name=\"timeout-worker\"]")?.content;
 
-  const { Vue, Echo } = global;
+  const Vue = getGlobalVariable("Vue");
+  const Echo = getGlobalVariable("Echo");
 
-  const {
-    pushNotification, closeSessionModal, alert, user, sessionModal,
-  } = processmaker;
+  const pushNotification = getGlobalPMVariable("pushNotification");
+  const closeSessionModal = getGlobalPMVariable("closeSessionModal");
+  const alert = getGlobalPMVariable("alert");
+  const user = getGlobalPMVariable("user");
+  const sessionModal = getGlobalPMVariable("sessionModal");
 
   const isSameDevice = (e) => {
     const localDeviceId = Vue.$cookies.get(e.device_variable);
@@ -88,17 +91,11 @@ export default ({ global, processmaker }) => {
         }
       });
 
-    return {
-      pm: {
-        AccountTimeoutLength,
-        AccountTimeoutWarnSeconds,
-        AccountTimeoutEnabled,
-        AccountTimeoutWorker,
-      },
-    };
+    setGlobalPMVariables({
+      AccountTimeoutLength,
+      AccountTimeoutWarnSeconds,
+      AccountTimeoutEnabled,
+      AccountTimeoutWorker,
+    });
   }
-
-  return {
-    pm: {},
-  };
 };

resources/js/next/config/user.js

@@ -1,7 +1,8 @@
+import { getGlobalVariable, setGlobalPMVariables } from "../globalVariables";
 import datetime_format from "../../data/datetime_formats.json";
 
-export default ({ global }) => {
-  const { moment } = global;
+export default () => {
+  const moment = getGlobalVariable("moment");
   const userID = document.head.querySelector("meta[name=\"user-id\"]");
   const userFullName = document.head.querySelector("meta[name=\"user-full-name\"]");
   const userAvatar = document.head.querySelector("meta[name=\"user-avatar\"]");
@@ -43,10 +44,8 @@ export default ({ global }) => {
     }
   }
 
-  return {
-    pm: {
-      user,
-      app,
-    },
-  };
+  setGlobalPMVariables({
+    user,
+    app,
+  });
 };

resources/js/next/libraries/broadcast.js

@@ -1,6 +1,7 @@
 import Echo from "laravel-echo";
+import { setGlobalVariables } from "../globalVariables";
 
-export default (globalInput) => {
+export default () => {
   // Verify if the broadcasting is enabled
   if (Processmaker && Processmaker.broadcasting) {
     const config = Processmaker.broadcasting;
@@ -11,15 +12,9 @@ export default (globalInput) => {
       Pusher.logToConsole = config.debug;
     }
 
-    return {
-      global: {
-        Echo: new Echo(config),
-        Pusher,
-      },
-    };
+    setGlobalVariables({
+      Echo: new Echo(config),
+      Pusher,
+    });
   }
-
-  return {
-    global: {},
-  };
 };

resources/js/next/modeler.js

@@ -1,10 +1,12 @@
-const nodeTypes = [];
-nodeTypes.get = function (id) {
-  return this.find((node) => node.id === id);
-};
+import { setGlobalPMVariables } from "./globalVariables";
+
+export default () => {
+  const nodeTypes = [];
+  nodeTypes.get = function (id) {
+    return this.find((node) => node.id === id);
+  };
 
-export default {
-  pm: {
+  setGlobalPMVariables({
     nodeTypes,
-  },
+  });
 };

resources/js/next/monaco.js

@@ -1,18 +1,9 @@
 import MonacoEditor from "vue-monaco";
-// import { getGlobalVariable, setGlobalVariable } from "./globalVariables";
+import { getGlobalVariable, setGlobalVariable } from "./globalVariables";
 
-// const Vue = getGlobalVariable("Vue");
-
-// Vue.component("MonacoEditor", MonacoEditor);
-// setGlobalVariable("VueMonaco", MonacoEditor);
-// setGlobalVariable("monaco", MonacoEditor);
-
-export default {
-  global: {
-    monaco: MonacoEditor,
-    VueMonaco: MonacoEditor,
-  },
-  components: {
-    MonacoEditor,
-  },
+export default () => {
+  const Vue = getGlobalVariable("Vue");
+  Vue.component("MonacoEditor", MonacoEditor);
+  setGlobalVariable("VueMonaco", MonacoEditor);
+  setGlobalVariable("monaco", MonacoEditor);
 };

resources/js/next/screenBuilder.js

@@ -15,8 +15,8 @@ const addScriptsToDOM = async function (scripts) {
   }
 };
 
-export default ({ global }) => {
-  const { Vue } = global;
+export default () => {
+  const Vue = getGlobalVariable("Vue");
 
   const componentsScreenBuilder = ["VueFormRenderer", "Task"];
 

resources/js/next/setupMain.js

@@ -0,0 +1,74 @@
+import Vue from "vue";
+import * as vue from "vue";
+import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";
+import moment from "moment-timezone";
+import {
+  setUses, setGlobalVariables, setGlobalPMVariables,
+} from "./globalVariables";
+
+import vuex from "./libraries/vuex";
+import bootstrap from "./libraries/bootstrap";
+import jquery from "./libraries/jquery";
+import lodash from "./libraries/lodash";
+import sharedComponents from "./libraries/sharedComponents";
+
+import vueRouter from "./libraries/vueRouter";
+import vueCookies from "./libraries/vueCookies";
+import processmaker from "./config/processmaker";
+import broadcast from "./libraries/broadcast";
+import i18n from "./config/i18n";
+import notifications from "./config/notifications";
+import user from "./config/user";
+import session from "./config/session";
+import openAI from "./config/openAI";
+
+export const setupMain = () => {
+  window.Vue = Vue;
+  window.vue = vue;
+  window.moment = moment;
+
+  window.Vue.prototype.moment = moment;
+  window.Vue.use(BootstrapVue);
+  window.Vue.use(BootstrapVueIcons);
+
+  window.ProcessMaker = {
+    EventBus: new Vue(),
+    events: new Vue(),
+    packages: window.packages,
+  };
+
+  // Vuex
+  setUses(Vue, vuex.use);
+
+  // Bootstrap
+  setGlobalVariables(bootstrap.global);
+
+  // Jquery
+  setGlobalVariables(jquery.global);
+
+  // VueRouter
+  setGlobalVariables(vueRouter.global);
+  setGlobalPMVariables(vueRouter.pm);
+  setUses(Vue, vueRouter.use);
+
+  // VueCookies
+  setUses(Vue, vueCookies.use);
+
+  // INIT CONFIGURATION
+  processmaker();
+  broadcast();
+  i18n();
+  notifications();
+  user();
+  session();
+  openAI();
+
+  // Initialize components asyncronously
+  import("./components/index");
+  import("./config/accesibility");
+
+  import("./layout/sidebar");
+  import("./layout/navbar");
+};
+
+export default { };