@mixd-id/web-scaffold 0.1.230406312 → 0.1.230406314

package/package.json

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

package/src/components/List.vue

@@ -250,7 +250,7 @@ import VirtualGrid from "./VirtualGrid.vue";
 import throttle from "lodash/throttle";
 import PresetSelector from "../widgets/PresetSelector.vue";
 import groupBy from "lodash/groupBy";
-import { generatePivotColumns, sortsFn } from "../utils/preset-selector.mjs";
+import { generatePivotColumns, generateTotalColumns, sortsFn } from "../utils/preset-selector.mjs";
 import PresetBar from "../widgets/PresetBar.vue";
 
 export default{
@@ -340,12 +340,11 @@ export default{
           itemsPerPage: this.data.itemsPerPage,
         })
             .then(data => {
-
               generatePivotColumns(this.preset, data.items)
+              generateTotalColumns(this.preset, data.items)
               this.loadEnums(data.items)
               Object.assign(this.data, data ?? {})
               this.$emit('after-load')
-
             })
             .catch(err => {
               this.toast(err)
@@ -586,24 +585,60 @@ export default{
         const filters = []
 
         for(let idx in this.preset.pivot.rows){
-          const key = this.preset.pivot.rows[idx].key
+          const pivotRow = this.preset.pivot.rows[idx]
+          const key = pivotRow.key
           const presetColumn = this.preset.columns.find(_ => _.key === key)
-          let value = item[this.preset.pivot.rows[idx].key]
+          let value = item[pivotRow.key]
           switch(presetColumn.type){
 
             case 'bool':
             case 'boolean':
-              value = value === 'true'
+              filters.push({
+                key,
+                value: [{
+                  operator: '=',
+                  value: value === 'true'
+                }]
+              })
+              break
+
+            case 'date':
+              switch(pivotRow.aggregrate){
+
+                case 'hour':
+                  value = value.split('-')
+                  filters.push({
+                    key,
+                    value: [{
+                      operator: '>=',
+                      value: value[0] + ':00',
+                      fn: 'format_hour'
+                    }]
+                  })
+                  filters.push({
+                    key,
+                    value: [{
+                      operator: '<=',
+                      value: value[1] + ':59',
+                      fn: 'format_hour'
+                    }]
+                  })
+                  break
+
+              }
+              break
+
+            default:
+              filters.push({
+                key,
+                value: [{
+                  operator: '=',
+                  value
+                }]
+              })
               break
           }
 
-          filters.push({
-            key,
-            value: [{
-              operator: '=',
-              value
-            }]
-          })
         }
 
         let [ kk, ...vv ] = column.key.split('-')

package/src/components/VirtualTable.vue

@@ -32,18 +32,23 @@
 						</tr>
 						</thead>
 						<tbody ref="tbody">
-						<tr v-for="(item, index) in visibleItems" :key="item"
-								@click="select(item, index)"
-								:class="trClass(item, index)">
-							<td v-for="column in visibleColumns"
-									:class="tdClass(item, column)"
-                  @click="$emit('item-click', item, column)">
-								<slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
-								<slot v-else-if="$slots.default" name="default" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
-                <div v-else :class="columnClass(column, item)" v-html="formatColumn(item, column)"></div>
-							</td>
-							<td :class="$style.spacer"></td>
-						</tr>
+              <tr v-for="(item, index) in visibleItems" :key="item"
+                  @click="select(item, index)"
+                  :class="trClass(item, index)">
+                <td v-for="(column, columnIndex) in visibleColumns"
+                    :class="tdClass(item, column)"
+                    @click="$emit('item-click', item, column)">
+
+                  <div v-if="columnIndex === 0 && item._type === 'totalRow'" :class="$style.total">Total</div>
+                  <div v-else-if="item._type === 'totalRow' && !column.key.startsWith('_')"></div>
+
+                  <slot v-else-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
+                  <slot v-else-if="$slots.default" name="default" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
+                  <div v-else :class="columnClass(column, item)" v-html="formatColumn(item, column)"></div>
+
+                </td>
+                <td :class="$style.spacer"></td>
+              </tr>
 						</tbody>
 					</table>
 					<div v-if="state === 2" ref="spinner" class="h-[44px] relative">
@@ -343,8 +348,16 @@ export default{
 					case 'currency':
 						align = 'right'
 						break
+
+          default:
+            if(column.key.startsWith('_'))
+              align = 'center'
+            break
 				}
 			}
+      else{
+        align = column.align
+      }
 
       let appearanceClass = ''
       if(item && Array.isArray(column.appearances)){
@@ -361,93 +374,95 @@ export default{
             break
         }
 
-        for(let appearance of column.appearances){
-
-          let conditionMatched = false
-          for(let condition of appearance.conditions ?? []){
-            switch(condition.operator){
-
-              case '>':
-                if(value > condition.value){
+        if(!('_type' in item)){
+          for(let appearance of column.appearances){
+
+            let conditionMatched = false
+            for(let condition of appearance.conditions ?? []){
+              switch(condition.operator){
+
+                case '>':
+                  if(value > condition.value){
+                    conditionMatched = true
+                  }
+                  break
+
+                case '>=':
+                  if(value >= condition.value){
+                    conditionMatched = true
+                  }
+                  break
+
+                case '=':
+                  if(value === condition.value){
+                    conditionMatched = true
+                  }
+                  break
+
+                case '<':
+                  if(value < condition.value){
+                    conditionMatched = true
+                  }
+                  break
+
+                case '<=':
+                  if(value <= condition.value){
+                    conditionMatched = true
+                  }
+                  break
+
+                case 'startsWith':
+                  if(value.startsWith(condition.value)){
+                    conditionMatched = true
+                  }
+                  break
+
+                case 'notStartsWith':
+                  if(!value.startsWith(condition.value)){
+                    conditionMatched = true
+                  }
+                  break
+
+                case 'contains':
+                  if(value.indexOf(condition.value) >= 0){
+                    conditionMatched = true
+                  }
+                  break
+
+                case 'notContains':
+                  if(value.indexOf(condition.value) < 0){
+                    conditionMatched = true
+                  }
+                  break
+
+                case 'endsWith':
+                  if(value.endsWith(condition.value)){
+                    conditionMatched = true
+                  }
+                  break
+
+                case 'notEndsWith':
+                  if(!value.endsWith(condition.value)){
+                    conditionMatched = true
+                  }
+                  break
+
+                case 'none':
                   conditionMatched = true
-                }
-                break
+                  break
 
-              case '>=':
-                if(value >= condition.value){
-                  conditionMatched = true
-                }
-                break
+                case 'regex':
+                  break
 
-              case '=':
-                if(value === condition.value){
-                  conditionMatched = true
-                }
-                break
-
-              case '<':
-                if(value < condition.value){
-                  conditionMatched = true
-                }
-                break
-
-              case '<=':
-                if(value <= condition.value){
-                  conditionMatched = true
-                }
-                break
-
-              case 'startsWith':
-                if(value.startsWith(condition.value)){
-                  conditionMatched = true
-                }
-                break
-
-              case 'notStartsWith':
-                if(!value.startsWith(condition.value)){
-                  conditionMatched = true
-                }
-                break
-
-              case 'contains':
-                if(value.indexOf(condition.value) >= 0){
-                  conditionMatched = true
-                }
-                break
-
-              case 'notContains':
-                if(value.indexOf(condition.value) < 0){
-                  conditionMatched = true
-                }
-                break
-
-              case 'endsWith':
-                if(value.endsWith(condition.value)){
-                  conditionMatched = true
-                }
-                break
-
-              case 'notEndsWith':
-                if(!value.endsWith(condition.value)){
-                  conditionMatched = true
-                }
-                break
-
-              case 'none':
-                conditionMatched = true
-                break
-
-              case 'regex':
-                break
+              }
 
+              if(conditionMatched) break
             }
 
-            if(conditionMatched) break
-          }
-
-          if(conditionMatched){
-            appearanceClass = appearance.class
-            break
+            if(conditionMatched){
+              appearanceClass = appearance.class
+              break
+            }
           }
         }
       }
@@ -675,4 +690,8 @@ export default{
 	@apply inline-block m-1 rounded-md bg-orange-600 text-white px-2 text-sm;
 }
 
+.total{
+  @apply px-3 uppercase font-bold;
+}
+
 </style>

package/src/utils/preset-selector.js

@@ -2,11 +2,12 @@ const groupBy = require("lodash/groupBy");
 const dayjs = require("dayjs");
 const {Op, literal, fn, DataTypes} = require("sequelize");
 const {ftWildcard} = require("./helpers");
+const util = require("util");
 
 const getValue = (filter, opt) => {
 
   const { columns, withoutKey = false } = opt
-  const { key, operator } = filter
+  const { key, operator, fn } = filter
   const keyColumns = groupBy(columns, 'key')
   const type = ((keyColumns[key] ?? [])[0] ?? {}).type
 
@@ -213,17 +214,26 @@ const getValue = (filter, opt) => {
           break
 
         case '<=':
-          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'),
-              ]
-            }
+          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'),
+                  ]
+                }
+          }
+
           break
 
         case '=':
@@ -257,17 +267,25 @@ const getValue = (filter, opt) => {
           break
 
         case '>=':
-          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'),
-              ]
-            }
+          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'),
+                  ]
+                }
+          }
           break
 
       }
@@ -724,6 +742,12 @@ const pivotToSequelizeWhere = async (pivot, opt) => {
         if(!sortExists) order.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y'), 'asc' ])
         break
 
+      case 'hour':
+        attributes.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%H:00-%H:59'), row.key ])
+        group.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%H:00-%H:59'), row.key ])
+        if(!sortExists) order.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%H:00-%H:59'), 'asc' ])
+        break
+
       default:
         attributes.push([ literal(`${model.name}.${field}`), row.key ])
         group.push(`${model.name}.${field}`)

package/src/utils/preset-selector.mjs

@@ -157,9 +157,29 @@ const generatePivotColumns = (preset, items) => {
 
 }
 
+const generateTotalColumns = (preset, items) => {
+  if(!preset.pivot || !preset.pivot.enabled || !preset.pivot.useTotal || (items ?? []).length < 1) return
+
+  const totalItem = { _type:'totalRow' }
+
+  for(let item of items){
+    for(let key in item){
+      if(key.startsWith('_')){
+        if(!totalItem[key]){
+          totalItem[key] = 0
+        }
+        totalItem[key] += parseFloat(item[key])
+      }
+    }
+  }
+
+  items.push(totalItem)
+}
+
 export {
   sortsFn,
   pickColumns,
   setupConfig,
-  generatePivotColumns
+  generatePivotColumns,
+  generateTotalColumns
 }

package/src/widgets/PresetBar.vue

@@ -490,6 +490,7 @@
                                 v-model="item.aggregrate"
                                 class="px-1 appearance-none bg-base-300 rounded-md border-[1px] border-text-50 outline-none"
                                 @change="apply()">
+                          <option value="hour">Hour</option>
                           <option value="date">Date</option>
                           <option value="month">Month</option>
                           <option value="year">Year</option>
@@ -578,6 +579,11 @@
                 <PresetBarPivotColumnEdit ref="presetBarPivotColumnEdit" />
               </div>
 
+              <div class="flex flex-row items-center gap-3">
+                <label>Total</label>
+                <Switch v-model="presetPivot.useTotal" />
+              </div>
+
             </div>
 
           </div>