glib-web 3.27.2 → 3.28.0

package/action.js

@@ -12,6 +12,7 @@ import ActionsDialogsAlert from "./actions/dialogs/alert";
 import ActionsDialogsShow from "./actions/dialogs/show";
 import ActionsDialogsOpen from "./actions/dialogs/open";
 import ActionsDialogsClose from "./actions/dialogs/close";
+import ActionsDialogsCloseAll from './actions/dialogs/closeAll';
 import ActionsDialogsReload from "./actions/dialogs/reload";
 import ActionsDialogsOptions from "./actions/dialogs/options";
 import ActionsDialogsNotification from "./actions/dialogs/notification";
@@ -25,6 +26,7 @@ import ActionsSheetsSelect from "./actions/sheets/select";
 
 import ActionsWindowsClose from "./actions/windows/close";
 import ActionsWindowsCloseAll from "./actions/windows/closeAll";
+import ActionsWindowsCloseAllWithOpen from "./actions/windows/closeAllWithOpen";
 import ActionsWindowsOpen from "./actions/windows/open";
 import ActionsWindowsOpenWeb from "./actions/windows/openWeb";
 import ActionsWindowsReload from "./actions/windows/reload";
@@ -98,6 +100,7 @@ const actions = {
   "dialogs/show": ActionsDialogsShow,
   "dialogs/open": ActionsDialogsOpen,
   "dialogs/close": ActionsDialogsClose,
+  "dialogs/closeAll": ActionsDialogsCloseAll,
   "dialogs/reload": ActionsDialogsReload,
   "dialogs/options": ActionsDialogsOptions,
   "dialogs/notification": ActionsDialogsNotification,
@@ -111,6 +114,7 @@ const actions = {
 
   "windows/close": ActionsWindowsClose,
   "windows/closeAll": ActionsWindowsCloseAll,
+  "windows/closeAllWithOpen": ActionsWindowsCloseAllWithOpen,
   "windows/open": ActionsWindowsOpen,
   "windows/openWeb": ActionsWindowsOpenWeb,
   "windows/reload": ActionsWindowsReload,

package/actions/dialogs/closeAll.js

@@ -0,0 +1,18 @@
+import { nextTick } from "vue";
+import { closeAllDialog } from "../../store";
+import Action from "../../action";
+
+export default class {
+  execute(spec, component) {
+    closeAllDialog();
+
+    const { onClose } = spec;
+
+    if (onClose) {
+      nextTick(() => {
+        Action.execute(onClose, component);
+      });
+    }
+
+  }
+}

package/actions/logics/set.js

@@ -1,22 +1,23 @@
 import jsonLogic from 'json-logic-js';
+import { fieldModels } from "../../components/composable/conditional";
 
-const subscript = function(a, b) {
+const subscript = function (a, b) {
   if (a) {
     if (b) { // This is expected when the dependent field doesn't have a value
       return a[b];
     } else {
-      console.info('Null subscript')
+      console.info('Null subscript');
     }
   } else {
-    console.error('Left hand operator not found')
+    console.error('Left hand operator not found');
   }
 };
 jsonLogic.add_operation("[]", subscript);
 
 // Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing
-const nullishCoalescing = function(a, b) {
+const nullishCoalescing = function (a, b) {
   return a ?? b;
-}
+};
 jsonLogic.add_operation("??", nullishCoalescing);
 
 export default class {
@@ -28,9 +29,9 @@ export default class {
     }
 
     Utils.type.ifObject(spec.conditionalData, (properties) => {
-      const data = {}
+      const data = {};
       for (const key in properties) {
-        data[key] = jsonLogic.apply(properties[key], spec.variables);
+        data[key] = jsonLogic.apply(properties[key], spec.variables || fieldModels);
       }
       targetComponent.action_merge(data);
     });

package/actions/windows/closeAllWithOpen.js

@@ -0,0 +1,18 @@
+import Action from "../../action";
+
+export default class {
+  execute(properties, component) {
+    Utils.history.destroy();
+
+    // Don't use nextTick so that there is no visible flicker.
+    Utils.http.load(properties, component, true, true);
+
+    // const { url, onOpen } = properties;
+    // Action.execute({ action: 'windows/open', url }, component);
+
+    const { onOpen } = properties;
+    if (onOpen) {
+      Action.execute(onOpen, component);
+    }
+  }
+}

package/actions/windows/closeWithOpen.js

@@ -2,7 +2,7 @@ export default class {
   execute(properties, component) {
     Utils.history.backWithoutRender()
 
-    // Open right away so there is no visible flicker.
-    Utils.http.load(properties, component, true);
+    // Don't use nextTick so that there is no visible flicker.
+    Utils.http.load(properties, component, true, true);
   }
 }

package/components/component.vue

@@ -73,6 +73,7 @@ const RichTextField = defineAsyncComponent(() => import("./fields/richText.vue")
 // import NewRichTextField from "./fields/newRichText.vue";
 const FileField = defineAsyncComponent(() => import("./fields/file.vue"));
 const MultiUploadField = defineAsyncComponent(() => import("./fields/multiUpload.vue"));
+import SignField from "./fields/sign.vue";
 import AutocompleteField from "./fields/autocomplete.vue";
 import SelectField from "./fields/select.vue";
 import TimeZoneField from "./fields/timeZone.vue";
@@ -168,6 +169,7 @@ export default {
     // "fields-newRichText": NewRichTextField,
     "fields-file": FileField,
     "fields-multiUpload": MultiUploadField,
+    "fields-sign": SignField,
     "fields-autocomplete": AutocompleteField,
     "fields-select": SelectField,
     "fields-timeZone": TimeZoneField,

package/components/composable/alert.js

@@ -0,0 +1,15 @@
+import Action from '../../action';
+
+export function showError(options) {
+  let { body, button, styleClasses } = options;
+  styleClasses ||= ['error', 'outlined'];
+  Action.execute(
+    {
+      action: 'snackbars/select',
+      message: body,
+      styleClasses,
+      buttons: [{ text: button }]
+    },
+    {}
+  );
+}

package/components/composable/dropable.js

@@ -103,6 +103,7 @@ function setBusyWhenUploading({ files }) {
   });
 }
 
+// Deprecated, use alert.js
 const showError = (options) => {
   const { body, button } = options;
   Action.execute(
@@ -139,7 +140,13 @@ function uploadFiles({ droppedFiles, files, spec, container }) {
 function uploadOneFile({ files, key, spec, container, onAfterUploaded }) {
   const { directUploadUrl, accepts } = spec;
   let responseMessages = spec.responseMessages || {};
-  const uploader = new Uploader(files.value[key].el, directUploadUrl, files.value[key].progress);
+  const uploader = new Uploader(
+    files.value[key].el,
+    directUploadUrl,
+    files.value[key].progress,
+    spec.storagePrefix,
+    spec.metadata
+  );
 
   // track progress
   uploader.directUploadWillStoreFileWithXHR = (request) => {

package/components/composable/validation.js

@@ -0,0 +1,21 @@
+export function validationRules(validation) {
+  var augmentedRules = [];
+  Utils.type.ifObject(validation, val => {
+    Utils.type.ifObject(val.required, spec => {
+      augmentedRules = augmentedRules.concat([
+        v => (v ? true : spec.message)
+      ]);
+    });
+    Utils.type.ifObject(val.format, spec => {
+      augmentedRules = augmentedRules.concat([
+        v => {
+          if (v && !v.toString().match(spec.regex)) {
+            return spec.message;
+          }
+          return true;
+        }
+      ]);
+    });
+  });
+  return augmentedRules;
+}

package/components/fields/file.vue

@@ -103,7 +103,9 @@ export default {
       const upload = new Uploader(
         file,
         this.spec.directUploadUrl,
-        this.progress
+        this.progress,
+        this.spec.storagePrefix,
+        this.spec.metadata
       );
 
       const input = this.inputElement;

package/components/fields/sign.vue

@@ -0,0 +1,132 @@
+<template>
+  <div :class="$classes()" :style="$styles()">
+    <div class="glib-canvas-container">
+      <canvas style="width: 100%; height: 100%" @mousedown="handleDrawStart" @mousemove="handleDrawing"
+        @mouseup="handleDrawEnd" @touchstart="handleDrawStart" @touchmove="handleDrawing" @touchend="handleDrawEnd"
+        ref="canvas"></canvas>
+      <div class="action" v-show="!pen.sign && touched">
+        <v-icon color="success" class="bg-white" icon="check_circle" @click="upload()"></v-icon>
+        <v-icon color="error" class="bg-white" icon="cancel" @click="clear()"></v-icon>
+      </div>
+      <v-chip v-show="signedId" class="status" color="success" size="x-small">Saved</v-chip>
+      <input type="hidden" :name="fieldName" :value="signedId" :disabled="inputDisabled" />
+      <v-input :model-value="signedId" :rules="rules"></v-input>
+    </div>
+
+  </div>
+</template>
+
+<style>
+.glib-canvas-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  border: 2px solid #9ca3af;
+}
+
+.glib-canvas-container .action {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  right: 0;
+  gap: 2px;
+}
+
+.glib-canvas-container .status {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 4px;
+}
+</style>
+
+<script setup>
+import { ref, computed, defineProps } from "vue";
+import * as uploader from "../composable/dropable";
+import { validationRules } from "../composable/validation";
+
+const { makeKey, Item } = uploader.useDropableUtils();
+const props = defineProps(['spec']);
+
+const rules = validationRules(props.spec.validation);
+
+const canvas = ref(null);
+const context = computed(() => {
+  if (!canvas.value) return;
+
+  return canvas.value.getContext('2d');
+});
+const pen = ref({ sign: false, prevX: null, prevY: null });
+const touched = computed(() => pen.value.prevX && pen.value.prevY);
+
+const files = ref({});
+const signedId = ref(undefined);
+
+uploader.setBusyWhenUploading({ files });
+
+function clear() {
+  context.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
+  signedId.value = null;
+}
+
+function upload() {
+  files.value = {};
+  canvas.value.toBlob((blob) => {
+    const key = makeKey();
+    const file = new File([blob], 'sign.png');
+    files.value[key] = new Item({ el: file, status: 'pending' });
+
+    uploader.uploadOneFile({ files, key, spec: props.spec, onAfterUploaded: (file) => signedId.value = file.signedId });
+  });
+}
+
+function penSource(e) {
+  let source = {};
+  const touch = e.touches ? e.touches[0] : null;
+  if (touch) {
+    const canvasPos = e.target.getBoundingClientRect();
+    const posX = touch.clientX - canvasPos.x;
+    const posY = touch.clientY - canvasPos.y;
+    source = { posX, posY };
+  } else {
+    source = { posX: e.offsetX, posY: e.offsetY };
+  }
+
+  return source;
+}
+
+function handleDrawing(e) {
+  if (!pen.value.sign) return;
+
+  const source = penSource(e);
+  const { prevX, prevY } = pen.value;
+
+  context.value.beginPath();
+  context.value.moveTo(prevX, prevY);
+  context.value.lineTo(source.posX, source.posY);
+  context.value.stroke();
+
+  pen.value.prevX = source.posX;
+  pen.value.prevY = source.posY;
+}
+
+function handleDrawEnd(e) {
+  pen.value.sign = false;
+  context.value.closePath();
+}
+
+function handleDrawStart(e) {
+  const source = penSource(e);
+  pen.value = {
+    sign: true,
+    prevX: source.posX,
+    prevY: source.posY
+  };
+  context.value.lineWidth = 2;
+  context.value.fillRect(source.posX, source.posY, 2, 2);
+}
+
+</script>

package/components/tabBar.vue

@@ -1,15 +1,13 @@
 <template>
   <div :style="'width: 100%'" :class="$classes()">
-    <v-tabs v-model="tab" :bg-color="spec.backgroundColor || 'white'" slider-color="primary" color="primary" show-arrows
+    <v-tabs class="bordered-tab" v-model="tab" :bg-color="spec.backgroundColor || 'white'" color="primary" show-arrows
       :height="spec.height || 60" :grow="$classes().includes('no-grow') ? false : true">
-      <v-tab v-for="(item, index) in spec.buttons" @click="handleClick(index)" :key="index" height="100%"
-        :disabled="item.disabled" :value="index">
+      <v-tab class="bordered-tab" v-for="(item, index) in spec.buttons" @click="handleClick(index)" :key="index" height="100%"
+      :disabled="item.disabled" :value="index">
         <common-badge :spec="item">
           <div class="tab-content">
-            <common-icon :class="index == spec.activeIndex ? 'text-primary' : null" :spec="item.icon"
-              v-if="item.icon" />
-            <span :style="{ marginLeft: '2px' }" :class="index == spec.activeIndex ? 'text-primary' : null">{{ item.text
-              }}</span>
+            <common-icon :class="index == spec.activeIndex ? 'text-primary' : null" :spec="item.icon" v-if="item.icon" />
+            <span :style="{ marginLeft: '2px' }" :class="index == spec.activeIndex ? 'text-primary' : null">{{ item.text }}</span>
           </div>
         </common-badge>
       </v-tab>
@@ -50,7 +48,6 @@ export default {
       this.$nextTick(function () {
         const activeTab = this.buttons[index];
         const onClick = activeTab?.onClick;
-
         if (onClick) {
           Action.execute(onClick, this);
         }
@@ -71,6 +68,7 @@ export default {
   }
 };
 </script>
+
 <style lang="scss" scoped>
 .v-tab .v-badge span {
   // Make sure tab label is middle aligned.
@@ -89,4 +87,19 @@ export default {
   display: flex;
   padding: 5px;
 }
+
+//Need to use :deep in order to make the slider work
+.bordered-tab {
+  :deep(.v-tab__slider) {
+    opacity: 1;
+    color: #E6E6E6;
+  }
+}
+
+.bordered-tab { 
+  :deep(.v-tab--selected .v-tab__slider) {
+    opacity: 1;
+    color: #0A2A9E;
+  }
+}
 </style>

package/components/treeView.vue

@@ -43,13 +43,14 @@
   align-items: center;
   flex-wrap: nowrap;
   padding: 12px 24px;
-  margin-bottom: 8px;
   cursor: pointer;
 
   .label {
     display: inline-flex;
     align-items: center;
     gap: 12px;
+    font-weight: 700;
+    color: #47495F
   }
 }
 
@@ -60,10 +61,6 @@
   background-color: #47495F0D;
 }
 
-.gtreeview .parent.active label {
-  font-weight: 700;
-}
-
 .gtreeview .child.active,
 .gtreeview .child:hover,
 .gtreeview .child.hover {
@@ -77,7 +74,7 @@
   flex-wrap: nowrap;
   gap: 12px;
   align-items: center;
-  margin-bottom: 2px;
+  margin-top: 4px;
   cursor: pointer;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "3.27.2",
+  "version": "3.28.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/utils/history.js

@@ -51,7 +51,6 @@ export default class {
     let skipOnce = false;
     window.onpopstate = event => {
       if (skipRendering) {
-        skipRendering = false
         return false;
       }
 
@@ -110,14 +109,18 @@ export default class {
   static backWithoutRender() {
     skipRendering = true
     this.back()
+    skipRendering = false
   }
 
   static destroy() {
     if (this.navigationCount <= 0) return false;
 
-    window.onpopstate = () => { };
+    // window.onpopstate = () => { };
+    skipRendering = true
     window.history.go(-this.navigationCount);
-    this.restoreOnBackOrForward();
+    skipRendering = false
+    // this.restoreOnBackOrForward();
+    this.navigationCount = 0
 
     return true;
   }

package/utils/http.js

@@ -59,7 +59,8 @@ export default class {
     }
   }
 
-  static load(properties, component, windowMode) {
+  // Set `forcePushHistory` when it is important to clear the forward history.
+  static load(properties, component, windowMode, forcePushHistory) {
     const urlString = properties["url"];
     let url;
     try {
@@ -81,7 +82,8 @@ export default class {
 
       Utils.http.execute(properties, "GET", component, (data, response) => {
         const pushHistory = windowMode ? true : !Utils.type.isObject(dialogs.last());
-        if (htmlUrl !== currentUrl && pushHistory) {
+        // TODO: Check if it is okay to remove this `if` statement so we always push even if it's the same URL.
+        if (forcePushHistory || (htmlUrl !== currentUrl && pushHistory)) {
           const redirectUrl = Utils.url.htmlUrl(response.url);
           Utils.history.pushPage(data, redirectUrl);
         }
@@ -143,6 +145,9 @@ export default class {
     };
 
     Utils.http.execute(data, "GET", component, (page, response) => {
+      // The execution goes in the following order: onResponse, page render, onLoad
+      GLib.action.execute(page.onResponse, component);
+
       Utils.http.forceComponentUpdate(() => {
         vueApp.page = page;
         const redirectUrl = Utils.url.htmlUrl(response.url);

package/utils/uploader.js

@@ -1,15 +1,79 @@
-import { DirectUpload } from "@rails/activestorage";
+import { DirectUpload } from "@rails/activestorage/src/direct_upload";
+import { BlobRecord } from "@rails/activestorage/src/blob_record";
+import { FileChecksum } from "@rails/activestorage/src/file_checksum";
+import { BlobUpload } from "@rails/activestorage/src/blob_upload";
 import Type from "../utils/type";
 import mimeType from "../utils/mime_type";
+import { showError } from "../components/composable/alert";
 
 const MB_SIZE = 1000;
 
+function notify(object, methodName, ...messages) {
+  if (object && typeof object[methodName] == "function") {
+    return object[methodName](...messages);
+  }
+}
+
+class GlibBlobRecord extends BlobRecord {
+  constructor(file, checksum, url, customHeaders = {}, prefix = '', metadata = {}) {
+    super(file, checksum, url, customHeaders);
+
+    this.attributes = Object.assign(this.attributes, { prefix }, { metadata });
+  }
+}
+
+class GlibDirectUpload extends DirectUpload {
+  constructor(file, url, delegate, customHeaders = {}, prefix = '', metadata = {}) {
+    super(file, url, delegate, customHeaders);
+    this.prefix = prefix;
+    this.metadata = { custom: metadata };
+  }
+
+  create(callback) {
+    FileChecksum.create(this.file, (error, checksum) => {
+      if (error) {
+        callback(error);
+        return;
+      }
+
+      const blob = new GlibBlobRecord(this.file, checksum, this.url, this.customHeaders, this.prefix, this.metadata);
+      notify(this.delegate, "directUploadWillCreateBlobWithXHR", blob.xhr);
+
+      blob.create(error => {
+        if (error) {
+          callback(error);
+        } else {
+          const upload = new BlobUpload(blob);
+          
+          // check if there is prefix
+
+          const { url } = blob.directUploadData;
+          if (this.prefix && !url.includes(this.prefix)) {
+            showError({ body: 'Something went wrong', button: 'Dismiss' });
+            console.error('prefix not match');
+            return;
+          }
+
+          notify(this.delegate, "directUploadWillStoreFileWithXHR", upload.xhr);
+          upload.create(error => {
+            if (error) {
+              callback(error);
+            } else {
+              callback(null, blob.toJSON());
+            }
+          });
+        }
+      });
+    });
+  }
+}
+
 export default class Uploader {
-  constructor(file, url, progress) {
+  constructor(file, url, progress, prefix, metadata) {
     this.file = file;
     this.url = url;
     this.progress = progress;
-    this.upload = new DirectUpload(this.file, this.url, this);
+    this.upload = new GlibDirectUpload(this.file, this.url, this, {}, prefix, metadata);
   }
 
   start(callback) {