@mixd-id/web-scaffold 0.1.230406389 → 0.1.230406391

package/package.json

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

package/src/components/List.vue

@@ -11,6 +11,8 @@
         <PresetBar :config="config"
                    class="flex-1"
                    :enumCache="enumCache"
+                   :controller="controller"
+                   :preset-key="presetKey"
                    @apply="load">
 
           <template #toolbar>
@@ -26,7 +28,7 @@
              @mousedown="(e) => $util.dragResize(e, resize1)"></div>
       </div>
 
-      <div class="flex-1 flex flex-col relative">
+      <div v-if="preset" class="flex-1 flex flex-col relative">
 
         <div class="flex-1 flex flex-col" :class="containerClass">
           <slot name="head"
@@ -86,6 +88,7 @@
 
               <div class="flex flex-row gap-2 gap-1" v-if="Boolean(toolbar)">
                 <Textbox class="flex-1 md:w-[240px]" placeholder="Search..." clearable="1"
+                         maxlength="100"
                          v-model="preset.search"
                          @clear="delete preset.search; load()"
                          @keyup.enter="load">
@@ -146,8 +149,8 @@
                 </template>
 
                 <template #end>
-                  <div v-if="data?.hasNext" class="flex justify-center p-3">
-                    <svg v-if="readyState === 4" class="animate-spin aspect-square w-[14px] h-[14px] fill-text-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                  <div v-if="data?.hasNext" class="flex justify-center pt-3 pb-5">
+                    <svg v-if="readyState === 4" class="animate-spin w-[21px] h-[21px]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                     <button v-else type="button" class="text-text-300" @click="loadNext()">
                       {{ $t('Load More' )}}
                     </button>
@@ -286,6 +289,7 @@ export default{
     },
     presetKey: String,
     subscribeKey: String,
+    controller: String,
     src: undefined,
     title: String,
     view: {
@@ -364,29 +368,25 @@ export default{
     },
 
     load(){
-      if(this.src){
+      if(this.computedSrc){
         if(!this.preset.columns){
           this.preset.columns = JSON.parse(JSON.stringify(this.config.columns))
         }
 
         this.readyState = 2
-        return this.socket.send(this.src, {
+        return this.socket.send(this.computedSrc, {
           ...this.preset,
           id: undefined,
           itemsPerPage: this.data.itemsPerPage,
         })
             .then(data => {
-              const firstItem = data.items[0]
-              const lastItem = data.items[data.items.length - 1]
-              console.log('@load',
-                  `${firstItem?.id + ':' + firstItem?.name + ':' + firstItem?.lastMessageAt}`,
-                  `${lastItem?.id + ':' + lastItem?.name + ':' + lastItem?.lastMessageAt}`)
-
               generatePivotColumns(this.preset, data.items)
               generateTotalColumns(this.preset, data.items)
               this.loadEnums(data.items)
-              Object.assign(this.data, data ?? {})
-              this.$emit('after-load')
+                .then(() => {
+                  Object.assign(this.data, data ?? {})
+                  this.$emit('after-load')
+                })
             })
             .catch(err => {
               this.toast(err)
@@ -397,29 +397,24 @@ export default{
     },
 
     loadNext(){
-      if(this.src &&
+      if(this.computedSrc && this.readyState !== 4 &&
           ((this.data ?? {}).hasNext !== false) &&
           !(this.preset.pivot ?? {}).enabled) {
 
         const afterItem = this.dataItems[this.dataItems.length - 1]
 
         this.readyState = 4
-        this.socket.send(this.src, {
+        this.socket.send(this.computedSrc, {
           ...this.preset,
           id: undefined,
           itemsPerPage: this.data.itemsPerPage,
           afterItem,
         })
             .then(data => {
-              const firstItem = data.items[0]
-              const lastItem = data.items[data.items.length - 1]
-              console.log('@loadNext',
-                  `${afterItem?.id + ':' + afterItem?.name + ':' + afterItem?.lastMessageAt}`,
-                  `${firstItem?.id + ':' + firstItem?.name + ':' + firstItem?.lastMessageAt}`,
-                  `${lastItem?.id + ':' + lastItem?.name + ':' + lastItem?.lastMessageAt}`)
-
-              this.data.items.push(...data.items)
               this.loadEnums(data.items)
+                .then(() => {
+                  this.data.items.push(...data.items)
+                })
             })
             .catch(err => this.toast(err))
             .finally(_ => this.readyState = 1)
@@ -430,7 +425,7 @@ export default{
     loadPreset(){
       if(!Object.keys(this.$route.query).map(_ => _.toLowerCase()).includes('reset')){
         if(this.presetKey){
-          return this.socket.send('user.preset', { key:this.presetKey })
+          return this.socket.send(this.presetSrc, { key:this.presetKey })
               .then(config => {
                 Object.assign(this.config, config)
 
@@ -442,8 +437,6 @@ export default{
       }
       else{
         return new Promise((resolve) => {
-          this.savePreset()
-
           const query = {}
           for(let key in this.$route.query){
             if(key.toLowerCase() !== 'reset')
@@ -459,10 +452,8 @@ export default{
       }
     },
 
-    loadEnums(items){
-
-      for(let i in this.preset.columns){
-        const column = this.preset.columns[i]
+    async loadEnums(items){
+      return Promise.all((this.preset.columns ?? []).map(async column => {
 
         if(column.enumSrc) {
 
@@ -480,7 +471,7 @@ export default{
           if(reqItems.length > 0 && reqItems !== this.lastEnumItems){
 
             const [ src, key, attr ] = column.enumSrc.split(':')
-            this.socket.send(src, {
+            const res = await this.socket.send(src, {
               columns: [
                 { key:attr, visible:true }
               ],
@@ -489,34 +480,32 @@ export default{
                   key:key, value: [ { operator:'in', value:reqItems } ]
                 }
               ]
+            });
+
+            (res.items ?? []).forEach(_ => {
+              this.enumCache[column.key][_[key]] = {
+                text: _[attr] ?? _[key],
+                value: _[key],
+              }
             })
-                .then(res => {
-                  (res.items ?? []).forEach(_ => {
-                    this.enumCache[column.key][_[key]] = {
-                      text: _[attr] ?? _[key],
-                      value: _[key],
-                    }
-                  })
 
-                  for(let key in this.enumCache[column.key]){
-                    if(!this.enumCache[column.key][key].text)
-                      this.enumCache[column.key][key].text = key
-                  }
+            for(let key in this.enumCache[column.key]){
+              if(!this.enumCache[column.key][key].text)
+                this.enumCache[column.key][key].text = key
+            }
 
-                  this.lastEnumItems = reqItems
-                })
-                .catch(err => this.log('Load enums error', err))
+            this.lastEnumItems = reqItems
           }
         }
-      }
 
+      }))
     },
 
     loadExt(){
       if(!this.extBar.open) return
 
       this.readyState = 3
-      return this.socket.send(this.src, {
+      return this.socket.send(this.computedSrc, {
         ...this.preset,
         filters: [
           ...(this.preset.filters ?? []),
@@ -533,7 +522,7 @@ export default{
     loadExtNext(){
       if(!this.preset.filters) return
 
-      return this.socket.send(this.src, {
+      return this.socket.send(this.computedSrc, {
         ...this.preset,
         filters: [
           ...(this.preset.filters ?? []),
@@ -556,7 +545,7 @@ export default{
 
     selectPreset(idx){
       if(this.config.presets[idx]){
-        this.config.presetIdx = idx
+        this.configParams.presetIdx = this.config.presets[idx].uid
         this.load()
         this.$refs.presetSelector.close()
         this.$refs.contextMenu.close()
@@ -565,7 +554,7 @@ export default{
 
     savePreset: invokeAfterIdle(function() {
       if(this.presetKey) {
-        this.socket.send('user.preset',
+        this.socket.send(this.presetSrc,
             {key: this.presetKey, config: this.config})
       }
     }),
@@ -621,7 +610,7 @@ export default{
     loadQueued(items){
       const key = items[0] && items[0].uid ? 'uid' : 'id'
 
-      this.socket.send(this.src, {
+      this.socket.send(this.computedSrc, {
         ...this.preset,
         [key]: items.map(item => item[key])
       })
@@ -957,7 +946,14 @@ export default{
     },
 
     preset(){
-      return ((this.config ?? {}).presets ?? [])[(this.config ?? {}).presetIdx ?? 0] ?? {}
+      return this.config.presets.find(_ => _.uid === this.configParams.presetIdx) ??
+          this.config.sharedPresets.find(_ => _.uid === this.configParams.presetIdx)
+    },
+
+    presetSrc(){
+      return this.controller ?
+          `${this.controller}.preset` :
+          'user.preset'
     },
 
     presetView(){
@@ -968,6 +964,10 @@ export default{
     configParams(){
       if(!this.config.params)
         this.config.params = {}
+
+      if(!this.config.params.presetIdx && this.config.presets.length > 0)
+        this.config.params.presetIdx = this.config.presets[0].uid
+
       return this.config.params
     },
 
@@ -1006,6 +1006,10 @@ export default{
 
     pivotEnabled(){
       return ((this.preset ?? {}).pivot ?? {}).enabled
+    },
+
+    computedSrc(){
+      return this.src ?? `${this.controller}.load`
     }
 
   },

package/src/components/VirtualTable.vue

@@ -57,7 +57,6 @@
 							<svg class="animate-spin aspect-square w-[16px] h-[16px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
 						</div>
 					</div>
-          <slot name="end"></slot>
 				</div>
 			</div>
 			<div v-else-if="visibleColumns.length <= 0 && Array.isArray(columns)" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
@@ -67,6 +66,8 @@
 				<h5 class="text-text-300">No data available</h5>
 			</div>
 
+      <slot name="end"></slot>
+
 			<div :class="$style.calc" v-if="visibleColumns.length > 0 && cItems && cItems.length > 0" ref="calc">
 				<table :class="$style.table">
 					<tbody>
@@ -577,7 +578,14 @@ export default{
 					break
 			}
 
-			return text ? text : (value === null ? '' : '-')
+			const res = text ? text : (value === null ? '' : '-')
+
+      return `${res}`
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;")
+          .replace(/"/g, "&quot;")
+          .replace(/'/g, "&#039;")
 		},
 
 		setState(state){

package/src/utils/preset-selector.js

@@ -1286,6 +1286,7 @@ const presetToSequelizeList = async(preset, {
   include,
   order:initialOrder
 }) => {
+  if(!model) return {}
 
   const updatedAtField = model.rawAttributes['updatedAt'] ?? model.rawAttributes['updated_at']
 

package/src/utils/preset-selector.mjs

@@ -68,6 +68,9 @@ const setupConfig = (config) => {
 
       if(!config.presets[idx].view)
         config.presets[idx].view = 'table'
+
+      if(!config.presets[idx].uid)
+        config.presets[idx].uid = getPresetUid(config.name)
     }
 
     if(!config.presetIdx && config.presets.length > 0){

package/src/utils/wss.js

@@ -74,18 +74,21 @@ class WSS extends EventEmitter2{
   _reqFn = []
   _retryCount = 0
 
-  async fromBinaryData(binaryData){
+  _connectionId = 0
+  _debugIds = {}
+
+  async fromBinaryData(binaryData, debugMode = false){
     const encryptedString = Buffer.from(binaryData).toString('utf-8');
-    const decryptedData = this._opt.key ?
+    const decryptedData = this._opt.key && !debugMode ?
       CryptoJS.AES.decrypt(encryptedString, this._opt.key).toString(CryptoJS.enc.Utf8) :
       encryptedString;
     const receivedObject = JSON.parse(decryptedData);
     return await revertDataUrlObj(receivedObject);
   }
 
-  async toBinaryData(obj){
+  async toBinaryData(obj, debugMode = false){
     const dataUrlObj = await convertDataUrlObj(obj)
-    const encryptedData = this._opt.key ?
+    const encryptedData = this._opt.key && !debugMode ?
       CryptoJS.AES.encrypt(JSON.stringify(dataUrlObj), this._opt.key).toString() :
       JSON.stringify(dataUrlObj);
     return new TextEncoder().encode(encryptedData);
@@ -106,12 +109,17 @@ class WSS extends EventEmitter2{
     this._client.connect().then()
 
     this._instance.on('connection', async (socket, req) => {
+      socket.id = `${++this._connectionId}`
+
+      if(`${req.url}`.indexOf('debug-ws') > 0){
+        this._debugIds[socket.id] = {}
+      }
 
       let subscriber
 
       const listener = (message) => {
         const { model, event, items } = JSON.parse(message)
-        this.toBinaryData({ data:{ model, event, items } })
+        this.toBinaryData({ data:{ model, event, items } }, !!this._debugIds[socket.id])
           .then(data => socket.send(data))
       }
 
@@ -157,7 +165,7 @@ class WSS extends EventEmitter2{
 
         let obj
         try{
-          obj = await this.fromBinaryData(binaryData);
+          obj = await this.fromBinaryData(binaryData, !!this._debugIds[socket.id]);
         }
         catch(e){
           return socket.close(1002, e.message);
@@ -170,7 +178,7 @@ class WSS extends EventEmitter2{
           this._retryCount = 0
         }
         else if(ping){
-          socket.send(await this.toBinaryData({ pong: 1 }))
+          socket.send(await this.toBinaryData({ pong: 1 }, !!this._debugIds[socket.id]))
         }
         else{
           let status = 200
@@ -209,7 +217,7 @@ class WSS extends EventEmitter2{
             _requestId,
             status,
             data
-          }))
+          }, !!this._debugIds[socket.id]))
         }
       });
 
@@ -231,7 +239,7 @@ class WSS extends EventEmitter2{
         }
 
         socket.isAuth = true
-        socket.send(await this.toBinaryData({ auth:true }))
+        socket.send(await this.toBinaryData({ auth:true }, !!this._debugIds[socket.id]))
 
         subscriber = this._client.duplicate()
         await subscriber.connect()
@@ -243,7 +251,7 @@ class WSS extends EventEmitter2{
       if(this._opt.ping !== false){
 
         const ping = async() => {
-          socket.send(await this.toBinaryData({ ping:1 }))
+          socket.send(await this.toBinaryData({ ping:1 }, !!this._debugIds[socket.id]))
           socket.pinging = true
 
           setTimeout(() => {

package/src/utils/wss.mjs

@@ -78,14 +78,14 @@ class WSS extends EventEmitter2{
 
   async fromBinaryData(binaryData){
     const encryptedString = new TextDecoder().decode(binaryData)
-    const decryptedData = this._opt.key ?
+    const decryptedData = this._opt.key && !this._opt.debug ?
       CryptoJS.AES.decrypt(encryptedString, this._opt.key).toString(CryptoJS.enc.Utf8) :
       encryptedString;
     return JSON.parse(decryptedData)
   }
 
   async toBinaryData(obj){
-    const encryptedData = this._opt.key ?
+    const encryptedData = this._opt.key && !this._opt.debug ?
       CryptoJS.AES.encrypt(JSON.stringify(obj), this._opt.key).toString() :
       JSON.stringify(obj);
     return new TextEncoder().encode(encryptedData)

package/src/widgets/Dashboard/SharingModal.vue

@@ -32,7 +32,7 @@
 	  <div class="flex-1 p-6 flex flex-col">
 
       <div v-if="items?.length > 0">
-        <div v-for="item in items" :class="dashboardStyle.button" @click="select(item)">
+        <div v-for="item in items" :class="appStyle.menuItem" @click="select(item)">
           <slot name="item" :item="item">
             <div>{{ item.name }}</div>
           </slot>
@@ -55,7 +55,7 @@ export default{
 
   emits: [ 'select' ],
 
-	inject: [ 'dashboardStyle', 'socket', 'toast' ],
+	inject: [ 'appStyle', 'socket', 'toast' ],
 
   name: 'SharingModal',