@mixd-id/web-scaffold 0.2.240702 → 0.2.240704

package/src/utils/event-bus.js

@@ -0,0 +1,8 @@
+// eventBus.js
+import mitt from 'mitt'
+
+const emitter = mitt()
+
+export const useEmitter = () => {
+  return emitter
+}

package/src/utils/helpers.js

@@ -3,6 +3,7 @@ const fs = require("fs");
 const { Op } = require('sequelize')
 const axios = require('axios')
 const dayjs = require('dayjs')
+const { camelCase } = require('lodash')
 
 
 const ceil = (num, precision = 0) => {
@@ -140,13 +141,14 @@ const strSlug = (title, separator) => {
   return title.replace(new RegExp('^[' + separator + '\\s]+|[' + separator + '\\s]+$', 'g'),'');
 }
 
-const strVars = (text, vars, opt = { emptyUndefined:true }) => {
-
-  (text.match(/\{.*?(?=\})\}/gi) ?? []).forEach((match) => {
-    const key = match.substring(1, match.length - 1)
-    const value = vars[key] ?? (opt?.emptyUndefined ? '' : `{${key}}`)
-    text = text.replace(match, value)
-  })
+const strVars = (text, vars = {}, opt = { emptyUndefined:true }) => {
+  if(text){
+    (text.match(/\{.*?(?=\})\}/gi) ?? []).forEach((match) => {
+      const key = match.substring(1, match.length - 1)
+      const value = vars[key] ?? (opt?.emptyUndefined ? '' : `{${key}}`)
+      text = text.replace(match, value)
+    })
+  }
 
   return text
 }
@@ -260,7 +262,7 @@ const unflatten = (flatObject) => {
 }
 
 const accessNestedObject = function(obj, path) {
-  if(!obj || typeof path !== 'string') return undefined
+  if(!obj || typeof path !== 'string') return
 
   const keys = path.split('.');
   let nestedObj = obj;
@@ -277,6 +279,43 @@ const accessNestedObject = function(obj, path) {
   return nestedObj;
 }
 
+const accessNestedSequelize = async(obj, path, opt = { defaultValue:'' }) => {
+  if(!obj || typeof path !== 'string') return
+
+  const keys = path.split('.');
+  let value = obj;
+
+  for (let i in keys) {
+    const key = keys[i]
+    const hasNext = i < keys.length - 1
+
+    if(hasNext){
+
+      if(!value[key]){
+        try{
+          value = await value[camelCase(`get-${key}`)]()
+        }
+        catch(e){}
+      }
+      else{
+        value = value[key]
+      }
+
+      if(!value){
+        return
+      }
+    }
+
+    else{
+      value = key in value.dataValues ?
+                value[key] :
+                opt.defaultValue
+    }
+  }
+
+  return value;
+}
+
 const createObjectFromPath = (obj, path, value) => {
   const keys = path.split('.');
 
@@ -524,8 +563,16 @@ const dayTimeRange = (params, value) => {
   })
 }
 
+function capitalize(str) {
+  return (str ?? '')
+    .toString()
+    .split(' ')
+    .map(_ => _.charAt(0).toUpperCase() + _.slice(1).toLowerCase())
+    .join(' ')
+}
 
 module.exports = {
+  capitalize,
   ceil,
   floor,
   ftWildcard,
@@ -544,6 +591,7 @@ module.exports = {
   getPresetSortWhereParams,
   unflatten,
   accessNestedObject,
+  accessNestedSequelize,
   createObjectFromPath,
   generateStylesheet,
   hexToRgb,

package/src/utils/helpers.mjs

@@ -360,7 +360,40 @@ function applyDatasourceReplacer(value, datasource){
   return value
 }
 
+function capitalize(str) {
+  return str.replace(/\b\w/g, function(char) {
+    return char.toUpperCase();
+  });
+}
+
+const round = (num, precision = 0) => {
+  var p = Math.pow(10, precision)
+  var n = (num * p) * (1 + Number.EPSILON)
+  return Math.round(n) / p
+}
+
+let invokeAfterIdleStore = []
+const invokeAfterIdle = (callback, delay = 1300) => {
+  let timeoutId
+
+  return function(){
+    if(invokeAfterIdleStore.includes(callback))
+      return
+
+    invokeAfterIdleStore.push(callback)
+
+    window.clearTimeout(timeoutId)
+    timeoutId = window.setTimeout(() => {
+      callback.apply(this, arguments)
+      invokeAfterIdleStore.splice(invokeAfterIdleStore.indexOf(callback), 1)
+    }, delay)
+  }
+}
+
+
 export {
+  capitalize,
+  round,
   downsizeImage,
   hexToRgb,
   rgbToHex,
@@ -382,7 +415,8 @@ export {
   createFormData,
   unslugAndCapitalize,
   applyDatasourceReplacer,
-  strVars
+  strVars,
+  invokeAfterIdle
 }
 
 function observeInit(){

package/src/utils/preset-selector.js

@@ -925,9 +925,11 @@ const presetToSequelizeList = async(preset = {}, {
   order:initialOrder
 }) => {
 
+  const updatedAtField = model.rawAttributes['updatedAt'] ?? model.rawAttributes['updated_at']
+
   if(!initialOrder){
     initialOrder = [
-      [ 'updatedAt', 'desc' ],
+      ...(updatedAtField ? [[ updatedAtField.fieldName, 'desc' ]] : []),
       [ 'id', 'desc' ],
     ]
   }
@@ -1036,7 +1038,8 @@ const presetToSequelizeList = async(preset = {}, {
         ...replacements,
         ...filterReplacements,
         ...searchReplacements
-      ]
+      ],
+      itemsPerPage
     }
   }
 }

package/src/utils/preset-selector.mjs

@@ -1,3 +1,5 @@
+import md5 from "md5";
+
 const sortsFn = function(a, b, sorts, index){
 
   const sort = sorts[index]
@@ -31,24 +33,31 @@ const pickColumns = function(columns, keys){
   return picked
 }
 
+const getPresetUid = function(extra = ''){
+  return md5('preset-' + new Date().getTime() + extra)
+}
+
 const setupConfig = (config) => {
 
   if(Array.isArray(config.presets)){
     for(let idx in config.presets){
-      if(!Array.isArray(config.presets[idx].columns)){
-        config.presets[idx].columns = []
+      if(!Array.isArray(config.presets[idx].params.columns)){
+        config.presets[idx].params.columns = []
       }
 
-      if(config.presets[idx].columns[0] && typeof config.presets[idx].columns[0] === 'string'){
-        config.presets[idx].columns = pickColumns(config.columns ?? [], config.presets[idx].columns)
+      if(config.presets[idx].params.columns[0] && typeof config.presets[idx].params.columns[0] === 'string'){
+        config.presets[idx].params.columns = pickColumns(config.params.columns ?? [], config.presets[idx].params.columns)
       }
 
-      if(!config.presets[idx].view)
-        config.presets[idx].view = 'table'
+      if(!config.presets[idx].params.view)
+        config.presets[idx].params.view = 'table'
+
+      if(!config.presets[idx].uid)
+        config.presets[idx].uid = getPresetUid(idx)
     }
 
-    if(!config.presetIdx && config.presets.length > 0){
-      config.presetIdx = 0
+    if(!config.params.presetIdx && config.presets.length > 0){
+      config.params.presetIdx = config.presets[0].uid
     }
   }
 
@@ -147,11 +156,11 @@ const generatePivotColumns = (preset, items) => {
     }
   }
 
-  (preset.pivot.columns ?? []).filter(_ => !pivotColumns.find(i => i.key === _.key))
+  /*(preset.pivot.columns ?? []).filter(_ => !pivotColumns.find(i => i.key === _.key))
     .forEach(_ => {
       _.visible = false
       pivotColumns.push(_)
-    })
+    })*/
 
   preset.pivot.columns = pivotColumns
 
@@ -177,9 +186,10 @@ const generateTotalColumns = (preset, items) => {
 }
 
 export {
-  sortsFn,
+  getPresetUid,
+  generatePivotColumns,
+  generateTotalColumns,
   pickColumns,
   setupConfig,
-  generatePivotColumns,
-  generateTotalColumns
+  sortsFn,
 }

package/src/widgets/BotEditor/BotEditorActions.vue

@@ -0,0 +1,162 @@
+<template>
+	<div v-if="!action" :class="$style.comp" class="flex items-center justify-center">
+    <p class="text-text-400">No action selected</p>
+	</div>
+
+  <div v-else class="flex-1 flex flex-col">
+
+    <div class="flex flex-row items-center p-2 pt-3 px-6 bg-base-300 border-b-[1px] border-text-50">
+      <div class="flex-1">
+        <strong>{{ action.name }}</strong>
+      </div>
+      <Button ref="saveBtn" :state="canSave ? 1 : -1" class="w-[80px] rounded-full" @click="save">Save</Button>
+    </div>
+
+    <div class="flex-1 flex flex-row">
+      <div class="flex-1 p-12 overflow-auto">
+        <UserActionItem :config="config"
+                        :item="action"
+                        :removable="false"
+                        @select="(item) => config.selectedUid = item.uid" />
+      </div>
+
+      <div :style="sidebarStyle"
+           class="relative flex flex-col border-l-[1px] border-text-50 panel-400 overflow-hidden">
+        <div :class="$style.resize1"
+             @mousedown="(e) => $util.dragResize(e, resize1)"></div>
+
+        <UserActionProps ref="userActionProps" :instance="selectedItem" />
+
+      </div>
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+
+import UserActionItem from "../UserActionBuilder/UserActionItem.vue";
+import UserActionProps from "../UserActionBuilder/UserActionProps.vue";
+
+const findComponents = (items, uid) => {
+  for (let item of items) {
+    if (item.uid === uid)
+      return item
+
+    if (item.items) {
+      const component = findComponents(item.items, uid)
+      if (component)
+        return component
+    }
+  }
+}
+
+export default{
+  components: {UserActionProps, UserActionItem},
+
+  computed: {
+
+    canSave(){
+      return JSON.stringify(this.action) !== this.initialAction
+    },
+
+    selectedItem(){
+      if (!this.config.selectedUid) return
+      if (!this.action) return
+
+      if(this.action.uid === this.config.selectedUid)
+        return this.action
+      return findComponents(this.action.items ?? [], this.config.selectedUid)
+    },
+
+    sidebar(){
+      if (!this.config.actionSidebar)
+        this.config.actionSidebar = {
+          open: true,
+          width: 300
+        }
+
+      return this.config.actionSidebar
+    },
+
+    sidebarStyle() {
+      return {
+        width: this.sidebar.width + 'px'
+      }
+    },
+
+  },
+
+  data(){
+    return {
+      action: null,
+      initialAction: null,
+    }
+  },
+
+  inject: [ 'socket' ],
+
+  props: {
+
+    config: Object,
+    controller: String,
+
+  },
+
+  methods: {
+
+    load(uid){
+      if(!uid) return
+
+      this.socket.send(`${this.controller}.open-action`, { uid })
+          .then(_ => {
+            this.action = _.item
+            this.initialAction = JSON.stringify(this.action)
+          })
+    },
+
+    resize1(w) {
+      if (this.sidebar.width - w >= 200 && this.sidebar.width - w <= 600) {
+        this.sidebar.width -= w
+      }
+    },
+
+    save(){
+      this.$refs.saveBtn.setState(2)
+      this.socket.send(`${this.controller}.save-action`, {
+          item: this.action
+        })
+          .then(_ => this.initialAction = JSON.stringify(this.action))
+          .catch(err => this.alert(err))
+          .finally(_ => this.$refs.saveBtn?.resetState())
+    }
+
+  },
+
+  watch: {
+
+    '$route.query.actionUid': {
+      immediate: true,
+      handler(to){
+        this.load(to)
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex-1;
+}
+
+.resize1 {
+  @apply w-[3px] cursor-ew-resize absolute top-0 left-0 bottom-0;
+}
+
+</style>

package/src/widgets/BotEditor.vue

@@ -0,0 +1,228 @@
+<template>
+	<div v-if="cConfig" :class="$style.comp">
+
+    <div :style="sidebarStyle"
+         class="relative flex flex-col border-r-[1px] border-text-50 panel-400 overflow-hidden">
+
+      <div v-if="page !== 'Actions'" class="flex-1 flex flex-col">
+        <div class="p-5">
+          <h5>Bot Settings</h5>
+          <br />
+        </div>
+
+        <div class="flex-1">
+
+          <div class="flex flex-col divide-y divide-text-50 border-y-[1px] border-text-50">
+            <router-link :to="{ query:{ t:'actions' } }" type="button" class="p-3 px-5 text-left">Actions</router-link>
+            <router-link :to="{ query:{ t:'knowledge' } }" type="button" class="p-3 px-5 text-left">Knowledge</router-link>
+            <router-link :to="{ query:{ t:'classifications' } }" type="button" class="p-3 px-5 text-left">Classifications</router-link>
+            <router-link :to="{ query:{ t:'settings' } }" type="button" class="p-3 px-5 text-left">Settings</router-link>
+          </div>
+
+        </div>
+      </div>
+
+      <div v-else-if="page === 'Actions'" class="flex-1 flex flex-col">
+        <div class="p-5 flex flex-row gap-2">
+          <button type="button" @click="$router.replace({ query:{} })">
+            <svg width="16" height="16" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/></svg>
+          </button>
+          <h5>Actions</h5>
+        </div>
+
+        <br />
+
+        <ListItem :items="actions"
+                  container-class="divide-y divide-text-50"
+                  @reorder="(from, to) => { actions.splice(to, 0, actions.splice(from, 1)[0]); }">
+          <template v-slot="{ item }">
+            <div class="p-3 hover:bg-base-500 flex flex-row gap-3 items-center">
+              <div data-reorder>
+                <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+              </div>
+              <label class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap"
+                     @click="$router.push({ query:{ t:'actions', actionUid:item.uid } })">
+                {{ item.name }}
+              </label>
+              <button type="button" @click="">
+                <svg width="14" height="14" class="fill-text-300 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
+              </button>
+            </div>
+          </template>
+        </ListItem>
+
+      </div>
+
+      <div class="flex flex-col border-t-[1px] border-text-50 relative" :style="bottombarStyle">
+        <div :class="$style.resize2"
+             @mousedown="(e) => $util.dragResize(e, resize2)"></div>
+
+        <UserActionConsole class="flex-1"
+                           ref="console"
+                           @test-message="testMessage"
+                           @test-reset="testReset" />
+
+      </div>
+
+      <div :class="$style.resize1"
+           @mousedown="(e) => $util.dragResize(e, resize1)"></div>
+    </div>
+
+    <div v-if="page" class="flex-1 overflow-y-auto flex flex-col">
+
+      <component :is="`BotEditor${page}`"
+                 :config="config"
+                 :controller="controller" />
+
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+import {capitalize} from "../utils/helpers.mjs";
+import BotEditorActions from "./BotEditor/BotEditorActions.vue";
+import VirtualGrid from "../components/VirtualGrid.vue";
+import UserActionConsole from "./UserActionBuilder/UserActionConsole.vue";
+
+
+export default{
+
+  components: {
+    UserActionConsole,
+    VirtualGrid,
+    BotEditorActions,
+  },
+
+  inject: [ 'alert', 'confirm', 'socket', 'toast' ],
+
+  computed: {
+
+    bottombar(){
+      if (!this.cConfig.bottombar)
+        this.cConfig.bottombar = {
+          open: true,
+          height: 240
+        }
+
+      return this.cConfig.bottombar
+    },
+
+    bottombarStyle(){
+      return {
+        height: !this.bottombar.open ? 0 : this.bottombar.height + 'px'
+      }
+    },
+
+    cConfig(){
+      return this.config
+    },
+
+    sidebar() {
+      if (!this.cConfig.sidebar || !('open' in this.cConfig.sidebar))
+        this.cConfig.sidebar = {
+          open: true,
+          width: 360
+        }
+
+      return this.cConfig.sidebar
+    },
+
+    sidebarStyle() {
+      return {
+        width: !this.sidebar.open ? 0 : this.sidebar.width + 'px'
+      }
+    },
+
+  },
+
+  data(){
+    return {
+      actions: null,
+      page: '',
+    }
+  },
+
+  methods: {
+
+    load(){
+
+    },
+
+    loadActions(){
+      this.socket.send(`${this.controller}.load-actions`, {})
+          .then(_ => {
+            this.actions = _.items
+          })
+    },
+
+    resize1(w) {
+      if (this.sidebar.width + w >= 200 && this.sidebar.width + w <= 600) {
+        this.sidebar.width += w
+      }
+    },
+
+    resize2(_, h) {
+      if (this.bottombar.height - h >= 200 && this.bottombar.height - h <= 400) {
+        this.bottombar.height -= h
+      }
+    },
+
+    testMessage(){
+
+    },
+
+    testReset(){
+
+    },
+
+  },
+
+  props: {
+
+    config: Object,
+    configSrc: String,
+
+    controller: String,
+
+  },
+
+  watch: {
+
+    '$route.query.t': {
+      immediate: true,
+      handler(to){
+        this.page = to ? capitalize(to) : ''
+      }
+    },
+
+    page: {
+      immediate: true,
+      handler(to){
+        if(this[`load${to}`])
+          this[`load${to}`]()
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-row;
+}
+
+.resize1 {
+  @apply w-[3px] cursor-ew-resize absolute top-0 right-0 bottom-0;
+}
+
+.resize2 {
+  @apply h-[3px] cursor-n-resize absolute top-0 right-0 left-0 bg-red-500;
+}
+
+</style>