glib-web 4.24.1 → 4.25.0

package/action.js

@@ -22,6 +22,9 @@ import ActionsSnackbarsAlert from "./actions/snackbars/alert";
 import ActionsSnackbarsSelect from "./actions/snackbars/select";
 
 import ActionsSheetsSelect from "./actions/sheets/select";
+import ActionsSheetsOpen from "./actions/sheets/open";
+import ActionsSheetsShow from "./actions/sheets/show";
+import ActionsSheetsClose from "./actions/sheets/close";
 
 import ActionsWindowsClose from "./actions/windows/close";
 import ActionsWindowsCloseAll from "./actions/windows/closeAll";
@@ -80,8 +83,6 @@ import ActionListsAppend from "./actions/lists/append";
 
 import ActionBottomBannersOpen from "./actions/bottom_banners/open";
 import ActionBottomBannersClose from "./actions/bottom_banners/close";
-import ActionRightBannersOpen from "./actions/right_banners/open";
-import ActionRightBannersClose from "./actions/right_banners/close";
 
 import ActionGlobalStatesWatch from "./actions/global_states/watch";
 import ActionGlobalStatesSet from "./actions/global_states/set";
@@ -124,6 +125,9 @@ const actions = {
   "snackbars/select": ActionsSnackbarsSelect,
 
   "sheets/select": ActionsSheetsSelect,
+  "sheets/open": ActionsSheetsOpen,
+  "sheets/show": ActionsSheetsShow,
+  "sheets/close": ActionsSheetsClose,
 
   "windows/close": ActionsWindowsClose,
   "windows/closeAll": ActionsWindowsCloseAll,
@@ -179,12 +183,10 @@ const actions = {
 
   "lists/append": ActionListsAppend,
 
+  // deprecated
   "bottomBanners/open": ActionBottomBannersOpen,
   "bottomBanners/close": ActionBottomBannersClose,
 
-  "rightBanners/open": ActionRightBannersOpen,
-  "rightBanners/close": ActionRightBannersClose,
-
   "globalStates/watch": ActionGlobalStatesWatch,
   "globalStates/set": ActionGlobalStatesSet,
 
@@ -327,6 +329,7 @@ export default class Action {
           dialog.updateContent(response);
         } else {
           jsonView.page = response;
+          jsonView.source = 'server';
         }
       });
     }

package/actions/sheets/close.js

@@ -0,0 +1,10 @@
+import Action from "../../action";
+import { vueApp } from "../../store";
+
+export default class {
+  execute(spec, component) {
+    vueApp.sheet.show = false;
+
+    Action.execute(spec.onClose, component);
+  }
+}

package/actions/sheets/open.js

@@ -0,0 +1,35 @@
+import { vueApp } from "../../store";
+import http from "../../utils/http";
+
+export default class {
+  execute(spec, component) {
+
+    const { placement } = spec;
+
+    http.execute(
+      spec,
+      'GET',
+      component,
+      (response) => {
+        vueApp.sheet = {
+          spec: response.body,
+          show: true,
+          placement
+        };
+      },
+      () => {
+        vueApp.sheet = {
+          spec: {
+            childViews: [
+              { view: 'p', text: 'Failed to load' },
+              { view: 'spacer', height: 8 },
+              { view: 'button', text: 'close', onClick: { action: 'sheets/close' } }
+            ]
+          },
+          show: true,
+          placement
+        };
+      }
+    );
+  }
+}

package/actions/sheets/show.js

@@ -0,0 +1,14 @@
+import { vueApp } from "../../store";
+
+export default class {
+  execute(spec, component) {
+
+    const { placement, body } = spec;
+
+    vueApp.sheet = {
+      spec: body,
+      show: true,
+      placement
+    };
+  }
+}

package/app.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app :class="page.styleClasses" ref="appRef">
     <component :is="containerComponent" :spec="formSpec" :style="'height: 100%;'">
-      <nav-layout ref="navBar" @mounted="updateMainHeight()" :page="page" />
+      <nav-layout ref="navBar" @mounted="updateMainHeight()" :page="page" :key="`navBar-${page.key}`" />
 
       <v-progress-linear color="primary" v-if="vueApp.indicator" :indeterminate="true" height="5"
         style="position: fixed; z-index: 4">
@@ -9,7 +9,7 @@
 
       <v-main :style="`height: ${mainHeight}px;`">
         <v-container :fluid="page.template == 'fullWidth'" :class="containerClasses">
-          <div class="pages-header">
+          <div class="pages-header" :key="`page-header-${page.key}`">
             <panels-responsive :spec="header" />
           </div>
 
@@ -19,7 +19,7 @@
             <panels-responsive :key="`footer-${page.key}`" class="body-footer" :spec="bodyFooter" />
           </div>
 
-          <div class="pages-footer">
+          <div class="pages-footer" :key="`page-footer-${page.key}`">
             <panels-responsive :spec="footer" />
           </div>
         </v-container>
@@ -30,9 +30,8 @@
       <panels-responsive :spec="vueApp.tooltipSpec"></panels-responsive>
     </div>
     <Transition name="slide-fade">
-      <v-sheet v-if="vueApp.rightBanners.show" width="100%" max-width="684" height="100%" position="fixed"
-        class="glib-rightBanner">
-        <glib-component v-for="(rbSpec, index) in vueApp.rightBanners.spec.childViews" :spec="rbSpec"
+      <v-sheet v-if="vueApp.sheet.show" position="fixed" :class="`views-sheet ${vueApp.sheet.placement}`">
+        <glib-component v-for="(rbSpec, index) in vueApp.sheet.spec.childViews" :spec="rbSpec"
           :key="index"></glib-component>
       </v-sheet>
     </Transition>
@@ -49,7 +48,7 @@ import Utils from "./utils/helper";
 // import phoenixSocketMixin from "./components/mixins/ws/phoenixSocket.js";
 // import actionCableMixin from "./components/mixins/ws/actionCable.js";
 import FormPanel from "./components/panels/form.vue";
-import { vueApp } from "./store";
+import { isRerender, vueApp } from "./store";
 import { useSocket } from "./components/composable/socket";
 import { usePasteable } from "./components/composable/pasteable";
 import { computed, onMounted, provide, ref } from "vue";
@@ -141,7 +140,11 @@ export default {
       `Version: ${Utils.settings.appVersion} (${Utils.settings.env})`
     );
     Utils.history.saveInitialContent(this.page);
-    Utils.history.restoreOnBackOrForward();
+    Utils.history.restoreOnBackOrForward({
+      onAfterBack: () => {
+        if (isRerender) GLib.action.execute(this.page.onRerender, this);
+      }
+    });
     watchGlibEvent();
   },
   methods: {
@@ -167,6 +170,12 @@ export default {
         },
         true
       );
+
+      if (isRerender()) {
+        GLib.action.execute(this.page.onRerender, this);
+      } else {
+        GLib.action.execute(this.page.onLoad, this);
+      }
     },
     $ready() {
       this.$type.ifString(this.page.title, (title) => {
@@ -195,10 +204,6 @@ export default {
           GLib.action.execute(this.page.onRefocus, this);
           GLib.action.execute(this.page.replayGetResponse, this);
         });
-      } else {
-        setTimeout(() => {
-          GLib.action.execute(this.page.onLoad, this);
-        });
       }
 
       // Use nextTick() to allow time for the navBar to complete initialization.
@@ -396,11 +401,38 @@ body,
   z-index: 99;
 }
 
-.glib-rightBanner {
-  z-index: 1005;
-  right: 0;
+.views-sheet {
+  z-index: 1007;
   box-shadow: 0px 4px 12px 0px #0000001A;
   overflow-y: auto;
+
+  &.top {
+    top: 0;
+    height: 100%;
+    max-height: 160px;
+    width: 100%;
+  }
+
+  &.right {
+    right: 0;
+    height: 100%;
+    width: 100%;
+    max-width: 684px;
+  }
+
+  &.bottom {
+    bottom: 0;
+    height: 100%;
+    max-height: 160px;
+    width: 100%;
+  }
+
+  &.left {
+    left: 0;
+    height: 100%;
+    width: 100%;
+    max-width: 684px;
+  }
 }
 
 .slide-fade-enter-active {

package/components/_chip.vue

@@ -39,11 +39,6 @@ export default {
   methods: {
     $registryEnabled() {
       return false;
-    },
-    $ready() {
-      nextTick(() => { // Make sure the component has been initialized and registered.
-        GLib.action.execute(this.spec.onLoad, this);
-      });
     }
   },
 };

package/components/_icon.vue

@@ -1,7 +1,7 @@
 <template>
   <v-icon class="aligner" :style="$styles()" :class="cssClasses" :size="icon.size" :color="color">{{
     icon.name
-  }}</v-icon>
+    }}</v-icon>
 </template>
 
 <script>
@@ -48,11 +48,6 @@ export default {
     }
   },
   methods: {
-    $ready() {
-      nextTick(() => { // Make sure the component has been initialized and registered.
-        GLib.action.execute(this.spec.onLoad, this);
-      });
-    }
 
     // $ready() {
     //   // this.badge = this.spec.badge || {};

package/components/_internal_button.vue

@@ -42,11 +42,6 @@ export default {
     }
   },
   methods: {
-    $ready() {
-      nextTick(() => { // Make sure the component has been initialized and registered.
-        GLib.action.execute(this.spec.onLoad, this);
-      });
-    },
     // $ready() {
     //   this.$type.ifArray(this.spec.styleClasses, val => {
     //     this.linkStyling = val.includes("link");

package/components/composable/form.js

@@ -89,7 +89,7 @@ function useGlibForm({ formRef }) {
   return { updateDirtyState };
 }
 
-function useGlibInput({ props }) {
+function useGlibInput({ props, cacheValue = true }) {
   // setup dirty state
   const registeredInputs = inject('registeredInputs', null);
   const ignoredDirtyCheckFields = inject('ignoredDirtyCheckFields', null);
@@ -106,7 +106,7 @@ function useGlibInput({ props }) {
 
   // save fieldModel to spec so data still intact even if component unmounted
   onBeforeUpdate(() => {
-    if (!instance.ctx.spec) return;
+    if (!instance.ctx.spec || !cacheValue) return;
     instance.ctx.spec.value = instance.ctx.fieldModel;
   });
 

package/components/fields/_buttonDate.vue

@@ -141,6 +141,7 @@ export default {
     margin-right: 8px;
   }
 
+  /* Hide right calendar icon */
   input[type="date"]::-webkit-calendar-picker-indicator,
   input[type="datetime-local"]::-webkit-calendar-picker-indicator {
     display: none;

package/components/fields/_patternText.vue

@@ -51,6 +51,7 @@ export default {
 </script>
 
 <style>
+/* This is to ensure that the height is consistent with other fields, i.e. 56px as opposed to 58px. */
 .fields-date,
 .fields-datetime {
   .v-field__input {

package/components/fields/_select.vue

@@ -75,7 +75,7 @@ export default {
   setup(props) {
     useGlibInput({ props });
 
-    const fieldModel = ref(props.defaultValue || null);
+    const fieldModel = ref(props.spec.value || props.defaultValue);
     const options = ref(props.spec.options);
     const append = props.spec.append || {};
 
@@ -139,13 +139,9 @@ export default {
     }
   },
   methods: {
-    // _linkFieldModels(valueChanged) {
-    //   if (this.spec.csvMode && valueChanged) {
-    //     this.fieldModel = (this.spec.value || '').replace(/,\s+/g, ",").split(",").filter((v) => v != '');
-    //     return;
-    //   }
-    //   this.fieldModel = this.spec.value;
-    // },
+    _linkFieldModels(valueChanged) {
+      this.fieldModel = this.spec.value || this.defaultValue;
+    },
     onChange() {
       this.$executeOnChange();
       const containerEl = this.$refs.container;

package/components/fields/multiUpload.vue

@@ -187,8 +187,7 @@ export default defineComponent({
       fileSelect.value.click();
     }
 
-    // TODO: Enable this
-    // useGlibInput({ props });
+    useGlibInput({ props, cacheValue: false });
 
     return {
       files,

package/components/fields/sign.vue

@@ -49,11 +49,11 @@ import * as uploader from "../composable/upload";
 import { useFileUtils } from "../composable/file";
 import { useGlibInput } from "../composable/form";
 
-useGlibInput({ props });
-
 const { makeKey, Item } = useFileUtils();
 const props = defineProps(['spec']);
 
+useGlibInput({ props });
+
 const canvas = ref(null);
 const context = computed(() => {
   if (!canvas.value) return;

package/components/mixins/events.js

@@ -1,7 +1,7 @@
 import Action from "../../action";
 import UrlUtils from "../../utils/url";
 import * as TypeUtils from "../../utils/type";
-import { vueApp } from "../../store";
+import { isRerender, vueApp } from "../../store";
 
 export default {
   data() {
@@ -41,6 +41,15 @@ export default {
     if (this.spec && this.spec.onChangeAndLoad && this.$registryEnabled()) {
       this.$executeOnChange();
     }
+
+    if (this.spec && this.$registryEnabled()) {
+      if (isRerender()) {
+        GLib.action.execute(this.spec.onRerender, this);
+      } else {
+        GLib.action.execute(this.spec.onLoad, this);
+      }
+    }
+
   },
   beforeUpdate() {
     if (vueApp.isStale) {

package/components/mixins/tooltip.js

@@ -24,7 +24,13 @@ export default defineComponent({
       const key = Math.random().toString(36).slice(2, 7);
 
       const handleMouseEnter = () => {
-        launch.popover.open({ body: { childViews: [this.properties] }, key: key, placement: this.spec.tooltip.placement || 'top' }, this);
+        const properties = {
+          body: { childViews: [this.properties] },
+          key: key,
+          placement: this.spec.tooltip.placement || 'top',
+          styleClass: 'views-tooltip'
+        };
+        launch.popover.open(properties, this);
       };
       const handleMouseLeave = () => {
         launch.popover.close({ key: key });

package/components/popover.vue

@@ -14,7 +14,7 @@
     | 'left-end'
   -->
 
-    <common-responsive v-if="toggle" ref="container" :spec="spec.body" />
+    <common-responsive :class="`views-popovers ${spec.styleClass}`" v-if="toggle" ref="container" :spec="spec.body" />
 
 </template>
 
@@ -25,7 +25,7 @@ import { driver } from "driver.js";
 import 'driver.js/dist/driver.css';
 
 export default {
-    props: ['spec', 'reference', 'placeholder'],
+    props: ['spec', 'reference', 'placeholder', 'styleClass'],
     data() {
         const allowClose = this.spec.overlay ? this.spec.overlay.closeOnFocus : true;
         return {

package/cypress/e2e/glib-web/lifecycle.cy.ts

@@ -0,0 +1,28 @@
+import { testPageUrl } from "../../helper"
+const url = testPageUrl('lifecycle')
+
+describe('glib lifecycle hooks', () => {
+  it('execute onLoad and onRerender', () => {
+    cy.visit(url)
+
+    cy.contains('page.onLoad').should('be.exist')
+
+    // check if onLoad executed
+    cy.get('#button').should('have.text', 'onLoad')
+    cy.get('#chip').trigger('mouseenter')
+    cy.get('.views-tooltip p').should('have.text', 'onLoad')
+    cy.get('#icon').should('contain.text', 'home')
+
+    // navigate to other page and close it
+    cy.contains('navigate to other page').click()
+    cy.contains('windows/close').click()
+
+    // check if onRerender executed
+    cy.contains('page.onRerender').should('be.exist')
+
+    cy.get('#button').should('have.text', 'onRerender')
+    cy.get('#chip').trigger('mouseenter')
+    cy.get('.views-tooltip p').should('have.text', 'onRerender')
+    cy.get('#icon').should('contain.text', 'person')
+  })
+})

package/cypress/e2e/glib-web/multiupload.cy.ts

@@ -6,7 +6,9 @@ describe('multiUpload', () => {
     cy.visit(url)
 
     cy.contains('clear files').click()
+    cy.contains('File (Example)').should('not.exist')
     cy.contains('populate files').click()
+    cy.contains('File (Example)').should('exist')
 
     cy.contains('submit').click()
 

package/cypress/e2e/glib-web/selectable.cy.ts

@@ -35,6 +35,6 @@ describe("selectable", () => {
   it('can detect timezone', () => {
     cy.visit(url)
     cy.get('input[name="user[timezone]"]').should('have.value', 'Asia/Shanghai')
-    cy.get('input[name="user[timezone_with_current_local]"]').should('not.have.value', undefined)
+    cy.get('input[name="user[timezone_with_current_local]"]').should('not.have.value', '')
   })
 })

package/package.json

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

package/store.js

@@ -17,13 +17,13 @@ export const vueApp = reactive({
     lastNavigationCount: null,
     tooltipSpec: {},
     bottomBanners: {},
-    rightBanners: { show: false, spec: {} },
+    sheet: { show: false, placement: 'right', spec: {} },
     uploader: {},
     confirmationDialog: {},
     mobile: undefined
 });
 
-export const jsonView = reactive({ page: window.__page });
+export const jsonView = reactive({ page: window.__page, source: 'server' }); // source can be 'server' or 'history'
 export const jsonSettings = reactive(window.__settings);
 
 export const dialogs = ref([]);
@@ -39,7 +39,8 @@ export const closeAllDialog = () => {
 export const closeAllPopover = () => {
     popovers.value.forEach((popover) => popover.close());
     popovers.value = [];
-    vueApp.rightBanners.show = false;
+    vueApp.sheet.show = false;
+
 };
 
 export const glibevent = reactive({
@@ -99,4 +100,8 @@ export function executeGlibEvent(name) {
     }
 
     return glibevent[name]();
+}
+
+export function isRerender() {
+    return jsonView.source == 'history';
 }

package/utils/history.js

@@ -44,7 +44,7 @@ export default class {
     this._pageBody.scrollTop = 0;
   }
 
-  static restoreOnBackOrForward() {
+  static restoreOnBackOrForward({ onAfterBack }) {
     const vm = this;
     let skipOnce = false;
     window.onpopstate = event => {
@@ -75,12 +75,16 @@ export default class {
       data.content.__poppedState = true;
 
       jsonView.page = data.content;
+      jsonView.source = 'history';
+
       vueApp.lastNavigationCount = data.navigationCount;
       vm.navigationCount = data.navigationCount;
 
       nextTick(() => {
         const scrollTop = this.bodyScrollTops[this.navigationCount];
         this._pageBody.scrollTop = scrollTop;
+
+        if (onAfterBack) { onAfterBack(); }
       });
     };
   }

package/utils/http.js

@@ -4,7 +4,7 @@ import { nextTick } from 'vue';
 import { ctx, dialogs, jsonView, vueApp } from "../store";
 import Hash from "./hash";
 
-const strandom = () => (Math.random() + 1).toString(36).substring(7);
+const strandom = () => (Math.random() + 1).toString(36).substring(7) + Date.now().toString();
 
 let loading = false;
 
@@ -183,6 +183,7 @@ export default class {
       Utils.http.forceComponentUpdate(() => {
         page.key = strandom();
         jsonView.page = page;
+        jsonView.source = 'server';
         const redirectUrl = Utils.url.htmlUrl(response.url);
         Utils.history.updatePage(jsonView.page, redirectUrl);