@mixd-id/web-scaffold 0.1.230406365 → 0.1.230406367

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406365",
+  "version": "0.1.230406367",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Button.vue

@@ -169,21 +169,14 @@ export default{
 
 .button-primary {
   @apply bg-primary-500 text-white rounded-lg;
+  @apply hover:bg-primary-600 focus:border-primary-300;
   box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
   border: solid 1px rgb(var(--primary-500));
 }
 
-.button-primary:focus {
-  border-color: rgb(var(--primary-600));
-}
-
-.button-primary:hover {
-  @apply bg-primary-600;
-}
-
 .button-primary-disabled,
 .button-primary-disabled:hover {
-  @apply bg-primary-300 top-0 left-0 cursor-not-allowed text-opacity-50;
+  @apply bg-primary-300 border-primary-300 top-0 left-0 cursor-not-allowed text-opacity-50;
   @apply top-0 left-0;
 }
 

package/src/configs/dashboard/data-table.js

@@ -0,0 +1,9 @@
+export const component = {
+
+  type:"DataTable",
+
+  props:{
+    height:[ "h-[50vh]", "md:h-[50vh]", "", "" ]
+  }
+
+}

package/src/index.js

@@ -679,6 +679,7 @@ export default{
     app.component('PolarArea', defineAsyncComponent(() => import("./widgets/Dashboard/PolarArea.vue")))
     app.component('Metric', defineAsyncComponent(() => import("./widgets/Dashboard/Metric.vue")))
     app.component('BarChart', defineAsyncComponent(() => import("./widgets/Dashboard/BarChart.vue")))
+    app.component('DataTable', defineAsyncComponent(() => import("./widgets/Dashboard/DataTable.vue")))
 
     app.component('BotEditor', defineAsyncComponent(() => import("./widgets/BotEditor.vue")))
   }

package/src/utils/dashboard.js

@@ -85,6 +85,7 @@ const getDatasourceItems = async (datasource, opt) => {
 }
 
 const getSequelizeColumns = async (columns, opt) => {
+  if(!columns) columns = []
 
   const { DataTypes } = opt.Sequelize
 

package/src/utils/wss.js

@@ -245,6 +245,12 @@ class WSS extends EventEmitter2{
 
               if(this._retryCount > 10){
                 socket.close(1002, 'ping timeout')
+                if(subscriber){
+                  subscriber.disconnect()
+                }
+                else{
+                  console.log('CLOSE SOCKET#2', token.substring(0, 10) + '...')
+                }
               }
             }
             else{

package/src/widgets/BotEditor/BotEditorActions.vue

@@ -112,6 +112,7 @@ export default{
       this.socket.send(`${this.controller}.open-action`, { uid })
           .then(_ => {
             this.action = _.item
+            this.config.selectedUid = this.action.uid
             this.initialAction = JSON.stringify(this.action)
           })
     },

package/src/widgets/BotEditor/BotEditorSettings.vue

@@ -0,0 +1,21 @@
+<template>
+	<div :class="$style.comp">
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply p-6;
+}
+
+</style>

package/src/widgets/BotEditor.vue

@@ -59,8 +59,7 @@
 
         <UserActionConsole class="flex-1"
                            ref="console"
-                           @test-message="testMessage"
-                           @test-reset="testReset" />
+                           :controller="controller" />
 
       </div>
 
@@ -85,6 +84,7 @@ import {capitalize} from "../utils/helpers.mjs";
 import BotEditorActions from "./BotEditor/BotEditorActions.vue";
 import VirtualGrid from "../components/VirtualGrid.vue";
 import UserActionConsole from "./UserActionBuilder/UserActionConsole.vue";
+import BotEditorSettings from "./BotEditor/BotEditorSettings.vue";
 
 
 export default{
@@ -93,6 +93,7 @@ export default{
     UserActionConsole,
     VirtualGrid,
     BotEditorActions,
+    BotEditorSettings,
   },
 
   inject: [ 'alert', 'confirm', 'socket', 'toast' ],
@@ -140,12 +141,17 @@ export default{
   data(){
     return {
       actions: null,
+      user: null,
       page: '',
     }
   },
 
   methods: {
 
+    getUser(){
+      return this.user
+    },
+
     load(){
 
     },
@@ -157,6 +163,13 @@ export default{
           })
     },
 
+    open(id){
+      this.socket.send(`${this.controller}.open`, { id })
+          .then(res => {
+            this.user = res.user
+          })
+    },
+
     resize1(w) {
       if (this.sidebar.width + w >= 200 && this.sidebar.width + w <= 600) {
         this.sidebar.width += w
@@ -169,14 +182,6 @@ export default{
       }
     },
 
-    testMessage(){
-
-    },
-
-    testReset(){
-
-    },
-
   },
 
   props: {
@@ -186,6 +191,14 @@ export default{
 
     controller: String,
 
+    id: String,
+
+  },
+
+  provide(){
+    return {
+      getUser: this.getUser
+    }
   },
 
   watch: {
@@ -197,6 +210,13 @@ export default{
       }
     },
 
+    id: {
+      immediate: true,
+      handler(to){
+        this.open(to)
+      }
+    },
+
     page: {
       immediate: true,
       handler(to){
@@ -222,7 +242,7 @@ export default{
 }
 
 .resize2 {
-  @apply h-[3px] cursor-n-resize absolute top-0 right-0 left-0 bg-red-500;
+  @apply h-[3px] cursor-n-resize absolute top-0 right-0 left-0 z-50;
 }
 
 </style>

package/src/widgets/Dashboard/BarChart.vue

@@ -74,7 +74,7 @@ import {Bar} from 'vue-chartjs'
 import Chart from 'chart.js/auto'
 import { color } from 'chart.js/helpers'
 import {strVars} from "../../utils/helpers.mjs";
-import {readyStateMixin} from "../../mixin/ready-state";
+import {useEmitter} from "../../utils/event-bus";
 
 export default{
 
@@ -225,14 +225,43 @@ export default{
       ],
 
       height: '',
-      datasets: null
+      datasets: null,
+      readyState: 1,
+      value: null
     }
   },
 
-  inject: [ 'selectPreset' ],
+  inject: [ 'getSrc', 'getViewedPreset', 'getQueryFilters', 'selectPreset', 'socket' ],
 
   methods: {
 
+    load(){
+      const preset = this.getViewedPreset()
+      const {name, datasource} = preset
+
+      this.readyState = 2
+      this.socket.send(this.getSrc(), {
+        name,
+        views: [{
+          ...this.$props,
+          type: 'BarChart'
+        }],
+        datasource: datasource.map(_datasource => {
+          return {
+            ..._datasource,
+            filters: [
+              ...(_datasource.filters ?? []),
+              ...(this.getQueryFilters()[_datasource.uid] ?? [])
+            ]
+          }
+        })
+      })
+          .then(_ => {
+            this.value = _[this.uid]
+          })
+          .finally(_ => this.readyState = 1)
+    },
+
     onClick(e, segments){
 
       const clickInteractions = (this.interactions ?? []).filter(_ => _.event === 'click')
@@ -276,9 +305,17 @@ export default{
 
   mounted() {
     this.height = this.$el.clientHeight + 'px'
-  },
 
-  mixins: [ readyStateMixin ],
+    this.load()
+
+    this.emitter = useEmitter()
+    this.emitter.on(`${this.uid}.load`, () => {
+      this.load()
+    })
+    this.emitter.on(`dashboard.load`, () => {
+      this.load()
+    })
+  },
 
   props: {
 
@@ -309,8 +346,6 @@ export default{
 
     yAxeOnClick: Array,
 
-    value: Object,
-
     interactions: Array,
 
     uid: String

package/src/widgets/Dashboard/DataTable.vue

@@ -0,0 +1,125 @@
+<template>
+	<div :class="$style.comp">
+    <VirtualTable class="flex-1"
+                  :columns="datasourceColumns"
+                  @scroll-end="loadNext"
+                  :items="items">
+
+    </VirtualTable>
+	</div>
+</template>
+
+<script>
+import {useEmitter} from "../../utils/event-bus";
+import VirtualTable from "../../components/VirtualTable.vue";
+
+export default{
+  components: {VirtualTable},
+
+  data(){
+    return {
+      value: null,
+      readyState: 1,
+      items: null,
+      hasNext: false
+    }
+  },
+
+  inject: [ 'getSrc', 'getViewedPreset', 'getQueryFilters', 'socket' ],
+
+  methods: {
+
+    load(){
+      const preset = this.getViewedPreset()
+      const {name, datasource} = preset
+
+      this.readyState = 2
+      this.socket.send(this.getSrc(), {
+        name,
+        views: [{
+          ...this.$props,
+          type: 'DataTable'
+        }],
+        datasource: datasource.map(_datasource => {
+          return {
+            ..._datasource,
+            filters: [
+              ...(_datasource.filters ?? []),
+              ...(this.getQueryFilters()[_datasource.uid] ?? [])
+            ]
+          }
+        })
+      })
+          .then(_ => {
+            const { items, hasNext } = _[this.uid] ?? {}
+            this.items = items
+            this.hasNext = hasNext
+          })
+          .finally(_ => this.readyState = 1)
+    },
+
+    loadNext(){
+      if(!this.hasNext) return
+
+      const preset = this.getViewedPreset()
+      const {name, datasource} = preset
+      const afterItem = this.items[this.items.length - 1]
+
+      this.socket.send(this.getSrc(), {
+        name,
+        views: [{
+          ...this.$props,
+          type: 'DataTable',
+          afterItem
+        }],
+        datasource: datasource.map(_datasource => {
+          return {
+            ..._datasource,
+            filters: [
+              ...(_datasource.filters ?? []),
+              ...(this.getQueryFilters()[_datasource.uid] ?? [])
+            ]
+          }
+        })
+      })
+          .then(_ => {
+            const { items, hasNext } = _[this.uid] ?? {}
+            this.items.push(...items)
+            this.hasNext = hasNext
+          })
+    }
+
+  },
+
+  mounted() {
+    this.load()
+
+    this.emitter = useEmitter()
+    this.emitter.on(`${this.uid}.load`, () => {
+      this.load()
+    })
+    this.emitter.on(`dashboard.load`, () => {
+      this.load()
+    })
+  },
+
+  props: {
+
+    datasourceColumns: Array,
+    datasourceUid: String,
+    label: String,
+    uid: String,
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply min-h-[50vh] flex flex-col;
+}
+
+</style>

package/src/widgets/Dashboard/DataTableSetting.vue

@@ -0,0 +1,239 @@
+<template>
+  <div :class="$style.comp">
+
+    <div class="flex justify-center border-b-[1px] border-text-50" v-if="tabItems.length > 1">
+      <Tabs :items="tabItems" v-model="value.tabIndex" />
+    </div>
+
+    <div class="flex-1 overflow-y-auto flex flex-col">
+      <div v-if="value.tabIndex === 1" class="flex-1 flex flex-col gap-5 p-6">
+
+        <div class="flex flex-row items-center ">
+          <label class="flex-1">Active</label>
+          <Switch v-model="value.props.enabled" :readonly="readonly" />
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label class="text-text-400">Label</label>
+          <Textbox v-model="value.props.label" maxlength="50" placeholder="Label" :readonly="readonly" />
+        </div>
+
+        <div class="flex flex-row items-center">
+          <label class="flex-1">Datasource</label>
+          <div>
+            <Dropdown class="min-w-[150px]"
+                      :readonly="readonly"
+                      v-model="value.props.datasourceUid">
+              <option v-for="_datasource in datasource"
+                      :value="_datasource.uid">
+                {{ _datasource.name }}
+              </option>
+            </Dropdown>
+          </div>
+        </div>
+
+      </div>
+
+      <div v-else-if="value.tabIndex === 2" class="flex-1 flex flex-col gap-5 p-6">
+
+        <div>
+          <Textbox placeholder="Search..." v-model="search">
+            <template #start>
+              <div class="pl-3">
+                <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>
+              </div>
+            </template>
+          </Textbox>
+        </div>
+
+        <VirtualGrid class="flex-1 border-[1px] border-text-50 rounded-xl"
+                     container-class="divide-y divide-text-50"
+                     :items="columns">
+          <template #item="{ item }">
+            <div class="flex-1 flex flex-row gap-2 items-center p-1 px-3 group">
+              <div>
+                <Checkbox v-model="item.visible"
+                          default="true"
+                          :disabled="readonly"
+                          @change="$emit('change')" />
+              </div>
+              <Textbox v-model="item.label2" :placeholder="item.label" :readonly="readonly"
+                       class="flex-1 border-none bg-transparent" :class="$style.columnTextbox"
+                       item-class="p-1 px-0" />
+              <div class="hidden flex-col justify-center group-hover:flex">
+                <button type="button" @click="moveUp(item)">
+                  <svg width="11" height="11" class="fill-text-300 hover:fill-primary" 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="M9.39 265.4l127.1-128C143.6 131.1 151.8 128 160 128s16.38 3.125 22.63 9.375l127.1 128c9.156 9.156 11.9 22.91 6.943 34.88S300.9 320 287.1 320H32.01c-12.94 0-24.62-7.781-29.58-19.75S.2333 274.5 9.39 265.4z"/></svg>
+                </button>
+                <button type="button" @click="moveDown(item)">
+                  <svg width="11" height="11" class="fill-text-300 hover:fill-primary" 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 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
+                </button>
+              </div>
+            </div>
+          </template>
+        </VirtualGrid>
+
+      </div>
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+import WebPagePropertySelector from "../WebPageBuilder4/WebPagePropertySelector.vue";
+import {defineAsyncComponent} from "vue";
+import InteractionEdit from "./InteractionEdit.vue";
+
+export default{
+  components: {
+    InteractionEdit,
+    HeightSetting: defineAsyncComponent(() => import('../WebPageBuilder4/HeightSetting.vue')),
+    WebPagePropertySelector
+  },
+
+  computed: {
+
+    interactions(){
+      if(!Array.isArray(this.value.props.interactions))
+        this.value.props.interactions = []
+      return this.value.props.interactions
+    },
+
+    selectedDatasource(){
+      return this.datasource.find(d => d.uid === this.value.props.datasourceUid)
+    },
+
+    definedProperties(){
+      const settings = []
+
+      for(let key in this.properties){
+        if(key in this.value.props){
+          settings.push(this.properties[key])
+        }
+      }
+
+      return settings
+    },
+
+    tabItems(){
+      return [
+        { text:'General', value:1 },
+        this.value.props.datasourceUid ? { text:'Columns', value:2 } : null,
+      ]
+        .filter(_ => _)
+    },
+
+    columns(){
+      const searches = this.search.toLowerCase().split(' ').filter(_ => _.length > 2)
+      return (this.value.props.datasourceColumns ?? []).filter(_ => {
+        return !_.key.startsWith('_') &&
+            (searches.length < 1 || searches.every(search => _.label.toLowerCase().includes(search)))
+      })
+    },
+
+  },
+
+  data(){
+    return {
+      properties: {
+        'height': { component:"HeightSetting", text:'Height', group:'Layout' }
+      },
+      search: ''
+    }
+  },
+
+  emits: [ 'change' ],
+
+  inject: [ 'uploadImage', 'viewTypes' ],
+
+  props: {
+
+    datasource: Object,
+
+    index: Number,
+
+    readonly: [ Boolean, Number ],
+
+    value: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
+
+  },
+
+  methods: {
+
+    addInteraction(obj){
+      this.$util.push(this.interactions, obj)
+    },
+
+    applyDefault(){
+      if(!this.value.props.datasourceUid && this.datasource?.length === 1){
+        this.value.props.datasourceUid = this.datasource[0].uid
+      }
+
+      if(!this.value.tabIndex)
+        this.value.tabIndex = 1
+    },
+
+    generateColumns(){
+      this.value.props.datasourceColumns = (this.selectedDatasource.pivot?.enabled ?
+          this.selectedDatasource.pivot.columns :
+          this.selectedDatasource.columns)
+          .map((_, __) => ({
+            ..._,
+            visible: __ < 10
+          }))
+    },
+
+    moveDown(item){
+      const index = this.value.props.datasourceColumns.indexOf(item)
+      if(index + 1 < this.value.props.datasourceColumns.length){
+        this.value.props.datasourceColumns.splice(index + 1, 0, this.value.props.datasourceColumns.splice(index, 1)[0])
+        this.$emit('change')
+      }
+    },
+
+    moveUp(item){
+      const index = this.value.props.datasourceColumns.indexOf(item)
+      if(index - 1 >= 0){
+        this.value.props.datasourceColumns.splice(index - 1, 0, this.value.props.datasourceColumns.splice(index, 1)[0])
+        this.$emit('change')
+      }
+    },
+
+
+  },
+
+  mounted() {
+    this.applyDefault()
+  },
+
+  watch: {
+
+    'value.props.datasourceUid'(to){
+      if(to){
+        this.generateColumns()
+        this.$emit('change')
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex-1 flex flex-col;
+}
+
+.columnTextbox input::placeholder{
+  @apply text-text;
+}
+
+</style>