glib-web 4.8.3 → 4.9.0

package/action.js

@@ -36,7 +36,6 @@ import ActionsWindowsPrint from "./actions/windows/print";
 import ActionsPanelsScrollToBottom from "./actions/panels/scrollToBottom";
 import ActionsPanelsScrollTo from "./actions/panels/scrollTo";
 
-import ActionsWsPush from "./actions/ws/push";
 import ActionsCablesPush from "./actions/cables/push";
 
 import ActionsTimeoutsSet from "./actions/timeouts/set";
@@ -138,7 +137,6 @@ const actions = {
   "timeouts/set": ActionsTimeoutsSet,
   "timeouts/clear": ActionsTimeoutsClear,
 
-  "ws/push": ActionsWsPush,
   "cables/push": ActionsCablesPush,
 
   "auth/saveCsrfToken": ActionsAuthSaveCsrfToken,

package/actions/logics/set.js

@@ -22,6 +22,31 @@ const nullishCoalescing = function (a, b) {
 };
 jsonLogic.add_operation("??", nullishCoalescing);
 
+const sum = function (...args) {
+  return args.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
+};
+jsonLogic.add_operation("sum", sum);
+
+const countNonNull = function (...args) {
+  return args.reduce((accumulator, currentValue) => {
+    if (currentValue) {
+      accumulator++;
+    }
+  }, 0);
+};
+jsonLogic.add_operation("countNonNull", countNonNull);
+
+const printf = function (template, ...args) {
+  // See https://www.geeksforgeeks.org/what-are-the-equivalent-of-printf-string-format-in-javascript/
+  // const args = arguments;
+  return template.replace(/{(\d+)}/g, function (match, number) {
+    return typeof args[number] != 'undefined'
+      ? args[number]
+      : match;
+  });
+}
+jsonLogic.add_operation("printf", printf);
+
 export default class {
   execute(spec, component) {
     let targetComponent;

package/components/component.vue

@@ -107,13 +107,14 @@ import BulkEditPanel from "./panels/bulkEdit.vue";
 import BulkEditPanel2 from "./panels/bulkEdit2.vue";
 import CustomPanel from "./panels/custom.vue";
 import ColumnPanel from "./panels/column.vue";
-import ResponsivePanel from "./panels/responsive.vue";
+import ResponsivePanel from "./responsive.vue";
 import UlPanel from "./panels/ul.vue";
 import WebPanel from "./panels/web.vue";
 import GridPanel from "./panels/grid.vue";
 import TimelinePanel from "./panels/timeline.vue";
 import AssociationPanel from "./panels/association.vue";
 import TreePanel from "./panels/tree.vue";
+import PaginationPanel from "./panels/pagination.vue";
 
 import MultimediaVideo from "./multimedia/video.vue";
 
@@ -214,6 +215,7 @@ export default {
     "panels-timeline": TimelinePanel,
     "panels-association": AssociationPanel,
     "panels-tree": TreePanel,
+    "panels-pagination": PaginationPanel,
 
     "multimedia-video": MultimediaVideo,
 

package/components/composable/parser.js

@@ -37,5 +37,10 @@ export function parseCsv(csvString) {
   //   return r[0] !== "undefined"
   // });
 
-  return result;
+  const columns = result.shift();
+  return result.map(row => {
+    return columns.reduce((prev, curr, index) => {
+      return Object.assign({}, prev, { [curr]: row[index] });
+    }, {});
+  });
 }

package/components/fields/radio/_featured.vue

@@ -28,7 +28,8 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 240px;
+  width: 100%;
+  min-height: 230px;
   height: 100%;
   transition: border-color 0.3s, box-shadow 0.3s, color 0.3s;
   text-align: center;
@@ -45,7 +46,6 @@ export default {
 }
 
 .custom-radio:hover .custom-radio-label {
-  font-size: 22px;
   color: #0A2A9E;
 }
 
@@ -55,27 +55,21 @@ export default {
   align-items: center;
   justify-content: center;
   width: 100%;
-  padding: 40px;
+  min-height: 226px;
+  padding: 32px;
 }
 
 .custom-radio .custom-radio-label {
-  font-size: 22px;
+  font-size: 18px;
   color: inherit;
   margin-top: 24px;
   word-break: break-word;
-  min-width: 180px;
 }
 
 .custom-radio ::v-deep .v-selection-control__input {
-  width: 240px;
-  height: 254px;
+  width: 100%;
+  height: 100%;
   background-color: transparent;
-  left: 50%;
-
-  >.v-icon {
-    opacity: 0;
-  }
-
 }
 
 .custom-radio ::v-deep .v-selection-control__input::before {
@@ -103,7 +97,6 @@ export default {
 .radio--active .custom-radio-label {
   color: #0A2A9E;
   font-weight: 700;
-  font-size: 22px;
 }
 
 .radio--active .v-icon {

package/components/fields/radio.vue

@@ -37,8 +37,9 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 240px;
-  min-height: 254px;
+  width: 100%;
+  min-height: 230px;
+  height: 100%;
   transition: border-color 0.3s, box-shadow 0.3s, color 0.3s;
   text-align: center;
   cursor: pointer;
@@ -53,36 +54,20 @@ export default {
   border-color: #0A2A9E;
 }
 
-.custom-radio:hover .custom-radio-label {
-  font-size: 22px;
-  color: #0A2A9E;
-}
-
 .custom-radio .custom-radio-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
-  padding: 40px;
-}
-
-.custom-radio .custom-radio-label {
-  font-size: 22px;
-  color: inherit;
-  margin-top: 24px;
+  min-height: 226px;
+  padding: 32px;
 }
 
 .custom-radio ::v-deep .v-selection-control__input {
-  width: 240px;
-  height: 254px;
+  width: 100%;
+  height: 100%;
   background-color: transparent;
-  left: 50%;
-
-  >.v-icon {
-    opacity: 0;
-  }
-
 }
 
 .custom-radio ::v-deep .v-selection-control__input::before {
@@ -107,12 +92,6 @@ export default {
   border-color: #0A2A9E;
 }
 
-.radio--active .custom-radio-label {
-  color: #0A2A9E;
-  font-weight: 700;
-  font-size: 22px;
-}
-
 .radio--active .v-icon {
   color: #0A2A9E;
 }

package/components/h1.vue

@@ -1,20 +1,12 @@
 <template>
-  <h1
-    :style="textStyles()"
-    :class="$classes()"
-    :href="$href()"
-    :rel="$rel()"
-    @click="$onClick()"
-  >
+  <h1 :style="$styles()" :class="$classes()" :href="$href()" :rel="$rel()" @click="$onClick()">
     {{ spec.text }}
   </h1>
 </template>
 
 <script>
-import textMixin from "./mixins/text.js";
 
 export default {
-  mixins: [textMixin],
   props: {
     spec: { type: Object, required: true }
   }

package/components/h2.vue

@@ -1,20 +1,12 @@
 <template>
-  <h2
-    :style="textStyles()"
-    :class="$classes()"
-    :href="$href()"
-    :rel="$rel()"
-    @click="$onClick()"
-  >
+  <h2 :style="$styles()" :class="$classes()" :href="$href()" :rel="$rel()" @click="$onClick()">
     {{ spec.text }}
   </h2>
 </template>
 
 <script>
-import textMixin from "./mixins/text.js";
 
 export default {
-  mixins: [textMixin],
   props: {
     spec: { type: Object, required: true }
   }

package/components/h3.vue

@@ -1,20 +1,12 @@
 <template>
-  <h3
-    :style="textStyles()"
-    :class="$classes()"
-    :href="$href()"
-    :rel="$rel()"
-    @click="$onClick()"
-  >
+  <h3 :style="$styles()" :class="$classes()" :href="$href()" :rel="$rel()" @click="$onClick()">
     {{ spec.text }}
   </h3>
 </template>
 
 <script>
-import textMixin from "./mixins/text.js";
 
 export default {
-  mixins: [textMixin],
   props: {
     spec: { type: Object, required: true }
   }

package/components/h4.vue

@@ -1,14 +1,12 @@
 <template>
-  <h4 :style="textStyles()" :class="$classes()" :href="$href()" :rel="$rel()" @click="$onClick()">
+  <h4 :style="$styles()" :class="$classes()" :href="$href()" :rel="$rel()" @click="$onClick()">
     {{ spec.text }}
   </h4>
 </template>
 
 <script>
-import textMixin from "./mixins/text.js";
 
 export default {
-  mixins: [textMixin],
   props: {
     spec: { type: Object, required: true }
   }

package/components/h5.vue

@@ -1,20 +1,12 @@
 <template>
-  <h5
-    :style="textStyles()"
-    :class="$classes()"
-    :href="$href()"
-    :rel="$rel()"
-    @click="$onClick()"
-  >
+  <h5 :style="$styles()" :class="$classes()" :href="$href()" :rel="$rel()" @click="$onClick()">
     {{ spec.text }}
   </h5>
 </template>
 
 <script>
-import textMixin from "./mixins/text.js";
 
 export default {
-  mixins: [textMixin],
   props: {
     spec: { type: Object, required: true }
   }

package/components/h6.vue

@@ -1,20 +1,11 @@
 <template>
-  <h4
-    :style="textStyles()"
-    :class="$classes()"
-    :href="$href()"
-    :rel="$rel()"
-    @click="$onClick()"
-  >
+  <h4 :style="$styles()" :class="$classes()" :href="$href()" :rel="$rel()" @click="$onClick()">
     {{ spec.text }}
   </h4>
 </template>
 
 <script>
-import textMixin from "./mixins/text.js";
-
 export default {
-  mixins: [textMixin],
   props: {
     spec: { type: Object, required: true }
   }

package/components/label.vue

@@ -1,15 +1,12 @@
 <template>
-  <a v-if="spec.onClick" :href="$href()" :rel="$rel()" :style="textStyles()" :class="$classes()" @click="$onClick()">{{
+  <a v-if="spec.onClick" :href="$href()" :rel="$rel()" :style="$styles()" :class="$classes()" @click="$onClick()">{{
     spec.text }}</a>
   <span v-else :style="$styles()" :class="$classes()">{{ spec.text }}</span>
 </template>
 
 <script>
-// import actionCableMixin from "./mixins/ws/actionCable";
-import textMixin from "./mixins/text.js";
 
 export default {
-  mixins: [textMixin],
   props: {
     spec: { type: Object, required: true }
   }

package/components/mixins/updatableComponent.js

@@ -0,0 +1,54 @@
+export default {
+  computed: {
+    viewId() {
+      if (this.spec && this.spec.id) {
+        const id = this.spec.id;
+
+        if (id.includes('{{entry_index}}')) {
+          const dynamicGroupEntry = this.$closest("fields/internalDynamicGroupEntry");
+          if (dynamicGroupEntry) {
+            return dynamicGroupEntry.$populateIndexes(id);
+          }
+        }
+
+        return id;
+      }
+    }
+  },
+  methods: {
+    $ready() {
+      let spec = this.spec;
+      if (spec && spec.id && this.$registryEnabled()) {
+
+        const id = this.viewId;
+
+        const existingComponent = GLib.component.findById(id);
+        // A component with the same ID in a different page shouldn't be considered a
+        // duplicate. See `utils/components#deregister` for more details.
+        if (existingComponent) {
+          console.warn(
+            "Duplicate component ID:",
+            id,
+            "Existing:",
+            GLib.component.vueName(existingComponent),
+            "New:",
+            GLib.component.vueName(this)
+          );
+        }
+        const newComponent = this;
+        GLib.component.register(id, newComponent);
+      }
+    },
+    $tearDown() {
+      let spec = this.spec;
+
+      if (spec && spec.id && this.$registryEnabled()) {
+        GLib.component.deregister(spec.id, this);
+      }
+    },
+    $registryEnabled() {
+      // Common classes such as `_select` need to return false so that it doesn't override its parent (e.g. `select`).
+      return false;
+    }
+  }
+};

package/components/panels/bulkEdit2.vue

@@ -2,11 +2,14 @@
   <div :style="$styles()" :class="$classes()" v-if="loadIf">
     <div>Rows: {{ loadedRowCount }} Selected: {{ selectedRowCount }}</div>
     <input ref="fileInput" style="display: none;" type="file" accept=".csv" @change="handleClick" />
+
     <div class="scrollable">
-      <table :class="rowLoaded ? 'loaded' : 'nonLoaded'">
+      <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" @change="checkAll"></v-checkbox></th>
+            <th class="cell-selection" v-if="rowLoaded"><v-checkbox v-model="checkbox" color="primary"
+                @change="checkAll"></v-checkbox></th>
+            <th></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>
@@ -18,6 +21,7 @@
           <template v-if="rowLoaded">
             <tr v-for="(row, rowIndex) in rows" :key="`row_${rowIndex}`">
               <td class="cell-selection"><v-checkbox v-model="row.selected" color="primary"></v-checkbox></td>
+              <td class="cell-status"><glib-component :spec="row.iconSpec" /></td>
               <td :class="`cell-column${cellIndex}`" v-for="(cell, cellIndex) in row.columns" :key="`cell_${cellIndex}`"
                 @change="(e) => handleCellChange(e, cell)">
                 <glib-component :spec="cell.view"></glib-component>
@@ -25,19 +29,21 @@
             </tr>
           </template>
 
-          <tr v-else>
-            <td colspan="100%" style="padding-top: 8px">
-              <div class="gdrop-file border-[2px]" @dragover="(e) => e.preventDefault()" @drop="handleDrop"
-                @click="fileInput.click()">
-
-                <div class="cloud" style="pointer-events: none;">
-                  <v-icon ref="icon" size="48" class="icon">cloud_upload</v-icon>
-                  <h4 class="title">Drag your CSV file here</h4>
-                  <p class="subtitle">or click to browse</p>
+          <template v-else>
+            <tr>
+              <td colspan="100%" style="padding-top: 8px">
+                <div class="gdrop-file border-[2px]" @dragover="(e) => e.preventDefault()" @drop="handleDrop"
+                  @click="fileInput.click()">
+
+                  <div class="cloud" style="pointer-events: none;">
+                    <v-icon ref="icon" size="48" class="icon">cloud_upload</v-icon>
+                    <h4 class="title">Drag your CSV file here</h4>
+                    <p class="subtitle">or click to browse</p>
+                  </div>
                 </div>
-              </div>
-            </td>
-          </tr>
+              </td>
+            </tr>
+          </template>
         </tbody>
       </table>
     </div>
@@ -51,10 +57,12 @@ table thead th {
   z-index: 1005;
   background-color: white;
 }
+
 .scrollable {
   width: 100%;
   overflow: auto;
 }
+
 .cell-selection {
   min-width: 40px;
 }
@@ -65,6 +73,28 @@ import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
 import { parseCsv } from "../composable/parser";
 import Action from "../../action";
 
+class Row {
+  constructor({ id, columns, selected, index }) {
+    this.id = id;
+    this.selected = selected;
+    this.columns = columns;
+
+    this.statusCompId = statusCompId(index);
+  }
+
+  get iconSpec() {
+    return {
+      view: 'icon',
+      id: this.statusCompId,
+      material: { name: 'preview' },
+      styleClasses: ['warning'],
+      tooltip: {
+        text: "Review"
+      }
+    };
+  }
+}
+
 class Cell {
   constructor({ viewHeaders, cellIndex, rowId, view, value }) {
     this.viewHeaders = viewHeaders;
@@ -87,19 +117,23 @@ function handleDrop(e) {
   loadFile(e.dataTransfer.files);
 }
 
+function statusCompId(rowIndex) {
+  return (props.spec.statusViewIdPrefix || 'status') + `-${rowIndex}`;
+}
+
 function makeRows(dataRows) {
   if (!dataRows || dataRows.length <= 0) return [];
-  const rows = dataRows.map((dataRow) => {
+  const rows = dataRows.map((dataRow, index) => {
     const selected = false;
-    const rowId = dataRow.rowId;
+    const id = dataRow.rowId;
     const columns = props.spec.viewCells.map((viewCells, i) => {
       const view = Object.assign({}, viewCells, dataRow.columns[i]);
       const cellIndex = i;
       const viewHeaders = props.spec.viewHeaders;
       const value = dataRow.columns[i].value;
-      return new Cell({ rowId, view, cellIndex, viewHeaders, value });
+      return new Cell({ rowId: id, view, cellIndex, viewHeaders, value });
     });
-    return { selected, columns, rowId };
+    return new Row({ selected, columns, id, index });
   });
   return rows;
 }
@@ -109,15 +143,12 @@ const fileInput = ref(null);
 const checkbox = ref(false);
 const instance = getCurrentInstance();
 
-const fillableColumnIndexes = props.spec.viewHeaders.reduce((prev, curr, index) => {
-  if (curr.importable) prev.push(index);
-  return prev;
-}, []);
-
 const rows = ref(makeRows(props.spec.dataRows));
 
 watch(props, (value) => {
-  rows.value = makeRows(value.spec.dataRows);
+  if (value.spec.dataRows && value.spec.dataRows.length > 0) {
+    rows.value = makeRows(value.spec.dataRows);
+  }
 });
 
 const selectedRows = computed(() => {
@@ -173,22 +204,23 @@ function handleCellChange(e, cell) {
   Action.execute(data, instance.ctx);
 }
 
+function getColumnIndexById(id) {
+  return props.spec.viewHeaders.map(v => v.id).indexOf(id);
+}
+
 function loadFile(files) {
   const reader = new FileReader();
   reader.readAsText(files[0]);
 
   reader.onload = (ev) => {
     const csvData = parseCsv(ev.target.result);
-    const dataRows = csvData.map((columns, rowIndex) => {
-      let i = 0;
-      const cols = [];
-      props.spec.viewCells.forEach((viewCell, index) => {
-        const obj = {};
-        if (fillableColumnIndexes.includes(index)) {
-          cols.push(Object.assign(obj, viewCell, { value: columns[i] }));
-          i++;
-        } else {
-          cols.push(Object.assign(obj, viewCell, { id: `cell-${rowIndex}-${i}` }));
+
+    const dataRows = csvData.map((row) => {
+      const cols = JSON.parse(JSON.stringify(props.spec.viewCells));
+      Object.entries(row).forEach((v) => {
+        const index = getColumnIndexById(v[0]);
+        if (cols[index]) {
+          cols[index].value = v[1];
         }
       });
       return { rowId: null, columns: cols };
@@ -204,8 +236,21 @@ function submitRows(rows) {
   if (!rows || rows.length <= 0) return;
 
   const row = rows.shift();
-  row.columns = row.columns.map((v) => ({ rowId: v.rowId, cellId: v.cellId, value: v.value, compId: v.view.id }));
 
+  // change row status to pending
+  Action.execute({
+    action: 'components/set',
+    targetId: row.statusCompId,
+    data: {
+      material: { name: 'pending' },
+      styleClasses: ['info']
+    },
+    tooltip: {
+      text: 'pending'
+    },
+  }, instance.ctx);
+
+  row.columns = row.columns.map((v) => ({ rowId: v.rowId, cellId: v.cellId, value: v.value }));
   const { submitUrl, paramName } = props.spec.import;
 
   const data = {

package/components/panels/pagination.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-pagination :style="$styles()" :class="$classes()"
+    :density="density" :variant="variant"
+    :length="spec.length" v-model="spec.value" @update:model-value="updatePage">
+  </v-pagination>
+</template>
+
+<script>
+import { determineDensity, determineVariant } from "../../utils/constant";
+
+// import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
+// import { getCurrentInstance } from "vue";
+
+// const props = defineProps(['spec']);
+// const instance = getCurrentInstance();
+
+// function updatePage(pageIndex) {
+//   this.$executeOnChange(pageIndex)
+
+//   // const url = `${props.spec.baseUrl}
+//   // alert(pageIndex)
+//   // console.log("P1", pageIndex)
+//   // Action.execute(props.spec.onChange, instance.ctx);
+// }
+
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  computed: {
+    density() {
+      return determineDensity(this.spec.styleClasses);
+    },
+    variant() {
+      return determineVariant(this.spec.styleClasses);
+    }
+  },
+  methods: {
+    updatePage(pageIndex) {
+      this.$executeOnChange(pageIndex)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/panels/table2.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="scrollable">
+    <table :style="$styles()" :class="$classes()" v-if="loadIf">
+      <thead>
+        <tr v-if="section.header" :style="$styles(section.header)">
+          <th v-for="(cell, index) in section.header.cellViews" :key="index" :colSpan="colSpan(section.header, index)">
+            <glib-component :spec="cell" />
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <template v-for="(row, rowIndex) in rows" :key="`row_${rowIndex}`">
+          <tr :class="row.onClick ? 'clickable' : ''" @[dstart(row.dragData)]="(e) => handleDragStart(e, row.dragData)"
+            :draggable="!!row.dragData">
+            <td v-for="(cell, cellIndex) in row.cellViews" :key="`cell_${cellIndex}`" :colSpan="colSpan(row, cellIndex)"
+              :style="colStyles(row, cellIndex)">
+              <span>
+                <!-- Prevent double links -->
+                <glib-component v-if="$href(cell)" :spec="cell" />
+                <!-- without "|| null" the browser will reload strangely -->
+                <a v-else :href="$href(row) || null" @click="$onClick($event, row)">
+                  <glib-component :spec="cell" />
+                </a>
+              </span>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  methods: {
+    colSpan(row, index) {
+      const spans = row.colSpans || [];
+      return spans[index] || 1;
+    },
+    colStyles(row, index) {
+      const colStyles = row.colStyles || [];
+      return this.$styles(colStyles[index] || {});
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+table {
+  border-spacing: 0;
+}
+
+tbody {
+  tr.clickable {
+    td>a {
+      cursor: pointer;
+    }
+
+    &:hover {
+      background: #eee;
+    }
+  }
+
+  td {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+
+    span {
+      display: block;
+      color: inherit;
+      cursor: default;
+    }
+  }
+}
+
+.scrollable {
+  width: 100%;
+  overflow: auto;
+}
+
+.data-cell {
+  white-space: pre-line;
+}
+
+table.table--grid {
+  tbody {
+    td {
+      border-right: 1px solid rgba(0, 0, 0, 0.12);
+    }
+  }
+}
+</style>
+
+<!-- Overridable -->
+<style lang="scss">
+.panels-table {
+  th {
+    padding: 10px 4px;
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    // border-left: 1px solid rgba(0, 0, 0, 0.12);
+  }
+
+  td {
+    >span {
+      padding: 10px 24px;
+    }
+  }
+}
+</style>

package/components/panels/tree/standard.vue

@@ -5,7 +5,7 @@
       <div class="content">
         <v-btn style="z-index: 11;" size="24" :icon="node.expand ? 'arrow_drop_down' : 'arrow_right'"
           v-if="props.node.rows" @click="node.expand = !node.expand" variant="plain" @click.stop></v-btn>
-        <div style="width: 24px" v-else></div>
+        <div class="expand-none" v-else></div>
         <div class="text">
           <v-icon v-if="node.icon" :size="node.icon.size || 24" :icon="node.icon.name"
             :color="node.icon.color"></v-icon>
@@ -27,6 +27,12 @@
 </template>
 
 <style lang="scss">
+.panels-tree {
+  .expand-none {
+    width: 24px;
+  }
+}
+
 .gtree-row .node {
   position: relative;
   width: 100%;

package/components/{_responsive.vue → responsive.vue}

@@ -39,6 +39,8 @@ export default {
       return this.$classes(this.spec, "panels/responsive");
     },
     componentName() {
+      if (!this.spec) return 'div';
+
       return this.spec.onClick ? "a" : "div";
     },
     header() {

package/index.js

@@ -26,7 +26,8 @@ Vue.use(vuetify);
 import { gmapPlugin } from "./plugins/gmap";
 Vue.use(gmapPlugin, {
   key: import.meta.env.VITE_GMAPS_API_KEY,
-  libraries: 'places'
+  libraries: 'places',
+  loading: 'async'
 });
 
 // import VueAnalytics from 'vue-analytics'
@@ -40,7 +41,7 @@ import "./extensions/array.js";
 
 // Recursive components must be global
 import VerticalPanel from "./components/panels/vertical.vue";
-import ResponsivePanel from "./components/panels/responsive.vue";
+import ResponsivePanel from "./components/responsive.vue";
 import Component from "./components/component.vue";
 import CommonIcon from "./components/_icon.vue";
 import CommonBadge from "./components/_badge.vue";
@@ -49,7 +50,7 @@ import CommonButton from "./components/_button.vue";
 import CommonChip from "./components/_chip.vue";
 import CommonMessage from "./components/_message.vue";
 import CommonDropdownMenu from "./components/_dropdownMenu.vue";
-import CommonResponsive from "./components/_responsive.vue";
+import CommonResponsive from "./components/responsive.vue";
 import CommonTemplateMenu from "./templates/_menu.vue";
 import RichButton from "./components/button.vue";
 Vue.component("panels-vertical", VerticalPanel);
@@ -82,6 +83,9 @@ Vue.mixin(stylesMixin);
 import scrollingMixin from "./components/mixins/scrolling.js";
 Vue.mixin(scrollingMixin);
 
+import updatableComponent from "./components/mixins/updatableComponent";
+Vue.mixin(updatableComponent);
+
 Vue.config.globalProperties.extension = {};
 import extension from "./components/mixins/extension.js";
 Vue.mixin(extension);
@@ -117,9 +121,6 @@ window.GLib = Framework;
 import driverCustomBehavior from "./plugins/driverCustomBehavior";
 Vue.use(driverCustomBehavior);
 
-import updatableComponent from "./plugins/updatableComponent";
-Vue.use(updatableComponent);
-
 import 'flag-icons/css/flag-icons.min.css';
 import 'v-phone-input/dist/v-phone-input.css';
 import { createVPhoneInput } from 'v-phone-input';

package/package.json

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

package/templates/thumbnail.vue

@@ -1,6 +1,6 @@
 <template>
   <component :is="componentName" :href="$href()" class="thumbnail" :class="cssClasses" @[clickCondition]="$onClick()">
-    <panels-responsive :spec="spec.header" />
+    <panels-responsive v-if="spec.header" :spec="spec.header" />
     <div style="display:flex;">
       <!-- <div v-if="spec.leftOuterButtons" style="display:flex; margin-top:10px;">
         <template v-for="(item, index) in spec.leftOuterButtons" :key="index">
@@ -70,9 +70,9 @@
         </template>
 
       </v-list-item>
-      <panels-responsive :spec="spec.right" />
+      <panels-responsive v-if="spec.right" :spec="spec.right" />
     </div>
-    <panels-responsive :spec="spec.footer" />
+    <panels-responsive v-if="spec.footer" :spec="spec.footer" />
   </component>
 </template>
 

package/utils/hash.js

@@ -1,3 +1,4 @@
+import merge from 'lodash.merge';
 export default class Hash {
   constructor(object) {
     for (const key in object) {
@@ -51,4 +52,8 @@ export default class Hash {
       handler(key, this[key]);
     }
   }
+
+  deepMerge(hash) {
+    return merge(this, hash)
+  }
 }

package/utils/http.js

@@ -2,6 +2,7 @@ import Type from "./type";
 import Action from "../action";
 import { nextTick } from 'vue';
 import { ctx, dialogs, jsonView, vueApp } from "../store";
+import Hash from "./hash";
 
 let loading = false;
 
@@ -59,9 +60,21 @@ export default class {
     }
   }
 
+  // Merge params in `url` and `formData` that have the same name.
+  static mergeDuplicateParamsIntoUrl(url, properties) {
+    const baseUrl = `${url.protocol}//${url.host}${url.pathname}`;
+    const hash = new Hash()
+    url.searchParams.forEach((value, name) => {
+      hash[name] = value;
+    })
+
+    properties.url = Utils.url.appendParams(baseUrl, hash.deepMerge(properties.formData || {}))
+    properties.formData = {}
+  }
+
   // Set `forcePushHistory` when it is important to clear the forward history.
   static load(properties, component, windowMode, forcePushHistory) {
-    const urlString = properties["url"];
+    const urlString = properties.url;
     let url;
     try {
       url = new URL(urlString);
@@ -70,6 +83,7 @@ export default class {
       throw e;
     }
     const domainMatched = window.location.hostname == url.hostname;
+    this.mergeDuplicateParamsIntoUrl(url, properties)
 
     // If this is an external domain, we rely on `onUnload()` instead.
     // if (domainMatched && !this.proceedEvenWhenDirty()) {
@@ -78,12 +92,12 @@ export default class {
 
     if (Utils.settings.reactive && domainMatched) {
       const currentUrl = window.location.href;
-      const htmlUrl = Utils.url.htmlUrl(properties["url"]);
+      const htmlUrl = Utils.url.htmlUrl(properties.url);
       const sameUrl = htmlUrl === currentUrl;
       const topOfDialog = Utils.type.isObject(dialogs.value.last());
       const windowOrDialog = windowMode ? true : !topOfDialog;
 
-      Utils.http.execute(properties, "GET", component, (data, response) => {
+      this.execute(properties, "GET", component, (data, response) => {
         // 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);

package/actions/ws/push.js

@@ -1,38 +0,0 @@
-import { vueApp } from "../../store";
-
-export default class {
-  execute(properties, component, params) {
-    Utils.type.ifString(properties.topic, topicName => {
-      const ws = vueApp.webSocket;
-      const channel = ws.channels[topicName];
-
-      Utils.type.ifString(properties.event, eventName => {
-        if (channel) {
-          const payload = Object.assign({}, properties.payload, ws.header, {
-            formData: properties.formData
-          });
-          console.debug(`Pushing to '${topicName}/${eventName}'`, payload);
-          channel
-            .push(eventName, payload)
-            .receive("ok", resp => {
-              console.debug(
-                `Push to '${topicName}/${eventName}' succeeded`,
-                resp
-              );
-              Utils.ws.handleResponse(resp.onResponse, component);
-            })
-            .receive("error", resp => {
-              console.debug(`Push to '${topicName}/${eventName}' failed`, resp);
-              Utils.ws.handleResponse(resp.onResponse, component);
-            });
-        } else {
-          console.error(`Topic not joined: '${topicName}'`);
-          Utils.launch.snackbar.error(
-            "Something went wrong and we have been notified",
-            component
-          );
-        }
-      });
-    });
-  }
-}

package/components/_tooltip.vue

@@ -1,73 +0,0 @@
-<template>
-  <v-menu v-if="spec.childButtons" left bottom>
-    <template v-slot:activator="{ on: onMenu }">
-      <v-tooltip :disabled="tooltip.disabled" :top="tooltipPositionMatches('top')"
-        :right="tooltipPositionMatches('right')" :bottom="tooltipPositionMatches('bottom')"
-        :left="tooltipPositionMatches('left')">
-        <template v-slot:activator="{ on: onTooltip }">
-          <slot name="activator" :on="{ ...onMenu, ...onTooltip }" />
-        </template>
-        <span> {{ tooltip.text }} </span>
-      </v-tooltip>
-    </template>
-
-    <v-list>
-      <v-list-item v-for="(childItem, childIndex) in spec.childButtons" :key="childIndex">
-        <common-button :spec="buttonSpec(childItem)" :disabled="childItem.disabled" />
-      </v-list-item>
-    </v-list>
-  </v-menu>
-  <v-tooltip v-else :disabled="tooltip.disabled" :top="tooltipPositionMatches('top')"
-    :right="tooltipPositionMatches('right')" :bottom="tooltipPositionMatches('bottom')"
-    :left="tooltipPositionMatches('left')">
-    <template v-slot:activator="{ on: onTooltip }">
-      <slot name="activator" :on="{ ...onTooltip }" />
-    </template>
-    <span> {{ tooltip.text }} </span>
-  </v-tooltip>
-</template>
-
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      tooltip: {}
-      // childSpec: Object.assign({}, this.spec, { id: undefined })
-    };
-  },
-  methods: {
-    $ready() {
-      this.updateData();
-      // this.tooltip = this.spec.tooltip || { disabled: true };
-      // this.childSpec = Object.assign({}, this.spec, { id: undefined });
-    },
-    // $initAccessories() {
-    //   this.tooltip = this.spec.tooltip || { disabled: true };
-    // },
-    tooltipPositionMatches(position) {
-      if (this.spec.tooltip && this.spec.tooltip.position) {
-        return position == this.spec.tooltip.position;
-      } else {
-        return position == "bottom";
-      }
-    },
-    buttonSpec(item) {
-      return Object.assign({}, item, {
-        view: "button-v1",
-        styleClasses: ["text"]
-      });
-    },
-    $registryEnabled() {
-      return false;
-    },
-    updateData() {
-      this.tooltip = this.spec.tooltip || { disabled: true };
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped></style>

package/components/charts/line-old.vue

@@ -1,62 +0,0 @@
-<template>
-  <line-chart :style="$styles()" :class="$classes()" :data="series"></line-chart>
-</template>
-
-<script>
-// import annotation from "../mixins/chart/annotation.js";
-// import tooltip from "../mixins/chart/tooltip.js";
-
-export default {
-  // mixins: [annotation],
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data: function () {
-    return {
-      series: [],
-      dataName: "dataSeries"
-    };
-  },
-  methods: {
-    $ready() {
-      this.series.clear();
-      this.renderData(this.spec.dataSeries);
-      this.fetchNext(this.spec.nextPage);
-    },
-    fetchData(url) {
-      const vm = this;
-      Utils.type.ifString(url, val => {
-        Utils.http.execute({ url: val }, "GET", this, response => {
-          vm.renderData(response.dataSeries);
-          vm.fetchNext(response.nextPage);
-        });
-      });
-    },
-    fetchNext(nextPage) {
-      if (!Utils.type.isObject(nextPage)) {
-        return;
-      }
-      if (nextPage.autoload != "all") {
-        return;
-      }
-      this.fetchData(nextPage.url);
-    },
-    renderData(series) {
-      if (!Utils.type.isArray(series)) {
-        return;
-      }
-
-      const data = series.map(element => {
-        const dataPoints = {};
-        element.points.forEach(point => {
-          dataPoints[point.x] = point.y;
-        });
-        return { name: element.title, data: dataPoints };
-      });
-      this.series = this.series.concat(data);
-    }
-  }
-};
-</script>
-
-<style scoped></style>

package/components/mixins/text.js

@@ -1,20 +0,0 @@
-export default {
-  methods: {
-    textStyles(spec) {
-      const styles = this.$styles(spec);
-
-      switch (this.spec.textAlign) {
-        case "center":
-          styles["text-align"] = "center";
-          break;
-        case "right":
-          styles["text-align"] = "right";
-          break;
-        default:
-          styles["text-align"] = "left";
-      }
-
-      return styles;
-    }
-  }
-};

package/components/mixins/ws/actionCable.js

@@ -1,49 +0,0 @@
-import { createConsumer } from "@rails/actioncable";
-import { vueApp } from "../../../store";
-
-const consumer = createConsumer();
-
-export default {
-  data: function () {
-    return {
-      _wsSocket: null
-    };
-  },
-  methods: {
-    $wsInitActionCable(spec) {
-      const component = this;
-      Utils.type.ifObject(
-        spec,
-        ws => {
-          const channelName = ws.channel;
-          const subscription = Object.assign({}, ws.params, {
-            channel: channelName
-          });
-
-          console.debug("Connecting to channel", subscription);
-
-          consumer.subscriptions.create(subscription, {
-            connected() {
-              const ws = vueApp.actionCable;
-              ws.channels[channelName] = this;
-              console.debug("Connected to channel", channelName);
-            },
-
-            disconnected() { },
-
-            received(data) {
-              const action = data.action;
-              const payload = { ...action, filterKey: ws.filterKey };
-              if (ws.filterKey === data.filterKey) {
-                GLib.action.execute(payload, component);
-              }
-            }
-          });
-        },
-        () => {
-          // this._wsDisconnectSocket();
-        }
-      );
-    }
-  }
-};

package/components/panels/responsive.vue

@@ -1,23 +0,0 @@
-<template>
-  <common-responsive ref="delegate" :spec="spec" />
-</template>
-
-<script>
-export default {
-  props: {
-    spec: {
-      type: Object,
-      required: true,
-      default: function () {
-        return {};
-      },
-    },
-  },
-};
-</script>
-
-<style scoped>
-.hover {
-  width: 8rem;
-}
-</style>

package/plugins/updatableComponent.js

@@ -1,58 +0,0 @@
-export default {
-  install: (Vue, options) => {
-    Vue.mixin({
-      computed: {
-        viewId() {
-          if (this.spec && this.spec.id) {
-            const id = this.spec.id;
-
-            if (id.includes('{{entry_index}}')) {
-              const dynamicGroupEntry = this.$closest("fields/internalDynamicGroupEntry");
-              if (dynamicGroupEntry) {
-                return dynamicGroupEntry.$populateIndexes(id);
-              }
-            }
-
-            return id;
-          }
-        }
-      },
-      methods: {
-        $ready() {
-          let spec = this.spec;
-          if (spec && spec.id && this.$registryEnabled()) {
-
-            const id = this.viewId;
-
-            const existingComponent = GLib.component.findById(id);
-            // A component with the same ID in a different page shouldn't be considered a
-            // duplicate. See `utils/components#deregister` for more details.
-            if (existingComponent) {
-              console.warn(
-                "Duplicate component ID:",
-                id,
-                "Existing:",
-                GLib.component.vueName(existingComponent),
-                "New:",
-                GLib.component.vueName(this)
-              );
-            }
-            const newComponent = this;
-            GLib.component.register(id, newComponent);
-          }
-        },
-        $tearDown() {
-          let spec = this.spec;
-
-          if (spec && spec.id && this.$registryEnabled()) {
-            GLib.component.deregister(spec.id, this);
-          }
-        },
-        $registryEnabled() {
-          // Common classes such as `_select` need to return false so that it doesn't override its parent (e.g. `select`).
-          return false;
-        }
-      }
-    });
-  }
-};