@mixd-id/web-scaffold 0.1.2301231336 → 0.1.2301231338

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.2301231336",
+  "version": "0.1.2301231338",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -15,13 +15,15 @@
       "require": "./src/utils/helpers.js",
       "import": "./src/utils/helpers.mjs"
     },
-    "./importer": "./src/utils/importer.js"
+    "./importer": "./src/utils/importer.js",
+    "./listpage1": "./src/utils/listpage1.js"
   },
   "dependencies": {
     "@faker-js/faker": "^7.3.0",
     "@tailwindcss/line-clamp": "^0.4.0",
     "@vueuse/core": "^9.0.2",
     "adm-zip": "^0.5.10",
+    "axios": "^1.3.4",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
@@ -36,6 +38,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.0.14",
     "prismjs": "^1.28.0",
+    "sequelize": "^6.29.0",
     "serve-static": "^1.15.0",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.25",

package/src/components/ImportModal.vue

@@ -59,6 +59,7 @@
 					</Dropdown>
 				</div>
 			</div>
+			<slot name="mapping-opt" :import-data="importData"></slot>
 		</div>
 
 		<div class="flex-1 flex items-center justify-center" v-else-if="step === 3">
@@ -96,6 +97,8 @@ import axios from "axios";
 
 export default{
 
+	emit: [ 'complete' ],
+
 	inject: [ 'socketEmit', 'socket', 'toast' ],
 
 	props: {
@@ -194,6 +197,9 @@ export default{
 		close(){
 			this.isOpen = false
 			this.$emit('dismiss')
+			if(this.step === 3){
+				this.$emit('complete')
+			}
 		},
 
 		reset(){

package/src/components/ListPage1.vue

@@ -394,7 +394,7 @@ export default{
 
 		onHooks(module, event, items){
 
-			//console.log('onHooks', module, event, items)
+			console.log('onHooks', module, event, items)
 
 			if(!Array.isArray(items)) return
 			items = items.filter((_) => _).map((_) => {
@@ -423,8 +423,10 @@ export default{
 						break
 
 					case 'remove':
+					case 'destroy':
 						items.forEach((item) => {
 							const idx = this.items.findIndex((_) => _.id === item.id)
+							console.log(idx, item)
 							if(idx >= 0){
 								this.items.splice(idx, 1)
 							}

package/src/utils/importer.js

@@ -141,6 +141,7 @@ const importRequest = async(req) => {
       '/**/*(*.jpg|*.jpeg|*.png|*.webp)')
 
   return {
+    ...req.body,
     rows,
     images,
     columns,

package/src/utils/listpage1.js

@@ -0,0 +1,434 @@
+const { Op } = require('sequelize')
+
+let ListPage1 = {
+
+  presetName: 'listpage1',
+  itemsPerPage: 24,
+  model: '',
+  channel: '',
+
+  async patch(){
+
+    let currentPreset
+    if(this.user && this.socket && this.socket.auth){
+      const { userId } = this.socket.auth
+      const user = await this.user.withId(userId)
+      const preset = await user.loadPreset(this.presetName)
+      currentPreset = {
+        ...this.getDefaultPresets(),
+        ...preset
+      }
+    }
+    else{
+      currentPreset = {
+        ...this.getDefaultPresets()
+      }
+    }
+
+    const data = await this.load({ preset:currentPreset.presets[currentPreset.presetIdx] })
+
+    if(this.channel && this.socket){
+      if(this.socket.joinWithArgs){
+        this.socket.joinWithArgs(this.channel, { preset:currentPreset.presets[currentPreset.presetIdx] })
+      }
+      else{
+        this.socket.join(this.channel)
+      }
+    }
+
+    return {
+      ...currentPreset,
+      ...data
+    }
+  },
+
+  async load(params){
+
+    /*const listAcl = socket.auth.user.getAclv('customer', 'list')
+    if(listAcl === false){
+      throw new Error('Insufficient privilege')
+    }
+    else if(Array.isArray(listAcl.filters) && listAcl.filters.includes('user-customers')){
+      where = {
+        ...where,
+        referralType: {
+          [Op.in]: [ "App\\Models\\User", "user" ]
+        },
+        referralId: socket.auth.userId
+      }
+    }*/
+
+    const { afterItem, itemsPerPage = this.itemsPerPage } = params
+    const { preset = {} } = params
+    let where = {}
+    let replacements = []
+    let order = [
+      [ 'updatedAt', 'desc' ],
+      [ 'id', 'desc' ],
+    ]
+
+    let attributes = { id:1, updatedAt:1 }
+    let modelAttributes = this.model.getAttributes()
+    preset.columns.forEach((column) => {
+      if(column.visible && modelAttributes[column.key]){
+        switch(column.key){
+
+          case 'item':
+          case 'option':
+            // Ignored
+            break
+
+          default:
+            attributes[column.key] = 1
+            break
+        }
+      }
+    })
+    attributes = Object.keys(attributes)
+
+    if(preset.filters){
+      const { where:presetWhere } = this.getPresetFilterParams(preset)
+      where = {
+        ...where,
+        ...presetWhere
+      }
+    }
+
+    if(preset.sorts){
+      const { order:presetOrder } = this.getPresetSortParams(preset)
+      if(presetOrder){
+        order = presetOrder
+      }
+    }
+
+    if(preset.search){
+      where = {
+        ...where,
+        [Op.and]: Sequelize.literal('MATCH(tag) AGAINST (? IN BOOLEAN MODE)')
+      }
+      replacements.push(ftW)
+    }
+
+    if(afterItem){
+      const sortWhere = this.getPresetSortWhereParams(order, afterItem)
+      where = {
+        ...where,
+        ...sortWhere
+      }
+    }
+
+    const items = await this.model.findAll({
+      where,
+      attributes,
+      order,
+      limit: itemsPerPage + 1,
+      replacements,
+    })
+
+    const hasNext = items.length > itemsPerPage
+    if(hasNext){
+      items.splice(items.length - 1, 1)
+    }
+
+    if(this.socket){
+      this.socket.joinWithArgs(this.channel, { preset })
+    }
+
+    return {
+      items,
+      hasNext
+    }
+  },
+
+  getPresetFilterParams(preset){
+
+    let where = {}
+    let replacements = []
+
+    if(preset.filters){
+
+      //console.log(util.inspect(preset.filters, false, null, true /* enable colors */))
+
+      preset.filters.forEach((filter) => {
+
+        const key = filter.key
+        const type = filter.type
+        const items = filter.filters ?? []
+        const operand = items[0] && items[0].operand && items[0].operand === 'or' && items.length > 1 ?
+            'or' : 'and'
+
+        let whereValue = {}
+        switch(type){
+
+          case 'date':
+            items.forEach((item) => {
+              const operator = item.operator
+              const value = item.value
+
+              switch(operator){
+
+                case 'today':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.eq]: dayjs().format('YYYY-MM-DD'),
+                  }
+                  break
+
+                case 'thisWeek':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.gte]: dayjs().startOf('week').format('YYYY-MM-DD 00:00:00'),
+                    [Op.lt]: dayjs().endOf('week').format('YYYY-MM-DD 23:59:59'),
+                  }
+                  break
+
+                case 'thisMonth':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.gte]: dayjs().format('YYYY-MM-01 00:00:00'),
+                    [Op.lt]: dayjs().endOf('month').format('YYYY-MM-DD 23:59:59'),
+                  }
+                  break
+
+                case 'lastMonth':
+                  whereValue = {
+                    [Op.gte]: dayjs().add(-1, 'month').format('YYYY-MM-01 00:00:00'),
+                    [Op.lte]: dayjs().add(-1, 'month').endOf('month').format('YYYY-MM-DD 23:59:59'),
+                  }
+                  break
+
+                case 'thisYear':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.gte]: dayjs().startOf('year').format('YYYY-MM-DD 00:00:00'),
+                    [Op.lt]: dayjs().endOf('year').format('YYYY-MM-DD 23:59:59'),
+                  }
+                  break
+
+                case 'lastYear':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.gte]: dayjs().add(-1, 'year').startOf('year').format('YYYY-MM-DD 00:00:00'),
+                    [Op.lt]: dayjs().add(-1, 'year').endOf('year').format('YYYY-MM-DD 23:59:59'),
+                  }
+                  break
+
+                case 'between':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.gte]: dayjs(value[0]).format('YYYY-MM-DD 00:00:00'),
+                    [Op.lt]: dayjs(value[1]).format('YYYY-MM-DD 23:59:59'),
+                  }
+                  break
+              }
+            })
+            break
+
+          case 'enum':
+            items.forEach((item) => {
+              const value = item.value ?? []
+              whereValue = {
+                ...whereValue,
+                [Op.in]: value
+              }
+            })
+            break
+
+          case 'currency':
+            items.forEach((item) => {
+
+              const operator = item.operator
+              const value = item.value
+
+              switch(operator){
+
+                case '>':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.gt]: parseFloat(value)
+                  }
+                  break
+
+                case '>=':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.gte]: parseFloat(value)
+                  }
+                  break
+
+                case '=':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.eq]: parseFloat(value)
+                  }
+                  break
+
+                case '<':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.lt]: parseFloat(value)
+                  }
+                  break
+
+                case '<=':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.lte]: parseFloat(value)
+                  }
+                  break
+              }
+            })
+            break
+
+          default:
+            items.forEach((item) => {
+
+              const operator = item.operator
+              const value = item.value
+
+              switch(operator){
+
+                case 'startsWith':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.like]: `${value}%`
+                  }
+                  break
+
+                case 'endsWith':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.like]: `%${value}`
+                  }
+                  break
+
+                case 'contains':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.like]: `%${value}%`
+                  }
+                  break
+
+                case '=':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.eq]: value
+                  }
+                  break
+              }
+            })
+            break
+        }
+
+        switch(operand){
+
+          case 'or':
+            where = {
+              ...where,
+              [key]: {
+                [Op.or]: whereValue
+              }
+            }
+            break
+
+          default:
+            where = {
+              ...where,
+              [key]: {
+                [Op.and]: whereValue
+              }
+            }
+            break
+        }
+      })
+    }
+
+    //console.log('where#1', util.inspect(where, false, null, true /* enable colors */))
+
+    return {
+      where,
+      replacements
+    }
+  },
+
+  getPresetSortParams(preset){
+
+    if(preset.sorts && preset.sorts.length > 0){
+      let order = []
+      preset.sorts.forEach((sort) => {
+        const key = sort.key
+        const type = sort.type === 'desc' ? 'desc' : 'asc'
+        order.push([ key, type ])
+      })
+      order.push([ 'id', 'desc' ])
+
+      return {
+        order
+      }
+    }
+    return {}
+  },
+
+  getPresetSortWhereParams(order, afterItem){
+
+    if(order.filter((_) => _[0] === 'id').length <= 0){
+      order.push([ 'id', 'desc' ])
+    }
+
+    const opOr = []
+    for(let i = 0 ; i < order.length ; i++){
+
+      const obj = order[i]
+
+      const exp = {}
+      for(let j = 0 ; j < i ; j++){
+        exp[order[j][0]] = afterItem[order[j][0]]
+      }
+      exp[obj[0]] = obj[1] === 'desc' ? { [Op.lt]:afterItem[obj[0]] } : { [Op.gt]:afterItem[obj[0]] }
+
+      if(Object.keys(exp).length === 1){
+        opOr.push(exp)
+      }
+      else{
+        opOr.push({
+          [Op.and]: exp
+        })
+      }
+    }
+
+    let sortWhere = {}
+    if(opOr.length > 0){
+      sortWhere = {
+        [Op.or]: opOr
+      }
+    }
+    return sortWhere
+  },
+
+  async onHooks(model, event, items, io){
+
+    switch(event){
+
+      case 'destroy':
+      case 'remove':
+        io.to(model).emit(model, event, items)
+        break
+
+      default:
+        const instances = await this.model.findAll({
+          where: {
+            id: {
+              [Op.in]: items.map((_) => _.id)
+            }
+          }
+        })
+        io.to(model).emit(`${model}${event}`, instances)
+        break
+
+    }
+
+  }
+
+}
+
+module.exports = ListPage1