glib-web 4.29.1 → 4.30.1

package/actions/windows/closeAllWithOpen.js

@@ -1,5 +1,7 @@
+import { nextTick } from "vue";
 import Action from "../../action";
 import { executeGlibEvent } from "../../store";
+import { showSkeletionViewIfExist } from "./skeletionView";
 
 export default class {
   execute(properties, component) {
@@ -9,6 +11,11 @@ export default class {
 
     Utils.history.destroy();
 
+    nextTick(() => {
+      showSkeletionViewIfExist(properties);
+    });
+
+
     // Don't use nextTick so that there is no visible flicker.
     Utils.http.load(properties, component, true, true);
 

package/actions/windows/closeWithOpen.js

@@ -1,4 +1,6 @@
+import { nextTick } from "vue";
 import { executeGlibEvent } from "../../store";
+import { showSkeletionViewIfExist } from "./skeletionView";
 
 export default class {
   execute(properties, component) {
@@ -8,6 +10,11 @@ export default class {
 
     Utils.history.backWithoutRender();
 
+    nextTick(() => {
+      showSkeletionViewIfExist(properties);
+    });
+
+
     // Don't use nextTick so that there is no visible flicker.
     Utils.http.load(properties, component, true, true);
   }

package/actions/windows/open.js

@@ -1,12 +1,14 @@
-import { executeGlibEvent } from "../../store";
+import { executeGlibEvent, vueApp } from "../../store";
+import { showSkeletionViewIfExist } from "./skeletionView";
 
 export default class {
   execute(properties, component) {
-
     if (!executeGlibEvent('onbeforewindowsopen')) {
       return;
     }
 
+    showSkeletionViewIfExist(properties);
+
     Utils.http.load(properties, component, true);
   }
 }

package/actions/windows/skeletionView.js

@@ -0,0 +1,15 @@
+import { vueApp } from "../../store";
+
+export function showSkeletionViewIfExist(spec) {
+  const { loaderViews } = spec;
+
+  if (loaderViews) {
+    vueApp.loading = true;
+    vueApp.loaderViews = loaderViews.slice(0);
+  }
+}
+
+export function hideSkeletonView() {
+  vueApp.loading = false;
+  vueApp.loaderViews = [];
+}

package/app.vue

@@ -8,7 +8,7 @@
       </v-progress-linear>
 
       <v-main :style="`height: ${mainHeight}px;`">
-        <v-container :fluid="page.template == 'fullWidth'" :class="containerClasses">
+        <v-container v-show="!vueApp.loading" :fluid="page.template == 'fullWidth'" :class="containerClasses">
           <div class="pages-header" :key="`page-header-${page.key}`">
             <panels-responsive :spec="header" />
           </div>
@@ -24,8 +24,14 @@
           </div>
         </v-container>
 
+        <v-container v-if="vueApp.loading" :fluid="page.template == 'fullWidth'" :class="containerClasses">
+          <glib-component v-for="(loaderView, index) in vueApp.loaderViews" :key="index"
+            :spec="loaderView"></glib-component>
+        </v-container>>
       </v-main>
+
     </component>
+
     <div :id="tooltipId">
       <panels-responsive :spec="vueApp.tooltipSpec"></panels-responsive>
     </div>

package/components/fields/richText2.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="$styles()" :class="$classes()" v-if="loadIf">
-    <div id="editor" ref="editor"></div>
+    <div ref="editor"></div>
     <input type="hidden" :name="fieldName" :value="producedValue" />
     <template v-if="Object.keys(files).length > 0">
       <input type="hidden" v-for="(file, index) in files" :name="spec.imageUploader.name" :value="file.signedId"
@@ -237,7 +237,7 @@ export default defineComponent({
       };
     }
     onMounted(() => {
-      quill = new Quill('#editor', {
+      quill = new Quill(editor.value, {
         readOnly: props.spec.readOnly,
         placeholder: props.spec.placeholder,
         theme: 'snow',

package/components/skeleton.vue

@@ -6,14 +6,24 @@
 const props = defineProps(['spec']);
 import textArea from "./skeletons/textArea.vue";
 import commentList from "./skeletons/commentList.vue";
-import { computed } from "vue";
+import { computed, getCurrentInstance } from "vue";
 
 const template = computed(() => {
+  let result;
   const comps = {
     textArea,
     commentList
   };
 
-  return comps[props.spec.template];
+  result = comps[props.spec.template];
+
+  if (result) return result;
+
+  const name = `template-${props.spec.template.replace("/", "-")}`;
+  result = getCurrentInstance().appContext.components[name];
+
+  if (result) return result;
+
+  return "template-unsupported";
 });
 </script>

package/index.js

@@ -56,6 +56,7 @@ import CommonMessage from "./components/_message.vue";
 import CommonDropdownMenu from "./components/_dropdownMenu.vue";
 import CommonResponsive from "./components/responsive.vue";
 import CommonTemplateMenu from "./templates/_menu.vue";
+import BigProgressCircle from "./templates/bigProgressCircle.vue";
 import RichButton from "./components/button.vue";
 Vue.component("panels-vertical", VerticalPanel);
 Vue.component("panels-responsive", ResponsivePanel);
@@ -69,6 +70,7 @@ Vue.component("common-message", CommonMessage);
 Vue.component("common-dropdownMenu", CommonDropdownMenu);
 Vue.component("common-responsive", CommonResponsive);
 Vue.component("templates-menu", CommonTemplateMenu);
+Vue.component("template-bigProgressCircle", BigProgressCircle);
 
 Vue.component("glib-button", RichButton);
 Vue.component("glib-component", Component);

package/nav/dialog.vue

@@ -1,7 +1,7 @@
 <template>
   <v-dialog :class="spec.styleClass" :model-value="model" :width="spec.width || 600" :dark="false"
     :fullscreen="fullscreen" :sm-and-down="false" :persistent="true" @click:outside="clickOutside">
-    <v-card v-if="!loading || !spec.loaderViews" :style="hamburgerStyles" class="dialog-hamburger" :key="dialogKey">
+    <v-card v-show="!loading || !spec.loaderViews" :style="hamburgerStyles" class="dialog-hamburger" :key="dialogKey">
 
       <panels-responsive v-if="header" :spec="header" />
       <div :class="`dialog-title  ${title ? '' : 'dialog-absolute'}`">
@@ -36,7 +36,6 @@
         </v-btn>
       </v-card-actions>
     </v-card>
-
     <template v-if="loading && spec.loaderViews">
       <glib-component v-for="(loaderView, index) in spec.loaderViews" :key="index" :spec="loaderView"></glib-component>
     </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "4.29.1",
+  "version": "4.30.1",
   "description": "",
   "main": "index.js",
   "scripts": {

package/store.js

@@ -20,7 +20,9 @@ export const vueApp = reactive({
     sheet: { show: false, placement: 'right', spec: {} },
     uploader: {},
     confirmationDialog: {},
-    mobile: undefined
+    mobile: undefined,
+    loading: false,
+    loaderViews: []
 });
 
 export const jsonView = reactive({ page: window.__page, source: 'server' }); // source can be 'server' or 'history'

package/templates/bigProgressCircle.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="centered">
+    <v-progress-circular indeterminate width="8" size="100" color="primary"></v-progress-circular>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.centered {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: calc(100vh - 48px);
+}
+</style>

package/utils/format.js

@@ -5,6 +5,8 @@ import TurndownService from "turndown";
 export default class {
   static markdownForEditor(text) {
 
+    if (!text) return '';
+
     const renderer = {
       listitem(text, task, checked) {
         return `<li>${text.replace(/\<p\>|\<\/p\>/g, "")}</li>`;

package/utils/http.js

@@ -3,6 +3,7 @@ import Action from "../action";
 import { nextTick } from 'vue';
 import { ctx, dialogs, jsonView, vueApp } from "../store";
 import Hash from "./hash";
+import { hideSkeletonView } from "../actions/windows/skeletionView";
 
 const strandom = () => (Math.random() + 1).toString(36).substring(7) + Date.now().toString();
 
@@ -121,6 +122,7 @@ export default class {
         }
 
         this.forceComponentUpdate(() => {
+          hideSkeletonView();
           Utils.history.resetScroll();
 
           GLib.action.handleResponse(data, component, windowMode);