@mixd-id/web-scaffold 0.1.230406374 → 0.1.230406377

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406374",
+  "version": "0.1.230406377",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -20,18 +20,29 @@
       "require": "./src/utils/helpers.js",
       "import": "./src/utils/helpers.mjs"
     },
+    "./helpers.js": "./src/utils/helpers.js",
+    "./helpers.mjs": "./src/utils/helpers.mjs",
+    "./queue": "./src/utils/queue.js",
+
     "./wss": {
       "require": "./src/utils/wss.js",
       "import": "./src/utils/wss.mjs"
     },
+    "./wss.js": "./src/utils/wss.js",
+    "./wss.mjs": "./src/utils/wss.mjs",
+
     "./importer": "./src/utils/importer.js",
     "./listpage1": "./src/utils/listpage1.js",
     "./dashboard": "./src/utils/dashboard.js",
     "./listview": "./src/utils/listview.js",
+
     "./preset-selector": {
       "require": "./src/utils/preset-selector.js",
       "import": "./src/utils/preset-selector.mjs"
     },
+    "./preset-selector.js": "./src/utils/preset-selector.js",
+    "./preset-selector.mjs": "./src/utils/preset-selector.mjs",
+
     "./web": "./src/utils/web.js"
   },
   "dependencies": {
@@ -40,6 +51,8 @@
     "@tailwindcss/line-clamp": "^0.4.0",
     "@vueuse/core": "^9.0.2",
     "adm-zip": "^0.5.10",
+    "axios": "^1.7.9",
+    "bcrypt": "^5.1.1",
     "chart.js": "^4.2.1",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",
@@ -58,6 +71,7 @@
     "pinia": "^2.3.0",
     "prismjs": "^1.28.0",
     "redis": "^4.6.13",
+    "sequelize": "^6.37.5",
     "serve-static": "^1.15.0",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.25",

package/src/components/Datepicker.vue

@@ -70,6 +70,7 @@
 				<div class="grid grid-cols-7 gap-2 mt-2">
 					<div v-for="i in 7">{{ getDayOfWeekLabel(i) }}</div>
 					<button type="button" :class="buttonStyle(d.value)"
+                  :disabled="allowedDates && !allowedDates.includes(d.value)"
 									v-for="d in contextMenuDates" @click="setValue(d.value)">
 						{{ d.date }}
 					</button>
@@ -140,6 +141,8 @@ export default{
 
 		readonly: undefined,
 
+    allowedDates: Array,
+
   },
 
   computed:{
@@ -181,17 +184,22 @@ export default{
 			for(let i = 1 ; i <= 42 ; i++){
 				if(startDayOfMonth > 0){
 					startDayOfMonth--
+          const value = dayjsInput.subtract(1, 'month')
+              .format(`YYYY-MM-${(endDateOfLastMonth - startDayOfMonth).toString().padStart(2, '0')}`)
+
 					dates.push({
 						date: endDateOfLastMonth - startDayOfMonth,
-						value: year + '-' + month.toString().padStart(2, '0') + '-' + (endDateOfLastMonth - startDayOfMonth).toString().padStart(2, '0'),
-						type: -1
+						value,
+            type: -1
 					})
 				}
 				else if(currentDate > endDateOfMonth){
-					dates.push({
+          const value = dayjsInput.add(1, 'month').format(`YYYY-MM-${nextDate.toString().padStart(2, '0')}`)
+
+          dates.push({
 						date: nextDate,
-						value: year + '-' + (month + 2).toString().padStart(2, '0') + '-' + nextDate.toString().padStart(2, '0'),
-						type: 1
+						value,
+            type: 1
 					})
 					nextDate++
 				}
@@ -283,21 +291,27 @@ export default{
 }
 .datepicker input[type=radio]{
 	@apply hidden;
-}
+}K
 .datepicker input[type=radio]:checked + label{
 }
 
 .button{
 	@apply rounded-full aspect-square;
 }
-.button:hover{
+.button:not(:disabled){
+  @apply cursor-default;
+}
+.button:disabled{
+  @apply text-text-300;
+}
+.button:not(:disabled):hover{
   @apply bg-primary-200;
 }
 .button.selected{
   @apply bg-primary text-white;
 }
-.button.otherMonth{
-	@apply text-text-300;
+.button:not(:disabled).otherMonth{
+	@apply text-text-400;
 }
 
 .arrow{

package/src/components/List.vue

@@ -270,8 +270,9 @@ import VirtualGrid from "./VirtualGrid.vue";
 import throttle from "lodash/throttle";
 import PresetSelector from "../widgets/PresetSelector.vue";
 import groupBy from "lodash/groupBy";
-import { generatePivotColumns, generateTotalColumns, sortsFn } from "../utils/preset-selector.mjs";
+import {generatePivotColumns, generateTotalColumns, sortsFn} from "../utils/preset-selector.mjs";
 import PresetBar from "../widgets/PresetBar.vue";
+import {queueForLater} from "../utils/helpers.mjs";
 
 export default{
 
@@ -315,7 +316,9 @@ export default{
     toolbar: {
       type: [ String, Boolean ],
       default: true
-    }
+    },
+
+    sorts: Array
   },
 
   methods: {
@@ -394,23 +397,15 @@ export default{
           ((this.data ?? {}).hasNext !== false) &&
           !(this.preset.pivot ?? {}).enabled) {
 
-        const afterItem = this.data.items[this.data.items.length - 1]
-        console.log('#next', afterItem.id, afterItem.lastMessageAt)
+        const afterItem = this.dataItems[this.dataItems.length - 1]
 
         this.readyState = 4
         this.socket.send(this.src, {
           ...this.preset,
           itemsPerPage: this.data.itemsPerPage,
-          afterItem: this.data.items[this.data.items.length - 1],
+          afterItem,
         })
             .then(data => {
-              const firstItem = data.items[0]
-              const lastItem = data.items[data.items.length - 1]
-              console.log('#loaded',
-                  firstItem?.id, firstItem?.lastMessageAt,
-                  lastItem?.id, lastItem?.lastMessageAt,
-                  data.items.length)
-
               this.data.items.push(...data.items)
               this.loadEnums(data.items)
             })
@@ -595,6 +590,21 @@ export default{
       }
     },
 
+    loadQueued(items){
+      const key = items[0] && items[0].uid ? 'uid' : 'id'
+
+      this.socket.send(this.src, {
+        ...this.preset,
+        [key]: items.map(item => item[key])
+      })
+          .then(({ items:nextItems }) => {
+            nextItems.forEach(item => this.$util.unshift(this.data.items, item, { highlight: true }))
+
+            const destroyedItems = items.filter(_ => !nextItems.find(i => i[key] === _[key]))
+            this.$util.remove(this.data.items, destroyedItems)
+          })
+    },
+
     onSignal(event, items){
       if(this.pivotEnabled) return
       if(!Array.isArray(items) || items.length < 1) return
@@ -606,18 +616,7 @@ export default{
           break
 
         default:
-          const key = items[0] && items[0].uid ? 'uid' : 'id'
-
-          this.socket.send(this.src, {
-            ...this.preset,
-            [key]: items.map(item => item[key])
-          })
-              .then(({ items:nextItems }) => {
-                nextItems.forEach(item => this.$util.unshift(this.data.items, item, { highlight: true }))
-
-                const destroyedItems = items.filter(_ => !nextItems.find(i => i[key] === _[key]))
-                this.$util.remove(this.data.items, destroyedItems)
-              })
+          this.queue(items)
           break
       }
 
@@ -816,6 +815,10 @@ export default{
     }
 
     window.addEventListener('keydown', this.onKeyDown)
+
+    this.queue = queueForLater({
+      pop: this.loadQueued
+    })
   },
 
   unmounted() {
@@ -910,7 +913,13 @@ export default{
     },
 
     dataItems(){
-      if((this.preset.sorts ?? []).length > 0){
+
+      if((this.sorts ?? []).length > 0){
+        return (this.data.items ?? []).sort((a, b) => {
+          return sortsFn(a, b, this.sorts, 0)
+        })
+      }
+      else if((this.preset.sorts ?? []).length > 0){
         return (this.data.items ?? []).sort((a, b) => {
           return sortsFn(a, b, this.preset.sorts, 0)
         })
@@ -978,6 +987,7 @@ export default{
       enumCache: {},
       extItems: null,
       lastEnumItems: null,
+      queue: null,
     }
   },
 

package/src/components/PresetSelectorFilterItem.vue

@@ -6,7 +6,7 @@
         <div class="flex-1 flex flex-row gap-2">
           <Dropdown v-model="value.operator"
                     :readonly="readonly"
-                    :class="![ 'yesterday', 'today', 'thisWeek', 'thisMonth', 'lastMonth', 'thisYear' ].includes(value.operator) ? 'w-[100px]' : 'w-full'"
+                    :class="![ 'yesterday', 'today', 'thisWeek', 'thisMonth', 'lastMonth', 'thisYear', 'null' ].includes(value.operator) ? 'w-[100px]' : 'w-full'"
                     @change="apply">
             <option value="=">=</option>
             <option value=">">&gt;</option>
@@ -20,8 +20,9 @@
             <option value="thisMonth">This Month</option>
             <option value="lastMonth">Last Month</option>
             <option value="thisYear">This Year</option>
+            <option value="null">No Value</option>
           </Dropdown>
-          <div v-if="![ 'yesterday', 'today', 'thisWeek', 'thisMonth', 'lastMonth', 'thisYear' ].includes(value.operator)"
+          <div v-if="![ 'yesterday', 'today', 'thisWeek', 'thisMonth', 'lastMonth', 'thisYear', 'null' ].includes(value.operator)"
                class="flex-1 flex flex-row gap-2">
             <Datepicker class="flex-1"
                         mode="popup"

package/src/index.js

@@ -393,6 +393,7 @@ export default{
 
     const privateVars = {}
 
+    app.config.globalProperties.$t = t => t
     app.config.globalProperties.uniqid = uniqid
     app.config.globalProperties.formatDate = formatDate
     app.config.globalProperties.$download = download

package/src/utils/helpers.js

@@ -1,10 +1,3 @@
-const md5 = require("md5");
-const fs = require("fs");
-const { Op } = require('sequelize')
-const axios = require('axios')
-const dayjs = require('dayjs')
-
-
 const ceil = (num, precision = 0) => {
   var p = Math.pow(10, precision)
   var n = (num * p) * (1 + Number.EPSILON)
@@ -32,6 +25,7 @@ const ftWildcard = (key) => {
 }
 
 const moveFile = function(oldPath, newPath, callback) {
+  const fs = require("fs");
 
   fs.rename(oldPath, newPath, function (err) {
     if (err) {
@@ -46,6 +40,8 @@ const moveFile = function(oldPath, newPath, callback) {
   });
 
   function copy() {
+    const fs = require("fs");
+
     var readStream = fs.createReadStream(oldPath);
     var writeStream = fs.createWriteStream(newPath);
 
@@ -96,6 +92,9 @@ const saveBase64 = async(data, dir = '/storage/files/images') => {
 
 const saveBuffer = async(buffer, dir = '/storage/files/images') => {
 
+  const fs = require("fs");
+  const md5 = require('md5')
+
   const { fileTypeFromBuffer } = await import('file-type')
 
   const type = await fileTypeFromBuffer(buffer)
@@ -111,6 +110,7 @@ const saveBuffer = async(buffer, dir = '/storage/files/images') => {
 }
 
 const saveFromUrl = async(url, dir = '/storage/files/images') => {
+  const axios = require('axios')
 
   const res = await axios({
     method: 'GET',
@@ -153,6 +153,8 @@ const strVars = (text, vars, opt = { emptyUndefined:true }) => {
 
 const writeStorage = (path, content, append = false) => {
 
+  const fs = require("fs");
+
   if(path.startsWith('/')) path = path.substring(1)
 
   if(append){
@@ -195,6 +197,8 @@ const sequelizeChunk = async (model, opt, callback, chunkSize = 5000) => {
 
 const getPresetSortWhereParams = (order, afterItem) => {
 
+  const { Op } = require('sequelize')
+
   if(order.filter((_) => _[0] === 'id').length <= 0){
     order.push([ 'id', 'desc' ])
   }
@@ -505,6 +509,7 @@ const datasourceLoad = async ({ datasource, Models }) => {
 }
 
 const dayTimeRange = (params, value) => {
+  const dayjs = require('dayjs')
 
   /*params = {
     '*': [ [ '08:00', '12:00' ], [ '13:00', '18:00' ] ],
@@ -543,6 +548,18 @@ const removeUnderscoredKey = (obj) => {
   }
 }
 
+const hashMake = async (text) => {
+  const bcrypt = require('bcrypt')
+
+  return bcrypt.hash(text + (process.env.APP_KEY ?? ''), 10)
+}
+
+const hashCheck = (text, hash) => {
+  const bcrypt = require('bcrypt')
+
+  return bcrypt.compare(text + (process.env.APP_KEY ?? ''), hash)
+}
+
 module.exports = {
   capitalize,
   ceil,
@@ -572,5 +589,7 @@ module.exports = {
   datasourceGet,
   datasourceLoad,
   dayTimeRange,
-  removeUnderscoredKey
+  removeUnderscoredKey,
+  hashMake,
+  hashCheck
 }

package/src/utils/helpers.mjs

@@ -390,6 +390,35 @@ const invokeAfterIdle = (callback, delay = 1300) => {
   }
 }
 
+const queueForLater = (params) => {
+
+  const instance = {
+    delay: 1500,
+    ...params,
+
+    items: [],
+    timeoutId: null,
+
+    run: () => {
+      const items = instance.items.splice(0, instance.items.length);
+      typeof instance.pop === 'function' ? instance.pop(items) : null;
+      instance.timeoutId = null
+    },
+
+    queue(item) {
+      if(Array.isArray(item))
+        instance.items.push(...item)
+      else
+        instance.items.push(item)
+
+      if(!instance.timeoutId)
+        instance.timeoutId = window.setTimeout(instance.run, instance.delay);
+    }
+  }
+
+  return instance.queue
+}
+
 
 export {
   capitalize,
@@ -416,7 +445,8 @@ export {
   unslugAndCapitalize,
   applyDatasourceReplacer,
   strVars,
-  invokeAfterIdle
+  invokeAfterIdle,
+  queueForLater
 }
 
 function observeInit(){

package/src/utils/preset-selector.js

@@ -113,6 +113,16 @@ const getValue = (filter, opt) => {
             }
           break
 
+        case 'null':
+          withoutKey ?
+            whereObj = {
+              [Op.eq]: null
+            } :
+            whereObj[key] = {
+              [Op.eq]: null
+            }
+          break
+
         case 'between':
           withoutKey ?
             whereObj = {
@@ -472,6 +482,12 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             }
             break
 
+          case 'null':
+            whereObj = {
+              [key]: null
+            }
+            break
+
           case 'between':
             whereObj = {
               [key]:{

package/src/utils/queue.js

@@ -0,0 +1,63 @@
+const redis = require('redis');
+const client = redis.createClient();
+client.connect()
+  .then(() => console.log('Connected to Redis'))
+  .catch((err) => console.error('Redis connection error:', err));
+
+const queues = {}
+
+const sleep = ms => new Promise(r => setTimeout(r, ms))
+
+const processQueue = async(key) => {
+  const queue = queues[key]
+  if(queue.processing) return
+  queue.processing = true
+
+  const result = await client.hGetAll(key);
+  const keys = Object.keys(result ?? {})
+  if(keys.length < 1){
+    queue.processing = false
+    return
+  }
+
+  const itemKeys = keys.splice(0, queue.concurrency)
+  if(itemKeys.length > 0){
+    await Promise.all(itemKeys.map(async itemKey => {
+      try{
+        const obj = JSON.parse(await client.hGet(key, itemKey))
+        await queue.pop(obj)
+      }
+      finally{
+        await client.hDel(key, itemKey)
+      }
+    }))
+
+    await sleep(queue.interval ?? 0)
+  }
+  queue.processing = false
+
+  await processQueue(key)
+}
+
+const queueItem = async(obj, opt) => {
+  if(!queues[opt.key]){
+    queues[opt.key] = {
+      interval: 16,
+      concurrency: 1,
+
+      ...opt
+    }
+
+    await client.del(opt.key)
+  }
+
+  const { key } = opt
+  const subKey = `${key}-${new Date().getTime() + Math.random()}`
+  await client.hSet(key, subKey, JSON.stringify(obj));
+
+  processQueue(key).then()
+}
+
+module.exports = {
+  queueItem
+}

package/src/utils/wss.js

@@ -222,7 +222,14 @@ class WSS extends EventEmitter2{
 
       const token = req.headers['sec-websocket-protocol'];
       try{
-        await this._opt.auth(token, socket)
+        if(this._opt.auth){
+          await this._opt.auth(token, socket)
+        }
+
+        for(let fn of this._authFn) {
+          await fn(token, socket)
+        }
+
         socket.isAuth = true
         socket.send(await this.toBinaryData({ auth:true }))
 
@@ -230,7 +237,7 @@ class WSS extends EventEmitter2{
         await subscriber.connect()
       }
       catch(e){
-        return socket.close(1002, e.message);
+        return socket.close(1002, (e.message ?? '').substring(0, 123));
       }
 
       if(this._opt.ping !== false){
@@ -271,6 +278,10 @@ class WSS extends EventEmitter2{
     this._reqFn.push(fn)
   }
 
+  use(fn){
+    this.req.apply(this, arguments)
+  }
+
   async broadcast(channels, { model, event, items }){
 
     if(!Array.isArray(channels))

package/src/utils/wss.mjs

@@ -69,7 +69,6 @@ class WSS extends EventEmitter2{
           this.emit('visibilitychange', this._instance.readyState, [])
 
           this.ping().catch(e => {
-            console.log('ping error', e)
             this.reconnect().then()
           })
         }
@@ -128,8 +127,8 @@ class WSS extends EventEmitter2{
 
           if(this._opt.debug){
             status === 200 ?
-              console.log(`${new Date().getTime() - t1}ms`, `l:${JSON.stringify(data ?? '').length}`, path, params, data) :
-              console.error(`${new Date().getTime() - t1}ms`, `l:${JSON.stringify(data ?? '').length}`, path, params, data)
+              console.log(`${path} (${new Date().getTime() - t1}ms)`, params, data, `l:${JSON.stringify(data ?? '').length}`) :
+              console.error(`${path} (${new Date().getTime() - t1}ms)`, params, data, `l:${JSON.stringify(data ?? '').length}`)
           }
         }
       }
@@ -185,6 +184,7 @@ class WSS extends EventEmitter2{
 
   sendSync(path, params, cb, err, override){
     if(!this._instance || this._instance.readyState > 1){
+      this._pendingSend.push({ path, params, cb, err })
       return
     }
     else if(!this._instance.isAuth){