@mixd-id/web-scaffold 0.1.230406373 → 0.1.230406375

package/package.json

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

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{
 
@@ -370,10 +371,10 @@ export default{
             .then(data => {
               const firstItem = data.items[0]
               const lastItem = data.items[data.items.length - 1]
-              console.log('#Loaded',
+              console.log('#loaded',
                   firstItem?.id, firstItem?.lastMessageAt,
                   lastItem?.id, lastItem?.lastMessageAt,
-                  data.length)
+                  data.items.length)
 
               generatePivotColumns(this.preset, data.items)
               generateTotalColumns(this.preset, data.items)
@@ -395,7 +396,7 @@ export default{
           !(this.preset.pivot ?? {}).enabled) {
 
         const afterItem = this.data.items[this.data.items.length - 1]
-        console.log('#Next', afterItem.id, afterItem.lastMessageAt)
+        console.log('#next', afterItem.id, afterItem.lastMessageAt)
 
         this.readyState = 4
         this.socket.send(this.src, {
@@ -406,10 +407,10 @@ export default{
             .then(data => {
               const firstItem = data.items[0]
               const lastItem = data.items[data.items.length - 1]
-              console.log('#Loaded',
+              console.log('#loaded',
                   firstItem?.id, firstItem?.lastMessageAt,
                   lastItem?.id, lastItem?.lastMessageAt,
-                  data.length)
+                  data.items.length)
 
               this.data.items.push(...data.items)
               this.loadEnums(data.items)
@@ -595,6 +596,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 +622,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 +821,10 @@ export default{
     }
 
     window.addEventListener('keydown', this.onKeyDown)
+
+    this.queue = queueForLater({
+      pop: this.loadQueued
+    })
   },
 
   unmounted() {
@@ -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/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]:{