glib-web 2.6.7 → 3.0.0

package/components/panels/list.vue

@@ -6,44 +6,28 @@
       </div>
     </div>
 
-    <template v-for="(section, sectionIndex) in sections">
-      <div :key="`section${sectionIndex}`">
+    <template v-for="(section, sectionIndex) in sections" :key="`section${sectionIndex}`">
+      <div>
         <panels-responsive v-if="section.header" :spec="section.header" />
 
-        <draggable
-          v-model="section.rows"
-          ghost-class="ghost"
-          :group="dragSupport ? dragSupport.groupId || 'common' : 'common'"
-          :data-dragListId="spec.id"
-          :data-dragSectionIndex="sectionIndex"
-          :disabled="!$type.isObject(dragSupport)"
-          @start="onDragStart"
-          @end="onDragEnd"
-        >
-          <div
-            v-for="(row, rowIndex) in section.rows"
-            :key="row.id || `${sectionIndex}_${rowIndex}`"
-            :ref="`row_${sectionIndex}_${rowIndex}`"
-            :data-dragRowId="row.id"
-            class="row_container"
-          >
-            <!-- <v-divider v-if="!spec.responsiveCols && rowIndex == 0" /> -->
+        <!-- <draggable v-model="section.rows" ghost-class="ghost"
+          :group="dragSupport ? dragSupport.groupId || 'common' : 'common'" :data-dragListId="spec.id"
+          :data-dragSectionIndex="sectionIndex" :disabled="!$type.isObject(dragSupport)" @start="onDragStart"
+          @end="onDragEnd"> -->
+        <div v-for="(row, rowIndex) in section.rows" :key="`${sectionIndex}_${rowIndex}`"
+          :ref="`row_${sectionIndex}_${rowIndex}`" :data-dragRowId="row.id">
+          <!-- <v-divider v-if="!spec.responsiveCols && rowIndex == 0" /> -->
 
-            <component
-              :is="template(row)"
-              :spec="rowSpec(row)"
-              :responsive-cols="spec.responsiveCols"
-              :index="rowIndex"
-            />
-            <!-- <v-divider
+          <component :is="template(row)" :spec="rowSpec(row)" :responsive-cols="spec.responsiveCols" :index="rowIndex" />
+          <!-- <v-divider
               v-if="
                 !spec.responsiveCols &&
                   (rowIndex != section.rows.length - 1 ||
                     sectionIndex != sections.length - 1)
               "
             /> -->
-          </div>
-        </draggable>
+        </div>
+        <!-- </draggable> -->
 
         <panels-responsive v-if="section.footer" :spec="section.footer" />
       </div>
@@ -58,26 +42,26 @@
 </template>
 
 <script>
-import draggable from "vuedraggable";
+// import draggable from "vuedraggable";
 import autoloadMixin from "../mixins/list/autoload.js";
-import ThumbnailTemplate from "../../templates/thumbnail";
-import FeaturedTemplate from "../../templates/featured";
-import CommentTemplate from "../../templates/comment";
+import ThumbnailTemplate from "../../templates/thumbnail.vue";
+import FeaturedTemplate from "../../templates/featured.vue";
+import CommentTemplate from "../../templates/comment.vue";
 import actionCableMixin from "../mixins/ws/actionCable.js";
 
 export default {
   components: {
-    draggable,
+    // draggable,
     "template-thumbnail": ThumbnailTemplate,
     "template-featured": FeaturedTemplate,
     "template-commentOutgoing": CommentTemplate,
-    "template-commentIncoming": CommentTemplate
+    "template-commentIncoming": CommentTemplate,
   },
   mixins: [autoloadMixin, actionCableMixin],
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
-  data: function() {
+  data: function () {
     return {
       sections: [],
       dragSupport: null
@@ -104,12 +88,13 @@ export default {
           fieldTitleName: this.spec.fieldTitleName
             ? `${prefix}[${this.spec.fieldTitleName}]`
             : null,
-          fieldCheckValueIf: this.spec.fieldCheckValueIf
+          fieldCheckValueIf: this.spec.fieldCheckValueIf,
         });
       }
       return row;
     },
     action_loadNext(spec) {
+      console.log("TODO: load new comments and append to this list", spec);
       // TODO
       // - Load next rows/items from the Rails server
       //   - You can pass some parameters (e.g. currentItemId) for pagination
@@ -126,7 +111,7 @@ export default {
           this.$set(section, "rows", []);
         }
 
-        Utils.type.ifArray(appendedSection.rows, rows => {
+        Utils.type.ifArray(appendedSection.rows, (rows) => {
           for (const row of rows) {
             section.rows.push(row);
           }
@@ -136,14 +121,14 @@ export default {
     action_update(spec) {
       const updatedRows = {};
 
-      Utils.type.ifArray(spec.rows, rows => {
+      Utils.type.ifArray(spec.rows, (rows) => {
         for (const row of rows) {
           updatedRows[row.id] = row;
         }
       });
 
       for (const section of this.sections) {
-        section.rows = section.rows.map(row => {
+        section.rows = section.rows.map((row) => {
           const updatedRow = updatedRows[row.id];
           if (updatedRow) {
             return updatedRow;
@@ -155,14 +140,14 @@ export default {
     },
     action_delete(spec) {
       const deletedRows = {};
-      Utils.type.ifArray(spec.rows, rows => {
+      Utils.type.ifArray(spec.rows, (rows) => {
         for (const row of rows) {
           deletedRows[row.id] = row;
         }
       });
 
       for (const section of this.sections) {
-        section.rows = section.rows.filter(row => {
+        section.rows = section.rows.filter((row) => {
           // return !rows.includes(row.id);
           return !deletedRows[row.id];
         });
@@ -189,15 +174,15 @@ export default {
     },
     onDragStart(event) {
       // This allows custom components to detect if something is being dragged.
-      window.vueApp.draggedComponent = this;
+      vueApp.draggedComponent = this;
     },
     onDragEnd(event) {
-      window.vueApp.draggedComponent = null;
+      vueApp.draggedComponent = null;
 
       const targetSectionedRowIndex = event.newIndex;
       // const sourceSectionedRowIndex = event.oldIndex;
       if (event.from == event.to && event.oldIndex == targetSectionedRowIndex) {
-        console.debug("Reordering canceled");
+        console.log("Reordering canceled");
         return;
       }
 
@@ -205,6 +190,7 @@ export default {
       this.$recursiveUpdate();
 
       const targetSectionIndex = this.getSectionIndex(event.to);
+      // const targetSection = this.getSection(targetSectionIndex);
 
       const targetAbsoluteIndex =
         this.previousSectionsRowCount(event.to) + targetSectionedRowIndex;
@@ -217,11 +203,11 @@ export default {
       const mergedSpec = Object.assign(dragSpec.onDrop, {
         [dragSpec.paramNameForFormData || "formData"]: {
           [dragSpec.paramNameForNewAbsoluteIndex ||
-          "newAbsoluteIndex"]: targetAbsoluteIndex,
+            "newAbsoluteIndex"]: targetAbsoluteIndex,
           [dragSpec.paramNameForNewSectionIndex ||
-          "newSectionIndex"]: targetSectionIndex,
+            "newSectionIndex"]: targetSectionIndex,
           [dragSpec.paramNameForNewSectionedRowIndex ||
-          "newSectionedRowIndex"]: targetSectionedRowIndex,
+            "newSectionedRowIndex"]: targetSectionedRowIndex,
           [dragSpec.paramNameForRowId || "rowId"]: rowId,
           [dragSpec.paramNameForOldListId || "oldListId"]: oldListId,
           [dragSpec.paramNameForNewListId || "newListId"]: newListId
@@ -229,27 +215,6 @@ export default {
       });
 
       GLib.action.execute(mergedSpec, this);
-
-      this.hackLingeringHighlight();
-    },
-    hackLingeringHighlight() {
-      // After a row finished dragging, the row below it will automatically be
-      // "active&hover" for some reason, which will cause it to be incorrectly
-      // highlighted
-      // This seems to be a browser/library bug, so as a workaround, we temporarily
-      // apply the "disabled" class so the highlighting doesn't happen.
-      this.$el
-        .querySelectorAll(":active .row_container > .glib-clickable:hover")
-        .forEach(activeRow => {
-          activeRow.classList.add("disabled");
-          document.addEventListener(
-            "mousemove",
-            function() {
-              activeRow.classList.remove("disabled");
-            },
-            { once: true }
-          );
-        });
     },
     getSectionIndex(element) {
       return element.dataset.dragsectionindex;
@@ -264,8 +229,8 @@ export default {
         count += this.getSection(i).rows.length;
       }
       return count;
-    }
-  }
+    },
+  },
 };
 </script>
 

package/components/panels/responsive.vue

@@ -1,30 +1,5 @@
 <template>
-  <!-- Use `display: contents` so this div doesn't intefere with the child's sizing behaviour. -->
-  <div style="display: contents;">
-    <!-- <common-responsive v-if="!hoverViewsSpec" :spec="spec" /> -->
-    <v-menu
-      v-if="hoverViewsSpec"
-      :close-on-content-click="false"
-      open-on-hover
-      top
-      offset-y
-      content-class="hover"
-    >
-      <template v-slot:activator="{ on, attrs }">
-        <div v-bind="attrs" v-on="on">
-          <common-responsive :spec="spec" />
-        </div>
-      </template>
-      <v-card>
-        <common-responsive :spec="hoverViewsSpec" />
-      </v-card>
-    </v-menu>
-    <common-tooltip v-else :spec="spec">
-      <template v-slot:activator="{ on }">
-        <common-responsive :spec="spec" :event-handlers="on" />
-      </template>
-    </common-tooltip>
-  </div>
+  <common-responsive :spec="spec" />
 </template>
 
 <script>
@@ -33,7 +8,7 @@ export default {
     spec: {
       type: Object,
       required: true,
-      default: function() {
+      default: function () {
         return {};
       }
     }
@@ -45,12 +20,6 @@ export default {
   },
   methods: {
     $ready() {
-      this.hoverViewsSpec = this.spec.hoverViews
-        ? {
-            childViews: this.spec.hoverViews,
-            align: this.spec.align
-          }
-        : null;
     }
   }
 };

package/components/panels/scroll.vue

@@ -23,6 +23,7 @@ export default {
       // // Let the styles be handled by the child panel.
       // const outerSpec = {};
       // outerSpec["padding"] = this.spec["outerPadding"];
+      // console.log("outerSpec", outerSpec);
       // const styles = this.$styles(outerSpec);
       //
       // const styles = this.genericStyles();
@@ -35,6 +36,8 @@ export default {
       //   width: this.spec.width,
       //   height: this.spec.height
       // });
+      //
+      // console.log("styles", styles);
 
       // Let the specified styles be handled by the child panel.
       const styles = this.$styles({

package/components/panels/split.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="classes()" :style="genericStyles()">
     <div v-if="spec.left" class="layouts-split__side">
-      <panels-responsive :spec="spec.left" />
+      <panels-responsive :spec="spec.left" v-if="spec.left" class="layouts-split__side" />
     </div>
 
     <div class="layouts-split__expand">
@@ -23,7 +23,7 @@ export default {
     spec: { type: Object, required: true }
   },
   methods: {
-    classes: function() {
+    classes: function () {
       return this.$classes().concat("layouts-split");
     }
   }

package/components/panels/table.vue

@@ -3,45 +3,25 @@
     <div ref="topAnchor"></div>
 
     <table :style="$styles()" :class="$classes()">
-      <template v-for="(section, sectionIndex) in sections">
-        <thead :key="`head_${sectionIndex}`">
+      <template v-for="(section, sectionIndex) in sections" :key="`head_${sectionIndex}`">
+        <thead>
           <tr v-if="importable || exportable">
             <td colspan="10">
               <div class="pa-3">
                 <template v-if="importable">
-                  <span
-                    >{{
-                      rows(section).length + section.dataRows.length
-                    }}
-                    rows</span
-                  >
-                  <input
-                    ref="fileInput"
-                    style="display: none;"
-                    type="file"
-                    accept=".csv"
-                    @change="loadFile($event, section)"
-                  />
+                  <span>{{
+                    rows(section).length + section.dataRows.length
+                  }}
+                    rows</span>
+                  <input ref="fileInput" style="display: none;" type="file" accept=".csv"
+                    @change="loadFile($event, section)" />
                   <v-btn @click="triggerImport(sectionIndex)">Import</v-btn>
-                  <v-btn
-                    :disabled="totalRows(section) <= 0"
-                    @click="submitRows($event, section)"
-                    >Save</v-btn
-                  >
-                  <v-btn
-                    :disabled="totalRows(section) <= 0"
-                    @click="clear(section)"
-                    >Clear</v-btn
-                  >
+                  <v-btn :disabled="totalRows(section) <= 0" @click="submitRows($event, section)">Save</v-btn>
+                  <v-btn :disabled="totalRows(section) <= 0" @click="clear(section)">Clear</v-btn>
                 </template>
 
                 <div class="float-right">
-                  <v-btn
-                    v-if="exportable"
-                    :download="exportFile"
-                    :href="exportCsv(section)"
-                    >{{ exportLabel }}</v-btn
-                  >
+                  <v-btn v-if="exportable" :download="exportFile" :href="exportCsv(section)">{{ exportLabel }}</v-btn>
                 </div>
               </div>
 
@@ -53,36 +33,22 @@
 
           <tr v-if="section.header" :style="genericStyles(section.header)">
             <template v-if="section.header.dataCells">
-              <th
-                v-for="(cell, index) in section.header.dataCells"
-                :key="index"
-              >
+              <th v-for="(cell, index) in section.header.dataCells" :key="index">
                 {{ cell }}
               </th>
             </template>
-            <th
-              v-for="(cell, index) in section.header.cellViews"
-              v-else
-              :key="index"
-            >
+            <th v-for="(cell, index) in section.header.cellViews" v-else :key="index">
               <glib-component :spec="cell" />
             </th>
           </tr>
         </thead>
 
-        <tbody :key="`body_${sectionIndex}`">
+        <tbody>
           <!-- <tr v-for="(row, index) in section.rows" :key="`row_${index}`"> -->
-          <template v-for="(row, rowIndex) in section.rows">
-            <tr
-              :key="`row_${rowIndex}`"
-              :class="row.onClick ? 'clickable' : ''"
-            >
-              <td
-                v-for="(cell, cellIndex) in row.cellViews"
-                :key="`cell_${cellIndex}`"
-                :colSpan="colSpan(row, cellIndex)"
-                :style="colStyles(row, cellIndex)"
-              >
+          <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)">
                 <!-- Prevent double links -->
                 <glib-component v-if="$href(cell)" :spec="cell" />
                 <a v-else :href="$href(row)" @click="$onClick($event, row)">
@@ -92,14 +58,8 @@
             </tr>
           </template>
 
-          <tr
-            v-for="(row, rowIndex) in section.dataRows"
-            :key="`data_row_${rowIndex}`"
-          >
-            <td
-              v-for="(cell, cellIndex) in row"
-              :key="`data_cell_${cellIndex}`"
-            >
+          <tr v-for="(row, rowIndex) in section.dataRows" :key="`data_row_${rowIndex}`">
+            <td v-for="(cell, cellIndex) in row" :key="`data_cell_${cellIndex}`">
               <a class="data-cell">{{ cell }}</a>
             </td>
           </tr>
@@ -139,6 +99,9 @@ export default {
       //     const createdAt = row[5]
       //     const activationState = row[14] ? 'active' : 'pending'
       //     count += 1
+      //     if (email.includes("'")) {
+      //       console.log("INVALID NAME", name)
+      //     }
       //     str += `{ name: "${name}".to_s, email: '${email}'.to_s, created_at: '${createdAt}', activation_state: '${activationState}'},\n`
       //   }
       // }
@@ -151,8 +114,8 @@ export default {
       this.sections = this.spec.sections;
       for (const section of this.sections) {
         section.header = section.header || {};
-        // Use $set() to bind the nested property
-        this.$set(section, "dataRows", []);
+        // Use Object.assign() to bind the nested property
+        Object.assign(section, { dataRows: [] });
       }
       this.autoloadAll(this.spec.nextPage);
       this.initCsvExport();
@@ -192,6 +155,7 @@ export default {
 table {
   border-spacing: 0;
 }
+
 thead {
   th {
     padding: 10px 4px;
@@ -199,11 +163,13 @@ thead {
     // border-left: 1px solid rgba(0, 0, 0, 0.12);
   }
 }
+
 tbody {
   tr.clickable {
-    td > a {
+    td>a {
       cursor: pointer;
     }
+
     &:hover {
       background: #eee;
     }
@@ -221,13 +187,16 @@ tbody {
     }
   }
 }
+
 .scrollable {
   width: 100%;
   overflow: auto;
 }
+
 .data-cell {
   white-space: pre-line;
 }
+
 table.table--grid {
   tbody {
     td {

package/components/panels/timeline.vue

@@ -1,43 +1,26 @@
 <template>
   <!-- Paddings cannot be applied to v-timeline directly -->
   <div :style="$styles()" :class="$classes()">
-    <v-timeline v-if="events" dense align-top>
-      <v-timeline-item
-        v-for="(item, index) in events"
-        :key="index"
-        :color="item.backgroundColor || 'white'"
-        :small="itemClasses(item).includes('small')"
-        :large="itemClasses(item).includes('large')"
-        :hide-dot="item.hide_dot"
-        fill-dot
-      >
+    <v-timeline v-if="events" :dense="true" align-top>
+      <v-timeline-item v-for="(item, index) in events" :key="index" :color="item.backgroundColor || 'white'"
+        :small="itemClasses(item).includes('small') || null" :large="itemClasses(item).includes('large')"
+        :hide-dot="item.hide_dot" fill-dot>
         <template v-slot:icon>
-          <div
-            :class="
-              itemClasses(item).includes('outlined') ? 'outlined-dots' : ''
-            "
-          >
-            <div
-              v-if="item.text"
-              class="number-circle"
-              :style="{ color: item.color }"
-            >
+          <div :class="
+            itemClasses(item).includes('outlined') ? 'outlined-dots' : ''
+          ">
+            <div v-if="item.text" class="number-circle" :style="{ color: item.color }">
               {{ item.text }}
             </div>
             <div v-else class="icon">
-              <common-icon
-                :spec="{
-                  material: { name: item.icon, size: iconSize(item) },
-                  color: item.color
-                }"
-              />
+              <common-icon :spec="{
+                material: { name: item.icon, size: iconSize(item) },
+                color: item.color
+              }" />
             </div>
           </div>
         </template>
-        <panels-responsive
-          v-if="childViews"
-          :spec="{ childViews: [childViews[index]] }"
-        />
+        <panels-responsive v-if="childViews" :spec="{ childViews: [childViews[index]] }" />
       </v-timeline-item>
     </v-timeline>
   </div>
@@ -78,6 +61,7 @@ export default {
   height: 36px;
   width: 36px;
 }
+
 .v-timeline-item__dot--small {
   height: 20px;
   width: 20px;
@@ -88,13 +72,16 @@ export default {
 .v-timeline {
   padding-top: 0px;
 }
+
 .v-timeline-item {
   // Minimum line distance
   padding-bottom: 10px;
 }
+
 .container {
   padding-top: 0px;
 }
+
 .outlined-dots {
   border-radius: 50%;
   width: 100%;
@@ -106,11 +93,13 @@ export default {
   padding: 4px 0;
   // font-size: 22px;
 }
+
 .outlined .v-timeline-item {
   ::v-deep .v-timeline-item__dot {
     box-shadow: none;
   }
 }
+
 .icon {
   display: inline-flex;
   vertical-align: middle;
@@ -120,6 +109,7 @@ export default {
 .number-circle {
   font-size: 16px;
 }
+
 .small {
   .number-circle {
     font-size: 14px;

package/components/panels/vertical.vue

@@ -1,14 +1,8 @@
 <template>
-  <component
-    :is="componentName"
-    :class="cssClasses"
-    :style="cssStyles"
-    :href="$href()"
-    @click="$onClick()"
-  >
-    <template v-for="(item, index) in spec.childViews">
+  <component :is="componentName" :class="cssClasses" :style="cssStyles" :href="$href()" @click="$onClick()">
+    <template v-for="(item, index) in spec.childViews" :key="`${index}_${item.view}`">
       <!-- Use view name for key to avoid component reuse issue -->
-      <glib-component :key="`${index}_${item.view}`" :spec="item" />
+      <glib-component :spec="item" />
     </template>
   </component>
 </template>
@@ -19,7 +13,7 @@ export default {
     spec: { type: Object, required: true }
   },
   computed: {
-    cssClasses: function() {
+    cssClasses: function () {
       // TODO: Remove this after migrating to `panels/responsive`
       // Vertical panels are nameless when used in predefined layout (e.g. page.body, list.header, etc.)
       this.spec.view = this.spec.view || "panels/vertical";
@@ -35,7 +29,7 @@ export default {
       }
       return classes;
     },
-    cssStyles: function() {
+    cssStyles: function () {
       const styles = this.genericStyles();
       switch (this.spec.align) {
         case "center":
@@ -92,11 +86,12 @@ a.panels-vertical {
 </style>
 
 <style>
-.layouts-vertical--fill-equally > * {
+.layouts-vertical--fill-equally>* {
   flex: initial;
   height: 100% !important;
 }
-.layouts-vertical--space-equally > * {
+
+.layouts-vertical--space-equally>* {
   flex: initial;
 }
 </style>