glib-web 4.8.1 → 4.8.2

package/app.scss

@@ -0,0 +1,172 @@
+.border-\[2px\] {
+  border-width: 2px;
+}
+
+.border-\[4px\] {
+  border-width: 4px;
+}
+
+.\!font-semibold {
+  font-weight: 600px;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.guploaded-file {
+  /* pt-6 w-full */
+  padding-top: 24px;
+  width: 100%;
+
+  .title {
+    color: #6b7280;
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+
+  .file-container {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    border-radius: 6px;
+    background-color: #f3f4f6;
+    width: 100%;
+    padding: 16px;
+    margin-bottom: 16px;
+    min-height: 72px;
+    gap: 8px;
+  }
+
+  .file {
+    display: flex;
+    width: 100%;
+    position: relative;
+
+    .status {
+      display: flex;
+      width: 100%;
+      gap: 8px;
+      align-items: center;
+
+      .image-icon {
+        width: 40px;
+        height: 40px;
+        background-color: #fff;
+        border-radius: 5px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+          width: 20px;
+          height: 20px;
+        }
+      }
+
+      .icon {
+        margin-right: 8px;
+      }
+
+      .progress {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .label {
+          /* mb-1 */
+          display: flex;
+          flex-direction: column;
+          margin-bottom: 4px;
+        }
+
+        .label a {
+          color: #47495F;
+          font-weight: 600;
+        }
+
+        .label a:hover {
+          text-decoration: underline;
+        }
+
+        .label a[href=""],
+        .label a[href="#"],
+        .label a:not([href]) {
+          text-decoration: none !important;
+        }
+
+      }
+    }
+
+    .close-btn {
+      cursor: pointer;
+    }
+  }
+
+  .background {
+    width: 100%;
+    background-color: #e6e6e6;
+    border-radius: 9999px;
+    height: 8px;
+    display: flex;
+
+    .value {
+      background-color: #0A2A9E;
+      height: inherit;
+      border-radius: inherit;
+    }
+  }
+
+  .percentage-wrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+
+    .percentage {
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 2px;
+    }
+  }
+}
+
+.gdrop-file {
+  /* px-6 py-10 border-[2px] border-dashed border-gray-400 w-full rounded-2xl cursor-pointer */
+  padding: 40px 24px;
+  border-style: dashed;
+  border-color: #9ca3af;
+  width: 100%;
+  border-radius: 16px;
+  cursor: pointer;
+
+  .cloud {
+    /* w-full flex flex-col justify-center items-center */
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .icon {
+      /* mb-3 text-gray-400 */
+      margin-bottom: 12px;
+      color: #9ca3af;
+    }
+
+    .title {
+      /* text-center mb-2 */
+      text-align: center;
+      margin-bottom: 8px;
+      color: #47495F;
+    }
+
+    .subtitle {
+      /* text-color-light text-center */
+      color: #A7ADB5;
+      text-align: center;
+    }
+  }
+}

package/components/component.vue

@@ -104,6 +104,7 @@ 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 BulkEditPanel2 from "./panels/bulkEdit2.vue";
 import CustomPanel from "./panels/custom.vue";
 import ColumnPanel from "./panels/column.vue";
 import ResponsivePanel from "./panels/responsive.vue";
@@ -200,6 +201,7 @@ export default {
     "panels-carousel": CarouselPanel,
     "panels-table": TablePanel,
     "panels-bulkEdit": BulkEditPanel,
+    "panels-bulkEdit2": BulkEditPanel2,
     "panels-custom": CustomPanel,
     "panels-responsive": ResponsivePanel,
     "panels-column": ColumnPanel,

package/components/composable/parser.js

@@ -0,0 +1,41 @@
+export function parseCsv(csvString) {
+  // https://stackoverflow.com/a/41563966/9970813
+  let prevLetter = "",
+    row = [""],
+    result = [row],
+    columnIndex = 0,
+    rowIndex = 0,
+    canSplit = true,
+    letter;
+  for (let i = 0; i <= csvString.length; ++i) {
+    letter = csvString[i];
+
+    if ('"' === letter) {
+      if (canSplit && letter === prevLetter) {
+        row[columnIndex] += letter;
+      }
+      canSplit = !canSplit;
+    } else if ("," === letter && canSplit) {
+      letter = row[++columnIndex] = "";
+    } else if ("\n" === letter && canSplit) {
+      if ("\r" === prevLetter) {
+        row[columnIndex] = row[columnIndex].slice(0, -1);
+      }
+      row = result[++rowIndex] = [(letter = "")];
+      columnIndex = 0;
+    } else if (Utils.type.isString(letter)) {
+      row[columnIndex] += letter;
+    }
+    prevLetter = letter;
+  }
+
+  // Remove any blank rows
+  result = result.filter(r => {
+    return r[0] !== "";
+  });
+  // result = result.filter(r => {
+  //   return r[0] !== "undefined"
+  // });
+
+  return result;
+}

package/components/fields/multiUpload.vue

@@ -53,194 +53,6 @@
   </div>
 </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;
-}
-
-.border-\[4px\] {
-  border-width: 4px;
-}
-
-.\!font-semibold {
-  font-weight: 600px;
-}
-
-.opacity-50 {
-  opacity: 0.5;
-}
-
-.guploaded-file {
-  /* pt-6 w-full */
-  padding-top: 24px;
-  width: 100%;
-
-  .title {
-    color: #6b7280;
-    font-weight: 600;
-    margin-bottom: 8px;
-  }
-
-  .file-container {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    border-radius: 6px;
-    background-color: #f3f4f6;
-    width: 100%;
-    padding: 16px;
-    margin-bottom: 16px;
-    min-height: 72px;
-    gap: 8px;
-  }
-
-  .file {
-    display: flex;
-    width: 100%;
-    position: relative;
-
-    .status {
-      display: flex;
-      width: 100%;
-      gap: 8px;
-      align-items: center;
-
-      .image-icon {
-        width: 40px;
-        height: 40px;
-        background-color: #fff;
-        border-radius: 5px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        img {
-          width: 20px;
-          height: 20px;
-        }
-      }
-
-      .icon {
-        margin-right: 8px;
-      }
-
-      .progress {
-        display: flex;
-        flex-grow: 1;
-        flex-direction: column;
-        justify-content: space-between;
-
-        .label {
-          /* mb-1 */
-          display: flex;
-          flex-direction: column;
-          margin-bottom: 4px;
-        }
-
-        .label a {
-          color: #47495F;
-          font-weight: 600;
-        }
-
-        .label a:hover {
-          text-decoration: underline;
-        }
-
-        .label a[href=""],
-        .label a[href="#"],
-        .label a:not([href]) {
-          text-decoration: none !important;
-        }
-
-      }
-    }
-
-    .close-btn {
-      cursor: pointer;
-    }
-  }
-
-  .background {
-    width: 100%;
-    background-color: #e6e6e6;
-    border-radius: 9999px;
-    height: 8px;
-    display: flex;
-
-    .value {
-      background-color: #0A2A9E;
-      height: inherit;
-      border-radius: inherit;
-    }
-  }
-
-  .percentage-wrapper {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-
-    .percentage {
-      font-size: 14px;
-      font-weight: 600;
-      margin-bottom: 2px;
-    }
-  }
-}
-
-.gdrop-file {
-  /* px-6 py-10 border-[2px] border-dashed border-gray-400 w-full rounded-2xl cursor-pointer */
-  padding: 40px 24px;
-  border-style: dashed;
-  border-color: #9ca3af;
-  width: 100%;
-  border-radius: 16px;
-  cursor: pointer;
-
-  .cloud {
-    /* w-full flex flex-col justify-center items-center */
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .icon {
-      /* mb-3 text-gray-400 */
-      margin-bottom: 12px;
-      color: #9ca3af;
-    }
-
-    .title {
-      /* text-center mb-2 */
-      text-align: center;
-      margin-bottom: 8px;
-      color: #47495F;
-    }
-
-    .subtitle {
-      /* text-color-light text-center */
-      color: #A7ADB5;
-      text-align: center;
-    }
-  }
-}
-</style>
-
 <script>
 import { ref, computed, defineComponent, watch, getCurrentInstance } from 'vue';
 import { VIcon } from 'vuetify/components';
@@ -249,9 +61,9 @@ import * as delegateUploader from "../composable/upload_delegator";
 import { triggerOnChange } from "../composable/form";
 import { nextTick } from "vue";
 import { useFilesState, useFileUtils } from "../composable/file";
-import doc from "./selectAsset/doc-1.png"
-import pic from "./selectAsset/pic-1.png"
-import pdf from "./selectAsset/pdf-1.png"
+import doc from "./selectAsset/doc-1.png";
+import pic from "./selectAsset/pic-1.png";
+import pdf from "./selectAsset/pdf-1.png";
 const { makeKey, Item, signedIds } = useFileUtils();
 
 export default defineComponent({

package/components/panels/bulkEdit.vue

@@ -70,10 +70,13 @@
             <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
+                <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>
@@ -142,10 +145,10 @@ export default {
       this.sections = this.spec.sections;
       this.sections.forEach((section, sectionIndex) => {
         section.header = section.header || {};
-        section.index = sectionIndex
+        section.index = sectionIndex;
         // Use Object.assign() to bind the nested property
         Object.assign(section, { dataRows: [] });
-      })
+      });
       this.autoloadAll(this.spec.nextPage);
       this.initCsvExport();
       this.initCsvImport();
@@ -168,7 +171,7 @@ export default {
         tooltip: {
           text: "Review before submitting"
         }
-      }
+      };
     },
     headerCheckSpec(section) {
       const sectionIndex = section.index;
@@ -185,25 +188,22 @@ export default {
             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,
+        name: `${id}-name`, // For some unknown reason, equating the id and name values ​​causes this function to be executed causing the component to be reset.
+        // 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}`
+      return `_check_row_${sectionIndex}_${rowIndex}`;
     },
     colSpan(row, index) {
       const spans = row.colSpans || [];
@@ -245,12 +245,14 @@ thead {
     &.fixed-width {
       min-width: 200px; // TODO: Make this configurable
     }
+
     &.status {
       min-width: 80px;
     }
   }
 
 }
+
 tbody {
   // tr.clickable {
   //   td>a {

package/components/panels/bulkEdit2.vue

@@ -0,0 +1,197 @@
+<template>
+  <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>
+        <thead v-if="props.spec.viewHeaders">
+          <tr>
+            <th v-if="rowLoaded"><v-checkbox v-model="checkbox" color="primary" @change="checkAll"></v-checkbox></th>
+            <th v-for="cell in props.spec.viewHeaders" :key="cell.id"
+              :style="{ minWidth: `${cell.minWidth || 100}px` }">
+              <span>{{ cell.text }}</span>
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <template v-if="rowLoaded">
+            <template v-for="(section, sectionIndex) in sections" :key="`head_${sectionIndex}`">
+              <tr v-for="(row, rowIndex) in section.rows" :key="`row_${rowIndex}`">
+                <td><v-checkbox v-model="row.selected" color="primary"></v-checkbox></td>
+                <td v-for="(cell, cellIndex) in row.columns" :key="`cell_${cellIndex}`"
+                  @change="(e) => handleCellChange(e, cell)">
+                  <glib-component :spec="cell.view"></glib-component>
+                </td>
+              </tr>
+            </template>
+          </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>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+table thead th {
+  position: sticky;
+  top: 0px;
+  z-index: 1005;
+  background-color: white;
+}
+</style>
+
+<script setup>
+import { computed, getCurrentInstance, ref, watch } from "vue";
+import { parseCsv } from "../composable/parser";
+import Action from "../../action";
+
+class Cell {
+  constructor({ viewHeaders, cellIndex, rowId, view, value }) {
+    this.viewHeaders = viewHeaders;
+    this.cellIndex = cellIndex;
+    this.rowId = rowId;
+    this.view = view;
+    this.value = value;
+  }
+
+  get cellId() {
+    return this.viewHeaders[this.cellIndex].id;
+  }
+}
+
+function handleClick(e) {
+  loadFile(e.target.files);
+  e.target.value = '';
+}
+
+function handleDrop(e) {
+  e.preventDefault();
+  loadFile(e.dataTransfer.files);
+}
+
+function makeSection(section) {
+  const rows = section.dataRows.map((dataRow) => {
+    const selected = false;
+    const rowId = dataRow.rowId;
+    const columns = props.spec.viewColumns.map((viewColumn, viewColumnIndex) => {
+      const view = Object.assign({}, viewColumn, dataRow.columns[viewColumnIndex]);
+      const cellIndex = viewColumnIndex;
+      const viewHeaders = props.spec.viewHeaders;
+      const value = dataRow.columns[viewColumnIndex].value;
+      return new Cell({ rowId, view, cellIndex, viewHeaders, value });
+    });
+    return { selected, columns, rowId };
+  });
+  return Object.assign({}, section, { rows });
+}
+
+const props = defineProps(['spec']);
+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 sections = ref(props.spec.sections.map((section) => makeSection(section)));
+
+watch(props, (value) => {
+  sections.value = value.spec.sections.map((section) => makeSection(section));
+});
+
+const selectedRows = computed(() => {
+  const rows = [];
+  sections.value.forEach((section) => section.rows.filter((row) => row.selected).forEach((row) => rows.push(row)));
+  return rows;
+});
+
+watch(selectedRows, (value) => {
+  const rows = value.map((row) => {
+    const rowId = row.rowId;
+    const columns = row.columns.map((col) => ({ cellId: col.cellId, value: col.value }));
+
+    return { rowId, columns };
+  });
+  const data = Object.assign(
+    {},
+    props.spec.onRowSelected,
+    { [props.spec.paramNameForFormData || 'formData']: rows }
+  );
+  Action.execute(data, instance.ctx);
+});
+
+const loadedRowCount = computed(() => sections.value.reduce((prev, curr) => prev + curr.dataRows.length, 0));
+const selectedRowCount = computed(() => selectedRows.value.length);
+const rowLoaded = computed(() => !!(sections.value[0] && sections.value[0].rows));
+
+function checkAll() {
+  sections.value.forEach((section) => section.rows.forEach((row) => row.selected = checkbox.value));
+}
+
+function handleCellChange(e, cell) {
+  const rowId = cell.rowId;
+  const columnId = cell.cellId;
+
+  let value = null;
+  if (e.target instanceof HTMLInputElement) {
+    value = e.target.value;
+  } else {
+    value = e.target.querySelector('input').value;
+  }
+
+  cell.value = value;
+
+  const data = Object.assign(
+    {},
+    props.spec.onCellChange,
+    { [props.spec.paramNameForFormData || 'formData']: { rowId, columnId, value } }
+  );
+
+  Action.execute(data, instance.ctx);
+}
+
+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) => {
+      let i = 0;
+      const cols = [];
+      props.spec.viewColumns.forEach((viewColumn, index) => {
+        const obj = {};
+        if (fillableColumnIndexes.includes(index)) {
+          cols.push(Object.assign(obj, viewColumn, { value: columns[i] }));
+          i++;
+        } else {
+          cols.push(Object.assign(obj, viewColumn));
+        }
+      });
+      return { rowId: null, columns: cols };
+    });
+    const newSections = makeSection({ dataRows });
+    sections.value.push(newSections);
+
+    Action.execute(props.spec.onLoadRows, instance.ctx);
+  };
+}
+
+</script>

package/index.js

@@ -5,6 +5,8 @@ import { settings } from "./utils/settings";
 import { useTheme } from "vuetify";
 import { jsonView, vueApp } from "./store";
 
+import './app.scss';
+
 // lib for deep merge
 import merge from 'lodash.merge';
 

package/package.json

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

package/plugins/updatableComponent.js

@@ -24,20 +24,19 @@ export default {
 
             const id = this.viewId;
 
-            // const id = spec.id;
-            // const existingComponent = GLib.component.findById(id, false);
+            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)
-            //   );
-            // }
+            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);
           }

package/plugins/vuetify.js

@@ -1,14 +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/lib/styles/main.sass';
+import 'vuetify/styles';
 import * as components from 'vuetify/components';
 import { jsonView } from "../store";
 // import * as directives from 'vuetify/directives'
-import { md3 } from 'vuetify/blueprints';
+// import { md3 } from 'vuetify/blueprints';
 
 const opts = {
-    blueprint: md3,
+    // blueprint: md3,
     components,
     // directives,
     icons: {