glib-web 4.4.0 → 4.5.0

package/action.js

@@ -66,7 +66,6 @@ import ActionsFieldsFocus from "./actions/fields/focus";
 import ActionsFieldsBlur from "./actions/fields/blur";
 import ActionsFieldsGetDynamicGroupEntryValues from "./actions/fields/getDynamicGroupEntryValues";
 
-import ActionComponentsUpdate from "./actions/components/update";
 import ActionComponentsFind from "./actions/components/find";
 import ActionComponentsFindClosest from "./actions/components/findClosest";
 import ActionComponentsReplace from "./actions/components/replace";
@@ -84,6 +83,8 @@ import ActionBottomBannersClose from "./actions/bottom_banners/close";
 import ActionGlobalStatesWatch from "./actions/global_states/watch";
 import ActionGlobalStatesSet from "./actions/global_states/set";
 
+import ActionFilesUpload from "./actions/files/upload";
+
 import { dialogs, jsonView, vueApp } from "./store";
 
 const actions = {
@@ -152,7 +153,6 @@ const actions = {
   "fields/blur": ActionsFieldsBlur,
   "fields/getDynamicGroupEntryValues": ActionsFieldsGetDynamicGroupEntryValues,
 
-  "components/update": ActionComponentsUpdate,
   "components/find": ActionComponentsFind,
   "components/findClosest": ActionComponentsFindClosest,
   "components/replace": ActionComponentsReplace,
@@ -168,7 +168,9 @@ const actions = {
   "bottomBanners/close": ActionBottomBannersClose,
 
   "globalStates/watch": ActionGlobalStatesWatch,
-  "globalStates/set": ActionGlobalStatesSet
+  "globalStates/set": ActionGlobalStatesSet,
+
+  "files/upload": ActionFilesUpload,
 };
 
 const customActions = {};

package/actions/components/find.js

@@ -3,6 +3,12 @@ import Action from "../../action";
 export default class {
   execute(spec, component) {
     const target = GLib.component.findById(spec.targetId);
+
+    if (!target) {
+      console.warn("Component ID not found", spec.targetId);
+      return;
+    }
+
     Action.execute(spec.onFind, target);
   }
 }

package/actions/components/replace.js

@@ -3,10 +3,11 @@ import Action from "../../action";
 // Experimental. Can this be merged with `components_set` ?
 export default class {
   execute(spec, component) {
-    var target = component;
-    const targetId = spec.targetId;
-    if (targetId) {
-      target = GLib.component.findById(targetId);
+    let target = GLib.component.findById(spec.targetId);
+
+    if (!target) {
+      console.warn("Component ID not found", spec.targetId);
+      return;
     }
 
     target.action_merge(spec.newView);

package/actions/components/replaceChildren.js

@@ -4,11 +4,15 @@ import Action from "../../action";
 // Experimental
 export default class {
   execute(spec, component) {
-    const target = GLib.component.findById(spec.targetId) || component;
-    if (target) {
-      Object.assign(target.spec.childViews, spec.childViews);
+    const target = GLib.component.findById(spec.targetId);
+
+    if (!target) {
+      console.warn("Component ID not found", spec.targetId);
+      return;
     }
 
+    Object.assign(target.spec.childViews, spec.childViews);
+
     nextTick(() => {
       Action.execute(spec.onReplace, target);
     });

package/actions/components/set.js

@@ -1,15 +1,15 @@
 
 export default class {
   execute(spec, component) {
-    let targetComponent = component;
+    let targetComponent = GLib.component.findById(spec.targetId);
 
-    if (spec.targetId) {
-      targetComponent = GLib.component.findById(spec.targetId);
+    if (!targetComponent) {
+      console.warn("Component ID not found", spec.targetId);
+      return;
     }
 
     Utils.type.ifObject(spec.data, (data) => {
       targetComponent.action_merge(data);
-
     });
 
     GLib.action.execute(spec.onSet, targetComponent);

package/actions/fields/focus.js

@@ -3,10 +3,11 @@ import Action from "../../action";
 
 export default class {
   execute(spec, component) {
-    let targetComponent = component;
+    let targetComponent = GLib.component.findById(spec.targetId);
 
-    if (spec.targetId) {
-      targetComponent = GLib.component.findById(spec.targetId);
+    if (!targetComponent) {
+      console.warn("Component ID not found", spec.targetId);
+      return;
     }
 
     targetComponent.action_focus();

package/actions/fields/getDynamicGroupEntryValues.js

@@ -3,13 +3,13 @@ export default class {
     const dynamicGroupEntry = component.$closest("fields/internalDynamicGroupEntry");
     if (dynamicGroupEntry) {
       const values = dynamicGroupEntry.$values(spec.paramNameForFieldName || 'entry');
-      this.executeOnGet(spec, values)
+      this.executeOnGet(spec, values, component)
     } else {
       console.error('Action invoked outside of dynamicGroup')
     }
   }
 
-  executeOnGet(spec, formData) {
+  executeOnGet(spec, formData, component) {
     Utils.type.ifObject(spec.onGet, onGet => {
       const params = {
         // Make sure to pass along the formData from the spec.
@@ -17,7 +17,7 @@ export default class {
       };
 
       const data = Object.assign({}, onGet, params);
-      GLib.action.execute(data, this);
+      GLib.action.execute(data, component);
     });
   }
 }

package/actions/fields/reset.js

@@ -2,7 +2,13 @@ import { nextTick } from "vue";
 
 export default class {
   execute(properties, component) {
-    const target = GLib.component.findById(properties.targetId) || component;
+    const target = GLib.component.findById(properties.targetId);
+
+    if (!target) {
+      console.warn("Component ID not found", properties.targetId);
+      return;
+    }
+
     target.action_resetValue();
 
     nextTick(() => {

package/actions/files/upload.js

@@ -0,0 +1,32 @@
+import { ref, watch } from "vue";
+import { uploadFiles, setBusyWhenUploading } from "../../components/composable/upload";
+import { useFilesState } from "../../components/composable/file";
+import Action from "../../action";
+
+export default class {
+  execute(spec, component, params) {
+    const files = ref({});
+    const droppedFiles = params.files;
+    const container = ref(component.$el);
+    const context = params.data;
+
+    // if drop item is not file
+    if (droppedFiles.length <= 0) {
+      Action.execute(spec.onFinished, {}, { glib: { context } });
+      return;
+    }
+
+    setBusyWhenUploading({ files });
+    // if drop item is file
+    uploadFiles({ droppedFiles, files, spec, container });
+
+    const { uploaded } = useFilesState(files);
+    if (spec.onFinished) {
+      watch(uploaded, (val) => {
+        const signedIds = Object.values(files.value).map((f) => f.signedId);
+        const obj = Object.assign({}, { glib: { signedIds, context } });
+        if (val) Action.execute(spec.onFinished, {}, obj);
+      });
+    }
+  }
+}

package/actions/http/modifyFormData.js

@@ -0,0 +1,7 @@
+
+export default function (properties, params) {
+  if (params) {
+    properties.formData ||= {};
+    Object.assign(properties.formData, params);
+  }
+}

package/actions/http/patch.js

@@ -1,5 +1,9 @@
+import modifyFormData from "./modifyFormData";
+
 export default class {
-  execute(properties, controller) {
+  execute(properties, controller, params) {
+    modifyFormData(properties, params);
+
     GLib.http.execute(properties, "PATCH", controller, response =>
       GLib.action.handleResponse(response, controller)
     );

package/actions/http/post.js

@@ -1,5 +1,9 @@
+import modifyFormData from "./modifyFormData";
+
 export default class {
-  execute(properties, controller) {
+  execute(properties, controller, params) {
+    modifyFormData(properties, params);
+
     GLib.http.execute(properties, "POST", controller, response =>
       GLib.action.handleResponse(response, controller)
     );

package/actions/http/put.js

@@ -1,5 +1,9 @@
+import modifyFormData from "./modifyFormData";
+
 export default class {
-  execute(properties, controller) {
+  execute(properties, controller, params) {
+    modifyFormData(properties, params);
+
     GLib.http.execute(properties, "PUT", controller, response =>
       GLib.action.handleResponse(response, controller)
     );

package/actions/logics/set.js

@@ -23,21 +23,39 @@ jsonLogic.add_operation("??", nullishCoalescing);
 
 export default class {
   execute(spec, component) {
-    let targetComponent = component;
+    let targetComponent;
 
-    if (spec.targetId) {
-      targetComponent = GLib.component.findById(spec.targetId);
-    } else if (spec.targetIds) {
-      targetComponent = spec.targetIds.map((id) => GLib.component.findById(id));
+    const dynamicGroupEntry = component.$closest("fields/internalDynamicGroupEntry");
+    const targetIds = spec.targetId ? [spec.targetId] : spec.targetIds;
+    if (targetIds.length > 0) {
+      targetComponent = targetIds.map((id) => {
+        if (dynamicGroupEntry) {
+          id = dynamicGroupEntry.$populateIndexes(id);
+        }
+        return GLib.component.findById(id);
+      });
     }
-    else {
-      console.error(`id not recognized=${spec.targetId}`);
+
+    if (!targetComponent) {
+      console.warn("Component ID not found", spec.targetId);
+      return;
     }
 
+    if (spec.debug) {
+      const targetComponents = Array.isArray(targetComponent) ? targetComponent : [targetComponent];
+      console.log("Evaluating...", targetComponents.map((comp) => comp.viewId));
+    }
     let data = {};
     Utils.type.ifObject(spec.conditionalData, (properties) => {
       for (const key in properties) {
-        data[key] = jsonLogic.apply(properties[key], Object.assign({}, fieldModels, spec.variables));
+        let condition = properties[key];
+        if (dynamicGroupEntry) {
+          condition = dynamicGroupEntry.$populateIndexes(condition);
+        }
+        data[key] = jsonLogic.apply(condition, Object.assign({}, fieldModels, spec.variables));
+        if (spec.debug) {
+          console.log("Result", condition, key, data[key]);
+        }
       }
     });
     Utils.type.ifObject(spec.data, (additionalData) => {
@@ -47,16 +65,16 @@ export default class {
     if (Object.keys(data).length > 0) {
       // Array.isArray(targetComponent) ? targetComponent.forEach((comp) => comp.action_merge(data)) : targetComponent.action_merge(data);
 
-      const targetComponents = Array.isArray(targetComponent) ? targetComponent : [targetComponent]
+      const targetComponents = Array.isArray(targetComponent) ? targetComponent : [targetComponent];
       targetComponents.forEach((comp) => {
-        comp.action_merge(data)
+        comp.action_merge(data);
 
         if (spec.cacheData) {
           Utils.type.ifString(comp.viewId, (viewId) => {
             GLib.component.registerData(viewId, data);
-          })
+          });
         }
-      })
+      });
     }
 
     GLib.action.execute(spec.onSet, targetComponent);

package/actions/runMultiple.js

@@ -3,9 +3,14 @@ export default class {
     return true;
   }
 
-  execute(properties, component) {
-    for (const action of properties.childActions) {
-      GLib.action.execute(action, component);
+  execute(spec, component) {
+    for (const actionSpec of spec.childActions) {
+      const params = {
+        // Make sure to pass along the formData from the spec.
+        formData: spec.formData
+      }
+      const properties = Object.assign({}, actionSpec, params);
+      GLib.action.execute(properties, component);
     }
   }
 }

package/components/component.vue

@@ -111,6 +111,7 @@ import WebPanel from "./panels/web.vue";
 import GridPanel from "./panels/grid.vue";
 import TimelinePanel from "./panels/timeline.vue";
 import AssociationPanel from "./panels/association.vue";
+import TreePanel from "./panels/tree.vue";
 
 import MultimediaVideo from "./multimedia/video.vue";
 
@@ -205,6 +206,7 @@ export default {
     "panels-grid": GridPanel,
     "panels-timeline": TimelinePanel,
     "panels-association": AssociationPanel,
+    "panels-tree": TreePanel,
 
     "multimedia-video": MultimediaVideo,
 

package/components/composable/dirtyState.js

@@ -11,13 +11,15 @@ export function useDirtyState() {
     return ctx().isFormDirty && !ctx().isFormSubmitted && !confirm(prompt);
   };
 
-  const clearDirtyState = () => {
-    ctx().isFormDirty = false;
+  const clearDirtyState = (context) => {
+    const ctx = context || ctx;
+    ctx.isFormDirty = false;
   };
 
-  const setDirty = () => ctx().isFormDirty = true;
+  const setDirty = (context) => (context || ctx()).isFormDirty = true;
 
-  const updateDirtyState = () => {
+  const updateDirtyState = (context) => {
+    const ctx = context || ctx;
     const clean = Object.keys(dirtySpecs).reduce((prev, curr) => {
       if (dirtySpecs[curr].disable) return prev;
       const initValue = dirtySpecs[curr].initValue || '';
@@ -25,7 +27,7 @@ export function useDirtyState() {
       return prev && (currValue.toString() == initValue.toString() || !currValue.toString());
     }, true);
 
-    clean ? clearDirtyState() : setDirty();
+    clean ? clearDirtyState(ctx) : setDirty(ctx);
   };
 
   return { clearDirtyState, setDirty, isDirty, updateDirtyState };

package/components/composable/file.js

@@ -58,7 +58,7 @@ function useFileUtils() {
 function useFilesState(files) {
   const uploading = computed(() => {
     if (Object.values(files.value).filter((v) => v.status != null).length > 0) {
-      Object.values(files.value).reduce((prev, curr) => {
+      return Object.values(files.value).reduce((prev, curr) => {
         if (curr.status == null) return prev;
         return prev || curr.status == 'pending';
       }, false);

package/components/composable/tree.js

@@ -0,0 +1,66 @@
+import { inject, ref, watch } from "vue";
+import Action from "../../action";
+
+function useGlibTreeNode(props) {
+  const node = ref(props.node);
+  const dropBox = inject('dropBox');
+  const selected = inject('selected');
+  const currTreeNode = inject('currTreeNode');
+
+  watch(selected, (val) => {
+    selectIfIdMatch(val);
+  }, { immediate: true });
+
+  function selectIfIdMatch(value) {
+    node.value.selected = false;
+    if (!value) return;
+    if (node.value.id == value) {
+      node.value.expand = true;
+      node.value.selected = true;
+      let curr = node.value.parent;
+      while (curr != null) {
+        curr.expand = true;
+        curr = curr.parent;
+      }
+    }
+  }
+
+  function handleClick(node) {
+    Action.execute(node.onClick, {});
+  }
+
+  function handleDragOver(e, node) {
+    node.selected = true;
+    node.expand = true;
+    currTreeNode.value = node;
+    e.preventDefault();
+  }
+
+  function handleDragLeave(e, node) {
+    node.selected = false;
+    currTreeNode.value = null;
+  }
+
+  function handleDrop(e, node) {
+    node.selected = false;
+    currTreeNode.value = null;
+    e.preventDefault();
+
+    dropBox.value = {};
+
+    const data = {};
+    const files = e.dataTransfer.files;
+
+    if (files.length <= 0) {
+      const dragData = JSON.parse(e.dataTransfer.getData('text'));
+      Object.assign(data, dragData, node.dropData);
+    } else {
+      Object.assign(data, node.dropData);
+    }
+    dropBox.value = { data, files };
+  }
+
+  return { node, handleClick, handleDragOver, handleDragLeave, handleDrop };
+}
+
+export { useGlibTreeNode };

package/components/composable/upload.js

@@ -2,7 +2,6 @@ import { watch } from 'vue';
 import { triggerOnChange } from "./form";
 import Uploader from "../../utils/glibDirectUpload";
 import { vueApp } from "../../store";
-import { showError } from "./alert";
 import { useFilesState, useFileUtils } from "./file";
 
 function submitOnAllUploaded({ url, formData, files }) {
@@ -70,6 +69,7 @@ function uploadOneFile({ files, key, spec, container, onAfterUploaded }) {
 
   // validate per file, skip if invalid
   if (!uploader.validateFile({ accepts: accepts })) {
+    console.log(accepts)
     delete files.value[key];
     return;
   }

package/components/fields/check/_featured.vue

@@ -0,0 +1,96 @@
+<template>
+  <div :class="checked ? 'thumbnail-checked' : 'thumbnail-check'" @click="handleClick">
+    <v-checkbox :color="gcolor" v-model="fieldModel" :name="fieldName" :readonly="spec.readOnly"
+      :disabled="inputDisabled" :true-icon="spec.onIcon" :false-icon="spec.offIcon" :value="spec.value"
+      :true-value="spec.checkValue" :false-value="uncheckValue" hide-details @change="$emit('change')"
+      :rules="$validation()" :multiple="false">
+      <div class="thumbnail-content-wrapper">
+        <div class="thumbnail-check-img">
+          <img :src="spec.image.url" alt="" :width="spec.image.width" :height="spec.image.height" />
+        </div>
+        <div :class="checked ? 'thumbnail-check-label-checked' : 'thumbnail-check-label'">
+          {{ fieldModel ? spec.onLabel || spec.label : spec.label }}
+        </div>
+      </div>
+    </v-checkbox>
+  </div>
+</template>
+
+<script>
+export default {
+  emits: ['oncheck'],
+  props: {
+    spec: { type: Object, required: true },
+    checkValue: { type: String }
+  },
+  data() {
+    return {
+      checked: this.spec.value ? true : false
+    };
+  },
+  methods: {
+    handleClick() {
+      this.checked = !this.checked
+    },
+  }
+};
+</script>
+
+<style scoped>
+.thumbnail-check-img img {
+  margin: auto;
+}
+
+.thumbnail-check-label {
+  font-size: 22px;
+  color: black;
+}
+
+.thumbnail-check-label-checked {
+  font-size: 22px;
+  font-weight: 700;
+  color: #0A2A9E;
+}
+
+.thumbnail-check ::v-deep .v-selection-control__wrapper {
+  width: 240px;
+  height: 254px;
+  position: relative;
+  border: 1px solid #E6E6E6;
+  border-radius: 24px;
+
+  .v-selection-control__input {
+    border-radius: 0%;
+    position: absolute;
+    width: 240px;
+    height: 254px;
+  }
+
+  .v-selection-control__input i {
+    display: none;
+  }
+}
+
+.thumbnail-checked ::v-deep .v-selection-control__wrapper {
+  width: 240px;
+  height: 254px;
+  position: relative;
+  border: 2px solid #0A2A9E;
+  border-radius: 24px;
+
+  .v-selection-control__input {
+    border-radius: 0%;
+    position: absolute;
+    width: 240px;
+    height: 254px;
+  }
+
+  .v-selection-control__input i {
+    display: none;
+  }
+}
+
+.thumbnail-check ::v-deep .v-selection-control__input::before {
+  background-color: transparent
+}
+</style>

package/components/fields/check/_thumbnail.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="checkbox-container">
+    <v-checkbox :color="gcolor" v-model="fieldModel" :name="fieldName" :readonly="spec.readOnly"
+      :disabled="inputDisabled" :true-icon="spec.onIcon" :false-icon="spec.offIcon" :value="spec.value"
+      :true-value="spec.checkValue" :false-value="uncheckValue" hide-details @change="$emit('change')"
+      :rules="$validation()" :multiple="false"></v-checkbox>
+    <div class="checkbox-icon">
+      <img :src="spec.image.url" :width="spec.image.width" :height="spec.image.height" alt="img" />
+    </div>
+    <p>{{ fieldModel ? spec.onLabel || spec.label : spec.label }} </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true },
+  },
+};
+</script>
+
+<style scoped>
+.checkbox-container {
+  padding-left: 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.checkbox-container ::v-deep .v-selection-control__wrapper {
+  width: 0;
+  height: 0;
+}
+
+.checkbox-icon {
+  margin-left: 10px;
+}
+</style>

package/components/fields/check.vue

@@ -6,12 +6,26 @@
     <v-checkbox :color="gcolor" v-model="fieldModel" :name="fieldName" :readonly="spec.readOnly"
       :disabled="inputDisabled" :label="fieldModel ? spec.onLabel || spec.label : spec.label" :true-icon="spec.onIcon"
       :false-icon="spec.offIcon" :value="spec.value" :true-value="spec.checkValue" :false-value="uncheckValue"
-      hide-details @change="onChange()" :rules="$validation()" :multiple="false"></v-checkbox>
+      hide-details @change="onChange()" :rules="$validation()" :multiple="false" v-if="!spec.image">
+    </v-checkbox>
+    <thumbnail-check v-if="spec.image && spec.image.template == 'thumbnail'" :spec=this.spec
+      @change="onChange"></thumbnail-check>
+
+    <featured-check v-if="spec.image && spec.image.template == 'featured'" :spec=this.spec
+      @change="onChange"></featured-check>
+
+
   </div>
 </template>
 
 <script>
+import ThumbnailCheck from "../fields/check/_thumbnail.vue";
+import FeaturedCheck from "../fields/check/_featured.vue";
 export default {
+  components: {
+    "thumbnail-check": ThumbnailCheck,
+    "featured-check": FeaturedCheck,
+  },
   emits: ['oncheck'],
   props: {
     spec: { type: Object, required: true }

package/components/fields/file.vue

@@ -28,7 +28,7 @@
     </div>
     <input ref="directUploadFile" style="display: none" type="file" @change="uploadFiles" />
     <v-progress-linear class="mt-1" v-if="showProgress" v-model="progress.value" />
-    <input type="hidden" :name="spec.name" :value="fileValue" :disabled="inputDisabled" />
+    <input type="hidden" :name="fieldName" :value="fileValue" :disabled="inputDisabled" />
   </div>
 </template>
 

package/components/fields/multiUpload.vue

@@ -10,7 +10,7 @@
         <p v-if="props.spec.hint" class="subtitle">{{ props.spec.hint }}</p>
       </div>
 
-      <input v-for="(file, index) in files" type="hidden" :name="props.spec.name" :value="file.signedId"
+      <input v-for="(file, index) in files" type="hidden" :name="fieldName" :value="file.signedId"
         :disabled="inputDisabled" :key="`hidden-${index}`">
     </div>