@mixd-id/web-scaffold 0.1.230406261 → 0.1.230406263

package/package.json

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

package/src/components/Chart.vue

@@ -480,8 +480,6 @@ export default{
 
 .comp{
   @apply flex flex-col p-2;
-  @apply backdrop-blur-lg;
-  padding-bottom: 50px;
 }
 
 </style>

package/src/components/List.vue

@@ -133,11 +133,12 @@
 <script>
 
 import VirtualTable from "./VirtualTable.vue";
+import VirtualGrid from "./VirtualGrid.vue";
 import throttle from "lodash/throttle";
 import PresetSelector from "../widgets/PresetSelector.vue";
 import groupBy from "lodash/groupBy";
-import {capitalize} from "lodash";
 import {sortsFn} from "../utils/preset-selector.mjs";
+import PresetBar from "../widgets/PresetBar.vue";
 
 export default{
 
@@ -181,6 +182,11 @@ export default{
 
     load(){
       if(this.src){
+
+        if(!this.preset.columns){
+          this.preset.columns = JSON.parse(JSON.stringify(this.config.columns))
+        }
+
         return this.socket.send(this.src, {
           ...this.preset,
           itemsPerPage: this.data.itemsPerPage,
@@ -354,7 +360,7 @@ export default{
 
   },
 
-  components: {PresetSelector, VirtualTable},
+  components: {PresetBar, PresetSelector, VirtualGrid, VirtualTable},
 
   emits: [ 'after-load', 'open-preset' ],
 

package/src/components/Modal.vue

@@ -311,6 +311,10 @@ export default{
 	@apply panel-400;
 	@apply border-[1px] border-text-50 z-20 flex max-h-[90vh];
 	@apply rounded-xl overflow-hidden transition-all;
+  background-color: rgba(255, 255, 255, .6)
+}
+html[data-theme='dark'] .modal{
+  background-color: rgba(0, 0, 0, .3)
 }
 
 .modal.v-show{

package/src/components/PresetSelectorFilterItem.vue

@@ -6,7 +6,7 @@
         <div class="flex-1 flex flex-row gap-2">
           <Dropdown v-model="value.operator"
                     class="w-[100px]"
-                    @change="value.value ? $emit('change') : null">
+                    @change="apply">
             <option value="=">=</option>
             <option value=">">&gt;</option>
             <option value=">=">&gt;=</option>
@@ -24,12 +24,12 @@
             <Datepicker class="flex-1"
                         mode="popup"
                         v-model="value.value"
-                        @change="value.operator ? $emit('change') : null" />
+                        @change="apply" />
             <Datepicker v-if="value.operator === 'between'"
                         class="flex-1"
                         mode="popup"
                         v-model="value.value2"
-                        @change="value.operator ? $emit('change') : null" />
+                        @change="apply" />
           </div>
         </div>
       </div>
@@ -37,7 +37,7 @@
       <div v-else-if="type === 'number'" class="flex flex-row gap-2">
         <Dropdown v-model="value.operator"
                   class="w-[100px]"
-                  @change="value.value ? $emit('change') : null">
+                  @change="apply">
           <option value="=">=</option>
           <option value=">">&gt;</option>
           <option value=">=">&gt;=</option>
@@ -48,18 +48,18 @@
         </Dropdown>
         <Textbox v-model="value.value"
                  class="flex-1"
-                 @keyup.enter="value.operator ? $emit('change') : null"
-                 @blur="value.operator ? $emit('change') : null" />
+                 @keyup.enter="apply"
+                 @blur="apply" />
       </div>
 
       <div v-else-if="type === 'boolean'" class="flex flex-row gap-2">
-        <Radio :name="value.key" :value="true" v-model="value.value" @change="$emit('change')">True</Radio>
-        <Radio :name="value.key" :value="false" v-model="value.value" @change="$emit('change')">False</Radio>
+        <Radio :name="value.key" :value="true" v-model="value.value" @change="apply">True</Radio>
+        <Radio :name="value.key" :value="false" v-model="value.value" @change="apply">False</Radio>
       </div>
 
       <div v-else class="flex flex-row gap-2">
         <Dropdown v-model="value.operator" class="w-[100px]"
-                  @change="value.value ? $emit('change') : null">
+                  @change="apply">
           <option value="eq">Equal</option>
           <option value="not">Not Equal</option>
           <option value="startsWith">Starts With</option>
@@ -72,8 +72,8 @@
         </Dropdown>
         <Textbox v-model="value.value"
                  class="flex-1"
-                 @keyup.enter="value.operator ? $emit('change') : null"
-                 @blur="value.operator ? $emit('change') : null" />
+                 @keyup.enter="apply"
+                 @blur="apply" />
       </div>
 
     </div>
@@ -94,9 +94,26 @@ export default{
 
   },
 
+  computed:{
+
+    valueRequired(){
+      return (!(['yesterday', 'today', 'thisWeek', 'thisMonth', 'thisYear'].includes(this.value.operator) ||
+          this.type === 'boolean'));
+    }
+
+  },
+
   methods: {
 
+    apply(){
+
+      if((!this.valueRequired && this.value.operator) ||
+          (this.value.operator && this.value.operator !== 'between' && this.value.value) ||
+          (this.value.operator === 'between' && !!this.value.value && !!this.value.value2)){
+        this.$emit('change')
+      }
 
+    }
 
   }
 

package/src/utils/preset-selector.mjs

@@ -29,8 +29,6 @@ const pickColumns = function(columns, keys){
       return acc
     }, {})
 
-  console.log('#1', groupedColumns)
-
   for(let key of keys){
     if(groupedColumns[key]){
       groupedColumns[key].visible = true

package/src/utils/wss.js

@@ -95,7 +95,7 @@ class WSS extends EventEmitter2{
     this._opt = opt
     this._instance = new WebSocket.Server(opt);
 
-    this._instance.on('connection', (socket, req) => {
+    this._instance.on('connection', async (socket, req) => {
 
       socket.leave = (channel) => {
         if((socket.channels ?? {})[channel]){
@@ -128,6 +128,7 @@ class WSS extends EventEmitter2{
       }
 
       socket.on('message', async (binaryData) => {
+        if(!socket.isAuth) return
 
         let obj
         try{
@@ -143,17 +144,6 @@ class WSS extends EventEmitter2{
         let data
         switch(path){
 
-          case '_auth':
-            try{
-              for(let fn of this._authFn){
-                await fn(params, socket)
-              }
-            }
-            catch(e){
-              return socket.close(1002, e.message);
-            }
-            break
-
           case 'ping':
             data = { type:'pong' }
             break
@@ -192,6 +182,16 @@ class WSS extends EventEmitter2{
       socket.on('close', (e) => {
         this.emit('close', e, socket)
       });
+
+      const token = req.headers['sec-websocket-protocol'];
+      try{
+        await this._opt.auth(token, socket)
+        socket.isAuth = true
+        socket.send(await this.toBinaryData({ auth:true }))
+      }
+      catch(e){
+        return socket.close(1002, e.message);
+      }
     })
   }
 

package/src/utils/wss.mjs

@@ -46,7 +46,6 @@ class WSS extends EventEmitter2{
   _callbacks = {}
   _pendingSend = []
   _lastBlurAt
-  _readyState = 0
 
   constructor(opt) {
     super();
@@ -55,19 +54,16 @@ class WSS extends EventEmitter2{
       auth: {},
       debug: false,
       key: '',
-      onConnect: null,
-      onConnectError: null,
-      onDisconnect: null,
       timeout: 30000,
       url: '',
     }, opt ?? {})
 
-    if(typeof window !== 'undefined'){
+    /*if(typeof window !== 'undefined'){
       window.addEventListener('online', this._onOnlineChanged)
       window.addEventListener('offline', this._onOnlineChanged)
       window.addEventListener('blur', this._onBlur)
       window.addEventListener('focus', this._onFocus)
-    }
+    }*/
 
     this.connect().then()
   }
@@ -113,31 +109,24 @@ class WSS extends EventEmitter2{
 
   async connect(reconnect = false){
 
-    this._readyState = 0
+    this._instance = new WebSocket(this._opt.url, this._opt.token)
 
-    this._instance = new WebSocket(this._opt.url)
     this._instance.binaryType = 'arraybuffer';
-    this._instance.onopen = () => {
-      this._readyState = 2
-      this.send('_auth', this._opt.auth)
-        .then(() => {
-          this._readyState = 1
-
-          reconnect ? this.emit('reconnect', null, []) : this.emit('connect', null, [])
-
-          for(let sendParams of this._pendingSend){
-            this.sendSync(sendParams.path, sendParams.params, sendParams.cb, sendParams.err)
-          }
-          this._pendingSend = []
-        })
-    };
 
     this._instance.onmessage = async (event) => {
       const obj = await this.fromBinaryData(event.data);
 
-      const { _requestId, status, data } = obj
+      const { _requestId, status, data, auth } = obj
+
+      if(auth){
+        reconnect ? this.emit('reconnect', null, []) : this.emit('connect', null, [])
 
-      if(_requestId){
+        for(let sendParams of this._pendingSend){
+          this.sendSync(sendParams.path, sendParams.params, sendParams.cb, sendParams.err)
+        }
+        this._pendingSend = []
+      }
+      else if(_requestId){
         if(this._callbacks[_requestId]){
           const { cb, err, path, params, t1 } = this._callbacks[_requestId]
           status === 200 ? cb(data) : err(data)
@@ -160,10 +149,13 @@ class WSS extends EventEmitter2{
     };
 
     this._instance.onerror = (e) => {
+      console.log('onerror', e)
+
       this.emit('error', e, [])
     }
 
     this._instance.onclose = (e) => {
+      console.log('onclose', e)
 
       switch(e.code){
 
@@ -189,10 +181,15 @@ class WSS extends EventEmitter2{
   }
 
   sendSync(path, params, cb, err, override){
-    if(this._instance.readyState !== 1 || (path !== '_auth' && this._readyState !== 1)){
+
+    if(this._instance.readyState === 0){
       this._pendingSend.push({ path, params, cb, err })
       return
     }
+    else if(this._instance.readyState !== 1){
+      console.log('unable to send, ready state not 1', this._instance.readyState)
+      return
+    }
 
     /*if(!navigator.onLine){
       err({ message: 'Unable to send, network disconnected' })
@@ -207,7 +204,9 @@ class WSS extends EventEmitter2{
       params
     })
       .then(async(dataUrlObj) => {
+
         const binaryData = await this.toBinaryData(dataUrlObj)
+        console.log('sendSync', this._instance.readyState, dataUrlObj)
         this._instance.send(binaryData)
 
         this._callbacks[_requestId] = {

package/src/widgets/ColumnSelector.vue

@@ -1,7 +1,7 @@
 <template>
-	<Modal :state="isOpen" width="320" height="400" class="bg-base-500">
+	<Modal :state="isOpen" width="320" height="400">
 	  <template v-slot:head>
-	    <div class="relative p-5 bg-base-400">
+	    <div class="relative p-5">
 	      <h3>{{ $t('Select Column') }}</h3>
 	      <div class="absolute top-0 right-0 p-2">
 	        <button type="button" class="p-2" @click="close">
@@ -12,11 +12,14 @@
 	      </div>
 	    </div>
 	  </template>
-	  <div class="flex-1">
+    <template #foot>
+      <div class="pb-6"></div>
+    </template>
+	  <div class="flex-1 px-3">
 
-      <div class="flex flex-col divide-y divide-border-50">
+      <div class="flex flex-col divide-y divide-text-50 bg-base-400 border-[1px] border-text-50 rounded-lg overflow-hidden">
         <button v-for="column in columns"
-                type="button" class="p-3 px-5 text-left hover:bg-primary-100"
+                type="button" class="p-3 px-5 text-left hover:bg-primary hover:text-white"
                 @click="select(column)">
           {{ column.label ? column.label : column.key }}
         </button>

package/src/widgets/PresetBar.vue

@@ -78,7 +78,7 @@
         <Tabs :items="tabItems[config.type ?? 'list']" v-model="config.presetBarTabIndex" />
       </div>
 
-      <div class="flex-1 overflow-y-auto bg-base-500 dark:bg-base-400">
+      <div class="flex-1 overflow-y-auto">
 
         <div v-if="config.presetBarTabIndex === 1" class="flex-1 flex flex-col p-5">
           <ListItem :items="presetColumns"
@@ -102,7 +102,7 @@
 
         <div v-else-if="config.presetBarTabIndex === 2" class="flex-1 flex flex-col p-5">
 
-          <div class="flex-1 flex flex-col">
+          <div class="flex-1 flex flex-col gap-6">
 
             <div v-for="(filter, idx) in preset.filters">
 
@@ -247,7 +247,7 @@
                 </button>
               </div>
               <ListItem :items="xAxis"
-                        class="mt-2 h-[90px] border-[1px] border-border-200 bg-base-400 rounded-lg p-0.5"
+                        class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-1"
                         body-class="flex flex-col gap-1"
                         @reorder="(from, to) => { xAxis.splice(to, 0, xAxis.splice(from, 1)[0]); }">
                 <template v-slot="{ item, index }">
@@ -287,7 +287,7 @@
                 </button>
               </div>
               <ListItem :items="yAxis"
-                        class="mt-2 h-[90px] border-[1px] border-border-200 bg-base-400 rounded-lg p-0.5"
+                        class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-1"
                         body-class="flex flex-col gap-1"
                         @reorder="(from, to) => { yAxis.splice(to, 0, yAxis.splice(from, 1)[0]); }">
                 <template v-slot="{ item, index }">
@@ -338,7 +338,7 @@
                 </button>
               </div>
               <ListItem :items="yAxis"
-                        class="mt-2 h-[90px] border-[1px] border-border-200 bg-base-400 rounded-lg p-0.5"
+                        class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
                         body-class="flex flex-col gap-1"
                         @reorder="(from, to) => { yAxis.splice(to, 0, yAxis.splice(from, 1)[0]); }">
                 <template v-slot="{ item, index }">
@@ -370,7 +370,7 @@
                 </button>
               </div>
               <ListItem :items="xAxis"
-                        class="mt-2 h-[90px] border-[1px] border-border-200 bg-base-400 rounded-lg p-0.5"
+                        class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
                         body-class="flex flex-col gap-1"
                         @reorder="(from, to) => { xAxis.splice(to, 0, xAxis.splice(from, 1)[0]); }">
                 <template v-slot="{ item, index }">
@@ -448,7 +448,7 @@
               </div>
               <ListItem :items="presetPivot.rows"
                         @reorder="(from, to) => { presetPivot.rows.splice(to, 0, presetPivot.rows.splice(from, 1)[0]); apply() }"
-                        class="mt-2 h-[90px] border-[1px] border-border-200 bg-base-400 rounded-lg p-0.5">
+                        class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5">
                 <template v-slot="{ item, index }">
                   <div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
                     <div data-reorder v-if="(presetPivot.rows ?? []).length > 1">
@@ -484,7 +484,7 @@
               </div>
               <ListItem :items="presetPivot.values"
                         @reorder="(from, to) => { presetPivot.values.splice(to, 0, presetPivot.values.splice(from, 1)[0]); }"
-                        class="mt-2 h-[90px] border-[1px] border-border-200 bg-base-400 rounded-lg p-0.5">
+                        class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5">
                 <template v-slot="{ item, index }">
                   <div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
                     <div data-reorder v-if="(presetPivot.values ?? []).length > 1">