@mixd-id/web-scaffold 0.1.230406366 → 0.1.230406368

package/package.json

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

package/src/components/Image.vue

@@ -41,7 +41,7 @@ export default{
 
 	mixins: [ componentMixin ],
 
-	emits: [ 'change' ],
+	emits: [ 'click', 'change' ],
 
   props:{
 
@@ -256,10 +256,12 @@ export default{
       }
 		},
 
-		onClick(){
+		onClick(e){
 			if(!this.moved && this.target){
 				this.$router.push(this.target)
 			}
+
+      this.$emit('click', e, this)
 		},
 
 		onMouseDown(){

package/src/components/TextWithTag.vue

@@ -1,21 +1,23 @@
 <template>
-	<div :class="$style.comp">
-
-		<div class="flex flex-row items-start">
-      <span contenteditable="true" spellcheck="false"
-         ref="html"
-         v-html="html"
-         :class="`${$style.content}${itemClass ? ' ' + itemClass : ''}`"
-         @blur="saveSelection($refs.html)"
-          @paste="onPaste"
-         @input="onInput"></span>
-
-      <button v-if="variant === 'minimal'" type="button" class="p-3" @click="$refs.modal.open()">
-        <svg width="14" height="14" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"/></svg>
-      </button>
+  <div :class="$style.comp">
+
+    <div class="flex flex-row items-start">
+      <span :contenteditable="!readonly" spellcheck="false"
+            ref="html"
+            v-html="html"
+            :class="`${$style.content}${itemClass ? ' ' + itemClass : ''}`"
+            @blur="onBlur"
+            @paste="onPaste"
+            @input="onInput"></span>
+
+      <slot name="end" :comp="this">
+        <button v-if="variant === 'minimal' && !readonly" type="button" class="p-3" @click="$refs.modal.open()">
+          <svg width="14" height="14" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"/></svg>
+        </button>
+      </slot>
     </div>
 
-    <div v-if="variant !== 'minimal'" class="flex flex-row bg-base-300" @dblclick.alt="log(JSON.stringify(modelValue))">
+    <div v-if="variant !== 'minimal' && !readonly" class="flex flex-row bg-base-300" @dblclick.alt="log(JSON.stringify(modelValue))">
       <div class="flex-1 flex flex-row gap-2 overflow-x-auto p-1" :class="$style.noScrollbar">
         <button type="button" v-for="item in viewedItems" :class="$style.tag2" class="text-xs" @click="add(item)">{{ item.text ?? item.value }}</button>
       </div>
@@ -57,7 +59,7 @@
 
       </div>
     </Modal>
-	</div>
+  </div>
 </template>
 
 <script>
@@ -66,7 +68,7 @@ import {restoreSelection, saveSelection} from "../utils/selection";
 
 export default{
 
-  emits: [ 'update:modelValue' ],
+  emits: [ 'blur', 'update:modelValue' ],
 
   props:{
 
@@ -78,6 +80,8 @@ export default{
 
     items: Array,
 
+    readonly: Boolean,
+
     variant: String,
 
     itemClass: String,
@@ -118,7 +122,7 @@ export default{
 
       let range = selection.getRangeAt(0);
       if(range.commonAncestorContainer.parentNode !== this.$refs.html &&
-        range.commonAncestorContainer !== this.$refs.html) return
+          range.commonAncestorContainer !== this.$refs.html) return
 
       let currentNode = range.startContainer;
 
@@ -146,6 +150,10 @@ export default{
 
       this.insertElement(el)
       this.onInput()
+
+      const itemExists = this.items.find(_ => _.value === item.value)
+      if(!itemExists)
+        this.items.push(item)
     },
 
     add(item){
@@ -174,6 +182,11 @@ export default{
       e.target.parentNode.removeChild(e.target)
     },
 
+    onBlur(e){
+      this.saveSelection(this.$refs.html)
+      this.$emit('blur')
+    },
+
     onPaste(e){
       e.preventDefault()
       const text = e.clipboardData.getData('text/plain')
@@ -205,8 +218,8 @@ export default{
 
     modelValue: {
       immediate: true,
-      handler(val){
-        if(this.isInternal){
+      handler(val) {
+        if (this.isInternal) {
           this.isInternal = false
           return
         }
@@ -214,7 +227,7 @@ export default{
         let html = val ?? ''
 
         let customItems = []
-        if(typeof this.itemFn === 'function'){
+        if (typeof this.itemFn === 'function') {
           customItems = this.itemFn(html)
         }
 
@@ -223,7 +236,7 @@ export default{
           ...customItems
         ]
 
-        for(let item of items){
+        for (let item of items) {
           html = html.replaceAll(item.value, `<span title="${item.value.replaceAll('"', '')}" class="${this.$style.tag}" contenteditable="false" data-value="${item.value}">${item.text ?? item.value}</span>`, 'gi')
         }
 
@@ -239,28 +252,28 @@ export default{
 
 <style module>
 
-.comp{
+.comp {
   @apply border-[1px] border-text-200 bg-base-50 rounded-lg min-w-[100px];
   @apply flex flex-col gap-2;
   @apply overflow-hidden;
   @apply divide-y divide-text-100;
 }
 
-.content{
+.content {
   @apply flex-1 whitespace-pre-line outline-none p-2;
 }
 
-.comp .tag{
+.comp .tag {
   @apply bg-text-100 p-1 rounded-lg whitespace-nowrap relative top-[-1px];
   @apply font-mono text-sm;
 }
 
-.tag2{
+.tag2 {
   @apply bg-text-50 p-1 rounded-lg px-2 cursor-pointer whitespace-nowrap;
   @apply hover:bg-text-100 hover:text-white;
 }
 
-.noScrollbar::-webkit-scrollbar{
+.noScrollbar::-webkit-scrollbar {
   display: none;
 }
 

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/helpers.js

@@ -525,11 +525,9 @@ const dayTimeRange = (params, value) => {
 }
 
 function capitalize(str) {
-  return (str ?? '')
-    .toString()
-    .split(' ')
-    .map(_ => _.charAt(0).toUpperCase() + _.slice(1).toLowerCase())
-    .join(' ')
+  return (str ?? '').toLowerCase().replace(/\b\w/g, function(char) {
+    return char.toUpperCase();
+  });
 }
 
 module.exports = {

package/src/utils/helpers.mjs

@@ -361,7 +361,7 @@ function applyDatasourceReplacer(value, datasource){
 }
 
 function capitalize(str) {
-  return str.replace(/\b\w/g, function(char) {
+  return (str ?? '').toLowerCase().replace(/\b\w/g, function(char) {
     return char.toUpperCase();
   });
 }

package/src/utils/preset-selector.mjs

@@ -24,13 +24,34 @@ const sortsFn = function(a, b, sorts, index){
 const pickColumns = function(columns, keys){
   if(!Array.isArray(columns)) return []
 
-  const picked = JSON.parse(JSON.stringify(columns))
+  columns = JSON.parse(JSON.stringify(columns))
 
-  for(let idx in picked){
-    picked[idx].visible = keys.includes(picked[idx].key)
+  columns = columns.reduce((cur, obj) => {
+    cur[obj.key] = obj
+    return cur
+  }, {})
+
+  const res = []
+
+  for(let key of keys){
+    if(typeof key === 'string'){
+      if(columns[key]){
+        columns[key].visible = true
+        res.push(columns[key])
+        delete columns[key]
+      }
+    }
+    else if(typeof key === 'object' && key !== null && key.key){
+      if(columns[key.key]){
+        res.push(Object.assign(columns[key.key], key, { visible:true }))
+        delete columns[key.key]
+      }
+    }
   }
 
-  return picked
+  res.push(...Object.values(columns))
+
+  return res
 }
 
 const setupConfig = (config) => {

package/src/utils/wss.js

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

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>