glib-web 0.5.77

package/components/panels/form.vue

@@ -0,0 +1,126 @@
+<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"
+      />
+    </template>
+
+    <panels-responsive :spec="modifiedSpec" />
+  </v-form>
+</template>
+
+<script>
+// import ActionsFormsSubmit from "../../actions/forms/submit";
+
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: () => ({
+    url: null,
+    params: null,
+    parentStyles: {},
+    formElement: null,
+    submitButtons: [],
+    modifiedSpec: {}
+  }),
+  watch: {
+    $isBusy: function(val, oldVal) {
+      for (const button of this.submitButtons) {
+        button._isBusy = val;
+      }
+    }
+  },
+  methods: {
+    $ready: function() {
+      this.$onEvent("forms/addSubmit", e => {
+        this.submitButtons.push(e.data);
+      });
+
+      this.$onEvent("forms/setBusy", e => {
+        if (e.data.value) {
+          Utils.http.startIndicator(this);
+        } else {
+          Utils.http.stopIndicator(this);
+        }
+      });
+
+      this.formElement = this.$refs.form.$el;
+      this.parentStyles = this.genericStyles({ width: this.spec.width });
+
+      const { url: url, params: params } = Utils.url.extractFormActionData(
+        this.spec.url,
+        this.spec.local
+      );
+      this.url = url;
+      this.params = params;
+
+      let firstAutoFocus = false;
+      this.modifiedSpec = this.spec;
+      this.modifiedSpec.childViews.map(childView => {
+        if (
+          childView.view.startsWith("fields/") &&
+          childView.view !== "fields/hidden-v1" &&
+          !firstAutoFocus
+        ) {
+          childView.autoFocus = true;
+          firstAutoFocus = true;
+        }
+
+        return childView;
+      });
+    },
+    onSubmit(event) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      this.submit();
+    },
+    submit() {
+      if (this.$refs.form.validate()) {
+        // Remove focus from current input field to avoid double submit if the user presses ENTER again.
+        document.activeElement.blur();
+
+        Utils.type.ifObject(
+          this.spec.onSubmit,
+          onSubmit => {
+            const formData = Utils.url.toMap(new FormData(this.formElement));
+            const params = {
+              [this.spec.paramNameForFormData || "formData"]: formData
+            };
+            const data = Object.assign({}, onSubmit, params);
+            GLib.action.execute(data, null, this);
+          },
+          () => {
+            GLib.form.submitData(this.formElement, this);
+          }
+        );
+      } else {
+        Utils.launch.alert("Make sure all fields are valid");
+      }
+    },
+    action_clear() {
+      this.formElement.reset();
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* .panels-form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+} */
+</style>

package/components/panels/horizontal.vue

@@ -0,0 +1,73 @@
+<template>
+  <div :class="cssClasses" :style="cssStyles">
+    <template v-for="(item, index) in spec.childViews">
+      <ui-component :key="index" :spec="item" />
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  computed: {
+    cssClasses: function() {
+      const classes = this.$classes().concat("layouts-horizontal");
+      switch (this.spec.distribution) {
+        case "fillEqually":
+          classes.push("layouts-horizontal--fill-equally");
+          break;
+        case "spaceEqually":
+          classes.push("layouts-horizontal--space-equally");
+          break;
+      }
+      return classes;
+    },
+    cssStyles: function() {
+      const styles = this.genericStyles();
+      switch (this.spec.align) {
+        case "middle":
+          styles["align-items"] = "center";
+          break;
+        case "bottom":
+          styles["align-items"] = "flex-end";
+          break;
+        default:
+          styles["align-items"] = "flex-start";
+      }
+      return styles;
+    }
+  },
+  methods: {
+    $displayValue() {
+      return "flex";
+    }
+  }
+};
+</script>
+
+<style scoped>
+.layouts-horizontal {
+  display: flex;
+  /* overflow: hidden; */
+}
+
+/* From https://stackoverflow.com/questions/13483331/make-buttons-same-width-without-specifying-exact-size */
+.layouts-horizontal--space-equally {
+  justify-content: space-around;
+}
+</style>
+
+<style>
+.layouts-horizontal--fill-equally > * {
+  flex: initial;
+  width: 100%;
+}
+.layouts-horizontal--space-equally > * {
+  flex: initial;
+}
+/* .layouts-horizontal > div {
+  display: inline-block;
+} */
+</style>

package/components/panels/list.vue

@@ -0,0 +1,241 @@
+<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="rowIndex == 0" />
+
+            <component :is="template(row)" :spec="row" :index="rowIndex" />
+            <v-divider
+              v-if="
+                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

@@ -0,0 +1,88 @@
+<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 }
+  },
+  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>

package/components/panels/scroll.vue

@@ -0,0 +1,68 @@
+<template>
+  <div :class="cssClasses" :style="cssStyles">
+    <!-- <template v-for="(item, index) in spec.childViews">
+      <ui-component :key="`${index}_${item.view}`" :spec="item" />
+    </template> -->
+    <panels-responsive :spec="spec" />
+  </div>
+</template>
+
+<script>
+// import Hash from "../../utils/hash";
+
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  computed: {
+    cssClasses() {
+      const classes = this.$classes().concat("layouts-scroll");
+      return classes;
+    },
+    cssStyles() {
+      // // 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();
+      // styles.remove("padding-top");
+      // styles.remove("padding-bottom");
+      // styles.remove("padding-left");
+      // styles.remove("padding-right");
+      //
+      // const styles = this.$styles({
+      //   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({
+        width: "matchParent"
+      });
+      return styles;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.layouts-scroll {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 8px;
+    background-color: #eee;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #aaa;
+  }
+}
+</style>

package/components/panels/split.vue

@@ -0,0 +1,52 @@
+<template v-if="content">
+  <div :class="classes()" :style="genericStyles()">
+    <div v-if="spec.left" class="layouts-split__side">
+      <panels-responsive :spec="spec.left" />
+    </div>
+
+    <div class="layouts-split__expand">
+      <panels-responsive v-if="spec.center" :spec="spec.center" />
+    </div>
+
+    <!-- <ui-component :spec="spec.centerView" v-if="spec.centerView" class="panels-split__expand"/>
+    <div class="panels-split__expand" v-else></div> -->
+
+    <div v-if="spec.right" class="layouts-split__side layouts-split__right">
+      <panels-responsive :spec="spec.right" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  methods: {
+    classes: function() {
+      return this.$classes().concat("layouts-split");
+    }
+  }
+};
+</script>
+
+<style scoped>
+.layouts-split {
+  display: flex;
+}
+
+.layouts-split__expand {
+  flex: 1 auto;
+  line-height: 1;
+}
+
+.layouts-split__side {
+  /* Make the side panels take full height */
+  display: flex;
+}
+
+.layouts-split__right {
+  /* Prevent unnecessary squashing, i.e. text broken into multiple lines */
+  flex-shrink: 0;
+}
+</style>