@mixd-id/web-scaffold 0.1.2301231337 → 0.1.2301231339

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.2301231337",
+  "version": "0.1.2301231339",
   "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/Image.vue

@@ -5,7 +5,7 @@
 		<img :class="computedClass" :src="actualSrc" ref="img" :style="imageStyle"/>
 		<input v-if="Boolean(editable)" class="hidden" type="file" accept="image/*" ref="file" @change="onChange"/>
 		<slot></slot>
-		<div :class="$style.loading" v-if="loading">
+		<div :class="$style.loading" v-if="loading && spinnerType === 'spinner'">
 			<svg class="animate-spin aspect-square w-[15%] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
 		</div>
 	</div>
@@ -48,7 +48,12 @@ export default{
     defaultSrc: {
       type: String,
 			default: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMS4xNTkyIDIxLjA4MjhDMjEuNjc5OCAyMC41NDMyIDIyIDE5LjgwOSAyMiAxOVY1QzIyIDMuMzQzMTUgMjAuNjU2OSAyIDE5IDJINUMzLjM0MzE1IDIgMiAzLjM0MzE1IDIgNVYxOUMyIDIwLjY1NjkgMy4zNDMxNSAyMiA1IDIySDE5QzE5LjI5NjIgMjIgMTkuNTgyMyAyMS45NTcxIDE5Ljg1MjUgMjEuODc3MUMxOS44NjU4IDIxLjg3MzIgMTkuODc5IDIxLjg2OTIgMTkuODkyMSAyMS44NjUxQzIwLjI1ODYgMjEuNzUxMSAyMC41OTUgMjEuNTY4NyAyMC44ODYzIDIxLjMzMjlDMjAuODkzNyAyMS4zMjY5IDIwLjkwMSAyMS4zMjEgMjAuOTA4MyAyMS4zMTQ5QzIwLjk4MjQgMjEuMjUzOCAyMS4wNTM1IDIxLjE4OTIgMjEuMTIxMyAyMS4xMjEzQzIxLjEzNDEgMjEuMTA4NiAyMS4xNDY3IDIxLjA5NTcgMjEuMTU5MiAyMS4wODI4Wk0xOSAzLjVINUM0LjE3MTU3IDMuNSAzLjUgNC4xNzE1NyAzLjUgNVYxMi43TDYuMDUyOTIgOS42MzY0OUM3LjIxNTY2IDguMjQxMjEgOS4zNDE3NyA4LjE5MTAyIDEwLjU2OSA5LjUyOTg3TDIwLjE0MTggMTkuOTcyOEMyMC4zNjUyIDE5LjcxMDkgMjAuNSAxOS4zNzEyIDIwLjUgMTlWNUMyMC41IDQuMTcxNTcgMTkuODI4NCAzLjUgMTkgMy41Wk01IDIwLjVDNC4xNzE1NyAyMC41IDMuNSAxOS44Mjg0IDMuNSAxOVYxNS4wNDMxTDcuMjA1MjYgMTAuNTk2OEM3LjcxMzk1IDkuOTg2MzMgOC41OTE0NCA5Ljg5MDgxIDkuMjEzOTUgMTAuMzI0OUM5LjIxOTUxIDEwLjMyODggOS4yMjUwNSAxMC4zMzI3IDkuMjMwNTcgMTAuMzM2N0M5LjMxMzMyIDEwLjM5NjEgOS4zOTE0MSAxMC40NjUgOS40NjMzMiAxMC41NDM1TDE4LjU5MDEgMjAuNUg1WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iLjA4Ii8+CjxjaXJjbGUgY3g9IjE3IiBjeT0iNyIgcj0iMS4yNSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9Ii4wOCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPC9zdmc+Cg=="
-    }
+    },
+
+		spinnerType: {
+			type: String,
+			default: "shimmer" // spinner | shimmer
+		}
 
   },
 
@@ -57,7 +62,8 @@ export default{
 		computedOuterClass(){
 			return [
 				this.$style.img,
-				this.outerClass
+				this.outerClass,
+				this.loading && this.spinnerType === 'shimmer' ? this.$style.shimmer : ''
 			]
 				.join(' ')
 		},
@@ -135,13 +141,13 @@ export default{
 							var img = new Image()
 							img.addEventListener('load', () => {
 								this.loaded = true
-								this.actualSrc = img.src
-								this.loading = false
+								//this.actualSrc = img.src
+								//this.loading = false
 							})
 							img.addEventListener('error', () => {
 								this.loaded = true
 								this.actualSrc = this.defaultSrc
-								this.loading = false
+								//this.loading = false
 							})
 							img.src = src[screens[b]]
 							this.loading = true
@@ -202,5 +208,9 @@ export default{
 	@apply flex items-center justify-center;
 }
 
+.shimmer{
+	@apply bg-text-100 animate-pulse;
+}
+
 
 </style>

package/src/components/ImportModal.vue

@@ -97,6 +97,8 @@ import axios from "axios";
 
 export default{
 
+	emit: [ 'complete' ],
+
 	inject: [ 'socketEmit', 'socket', 'toast' ],
 
 	props: {
@@ -195,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/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