glib-web 4.11.2 → 4.11.4

package/actions/logics/set.js

@@ -3,6 +3,7 @@ import merge from 'lodash.merge';
 import { nextTick } from "vue";
 import { sanitize } from "../../components/composable/date";
 import { isPresent } from "../../utils/type";
+import { getFormData as _getFormData } from "../../components/composable/form";
 
 const sumDate = function (a, b) {
   const date = new Date(a);
@@ -76,21 +77,7 @@ jsonLogic.add_operation("isPresent", isPresentOperator);
 
 function getFormData() {
   return Array.from(document.querySelectorAll('form')).reduce((prev, curr) => {
-    const formData = new FormData(curr);
-    const obj = {};
-
-    formData.forEach((value, key) => {
-      // Reflect.has in favor of: object.hasOwnProperty(key)
-      if (!Reflect.has(obj, key)) {
-        obj[key] = value;
-        return;
-      }
-      if (!Array.isArray(obj[key])) {
-        obj[key] = [obj[key]];
-      }
-      obj[key].push(value);
-    });
-
+    const obj = _getFormData(curr);
     return Object.assign({}, prev, obj);
   }, {});
 }

package/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app :class="page.styleClasses">
+  <v-app :class="page.styleClasses" ref="appRef">
     <component :is="containerComponent" :spec="formSpec" :style="'height: 100%;'">
       <nav-layout ref="navBar" @mounted="updateMainHeight()" :page="page" />
 
@@ -44,7 +44,7 @@ import FormPanel from "./components/panels/form.vue";
 import { vueApp } from "./store";
 import { useSocket } from "./components/composable/socket";
 import { usePasteable } from "./components/composable/pasteable";
-import { computed, getCurrentInstance, onMounted } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { TOOLTIP_ID } from "./constant";
 import { watchGlibEvent } from "./store";
 import { htmlElement } from "./components/helper";
@@ -56,16 +56,17 @@ export default {
     const filePaster = computed(() => props.page.filePaster);
     usePasteable(filePaster);
     const tooltipId = TOOLTIP_ID;
+    const appRef = ref(null);
 
     onMounted(() => {
-      const el = htmlElement(getCurrentInstance().ctx);
+      const el = htmlElement(appRef.value);
       el.addEventListener('dirtyupdate', (event) => {
         const { dirty } = event.detail;
         vueApp.isFormDirty = dirty;
       });
     });
 
-    return { vueApp, tooltipId };
+    return { vueApp, tooltipId, appRef };
   },
   components: {
     "nav-layout": NavLayout,

package/components/component.vue

@@ -73,7 +73,7 @@ const RichTextField = defineAsyncComponent(() => import("./fields/richText.vue")
 const FileField = defineAsyncComponent(() => import("./fields/file.vue"));
 const MultiUploadField = defineAsyncComponent(() => import("./fields/multiUpload.vue"));
 import SignField from "./fields/sign.vue";
-import SelectField from "./fields/select.vue";
+import SelectField from "./fields/_select.vue";
 import TimeZoneField from "./fields/timeZone.vue";
 import DynamicSelectField from "./fields/dynamicSelect.vue";
 import RadioGroupField from "./fields/radioGroup.vue";

package/components/composable/form.js

@@ -1,4 +1,4 @@
-import { getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
+import { inject, nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from "vue";
 import { htmlElement } from "../helper";
 
 const setBusy = (htmlElement, value) => {
@@ -14,6 +14,7 @@ const triggerOnChange = (htmlElement) => {
 const triggerOnInput = (htmlElement) => nextTick(() => htmlElement.dispatchEvent(new Event('input', { bubbles: true })));
 
 const getFormData = (el, ignoredFields = new Set()) => {
+  if (!el) return {};
   if (!(el instanceof HTMLFormElement) && el instanceof HTMLElement) {
     el = el.querySelector('form');
   }
@@ -37,37 +38,36 @@ const getFormData = (el, ignoredFields = new Set()) => {
   return obj;
 };
 
-const ignoredDirtyCheckFields = ref(new Set());
-
-function useDirtyState() {
-
+function useGlibForm({ formRef }) {
   const initFormData = ref({});
   const currentFormData = ref({});
   const el = ref(null);
-  const instance = getCurrentInstance();
+  const registeredInputs = ref([]);
+  const ignoredDirtyCheckFields = ref(new Set());
 
   const dispatchEv = (dirty = isFormDirty()) => {
+    if (!el.value) return;
+
     const event = new CustomEvent('dirtyupdate', { bubbles: true, detail: { dirty: dirty } });
     el.value.dispatchEvent(event);
   };
 
-
   onMounted(() => {
-    setTimeout(() => {
-      el.value = htmlElement(instance.ctx);
-      initFormData.value = getFormData(el.value, ignoredDirtyCheckFields.value);
-      currentFormData.value = initFormData.value;
+    el.value = htmlElement(formRef.value);
+  });
 
-      dispatchEv();
-    }, 500);
+  watch(registeredInputs, (value) => {
+    initFormData.value = getFormData(el.value, ignoredDirtyCheckFields.value);
+    currentFormData.value = initFormData.value;
 
+    dispatchEv();
   });
 
   onBeforeUnmount(() => {
     dispatchEv(false);
   });
 
-  const update = (event) => {
+  const updateDirtyState = (event) => {
     currentFormData.value = getFormData(el.value, ignoredDirtyCheckFields.value);
     dispatchEv();
   };
@@ -76,7 +76,22 @@ function useDirtyState() {
     return JSON.stringify(initFormData.value) !== JSON.stringify(currentFormData.value);
   };
 
-  return { update };
+  provide('registeredInputs', registeredInputs);
+  provide('ignoredDirtyCheckFields', ignoredDirtyCheckFields);
+
+  return { updateDirtyState };
+}
+
+function useGlibInput({ props }) {
+  const registeredInputs = inject('registeredInputs', null);
+  const ignoredDirtyCheckFields = inject('ignoredDirtyCheckFields', null);
+
+  if (!registeredInputs || !ignoredDirtyCheckFields) return;
+
+  onMounted(() => {
+    if (props.spec.disableDirtyCheck) ignoredDirtyCheckFields.value.add(props.spec.name);
+    registeredInputs.value = Array.from(new Set(registeredInputs.value).add(props.spec.name));
+  });
 }
 
-export { setBusy, triggerOnChange, triggerOnInput, useDirtyState, getFormData, ignoredDirtyCheckFields };
+export { setBusy, triggerOnChange, triggerOnInput, useGlibForm, useGlibInput, getFormData };

package/components/composable/parser.js

@@ -1,4 +1,6 @@
-export function parseCsv(csvString) {
+export function parseCsv(csvString, options = { withHeader: true }) {
+  const { withHeader } = options;
+
   // https://stackoverflow.com/a/41563966/9970813
   let prevLetter = "",
     row = [""],
@@ -19,7 +21,8 @@ export function parseCsv(csvString) {
       letter = row[++columnIndex] = "";
     } else if ("\n" === letter && canSplit) {
       if ("\r" === prevLetter) {
-        row[columnIndex] = row[columnIndex].slice(0, -1);
+        const str = row[columnIndex].slice(0, -1);
+        row[columnIndex] = str.includes(',') ? parseCsv(str, { withHeader: false })[0] : str;
       }
       row = result[++rowIndex] = [(letter = "")];
       columnIndex = 0;
@@ -37,10 +40,14 @@ export function parseCsv(csvString) {
   //   return r[0] !== "undefined"
   // });
 
-  const columns = result.shift();
-  return result.map(row => {
-    return columns.reduce((prev, curr, index) => {
-      return Object.assign({}, prev, { [curr]: row[index] });
-    }, {});
-  });
+  if (withHeader) {
+    const columns = result.shift();
+    return result.map(row => {
+      return columns.reduce((prev, curr, index) => {
+        return Object.assign({}, prev, { [curr]: row[index] });
+      }, {});
+    });
+  }
+
+  return result;
 }

package/components/fields/_patternText.vue

@@ -11,6 +11,7 @@
 
 <script>
 import { sanitize } from "../composable/date";
+import { useGlibInput } from "../composable/form";
 import inputVariant from '../mixins/inputVariant';
 
 export default {
@@ -20,6 +21,9 @@ export default {
     type: { type: String, required: true },
     pattern: { type: String, required: true }
   },
+  setup(props) {
+    useGlibInput({ props });
+  },
   methods: {
     _linkFieldModels(valueChanged) {
       if (valueChanged) this.fieldModel = this.sanitizeValue(this.spec.value);

package/components/fields/_select.vue

@@ -38,7 +38,7 @@
 <script>
 import inputVariant from '../mixins/inputVariant';
 import { determineDensity } from "../../utils/constant";
-import { triggerOnChange, triggerOnInput } from "../composable/form";
+import { triggerOnChange, triggerOnInput, useGlibInput } from "../composable/form";
 
 export default {
   mixins: [inputVariant],
@@ -46,6 +46,9 @@ export default {
     spec: { type: Object, required: true },
     defaultValue: { type: String, default: null }
   },
+  setup(props) {
+    useGlibInput({ props });
+  },
   data() {
     return {
       options: null,
@@ -96,6 +99,13 @@ 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;
+    // },
     onChange() {
       this.$executeOnChange();
       const containerEl = this.$refs.container;
@@ -121,13 +131,6 @@ export default {
         this.fieldModel = this.defaultValue;
       }
     },
-    // TODO
-    // sanitizeValue(value) {
-    //   if (this.spec.csvMode) {
-    //     return value.replace(/,\s+/g,",").split(",");
-    //   }
-    //   return value;
-    // },
     $registryEnabled() {
       return false;
     }

package/components/fields/check.vue

@@ -20,6 +20,7 @@
 <script>
 import ThumbnailCheck from "../fields/check/_thumbnail.vue";
 import FeaturedCheck from "../fields/check/_featured.vue";
+import { useGlibInput } from "../composable/form";
 export default {
   components: {
     "thumbnail-check": ThumbnailCheck,
@@ -35,6 +36,9 @@ export default {
   props: {
     spec: { type: Object, required: true }
   },
+  setup(props) {
+    useGlibInput({ props });
+  },
   data() {
     return {
       uncheckValue: this.spec.uncheckValue

package/components/fields/checkGroup.vue

@@ -14,6 +14,7 @@
 <script>
 import { defineComponent, ref, provide, reactive } from "vue";
 import FieldCheck from './check.vue';
+import { useGlibInput } from "../composable/form";
 
 export default defineComponent({
   components: {
@@ -22,6 +23,9 @@ export default defineComponent({
   props: {
     spec: { type: Object, required: true }
   },
+  setup(props) {
+    useGlibInput({ props });
+  },
   watch: {
     childModels: function (val) {
       // Ensure submitted params are in the same order as the checkboxes in display`

package/components/fields/chipGroup.vue

@@ -14,13 +14,16 @@
 <script>
 import { defineComponent } from "vue";
 import inputVariant from "../mixins/inputVariant";
-import { triggerOnChange, triggerOnInput } from "../composable/form";
+import { triggerOnChange, triggerOnInput, useGlibInput } from "../composable/form";
 
 export default defineComponent({
   mixins: [inputVariant],
   props: {
     spec: Object
   },
+  setup(props) {
+    useGlibInput({ props });
+  },
   computed: {
     values() {
       if (this.fieldModel == null || this.fieldModel == undefined || this.fieldModel.length <= 0) return [null];

package/components/fields/date.vue

@@ -4,6 +4,7 @@
 </template>
 
 <script>
+import { useGlibInput } from "../composable/form";
 import PatternTextField from "./_patternText.vue";
 
 export default {
@@ -13,7 +14,10 @@ export default {
   },
   props: {
     spec: { type: Object, required: true },
-  }
+  },
+  setup(props) {
+    useGlibInput({ props });
+  },
 };
 </script>
 

package/components/fields/datetime.vue

@@ -18,6 +18,7 @@
 </template>
 
 <script>
+import { useGlibInput } from "../composable/form";
 import PatternTextField from "./_patternText.vue";
 
 export default {
@@ -27,7 +28,10 @@ export default {
   },
   props: {
     spec: { type: Object, required: true },
-  }
+  },
+  setup(props) {
+    useGlibInput({ props });
+  },
 };
 </script>
 

package/components/fields/file.vue

@@ -36,11 +36,15 @@
 import Uploader from "../../utils/glibDirectUpload";
 import { validateFile } from "../composable/file";
 import { determineVariant } from "../../utils/constant";
+import { useGlibInput } from "../composable/form";
 
 export default {
   props: {
     spec: { type: Object, required: true },
   },
+  setup(props) {
+    useGlibInput({ props });
+  },
   data() {
     return {
       uploaded: false,

package/components/fields/hidden.vue

@@ -3,10 +3,15 @@
 </template>
 
 <script>
+import { useGlibInput } from "../composable/form";
+
 export default {
   props: {
     spec: { type: Object, required: true },
   },
+  setup(props) {
+    useGlibInput({ props });
+  },
   methods: {
     $ready() {
       // this.fieldModel = this.spec.value;

package/components/fields/multiUpload.vue

@@ -58,7 +58,7 @@ import { ref, computed, defineComponent, watch, getCurrentInstance } from 'vue';
 import { VIcon } from 'vuetify/components';
 import * as dropUploader from "../composable/upload";
 import * as delegateUploader from "../composable/upload_delegator";
-import { triggerOnChange } from "../composable/form";
+import { triggerOnChange, useGlibInput } from "../composable/form";
 import { nextTick } from "vue";
 import { useFilesState, useFileUtils } from "../composable/file";
 import doc from "./selectAsset/doc-1.png";
@@ -187,6 +187,8 @@ export default defineComponent({
       fileSelect.value.click();
     }
 
+    useGlibInput({ props });
+
     return {
       files,
       fileSelect,

package/components/fields/otpField.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { triggerOnChange } from "../composable/form";
+import { triggerOnChange, useGlibInput } from "../composable/form";
 import inputVariant from "../mixins/inputVariant";
 
 export default {
@@ -16,6 +16,9 @@ export default {
   props: {
     spec: { type: Object, required: true },
   },
+  setup(props) {
+    useGlibInput({ props });
+  },
   watch: {
     // there is a bug empty otp doesn't trigger form onchange
     fieldModel(val, oldVal) {

package/components/fields/radio.vue

@@ -19,6 +19,7 @@
 
 import ThumbnailRadio from "../fields/radio/_thumbnail.vue";
 import FeaturedRadio from "../fields/radio/_featured.vue";
+import { useGlibInput } from "../composable/form";
 
 export default {
   components: {
@@ -28,6 +29,9 @@ export default {
   props: {
     spec: { type: Object, required: true }
   },
+  setup(props) {
+    useGlibInput({ props });
+  },
   inject: ['radioGroupCtx'],
   computed: {
     isActive() {

package/components/fields/rating.vue

@@ -8,7 +8,12 @@
 </template>
 
 <script>
+import { useGlibInput } from "../composable/form";
+
 export default {
-  props: { spec: { type: Object, required: true } }
+  props: { spec: { type: Object, required: true } },
+  setup(props) {
+    useGlibInput({ props });
+  },
 };
 </script>

package/components/fields/richText.vue

@@ -39,7 +39,7 @@ import QuillImageDropAndPaste from "quill-image-drop-and-paste";
 import bus from "../../utils/eventBus";
 
 import { vueApp } from "../../store";
-import { triggerOnInput } from "../composable/form";
+import { triggerOnInput, useGlibInput } from "../composable/form";
 import { validateFile } from "../composable/file";
 
 var ImageBlot = Quill.import("formats/image");
@@ -177,6 +177,9 @@ export default {
   props: {
     spec: { type: Object, required: true },
   },
+  setup(props) {
+    useGlibInput({ props });
+  },
   data: function () {
     return {
       customToolbar: [

package/components/fields/sign.vue

@@ -47,6 +47,9 @@
 import { ref, computed } from "vue";
 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']);

package/components/fields/text.vue

@@ -14,6 +14,7 @@
 import eventFiltering from "../../utils/eventFiltering";
 import inputVariant from "../mixins/inputVariant";
 import { determineDensity } from "../../utils/constant";
+import { useGlibInput } from "../composable/form";
 
 export default {
   mixins: [inputVariant],
@@ -21,6 +22,9 @@ export default {
     spec: { type: Object, required: true },
     type: { type: String, required: true },
   },
+  setup(props) {
+    useGlibInput({ props });
+  },
   data() {
     return {
       // config: {},

package/components/fields/textarea.vue

@@ -12,12 +12,16 @@
 import eventFiltering from "../../utils/eventFiltering";
 import inputVariant from "../mixins/inputVariant";
 import { determineDensity } from "../../utils/constant";
+import { useGlibInput } from "../composable/form";
 
 export default {
   mixins: [inputVariant],
   props: {
     spec: { type: Object, required: true },
   },
+  setup(props) {
+    useGlibInput({ props });
+  },
   data() {
     return {
       // styles: null,

package/components/mixins/styles.js

@@ -2,7 +2,7 @@ import Hash from "../../utils/hash";
 import { fieldModels, watchFieldModels } from "../composable/conditional";
 import { determineColor } from "../../utils/constant";
 import Action from "../../action";
-import { ignoredDirtyCheckFields, triggerOnChange } from "../composable/form";
+import { triggerOnChange } from "../composable/form";
 import { realComponent } from "../helper";
 import set from "lodash.set";
 const NUMBER_PRECISION = 2;
@@ -284,8 +284,6 @@ export default {
         if (valueChanged) {
           this.fieldModel = this.latestSpec.value;
         }
-
-        if (this.spec.disableDirtyCheck) ignoredDirtyCheckFields.value.add(this.spec.name);
       }
     },
     action_resetValue() {

package/components/panels/bulkEdit2.vue

@@ -7,20 +7,21 @@
       <table :class="rowLoaded ? 'loaded' : 'nonLoaded'" width="100%">
         <thead v-if="props.spec.viewHeaders">
           <tr>
-            <th class="cell-selection" v-if="rowLoaded"><v-checkbox v-model="checkbox" color="primary"
+            <th class="cell-selection" v-if="rowLoaded"><v-checkbox v-model="checkbox" density="compact" color="primary"
                 @change="checkAll"></v-checkbox></th>
-            <th :class="`cell-column${cellIndex}`" v-for="(cell, cellIndex) in props.spec.viewHeaders" :key="cell.id"
-              :style="{ minWidth: `${cell.minWidth || 100}px` }">
-              <span>{{ cell.text }}</span>
+            <th :class="`cell-column${cellIndex}`" v-for="(headerSpec, cellIndex) in tableHeaders" :key="cellIndex"
+              :style="{ minWidth: `${props.spec.viewHeaders[cellIndex].minWidth || 100}px` }">
+              <glib-component :spec="headerSpec" />
             </th>
           </tr>
         </thead>
 
         <tbody>
           <template v-if="rowLoaded">
-            <tr v-for="(row, rowIndex) in currentPageRows" :key="`row_${rowIndex}_${row.status}`">
+            <tr v-for="(row, rowIndex) in currentPageRows" :key="`row_${rowIndex}`"
+              :class="row.selected ? 'selected' : 'unselected'">
               <td class="cell-selection">
-                <v-checkbox v-model="row.selected" color="primary"></v-checkbox>
+                <v-checkbox v-model="row.selected" density="compact" color="primary"></v-checkbox>
                 <glib-component :spec="row.icon"></glib-component>
               </td>
               <!-- <td class="cell-status"><v-icon :icon="row.icon.name" :color="row.icon.color"></v-icon></td> -->
@@ -52,8 +53,8 @@
       </table>
 
     </div>
-    <v-pagination density="compact" v-if="paginationLength > 1" v-model="currPageIndex"
-      :length="paginationLength"></v-pagination>
+    <v-pagination :disabled="paginationConfig.disabled" density="compact" v-if="paginationLength > 1"
+      v-model="currPageIndex" :length="paginationLength"></v-pagination>
   </div>
 </template>
 
@@ -75,10 +76,14 @@ table thead th {
   display: flex;
   align-items: center;
 }
+
+tr.selected {
+  background-color: white;
+}
 </style>
 
 <script setup>
-import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
+import { computed, getCurrentInstance, onMounted, reactive, ref, watch } from "vue";
 import { parseCsv } from "../composable/parser";
 import Action from "../../action";
 import Hash from "../../utils/hash";
@@ -97,7 +102,7 @@ class Row {
       pending: { name: 'pending', color: 'info' },
       succeeded: { name: 'verified', color: 'success' },
       failed: { name: 'cancel', color: 'error' }
-    }
+    };
 
     // if (!this.status) return {};
     const properties = new Hash(this.status ? obj[this.status] : { name: '' });
@@ -110,8 +115,9 @@ class Row {
     } else {
       return {
         view: 'label',
-        text: this.index + 1
-      }
+        styleClasses: ['status'],
+        text: `#${this.index + 1}`
+      };
     }
   }
 }
@@ -132,8 +138,20 @@ const props = defineProps(['spec']);
 const fileInput = ref(null);
 const checkbox = ref(false);
 const instance = getCurrentInstance();
+const tableHeaders = props.spec.viewHeaders.map((header) => {
+  const spec = {
+    view: 'label',
+    text: header.text
+  };
+
+  if (header.tooltip) {
+    spec.tooltip = header.tooltip;
+  }
+
+  return spec;
+});
 const currPageIndex = ref(1);
-const paginationConfig = { per: 25 };
+const paginationConfig = reactive({ per: 25, disabled: false });
 // const paginationLength = computed(() => Math.ceil(unsavedRows.value.length / paginationConfig.per));
 const paginationLength = computed(() => getPageIndex(unsavedRows.value.length));
 
@@ -141,15 +159,15 @@ const rows = ref(makeRows(props.spec.dataRows));
 const indexedRows = ref({});
 let succeededRows = [];
 // const succeededRows = computed(() => rows.value.filter((row) => row.status === 'succeeded'))
-const unsavedRows = computed(() => rows.value.filter((row) => row.status !== 'succeeded'))
+const unsavedRows = computed(() => rows.value.filter((row) => row.status !== 'succeeded'));
 const currentPageRows = computed(() => {
   // const firstItemIndex = currPageIndex.value <= 1 ? 0 : currPageIndex.value * paginationConfig.per;
 
   const firstItemIndex = (currPageIndex.value - 1) * paginationConfig.per;
   const lastItemIndex = firstItemIndex + paginationConfig.per;
 
-  return unsavedRows.value.slice(firstItemIndex, lastItemIndex)
-})
+  return unsavedRows.value.slice(firstItemIndex, lastItemIndex);
+});
 const selectedRows = computed(() => {
   const arr = [];
   unsavedRows.value.filter((row) => row.selected).forEach((row) => arr.push(row));
@@ -168,7 +186,8 @@ onMounted(() => {
     }
 
     const clonedRows = JSON.parse(JSON.stringify(selectedRows.value));
-    Action.execute(props.spec.onSubmitStart, instance.ctx)
+    Action.execute(props.spec.onSubmitStart, instance.ctx);
+    paginationConfig.disabled = true;
 
     importCanceled = false;
     // Reset to first page before importing, so the progress is visible.
@@ -178,11 +197,11 @@ onMounted(() => {
 });
 
 
-watch(props, (value) => {
-  if (value.spec.dataRows && value.spec.dataRows.length > 0) {
-    rows.value = makeRows(value.spec.dataRows);
-  }
-});
+// watch(props, (value) => {
+//   if (value.spec.dataRows && value.spec.dataRows.length > 0) {
+//     rows.value = makeRows(value.spec.dataRows);
+//   }
+// });
 
 watch(selectedRows, (value) => {
   const rows = value.map((row) => {
@@ -208,11 +227,11 @@ function handleDrop(e) {
 }
 
 function updateRows(newRows) {
-  rows.value = newRows
+  rows.value = newRows;
 
   newRows.forEach((row) => {
-    indexedRows.value[row.id] = row
-  })
+    indexedRows.value[row.id] = row;
+  });
 }
 
 function makeRows(dataRows, selected = false) {
@@ -221,10 +240,10 @@ function makeRows(dataRows, selected = false) {
     // 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) => {
-      const view = Object.assign({}, viewCells, dataRow.columns[i]);
+      const value = dataRow.columns[i].value;
+      const view = Object.assign({}, viewCells, dataRow.columns[i], { value: value });
       const cellIndex = i;
       const viewHeaders = props.spec.viewHeaders;
-      const value = dataRow.columns[i].value;
       return new Cell({ rowId: id, view, cellIndex, viewHeaders, value });
     });
     return new Row({ selected, columns, id, index });
@@ -248,6 +267,7 @@ function handleCellChange(e, cell) {
   }
 
   cell.value = value;
+  cell.view.value = value;
 
   Action.executeWithFormData(props.spec.onCellChange, instance.ctx, { rowId, columnId, value });
 }
@@ -285,7 +305,7 @@ function loadFile(files) {
 }
 
 function getIndexAmongVisibleRows(row) {
-  let indexAmongVisibleRows = 0
+  let indexAmongVisibleRows = 0;
   for (const currentRow of rows.value) {
     if (currentRow.status !== 'succeeded') {
       indexAmongVisibleRows++;
@@ -303,7 +323,7 @@ function getLatestIndexAmongVisibleRows() {
 }
 
 function getPageIndex(rowIndex) {
-  return Math.ceil(rowIndex / paginationConfig.per)
+  return Math.ceil(rowIndex / paginationConfig.per);
 }
 
 function submitRows(rows) {
@@ -311,7 +331,8 @@ function submitRows(rows) {
     // Move back to the first page because the current page might not have any row anymore, e.g.
     // all the rows on the current page has been successfully submitted.
     currPageIndex.value = getPageIndex(getLatestIndexAmongVisibleRows());
-    Action.execute(props.spec.onSubmitEnd, instance.ctx)
+    Action.execute(props.spec.onSubmitEnd, instance.ctx);
+    paginationConfig.disabled = false;
     return;
   }
 
@@ -321,14 +342,14 @@ function submitRows(rows) {
   currPageIndex.value = getPageIndex(getIndexAmongVisibleRows(row));
 
   // change row status to pending
-  updateRow({ rowId: row.id, status: 'pending' })
+  updateRow({ rowId: row.id, status: 'pending' });
 
   const formData = row.columns.reduce((prev, curr) => {
     return Object.assign(prev, {
       [curr.cellId]: curr.value,
-      [props.spec.paramNameForRowId || rowId]: row.id
-    })
-  }, {})
+      [props.spec.paramNameForRowId || 'rowId']: row.id
+    });
+  }, {});
   const { submitUrl, paramName } = props.spec.import;
 
   const data = {
@@ -341,14 +362,16 @@ function submitRows(rows) {
 
     if (importCanceled) {
       importCanceled = false;
-      Action.execute(props.spec.onSubmitEnd, instance.ctx)
+      Action.execute(props.spec.onSubmitEnd, instance.ctx);
+      paginationConfig.disabled = false;
     } else {
       submitRows(rows);
     }
   }, (error, response) => {
     const message = error.toString();
     Utils.launch.snackbar.error(message, instance.ctx);
-    Action.execute(props.spec.onSubmitEnd, instance.ctx)
+    Action.execute(props.spec.onSubmitEnd, instance.ctx);
+    paginationConfig.disabled = false;
   });
 }
 

package/components/panels/flow.vue

@@ -67,7 +67,6 @@ export default {
           this.applyStyles(styles, this.lg);
           break;
         case "md":
-          console.log(this.applyStyles(styles, this.xs));
           this.applyStyles(styles, this.xs);
           this.applyStyles(styles, this.sm);
           this.applyStyles(styles, this.md);

package/components/panels/form.vue

@@ -14,7 +14,7 @@
 
 <script>
 import { provide, ref } from "vue";
-import { useDirtyState } from "../composable/form";
+import { useGlibForm } from "../composable/form";
 
 export default {
   props: {
@@ -23,11 +23,12 @@ export default {
   setup() {
     const formCtx = ref({ form: null });
 
-    const dirtyState = useDirtyState();
+    const form = ref(null)
+    const glibForm = useGlibForm({ formRef: form });
 
     provide('formCtx', formCtx);
 
-    return { formCtx, dirtyState };
+    return { formCtx, glibForm, form };
   },
   data: () => ({
     url: null,
@@ -109,7 +110,7 @@ export default {
         };
         this.formElement.onchange = () => onChangeHandler();
 
-        this.formElement.oninput = (event) => this.dirtyState.update(event);
+        this.formElement.oninput = (event) => this.glibForm.updateDirtyState(event);
       }
 
       // this.parentStyles = this.genericStyles({ width: this.spec.width });

package/package.json

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

package/utils/http.js

@@ -108,14 +108,14 @@ export default class {
       const windowOrDialog = windowMode ? true : !topOfDialog;
 
       this.execute(properties, "GET", component, (data, response) => {
+        const redirectUrl = Utils.url.htmlUrl(response.url);
         // TODO: Check if it is okay to remove this `if` statement so we always push even if it's the same URL.
         if (forcePushHistory || (windowOrDialog && !sameUrl && !properties.updateExisting)) {
-          const redirectUrl = Utils.url.htmlUrl(response.url);
           Utils.history.pushPage(data, redirectUrl);
         }
 
         if (!forcePushHistory && windowMode && properties.updateExisting) {
-          Utils.history.updatePage(data);
+          Utils.history.updatePage(data, redirectUrl);
         }
 
         this.forceComponentUpdate(() => {