glib-web 0.5.98 → 0.6.2

package/components/panels/list.vue

@@ -1,247 +1,247 @@
-<template>
-  <v-list
-    :two-line="twoLine"
-    :three-line="threeLine"
-    class="py-0"
-    :style="genericStyles()"
-  >
-    <div ref="topAnchor"></div>
-
-    <template v-for="(section, sectionIndex) in sections">
-      <div :key="`section${sectionIndex}`">
-        <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}`"
-            :class="row.styleClasses"
-          >
-            <v-divider v-if="!spec.responsiveCols && rowIndex == 0" />
-
-            <component
-              :is="template(row)"
-              :spec="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>
-    </template>
-
-    <div ref="bottomAnchor" class="py-3 px-4" :style="bottomAnchorStyles">
-      Loading...
-    </div>
-  </v-list>
-</template>
-
-<script>
-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 actionCableMixin from "../mixins/ws/actionCable.js";
-
-export default {
-  components: {
-    draggable,
-    "template-thumbnail": ThumbnailTemplate,
-    "template-featured": FeaturedTemplate,
-    "template-commentOutgoing": CommentTemplate,
-    "template-commentIncoming": CommentTemplate
-  },
-  mixins: [autoloadMixin, actionCableMixin],
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data: function() {
-    return {
-      sections: []
-    };
-  },
-  computed: {
-    twoLine() {
-      for (const section of this.sections) {
-        const rows = section.rows || [];
-        for (const row of rows) {
-          if (row.subtitle) {
-            return true;
-          }
-        }
-      }
-      return false;
-    },
-    threeLine() {
-      for (const section of this.sections) {
-        const rows = section.rows || [];
-        for (const row of rows) {
-          if (row.subsubtitle) {
-            return true;
-          }
-        }
-      }
-      return false;
-    }
-  },
-  methods: {
-    $ready() {
-      this.sections = this.spec.sections || [];
-      this.autoloadAll(this.spec.nextPage);
-      this.enableInfiniteScrollIfApplicable();
-      this.$wsSubscribeEvents(this.spec.phoenixSocket);
-      this.$wsInitActionCable(this.spec.actionCable);
-
-      for (const section of this.sections) {
-        section.rows = section.rows || [];
-      }
-    },
-    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
-      //   - For example, if currentItemId is 56, the server will know that it needs to
-      //     return items that are newer than 56
-      //   - You may use other ways for pagination as well
-      // - Append the rows to this list
-    },
-    action_append(spec) {
-      for (const [index, appendedSection] of spec.sections.entries()) {
-        const section = this.sections[index] || {};
-
-        if (!section.rows) {
-          this.$set(section, "rows", []);
-        }
-
-        Utils.type.ifArray(appendedSection.rows, rows => {
-          for (const row of rows) {
-            section.rows.push(row);
-          }
-        });
-      }
-    },
-    action_update(spec) {
-      const updatedRows = {};
-
-      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 => {
-          const updatedRow = updatedRows[row.id];
-          if (updatedRow) {
-            return updatedRow;
-          } else {
-            return row;
-          }
-        });
-      }
-    },
-    action_delete(spec) {
-      const deletedRows = {};
-      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 => {
-          // return !rows.includes(row.id);
-          return !deletedRows[row.id];
-        });
-      }
-    },
-    $tearDown() {
-      this.cancelAutoloadRequest();
-    },
-    template(row) {
-      const name = `template-${row.template.replace("/", "-")}`;
-      const strict = true;
-      if (strict) {
-        return name;
-      } else {
-        if (this.$options.components[name]) {
-          return name;
-        }
-        console.warn(`Invalid template: ${row.template}`);
-        return null;
-      }
-    },
-    serializedSpec(row) {
-      return JSON.stringify(row);
-    },
-    onDragEnd(event) {
-      const targetSectionedRowIndex = event.newIndex;
-      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 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
-        }
-      });
-
-      GLib.action.execute(mergedSpec, null, this);
-    },
-    getSectionIndex(element) {
-      return element.dataset.index;
-    },
-    getSection(sectionIndex) {
-      return this.sections[sectionIndex];
-    },
-    previousSectionsRowCount(element) {
-      const sectionIndex = this.getSectionIndex(element);
-      let count = 0;
-      for (let i = 0; i < sectionIndex; i++) {
-        count += this.getSection(i).rows.length;
-      }
-      return count;
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.ghost {
-  opacity: 0.5;
-  background: #dddddd;
-}
-</style>
+<template>
+  <v-list
+    :two-line="twoLine"
+    :three-line="threeLine"
+    class="py-0"
+    :style="genericStyles()"
+  >
+    <div ref="topAnchor"></div>
+
+    <template v-for="(section, sectionIndex) in sections">
+      <div :key="`section${sectionIndex}`">
+        <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}`"
+            :class="row.styleClasses"
+          >
+            <v-divider v-if="!spec.responsiveCols && rowIndex == 0" />
+
+            <component
+              :is="template(row)"
+              :spec="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>
+    </template>
+
+    <div ref="bottomAnchor" class="py-3 px-4" :style="bottomAnchorStyles">
+      Loading...
+    </div>
+  </v-list>
+</template>
+
+<script>
+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 actionCableMixin from "../mixins/ws/actionCable.js";
+
+export default {
+  components: {
+    draggable,
+    "template-thumbnail": ThumbnailTemplate,
+    "template-featured": FeaturedTemplate,
+    "template-commentOutgoing": CommentTemplate,
+    "template-commentIncoming": CommentTemplate
+  },
+  mixins: [autoloadMixin, actionCableMixin],
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      sections: []
+    };
+  },
+  computed: {
+    twoLine() {
+      for (const section of this.sections) {
+        const rows = section.rows || [];
+        for (const row of rows) {
+          if (row.subtitle) {
+            return true;
+          }
+        }
+      }
+      return false;
+    },
+    threeLine() {
+      for (const section of this.sections) {
+        const rows = section.rows || [];
+        for (const row of rows) {
+          if (row.subsubtitle) {
+            return true;
+          }
+        }
+      }
+      return false;
+    }
+  },
+  methods: {
+    $ready() {
+      this.sections = this.spec.sections || [];
+      this.autoloadAll(this.spec.nextPage);
+      this.enableInfiniteScrollIfApplicable();
+      this.$wsSubscribeEvents(this.spec.phoenixSocket);
+      this.$wsInitActionCable(this.spec.actionCable);
+
+      for (const section of this.sections) {
+        section.rows = section.rows || [];
+      }
+    },
+    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
+      //   - For example, if currentItemId is 56, the server will know that it needs to
+      //     return items that are newer than 56
+      //   - You may use other ways for pagination as well
+      // - Append the rows to this list
+    },
+    action_append(spec) {
+      for (const [index, appendedSection] of spec.sections.entries()) {
+        const section = this.sections[index] || {};
+
+        if (!section.rows) {
+          this.$set(section, "rows", []);
+        }
+
+        Utils.type.ifArray(appendedSection.rows, rows => {
+          for (const row of rows) {
+            section.rows.push(row);
+          }
+        });
+      }
+    },
+    action_update(spec) {
+      const updatedRows = {};
+
+      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 => {
+          const updatedRow = updatedRows[row.id];
+          if (updatedRow) {
+            return updatedRow;
+          } else {
+            return row;
+          }
+        });
+      }
+    },
+    action_delete(spec) {
+      const deletedRows = {};
+      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 => {
+          // return !rows.includes(row.id);
+          return !deletedRows[row.id];
+        });
+      }
+    },
+    $tearDown() {
+      this.cancelAutoloadRequest();
+    },
+    template(row) {
+      const name = `template-${row.template.replace("/", "-")}`;
+      const strict = true;
+      if (strict) {
+        return name;
+      } else {
+        if (this.$options.components[name]) {
+          return name;
+        }
+        console.warn(`Invalid template: ${row.template}`);
+        return null;
+      }
+    },
+    serializedSpec(row) {
+      return JSON.stringify(row);
+    },
+    onDragEnd(event) {
+      const targetSectionedRowIndex = event.newIndex;
+      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 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
+        }
+      });
+
+      GLib.action.execute(mergedSpec, null, this);
+    },
+    getSectionIndex(element) {
+      return element.dataset.index;
+    },
+    getSection(sectionIndex) {
+      return this.sections[sectionIndex];
+    },
+    previousSectionsRowCount(element) {
+      const sectionIndex = this.getSectionIndex(element);
+      let count = 0;
+      for (let i = 0; i < sectionIndex; i++) {
+        count += this.getSection(i).rows.length;
+      }
+      return count;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.ghost {
+  opacity: 0.5;
+  background: #dddddd;
+}
+</style>

package/components/panels/responsive.vue

@@ -1,94 +1,94 @@
-<template>
-  <div
-    :class="cssClasses"
-    :style="$styles()"
-    :href="$href()"
-    @click="$onClick()"
-  >
-    <v-row no-gutters class="full-height">
-      <template v-for="(item, index) in spec.childViews">
-        <ui-component
-          v-if="isColumn(item)"
-          :key="viewKey(item, index)"
-          :spec="item"
-        />
-        <div
-          v-else
-          :key="viewKey(item, index)"
-          class="full-width"
-          :style="innerStyles"
-        >
-          <ui-component :spec="item" />
-        </div>
-      </template>
-    </v-row>
-  </div>
-</template>
-
-<script>
-import Vue from "vue";
-
-export default {
-  props: {
-    spec: {
-      type: Object,
-      required: true,
-      default: function() {
-        return {};
-      }
-    }
-  },
-  data() {
-    return {
-      innerStyles: {}
-    };
-  },
-  computed: {
-    cssClasses() {
-      // This panel will be nameless when used in predefined layout (e.g. page.body, list.header, etc.)
-      this.spec.view = this.spec.view || "panels/responsive";
-      return this.$classes();
-    }
-  },
-  methods: {
-    $ready() {
-      let align = null;
-      switch (this.spec.align) {
-        case "center":
-          align = "center";
-          break;
-        case "right":
-          align = "flex-end";
-          break;
-        default:
-          align = "flex-start";
-      }
-      Vue.set(this.innerStyles, "align-items", align);
-    },
-    isColumn(item) {
-      return item.view == "panels/column-v1";
-    },
-    viewKey(item, index) {
-      // Use view name for key to avoid component reuse issue
-      return `view${index}_${item.view}`;
-    }
-  }
-};
-</script>
-
-<style scoped>
-.row {
-  margin-left: 0;
-  margin-right: 0;
-}
-.full-width {
-  width: 100%;
-  flex: 0 0 100%;
-  display: flex;
-  flex-direction: column;
-}
-/* Needed to ensure that split's sub panels have the same height */
-.full-height {
-  height: 100%;
-}
-</style>
+<template>
+  <div
+    :class="cssClasses"
+    :style="$styles()"
+    :href="$href()"
+    @click="$onClick()"
+  >
+    <v-row no-gutters class="full-height">
+      <template v-for="(item, index) in spec.childViews">
+        <ui-component
+          v-if="isColumn(item)"
+          :key="viewKey(item, index)"
+          :spec="item"
+        />
+        <div
+          v-else
+          :key="viewKey(item, index)"
+          class="full-width"
+          :style="innerStyles"
+        >
+          <ui-component :spec="item" />
+        </div>
+      </template>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+
+export default {
+  props: {
+    spec: {
+      type: Object,
+      required: true,
+      default: function() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      innerStyles: {}
+    };
+  },
+  computed: {
+    cssClasses() {
+      // This panel will be nameless when used in predefined layout (e.g. page.body, list.header, etc.)
+      this.spec.view = this.spec.view || "panels/responsive";
+      return this.$classes();
+    }
+  },
+  methods: {
+    $ready() {
+      let align = null;
+      switch (this.spec.align) {
+        case "center":
+          align = "center";
+          break;
+        case "right":
+          align = "flex-end";
+          break;
+        default:
+          align = "flex-start";
+      }
+      Vue.set(this.innerStyles, "align-items", align);
+    },
+    isColumn(item) {
+      return item.view == "panels/column-v1";
+    },
+    viewKey(item, index) {
+      // Use view name for key to avoid component reuse issue
+      return `view${index}_${item.view}`;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.row {
+  margin-left: 0;
+  margin-right: 0;
+}
+.full-width {
+  width: 100%;
+  flex: 0 0 100%;
+  display: flex;
+  flex-direction: column;
+}
+/* Needed to ensure that split's sub panels have the same height */
+.full-height {
+  height: 100%;
+}
+</style>