glib-web 0.5.77

package/nav/appbar.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <nav-drawer
+      v-if="page.leftDrawer"
+      :trigger="drawerTrigger"
+      :permanent="isPermanent"
+      :spec="page.leftDrawer"
+    />
+
+    <v-toolbar :style="style" class="pages-navBar">
+      <v-app-bar-nav-icon
+        v-if="page.leftDrawer && !isPermanent"
+        style="color: inherit;"
+        @click="drawerTrigger = new Date()"
+      ></v-app-bar-nav-icon>
+      <v-progress-circular
+        v-if="$root.vueApp.indicator"
+        indeterminate
+      ></v-progress-circular>
+      <v-toolbar-title v-else>{{ page.title }}</v-toolbar-title>
+      <v-spacer></v-spacer>
+
+      <template v-for="(btn, index) in navBar.rightButtons">
+        <common-dropdownMenu
+          v-if="btn.childButtons"
+          :key="index"
+          :spec="btn"
+          :disabled="$isBusy"
+        />
+        <common-button
+          v-else
+          :key="`right_${index}`"
+          :spec="buttonSpec(btn)"
+          :disabled="$isBusy"
+        />
+      </template>
+
+      <v-btn
+        v-if="viewSourceEnabled()"
+        icon
+        style="color: inherit;"
+        @click="viewSource"
+      >
+        <v-icon>zoom_in</v-icon>
+      </v-btn>
+    </v-toolbar>
+  </div>
+</template>
+
+<script>
+import NavDrawer from "./drawer";
+import Launch from "../utils/launch";
+
+export default {
+  components: {
+    "nav-drawer": NavDrawer
+  },
+  props: {
+    page: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      drawerTrigger: null,
+      navBar: {},
+      on: false
+    };
+  },
+  computed: {
+    style: function() {
+      return Object.assign(this.genericStyles(this.navBar), this.leftPadding);
+    },
+    // We could've used the `app` attribute on `v-toolbar` if it didn't conflict with our header-footer css.
+    leftPadding: function() {
+      switch (this.$vuetify.breakpoint.name) {
+        case "lg":
+        case "xl":
+          return { "padding-left": "270px" };
+        default:
+          return null;
+      }
+    },
+    isPermanent() {
+      return this.leftPadding !== null;
+    }
+  },
+  methods: {
+    $ready() {
+      this.navBar = this.page.navBar || {};
+    },
+    buttonSpec(item) {
+      return Object.assign({}, item, {
+        view: "button-v1",
+        styleClasses: item.text ? ["text"] : ["icon"]
+      });
+    },
+    viewSourceEnabled: function() {
+      // return process.env.NODE_ENV === "development";
+      return false;
+    },
+    viewSource: function() {
+      const properties = { message: this.page };
+      Launch.dialog(Object.assign({}, properties));
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.v-btn.views-button {
+  &.icon {
+    color: inherit;
+  }
+  &.text {
+    color: inherit;
+  }
+}
+</style>

package/nav/content.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-main :style="outerStyle()">
+    <panels-responsive v-if="template == 'fullWidth'" :spec="spec" />
+    <v-col v-else cols="12" md="8" offset-md="2" :style="innerStyle()">
+      <template v-if="spec">
+        <panels-responsive v-if="template == 'flatCentered'" :spec="spec" />
+        <v-card v-else :height="$length(spec.height)">
+          <panels-responsive :spec="spec" />
+        </v-card>
+      </template>
+    </v-col>
+  </v-main>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true },
+    template: { type: String, default: null },
+    fullHeight: { type: Boolean, required: true }
+  },
+  methods: {
+    outerStyle() {
+      if (this.fullHeight) {
+        return { height: "100%" };
+      }
+      return {};
+    },
+    innerStyle() {
+      const style = { padding: "0" };
+      if (this.fullHeight) {
+        return Object.assign(style, { height: "100%" });
+      }
+      return style;
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/nav/dialog.vue

@@ -0,0 +1,127 @@
+<template>
+  <v-dialog
+    v-model="model"
+    width="600"
+    :dark="false"
+    :sm-and-down="false"
+    :persistent="true"
+  >
+    <v-card>
+      <v-card-title v-if="title || showClose" class="headline" primary-title>
+        {{ title }}
+        <v-btn v-if="showClose" text icon class="dialog-close" @click="close">
+          <v-icon>close</v-icon>
+        </v-btn>
+      </v-card-title>
+
+      <div>
+        <div v-if="message" class="dialog-message">
+          <common-message :spec="spec" />
+        </div>
+        <panels-responsive v-if="body" :spec="body" />
+      </div>
+
+      <v-divider></v-divider>
+
+      <v-card-actions v-if="spec.buttons">
+        <v-spacer></v-spacer>
+
+        <v-btn
+          v-for="(button, index) in spec.buttons"
+          :key="index"
+          color="primary"
+          text
+          @click="click(button, $event)"
+        >
+          {{ button.text }}
+        </v-btn>
+
+        <panels-responsive v-if="footer" :spec="footer" />
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import Http from "../utils/http";
+import Action from "../action";
+
+export default {
+  props: {
+    spec: { type: Object, required: true },
+    stack: { type: Array, required: true },
+    vueApp: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      title: null,
+      message: null,
+      body: null,
+      footer: null,
+      model: null,
+      url: this.spec.url,
+      showClose: Utils.type.isString(this.spec.url)
+    };
+  },
+  watch: {
+    model: function(val, oldVal) {
+      if (!val) {
+        this.$destroy();
+      }
+    }
+  },
+  methods: {
+    $ready() {
+      this.$root.vueApp = this.vueApp;
+
+      const spec = this.spec;
+      if (Utils.type.isString(this.url)) {
+        this.message = "Loading...";
+        const url = Utils.url.appendParams(this.url, { _dialog: "v1" });
+        Http.execute({ url: url }, "GET", this, response => {
+          this.title = response.title;
+          this.message = "";
+          this.body = response.body;
+          this.footer = response.footer;
+          this.showClose = false;
+        });
+      } else {
+        this.title = this.spec.title;
+        this.message = this.spec.message;
+        this.body = this.spec.body;
+        Action.execute(spec.onLoad, null, this);
+      }
+
+      this.stack.push(this);
+      this.model = true;
+    },
+    $tearDown() {
+      console.log("Dialog destroyed");
+      this.stack.remove(this);
+    },
+    close() {
+      this.model = false;
+    },
+    click(spec, event) {
+      const onClick = spec["onClick"];
+      this.model = false;
+      Action.execute(onClick, event.target, this);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.dialog-message {
+  padding: 16px 16px 20px 16px;
+  /* white-space: pre-wrap; */
+}
+.dialog-close {
+  right: 16px;
+  top: 12px;
+  position: absolute;
+}
+.v-card__text {
+  padding: 0 !important;
+}
+</style>

package/nav/drawer.vue

@@ -0,0 +1,88 @@
+<template>
+  <!-- <v-navigation-drawer app fixed v-model="state" @input="updateState"> -->
+  <!-- <v-navigation-drawer mini-variant app v-model="state" @input="updateState"> -->
+
+  <v-navigation-drawer
+    v-model="state"
+    app
+    :class="cssClasses"
+    :dark="cssClasses.includes('dark')"
+    :expand-on-hover="cssClasses.includes('mini')"
+    :permanent="cssClasses.includes('permanent')"
+    :style="style"
+    @input="updateState"
+  >
+    <template v-if="spec.header">
+      <!-- <v-toolbar flat> -->
+      <panels-responsive :spec="spec.header" />
+      <!-- </v-toolbar> -->
+      <v-divider></v-divider>
+    </template>
+
+    <v-list dense class="pt-0">
+      <div v-for="(item, index) in spec.rows" :key="index">
+        <v-divider v-if="item.type == 'divider'" />
+        <nav-drawerLabel v-else-if="item.type == 'label'" :spec="item" />
+        <nav-drawerButton v-else :spec="item" />
+        <!-- <nav-drawerButton :spec="item" :state="state" v-else /> -->
+      </div>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script>
+// import UrlUtils from "../utils/url";
+import NavDrawerButton from "./drawerButton";
+import NavDrawerLabel from "./drawerLabel";
+
+export default {
+  components: {
+    "nav-drawerButton": NavDrawerButton,
+    "nav-drawerLabel": NavDrawerLabel
+  },
+  // props: ["spec", "trigger", "permanent"],
+  props: {
+    spec: { type: Object, required: true },
+    trigger: { type: Object, default: null },
+    permanent: { type: Boolean, required: true }
+  },
+  data: function() {
+    return {
+      // Using null as the starting value for its v-model will initialize the drawer as closed on mobile and as open on desktop.
+      // See https://vuetifyjs.com/en/components/navigation-drawers
+      state: null
+    };
+  },
+  computed: {
+    cssClasses() {
+      // To make sure a css class name is assigned to this component
+      this.spec.view = this.spec.view || "pages/leftDrawer";
+      return this.$classes();
+    },
+    style() {
+      // Increase z-index so that the drawer is above the page header.
+      return { zIndex: 11 };
+    }
+  },
+  watch: {
+    trigger: function(val, oldVal) {
+      this.state = !this.state;
+    }
+  },
+  methods: {
+    $ready() {
+      // this.$el.addEventListener('drawers/clickButton', () => { this.updateState(false) }, false)
+      this.$el.addEventListener("drawers/clickButton", () => {
+        if (!this.permanent) {
+          this.updateState(false);
+        }
+      });
+    },
+    updateState(state) {
+      this.state = state;
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/nav/drawerButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-list-item :href="$href(spec)" @click="performAction($event)">
+    <v-list-item-action v-if="spec.icon">
+      <common-icon :spec="spec.icon" />
+    </v-list-item-action>
+
+    <v-list-item-content>
+      <v-list-item-title>{{ spec.text }}</v-list-item-title>
+    </v-list-item-content>
+  </v-list-item>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  methods: {
+    performAction(event) {
+      // this.$el.dispatchEvent(new Event("drawers/clickButton", { bubbles: true }))
+      this.$dispatchEvent("drawers/clickButton", {});
+      this.$onClick(event);
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/nav/drawerLabel.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-list-item>
+    <v-list-item-content>
+      <v-list-item-title>{{ spec.text }}</v-list-item-title>
+    </v-list-item-content>
+  </v-list-item>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped>
+.v-list__tile__title {
+  opacity: 0.6;
+}
+</style>

package/nav/sheet.vue

@@ -0,0 +1,57 @@
+<template>
+  <v-bottom-sheet v-model="model" inset>
+    <v-list>
+      <v-subheader v-if="spec.message">{{ spec.message }}</v-subheader>
+      <template v-for="(button, index) of spec.buttons">
+        <v-list-item
+          :key="index"
+          color="primary"
+          @click="onClick(button, $event)"
+        >
+          <v-list-item-action v-if="button.icon">
+            <common-icon :spec="button.icon" />
+          </v-list-item-action>
+
+          <v-list-item-content>
+            <v-list-item-title>{{ button.text }}</v-list-item-title>
+          </v-list-item-content>
+          <!-- <v-list-item-title>{{ button.text }}</v-list-item-title> -->
+        </v-list-item>
+      </template>
+    </v-list>
+
+    <v-sheet height="60px"></v-sheet>
+  </v-bottom-sheet>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      model: null
+    };
+  },
+  watch: {
+    model: function(val, oldVal) {
+      if (!val) {
+        this.$destroy();
+      }
+    }
+  },
+  methods: {
+    $ready() {
+      this.model = true;
+    },
+    onClick: function(spec, event) {
+      this.model = false;
+
+      Utils.type.ifFunction(spec.onClickFunction, f => f());
+      GLib.action.execute(spec.onClick, event.target, this);
+      // this.$onClick(spec, event.target, this);
+    }
+  }
+};
+</script>

package/nav/snackbar.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-snackbar
+    v-model="show"
+    :top="spec.verticalPosition == 'top'"
+    :bottom="spec.verticalPosition == 'bottom'"
+    :left="spec.horizontalPosition == 'left'"
+    :right="spec.horizontalPosition == 'right'"
+    :color="color"
+    :timeout="spec.timeout"
+  >
+    <common-message :spec="spec" />
+
+    <v-btn
+      v-for="(button, index) in spec.buttons"
+      :key="index"
+      text
+      @click="click(button, $event)"
+    >
+      {{ button.text }}
+    </v-btn>
+
+    <!-- <v-btn
+      flat
+      @click="close"
+    >
+      Close
+    </v-btn> -->
+  </v-snackbar>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true },
+    vueApp: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      show: false,
+      color: null,
+      indicator: false
+    };
+  },
+  watch: {
+    "vueApp.indicator": function(val, oldVal) {
+      if (this.indicator) {
+        this.show = val;
+      }
+    }
+  },
+  methods: {
+    $ready() {
+      const vm = this;
+      this.$type.ifArray(this.spec.styleClasses, val => {
+        ["success", "info", "error", "warning"].forEach(color => {
+          if (val.includes(color)) {
+            vm.color = vm.$vuetify.theme.currentTheme[color];
+          }
+        });
+      });
+    },
+    click: function(spec) {
+      const onClick = spec["onClick"];
+      this.show = false;
+      // Action.execute(onClick, event.target, this);
+      GLib.action.execute(onClick, null, this);
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "glib-web",
+  "version": "0.5.77",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@mdi/font": "^4.5.95",
+    "@rails/actioncable": "^6.0.0",
+    "@rails/activestorage": "^6.0.0-alpha",
+    "awesome-phonenumber": "2.15.0",
+    "chart.js": "^2.8.0",
+    "json-logic-js": "^1.2.2",
+    "marked": "^0.7.0",
+    "phoenix": "^1.5.3",
+    "push.js": "^1.0.12",
+    "sass": "^1.23.6",
+    "sass-loader": "^8.0.0",
+    "vue": "2.6.10",
+    "vue-chartkick": "^0.5.2",
+    "vue-gtag": "^1.1.2",
+    "vue-youtube": "^1.4.0",
+    "vue2-editor": "^2.9.1",
+    "vue2-google-maps": "^0.10.6",
+    "vuedraggable": "^2.24.1",
+    "vuetify": "2.3.9"
+  },
+  "devDependencies": {
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.4.0",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-loader": "^3.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-vue": "^5.2.3",
+    "eslint-plugin-vuetify": "^1.0.0-beta.3",
+    "prettier": "^1.18.2"
+  }
+}

package/settings.json.example

@@ -0,0 +1,21 @@
+{
+  "editor.scrollBeyondLastLine": false,
+  "editor.minimap.enabled": false,
+  "editor.tabSize": 2,
+  "vetur.format.defaultFormatter.js": "vscode-typescript",
+  "vetur.format.defaultFormatter.html": "js-beautify-html",
+  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
+  "vetur.format.defaultFormatterOptions": {
+    "js-beautify-html": {
+      "wrap_attributes": "auto"
+    }
+  },
+  "eslint.validate": [
+    "vue",
+    "html",
+    "javascript"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

package/static/plugins/alignment/alignment.js

@@ -0,0 +1,76 @@
+RedactorX.add('plugin', 'alignment', {
+    translations: {
+        en: {
+            "alignment": {
+                "alignment": "Alignment"
+            }
+        }
+    },
+    defaults: {
+        align: {
+            left: 'align-left',
+            center: 'align-center',
+            right: 'align-right',
+            justify: 'align-justify'
+        }
+    },
+    start: function() {
+        var button = {
+            title: '## alignment.alignment ##',
+            command: 'alignment.popup',
+            blocks: {
+                all: 'editable'
+            }
+        };
+
+        this.app.toolbar.add('alignment', button);
+    },
+    popup: function(params, button) {
+        var segments = {};
+        var obj = this.opts.alignment.align;
+        for (var key in obj) {
+            if (!obj[key]) continue;
+            segments[key] = { name: obj[key], prefix: 'align' };
+        }
+
+        // create
+        this.app.popup.create('alignment', {
+            setter: 'alignment.setAlign',
+            getter: 'alignment.getAlign',
+            form: {
+                "align": {
+                    type: 'segment',
+                    label: '## alignment.alignment ##',
+                    segments: segments
+                }
+            }
+        });
+
+        // open
+        this.app.popup.open({ button: button });
+    },
+    getAlign: function() {
+        var obj = this.opts.alignment.align;
+        if (!obj) return false;
+
+        var instance = this.app.block.get();
+        var $block = instance.getBlock();
+        var value = 'left';
+        for (var key in obj) {
+            if ($block.hasClass(obj[key])) {
+                value = key;
+            }
+        }
+
+        return { 'align': value };
+    },
+    setAlign: function(popup) {
+        this.app.popup.close();
+
+        // get data
+        var data = popup.getData();
+        var instance = this.app.block.get();
+
+        instance.setClassFromObj(this.opts.alignment.align, data.align);
+    }
+});

package/static/plugins/alignment/alignment.min.js

@@ -0,0 +1 @@
+RedactorX.add("plugin","alignment",{translations:{en:{alignment:{alignment:"Alignment"}}},defaults:{align:{left:"align-left",center:"align-center",right:"align-right",justify:"align-justify"}},start:function(){this.app.toolbar.add("alignment",{title:"## alignment.alignment ##",command:"alignment.popup",blocks:{all:"editable"}})},popup:function(t,n){var a={},i=this.opts.alignment.align;for(var e in i)i[e]&&(a[e]={name:i[e],prefix:"align"});this.app.popup.create("alignment",{setter:"alignment.setAlign",getter:"alignment.getAlign",form:{align:{type:"segment",label:"## alignment.alignment ##",segments:a}}}),this.app.popup.open({button:n})},getAlign:function(){var t=this.opts.alignment.align;if(!t)return!1;var n=this.app.block.get().getBlock(),a="left";for(var i in t)n.hasClass(t[i])&&(a=i);return{align:a}},setAlign:function(t){this.app.popup.close();var n=t.getData();this.app.block.get().setClassFromObj(this.opts.alignment.align,n.align)}});