Merge branch 'pu/ccheng/force_hide_msgbox' into '2024.11'

fix(ExtJS): force hide msgbox if not initialized

See merge request tine20/tine20!4351

tine20/Tinebase/js/LoginPanel.js

@@ -627,19 +627,17 @@ Tine.Tinebase.LoginPanel = Ext.extend(Ext.Panel, {
 
         if (form.isValid()) {
             Ext.MessageBox.wait(i18n._('Logging you in...'), i18n._('Please wait'))
-                .then((r) => {
-                    Ext.Ajax.request({
-                        scope: this,
-                        params: _.assign({
-                            method: this.loginMethod,
-                            username: values.username,
-                            password: values.password
-                        }, additionalParams),
-                        timeout: 60000, // 1 minute
-                        success: this.onLoginSuccess,
-                        failure: this.onLoginFail
-                    });
-                });
+            Ext.Ajax.request({
+                scope: this,
+                params: _.assign({
+                    method: this.loginMethod,
+                    username: values.username,
+                    password: values.password
+                }, additionalParams),
+                timeout: 60000, // 1 minute
+                success: this.onLoginSuccess,
+                failure: this.onLoginFail
+            });
         } else {
 
             Ext.MessageBox.alert(i18n._('Errors'), i18n._('Please fix the errors noted.'));

tine20/library/ExtJS/src/widgets/MessageBox.js

@@ -4,6 +4,7 @@
  * [email protected]
  * http://www.extjs.com/license
  */
+import {BootstrapVueNext} from 'bootstrap-vue-next'
 
 /**
  * @class Ext.MessageBox
@@ -25,6 +26,7 @@ Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
 });
 
 
+
 // Show a dialog using config options:
 Ext.Msg.show({
    title:'Save Changes?',
@@ -38,10 +40,16 @@ Ext.Msg.show({
  * @singleton
  */
 Ext.MessageBox = function(){
+    const MSG_BOX_MOUNT_ID = "Vue-Message-Box-Mount-Point"
+
     let opt, dlg;
 
     const skinShades = ["#ffffff", "#fad9b4", "#fcbf89", "#ec8f2e", "#d97103", "#b75b01", "#924500"]
 
+    const __HIDDEN = false // for readability and clarity
+    let synchronousVisibilityState = __HIDDEN
+    let initialized = false
+
     // start vue properties
     let vueHandle, vueProps, vueEmitter;
     const defaultConfigs = Object.freeze({
@@ -87,12 +95,13 @@ Ext.MessageBox = function(){
 
     // private
     const handleButton = function({buttonName, textElValue} = arg){
-        vueProps.otherConfigs.visible = false;
+        handleHide()
         Ext.callback(opt.fn, opt.scope||window, [buttonName, textElValue, opt], 1);
     }
 
     // private
     const handleHide = function() {
+        synchronousVisibilityState = __HIDDEN
         if(vueProps) vueProps.otherConfigs.visible = false;
     }
 
@@ -105,7 +114,7 @@ Ext.MessageBox = function(){
                     get(target, key){
                         switch(key){
                             case "hidden":
-                                return !vueProps.otherConfigs.visible
+                                return !synchronousVisibilityState
                             case "setZIndex":
                                 return setZIndex
                             case "setActive":
@@ -235,60 +244,62 @@ Ext.Msg.show({
          */
         show: async function(options){
             options.skinColor = skinShades[Math.floor(Math.random()*skinShades.length)]
+            synchronousVisibilityState = !__HIDDEN
             Ext.getBody().mask("Loading");
-            window.vue = window.vue || await import(/* webpackChunkName: "Tinebase/js/Vue-Runtime"*/"tine-vue")
-            const {default: mitt} = await import(/* webpackChunkName: "Tinebase/js/Mitt"*/'mitt')
-            const {createApp, h} = await import("vue")
             const {MessageBoxApp, SymbolKeys} = await import(/* webpackChunkName: "Tinebase/js/VueMessageBox"*/'./VueMessageBox')
-            const {BootstrapVueNext} = await import(/* webpackChunkName: "Tinebase/js/BootstrapVueNext"*/'bootstrap-vue-next')
 
-            opt = {...defaultConfigs,...options};
-            opt["closable"] = (opt.closable !== false && opt.progress !== true && opt.wait !== true);
-            opt["prompt"] = opt.prompt || (opt.multiline ? true : false);
-            // creating mount point
-            const mountId = "Vue-Message-Box-Mount-Point";
-            let mp = document.getElementById(mountId);
-            if(!mp){
-                mp = document.createElement("div");
-                mp.id = mountId;
-                document.body.appendChild(mp);
-            }
-            // initializing the reactive prop.
-            if(!vueProps){
+            // initializing vue stuff
+            if(!initialized){
+                const {createApp, h, reactive} = window.vue
+                initialized = true
                 otherConfigs.buttonText = this.buttonText;
-                const {reactive} = await import("vue")
                 vueProps = reactive({
                     opt: JSON.parse(JSON.stringify(defaultConfigs)),
                     otherConfigs: JSON.parse(JSON.stringify(otherConfigs)),
                 });
-            }
-            Ext.getBody().unmask();
-            if(!vueEmitter){
-                vueEmitter = mitt();
+
+                // app initialization and mounting
+                vueHandle = createApp({
+                    render: () => h(MessageBoxApp, vueProps)
+                });
+
+                // events initialization
+                vueEmitter = window.mitt();
                 vueEmitter.on("close", handleHide);
                 vueEmitter.on("buttonClicked", handleButton);
+
+                vueHandle.config.globalProperties.ExtEventBus = vueEmitter;
+                vueHandle.provide(SymbolKeys.ExtEventBusInjectKey, vueEmitter);
+                vueHandle.use(BootstrapVueNext)
+
+                const mp = document.createElement("div");
+                mp.id = MSG_BOX_MOUNT_ID;
+                document.body.appendChild(mp);
+                vueHandle.mount(mp);
             }
+
+            opt = {...defaultConfigs,...options};
+            opt["closable"] = (opt.closable !== false && opt.progress !== true && opt.wait !== true);
+            opt["prompt"] = opt.prompt || (opt.multiline ? true : false);
+
+            // if a MessageBox.show() came right after the first MessageBox calls
+            // the async module are being loaded, so
+            if(!vueProps || !vueEmitter || !vueHandle) return
             // setting the prop values to the ones passed in config option
             // only those values are taken whose keys are present in the
-            // defaultOpt as these are the only ones allowed
+            // defaultOpt, as these are the only ones allowed
             Object.keys(opt).forEach(key => {
                 if(key in vueProps.opt){
                     vueProps.opt[key] = opt[key];
                 }
             })
 
-            // initializing and mounting the app.
-            if(!vueHandle){
-                vueHandle = createApp({
-                    render: () => h(MessageBoxApp, vueProps)
-                });
-                vueHandle.config.globalProperties.ExtEventBus = vueEmitter;
-                vueHandle.provide(SymbolKeys.ExtEventBusInjectKey, vueEmitter);
-                vueHandle.use(BootstrapVueNext)
-
-                vueHandle.mount(mp);
-            }
+            Ext.getBody().unmask();
 
+            // as the other modules are async loaded,
+            // the following checks if the visibility state was changed while
+            // the modules were being loaded.
+            if (synchronousVisibilityState === __HIDDEN) return this;
             vueProps.otherConfigs.visible = true;
             const d = this.getDialog("");
             Ext.WindowMgr.bringToFront(d)
@@ -366,7 +377,6 @@ Ext.MessageBox.ERROR
                 modal:true,
                 minWidth: this.minProgressWidth,
                 waitConfig: config,
-                fn: 'fake',
             });
         },
 

tine20/library/ExtJS/src/widgets/VueMessageBox/App.vue

@@ -133,7 +133,6 @@ watch(() => props.otherConfigs.visible, newVal => {
 })
 
 onBeforeMount(async () => {
-  await import(/* webpackChunkName: "Tinebase/js/CustomBootstrapVueStyles" */"library/ExtJS/src/widgets/VueMessageBox/styles.scss")
   await init();
 })
 </script>