glib-web 4.17.0 → 4.18.1

package/actions/windows/closeAll.js

@@ -1,8 +1,13 @@
+import { executeGlibEvent } from "../../store";
 import { ifObject } from "../../utils/type";
 
 export default class {
   execute(properties, component) {
 
+    if (!executeGlibEvent('onbeforewindowsclose')) {
+      return;
+    }
+
     Utils.history.destroy();
 
     ifObject(properties["onClose"], it => {

package/actions/windows/closeAllWithOpen.js

@@ -1,7 +1,12 @@
 import Action from "../../action";
+import { executeGlibEvent } from "../../store";
 
 export default class {
   execute(properties, component) {
+    if (!executeGlibEvent('onbeforewindowsclose')) {
+      return;
+    }
+
     Utils.history.destroy();
 
     // Don't use nextTick so that there is no visible flicker.

package/actions/windows/closeWithOpen.js

@@ -1,6 +1,12 @@
+import { executeGlibEvent } from "../../store";
+
 export default class {
   execute(properties, component) {
-    Utils.history.backWithoutRender()
+    if (!executeGlibEvent('onbeforewindowsclose')) {
+      return;
+    }
+
+    Utils.history.backWithoutRender();
 
     // Don't use nextTick so that there is no visible flicker.
     Utils.http.load(properties, component, true, true);

package/actions/windows/closeWithReload.js

@@ -1,7 +1,12 @@
+import { executeGlibEvent } from "../../store";
 import Hash from "../../utils/hash";
 
 export default class {
   execute(properties, component) {
+    if (!executeGlibEvent('onbeforewindowsclose')) {
+      return;
+    }
+
     const fallbackUrl = new Hash(properties).remove("fallbackUrl");
     const data = Object.assign({}, properties);
     if (!Utils.history.back()) {
@@ -11,7 +16,7 @@ export default class {
 
     // Allow time for history.back() to complete, which is important for actions that need
     // to use window.location.href such as `windows/reload`
-    setTimeout(function() {
+    setTimeout(function () {
       Utils.http.reload(data, component);
     }, 100);
   }

package/components/fields/_buttonDate.vue

@@ -0,0 +1,86 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <div class="glib date-input-container" @click="dateInput.showPicker()">
+    <v-icon icon="calendar_today" class="calendar-icon"></v-icon>
+    <span class="date-text">{{ text }}</span>
+    <input :name="fieldName" :type="type" class="date-input" ref="dateInput" @change="handleChanged"
+      :min="sanitizeValue(spec.min)" :max="sanitizeValue(spec.max)" :disabled="inputDisabled" :readonly="spec.readonly"
+      :value="model" />
+  </div>
+</template>
+
+<script>
+import { computed, ref, watch } from "vue";
+import { sanitize } from "../composable/date";
+
+export default {
+  props: {
+    spec: {
+      type: Object,
+      default: () => ({}),
+    },
+    type: {
+      type: String
+    }
+  },
+  emits: ['datePicked'],
+  setup(props, ctx) {
+    function sanitizeValue(value) {
+      return sanitize(value, props.type);
+    }
+
+    const model = ref(sanitizeValue(props.spec.value));
+
+    const dateInput = ref(null);
+    const text = computed(() => model.value || props.spec.label);
+
+    watch(props, (val) => {
+      model.value = sanitizeValue(val.spec.value);
+    });
+
+    function handleChanged(e) {
+      const { value } = e.srcElement;
+      model.value = value;
+      ctx.emit('datePicked', model.value);
+    }
+
+    return { text, sanitizeValue, dateInput, handleChanged, model };
+  }
+};
+</script>
+
+<style>
+.glib.date-input-container {
+  display: flex;
+  align-items: center;
+  background-color: #f3f5f7;
+  border-radius: 5px;
+  padding: 8px 12px;
+  position: relative;
+  width: 100%;
+  cursor: pointer;
+
+  .date-text {
+    color: #555;
+    font-size: 16px;
+    white-space: nowrap;
+  }
+
+  .date-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 2;
+  }
+
+  .calendar-icon {
+    font-size: 16px;
+    color: #888;
+    margin-right: 8px;
+  }
+}
+</style>

package/components/fields/_patternText.vue

@@ -1,7 +1,8 @@
 <template>
   <div :style="$styles()" :class="$classes()" v-if="loadIf">
+    <button-date v-if="spec.buttonTemplate" :type="type" :spec="spec" @datePicked="handleDatePicked"></button-date>
     <!-- See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for why we need to use `pattern` -->
-    <v-text-field :color="gcolor" v-model="fieldModel" :name="fieldName" :label="spec.label" :hint="spec.hint"
+    <v-text-field v-else :color="gcolor" v-model="fieldModel" :name="fieldName" :label="spec.label" :hint="spec.hint"
       :type="type" :readonly="spec.readOnly" :disabled="inputDisabled" :min="sanitizeValue(spec.min)"
       :max="sanitizeValue(spec.max)" :pattern="pattern" :rules="$validation()" :style="$styles()"
       :density="$classes().includes('compact') ? 'compact' : 'default'" :clearable="spec.clearable" @change="onChange"
@@ -13,9 +14,11 @@
 import { sanitize } from "../composable/date";
 import { useGlibInput } from "../composable/form";
 import inputVariant from '../mixins/inputVariant';
+import buttonDate from "./_buttonDate.vue";
 
 export default {
   mixins: [inputVariant],
+  components: { buttonDate },
   props: {
     spec: { type: Object, required: true },
     type: { type: String, required: true },
@@ -36,6 +39,10 @@ export default {
     onChange() {
       this.$executeOnChange();
     },
+    handleDatePicked(value) {
+      this.fieldModel = value;
+      this.$executeOnChange();
+    },
     $registryEnabled() {
       return false;
     }

package/components/fields/richText.vue

@@ -211,36 +211,32 @@ export default {
     },
   },
   watch: {
-    spec: {
-      handler: function (val, oldVal) {
-        this.produce = val.produce || "markdown";
-        this.accept = val.accept || "markdown";
-
-        this.textEditor = new TextEditor(this);
-        this.imageUploader = val.imageUploader;
-
-        this.richEditorValue = this.textEditor.htmlValueWithRealImage(
-          val.value,
-          this.accept
-        );
-
-        this.rawEditorValue = this.textEditor.markdownValueWithRealImage(
-          val.value,
-          this.accept
-        );
-        this.producedValue = this.textEditor.producedValue(
-          val.value,
-          this.accept,
-          this.produce
-        );
-      },
-      immediate: true,
-      deep: true // because spec needs to be process first
-    },
     producedValue(val, oldVal) {
       this.fieldModel = val;
     }
   },
+  beforeMount() {
+    this.produce = this.spec.produce || "markdown";
+    this.accept = this.spec.accept || "markdown";
+
+    this.textEditor = new TextEditor(this);
+    this.imageUploader = this.spec.imageUploader;
+
+    this.richEditorValue = this.textEditor.htmlValueWithRealImage(
+      this.spec.value,
+      this.accept
+    );
+
+    this.rawEditorValue = this.textEditor.markdownValueWithRealImage(
+      this.spec.value,
+      this.accept
+    );
+    this.producedValue = this.textEditor.producedValue(
+      this.spec.value,
+      this.accept,
+      this.produce
+    );
+  },
   mounted() {
     if (this.spec.imageUploader) {
       bus.$on("richText/dropOrPaste", ({ file, editor, cursorLocation }) =>

package/components/icon.vue

@@ -2,7 +2,7 @@
   <a v-if="$href()" :href="$href()" :rel="$rel()" @click="$onClick()">
     <common-icon ref="delegate" :spec="iconSpec" />
   </a>
-  <common-icon ref="delegate" v-else :spec="iconSpec" />
+  <common-icon @click="$onClick()" ref="delegate" v-else :spec="iconSpec" />
 </template>
 
 <script>

package/components/mixins/styles.js

@@ -30,7 +30,7 @@ const jsonLogicData = (data) => {
 
 export default {
   data: function () {
-    return {
+    let obj = {
       // fieldName: null,
       fieldModel: null,
       _disabled: false,
@@ -42,6 +42,15 @@ export default {
       // See https://github.com/vuetifyjs/vuetify/issues/8876
       vuetifyEmptyString: "<EMPTY_STRING>"
     };
+
+    // These fields use its own model variable. Delete this variable to avoid mixup, 
+    // which would cause their values to get reset in certain situations, 
+    // e.g. when the fields reside in a dialogs_show and the dialog gets closed and reopened.
+    if (['fields-checkGroup', 'fields-check', 'fields-select'].includes(GLib.component.vueName(this))) {
+      delete obj.fieldModel;
+    }
+
+    return obj;
   },
   provide() {
     const obj = {};

package/components/panels/bulkEdit2.vue

@@ -92,6 +92,7 @@ import Action from "../../action";
 import Hash from "../../utils/hash";
 import Papa from "papaparse";
 import launch from "../../utils/launch";
+import { isPresent } from "../../utils/type";
 
 class Row {
   constructor({ id, columns, selected, index, status }) {
@@ -128,14 +129,22 @@ class Row {
 }
 
 class Cell {
-  constructor({ viewHeaders, cellIndex, rowId, view, value }) {
-    this.viewHeaders = viewHeaders;
+  constructor({ cellIndex, rowId, dataRow, viewCell }) {
     this.cellIndex = cellIndex;
     this.rowId = rowId;
-    this.view = view;
+    this.cellId = props.spec.viewHeaders[this.cellIndex].id;
+
+    let value = dataRow.columns[cellIndex].value;
+
+    // clean value
+    if (!value) value = undefined;
+    if (value && value.includes(',')) value = value.split(',');
     this.value = value;
 
-    this.cellId = this.viewHeaders[this.cellIndex].id;
+    const name = viewCell.multiple ? `${this.cellId}[]` : this.cellId;
+
+    this.view = Object.assign({}, viewCell, dataRow.columns[cellIndex], { value: value, name: name });
+
   }
 }
 
@@ -246,17 +255,8 @@ function makeRows(dataRows, selected = false) {
   const rows = dataRows.map((dataRow, index) => {
     // const id = dataRow.rowId || Math.random().toString(36).slice(2, 7);
     const id = dataRow.rowId || `row_${index}`;
-    const columns = props.spec.viewCells.map((viewCells, i) => {
-      let value = dataRow.columns[i].value;
-
-      // clean the data
-      if (!value) value = undefined;
-      if (value && value.includes(',')) value = value.split(',');
-
-      const view = Object.assign({}, viewCells, dataRow.columns[i], { value: value });
-      const cellIndex = i;
-      const viewHeaders = props.spec.viewHeaders;
-      return new Cell({ rowId: id, view, cellIndex, viewHeaders, value });
+    const columns = props.spec.viewCells.map((viewCell, i) => {
+      return new Cell({ rowId: id, cellIndex: i, dataRow, viewCell });
     });
     return new Row({ selected, columns, id, index });
   });
@@ -275,7 +275,8 @@ function handleCellChange(e, cell) {
   if (e.target instanceof HTMLInputElement) {
     value = e.target.value;
   } else {
-    value = e.target.querySelector('input').value;
+    value = Array.from(e.target.querySelectorAll(`input[name="${cell.view.name}"]`)).map((el) => el.value);
+    value = cell.view.multiple ? value : value[0];
   }
 
   cell.value = value;
@@ -361,8 +362,11 @@ function submitRows(rows) {
   updateRow({ rowId: row.id, status: 'pending' });
 
   const formData = row.columns.reduce((prev, curr) => {
+    let value = curr.value;
+    if (curr.view.multiple && isPresent(curr.value)) value = [value].flat();
+    if (curr.view.multiple && !isPresent(curr.value)) value = [''];
     return Object.assign(prev, {
-      [curr.cellId]: curr.value,
+      [curr.cellId]: value || '',
       [props.spec.paramNameForRowId || 'rowId']: row.id
     });
   }, {});

package/components/panels/table.vue

@@ -11,7 +11,7 @@
                 <template v-if="importable">
                   <span>{{
                     rows(section).length + section.dataRows.length
-                    }}
+                  }}
                     rows</span>
                   <input ref="fileInput" style="display: none;" type="file" accept=".csv"
                     @change="loadFile($event, section)" />
@@ -205,6 +205,14 @@ table.table--grid {
     }
   }
 }
+
+table.table--plain {
+  td {
+    >span {
+      padding: unset;
+    }
+  }
+}
 </style>
 
 <!-- Overridable -->

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

@@ -26,7 +26,7 @@ describe('dirtyState', () => {
 
     cy.contains('multiupload').click()
     cy.contains('Female').click()
-    cy.contains('multiupload').click()
+    cy.contains('multiupload').click() // Try to navigate to another page
     cy.get('h2').should('contain.text', 'MultiUpload')
   })
 
@@ -47,7 +47,7 @@ describe('dirtyState', () => {
 
     cy.then(() => expect(text).to.equal('Changes you made have not been saved. Are you sure?'))
 
-    cy.contains('multiupload').click()
+    cy.contains('multiupload').click() // Try to navigate to another page
     cy.get('h2').should('contain.text', 'MultiUpload')
   })
 

package/nav/sheet.vue

@@ -57,4 +57,8 @@ export default {
 .v-bottom-sheet .v-list-subheader__text {
   white-space: unset;
 }
+
+.v-bottom-sheet .v-list-item__content .v-list-item-title {
+  white-space: unset;
+}
 </style>

package/package.json

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

package/store.js

@@ -34,7 +34,7 @@ export const closeAllDialog = () => {
 };
 
 export const closeAllPopover = () => {
-    popovers.value.forEach((popover) => popover.toggle = false);
+    popovers.value.forEach((popover) => popover.close());
     popovers.value = [];
 };
 
@@ -56,7 +56,7 @@ function glibEventHandler(e, closeAllFloating = true) {
     }
 
     if (e) {
-        if (vueApp.isFormDirty && !vueApp.isFormSubmitted) {
+        if (ctx().isFormDirty && !vueApp.isFormSubmitted) {
             e.preventDefault();
         }
     } else {

package/utils/launch/popover.js

@@ -1,7 +1,7 @@
 import { createApp, h } from "vue";
 import Popover from "../../components/popover.vue";
 import { Vue } from "../..";
-import { autoUpdate, computePosition, shift, offset, arrow } from "@floating-ui/dom";
+import { autoUpdate, computePosition, shift, offset, arrow, flip } from "@floating-ui/dom";
 
 import bus from "../eventBus";
 import { htmlElement } from "../../components/helper";
@@ -58,8 +58,8 @@ export default class LaunchPopover {
       Object.assign(placeholder.style, { position: 'absolute', display: 'block', top: 0, left: 0 });
 
       autoUpdate(reference, floating, () => {
-        computePosition(reference, floating, { placement: placement, middleware: [shift({ padding: 4 }), offset(offsetSize), arrow({ element: arrowEl })] })
-          .then(({ x, y, middlewareData }) => {
+        computePosition(reference, floating, { placement: placement, middleware: [shift({ padding: 4 }), offset(offsetSize), flip(), arrow({ element: arrowEl })] })
+          .then(({ placement, x, y, middlewareData }) => {
             // zIndex should be larger than dialog's, which is 2400.
             Object.assign(placeholder.style, { top: `${y}px`, left: `${x}px`, zIndex: 10001 });