glib-web 4.16.1 → 4.18.0

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/_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>
@@ -36,6 +36,7 @@ export default {
       return this.$classes();
     },
     value() {
+      // TODO: is this still relevant?
       return this.isBusy ? "autorenew" : this.name;
     },
     icon() {

package/components/_internal_button.vue

@@ -1,10 +1,9 @@
 <template>
   <!-- Use `click.prevent` to prevent bubbling when clicking a dropdown button that is
          located in a list row that has href. -->
-  <v-btn :type="type" :disabled="isBusy || spec.disabled" :style="styles()" :class="$classes()" :href="$href()"
-    :rel="$rel()" :variant="variant" :rounded="$classes().includes('rounded') || null" :density="density" :size="size"
-    :color="color" :active="$classesInclude('active')" :icon="$classes().includes('icon') ? $vuetify : null"
-    @click.prevent="
+  <v-btn :type="type" :disabled="spec.disabled" :style="styles()" :class="$classes()" :href="$href()" :rel="$rel()"
+    :variant="variant" :rounded="$classes().includes('rounded') || null" :density="density" :size="size" :color="color"
+    :active="$classesInclude('active')" :icon="$classes().includes('icon') ? $vuetify : null" @click.prevent="
       type == 'submit' ? $dispatchEvent('forms/submit') : $onClick()
       ">
     <!-- <span v-if="spec.icon"><common-icon :spec="spec.icon || {}" /></span> -->
@@ -16,9 +15,9 @@
 </template>
 
 <script>
-import { computed, nextTick } from "vue";
+import { nextTick } from "vue";
 import { determineColor, determineDensity, determineVariant, determineSize } from '../utils/constant';
-import { vueApp } from "../store";
+
 
 export default {
   props: {
@@ -27,10 +26,6 @@ export default {
     hideTextOnXs: { type: Boolean },
     eventHandlers: { type: Object, default: null }
   },
-  setup() {
-    const isBusy = computed(() => vueApp.isBusy);
-    return { isBusy };
-  },
   computed: {
     color() {
       // return this.spec.color

package/components/composable/form.js

@@ -41,6 +41,7 @@ const getFormData = (el, ignoredFields = new Set()) => {
 function useGlibForm({ formRef }) {
   const initFormData = ref({});
   const currentFormData = ref({});
+  const changed = ref(false);
   const el = ref(null);
   const registeredInputs = ref([]);
   const ignoredDirtyCheckFields = ref(new Set());
@@ -56,7 +57,12 @@ function useGlibForm({ formRef }) {
     el.value = htmlElement(formRef.value);
   });
 
-  watch(registeredInputs, (value) => {
+  const inputRegistrationWatcher = watch(registeredInputs, (value) => {
+    if (changed.value) {
+      inputRegistrationWatcher(); // remove watcher
+      return;
+    }
+
     initFormData.value = getFormData(el.value, ignoredDirtyCheckFields.value);
     currentFormData.value = initFormData.value;
 
@@ -69,6 +75,7 @@ function useGlibForm({ formRef }) {
 
   const updateDirtyState = (event) => {
     currentFormData.value = getFormData(el.value, ignoredDirtyCheckFields.value);
+    changed.value = true;
     dispatchEv();
   };
 

package/components/composable/upload.js

@@ -4,12 +4,12 @@ import Uploader from "../../utils/glibDirectUpload";
 import { vueApp } from "../../store";
 import { useFilesState, useFileUtils, validateFile } from "./file";
 
-function submitOnAllUploaded({ url, formData, files }) {
+function submitOnAllUploaded({ url, formData, files, actionName }) {
   const { uploaded } = useFilesState(files);
   return watch(uploaded, (val) => {
     if (val) {
       GLib.action.execute({
-        action: 'http/post',
+        action: actionName || 'http/post',
         url: url.value,
         formData: formData.value
       }, {});

package/components/fields/radio.vue

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

package/components/fields/radioGroup.vue

@@ -14,6 +14,8 @@
 </template>
 
 <script>
+import { useGlibInput } from '../composable/form';
+
 export default {
   props: {
     spec: { type: Object, required: true },
@@ -23,11 +25,14 @@ export default {
       radioGroupCtx: this
     };
   },
+  setup(props) {
+    useGlibInput({ props });
+  },
   computed: {
     childrenSpec() {
       return {
         childViews: this.spec.childViews
-      }
+      };
     }
   },
   methods: {

package/components/fields/richText.vue

@@ -303,7 +303,6 @@ export default {
       }
 
       this.$executeOnChange(this.producedValue);
-      if (this.$refs.container) triggerOnInput(this.$refs.container);
 
     }),
     onRawTextEditorChanged: eventFiltering.debounce(function () {
@@ -314,7 +313,6 @@ export default {
       );
 
       this.$executeOnChange(this.producedValue);
-      if (this.$refs.container) triggerOnInput(this.$refs.container);
     }),
     insertImage: function (file, Editor, cursorLocation, blob) {
       let vm = this;

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/progressbar.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-progress-linear :class="$classes()" :height="spec.height || 25" :color="spec.color"
+  <v-progress-linear :class="$classes()" :height="spec.height" :color="spec.color"
     :background-color="spec.backgroundColor" :disabled="true" :model-value="value_in_percentage"
-    :striped="$classes().includes('striped')" :reverse="spec.reversed || false" rounded>
+    :striped="$classes().includes('striped')" :reverse="spec.reversed || false" :rounded="spec.rounded">
     <strong v-if="!$classes().includes('no-text')">{{ Math.ceil(value_in_percentage) }}%</strong>
   </v-progress-linear>
 </template>

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

@@ -0,0 +1,75 @@
+import { testPageUrl } from "../../helper"
+const url = testPageUrl('dirty_state')
+
+describe('dirtyState', () => {
+  it('can be disabled', () => {
+    cy.visit(url)
+
+    cy.get('input[name="user[dirty_check_disabled]"]')
+      .type('TEST TEST TEST')
+      .blur()
+
+    cy.reload()
+
+    cy.get('input[name="user[dirty_check_disabled]"]').should('be.empty')
+  })
+
+  it('dirty if not equal to init value', () => {
+    cy.visit(url)
+
+    cy.contains('Male').click();
+
+    cy.on('window:confirm', (str) => {
+      cy.then(() => expect(str).to.equal('Changes you made have not been saved. Are you sure?'))
+      return false;
+    })
+
+    cy.contains('multiupload').click()
+    cy.contains('Female').click()
+    cy.contains('multiupload').click() // Try to navigate to another page
+    cy.get('h2').should('contain.text', 'MultiUpload')
+  })
+
+  it('have different context between window and dialog', () => {
+    cy.visit(url)
+
+    cy.contains('Dialog Form').click()
+
+    cy.get('input[name="user[name]"]').click().type('John Doe')
+
+    cy.contains('cancel').click()
+
+    let text = '';
+    cy.on('window:confirm', (str) => {
+      text = str;
+      return true;
+    })
+
+    cy.then(() => expect(text).to.equal('Changes you made have not been saved. Are you sure?'))
+
+    cy.contains('multiupload').click() // Try to navigate to another page
+    cy.get('h2').should('contain.text', 'MultiUpload')
+  })
+
+  it('pop on history back', () => {
+    cy.visit(testPageUrl('multiupload'))
+    cy.contains('dirty_state').click()
+
+    cy.contains('choice2').click()
+
+    cy.go('back')
+
+    let text = ''
+    cy.on('window:confirm', (str) => {
+      text = str;
+      return false;
+    })
+
+    cy.then(() => expect(text).to.equal('Changes you made have not been saved. Are you sure?'))
+
+    // dirty state is removed after second try
+    cy.go('back')
+
+    cy.get('h2').should('contain.text', 'MultiUpload')
+  })
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "4.16.1",
+  "version": "4.18.0",
   "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 = [];
 };
 

package/utils/http.js

@@ -289,11 +289,13 @@ export default class {
   static startIndicator(component) {
     if (component) realComponent(component)._disabled = true;
     this._showIndicator();
+    vueApp.isBusy = true;
   }
 
   static stopIndicator(component) {
     if (component) realComponent(component)._disabled = false;
     this._hideIndicator();
+    vueApp.isBusy = false;
   }
 
   static _showIndicator() {

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

@@ -1,52 +0,0 @@
-import { testPageUrl } from "../../helper"
-const url = testPageUrl('form_dynamic')
-
-describe('form', () => {
-  it('dynamic group', () => {
-    cy.visit(url)
-
-    cy.get('.text-success').click()
-
-    cy.contains('submit (if form valid)').should('have.class', 'v-btn--disabled')
-
-    cy.get('#input-17').type('Rate your breakfast')
-    cy.get('#input-19').click()
-    cy.get('.v-overlay-container').contains('Rating').click()
-
-    cy.contains('submit (if form valid)').should('not.have.class', 'v-btn--disabled')
-
-    cy.get(':nth-child(3) > :nth-child(1) > [style="display: block;"] > .group-wrapper > .text-error').click()
-
-    cy.contains('Confirm').click()
-
-    cy.contains('submit').click()
-
-
-    const result = `Method: POST
-Form Data:
-{
-  "evaluation": {
-    "0": {
-      "question": "Punctuality",
-      "type": "rating"
-    },
-    "1": {
-      "question": "Quality of work",
-      "type": "rating"
-    },
-    "2": {
-      "_destroy": "1",
-      "question": "Satisfied?",
-      "type": "yes_no"
-    },
-    "3": {
-      "question": "Rate your breakfast",
-      "type": "rating"
-    }
-  }
-}`
-
-    cy.get('.unformatted').should('contain.text', result)
-
-  })
-})