@mixd-id/web-scaffold 0.1.230406315 → 0.1.230406317

package/package.json

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

package/src/components/List.vue

@@ -610,17 +610,42 @@ export default{
                   filters.push({
                     key,
                     value: [{
-                      operator: '>=',
-                      value: value[0] + ':00',
+                      operator: '=',
+                      value: value[0].split(':')[0],
                       fn: 'format_hour'
                     }]
                   })
+                  break
+
+                case 'date':
                   filters.push({
                     key,
                     value: [{
-                      operator: '<=',
-                      value: value[1] + ':59',
-                      fn: 'format_hour'
+                      operator: '=',
+                      value: value,
+                      fn: 'format_date'
+                    }]
+                  })
+                  break
+
+                case 'month':
+                  filters.push({
+                    key,
+                    value: [{
+                      operator: '=',
+                      value: value,
+                      fn: 'format_month'
+                    }]
+                  })
+                  break
+
+                case 'year':
+                  filters.push({
+                    key,
+                    value: [{
+                      operator: '=',
+                      value: value,
+                      fn: 'format_year'
                     }]
                   })
                   break
@@ -933,7 +958,7 @@ export default{
 }
 
 .pv-green1, .pv-green2, .pv-green3, .pv-green4, .pv-green5{
-  @apply rounded-lg text-center text-text cursor-pointer;
+  @apply rounded-lg text-right text-text cursor-pointer;
 }
 .pv-green1{
   background-color: #d3f3df;
@@ -972,7 +997,7 @@ html[data-theme="dark"] .pv-green5{
 }
 
 .pv-red1, .pv-red2, .pv-red3, .pv-red4, .pv-red5{
-  @apply rounded-lg text-center text-text cursor-pointer;
+  @apply rounded-lg text-right text-text cursor-pointer;
 }
 .pv-red1{
   background-color: #fce9e9;
@@ -1011,7 +1036,7 @@ html[data-theme="dark"] .pv-red5{
 }
 
 .pv-blue1, .pv-blue2, .pv-blue3, .pv-blue4, .pv-blue5{
-  @apply rounded-lg text-center text-text cursor-pointer;
+  @apply rounded-lg text-right text-text cursor-pointer;
 }
 .pv-blue1{
   background-color: #e9effd;
@@ -1050,7 +1075,7 @@ html[data-theme="dark"] .pv-blue5{
 }
 
 .pv-yellow1, .pv-yellow2, .pv-yellow3, .pv-yellow4, .pv-yellow5{
-  @apply rounded-lg text-center text-text cursor-pointer;
+  @apply rounded-lg text-right text-text cursor-pointer;
 }
 .pv-yellow1{
   background-color: #fdf7e6;
@@ -1089,7 +1114,7 @@ html[data-theme="dark"] .pv-yellow5{
 }
 
 .pv-fuchsia1, .pv-fuchsia2, .pv-fuchsia3, .pv-fuchsia4, .pv-fuchsia5{
-  @apply rounded-lg text-center text-text cursor-pointer;
+  @apply rounded-lg text-right text-text cursor-pointer;
 }
 .pv-fuchsia1{
   background-color: #f6e8f7;
@@ -1128,7 +1153,7 @@ html[data-theme="dark"] .pv-fuchsia5{
 }
 
 .pv-gradient1, .pv-gradient2, .pv-gradient3, .pv-gradient4, .pv-gradient5, .pv-default{
-  @apply rounded-lg text-center text-text cursor-pointer;
+  @apply rounded-lg text-right text-text cursor-pointer;
 }
 .pv-gradient1{
   @apply bg-gradient-to-r from-cyan-500 to-blue-500;

package/src/components/VirtualTable.vue

@@ -346,6 +346,7 @@ export default{
 			if(!column.align){
 				switch(column.type){
 					case 'currency':
+					case 'number':
 						align = 'right'
 						break
 
@@ -481,6 +482,7 @@ export default{
 			if(!column.align){
 				switch(column.type){
 					case 'currency':
+					case 'number':
 						align = 'right'
 						break
 				}

package/src/utils/preset-selector.js

@@ -1,13 +1,13 @@
 const groupBy = require("lodash/groupBy");
 const dayjs = require("dayjs");
-const {Op, literal, fn, DataTypes} = require("sequelize");
+const {Op, literal, fn, col, where, DataTypes} = require("sequelize");
 const {ftWildcard} = require("./helpers");
 const util = require("util");
 
 const getValue = (filter, opt) => {
 
   const { columns, withoutKey = false } = opt
-  const { key, operator, fn } = filter
+  const { key, operator } = filter
   const keyColumns = groupBy(columns, 'key')
   const type = ((keyColumns[key] ?? [])[0] ?? {}).type
 
@@ -20,39 +20,17 @@ const getValue = (filter, opt) => {
       break
 
     case 'number':
-    case 'currency':
       switch(operator) {
         case '=':
           withoutKey ? whereObj = { [Op.eq]:filter.value } : whereObj[key] = filter.value
           break
 
         case '>':
-          withoutKey ?
-            whereObj = { [Op.gt]:filter.value } :
-            whereObj[key] = {
-              [Op[operator]]: filter.value
-            }
-          break
-
         case '>=':
-          withoutKey ?
-            whereObj = { [Op.gte]:filter.value } :
-            whereObj[key] = {
-              [Op[operator]]: filter.value
-            }
-          break
-
         case '<':
-          withoutKey ?
-            whereObj = { [Op.lt]:filter.value } :
-            whereObj[key] = {
-              [Op[operator]]: filter.value
-            }
-          break
-
         case '<=':
           withoutKey ?
-            whereObj = { [Op.lte]:filter.value } :
+            whereObj = { [Op[operator]]:filter.value } :
             whereObj[key] = {
               [Op[operator]]: filter.value
             }
@@ -60,11 +38,11 @@ const getValue = (filter, opt) => {
 
         case 'in':
           withoutKey ?
-            whereObj = { [Op.in]: (!Array.isArray(filter.value) ? filter.value.split(',') : filter.value)
+            whereObj = { [Op.in]: filter.value.split(',')
                 .map(_ => parseInt(_))
                 .filter(_ => !isNaN(_)) } :
             whereObj[key] = {
-              [Op.in]: (!Array.isArray(filter.value) ? filter.value.split(',') : filter.value)
+              [Op.in]: filter.value.split(',')
                 .map(_ => parseInt(_))
                 .filter(_ => !isNaN(_))
             }
@@ -119,22 +97,6 @@ const getValue = (filter, opt) => {
             }
           break
 
-        case 'lastMonth':
-          withoutKey ?
-            whereObj = {
-              [Op.between]: [
-                dayjs().subtract(1, 'month').startOf('month').format('YYYY-MM-DD 00:00:00'),
-                dayjs().subtract(1, 'month').endOf('month').format('YYYY-MM-DD 23:59:59'),
-              ]
-            } :
-            whereObj[key] = {
-              [Op.between]: [
-                dayjs().subtract(1, 'month').startOf('month').format('YYYY-MM-DD 00:00:00'),
-                dayjs().subtract(1, 'month').endOf('month').format('YYYY-MM-DD 23:59:59'),
-              ]
-            }
-          break
-
         case 'thisYear':
           withoutKey ?
             whereObj = {
@@ -214,26 +176,17 @@ const getValue = (filter, opt) => {
           break
 
         case '<=':
-          switch(fn){
-
-            case 'format_hour':
-              //console.log('<=', filter.value)
-              break
-
-            default:
-              withoutKey ?
-                whereObj = {
-                  [Op.lte]: [
-                    dayjs(filter.value).format('YYYY-MM-DD 23:59:59'),
-                  ]
-                } :
-                whereObj[key] = {
-                  [Op.lte]: [
-                    dayjs(filter.value).format('YYYY-MM-DD 23:59:59'),
-                  ]
-                }
-          }
-
+          withoutKey ?
+            whereObj = {
+              [Op.lte]: [
+                dayjs(filter.value).format('YYYY-MM-DD 23:59:59'),
+              ]
+            } :
+            whereObj[key] = {
+              [Op.lte]: [
+                dayjs(filter.value).format('YYYY-MM-DD 23:59:59'),
+              ]
+            }
           break
 
         case '=':
@@ -267,25 +220,17 @@ const getValue = (filter, opt) => {
           break
 
         case '>=':
-          switch(fn) {
-
-            case 'format_hour':
-              //console.log('>=', filter.value)
-              break
-
-            default:
-              withoutKey ?
-                whereObj = {
-                  [Op.gte]: [
-                    dayjs(filter.value).format('YYYY-MM-DD 00:00:00'),
-                  ]
-                } :
-                whereObj[key] = {
-                  [Op.gte]: [
-                    dayjs(filter.value).format('YYYY-MM-DD 00:00:00'),
-                  ]
-                }
-          }
+          withoutKey ?
+            whereObj = {
+              [Op.gte]: [
+                dayjs(filter.value).format('YYYY-MM-DD 00:00:00'),
+              ]
+            } :
+            whereObj[key] = {
+              [Op.gte]: [
+                dayjs(filter.value).format('YYYY-MM-DD 00:00:00'),
+              ]
+            }
           break
 
       }
@@ -358,11 +303,13 @@ const getValue = (filter, opt) => {
           withoutKey ?
             whereObj = {
               [Op.in]: (!Array.isArray(filter.value) ? filter.value.split(',') : filter.value)
-                .filter(_ => _)
+                .map(_ => parseInt(_))
+                .filter(_ => !isNaN(_))
             } :
             whereObj[key] = {
               [Op.in]: (!Array.isArray(filter.value) ? filter.value.split(',') : filter.value)
-                .filter(_ => _)
+                .map(_ => parseInt(_))
+                .filter(_ => !isNaN(_))
             }
           break
 
@@ -393,12 +340,9 @@ const getValue = (filter, opt) => {
       break
   }
 
-  //console.log('getValue', type, util.inspect({ filter, whereObj }, false, null, true /* enable colors */))
-
   return whereObj
 }
 
-
 const filtersToSequelizeWhere = async(filters, opt) => {
   if(!Array.isArray(filters) || filters.length < 1){
     return {
@@ -407,52 +351,388 @@ const filtersToSequelizeWhere = async(filters, opt) => {
     }
   }
 
-  let whereObj = {}
   let whereArr = []
   let replacements = []
 
+  const getValue = (filter, opt) => {
+
+    const { columns } = opt.config
+    let { key, operator, value, fn:filterFn } = filter
+    const keyColumns = groupBy(columns, 'key')
+    const type = ((keyColumns[key] ?? [])[0] ?? {}).type
+
+    let whereObj = {}
+    const modelAttributes = opt.model.getAttributes()
+    const {Model, field} = modelAttributes[key]
+
+    switch(type){
+
+      case 'boolean':
+        value = !!value
+        whereObj = { [key]: value }
+        break
+
+      case 'number':
+      case 'currency':
+        value = parseFloat(value)
+
+        switch(operator) {
+          case '=':
+            whereObj = { [key]:value }
+            break
+
+          case '>':
+            whereObj = { [key]:{ [Op.gt]:value } }
+            break
+
+          case '>=':
+            whereObj = { [key]:{ [Op.gte]:value } }
+            break
+
+          case '<':
+            whereObj = { [key]:{ [Op.lt]:value } }
+            break
+
+          case '<=':
+            whereObj = { [key]:{ [Op.lte]:value } }
+            break
+
+          case 'in':
+            whereObj = {
+              [key]:{
+                [Op.in]: (!Array.isArray(filter.value) ? filter.value.split(',') : filter.value)
+                  .map(_ => parseInt(_))
+                  .filter(_ => !isNaN(_))
+              }
+            }
+            break
+
+          case 'notIn':
+            whereObj = {
+              [key]:{
+                [Op.notIn]: (!Array.isArray(filter.value) ? filter.value.split(',') : filter.value)
+                  .map(_ => parseInt(_))
+                  .filter(_ => !isNaN(_))
+              }
+            }
+            break
+        }
+        break
+
+      case 'date':
+        switch(operator) {
+
+          case 'thisWeek':
+            whereObj = {
+              [key]:{
+                [Op.between]: [
+                  dayjs().startOf('week').format('YYYY-MM-DD 00:00:00'),
+                  dayjs().endOf('week').format('YYYY-MM-DD 23:59:59'),
+                ]
+              }
+            }
+            break
+
+          case 'thisMonth':
+            whereObj = {
+              [key]:{
+                [Op.between]: [
+                  dayjs().startOf('month').format('YYYY-MM-DD 00:00:00'),
+                  dayjs().endOf('month').format('YYYY-MM-DD 23:59:59'),
+                ]
+              }
+            }
+            break
+
+          case 'lastMonth':
+            whereObj = {
+              [key]:{
+                [Op.between]: [
+                  dayjs().subtract(1, 'month').startOf('month').format('YYYY-MM-DD 00:00:00'),
+                  dayjs().subtract(1, 'month').endOf('month').format('YYYY-MM-DD 23:59:59'),
+                ]
+              }
+            }
+            break
+
+          case 'thisYear':
+            whereObj = {
+              [key]:{
+                [Op.between]: [
+                  dayjs().startOf('year').format('YYYY-MM-DD 00:00:00'),
+                  dayjs().endOf('year').format('YYYY-MM-DD 23:59:59'),
+                ]
+              }
+            }
+            break
+
+          case 'between':
+            whereObj = {
+              [key]:{
+                [Op.between]: [
+                  dayjs(filter.value).format('YYYY-MM-DD 00:00:00'),
+                  dayjs(filter.value2).format('YYYY-MM-DD 23:59:59'),
+                ]
+              }
+            }
+            break
+
+          case 'yesterday':
+            whereObj = {
+              [key]:{
+                [Op.between]: [
+                  dayjs().subtract(1, 'day').startOf('day').format('YYYY-MM-DD 00:00:00'),
+                  dayjs().subtract(1, 'day').endOf('day').format('YYYY-MM-DD 23:59:59'),
+                ]
+              }
+            }
+            break
+
+          case 'today':
+            whereObj = {
+              [key]:{
+                [Op.between]: [
+                  dayjs().startOf('day').format('YYYY-MM-DD 00:00:00'),
+                  dayjs().endOf('day').format('YYYY-MM-DD 23:59:59'),
+                ]
+              }
+            }
+            break
+
+          case '<':
+            switch(filterFn) {
+
+              case 'format_hour':
+                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%H") < "${filter.value}"`)
+                break
+
+              default:
+                whereObj = {
+                  [key]: {
+                    [Op.lt]: [
+                      dayjs(filter.value).format('YYYY-MM-DD 00:00:00'),
+                    ]
+                  }
+                }
+            }
+            break
+
+          case '<=':
+            switch(filterFn) {
+
+              case 'format_hour':
+                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%H") <= "${filter.value}"`)
+                break
+
+              default:
+                whereObj = {
+                  [key]: {
+                    [Op.lte]: [
+                      dayjs(filter.value).format('YYYY-MM-DD 23:59:59'),
+                    ]
+                  }
+                }
+            }
+            break
+
+          case '=':
+            switch(filterFn) {
+
+              case 'format_date':
+                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%Y-%m-%d") = "${filter.value}"`)
+                break
+
+              case 'format_hour':
+                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%H") = "${filter.value}"`)
+                break
+
+              case 'format_month':
+                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%m") = "${filter.value.split('-')[1]}"`)
+                break
+
+              case 'format_year':
+                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%Y") = "${filter.value}"`)
+                break
+
+              default:
+                whereObj = {
+                  [key]: {
+                    [Op.between]: [
+                      dayjs(filter.value).format('YYYY-MM-DD 00:00:00'),
+                      dayjs(filter.value).format('YYYY-MM-DD 23:59:59'),
+                    ]
+                  }
+                }
+            }
+            break
+
+          case '>':
+            switch(filterFn) {
+
+              case 'format_hour':
+                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%H") > "${filter.value}"`)
+                break
+
+              default:
+                whereObj = {
+                  [key]: {
+                    [Op.gt]: [
+                      dayjs(filter.value).format('YYYY-MM-DD 23:59:59'),
+                    ]
+                  }
+                }
+            }
+            break
+
+          case '>=':
+            switch(filterFn) {
+
+              case 'format_hour':
+                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%H") >= "${filter.value}"`)
+                break
+
+              default:
+                whereObj = {
+                  [key]: {
+                    [Op.gte]: [
+                      dayjs(filter.value).format('YYYY-MM-DD 00:00:00'),
+                    ]
+                  }
+                }
+            }
+            break
+
+        }
+        break
+
+      default:
+        switch(operator) {
+          case '=':
+            whereObj = {
+              [key]:{
+                [Op.eq]: filter.value
+              }
+            }
+            break
+
+          case 'eq':
+          case 'not':
+            whereObj = {
+              [key]:{
+                [Op[operator]]: filter.value
+              }
+            }
+            break
+
+          case 'startsWith':
+            whereObj = {
+              [key]:{
+                [Op.like]: `${filter.value}%`
+              }
+            }
+            break
+
+          case 'endsWith':
+            whereObj = {
+              [key]:{
+                [Op.like]: `%${filter.value}`
+              }
+            }
+            break
+
+          case 'contains':
+            whereObj = {
+              [key]:{
+                [Op.like]: `%${filter.value}%`
+              }
+            }
+            break
+
+          case 'notContains':
+            whereObj = {
+              [key]:{
+                [Op.notLike]: `%${filter.value}%`
+              }
+            }
+            break
+
+          case 'in':
+            whereObj = {
+              [key]:{
+                [Op.in]: (!Array.isArray(filter.value) ? filter.value.split(',') : filter.value)
+                  .filter(_ => _)
+              }
+            }
+            break
+
+          case 'notIn':
+            whereObj = {
+              [key]:{
+                [Op.notIn]: filter.value.split(',')
+                  .map(_ => parseInt(_))
+                  .filter(_ => !isNaN(_))
+              }
+            }
+            break
+
+          case 'regex':
+            whereObj = {
+              [key]:{
+                [Op.regexp]: filter.value
+              }
+            }
+            break
+        }
+        break
+    }
+
+    return whereObj
+  }
+
+  //console.log(util.inspect(filters, false, null, true))
+
   for(let filter of filters) {
     if (filter.enabled === false) continue
 
-    const { key, value, operator } = filter
+    const { key, value, modifier = 'and' } = filter
 
     if(key.indexOf('.') >= 0) continue
 
-    if(Array.isArray(value) && !operator){
-      const { modifier = 'and' } = filter
+    if(Array.isArray(value)){
 
-      if(![ 'and', 'or' ].includes(modifier)) continue
+      const modifierValue = []
 
-      const opModifierValue = []
-      for(let v of value){
-        opModifierValue.push(getValue({ ...v, key }, {
-          ...opt,
-          withoutKey: true
-        }))
+      for(let _value of value){
+        modifierValue.push(getValue({
+          ..._value,
+          key
+        }, opt))
       }
 
-      whereObj = {
-        ...whereObj,
-        [key]: {
-          [Op[modifier]]: opModifierValue
-        }
-      }
+      switch(modifier){
+        case 'or':
+          whereArr.push({
+            [Op.or]: modifierValue
+          })
+          break
 
+        default:
+          whereArr.push({
+            [Op.and]: modifierValue
+          })
+          break
+      }
     }
     else{
-      whereObj = {
-        ...whereObj,
-        ...getValue(filter, opt)
-      }
+      whereArr.push(getValue(filter, opt))
     }
   }
 
+  //console.log(util.inspect(whereArr, false, null, true))
+
   return {
     where: {
-      [Op.and]: [
-        whereObj,
-        ...whereArr
-      ]
+      [Op.and]: whereArr
     },
     replacements
   }
@@ -1008,7 +1288,10 @@ const presetToSequelizeList = async(preset, {
     }
   }
 
-  const { where:filterWhere, replacements:filterReplacements } = await filtersToSequelizeWhere(filters, config)
+  const { where:filterWhere, replacements:filterReplacements } = await filtersToSequelizeWhere(filters, {
+    config,
+    model
+  })
 
   let searchWhere = {}, searchReplacements = []
   if(search){