@mixd-id/web-scaffold 0.1.250801006 → 0.1.250801008

package/package.json

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

package/src/components/MultiDropdown.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :class="$style.dropdown">
-		<div ref="btn" class="flex flex-row items-center w-[150px]"
+		<div ref="btn" class="flex-1 flex flex-row items-center w-[150px]"
          :class="containerClass"
          @click="open()">
       <div class="flex-1 p-2 text-ellipsis-nowrap">
@@ -12,9 +12,9 @@
       </button>
     </div>
 
-    <ContextMenu ref="contextMenu" :dismiss="false">
+    <ContextMenu ref="contextMenu" class="mt-2">
       <div class="flex flex-col min-w-[200px]">
-        <div class="p-2">
+        <div class="p-2" v-if="viewedItems.length > 10">
           <Textbox v-model="search" :clearable="true" @clear="search = ''">
             <template #start>
               <div class="pl-2">
@@ -23,7 +23,7 @@
             </template>
           </Textbox>
         </div>
-        <div v-for="item in viewedItems" class="p-2">
+        <div v-for="item in viewedItems" class="p-2"  @click.stop>
           <Checkbox :value="item[valueKey]" v-model="selectedItems">
             {{ item[textKey] }}
           </Checkbox>
@@ -40,7 +40,12 @@ export default{
   props: {
     containerClass: String,
 
-    modelValue: Array,
+    modelValue: {
+      type: Array,
+      validator(value){
+        return Array.isArray(value)
+      }
+    },
 
     items: Array,
 
@@ -58,15 +63,15 @@ export default{
   computed: {
 
     selectedText(){
-      if(this.modelValue.length > 0)
+      if((this.modelValue ?? []).length > 0)
         return this.modelValue.map(_ => _[this.textKey] ?? _[this.valueKey]).join(', ')
       return this.$t('(Not Selected)')
     },
 
     viewedItems(){
       if(this.search !== '')
-        return this.items.filter(_ => `${_[this.textKey]}`.toLowerCase().indexOf(this.search.toLowerCase()) >= 0)
-      return this.items
+        return (this.items ?? []).filter(_ => `${_[this.textKey]}`.toLowerCase().indexOf(this.search.toLowerCase()) >= 0)
+      return this.items ?? []
     }
 
   },
@@ -81,7 +86,7 @@ export default{
   methods: {
 
     open(){
-      this.selectedItems = this.modelValue.map(_ => _[this.valueKey])
+      this.selectedItems = (this.modelValue ?? []).map(_ => _[this.valueKey])
       this.$refs.contextMenu.open(this.$refs.btn)
     }
 
@@ -92,8 +97,7 @@ export default{
     selectedItems: {
       deep: true,
       handler(_items){
-        this.$emit('update:modelValue',
-            this.items.filter(_ => _items.includes(_[this.valueKey]))
+        this.$emit('update:modelValue', (this.items ?? []).filter(_ => _items.includes(_[this.valueKey]))
         )
       }
     }

package/src/components/VirtualTable.vue

@@ -207,7 +207,7 @@ const _DEFAULT_COLUMN_WIDTH = '100px'
 
 export default{
 
-  inject: [ 'emitRoot', 'listStyle' ],
+  inject: [ 'emitRoot' ],
 
 	emits: [ 'dragover', 'freeze', 'unfreeze', 'scroll-end', 'item-click' ],
 
@@ -685,8 +685,7 @@ export default{
 
 			return [
 				this.$style.tdDiv,
-				this.$style['align-' + align],
-        this.listStyle ? this.listStyle[appearanceClass] : ''
+				this.$style['align-' + align]
 			]
 				.join(' ')
 		},

package/src/utils/list.mjs

@@ -366,34 +366,57 @@ const getValue = (filter, opt) => {
   return whereObj
 }
 
-const filtersToSequelizeWhere = async(filters, opt) => {
-  if(!Array.isArray(filters) || filters.length < 1){
-    return {
-      where: {},
-      replacements: []
-    }
+const getColumnTypeFromModelAttribute = (attribute, opt) => {
+  const { DataTypes } = opt?.Sequelize ?? Sequelize
+
+  switch(attribute.type.key){
+    case DataTypes.BOOLEAN.key:
+      return 'boolean'
+
+    case DataTypes.INTEGER.key:
+    case DataTypes.FLOAT.key:
+    case DataTypes.DOUBLE.key:
+    case DataTypes.DECIMAL.key:
+      return 'number'
+
+    case DataTypes.DATE.key:
+    case DataTypes.DATEONLY.key:
+      return 'date'
+
+    default:
+      return 'string'
   }
+}
 
+const filtersToSequelizeWhere = async(filters, opt) => {
   let whereArr = []
   let replacements = []
   const { literal, Op } = opt.Sequelize ?? Sequelize
+  const { columns = [] } = opt?.config ?? {}
+  const modelAttributes = opt.model.getAttributes()
+  const tableName = opt.model.getTableName()
+
+  if(columns.length < 1){
+    for(let key in modelAttributes){
+      columns.push({
+        key,
+        fieldName: modelAttributes[key]?.fieldName || key,
+        type: getColumnTypeFromModelAttribute(modelAttributes[key], opt)
+      })
+    }
+  }
 
-  const getValue = (filter, opt) => {
+  const keyColumns = (columns ?? []).reduce((res, cur) => {
+    res[cur.key] = cur
+    cur.fieldName = modelAttributes[cur.key]?.fieldName || cur.key
+    return res
+  }, {})
 
-    const { columns } = opt.config
-    let { key, operator, value, fn:filterFn } = filter
-    const keyColumns = groupBy(columns, 'key')
-    const type = ((keyColumns[key] ?? [])[0] ?? {}).type
+  const getValue = (filter) => {
+    let { key, operator, value, fn:filterFn, fieldName } = filter
+    const type = (keyColumns[key] ?? {}).type ?? 'string'
 
     let whereObj = {}
-    let Model, field
-    if(opt.model){
-      const modelAttributes = opt.model.getAttributes()
-      if(modelAttributes[key]){
-        Model = opt.model
-        field = modelAttributes[key].field
-      }
-    }
 
     switch(type){
 
@@ -539,7 +562,7 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             switch(filterFn) {
 
               case 'format_hour':
-                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%H") < "${filter.value}"`)
+                whereObj = literal(`DATE_FORMAT(${tableName}.${fieldName}, "%H") < "${filter.value}"`)
                 break
 
               default:
@@ -557,7 +580,7 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             switch(filterFn) {
 
               case 'format_hour':
-                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%H") <= "${filter.value}"`)
+                whereObj = literal(`DATE_FORMAT(${tableName}.${fieldName}, "%H") <= "${filter.value}"`)
                 break
 
               default:
@@ -575,19 +598,19 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             switch(filterFn) {
 
               case 'format_date':
-                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%Y-%m-%d") = "${filter.value}"`)
+                whereObj = literal(`DATE_FORMAT(${tableName}.${fieldName}, "%Y-%m-%d") = "${filter.value}"`)
                 break
 
               case 'format_hour':
-                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%H") = "${filter.value}"`)
+                whereObj = literal(`DATE_FORMAT(${tableName}.${fieldName}, "%H") = "${filter.value}"`)
                 break
 
               case 'format_month':
-                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%m") = "${filter.value.split('-')[1]}"`)
+                whereObj = literal(`DATE_FORMAT(${tableName}.${fieldName}, "%m") = "${filter.value.split('-')[1]}"`)
                 break
 
               case 'format_year':
-                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%Y") = "${filter.value}"`)
+                whereObj = literal(`DATE_FORMAT(${tableName}.${fieldName}, "%Y") = "${filter.value}"`)
                 break
 
               default:
@@ -606,7 +629,7 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             switch(filterFn) {
 
               case 'format_hour':
-                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%H") > "${filter.value}"`)
+                whereObj = literal(`DATE_FORMAT(${tableName}.${fieldName}, "%H") > "${filter.value}"`)
                 break
 
               default:
@@ -624,7 +647,7 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             switch(filterFn) {
 
               case 'format_hour':
-                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%H") >= "${filter.value}"`)
+                whereObj = literal(`DATE_FORMAT(${tableName}.${fieldName}, "%H") >= "${filter.value}"`)
                 break
 
               default:
@@ -736,41 +759,74 @@ const filtersToSequelizeWhere = async(filters, opt) => {
     return whereObj
   }
 
-  for(let filter of filters) {
-    if (filter.enabled === false) continue
+  if(Array.isArray(filters)){
+    for(let filter of filters) {
+      if (filter.enabled === false) continue
 
-    const { key, value, modifier = 'and' } = filter
+      const { key, value, modifier = 'and' } = filter
 
-    if(key.indexOf('.') >= 0) continue
+      if(!keyColumns[key]) continue
 
-    if(Array.isArray(value)){
+      if(Array.isArray(value)){
 
-      const modifierValue = []
+        const modifierValue = []
 
-      for(let _value of value){
-        modifierValue.push(getValue({
-          ..._value,
-          key
-        }, opt))
-      }
+        for(let _value of value){
+          modifierValue.push(getValue({
+            ..._value,
+            key
+          }, opt))
+        }
 
-      switch(modifier){
-        case 'or':
-          whereArr.push({
-            [Op.or]: modifierValue
-          })
-          break
+        switch(modifier){
+          case 'or':
+            whereArr.push({
+              [Op.or]: modifierValue
+            })
+            break
 
-        default:
-          whereArr.push({
-            [Op.and]: modifierValue
-          })
-          break
+          default:
+            whereArr.push({
+              [Op.and]: modifierValue
+            })
+            break
+        }
+      }
+      else{
+        whereArr.push(getValue(filter, opt))
       }
     }
-    else{
-      whereArr.push(getValue(filter, opt))
+  }
+  else if(filters && typeof filters === 'object'){
+
+    for(let key in filters){
+      if(!keyColumns[key]) continue
+
+      const value = filters[key]
+
+      if(Array.isArray(value)){
+        const modifierValue = []
+
+        for(let _value of value){
+          modifierValue.push(getValue({
+            ..._value,
+            key
+          }, opt))
+        }
+
+        whereArr.push({
+          [Op.and]: modifierValue
+        })
+      }
+      else{
+        whereArr.push(getValue({
+          key,
+          operator: '=',
+          value
+        }, opt))
+      }
     }
+
   }
 
   return {
@@ -1305,7 +1361,8 @@ const presetToSequelizeList = async(preset, opt = {}) => {
     replacements: initialReplacements,
     include,
     order:initialOrder,
-    logging = false
+    logging = false,
+    debug = false
   } = opt
 
   if(!model) return {}
@@ -1349,7 +1406,8 @@ const presetToSequelizeList = async(preset, opt = {}) => {
   const { where:filterWhere, replacements:filterReplacements } = await filtersToSequelizeWhere(filters, {
     config,
     model,
-    Sequelize: opt.Sequelize
+    Sequelize: opt.Sequelize,
+    debug
   })
 
   let searchWhere = {}, searchReplacements = []