Merge pull request #7812 from ProcessMaker/feature/FOUR-20583-A

FOUR-20583: Improve vendors

Author: pmPaulis

ProcessMaker/Http/Controllers/CasesController.php

@@ -20,10 +20,12 @@ class CasesController extends Controller
      */
     public function index()
     {
+        $manager = app(ScreenBuilderManager::class);
+        event(new ScreenBuilderStarting($manager, 'FORM'));
         $currentUser = Auth::user()->only(['id', 'username', 'fullname', 'firstname', 'lastname', 'avatar']);
 
         // This is a temporary API the engine team will provide the new
-        return view('cases.casesMain', compact('currentUser'));
+        return view('cases.casesMain', compact('currentUser', 'manager'));
     }
 
     /**

resources/js/components/TreeView.vue

@@ -37,7 +37,7 @@ export default {
     },
   },
   mounted() {
-    const jsonCrackEmbed = this.$refs.jsonCrackEmbed;
+    const { jsonCrackEmbed } = this.$refs;
     const json = this.jsonData === "" ? "{}" : this.jsonData;
     const options = {
       theme: "light",

resources/js/next/badPractices.js

@@ -0,0 +1,53 @@
+/**
+ * BAD PRACTICES
+ */
+
+// Use multiple forms of an event bus.
+window.ProcessMaker = {
+  EventBus: new Vue(),
+  events: new Vue()
+};
+
+// Force to overload the vue object
+window.Vue.prototype.moment = moment;
+
+// Load all statements in a single file bootstrap.js
+
+// Overload the window.ProcessMaker variable without using the setGlobalVariable function
+
+// Use local variables instead of window.ProcessMaker
+window.ProcessMaker.removeNotifications = (messageIds = [], urls = []) => {
+  return window.ProcessMaker.apiClient.put("/read_notifications", { message_ids: messageIds, routes: urls }).then(() => {
+    messageIds.forEach((messageId) => {
+      ProcessMaker.notifications.splice(ProcessMaker.notifications.findIndex((x) => x.id === messageId), 1);
+    });
+
+    urls.forEach((url) => {
+      const messageIndex = ProcessMaker.notifications.findIndex((x) => x.url === url);
+      if (messageIndex >= 0) {
+        ProcessMaker.removeNotification(ProcessMaker.notifications[messageIndex].id);
+      }
+    });
+  });
+};
+
+// Remove the saved search unneeded
+class InjectJavascript
+{
+    public function handle($request, Closure $next)
+    {
+        $response = $next($request);
+        if (get_class($response) !== Response::class) {
+            return $response;
+        }
+        $content = $response->getContent();
+        $tag = '';
+        $tag .= '<script src="' . mix('/js/addSaveButton.js', 'vendor/processmaker/packages/package-savedsearch') . '"></script>';
+        $tag .= '<script src="' . mix('/js/listenForRecounts.js', 'vendor/processmaker/packages/package-savedsearch') . '"></script>';
+        $content = str_replace('</body>', $tag . "\n</body>", $content);
+        $response->setContent($content);
+
+        return $response;
+    }
+}
+

resources/js/next/components/index.js

@@ -0,0 +1,112 @@
+import { getGlobalVariable } from "../globalVariables";
+
+// Multiselect
+
+const Vue = getGlobalVariable("Vue");
+
+const pmComponents = {
+  // Components folder
+  AvatarImage: () => import("../../components/AvatarImage.vue"),
+  Breadcrumbs: () => import("../../components/Breadcrumbs.vue"),
+  Confirm: () => import("../../components/Confirm.vue"),
+  CustomActions: () => import("../../components/CustomActions.vue"),
+  DetailRow: () => import("../../components/DetailRow.vue"),
+  FilterBar: () => import("../../components/FilterBar.vue"),
+  Menu: () => import("../../components/Menu.vue"),
+  Message: () => import("../../components/Message.vue"),
+  NavbarProfile: () => import("../../components/NavbarProfile.vue"),
+  PMBadgesFilters: () => import("../../components/PMBadgesFilters.vue"),
+  PMDatetimePicker: () => import("../../components/PMDatetimePicker.vue"),
+  PMDropdownSuggest: () => import("../../components/PMDropdownSuggest.vue"),
+  PMFloatingButtons: () => import("../../components/PMFloatingButtons.vue"),
+  PMFormSelectSuggest: () => import("../../components/PMFormSelectSuggest.vue"),
+  PMMessageResults: () => import("../../components/PMMessageResults.vue"),
+  PMMessageScreen: () => import("../../components/PMMessageScreen.vue"),
+  PMPanelWithCustomHeader: () => import("../../components/PMPanelWithCustomHeader.vue"),
+  PMPopoverConfirmation: () => import("../../components/PMPopoverConfirmation.vue"),
+  PMSearchBar: () => import("../../components/PMSearchBar.vue"),
+  PMTable: () => import("../../components/PMTable.vue"),
+  PMTabs: () => import("../../components/PMTabs.vue"),
+  Recommendations: () => import("../../components/Recommendations.vue"),
+  SelectFromApi: () => import("../../components/SelectFromApi.vue"),
+  SelectLanguage: () => import("../../components/SelectLanguage.vue"),
+  SelectScreen: () => import("../../components/SelectScreen.vue"),
+  SelectStatus: () => import("../../components/SelectStatus.vue"),
+  SelectUser: () => import("../../components/SelectUser.vue"),
+  SelectUserGroup: () => import("../../components/SelectUserGroup.vue"),
+  Session: () => import("../../components/Session.vue"),
+  Sidebaricon: () => import("../../components/Sidebaricon.vue"),
+  Timeline: () => import("../../components/Timeline.vue"),
+  TimelineItem: () => import("../../components/TimelineItem.vue"),
+  TreeView: () => import("../../components/TreeView.vue"),
+  // Shared components folder
+  AddToBundle: () => import("../../components/shared/AddToBundle"),
+  AddToProjectModal: () => import("../../components/shared/AddToProjectModal"),
+  AssetDependentTreeModal: () => import("../../components/shared/AssetDependentTreeModal.vue"),
+  AssetTreeModal: () => import("../../components/shared/AssetTreeModal.vue"),
+  BackendSelect: () => import("../../components/shared/BackendSelect.vue"),
+  BasicSearch: () => import("../../components/shared/BasicSearch.vue"),
+  CategorySelect: () => import("../../components/shared/CategorySelect.vue"),
+  ChangeLog: () => import("../../components/shared/ChangeLog.vue"),
+  ColorSchemeSelector: () => import("../../components/shared/ColorSchemeSelector.vue"),
+  Column: () => import("../../components/shared/Column.vue"),
+  ColumnChooser: () => import("../../components/shared/ColumnChooser.vue"),
+  ColumnConfig: () => import("../../components/shared/ColumnConfig.vue"),
+  DataCard: () => import("../../components/shared/DataCard.vue"),
+  DataFormatSelector: () => import("../../components/shared/DataFormatSelector.vue"),
+  DataMaskSelector: () => import("../../components/shared/DataMaskSelector.vue"),
+  DataNode: () => import("../../components/shared/DataNode.vue"),
+  DataTree: () => import("../../components/shared/DataTree.vue"),
+  DownloadSvgButton: () => import("../../components/shared/DownloadSvgButton.vue"),
+  DraggableFileUpload: () => import("../../components/shared/DraggableFileUpload.vue"),
+  EllipsisMenu: () => import("../../components/shared/EllipsisMenu.vue"),
+  FileUploadButton: () => import("../../components/shared/FileUploadButton.vue"),
+  FilterTable: () => import("../../components/shared/FilterTable.vue"),
+  IconDropdown: () => import("../../components/shared/IconDropdown.vue"),
+  IconSelector: () => import("../../components/shared/IconSelector.vue"),
+  InputImageCarousel: () => import("../../components/shared/InputImageCarousel.vue"),
+  LaunchpadSettingsModal: () => import("../../components/shared/LaunchpadSettingsModal.vue"),
+  Modal: () => import("../../components/shared/Modal.vue"),
+  ModalSaveVersion: () => import("../../components/shared/ModalSaveVersion.vue"),
+  MultiThumbnailFileUploader: () => import("../../components/shared/MultiThumbnailFileUploader.vue"),
+  PaginationTable: () => import("../../components/shared/PaginationTable.vue"),
+  PmqlInput: () => import("../../components/shared/PmqlInput.vue"),
+  PmqlInputFilters: () => import("../../components/shared/PmqlInputFilters.vue"),
+  ProjectSelect: () => import("../../components/shared/ProjectSelect.vue"),
+  PTab: () => import("../../components/shared/PTab.vue"),
+  PTabs: () => import("../../components/shared/PTabs.vue"),
+  Required: () => import("../../components/shared/Required.vue"),
+  SidebarButton: () => import("../../components/shared/SidebarButton.vue"),
+  SidebarNav: () => import("../../components/shared/SidebarNav.vue"),
+  SliderWithInput: () => import("../../components/shared/SliderWithInput.vue"),
+  // Common components folder
+  DataTreeToggle: () => import("../../components/common/data-tree-toggle.vue"),
+  // Tasks components folder
+  MobileTasks: () => import("../../tasks/components/MobileTasks.vue"),
+  NavbarTaskMobile: () => import("../../tasks/components/NavbarTaskMobile.vue"),
+  QuickFillPreview: () => import("../../tasks/components/QuickFillPreview.vue"),
+  ReassignMobileModal: () => import("../../tasks/components/ReassignMobileModal.vue"),
+  SplitpaneContainer: () => import("../../tasks/components/SplitpaneContainer.vue"),
+  TaskDetailsMobile: () => import("../../tasks/components/TaskDetailsMobile.vue"),
+  TaskListRowButtons: () => import("../../tasks/components/TaskListRowButtons.vue"),
+  TaskLoading: () => import("../../tasks/components/TaskLoading.vue"),
+  TaskSaveNotification: () => import("../../tasks/components/TaskSaveNotification.vue"),
+  TaskSavePanel: () => import("../../tasks/components/TaskSavePanel.vue"),
+  TasksHome: () => import("../../tasks/components/TasksHome.vue"),
+  TasksList: () => import("../../tasks/components/TasksList.vue"),
+  TasksListCounter: () => import("../../tasks/components/TasksListCounter.vue"),
+  TasksPreview: () => import("../../tasks/components/TasksPreview.vue"),
+  TaskTooltip: () => import("../../tasks/components/TaskTooltip.vue"),
+  TaskView: () => import("../../tasks/components/TaskView.vue"),
+};
+
+Object.entries(pmComponents).forEach(([key, component]) => {
+  Vue.component(key, component);
+});
+
+// Multiselect
+Vue.component("Multiselect", (resolve, reject) => {
+  import("@processmaker/vue-multiselect").then((Multiselect) => {
+    resolve(Multiselect.Multiselect);
+  }).catch(reject);
+});

resources/js/next/config/accesibility.js

@@ -0,0 +1,6 @@
+import AccessibilityMixin from "./components/common/mixins/accessibility";
+import { getGlobalVariable } from "../globalVariables";
+
+const Vue = getGlobalVariable("Vue");
+
+Vue.mixin(AccessibilityMixin);

resources/js/next/config/i18n.js

@@ -0,0 +1,59 @@
+import i18next from "i18next";
+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 { setGlobalPMVariable, getGlobalVariable } from "../globalVariables";
+
+const Vue = getGlobalVariable("Vue");
+
+const isProd = document.head.querySelector("meta[name=\"is-prod\"]")?.content === "true";
+let translationsLoaded = false;
+
+const mdates = JSON.parse(
+  document.head.querySelector("meta[name=\"i18n-mdate\"]")?.content,
+);
+
+const missingTranslations = new Set();
+const missingTranslation = function (value) {
+  if (missingTranslations.has(value)) { return; }
+  missingTranslations.add(value);
+  if (!isProd) {
+    console.warn("Missing Translation:", value);
+  }
+};
+
+const i18nPromise = i18next.use(Backend).init({
+  lng: document.documentElement.lang,
+  fallbackLng: "en", // default language when no translations
+  returnEmptyString: false, // When a translation is an empty string, return the default language, not empty
+  nsSeparator: false,
+  keySeparator: false,
+  parseMissingKeyHandler(value) {
+    if (!translationsLoaded) { return value; }
+    // Report that a translation is missing
+    missingTranslation(value);
+    // Fallback to showing the english version
+    return value;
+  },
+  backend: {
+    backends: [
+      LocalStorageBackend, // Try cache first
+      XHR,
+    ],
+    backendOptions: [
+      { versions: mdates },
+      { loadPath: "/i18next/fetch/{{lng}}/_default" },
+    ],
+  },
+});
+
+i18nPromise.then(() => { translationsLoaded = true; });
+
+Vue.use(VueI18Next);
+Vue.mixin({ i18n: new VueI18Next(i18next) });
+
+setGlobalPMVariable("i18n", i18next);
+setGlobalPMVariable("i18nPromise", i18nPromise);
+setGlobalPMVariable("missingTranslations", missingTranslations);
+setGlobalPMVariable("missingTranslation", missingTranslation);

resources/js/next/config/notifications.js

@@ -0,0 +1,36 @@
+import { getGlobalPMVariable, setGlobalPMVariable } from "../globalVariables";
+
+const apiClient = getGlobalPMVariable("apiClient");
+
+const notifications = [];
+
+const pushNotification = (notification) => {
+  if (notifications.filter((x) => x.id === notification).length === 0) {
+    notifications.push(notification);
+  }
+};
+
+const removeNotifications = (messageIds = [], urls = []) => apiClient.put("/read_notifications", { message_ids: messageIds, routes: urls }).then(() => {
+  messageIds.forEach((messageId) => {
+    notifications.splice(notifications.findIndex((x) => x.id === messageId), 1);
+  });
+
+  urls.forEach((url) => {
+    const messageIndex = notifications.findIndex((x) => x.url === url);
+    if (messageIndex >= 0) {
+      removeNotifications(notifications[messageIndex].id);
+    }
+  });
+});
+
+const unreadNotifications = (messageIds = [], urls = []) => apiClient.put("/unread_notifications", { message_ids: messageIds, routes: urls });
+
+const $notifications = {
+  icons: {},
+};
+
+setGlobalPMVariable("notifications", notifications);
+setGlobalPMVariable("pushNotification", pushNotification);
+setGlobalPMVariable("removeNotifications", removeNotifications);
+setGlobalPMVariable("unreadNotifications", unreadNotifications);
+setGlobalPMVariable("$notifications", $notifications);

resources/js/next/config/openAI.js

@@ -0,0 +1,9 @@
+import { setGlobalPMVariable } from "../globalVariables";
+
+const openAi = document.head.querySelector("meta[name=\"open-ai-nlq-to-pmql\"]");
+
+setGlobalPMVariable("openAi", openAi ? {
+  enabled: openAi.content,
+} : {
+  enabled: false,
+});