glib-web 4.8.0 → 4.8.1

package/actions/logics/set.js

@@ -1,6 +1,7 @@
 import jsonLogic from 'json-logic-js';
 import { fieldModels } from "../../components/composable/conditional";
 import merge from 'lodash.merge';
+import { nextTick } from "vue";
 
 const subscript = function (a, b) {
   if (a) {
@@ -78,6 +79,9 @@ export default class {
       });
     }
 
-    GLib.action.execute(spec.onSet, targetComponent);
+    // Make sure the update performed by the above `action_merge()` has been reflected.
+    nextTick(() => {
+      GLib.action.execute(spec.onSet, component);
+    })
   }
 }

package/components/component.vue

@@ -103,6 +103,7 @@ import FormPanel from "./panels/form.vue";
 import ListPanel from "./panels/list.vue";
 import CarouselPanel from "./panels/carousel.vue";
 import TablePanel from "./panels/table.vue";
+import BulkEditPanel from "./panels/bulkEdit.vue";
 import CustomPanel from "./panels/custom.vue";
 import ColumnPanel from "./panels/column.vue";
 import ResponsivePanel from "./panels/responsive.vue";
@@ -198,6 +199,7 @@ export default {
     "panels-list": ListPanel,
     "panels-carousel": CarouselPanel,
     "panels-table": TablePanel,
+    "panels-bulkEdit": BulkEditPanel,
     "panels-custom": CustomPanel,
     "panels-responsive": ResponsivePanel,
     "panels-column": ColumnPanel,

package/components/fields/multiUpload.vue

@@ -38,12 +38,14 @@
               </div>
             </div>
           </div>
-          <div class="percentage-wrapper" v-show="file[1].progress.value > 0 && file[1].progress.value < 100">
-            <div class="background">
-              <div class="value" :style="{ width: `${file[1].progress.value}%` }"></div>
+          <Transition name="slide-fade">
+            <div class="percentage-wrapper " v-show="file[1].progress.value > 0 && !file[1].message">
+              <div class="background">
+                <div class="value" :style="{ width: `${file[1].progress.value}%` }"></div>
+              </div>
+              <div class="percentage">{{ parseInt(file[1].progress.value) }}%</div>
             </div>
-            <div class="percentage">{{ parseInt(file[1].progress.value) }}%</div>
-          </div>
+          </Transition>
         </div>
       </template>
     </div>
@@ -52,6 +54,19 @@
 </template>
 
 <style>
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  opacity: 0;
+}
+
 .border-\[2px\] {
   border-width: 2px;
 }
@@ -375,7 +390,7 @@ export default defineComponent({
       props,
       doc,
       pic,
-      pdf,
+      pdf
     };
   }
 })

package/components/fields/radio/_featured.vue

@@ -29,13 +29,12 @@ export default {
   align-items: center;
   justify-content: center;
   width: 240px;
-  height: 254px;
+  height: 100%;
   transition: border-color 0.3s, box-shadow 0.3s, color 0.3s;
   text-align: center;
   cursor: pointer;
-  padding: 16px;
   position: relative;
-  border: 1px solid #E6E6E6;
+  border: 2px solid #E6E6E6;
   border-radius: 24px;
 }
 
@@ -56,18 +55,15 @@ export default {
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 100%;
-  margin-right: 30px;
-}
-
-.custom-radio .custom-radio-icon {
-  margin-bottom: 8px;
+  padding: 40px;
 }
 
 .custom-radio .custom-radio-label {
   font-size: 22px;
   color: inherit;
-  margin-top: 16px;
+  margin-top: 24px;
+  word-break: break-word;
+  min-width: 180px;
 }
 
 .custom-radio ::v-deep .v-selection-control__input {
@@ -90,6 +86,9 @@ export default {
   display: none;
 }
 
+.custom-radio ::v-deep .v-selection-control__wrapper {
+  display: none;
+}
 
 .custom-radio .v-ripple__container {
   display: none;

package/components/fields/radio.vue

@@ -38,13 +38,12 @@ export default {
   align-items: center;
   justify-content: center;
   width: 240px;
-  height: 254px;
+  min-height: 254px;
   transition: border-color 0.3s, box-shadow 0.3s, color 0.3s;
   text-align: center;
   cursor: pointer;
-  padding: 16px;
   position: relative;
-  border: 1px solid #E6E6E6;
+  border: 2px solid #E6E6E6;
   border-radius: 24px;
 }
 
@@ -65,20 +64,13 @@ export default {
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 100%;
-  margin-right: 30px;
-}
-
-.custom-radio .custom-radio-icon {
-  width: 80px;
-  height: 80px;
-  margin-bottom: 8px;
+  padding: 40px;
 }
 
 .custom-radio .custom-radio-label {
   font-size: 22px;
   color: inherit;
-  margin-top: 16px;
+  margin-top: 24px;
 }
 
 .custom-radio ::v-deep .v-selection-control__input {
@@ -101,6 +93,9 @@ export default {
   display: none;
 }
 
+.custom-radio ::v-deep .v-selection-control__wrapper {
+  display: none;
+}
 
 .custom-radio .v-ripple__container {
   display: none;

package/components/mixins/table/import.js

@@ -1,3 +1,5 @@
+import { fieldModels } from "../../composable/conditional";
+
 export default {
   data: function() {
     return {
@@ -15,34 +17,61 @@ export default {
         vm.importParamName = obj.paramName;
       });
     },
+    rowSelected(sectionIndex, rowIndex) {
+      return fieldModels[this.rowCheckId(sectionIndex, rowIndex)];
+    },
+    selectedRowCount(section) {
+      const sectionIndex = section.index;
+      let count = 0;
+      section.dataRows.forEach((_row, rowIndex) => {
+        if (this.rowSelected(sectionIndex, rowIndex)) {
+          count++;
+        }
+      });
+      return count;
+    },
     submitRows(event, section) {
-      const vm = this;
       const keys = section.header.dataCells;
       const rows = [];
-      section.dataRows.forEach(row => {
+      const sectionIndex = section.index;
+      let count = 0;
+      section.dataRows.forEach((row, rowIndex) => {
+        if (!this.rowSelected(sectionIndex, rowIndex)) { // Don't submit
+          return;
+        }
+
+        count++;
         const cells = {};
-        row.forEach((cell, index) => {
-          const key = `${vm.importParamName}[${keys[index]}]`;
+        row.forEach((cell, cellIndex) => {
+          const key = `${this.importParamName}[${keys[cellIndex]}]`;
           cells[key] = cell;
         });
+        cells['_index'] = rowIndex;
         rows.push(cells);
       });
 
-      if (Utils.type.isString(this.importSubmitUrl)) {
-        vm._submitEachRow(rows, event.target);
+      if (count > 0) {
+        this._submitEachRow(rows);
+      } else {
+        Utils.launch.dialog.alert("Please select at least one row.", this);
       }
     },
-    _submitEachRow(rows, target) {
+    _submitEachRow(rows) {
+      const url = Utils.type.string(this.importSubmitUrl)
+      if (!url) {
+        return;
+      }
+
       const vm = this;
       const row = rows.shift();
       if (row) {
         const data = {
-          url: this.importSubmitUrl,
+          url: url,
           formData: row
         };
         Utils.http.execute(data, "POST", vm, response => {
           GLib.action.handleResponse(response, vm);
-          vm._submitEachRow(rows, target);
+          vm._submitEachRow(rows);
         });
       }
     },
@@ -55,6 +84,13 @@ export default {
           return cell.trim();
         });
         section.dataRows = rows;
+
+        if (rows.length > 0) {
+          this.fileLoaded = true;
+          GLib.action.execute(this.spec.onLoadRows, this);
+        } else {
+          Utils.launch.dialog.alert("File doesn't contain valid data.", this);
+        }
       };
 
       // Reset value so it will trigger again the next time the same file is selected.

package/components/panels/bulkEdit.vue

@@ -0,0 +1,298 @@
+<template>
+  <div :style="$styles()" :class="$classes()">
+    <panels-responsive v-if="header" :spec="header" />
+
+    <div class="scrollable">
+      <div ref="topAnchor"></div>
+
+      <table v-if="loadIf">
+        <template v-for="(section, sectionIndex) in sections" :key="`head_${sectionIndex}`">
+          <thead>
+            <tr v-if="importable || exportable">
+              <td colspan="20">
+                <div>
+                  <template v-if="importable && fileLoaded">
+                    <span>{{ section.dataRows.length }} rows loaded</span> --
+                    <span>{{ selectedRowCount(section) }} rows selected</span>
+                  </template>
+
+                  <div class="float-right">
+                    <v-btn v-if="exportable" :download="exportFile" :href="exportCsv(section)">{{ exportLabel }}</v-btn>
+                  </div>
+                </div>
+
+                <div v-if="output" style="white-space: pre-line;">
+                  {{ output }}
+                </div>
+              </td>
+            </tr>
+
+            <tr v-if="section.header" :style="$styles(section.header)">
+              <template v-if="section.header.dataCells">
+                <th class="status" v-if="fileLoaded">
+                  <glib-component :spec="headerCheckSpec(section)" />
+                </th>
+                <th class="fixed-width" v-for="(cell, index) in section.header.dataCells" :key="index"
+                  :colSpan="colSpan(section.header, index)">
+                  {{ cell }}
+                </th>
+              </template>
+              <th class="fixed-width" v-for="(cell, index) in section.header.cellViews" v-else :key="index"
+                :colSpan="colSpan(section.header, index)">
+                <glib-component :spec="cell" />
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <!-- <template v-for="(row, rowIndex) in section.rows" :key="`row_${rowIndex}`">
+              <tr :class="row.onClick ? 'clickable' : ''">
+                <td v-for="(cell, cellIndex) in row.cellViews" :key="`cell_${cellIndex}`"
+                  :colSpan="colSpan(row, cellIndex)" :style="colStyles(row, cellIndex)">
+                  <glib-component :spec="cell" />
+                </td>
+              </tr>
+            </template> -->
+
+            <tr v-for="(row, rowIndex) in section.dataRows" :key="`data_row_${rowIndex}`">
+              <!-- TODO: Make this first column sticky.
+                   See https://css-tricks.com/a-table-with-both-a-sticky-header-and-a-sticky-first-column/
+              -->
+              <td class="status" v-if="fileLoaded">
+                <glib-component :spec="rowCheckSpec(sectionIndex, rowIndex)" />
+                <glib-component :spec="pendingIconSpec(rowIndex)" />
+              </td>
+              <td v-for="(cell, cellIndex) in row" :key="`data_cell_${cellIndex}`">
+                <v-text-field density="compact" variant="solo-filled" v-model="row[cellIndex]" />
+              </td>
+            </tr>
+
+            <tr v-if="importable && section.dataRows.length <= 0">
+              <td colspan="20">
+                <!-- TODO: Reuse code from multiUpload so it supports drag-and-drop too -->
+                <input ref="fileInput" style="display: none;" type="file" accept=".csv" @change="loadFile($event, section)" />
+                <div style="cursor: pointer; border: 1px solid rgba(0, 0, 0, 0.12); text-align: center; padding: 20px; margin: 20px;" @click="triggerImport(sectionIndex)">
+                Drag your CSV file here<br />
+                or click to browse
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </template>
+      </table>
+
+      <div ref="bottomAnchor" class="py-3 px-6" :style="bottomAnchorStyles">
+        Loading...
+      </div>
+    </div>
+
+    <panels-responsive v-if="footer" :spec="footer" />
+  </div>
+</template>
+
+<script>
+import autoloadMixin from "../mixins/table/autoload.js";
+import exportMixin from "../mixins/table/export.js";
+import importMixin from "../mixins/table/import.js";
+
+export default {
+  mixins: [autoloadMixin, exportMixin, importMixin],
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      sections: [],
+      fileLoaded: false
+    };
+  },
+  computed: {
+    header() {
+      return this.spec.header;
+    },
+    footer() {
+      return this.spec.footer;
+    },
+    output() {
+      // let str = ""
+      // let count = 0
+      // for (const section of this.sections) {
+      //   for (const row of section.dataRows) {
+      //     const name = row[2]
+      //     const email = row[3]
+      //     const createdAt = row[5]
+      //     const activationState = row[14] ? 'active' : 'pending'
+      //     count += 1
+      //     str += `{ name: "${name}".to_s, email: '${email}'.to_s, created_at: '${createdAt}', activation_state: '${activationState}'},\n`
+      //   }
+      // }
+      // return `Processing ${count} rows:\n[\n${str}\n]`
+      return "";
+    }
+  },
+  methods: {
+    $mounted() {
+      this.$onEvent("forms/directSubmit", (e) => {
+        for (const section of this.sections) {
+          this.submitRows(e.data.url, section);
+        }
+      });
+    },
+    $ready() {
+      this.sections = this.spec.sections;
+      this.sections.forEach((section, sectionIndex) => {
+        section.header = section.header || {};
+        section.index = sectionIndex
+        // Use Object.assign() to bind the nested property
+        Object.assign(section, { dataRows: [] });
+      })
+      this.autoloadAll(this.spec.nextPage);
+      this.initCsvExport();
+      this.initCsvImport();
+      this.enableInfiniteScrollIfApplicable();
+    },
+    $tearDown() {
+      this.cancelAutoloadRequest();
+    },
+    pendingIconSpec(rowIndex) {
+      const statusViewIdPrefix = this.spec.statusViewIdPrefix || 'data_status_';
+      return {
+        view: 'icon',
+        styleClasses: ['warning'],
+        id: `${statusViewIdPrefix}${rowIndex}`,
+        // TODO: It seems that logics_set/components_set doesn't work when changing the icon name.
+        material: {
+          name: 'preview'
+        },
+        // TODO: Implement this in the frontend. Right now, this is implemented in glib-web backend.
+        tooltip: {
+          text: "Review before submitting"
+        }
+      }
+    },
+    headerCheckSpec(section) {
+      const sectionIndex = section.index;
+      const maxIndex = section.dataRows.length;
+      const result = {
+        view: 'fields/check',
+        name: 'check_all',
+        checkValue: true,
+        onChange: {
+          action: 'logics/set',
+          targetIds: Array(maxIndex).fill().map((_, i) => `_check_row_${sectionIndex}_${i}`),
+          conditionalData: {
+            checkValue: true,
+            value: { "var": "check_all" }
+          }
+        }
+      }
+      return result;
+    },
+    rowCheckSpec(sectionIndex, rowIndex) {
+      const id = this.rowCheckId(sectionIndex, rowIndex);
+       // TODO: Right now, there is a bug where when the "select all" checkbox is checked, the individual
+       // checkboxes do not get checked. BUT, it works if we change the `name: id` to a different name (see below).
+       // It looks like there is a bug where the `id` and `name` cannot be the same.
+      return {
+        view: 'fields/check',
+        checkValue: true,
+        // name: `${id}-name`, // This works with "select all" (see above)
+        name: id,
+        id: id
+      }
+    },
+    rowCheckId(sectionIndex, rowIndex) {
+      // Use underscore to prevent conflict with server-defined IDs, e.g. for pendingIconSpec()
+      return `_check_row_${sectionIndex}_${rowIndex}`
+    },
+    colSpan(row, index) {
+      const spans = row.colSpans || [];
+      return spans[index] || 1;
+    },
+    colStyles(row, index) {
+      const colStyles = row.colStyles || [];
+      return this.$styles(colStyles[index] || {});
+    },
+    rows(section) {
+      return section.rows || [];
+    },
+    triggerImport(index) {
+      const input = this.$refs.fileInput[index];
+      input.click();
+    },
+    totalRows(section) {
+      return (section.rows || []).length + (section.dataRows || []).length;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+table {
+  border-spacing: 0;
+}
+
+// thead {
+//   th {
+//     padding: 10px 4px;
+//     border-top: 1px solid rgba(0, 0, 0, 0.12);
+//     // border-left: 1px solid rgba(0, 0, 0, 0.12);
+//   }
+// }
+
+thead {
+  th {
+    &.fixed-width {
+      min-width: 200px; // TODO: Make this configurable
+    }
+    &.status {
+      min-width: 80px;
+    }
+  }
+
+}
+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;
+    }
+
+    &.status {
+      display: flex;
+      align-items: center;
+
+    }
+  }
+}
+
+.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>

package/package.json

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

package/plugins/vuetify.js

@@ -1,11 +1,14 @@
 import { createVuetify } from "vuetify";
 // import 'material-design-icons-iconfont/dist/material-design-icons.css';
 import { aliases, md } from 'vuetify/iconsets/md';
-import 'vuetify/styles';
+import 'vuetify/lib/styles/main.sass';
 import * as components from 'vuetify/components';
+import { jsonView } from "../store";
 // import * as directives from 'vuetify/directives'
+import { md3 } from 'vuetify/blueprints';
 
 const opts = {
+    blueprint: md3,
     components,
     // directives,
     icons: {
@@ -15,9 +18,7 @@ const opts = {
             md,
         },
     },
-    theme: {
-        themes: {}
-    },
+    theme: jsonView.page.theme || {},
     display: {
         smAndDown: true
     }

package/utils/type.js

@@ -66,4 +66,7 @@ export default class {
     const val = parseFloat(obj);
     return isNaN(val) ? null : val;
   }
+  static string(obj) {
+    return this.isString(obj) ? obj : null
+  }
 }