@mixd-id/web-scaffold 0.1.230406288 → 0.1.230406290

package/package.json

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

package/src/components/List.vue

@@ -120,7 +120,7 @@
             </div>
           </slot>
 
-          <VirtualTable v-if="presetView === 'table'"
+          <VirtualTable v-if="presetView === 'table' || pivotEnabled"
                         ref="table"
                         :columns="columns"
                         class="flex-1 rounded-lg panel-400"
@@ -170,13 +170,13 @@
         <div v-if="extBar.open && pivotEnabled"
              :style="extStyle" class="border-t-[1px] border-text-50 flex flex-col relative md:p-5">
 
-          <div :class="$style.resize2"
+          <div :class="$style.resize2" class="group"
                @mousedown="(e) => $util.dragResize(e, resize2)">
             <button type="button" @click.prevent="extBar.open = false"
-                    :class="$style.extClose">
+                    :class="$style.extClose" class="group-hover:bg-primary">
               <svg width="14"
                    height="14"
-                   class="fill-text-300 cursor-pointer"
+                   class="fill-text-300 group-hover:fill-white cursor-pointer"
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432.6 209.3l-191.1 183.1C235.1 397.8 229.1 400 224 400s-11.97-2.219-16.59-6.688L15.41 209.3C5.814 200.2 5.502 184.1 14.69 175.4c9.125-9.625 24.38-9.938 33.91-.7187L224 342.8l175.4-168c9.5-9.219 24.78-8.906 33.91 .7187C442.5 184.1 442.2 200.2 432.6 209.3z"/></svg>
             </button>
           </div>
@@ -244,7 +244,7 @@ import VirtualGrid from "./VirtualGrid.vue";
 import throttle from "lodash/throttle";
 import PresetSelector from "../widgets/PresetSelector.vue";
 import groupBy from "lodash/groupBy";
-import {sortsFn} from "../utils/preset-selector.mjs";
+import { generatePivotColumns, sortsFn } from "../utils/preset-selector.mjs";
 import PresetBar from "../widgets/PresetBar.vue";
 
 export default{
@@ -304,101 +304,6 @@ export default{
           .join(' ')
     },
 
-    generatePivotColumns(items){
-      if(!this.preset.pivot || !this.preset.pivot.enabled) return
-      if(!Array.isArray(items) && items.length < 1) return
-
-      const tableColumns = (this.preset.columns ?? this.config.columns)
-          .reduce((cur, obj) => {
-            cur[obj.key] = obj
-            return cur
-          }, {})
-
-      const currentPivotColumns = [ ...(this.preset.pivot.columns ?? []) ]
-          .reduce((cur, obj) => {
-            cur[obj.key] = obj
-            return cur
-          }, {})
-
-      const pivotColumns = []
-
-      for(let row of this.preset.pivot.rows){
-
-        let format
-        switch(row.aggregrate){
-          case 'year':
-            format = 'YYYY'
-            break
-
-          case 'month':
-            format = 'MMM YYYY'
-            break
-
-          case 'date':
-            format = 'D MMM YYYY'
-            break
-        }
-
-        if(currentPivotColumns[row.key]){
-          Object.assign(currentPivotColumns[row.key], {
-            format,
-            visible: true
-          })
-
-          pivotColumns.push(currentPivotColumns[row.key])
-        }
-        else{
-          pivotColumns.push({
-            ...tableColumns[row.key],
-            format,
-            visible: true
-          })
-        }
-      }
-
-      for(let key in items[0]){
-        if(key.startsWith('_')){
-          let [ k1, ...k2 ] = key.substring(1).split('-')
-          k2 = k2.join('-')
-
-          let label = k2.replace(/_/gi, ' ')
-          const column = tableColumns[k1]
-          if(column){
-            switch(column.type){
-              case 'enum':
-                label = (column.typeParams ?? []).find(_ => `${_.value}` === `${k2}`)?.text ?? label
-                break
-            }
-          }
-
-          if(currentPivotColumns[key]){
-            Object.assign(currentPivotColumns[key], {
-              visible: true
-            })
-
-            pivotColumns.push(currentPivotColumns[key])
-          }
-          else{
-            pivotColumns.push({
-              key,
-              label,
-              label2: (((tableColumns[k1] ?? {}).label ?? '') + ': ' + label).trim(),
-              type: 'number',
-            })
-          }
-        }
-      }
-
-      (this.preset.pivot.columns ?? []).filter(_ => !pivotColumns.find(i => i.key === _.key))
-          .forEach(_ => {
-            _.visible = false
-            pivotColumns.push(_)
-          })
-
-      this.preset.pivot.columns = pivotColumns
-
-    },
-
     load(){
       if(this.src){
         if(!this.preset.columns){
@@ -411,7 +316,7 @@ export default{
         })
             .then(data => {
 
-              this.generatePivotColumns(data.items)
+              generatePivotColumns(this.preset, data.items)
               this.loadEnums(data.items)
               Object.assign(this.data, data ?? {})
               this.$emit('after-load')
@@ -529,7 +434,7 @@ export default{
     },
 
     loadExt(){
-      if(!this.preset.filters || !this.extBar.open) return
+      if(!this.extBar.open) return
 
       this.readyState = 3
       return this.socket.send(this.src, {
@@ -620,7 +525,6 @@ export default{
 
     onSignal(event, items){
       if(this.pivotEnabled){
-        console.log('no background update due ti pivot')
         return
       }
 
@@ -654,11 +558,22 @@ export default{
         const filters = []
 
         for(let idx in this.preset.pivot.rows){
+          const key = this.preset.pivot.rows[idx].key
+          const presetColumn = this.preset.columns.find(_ => _.key === key)
+          let value = item[this.preset.pivot.rows[idx].key]
+          switch(presetColumn.type){
+
+            case 'bool':
+            case 'boolean':
+              value = value === 'true'
+              break
+          }
+
           filters.push({
-            key: this.preset.pivot.rows[idx].key,
+            key,
             value: [{
               operator: '=',
-              value: item[this.preset.pivot.rows[idx].key]
+              value
             }]
           })
         }
@@ -667,11 +582,23 @@ export default{
         vv = vv.join('-')
 
         if(![ 'count' ].includes(vv)){
+
+          const key = kk.substring(1)
+          const presetColumn = this.preset.columns.find(_ => _.key === key)
+          let value = vv
+          switch(presetColumn.type){
+
+            case 'bool':
+            case 'boolean':
+              value = value === 'true'
+              break
+          }
+
           filters.push({
-            key: kk.substring(1),
+            key,
             value: [{
               operator: '=',
-              value: vv
+              value
             }]
           })
         }
@@ -922,11 +849,12 @@ export default{
 }
 
 .resize2{
-  @apply h-[3px] cursor-n-resize absolute top-0 left-0 right-0 flex items-center justify-center;
+  @apply h-[5px] hover:bg-primary bg-text-50 cursor-n-resize absolute top-0 left-0 right-0 flex items-center justify-center;
+  @apply z-20;
 }
 
 .extClose{
-  @apply w-[21px] h-[21px] rounded-full bg-base-300 flex items-center justify-center hover:bg-red-600;
+  @apply w-[21px] h-[21px] rounded-full bg-text-50 flex items-center justify-center hover:bg-red-600;
 }
 
 </style>

package/src/components/VirtualTable.vue

@@ -7,7 +7,7 @@
 					<th v-for="column in visibleColumns" :style="thStyle(column)">
 						<slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
 						<div v-else :class="headerColumnClass(column)">
-							<span>{{ column.label ?? column.key }}</span>
+							<span>{{ column.label2 ? column.label2 : (column.label ? column.label : column.key) }}</span>
 						</div>
 						<div :class="$style.separator" @mousedown="startResize($event, column)"></div>
 					</th>
@@ -201,7 +201,6 @@ export default{
 		this.resize()
 
     const observer = new MutationObserver((mutationsList) => {
-      console.log(mutationsList)
       this.resize()
     });
     observer.observe(this.$el, { attributes: true });
@@ -254,7 +253,7 @@ export default{
 					this.itemHeight = parseInt(window.getComputedStyle(this.$refs.calc).height)
 					this.maxVisibleItems = elHeight > 0 ? Math.ceil(elHeight / this.itemHeight) + 1 : this.items.length
 
-					if(this.itemHeight <= 0){
+					if(this.itemHeight <= 0 && import.meta.env.DEV){
 						console.error('[VirtualTable] Unable to calculate item height, make sure not async component.')
 					}
 				}

package/src/utils/preset-selector.js

@@ -4,7 +4,7 @@ const {inspect} = require("util");
 const {ftWildcard} = require("./helpers");
 const util = require("util");
 const {snakeCase} = require("lodash");
-const {Op, literal, fn} = module.parent.require("sequelize");
+const {Op, literal, fn, DataTypes} = module.parent.require("sequelize");
 
 const getValue = (filter, opt) => {
 
@@ -756,6 +756,11 @@ const pivotToSequelizeWhere = async (pivot, opt) => {
         attributes.push([ fn('MAX', literal(`${model.name}.${value.key}`)), `_${value.key}-${value.aggregrate}` ])
         break
 
+      case 'countDistinct':
+        attributes.push([ literal(`COUNT(DISTINCT ${model.name}.${value.key})`), `_${value.key}-${value.aggregrate}` ])
+        sortKeyToOrders[`_${value.key}-${value.aggregrate}`] = literal(`COUNT(DISTINCT ${model.name}.${value.key})`)
+        break
+
       case 'count':
         attributes.push([ fn('COUNT', literal(`${model.name}.${value.key}`)), `_${value.key}-${value.aggregrate}` ])
         sortKeyToOrders[`_${value.key}-${value.aggregrate}`] = fn('COUNT', literal(`${model.name}.${value.key}`))
@@ -780,7 +785,10 @@ const pivotToSequelizeWhere = async (pivot, opt) => {
 
         const field = model.rawAttributes[value.key].field
 
+
         groups.forEach(group => {
+
+          let groupValue
           if(group[value.key] === null){
             attributes.push([ literal(`SUM(CASE WHEN ${model.name}.${field} is null THEN 1 ELSE 0 END)`), `_${value.key}-(null)` ])
           }
@@ -788,8 +796,14 @@ const pivotToSequelizeWhere = async (pivot, opt) => {
             attributes.push([ literal(`SUM(CASE WHEN ${model.name}.${field} = '' THEN 1 ELSE 0 END)`), `_${value.key}-(empty)` ])
           }
           else{
-            const groupValue = (group[value.key] ?? '').toString().replace(/\s/g, '_')
-            attributes.push([ literal(`SUM(CASE WHEN ${model.name}.${field} = '${group[value.key]}' THEN 1 ELSE 0 END)`), `_${value.key}-${groupValue}` ])
+            if(model.rawAttributes[value.key].type instanceof DataTypes.BOOLEAN){
+              groupValue = group[value.key]
+              attributes.push([ literal(`SUM(CASE WHEN ${model.name}.${field} = ${groupValue === true ? 1 : 0} THEN 1 ELSE 0 END)`), `_${value.key}-${groupValue}` ])
+            }
+            else{
+              groupValue = (group[value.key] ?? '').toString().replace(/\s/g, '_')
+              attributes.push([ literal(`SUM(CASE WHEN ${model.name}.${field} = '${group[value.key]}' THEN 1 ELSE 0 END)`), `_${value.key}-${groupValue}` ])
+            }
           }
         })
 

package/src/utils/preset-selector.mjs

@@ -55,8 +55,108 @@ const setupConfig = (config) => {
   return config
 }
 
+const generatePivotColumns = (preset, items) => {
+  if(!preset.pivot || !preset.pivot.enabled) return
+  if(!Array.isArray(items) && items.length < 1) return
+
+  if(preset.pivot.manualColumns === true){
+    return
+  }
+
+  const tableColumns = (preset.columns ?? [])
+    .reduce((cur, obj) => {
+      cur[obj.key] = obj
+      return cur
+    }, {})
+
+  const currentPivotColumns = [ ...(preset.pivot.columns ?? []) ]
+    .reduce((cur, obj) => {
+      cur[obj.key] = obj
+      return cur
+    }, {})
+
+  const pivotColumns = []
+
+  for(let row of preset.pivot.rows){
+
+    let format
+    switch(row.aggregrate){
+      case 'year':
+        format = 'YYYY'
+        break
+
+      case 'month':
+        format = 'MMM YYYY'
+        break
+
+      case 'date':
+        format = 'D MMM YYYY'
+        break
+    }
+
+    if(currentPivotColumns[row.key]){
+      Object.assign(currentPivotColumns[row.key], {
+        format,
+        visible: true
+      })
+
+      pivotColumns.push(currentPivotColumns[row.key])
+    }
+    else{
+      pivotColumns.push({
+        ...tableColumns[row.key],
+        format,
+        visible: true
+      })
+    }
+  }
+
+  for(let key in items[0]){
+    if(key.startsWith('_')){
+      let [ k1, ...k2 ] = key.substring(1).split('-')
+      k2 = k2.join('-')
+
+      let label = k2.replace(/_/gi, ' ')
+      const column = tableColumns[k1]
+      if(column){
+        switch(column.type){
+          case 'enum':
+            label = (column.typeParams ?? []).find(_ => `${_.value}` === `${k2}`)?.text ?? label
+            break
+        }
+      }
+
+      if(currentPivotColumns[key]){
+        Object.assign(currentPivotColumns[key], {
+          visible: true
+        })
+
+        pivotColumns.push(currentPivotColumns[key])
+      }
+      else{
+        pivotColumns.push({
+          key,
+          label,
+          label2: (((tableColumns[k1] ?? {}).label ?? '') + ': ' + label).trim(),
+          type: 'number',
+        })
+      }
+    }
+  }
+
+  (preset.pivot.columns ?? []).filter(_ => !pivotColumns.find(i => i.key === _.key))
+    .forEach(_ => {
+      _.visible = false
+      pivotColumns.push(_)
+    })
+
+  preset.pivot.columns = pivotColumns
+
+}
+
 export {
   sortsFn,
   pickColumns,
-  setupConfig
+  setupConfig,
+  generatePivotColumns
 }

package/src/widgets/PresetBar.vue

@@ -509,7 +509,8 @@
                 </div>
                 <ListItem :items="presetPivot.values"
                           @reorder="(from, to) => { presetPivot.values.splice(to, 0, presetPivot.values.splice(from, 1)[0]); }"
-                          class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5">
+                          class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
+                          container-class="divide-y divide-text-50">
                   <template v-slot="{ item, index }">
                     <div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
                       <div data-reorder v-if="(presetPivot.values ?? []).length > 1">
@@ -521,10 +522,11 @@
                           {{ item.label ? item.label : item.key }}
                         </strong>
                         <select v-model="item.aggregrate"
-                                class="px-1 appearance-none bg-base-300 rounded-md border-[1px] border-text-50 outline-none"
+                                class="px-1 appearance-none bg-base-300 w-[80px] rounded-md border-[1px] border-text-50 outline-none"
                                 @change="apply()">
                           <option value="">Default</option>
                           <option value="count">Count</option>
+                          <option value="countDistinct">Distinct Count</option>
                           <option v-if="[ 'number' ].includes(item.type)" value="sum">Sum</option>
                           <option v-if="[ 'number' ].includes(item.type)" value="avg">Average</option>
                           <option v-if="[ 'number' ].includes(item.type)" value="min">Min</option>
@@ -539,6 +541,33 @@
                 </ListItem>
               </div>
 
+              <div>
+                <div class="flex flex-row items-center gap-2">
+                  <label class="flex-1">Columns</label>
+                  <button v-if="presetPivot.manualColumns"
+                          type="button"
+                          class="text-primary"
+                          @click="delete presetPivot.manualColumns; apply()">Reset</button>
+                </div>
+                <ListItem :items="presetPivot.columns"
+                          @reorder="(from, to) => { presetPivot.columns.splice(to, 0, presetPivot.columns.splice(from, 1)[0]); presetPivot.manualColumns = true; apply() }"
+                          class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
+                          container-class="divide-y divide-text-50">
+                  <template v-slot="{ item, index }">
+                    <div class="flex flex-row gap-2 items-center px-2 bg-base-500">
+                      <div data-reorder>
+                        <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+                      </div>
+                      <Textbox class="flex-1 border-none" v-model="item.label2" :placeholder="item.label"
+                        item-class="p-1"/>
+                      <button type="button" @click="presetPivot.columns.splice(index, 1); presetPivot.manualColumns = true; apply()">
+                        <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                      </button>
+                    </div>
+                  </template>
+                </ListItem>
+              </div>
+
             </div>
 
           </div>