glib-web 2.5.0 → 3.0.0-beta1

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>
 

package/components/panels/responsive.vue

@@ -1,30 +1,5 @@
 <template>
-  <div style="display: contents;">
-    <!-- <common-responsive v-if="!hoverViewsSpec" :spec="spec" /> -->
-    <v-menu
-      v-if="hoverViewsSpec"
-      :close-on-content-click="false"
-      open-on-hover
-      offset-x
-      transition="scale-transition"
-      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" />
-        <!-- <common-button :spec="spec" :disabled="$isBusy" :event-handlers="on" /> -->
-      </template>
-    </common-tooltip>
-  </div>
+  <common-responsive :spec="spec" />
 </template>
 
 <script>
@@ -33,20 +8,25 @@ export default {
     spec: {
       type: Object,
       required: true,
-      default: function() {
+      default: function () {
         return {};
       }
     }
   },
   data() {
     return {
-      hoverViewsSpec: this.spec.hoverViews
-        ? {
-            childViews: this.spec.hoverViews,
-            align: this.spec.align
-          }
-        : false
+      hoverViewsSpec: null
     };
+  },
+  methods: {
+    $ready() {
+      this.hoverViewsSpec = this.spec.hoverViews
+        ? {
+          childViews: this.spec.hoverViews,
+          align: this.spec.align
+        }
+        : null;
+    }
   }
 };
 </script>

package/components/panels/split.vue

@@ -1,7 +1,7 @@
 <template v-if="content">
   <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");
     }
   }