glib-web 2.4.1 → 3.0.0-beta1

package/components/panels/form.vue

@@ -1,19 +1,8 @@
 <template>
-  <v-form
-    ref="form"
-    :style="parentStyles"
-    :action="url"
-    :method="spec.method"
-    :data-local="spec.local"
-    @submit="onSubmit"
-  >
-    <template v-for="(value, key, index) in params">
-      <input
-        :key="`hidden_${index}`"
-        type="hidden"
-        :name="key"
-        :value="value"
-      />
+  <v-form ref="form" :style="parentStyles" :action="url" :method="spec.method" :data-local="spec.local"
+    @submit="onSubmit">
+    <template v-for="(value, key, index) in params" :key="`hidden_${index}`">
+      <input type="hidden" :name="key" :model-value="value" />
     </template>
 
     <panels-responsive :spec="modifiedSpec" />
@@ -28,7 +17,7 @@
 
 export default {
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data: () => ({
     url: null,
@@ -36,22 +25,22 @@ export default {
     parentStyles: {},
     formElement: null,
     submitButtons: [],
-    modifiedSpec: {}
+    modifiedSpec: {},
   }),
   watch: {
-    $isBusy: function(val, oldVal) {
+    $isBusy: function (val, oldVal) {
       for (const button of this.submitButtons) {
         button._isBusy = val;
       }
-    }
+    },
   },
   methods: {
     $mounted() {
-      this.$onEvent("forms/addSubmit", e => {
+      this.$onEvent("forms/addSubmit", (e) => {
         this.submitButtons.push(e.data);
       });
 
-      this.$onEvent("forms/setBusy", e => {
+      this.$onEvent("forms/setBusy", (e) => {
         if (e.data.value) {
           Utils.http.startIndicator(this);
         } else {
@@ -59,11 +48,11 @@ export default {
         }
       });
 
-      this.$onEvent("forms/submit", e => {
+      this.$onEvent("forms/submit", (e) => {
         this.submit();
       });
 
-      this.$onEvent("forms/directSubmit", e => {
+      this.$onEvent("forms/directSubmit", (e) => {
         this.directSubmit(e.data.url);
       });
     },
@@ -80,7 +69,7 @@ export default {
 
       let firstAutoFocus = false;
       this.modifiedSpec = this.spec;
-      this.modifiedSpec.childViews.map(childView => {
+      this.modifiedSpec.childViews.map((childView) => {
         if (
           childView.view.startsWith("fields/") &&
           childView.view !== "fields/hidden-v1" &&
@@ -103,10 +92,10 @@ export default {
       this.validate(() => {
         Utils.type.ifObject(
           this.spec.onSubmit,
-          onSubmit => {
+          (onSubmit) => {
             const formData = Utils.url.toMap(new FormData(this.formElement));
             const params = {
-              [this.spec.paramNameForFormData || "formData"]: formData
+              [this.spec.paramNameForFormData || "formData"]: formData,
             };
             const data = Object.assign({}, onSubmit, params);
             GLib.action.execute(data, this);
@@ -138,11 +127,11 @@ export default {
     },
     action_clear() {
       this.formElement.reset();
-    }
+    },
     // $dialogContainer() {
     //   return this.formElement;
     // }
-  }
+  },
 };
 </script>
 

package/components/panels/grid.vue

@@ -1,7 +1,13 @@
 <template>
-  <div :class="$classes()" :style="cssStyles">
-    <template v-for="(item, index) in spec.childViews">
-      <div :key="index">
+  <div
+    :class="$classes()"
+    :style="cssStyles"
+  >
+    <template
+      v-for="(item, index) in spec.childViews"
+      :key="index"
+    >
+      <div>
         <glib-component :spec="item" />
       </div>
     </template>
@@ -11,20 +17,20 @@
 <script>
 export default {
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   computed: {
-    cssStyles: function() {
+    cssStyles: function () {
       const styles = this.$styles();
 
       styles["display"] = "grid";
       Utils.type.ifNumber(
         this.spec.columnGap,
-        columnGap => (styles["columnGap"] = `${columnGap}px`)
+        (columnGap) => (styles["columnGap"] = `${columnGap}px`)
       );
       Utils.type.ifNumber(
         this.spec.rowGap,
-        rowGap => (styles["rowGap"] = `${rowGap}px`)
+        (rowGap) => (styles["rowGap"] = `${rowGap}px`)
       );
       const boxMaxWidth = this.spec.boxMaxWidth
         ? `${this.spec.boxMaxWidth}px`
@@ -35,8 +41,8 @@ export default {
       ] = `repeat(auto-fit, minmax(${this.spec.boxMinWidth}px, ${boxMaxWidth}))`;
 
       return styles;
-    }
-  }
+    },
+  },
 };
 </script>
 

package/components/panels/horizontal.vue

@@ -1,25 +1,55 @@
 <template>
-  <component
+  <!-- <component
     :is="componentName"
     :class="cssClasses"
     :style="cssStyles"
     :href="$href()"
     @click="$onClick()"
   >
-    <template v-for="(item, index) in spec.childViews">
-      <glib-component :key="index" :spec="item" />
+    <template
+      v-for="(item, index) in spec.childViews"
+      :key="index"
+    >
+      <glib-component :spec="item" />
     </template>
+  </component> -->
+  <component :is="componentName" :style="parentStyles" :class="parentClasses" :href="$href()" @click="$onClick()">
+    <!-- <draggable :style="childStyles" :class="childClasses" ghost-class="ghost" -->
+    <!-- :group="dragSupport ? dragSupport.groupId || 'common' : 'common'" :data-dragPanelId="spec.id"
+    :disabled="!$type.isObject(spec.dragSupport)" @start="onDragStart" @end="onDragEnd"> -->
+    <!-- Using `item.id` as key is important to make sure the item gets updated
+           when dragging ends. -->
+    <div :style="childStyles" :class="childClasses">
+      <template v-for="(item, index) in childViews" :key="item.id || index">
+        <glib-component :spec="item" />
+      </template>
+    </div>
+    <!-- </draggable> -->
   </component>
 </template>
 
 <script>
+// import draggable from "vuedraggable";
+
 export default {
+  components: {
+    // draggable
+  },
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
+  },
+  data: function () {
+    return {
+      dragSupport: null,
+      childViews: []
+    };
   },
   computed: {
-    cssClasses: function() {
-      const classes = this.$classes().concat("layouts-horizontal");
+    parentClasses: function () {
+      return this.$classes();
+    },
+    childClasses() {
+      const classes = ["layouts-horizontal"];
       const distribution = this.spec.distribution;
       switch (distribution) {
         case "fillEqually":
@@ -29,9 +59,12 @@ export default {
           classes.push("layouts-horizontal--space-equally");
           break;
         default:
-          Utils.type.ifString(distribution, distribution => {
+          Utils.type.ifString(distribution, (distribution) => {
             // Uses Material Design spacings: https://vuetifyjs.com/en/styles/spacing/#how-it-works
-            if (distribution.startsWith("overlap")) {
+            if (
+              distribution.startsWith("overlap-") ||
+              distribution.startsWith("space-")
+            ) {
               classes.push(`layouts-horizontal--${distribution}`);
             }
           });
@@ -39,8 +72,16 @@ export default {
       }
       return classes;
     },
-    cssStyles: function() {
-      const styles = this.genericStyles();
+    parentStyles() {
+      const styles = this.$styles();
+      if (this.spec.width == "matchParent") {
+        styles["width"] = "100%";
+      }
+      return styles;
+    },
+    childStyles() {
+      const styles = {};
+
       switch (this.spec.align) {
         case "middle":
           styles["align-items"] = "center";
@@ -51,15 +92,55 @@ export default {
         default:
           styles["align-items"] = "flex-start";
       }
+
       return styles;
     },
     componentName() {
-      return this.$href() ? "a" : "div";
+      return this.spec.onClick ? "a" : "div";
     }
   },
   methods: {
+    $ready() {
+      this.dragSupport = this.spec.dragSupport;
+      this.childViews = this.spec.childViews;
+    },
     $displayValue() {
       return "flex";
+    },
+    onDragStart(event) {
+      // This allows custom components to detect if something is being dragged.
+      window.vueApp.draggedComponent = this;
+    },
+    onDragEnd(event) {
+      window.vueApp.draggedComponent = null;
+
+      const targetRowIndex = event.newIndex;
+      if (event.from == event.to && event.oldIndex == targetRowIndex) {
+        console.log("Reordering canceled");
+        return;
+      }
+
+      console.log("DRAG1", this.childViews);
+
+      const itemId = event.clone.dataset.dragitemid; // The item that got dragged/dropped
+      const oldPanelId = event.from.dataset.dragpanelid;
+      const newPanelId = event.to.dataset.dragpanelid;
+
+      const dragSpec = this.spec.dragSupport;
+      const mergedSpec = Object.assign(dragSpec.onDrop, {
+        [dragSpec.paramNameForFormData || "formData"]: {
+          [dragSpec.paramNameForNewAbsoluteIndex || "newIndex"]: targetRowIndex,
+          [dragSpec.paramNameForItemId || "itemId"]: itemId,
+          [dragSpec.paramNameForOldPanelId || "oldPanelId"]: oldPanelId,
+          [dragSpec.paramNameForNewPanelId || "newPanelId"]: newPanelId
+        }
+      });
+
+      console.log("DRAG2", mergedSpec, event.clone, event);
+
+      GLib.action.execute(mergedSpec, this);
+
+      console.log("DRAG3", this.childViews);
     }
   }
 };
@@ -100,26 +181,76 @@ a.panels-horizontal {
 </style>
 
 <style>
-.layouts-horizontal--fill-equally > * {
+.layouts-horizontal--fill-equally>* {
   flex: initial;
   width: 100%;
 }
-.layouts-horizontal--space-equally > * {
+
+.layouts-horizontal--space-equally>* {
   flex: initial;
 }
-.layouts-horizontal--overlap-1 > *:not(:first-child) {
+
+.layouts-horizontal--overlap-1>*:not(:first-child) {
   margin-left: -4px;
 }
-.layouts-horizontal--overlap-2 > *:not(:first-child) {
+
+.layouts-horizontal--overlap-2>*:not(:first-child) {
   margin-left: -8px;
 }
-.layouts-horizontal--overlap-3 > *:not(:first-child) {
+
+.layouts-horizontal--overlap-3>*:not(:first-child) {
   margin-left: -12px;
 }
-.layouts-horizontal--overlap-4 > *:not(:first-child) {
+
+.layouts-horizontal--overlap-4>*:not(:first-child) {
   margin-left: -16px;
 }
-.layouts-horizontal--overlap-5 > *:not(:first-child) {
+
+.layouts-horizontal--overlap-5>*:not(:first-child) {
   margin-left: -20px;
 }
+
+.layouts-horizontal--overlap-6>*:not(:first-child) {
+  margin-left: -24px;
+}
+
+.layouts-horizontal--overlap-7>*:not(:first-child) {
+  margin-left: -28px;
+}
+
+.layouts-horizontal--overlap-8>*:not(:first-child) {
+  margin-left: -32px;
+}
+
+.layouts-horizontal--space-1>*:not(:first-child) {
+  margin-left: 4px;
+}
+
+.layouts-horizontal--space-2>*:not(:first-child) {
+  margin-left: 8px;
+}
+
+.layouts-horizontal--space-3>*:not(:first-child) {
+  margin-left: 12px;
+}
+
+.layouts-horizontal--space-4>*:not(:first-child) {
+  margin-left: 16px;
+}
+
+.layouts-horizontal--space-5>*:not(:first-child) {
+  margin-left: 20px;
+}
+
+.layouts-horizontal--space-6>*:not(:first-child) {
+  margin-left: 24px;
+}
+
+.layouts-horizontal--space-7>*:not(:first-child) {
+  margin-left: 28px;
+}
+
+.layouts-horizontal--space-8>*:not(:first-child) {
+  margin-left: 32px;
+}
 </style>

package/components/panels/list.vue

@@ -1,51 +1,31 @@
 <template>
-  <v-list
-    :two-line="twoLine"
-    :three-line="threeLine"
-    class="py-0"
-    :style="genericStyles()"
-  >
+  <v-list :two-line="twoLine || null" :three-line="threeLine || null" class="py-0" :class="$classes()" :style="$styles()">
     <div ref="topAnchor">
       <div v-if="prevPageUrl" class="py-3 px-4">
         Loading...
       </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="a"
-          handle=".handle"
-          :data-index="sectionIndex"
-          @end="onDragEnd"
-        >
-          <div
-            v-for="(row, rowIndex) in section.rows"
-            :key="`${sectionIndex}_${rowIndex}`"
-            :ref="`row_${sectionIndex}_${rowIndex}`"
-            :class="row.styleClasses"
-          >
-            <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
-              v-if="
-                !spec.responsiveCols &&
-                  (rowIndex != section.rows.length - 1 ||
-                    sectionIndex != sections.length - 1)
-              "
-            />
-          </div>
-        </draggable>
+          <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> -->
 
         <panels-responsive v-if="section.footer" :spec="section.footer" />
       </div>
@@ -60,28 +40,29 @@
 </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: []
+      sections: [],
+      dragSupport: null
     };
   },
   computed: {
@@ -106,11 +87,12 @@ export default {
         }
       }
       return false;
-    }
+    },
   },
   methods: {
     $ready() {
       this.sections = this.spec.sections || [];
+      this.dragSupport = this.spec.dragSupport;
       this.autoloadAll(this.spec.nextPage);
       this.enableInfiniteScrollIfApplicable();
       this.$wsSubscribeEvents(this.spec.phoenixSocket);
@@ -128,7 +110,7 @@ export default {
           fieldTitleName: this.spec.fieldTitleName
             ? `${prefix}[${this.spec.fieldTitleName}]`
             : null,
-          fieldCheckValueIf: this.spec.fieldCheckValueIf
+          fieldCheckValueIf: this.spec.fieldCheckValueIf,
         });
       }
       return row;
@@ -151,7 +133,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);
           }
@@ -161,14 +143,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;
@@ -180,14 +162,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];
         });
@@ -212,37 +194,48 @@ export default {
     serializedSpec(row) {
       return JSON.stringify(row);
     },
+    onDragStart(event) {
+      // This allows custom components to detect if something is being dragged.
+      window.vueApp.draggedComponent = this;
+    },
     onDragEnd(event) {
+      window.vueApp.draggedComponent = null;
+
       const targetSectionedRowIndex = event.newIndex;
+      // const sourceSectionedRowIndex = event.oldIndex;
       if (event.from == event.to && event.oldIndex == targetSectionedRowIndex) {
         console.log("Reordering canceled");
         return;
       }
-
       const targetSectionIndex = this.getSectionIndex(event.to);
-      const targetSection = this.getSection(targetSectionIndex);
-      // The dragged row is now on the new index
-      const draggedRow = targetSection.rows[targetSectionedRowIndex];
+      // const targetSection = this.getSection(targetSectionIndex);
 
       const targetAbsoluteIndex =
         this.previousSectionsRowCount(event.to) + targetSectionedRowIndex;
 
-      const mergedSpec = Object.assign(draggedRow.onReorder, {
-        [draggedRow.paramNameForFormData || "formData"]: {
-          [draggedRow.paramNameForNewIndex]: targetAbsoluteIndex, // Deprecated
-          [draggedRow.paramNameForNewAbsoluteIndex ||
-          "newAbsoluteIndex"]: targetAbsoluteIndex,
-          [draggedRow.paramNameForNewSectionIndex ||
-          "newSectionIndex"]: targetSectionIndex,
-          [draggedRow.paramNameForNewSectionedRowIndex ||
-          "newSectionedRowIndex"]: targetSectionedRowIndex
+      const rowId = event.clone.dataset.dragrowid; // The item that got dragged/dropped
+      const oldListId = event.from.dataset.draglistid;
+      const newListId = event.to.dataset.draglistid;
+
+      const dragSpec = this.dragSupport;
+      const mergedSpec = Object.assign(dragSpec.onDrop, {
+        [dragSpec.paramNameForFormData || "formData"]: {
+          [dragSpec.paramNameForNewAbsoluteIndex ||
+            "newAbsoluteIndex"]: targetAbsoluteIndex,
+          [dragSpec.paramNameForNewSectionIndex ||
+            "newSectionIndex"]: targetSectionIndex,
+          [dragSpec.paramNameForNewSectionedRowIndex ||
+            "newSectionedRowIndex"]: targetSectionedRowIndex,
+          [dragSpec.paramNameForRowId || "rowId"]: rowId,
+          [dragSpec.paramNameForOldListId || "oldListId"]: oldListId,
+          [dragSpec.paramNameForNewListId || "newListId"]: newListId
         }
       });
 
       GLib.action.execute(mergedSpec, this);
     },
     getSectionIndex(element) {
-      return element.dataset.index;
+      return element.dataset.dragsectionindex;
     },
     getSection(sectionIndex) {
       return this.sections[sectionIndex];
@@ -254,8 +247,8 @@ export default {
         count += this.getSection(i).rows.length;
       }
       return count;
-    }
-  }
+    },
+  },
 };
 </script>