glib-web 0.5.77

package/components/panels/table.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="scrollable">
+    <div ref="topAnchor"></div>
+
+    <table :style="$styles()">
+      <template v-for="(section, sectionIndex) in sections">
+        <thead :key="`head_${sectionIndex}`">
+          <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)"
+                  />
+                  <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
+                  >
+                </template>
+
+                <div class="float-right">
+                  <v-btn
+                    v-if="exportable"
+                    :download="exportFile"
+                    :href="exportCsv(section)"
+                    >{{ exportLabel }}</v-btn
+                  >
+                </div>
+              </div>
+
+              <div v-if="output" style="white-space: pre-line;">
+                {{ output }}
+              </div>
+            </td>
+          </tr>
+
+          <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"
+              >
+                {{ cell }}
+              </th>
+            </template>
+            <th
+              v-for="(cell, index) in section.header.cellViews"
+              v-else
+              :key="index"
+            >
+              <ui-component :spec="cell" />
+            </th>
+          </tr>
+        </thead>
+
+        <tbody :key="`body_${sectionIndex}`">
+          <!-- <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)"
+              >
+                <!-- Prevent double links -->
+                <ui-component v-if="$href(cell)" :spec="cell" />
+                <a v-else :href="$href(row)" @click="$onClick($event, row)">
+                  <ui-component :spec="cell" />
+                </a>
+              </td>
+            </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}`"
+            >
+              <a class="data-cell">{{ cell }}</a>
+            </td>
+          </tr>
+        </tbody>
+      </template>
+    </table>
+
+    <div ref="bottomAnchor" class="py-3 px-6" :style="bottomAnchorStyles">
+      Loading...
+    </div>
+  </div>
+</template>
+
+<script>
+import autoloadMixin from "../mixins/table/autoload.js";
+import exportMixin from "../mixins/table/export.js";
+import importMixin from "../mixins/table/import.js";
+
+export default {
+  mixins: [autoloadMixin, exportMixin, importMixin],
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      sections: []
+    };
+  },
+  computed: {
+    output() {
+      // let str = ""
+      // let count = 0
+      // for (const section of this.sections) {
+      //   for (const row of section.dataRows) {
+      //     const name = row[2]
+      //     const email = row[3]
+      //     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`
+      //   }
+      // }
+      // return `Processing ${count} rows:\n[\n${str}\n]`
+      return "";
+    }
+  },
+  methods: {
+    $ready() {
+      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", []);
+      }
+      this.autoloadAll(this.spec.nextPage);
+      this.initCsvExport();
+      this.initCsvImport();
+      this.enableInfiniteScrollIfApplicable();
+    },
+    $tearDown() {
+      this.cancelAutoloadRequest();
+    },
+    clear(section) {
+      section.rows = [];
+      section.dataRows = [];
+    },
+    colSpan(row, index) {
+      const spans = row.colSpans || [];
+      return spans[index] || 1;
+    },
+    colStyles(row, index) {
+      const colStyles = row.colStyles || [];
+      return this.$styles(colStyles[index] || {});
+    },
+    rows(section) {
+      return section.rows || [];
+    },
+    triggerImport(index) {
+      const input = this.$refs.fileInput[index];
+      input.click();
+    },
+    totalRows(section) {
+      return (section.rows || []).length + (section.dataRows || []).length;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+table {
+  border-spacing: 0;
+}
+thead {
+  th {
+    padding: 10px 4px;
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    // border-left: 1px solid rgba(0, 0, 0, 0.12);
+  }
+}
+tbody {
+  tr.clickable {
+    td > a {
+      cursor: pointer;
+    }
+    &:hover {
+      background: #eee;
+    }
+  }
+
+  td {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    // border-left: 1px solid rgba(0, 0, 0, 0.12);
+
+    a {
+      padding: 10px 24px;
+      display: block;
+      color: inherit;
+      cursor: default;
+    }
+  }
+}
+.scrollable {
+  width: 100%;
+  overflow: auto;
+}
+.data-cell {
+  white-space: pre-line;
+}
+</style>

package/components/panels/ul.vue

@@ -0,0 +1,34 @@
+<template>
+  <ul :style="$styles()" :class="$classes()">
+    <!-- Use view name for key to avoid component reuse issue -->
+    <li v-for="(item, index) in spec.childViews" :key="`${index}_${item.view}`">
+      <ui-component :spec="item" />
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+// TODO: Need responsive support for mobile screens.
+ul.breadcrumbs {
+  padding-left: 0px;
+  list-style: none;
+
+  li {
+    display: inline;
+  }
+
+  li + li:before {
+    padding: 4px 4px 4px 8px;
+    color: black;
+    content: "/\00a0";
+  }
+}
+</style>

package/components/panels/vertical.vue

@@ -0,0 +1,71 @@
+<template>
+  <div :class="cssClasses" :style="cssStyles" @click="$onClick()">
+    <template v-for="(item, index) in spec.childViews">
+      <!-- Use view name for key to avoid component reuse issue -->
+      <ui-component :key="`${index}_${item.view}`" :spec="item" />
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  computed: {
+    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";
+
+      const classes = this.$classes().concat("layouts-vertical");
+      switch (this.spec.distribution) {
+        case "fillEqually":
+          classes.push("layouts-vertical--fill-equally");
+          break;
+        case "spaceEqually":
+          classes.push("layouts-vertical--space-equally");
+          break;
+      }
+      return classes;
+    },
+    cssStyles: function() {
+      const styles = this.genericStyles();
+      switch (this.spec.align) {
+        case "center":
+          styles["align-items"] = "center";
+          break;
+        case "right":
+          styles["align-items"] = "flex-end";
+          break;
+        default:
+          styles["align-items"] = "flex-start";
+      }
+      return styles;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.layouts-vertical {
+  display: flex;
+  /* overflow: hidden; */
+  flex-direction: column;
+}
+
+/* From https://stackoverflow.com/questions/13483331/make-buttons-same-width-without-specifying-exact-size */
+.layouts-vertical--space-equally {
+  justify-content: space-around;
+}
+</style>
+
+<style>
+.layouts-vertical--fill-equally > * {
+  flex: initial;
+  height: 100% !important;
+}
+.layouts-vertical--space-equally > * {
+  flex: initial;
+}
+</style>

package/components/panels/web.vue

@@ -0,0 +1,11 @@
+<template>
+  <iframe :style="$styles()" :src="spec.url"></iframe>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>

package/components/spacer.vue

@@ -0,0 +1,11 @@
+<template>
+  <div :style="genericStyles()"></div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>

package/components/switch.vue

@@ -0,0 +1,42 @@
+<template>
+  <div :class="$classes()">
+    <v-switch
+      v-model="enabled"
+      :label="spec.text"
+      hide-details
+      @change="changed"
+    >
+    </v-switch>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      enabled: false
+    };
+  },
+  methods: {
+    $ready() {
+      this.enabled = this.spec.enabled;
+    },
+    changed() {
+      if (this.enabled) {
+        GLib.action.execute(this.spec.onEnabled, {}, this);
+      } else {
+        GLib.action.execute(this.spec.onDisabled, {}, this);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.v-input--selection-controls {
+  margin-top: 0;
+}
+</style>

package/components/tabBar.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-tabs
+    v-model="tab"
+    grow
+    show-arrows
+    :background-color="spec.backgroundColor"
+    :slider-color="spec.color"
+    :style="'width: 100%'"
+  >
+    <v-tab
+      v-for="(item, index) in spec.buttons"
+      :key="index"
+      :href="$href(item)"
+      @click="$onClick($event, item)"
+    >
+      <common-icon v-if="item.icon" :spec="item.icon" />
+      <span :style="{ color: spec.color }">{{ item.text }}</span>
+    </v-tab>
+  </v-tabs>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      tab: null,
+      buttons: null
+    };
+  },
+  methods: {
+    $ready() {
+      this.buttons = this.spec.tabButtons || this.spec.buttons;
+      for (const [index, button] of this.buttons.entries()) {
+        if (button.disabled) {
+          this.tab = this.$href(button);
+        }
+      }
+    }
+  }
+};
+</script>

package/extensions/array.js

@@ -0,0 +1,20 @@
+Array.prototype.remove = function(element) {
+  const index = this.indexOf(element);
+  if (index !== -1) {
+    this.splice(index, 1);
+    return true;
+  }
+  return false;
+};
+
+Array.prototype.clear = function() {
+  this.length = 0;
+};
+
+Array.prototype.first = function() {
+  return this[0];
+};
+
+Array.prototype.last = function() {
+  return this[this.length - 1];
+};

package/extensions/string.js

@@ -0,0 +1,21 @@
+// https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript
+String.prototype.hashCode = function() {
+  var hash = 0,
+    i,
+    chr;
+  if (this.length === 0) return hash;
+  for (i = 0; i < this.length; i++) {
+    chr = this.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return hash;
+};
+
+String.prototype.contains = function(substr) {
+  return this.indexOf(substr) > -1;
+};
+
+String.prototype.presence = function() {
+  return this.length > 0 ? this.toString() : null;
+};

package/index.js

@@ -0,0 +1,195 @@
+import Vue from "vue";
+export { Vue };
+
+import App from "./app.vue";
+
+import * as VueGoogleMaps from "vue2-google-maps";
+Vue.use(VueGoogleMaps, {
+  load: {
+    key: process.env.GMAPS_API_KEY,
+    libraries: "places"
+  }
+});
+
+import "./styles/test.scss";
+import "./styles/test.sass";
+
+import Vuetify from "vuetify";
+import "vuetify/dist/vuetify.min.css";
+// import "material-design-icons-iconfont/dist/material-design-icons.css";
+// import "@mdi/font/css/materialdesignicons.css";
+Vue.use(Vuetify);
+
+import Chartkick from "vue-chartkick";
+import Chart from "chart.js";
+Vue.use(Chartkick.use(Chart));
+
+// TODO: make this opt-in
+import VueYoutube from "vue-youtube";
+Vue.use(VueYoutube);
+
+// import VueAnalytics from 'vue-analytics'
+// // TODO: Avoid hardcoding
+// Vue.use(VueAnalytics, {
+//   id: 'UA-146876849-1'
+// })
+
+import "./extensions/string.js";
+import "./extensions/array.js";
+
+// Recursive components must be global
+import VerticalPanel from "./components/panels/vertical";
+import ResponsivePanel from "./components/panels/responsive";
+import Component from "./components/component";
+import CommonIcon from "./components/_icon";
+import CommonButton from "./components/_button";
+import CommonMessage from "./components/_message";
+import CommonDropdownMenu from "./components/_dropdownMenu";
+import CommonTemplateMenu from "./templates/_menu";
+Vue.component("panels-vertical", VerticalPanel);
+Vue.component("panels-responsive", ResponsivePanel);
+Vue.component("common-button", CommonButton);
+Vue.component("common-icon", CommonIcon);
+Vue.component("common-message", CommonMessage);
+Vue.component("common-dropdownMenu", CommonDropdownMenu);
+Vue.component("templates-menu", CommonTemplateMenu);
+
+// TODO: Deprecate
+Vue.component("ui-component", Component);
+
+Vue.component("glib-component", Component);
+Vue.component("glib-icon", CommonIcon);
+Vue.component("glib-panels-responsive", ResponsivePanel);
+// Vue.component("glib-templates-menu", CommonTemplateMenu);
+
+import genericMixin from "./components/mixins/generic.js";
+Vue.mixin(genericMixin);
+
+import eventsMixin from "./components/mixins/events.js";
+Vue.mixin(eventsMixin);
+
+import stylesMixin from "./components/mixins/styles.js";
+Vue.mixin(stylesMixin);
+
+import scrollingMixin from "./components/mixins/scrolling.js";
+Vue.mixin(scrollingMixin);
+
+import longClickDirective from "./components/mixins/longClick.js";
+window.longClickInstance = longClickDirective({ delay: 500, interval: 0 });
+Vue.directive("longclick", window.longClickInstance);
+
+// TODO: Deprecate
+import TypeUtils from "./utils/type";
+Vue.use({
+  install: function(Vue, options) {
+    Vue.prototype.$type = {
+      isObject: TypeUtils.isObject,
+      isString: TypeUtils.isString,
+      isNumber: TypeUtils.isNumber,
+      isArray: TypeUtils.isArray,
+
+      ifObject: TypeUtils.ifObject,
+      ifString: TypeUtils.ifString,
+      ifNumber: TypeUtils.ifNumber,
+      ifArray: TypeUtils.ifArray
+    };
+  }
+});
+
+import Utils from "./utils/helper";
+window.Utils = Utils;
+
+import Framework from "./utils/public";
+window.GLib = Framework;
+
+import { settings } from "./utils/settings";
+export { settings };
+
+// TODO: https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
+// Vue.component('async-webpack-example', function (resolve) {
+//   // This special require syntax will instruct Webpack to
+//   // automatically split your built code into bundles which
+//   // are loaded over Ajax requests.
+//   require(['./my-async-component'], resolve)
+// })
+
+import VueGtag from "vue-gtag";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const gtagId = settings.gtagId;
+  if (gtagId) {
+    Vue.use(VueGtag, {
+      config: {
+        id: settings.gtagId,
+        params: {
+          send_page_view: false
+        }
+      }
+    });
+  }
+
+  window.vueApp = {
+    vuetify: new Vuetify({
+      icons: {
+        iconfont: "md"
+      },
+      theme: {
+        themes: Utils.settings.themes
+      },
+      breakpoint: {
+        smAndDown: true
+      }
+    }),
+    page: window.__page,
+    indicator: false,
+    // Rename to isPageStale
+    isStale: false,
+    stateUpdatedAt: null,
+    webSocket: { channels: {}, header: {} },
+    actionCable: { channels: {} },
+    temp: {}
+  };
+  new Vue({
+    el: "#app",
+    vuetify: window.vueApp.vuetify,
+    data: {
+      vueApp: window.vueApp
+    },
+    // data: {
+    //   vuetify: vuetify,
+    //   page: window.__page,
+    //   indicator: false,
+    //   isStale: false,
+    //   webSocket: { channels: {}, header: {}, listWindow: null }
+    // },
+    render: function(createElement) {
+      return createElement(App, { props: { page: this.$data.vueApp.page } });
+    }
+  });
+});
+
+// The above code uses Vue without the compiler, which means you cannot
+// use Vue to target elements in your existing html templates. You would
+// need to always use single file components.
+// To be able to target elements in your existing html/erb templates,
+// comment out the above code and uncomment the below
+// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
+// Then add this markup to your html template:
+//
+// <div id='hello'>
+//   {{message}}
+//   <app></app>
+// </div>
+
+// import Vue from 'vue/dist/vue.esm'
+// import App from '../app.vue'
+//
+// document.addEventListener('DOMContentLoaded', () => {
+//   const app = new Vue({
+//     el: '#hello',
+//     data: {
+//       message: "Can you say hello?"
+//     },
+//     components: { App }
+//   })
+// })

package/keys.js

@@ -0,0 +1,12 @@
+// See https://stackoverflow.com/questions/32647215/declaring-static-constants-in-es6-classes
+// const csrfToken = "__csrfToken";
+
+// See https://stackoverflow.com/questions/28784375/nested-es6-classes
+export default class Keys {
+}
+
+Keys.Db = class {
+  // static get csrfToken() {
+  //   return csrfToken;
+  // }
+}