+ @yield('content')
+
+ Your user session is expiring. If your session expires, all of your unsaved data will be lost.
Would you like to stay connected?
", + e.data.data.time, + AccountTimeoutWarnSeconds, + ); + } + if (e.data.method === "timedOut") { + window.location = "/logout?timeout=true"; + } + }); + + // in some cases it's necessary to start manually + AccountTimeoutWorker.postMessage({ + method: "start", + data: { + timeout: AccountTimeoutLength, + warnSeconds: AccountTimeoutWarnSeconds, + enabled: AccountTimeoutEnabled, + }, + }); + + Echo.private(`ProcessMaker.Models.User.${user.id}`) + .notification((token) => { + pushNotification(token); + }) + .listen(".SessionStarted", (e) => { + const lifetime = parseInt(eval(e.lifetime)); + if (isSameDevice(e)) { + AccountTimeoutWorker.postMessage({ + method: "start", + data: { + timeout: lifetime, + warnSeconds: AccountTimeoutWarnSeconds, + enabled: AccountTimeoutEnabled, + }, + }); + if (closeSessionModal) { + closeSessionModal(); + } + } + }) + .listen(".Logout", (e) => { + if (isSameDevice(e) && window.location.pathname.indexOf("/logout") === -1) { + const localDeviceId = Vue.$cookies.get(e.device_variable); + const redirectLogoutinterval = setInterval(() => { + const newDeviceId = Vue.$cookies.get(e.device_variable); + if (localDeviceId !== newDeviceId) { + clearInterval(redirectLogoutinterval); + window.location.href = "/logout"; + } + }, 100); + } + }) + .listen(".SecurityLogDownloadJobCompleted", (e) => { + if (e.success) { + const { link } = e; + const { message } = e; + alert(message, "success", 0, false, false, link); + } else { + alert(e.message, "warning"); + } + }); + + setGlobalPMVariables({ + AccountTimeoutLength, + AccountTimeoutWarnSeconds, + AccountTimeoutEnabled, + AccountTimeoutWorker, + }); + } +}; diff --git a/resources/js/next/config/user.js b/resources/js/next/config/user.js new file mode 100644 index 0000000000..85e26880c2 --- /dev/null +++ b/resources/js/next/config/user.js @@ -0,0 +1,51 @@ +import { getGlobalVariable, setGlobalPMVariables } from "../globalVariables"; +import datetime_format from "../../data/datetime_formats.json"; + +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\"]"); + const formatDate = document.head.querySelector("meta[name=\"datetime-format\"]"); + const timezone = document.head.querySelector("meta[name=\"timezone\"]"); + const appUrl = document.head.querySelector("meta[name=\"app-url\"]"); + + const app = appUrl ? { + url: appUrl.content, + } : null; + + let user; + if (userID) { + user = { + id: userID.content, + datetime_format: formatDate?.content, + calendar_format: formatDate?.content, + timezone: timezone?.content, + fullName: userFullName?.content, + avatar: userAvatar?.content, + }; + + datetime_format.forEach((value) => { + if (formatDate.content === value.format) { + user.datetime_format = value.momentFormat; + user.calendar_format = value.calendarFormat; + } + }); + + if (user) { + moment.tz.setDefault(user.timezone); + moment.defaultFormat = user.datetime_format; + moment.defaultFormatUtc = user.datetime_format; + } + + if (document.documentElement.lang) { + moment.locale(document.documentElement.lang); + user.lang = document.documentElement.lang; + } + } + + setGlobalPMVariables({ + user, + app, + }); +}; diff --git a/resources/js/next/globalVariables.js b/resources/js/next/globalVariables.js new file mode 100644 index 0000000000..395c34cfcf --- /dev/null +++ b/resources/js/next/globalVariables.js @@ -0,0 +1,76 @@ +export default {}; + +export const setGlobalVariable = (key, value) => { + window[key] = value; +}; + +export const setGlobalVariables = (variables) => { + if (typeof variables === "object") { + Object.entries(variables).forEach(([key, value]) => { + window[key] = value; + }); + } +}; + +export const getGlobalVariable = (key) => window[key]; + +export const setGlobalPMVariable = (key, value) => { + if (!window.ProcessMaker) { + window.ProcessMaker = {}; + } + + window.ProcessMaker[key] = value; +}; + +export const setGlobalPMVariables = (variables) => { + if (!window.ProcessMaker) { + window.ProcessMaker = {}; + } + + Object.assign(window.ProcessMaker, variables); +}; + +export const getGlobalPMVariable = (key) => window.ProcessMaker[key]; + +export const setUses = (Vue, uses) => { + if (typeof uses === "object") { + Object.values(uses).forEach((use) => { + if (use) { + Vue.use(use); + } + }); + } +}; + +export const setMixins = (Vue, mixins) => { + if (typeof mixins === "object") { + Object.values(mixins).forEach((mixin) => { + if (mixin) { + Vue.mixin(mixin); + } + }); + } +}; + +export const setGlobalComponents = (Vue, components) => { + Object.entries(components).forEach(([key, component]) => { + if (component) { + Vue.component(key, component); + } + }); +}; + +export const loadModulesSequentially = async (modules) => { + const loadedModules = []; + + for (const modulePath of modules) { + try { + const module = await modulePath; + loadedModules.push(module); + } catch (error) { + console.error(`Error module: ${modulePath}`, error); + } + } + + return loadedModules; +}; diff --git a/resources/js/next/layout/navbar.js b/resources/js/next/layout/navbar.js new file mode 100644 index 0000000000..21edd620a7 --- /dev/null +++ b/resources/js/next/layout/navbar.js @@ -0,0 +1,259 @@ +import newRequestModal from "../../components/requests/requestModal.vue"; +import requestModal from "../../components/requests/modal.vue"; +import requestModalMobile from "../../components/requests/modalMobile.vue"; +import WelcomeModal from "../../Mobile/WelcomeModal.vue"; +import notifications from "../../notifications/components/notifications.vue"; +import sessionModalComponent from "../../components/Session.vue"; +import ConfirmationModal from "../../components/Confirm.vue"; +import MessageModal from "../../components/Message.vue"; +import NavbarProfile from "../../components/NavbarProfile.vue"; +import Menu from "../../components/Menu.vue"; +import { getGlobalVariable, getGlobalPMVariable, setGlobalPMVariable } from "../globalVariables"; + +const Vue = getGlobalVariable("Vue"); +const $ = getGlobalVariable("$"); +const events = getGlobalPMVariable("events"); + +Vue.component("LanguageSelectorButton", (resolve) => { + if (window.ProcessMaker.languageSelectorButtonComponent) { + resolve(window.ProcessMaker.languageSelectorButtonComponent); + } else { + window.ProcessMaker.languageSelectorButtonComponentResolve = resolve; + } +}); + +// Variables +const browser = navigator.userAgent; +const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(browser); + +const mobileApp = !!isMobileDevice; +const isMobileNavbar = events.$cookies.get("isMobile"); // Verify is in mobile mode + +// Set our own specific alert function at the ProcessMaker global object that could +// potentially be overwritten by some custom theme support +const alert = function (msg, variant, showValue = 5, stayNextScreen = false, showLoader = false, msgLink = "", msgTitle = "") { + if (showValue === 0) { + // Just show it indefinitely, no countdown + showValue = true; + } + // amount of items allowed in array + if (ProcessMaker.navbar.alerts.length > 5) { + ProcessMaker.navbar.alerts.shift(); + } + ProcessMaker.navbar.alerts.push({ + alertText: msg, + alertLink: msgLink, + alertTitle: msgTitle, + alertShow: showValue, + alertVariant: String(variant), + showLoader, + stayNextScreen, + timestamp: Date.now(), + }); +}; + +// Setup our login modal +const sessionModal = function (title, message, time, warnSeconds) { + ProcessMaker.navbar.sessionTitle = title || __("Session Warning"); + ProcessMaker.navbar.sessionMessage = message || __("Your session is about to expire."); + ProcessMaker.navbar.sessionTime = time; + ProcessMaker.navbar.sessionWarnSeconds = warnSeconds; + ProcessMaker.navbar.sessionShow = true; +}; + +const closeSessionModal = function () { + ProcessMaker.navbar.sessionShow = false; +}; + +// Set out own specific confirm modal. +const confirmModal = function ( + title, + message, + variant, + callback, + size = "md", + dataTestClose = "confirm-btn-close", + dataTestOk = "confirm-btn-ok", +) { + ProcessMaker.navbar.confirmTitle = title || __("Confirm"); + ProcessMaker.navbar.confirmMessage = message || __("Are you sure you want to delete?"); + ProcessMaker.navbar.confirmVariant = variant; + ProcessMaker.navbar.confirmCallback = callback; + ProcessMaker.navbar.confirmShow = true; + ProcessMaker.navbar.confirmSize = size; + ProcessMaker.navbar.confirmDataTestClose = dataTestClose; + ProcessMaker.navbar.confirmDataTestOk = dataTestOk; +}; + +// Set out own specific message modal. +const messageModal = function (title, message, variant, callback) { + ProcessMaker.navbar.messageTitle = title || __("Message"); + ProcessMaker.navbar.messageMessage = message || __(""); + ProcessMaker.navbar.messageVariant = variant; + ProcessMaker.navbar.messageCallback = callback; + ProcessMaker.navbar.messageShow = true; +}; + +// Assign our navbar component to our global ProcessMaker object +const navbar = new Vue({ + el: "#navbar", + components: { + TopMenu: Menu, + requestModal, + notifications, + sessionModal: sessionModalComponent, + ConfirmationModal, + MessageModal, + NavbarProfile, + newRequestModal, + GlobalSearch: (resolve) => { + if (window.ProcessMaker.globalSearchComponent) { + resolve(window.ProcessMaker.globalSearchComponent); + } else { + window.ProcessMaker.globalSearchComponentResolve = resolve; + } + }, + }, + data() { + return { + screenBuilder: null, + messages: ProcessMaker.notifications, + alerts: this.loadLocalAlerts(), + confirmTitle: "", + confirmMessage: "", + confirmVariant: "", + confirmCallback: "", + confirmSize: "md", + confirmDataTestClose: "confirm-btn-close", + confirmDataTestOk: "confirm-btn-ok", + messageTitle: "", + messageMessage: "", + messageVariant: "", + messageCallback: "", + confirmShow: false, + sessionShow: false, + messageShow: false, + sessionTitle: "", + sessionMessage: "", + sessionTime: "", + sessionWarnSeconds: "", + taskTitle: "", + isMobile: false, + isMobileDevice: mobileApp, + }; + }, + watch: { + alerts(array) { + this.saveLocalAlerts(array); + }, + }, + mounted() { + Vue.nextTick() // This is needed to override the default alert method. + .then(() => { + this.onResize(); + window.addEventListener("resize", this.onResize, { passive: true }); + + if (document.querySelector("meta[name='alert']")) { + ProcessMaker.alert( + document.querySelector("meta[name='alertMessage']").getAttribute("content"), + document.querySelector("meta[name='alertVariant']").getAttribute("content"), + ); + } + const findSB = setInterval(() => { + this.screenBuilder = window.ProcessMaker.ScreenBuilder; // window.ProcessMaker.ScreenBuilder is not defined in the global scope + if (this.screenBuilder) { + clearInterval(findSB); + } + }, 80); + }); + }, + methods: { + alertDownChanged(dismissCountDown, item) { + item.alertShow = dismissCountDown; + this.saveLocalAlerts(this.alerts); + }, + alertDismissed(alert) { + alert.alertShow = 0; + const index = this.alerts.indexOf(alert); + let copy = _.cloneDeep(this.alerts); + index > -1 ? copy.splice(index, 1) : null; + // remove old alerts + copy = copy.filter((item) => ((Date.now() - item.timestamp) / 1000) < item.alertShow); + this.saveLocalAlerts(copy); + }, + loadLocalAlerts() { + try { + return window.localStorage.processmakerAlerts + && window.localStorage.processmakerAlerts.substr(0, 1) === "[" + ? JSON.parse(window.localStorage.processmakerAlerts) : []; + } catch (e) { + return []; + } + }, + saveLocalAlerts(array) { + const nextScreenAlerts = array.filter((alert) => alert.stayNextScreen); + window.localStorage.processmakerAlerts = JSON.stringify(nextScreenAlerts); + }, + switchToMobile() { + this.$cookies.set("isMobile", true); + window.open("/requests", "_self"); + }, + getRoutes() { + if (this.$refs.breadcrumbs) { + return this.$refs.breadcrumbs.list; + } + return []; + }, + setRoutes(routes) { + if (this.$refs.breadcrumbs) { + return this.$refs.breadcrumbs.updateRoutes(routes); + } + return false; + }, + onResize() { + this.isMobile = window.innerWidth < 992; + }, + }, +}); + +setGlobalPMVariable("mobileApp", mobileApp); +setGlobalPMVariable("alert", alert); +setGlobalPMVariable("sessionModal", sessionModal); +setGlobalPMVariable("closeSessionModal", closeSessionModal); +setGlobalPMVariable("confirmModal", confirmModal); +setGlobalPMVariable("messageModal", messageModal); +setGlobalPMVariable("navbar", navbar); +// Breadcrumbs are now part of the navbar component. Alias it here. +setGlobalPMVariable("breadcrumbs", navbar); + +// Assign our navbar component to our global ProcessMaker object +if (isMobileNavbar === "true") { + const navbarMobile = new Vue({ + el: "#navbarMobile", + components: { + requestModalMobile, + WelcomeModal, + }, + data() { + return { + display: true, + }; + }, + mounted() { + if (this.$cookies.get("firstMounted") === "true") { + $("#welcomeModal").modal("show"); + } + }, + methods: { + switchToDesktop() { + this.$cookies.set("isMobile", false); + window.location.reload(); + }, + onResize() { + this.isMobile = window.innerWidth < 992; + }, + }, + }); + + setGlobalPMVariable("navbarMobile", navbarMobile); +} diff --git a/resources/js/next/layout/sidebar.js b/resources/js/next/layout/sidebar.js new file mode 100644 index 0000000000..b3854f94de --- /dev/null +++ b/resources/js/next/layout/sidebar.js @@ -0,0 +1,21 @@ +import { sanitizeUrl } from "@braintree/sanitize-url"; +// import VueHtml2Canvas from "vue-html2canvas"; +import Sidebaricon from "../../components/Sidebaricon.vue"; +import { getGlobalVariable } from "../globalVariables"; + +const Vue = getGlobalVariable("Vue"); + +// Vue.use(VueHtml2Canvas); +Vue.prototype.$sanitize = sanitizeUrl; + +const sidebar = new Vue({ + el: "#sidebar", + components: { + Sidebaricon, + }, + data() { + return { + expanded: false, + }; + }, +}); diff --git a/resources/js/next/libraries/bootstrap.js b/resources/js/next/libraries/bootstrap.js new file mode 100644 index 0000000000..bc71e0f73d --- /dev/null +++ b/resources/js/next/libraries/bootstrap.js @@ -0,0 +1,9 @@ +import * as bootstrap from "bootstrap"; + +import("bootstrap-vue/dist/bootstrap-vue.css"); + +export default { + global: { + bootstrap, + }, +}; diff --git a/resources/js/next/libraries/broadcast.js b/resources/js/next/libraries/broadcast.js new file mode 100644 index 0000000000..0cb4ace0c2 --- /dev/null +++ b/resources/js/next/libraries/broadcast.js @@ -0,0 +1,20 @@ +import Echo from "laravel-echo"; +import { setGlobalVariables } from "../globalVariables"; + +export default () => { + // Verify if the broadcasting is enabled + if (Processmaker && Processmaker.broadcasting) { + const config = Processmaker.broadcasting; + let Pusher; + + if (config.broadcaster === "pusher") { + Pusher = require("pusher-js"); + Pusher.logToConsole = config.debug; + } + + setGlobalVariables({ + Echo: new Echo(config), + Pusher, + }); + } +}; diff --git a/resources/js/next/libraries/jquery.js b/resources/js/next/libraries/jquery.js new file mode 100644 index 0000000000..a11f9d8fa7 --- /dev/null +++ b/resources/js/next/libraries/jquery.js @@ -0,0 +1,8 @@ +import * as jQuery from "jquery"; + +export default { + global: { + jQuery, + $: jQuery, + }, +}; diff --git a/resources/js/next/libraries/lodash.js b/resources/js/next/libraries/lodash.js new file mode 100644 index 0000000000..f6fe0f4ac6 --- /dev/null +++ b/resources/js/next/libraries/lodash.js @@ -0,0 +1,6 @@ +import lodash from "lodash"; + +window._ = lodash; +window.debounce = lodash.debounce; + +export default {}; diff --git a/resources/js/next/libraries/modelerInspector.js b/resources/js/next/libraries/modelerInspector.js new file mode 100644 index 0000000000..fc5c03e009 --- /dev/null +++ b/resources/js/next/libraries/modelerInspector.js @@ -0,0 +1,6 @@ +// import VueFormElements from "@processmaker/vue-form-elements"; +import * as ModelerInspector from "../../processes/modeler/components/inspector/index"; + +window.ModelerInspector = ModelerInspector; + +export default {}; diff --git a/resources/js/next/libraries/popper.js b/resources/js/next/libraries/popper.js new file mode 100644 index 0000000000..519a53b597 --- /dev/null +++ b/resources/js/next/libraries/popper.js @@ -0,0 +1 @@ +window.Popper = require("popper.js").default; diff --git a/resources/js/next/libraries/sharedComponents.js b/resources/js/next/libraries/sharedComponents.js new file mode 100644 index 0000000000..63d1fcee22 --- /dev/null +++ b/resources/js/next/libraries/sharedComponents.js @@ -0,0 +1,5 @@ +import * as SharedComponents from "../../components/shared"; + +window.SharedComponents = SharedComponents; + +export default {}; diff --git a/resources/js/next/libraries/vueCookies.js b/resources/js/next/libraries/vueCookies.js new file mode 100644 index 0000000000..f4829ef252 --- /dev/null +++ b/resources/js/next/libraries/vueCookies.js @@ -0,0 +1,7 @@ +import VueCookies from "vue-cookies"; + +export default { + use: { + VueCookies, + }, +}; diff --git a/resources/js/next/libraries/vueDeepset.js b/resources/js/next/libraries/vueDeepset.js new file mode 100644 index 0000000000..931acd4b9e --- /dev/null +++ b/resources/js/next/libraries/vueDeepset.js @@ -0,0 +1,3 @@ +import * as VueDeepSet from "vue-deepset"; + +window.Vue.use(VueDeepSet); diff --git a/resources/js/next/libraries/vueFormElements.js b/resources/js/next/libraries/vueFormElements.js new file mode 100644 index 0000000000..ddd4b0c563 --- /dev/null +++ b/resources/js/next/libraries/vueFormElements.js @@ -0,0 +1,5 @@ +import VueFormElements from "@processmaker/vue-form-elements"; + +window.VueFormElements = VueFormElements; + +export default {}; diff --git a/resources/js/next/libraries/vueRouter.js b/resources/js/next/libraries/vueRouter.js new file mode 100644 index 0000000000..c59d5d2884 --- /dev/null +++ b/resources/js/next/libraries/vueRouter.js @@ -0,0 +1,15 @@ +import Router from "vue-router"; + +export default { + global: { + VueRouter: Router, + }, + pm: { + Router: new Router({ + mode: "history", + }), + }, + use: { + Router, + }, +}; diff --git a/resources/js/next/libraries/vueTable.js b/resources/js/next/libraries/vueTable.js new file mode 100644 index 0000000000..a88c2fb50b --- /dev/null +++ b/resources/js/next/libraries/vueTable.js @@ -0,0 +1,3 @@ +import { install as VuetableInstall } from "vuetable-2"; + +VuetableInstall(window.Vue); diff --git a/resources/js/next/libraries/vuex.js b/resources/js/next/libraries/vuex.js new file mode 100644 index 0000000000..e71f405bd5 --- /dev/null +++ b/resources/js/next/libraries/vuex.js @@ -0,0 +1,9 @@ +import Vuex from "vuex"; +import GlobalStore from "../../globalStore"; + +export default { + use: { + Vuex, + GlobalStore, + }, +}; diff --git a/resources/js/next/modeler.js b/resources/js/next/modeler.js new file mode 100644 index 0000000000..d16da21b52 --- /dev/null +++ b/resources/js/next/modeler.js @@ -0,0 +1,12 @@ +import { setGlobalPMVariables } from "./globalVariables"; + +export default () => { + const nodeTypes = []; + nodeTypes.get = function (id) { + return this.find((node) => node.id === id); + }; + + setGlobalPMVariables({ + nodeTypes, + }); +}; diff --git a/resources/js/next/monaco.js b/resources/js/next/monaco.js new file mode 100644 index 0000000000..bf37bc0e09 --- /dev/null +++ b/resources/js/next/monaco.js @@ -0,0 +1,9 @@ +import MonacoEditor from "vue-monaco"; +import { getGlobalVariable, setGlobalVariable } from "./globalVariables"; + +export default () => { + const Vue = getGlobalVariable("Vue"); + Vue.component("MonacoEditor", MonacoEditor); + setGlobalVariable("VueMonaco", MonacoEditor); + setGlobalVariable("monaco", MonacoEditor); +}; diff --git a/resources/js/next/screenBuilder.js b/resources/js/next/screenBuilder.js new file mode 100644 index 0000000000..5ad5b1c470 --- /dev/null +++ b/resources/js/next/screenBuilder.js @@ -0,0 +1,52 @@ +import { + getGlobalVariable, setGlobalVariable, getGlobalPMVariable, setGlobalPMVariable, +} from "./globalVariables"; + +const addScriptsToDOM = async function (scripts) { + for (const script of scripts) { + await new Promise((resolve, reject) => { + const scriptElement = document.createElement("script"); + scriptElement.src = script; + scriptElement.async = false; + scriptElement.onload = resolve; + scriptElement.onerror = reject; + document.head.appendChild(scriptElement); + }); + } +}; + +export default () => { + const Vue = getGlobalVariable("Vue"); + + const componentsScreenBuilder = ["VueFormRenderer", "Task"]; + + componentsScreenBuilder.forEach((component) => { + Vue.component(component, (resolve, reject) => { + import("@processmaker/screen-builder/dist/vue-form-builder.css"); + import("@processmaker/screen-builder").then((ScreenBuilder) => { + const apiClient = getGlobalPMVariable("apiClient"); + Vue.use(ScreenBuilder.default); + + const { initializeScreenCache } = ScreenBuilder; + // Configuration Global object used by ScreenBuilder + // @link https://processmaker.atlassian.net/browse/FOUR-6833 Cache configuration + const screenCacheEnabled = document.head.querySelector("meta[name=\"screen-cache-enabled\"]")?.content ?? "false"; + const screenCacheTimeout = document.head.querySelector("meta[name=\"screen-cache-timeout\"]")?.content ?? "5000"; + const screen = { + cacheEnabled: screenCacheEnabled === "true", + cacheTimeout: Number(screenCacheTimeout), + }; + + setGlobalVariable("ScreenBuilder", ScreenBuilder); + setGlobalPMVariable("screen", screen); + // Initialize screen-builder cache + initializeScreenCache(apiClient, screen);// TODO: Its a bad practice to use the apiClient here + if (screenBuilderScripts) { + addScriptsToDOM(screenBuilderScripts).then(() => { + resolve(ScreenBuilder[component]); + }); + } + }).catch(reject); + }); + }); +}; diff --git a/resources/js/next/setupMain.js b/resources/js/next/setupMain.js new file mode 100644 index 0000000000..d9192ecac8 --- /dev/null +++ b/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 { }; diff --git a/resources/js/processes/screen-builder/typeDisplay.js b/resources/js/processes/screen-builder/typeDisplay.js index 8b6e412e08..81100912ae 100644 --- a/resources/js/processes/screen-builder/typeDisplay.js +++ b/resources/js/processes/screen-builder/typeDisplay.js @@ -1,42 +1,39 @@ -import { renderer, FormBuilderControls, globalProperties } from "@processmaker/screen-builder"; import formTypes from "./formTypes"; -const { - FormText, -} = renderer; +ProcessMaker.EventBus.$on("screen-builder-init", (manager) => { + const { FormBuilderControls, globalProperties } = window.ScreenBuilder; -const TableControl = FormBuilderControls.find((control) => control.rendererBinding === "FormMultiColumn"); -const RichTextControl = FormBuilderControls.find((control) => control.rendererBinding === "FormHtmlEditor"); -const FormRecordList = FormBuilderControls.find((control) => control.rendererBinding === "FormRecordList"); -const FormImage = FormBuilderControls.find((control) => control.rendererBinding === "FormImage"); -const FormAvatar = FormBuilderControls.find((control) => control.rendererBinding === "FormAvatar"); -const FormLoop = FormBuilderControls.find((control) => control.rendererBinding === "FormLoop"); -const FormNestedScreen = FormBuilderControls.find((control) => control.rendererBinding === "FormNestedScreen"); -const FileDownloadControl = FormBuilderControls.find((control) => control.builderBinding === "FileDownload"); -const FormListTable = FormBuilderControls.find((control) => control.rendererBinding === "FormListTable"); -const FormAnalyticsChart = FormBuilderControls.find((control) => control.rendererBinding === "FormAnalyticsChart"); -const FormCollectionViewControl = FormBuilderControls.find((control) => control.rendererBinding === "FormCollectionViewControl"); -// Remove editable inspector props -FormRecordList.control.inspector = FormRecordList.control.inspector.filter((prop) => prop.field !== "editable" && prop.field !== "form"); + const TableControl = FormBuilderControls.find((control) => control.rendererBinding === "FormMultiColumn"); + const RichTextControl = FormBuilderControls.find((control) => control.rendererBinding === "FormHtmlEditor"); + const FormRecordList = FormBuilderControls.find((control) => control.rendererBinding === "FormRecordList"); + const FormImage = FormBuilderControls.find((control) => control.rendererBinding === "FormImage"); + const FormAvatar = FormBuilderControls.find((control) => control.rendererBinding === "FormAvatar"); + const FormLoop = FormBuilderControls.find((control) => control.rendererBinding === "FormLoop"); + const FormNestedScreen = FormBuilderControls.find((control) => control.rendererBinding === "FormNestedScreen"); + const FileDownloadControl = FormBuilderControls.find((control) => control.builderBinding === "FileDownload"); + const FormListTable = FormBuilderControls.find((control) => control.rendererBinding === "FormListTable"); + const FormAnalyticsChart = FormBuilderControls.find((control) => control.rendererBinding === "FormAnalyticsChart"); + const FormCollectionViewControl = FormBuilderControls.find((control) => control.rendererBinding === "FormCollectionViewControl"); + // Remove editable inspector props + FormRecordList.control.inspector = FormRecordList.control.inspector.filter((prop) => prop.field !== "editable" && prop.field !== "form"); -// Modify record list description when used in a display screen -FormRecordList.control.popoverContent = "Format content in a table structure"; + // Modify record list description when used in a display screen + FormRecordList.control.popoverContent = "Format content in a table structure"; -const controlsDisplay = [ - RichTextControl, - TableControl, - FormRecordList, - FormImage, - FormAvatar, - FormLoop, - FormNestedScreen, - FileDownloadControl, - FormListTable, - FormAnalyticsChart, - FormCollectionViewControl -]; + const controlsDisplay = [ + RichTextControl, + TableControl, + FormRecordList, + FormImage, + FormAvatar, + FormLoop, + FormNestedScreen, + FileDownloadControl, + FormListTable, + FormAnalyticsChart, + FormCollectionViewControl, + ]; -ProcessMaker.EventBus.$on("screen-builder-init", (manager) => { controlsDisplay.forEach((item) => { item.control.inspector.push(...globalProperties[0].inspector); manager.type = formTypes.display; diff --git a/resources/js/processes/screen-builder/typeForm.js b/resources/js/processes/screen-builder/typeForm.js index 5df0c692ae..beaea38034 100644 --- a/resources/js/processes/screen-builder/typeForm.js +++ b/resources/js/processes/screen-builder/typeForm.js @@ -1,18 +1,12 @@ -import Vue from "vue"; -import VueFormElements from "@processmaker/vue-form-elements"; -import { FormBuilderControls as initialControls, globalProperties } from "@processmaker/screen-builder"; -import { Multiselect } from "@processmaker/vue-multiselect"; - -Vue.use(VueFormElements); -Vue.component("Multiselect", Multiselect); - -// The submit button has by default the 'submit' value -const submitButton = initialControls.find((x) => x.control.label === "Submit"); -if (submitButton) { - submitButton.control.config.fieldValue = "submit"; -} - ProcessMaker.EventBus.$on("screen-builder-init", (manager) => { + const { FormBuilderControls, globalProperties } = window.ScreenBuilder; + const initialControls = FormBuilderControls; + // The submit button has by default the 'submit' value + const submitButton = initialControls.find((x) => x.control.label === "Submit"); + if (submitButton) { + submitButton.control.config.fieldValue = "submit"; + } + initialControls.forEach((config) => { config.control.inspector.push(...globalProperties[0].inspector); diff --git a/resources/js/tasks/components/NavbarTaskMobile.vue b/resources/js/tasks/components/NavbarTaskMobile.vue index 063c89b604..f510b36f10 100644 --- a/resources/js/tasks/components/NavbarTaskMobile.vue +++ b/resources/js/tasks/components/NavbarTaskMobile.vue @@ -74,9 +74,10 @@ diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue index 5f8e47d8f4..aca5440893 100644 --- a/resources/js/tasks/components/TasksList.vue +++ b/resources/js/tasks/components/TasksList.vue @@ -23,11 +23,11 @@@{{ __(labelDate) }}:
+@{{ $t(labelDate) }}:
@{{ moment(statusDate).format() }}{{ __('STARTED BY') }}:
+@{{ $t('STARTED BY') }}:
{{ __('LAUNCHPAD') }}
+@{{ $t('LAUNCHPAD') }}
{{ $request->name }} @@ -86,7 +86,7 @@ class="d-inline-flex pull-left align-items-center"
{{ __('PARTICIPANTS') }}:
+@{{ $t('PARTICIPANTS') }}:
@{{__('Something went wrong. Try refreshing the application')}}
+