@mixd-id/web-scaffold 0.1.230406385 → 0.1.230406386

package/package.json

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

package/src/components/List.vue

@@ -267,12 +267,11 @@
 
 import VirtualTable from "./VirtualTable.vue";
 import VirtualGrid from "./VirtualGrid.vue";
-import throttle from "lodash/throttle";
 import PresetSelector from "../widgets/PresetSelector.vue";
 import groupBy from "lodash/groupBy";
 import {generatePivotColumns, generateTotalColumns, sortsFn} from "../utils/preset-selector.mjs";
 import PresetBar from "../widgets/PresetBar.vue";
-import {queueForLater} from "../utils/helpers.mjs";
+import {invokeAfterIdle, queueForLater} from "../utils/helpers.mjs";
 
 export default{
 
@@ -368,6 +367,7 @@ export default{
         this.readyState = 2
         return this.socket.send(this.src, {
           ...this.preset,
+          id: undefined,
           itemsPerPage: this.data.itemsPerPage,
         })
             .then(data => {
@@ -401,6 +401,7 @@ export default{
         this.readyState = 4
         this.socket.send(this.src, {
           ...this.preset,
+          id: undefined,
           itemsPerPage: this.data.itemsPerPage,
           afterItem,
         })
@@ -543,8 +544,8 @@ export default{
     },
 
     resize1(w){
-      if(this.config.sidebar.width + w >= 270 && this.config.sidebar.width + w <= 600){
-        this.config.sidebar.width += w
+      if(this.sidebar.width + w >= 270 && this.sidebar.width + w <= 600){
+        this.sidebar.width += w
       }
     },
 
@@ -557,12 +558,12 @@ export default{
       }
     },
 
-    savePreset: throttle(function() {
+    savePreset: invokeAfterIdle(function() {
       if(this.presetKey) {
         this.socket.send('user.preset',
             {key: this.presetKey, config: this.config})
       }
-    }, 1000, { leading:true }),
+    }),
 
     openPreset(){
 
@@ -958,14 +959,21 @@ export default{
           (this.view ?? this.preset.view)
     },
 
+    configParams(){
+      if(!this.config.params)
+        this.config.params = {}
+      return this.config.params
+    },
+
     sidebar(){
-      if(!this.config.sidebar || !('open' in this.config.sidebar))
-        this.config.sidebar = {
+
+      if(!this.configParams.sidebar || !('open' in this.configParams.sidebar))
+        this.configParams.sidebar = {
           open: false,
           width: 270
         }
 
-      return this.config.sidebar
+      return this.configParams.sidebar
     },
 
     sidebarStyle(){

package/src/components/Modal.vue

@@ -88,7 +88,10 @@ export default{
 			default: 'bottom'
 		},
 
-    state: [ Number, Boolean, String ],
+    state: {
+      type: [ Number, Boolean, String ],
+      default: undefined
+    },
 
     transition: String,
 
@@ -244,7 +247,7 @@ export default{
 
 		computedState(){
       return (this.debugState && this.editMode) ? Boolean(this.debugState) :
-          (this.state ? Boolean(this.state) : this._state)
+          (this.state !== undefined ? Boolean(this.state) : this._state)
 		},
 
     currentState(){

package/src/components/VirtualGrid.vue

@@ -258,7 +258,7 @@ export default{
       }
 
       this.scrollerCache = {
-        id: this.items[this.visibleStartIndex]?.id,
+        id: (this.items ?? [])[this.visibleStartIndex]?.id,
         index: this.visibleStartIndex
       }
     },

package/src/components/VirtualTable.vue

@@ -614,7 +614,7 @@ export default{
       }
 
       this.scrollerCache = {
-        id: this.items[this.visibleStartIndex]?.id,
+        id: (this.items ?? [])[this.visibleStartIndex]?.id,
         index: this.visibleStartIndex
       }
     },

package/src/utils/preset-selector.js

@@ -1,8 +1,7 @@
 const groupBy = require("lodash/groupBy");
 const dayjs = require("dayjs");
-const {Op, literal, fn, col, where, DataTypes} = require("sequelize");
+const {Op, literal, fn, DataTypes} = module.parent.require("sequelize");
 const {ftWildcard} = require("./helpers");
-const util = require("util");
 
 const getValue = (filter, opt) => {
 
@@ -1010,7 +1009,6 @@ const chartToSequelizeWhere = async (chart, opt) => {
 }
 
 const pivotToSequelizeWhere = async (pivot, opt) => {
-
   const { model, sorts = [] } = opt
 
   const attributes = []
@@ -1018,120 +1016,123 @@ const pivotToSequelizeWhere = async (pivot, opt) => {
   const order = []
   const sortExists = sorts.length > 0
 
-  const groupedSorts = groupBy(sorts, 'key')
-
-  for(let row of pivot.rows){
+  if(Array.isArray(pivot.rows)){
+    const groupedSorts = groupBy(sorts, 'key')
 
-    const field = model.rawAttributes[row.key].field
+    for(let row of pivot.rows){
+      const field = model.rawAttributes[row.key].field
 
-    switch(row.aggregrate){
+      switch(row.aggregrate){
 
-      case 'date':
-        attributes.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m-%d'), row.key ])
-        group.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m-%d'), row.key ])
-        if(!sortExists) order.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m-%d'), 'asc' ])
-        break
+        case 'date':
+          attributes.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m-%d'), row.key ])
+          group.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m-%d'), row.key ])
+          if(!sortExists) order.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m-%d'), 'asc' ])
+          break
 
-      case 'month':
-        attributes.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m'), row.key ])
-        group.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m'), row.key ])
-        if(!sortExists) order.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m'), 'asc' ])
-        break
+        case 'month':
+          attributes.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m'), row.key ])
+          group.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m'), row.key ])
+          if(!sortExists) order.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m'), 'asc' ])
+          break
 
-      case 'year':
-        attributes.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y'), row.key ])
-        group.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y'), row.key ])
-        if(!sortExists) order.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y'), 'asc' ])
-        break
+        case 'year':
+          attributes.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y'), row.key ])
+          group.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y'), row.key ])
+          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
+        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}`)
-        if(!sortExists) order.push([ row.key, groupedSorts[row.key] ? groupedSorts[row.key][0].type : 'asc' ])
-        break
+        default:
+          attributes.push([ literal(`${model.name}.${field}`), row.key ])
+          group.push(`${model.name}.${field}`)
+          if(!sortExists) order.push([ row.key, groupedSorts[row.key] ? groupedSorts[row.key][0].type : 'asc' ])
+          break
+      }
     }
   }
 
   const sortKeyToOrders = {} // Helper to determine group ordering
-  for(let value of pivot.values){
-    const valueKey = model.rawAttributes[value.key].field
+  if(Array.isArray(pivot.values)){
+    for(let value of pivot.values){
+      const valueKey = model.rawAttributes[value.key].field
 
-    switch(value.aggregrate){
+      switch(value.aggregrate){
 
-      case 'sum':
-        attributes.push([ fn('SUM', literal(`${model.name}.${valueKey}`)), `_${value.key}-${value.aggregrate}` ])
-        break
+        case 'sum':
+          attributes.push([ fn('SUM', literal(`${model.name}.${valueKey}`)), `_${value.key}-${value.aggregrate}` ])
+          break
 
-      case 'avg':
-        attributes.push([ fn('AVG', literal(`${model.name}.${valueKey}`)), `_${value.key}-${value.aggregrate}` ])
-        break
+        case 'avg':
+          attributes.push([ fn('AVG', literal(`${model.name}.${valueKey}`)), `_${value.key}-${value.aggregrate}` ])
+          break
 
-      case 'min':
-        attributes.push([ fn('MIN', literal(`${model.name}.${valueKey}`)), `_${value.key}-${value.aggregrate}` ])
-        break
+        case 'min':
+          attributes.push([ fn('MIN', literal(`${model.name}.${valueKey}`)), `_${value.key}-${value.aggregrate}` ])
+          break
 
-      case 'max':
-        attributes.push([ fn('MAX', literal(`${model.name}.${valueKey}`)), `_${value.key}-${value.aggregrate}` ])
-        break
+        case 'max':
+          attributes.push([ fn('MAX', literal(`${model.name}.${valueKey}`)), `_${value.key}-${value.aggregrate}` ])
+          break
 
-      case 'countDistinct':
-        attributes.push([ literal(`COUNT(DISTINCT ${model.name}.${valueKey})`), `_${value.key}-${value.aggregrate}` ])
-        sortKeyToOrders[`_${value.key}-${value.aggregrate}`] = literal(`COUNT(DISTINCT ${model.name}.${valueKey})`)
-        break
+        case 'countDistinct':
+          attributes.push([ literal(`COUNT(DISTINCT ${model.name}.${valueKey})`), `_${value.key}-${value.aggregrate}` ])
+          sortKeyToOrders[`_${value.key}-${value.aggregrate}`] = literal(`COUNT(DISTINCT ${model.name}.${valueKey})`)
+          break
 
-      case 'count':
-        attributes.push([ fn('COUNT', literal(`${model.name}.${valueKey}`)), `_${value.key}-${value.aggregrate}` ])
-        sortKeyToOrders[`_${value.key}-${value.aggregrate}`] = fn('COUNT', literal(`${model.name}.${valueKey}`))
-        break
+        case 'count':
+          attributes.push([ fn('COUNT', literal(`${model.name}.${valueKey}`)), `_${value.key}-${value.aggregrate}` ])
+          sortKeyToOrders[`_${value.key}-${value.aggregrate}`] = fn('COUNT', literal(`${model.name}.${valueKey}`))
+          break
 
-      default:
-        const { where, replacements } = opt
-        const groups = await model.findAll({
-          attributes: [ value.key ],
-          where: {
-            [Op.and]: [
-              where
-            ]
-          },
-          group: [ value.key ],
-          replacements
-        })
+        default:
+          const { where, replacements } = opt
+          const groups = await model.findAll({
+            attributes: [ value.key ],
+            where: {
+              [Op.and]: [
+                where
+              ]
+            },
+            group: [ value.key ],
+            replacements
+          })
 
-        if(groups.length > 50){
-          throw new Error('Pivot value group is too large, max 50 items allowed.')
-        }
+          if(groups.length > 50){
+            throw new Error('Pivot value group is too large, max 50 items allowed.')
+          }
 
-        const field = model.rawAttributes[value.key].field
+          const field = model.rawAttributes[value.key].field
 
 
-        groups.forEach(group => {
+          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)` ])
-          }
-          else if(group[value.key] === ''){
-            attributes.push([ literal(`SUM(CASE WHEN ${model.name}.${field} = '' THEN 1 ELSE 0 END)`), `_${value.key}-(empty)` ])
-          }
-          else{
-            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}` ])
+            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)` ])
+            }
+            else if(group[value.key] === ''){
+              attributes.push([ literal(`SUM(CASE WHEN ${model.name}.${field} = '' THEN 1 ELSE 0 END)`), `_${value.key}-(empty)` ])
             }
             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}` ])
+              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}` ])
+              }
             }
-          }
-        })
+          })
 
-        break
+          break
+      }
     }
   }
 

package/src/widgets/PresetBar.vue

@@ -85,12 +85,12 @@
         </div>
 
         <div class="flex items-center justify-center border-b-[1px] border-text-100 px-3">
-          <Tabs :items="tabItems[config.type ?? 'list']" v-model="config.presetBarTabIndex" />
+          <Tabs :items="tabItems[config.type ?? 'list']" v-model="configParams.presetBarTabIndex" />
         </div>
 
         <div class="flex-1 overflow-y-auto">
 
-          <div v-if="config.presetBarTabIndex === 1" class="flex-1 flex flex-col p-5">
+          <div v-if="configParams.presetBarTabIndex === 1" class="flex-1 flex flex-col p-5">
             <ListItem :items="presetColumns"
                       body-class="divide-y divide-text-50 rounded-lg border-[1px] border-text-50 bg-base-300"
                       @reorder="(from, to) => { presetColumns.splice(to, 0, presetColumns.splice(from, 1)[0]); }">
@@ -113,7 +113,7 @@
             </ListItem>
           </div>
 
-          <div v-else-if="config.presetBarTabIndex === 2" class="flex-1 flex flex-col p-5">
+          <div v-else-if="configParams.presetBarTabIndex === 2" class="flex-1 flex flex-col p-5">
 
             <div class="flex-1 flex flex-col gap-6">
 
@@ -186,7 +186,7 @@
 
           </div>
 
-          <div v-else-if="config.presetBarTabIndex === 3" class="flex-1 flex flex-col p-5">
+          <div v-else-if="configParams.presetBarTabIndex === 3" class="flex-1 flex flex-col p-5">
 
             <ListItem v-if="Array.isArray(preset.sorts) && preset.sorts.length > 0"
                       :items="preset.sorts"
@@ -237,7 +237,7 @@
 
           </div>
 
-          <div v-else-if="config.presetBarTabIndex === 4" class="flex-1 flex flex-col gap-6 p-6">
+          <div v-else-if="configParams.presetBarTabIndex === 4" class="flex-1 flex flex-col gap-6 p-6">
 
             <div>
               <label>Select Type:</label>
@@ -454,13 +454,24 @@
 
           </div>
 
-          <div v-else-if="config.presetBarTabIndex === 5" class="flex-1 p-6">
+          <div v-else-if="configParams.presetBarTabIndex === 5" class="flex-1 p-6">
 
             <PresetBarPivot :pivot="presetPivot" :columns="pivotColumns" @apply="apply"/>
 
           </div>
 
-          <div v-else-if="config.presetBarTabIndex === 9" class="flex-1 p-6 flex flex-col gap-6">
+          <div v-else-if="configParams.presetBarTabIndex === 6" class="flex-1 p-6">
+
+            <button class="text-primary" type="button"
+                    @click="$refs.sharingModal.open([], { callback:addSharing })">
+              Share
+            </button>
+
+            <SharingModal ref="sharingModal" :src="configParams.sharingSrc"/>
+
+          </div>
+
+          <div v-else-if="configParams.presetBarTabIndex === 9" class="flex-1 p-6 flex flex-col gap-6">
 
             <div>
               <div class="flex flex-row">
@@ -495,10 +506,11 @@
 
 import PresetSelectorFilterItem from "../components/PresetSelectorFilterItem.vue";
 import PresetBarPivot from "./PresetBarPivot.vue";
+import SharingModal from "./Dashboard/SharingModal.vue";
 
 export default{
 
-  components: {PresetBarPivot, PresetSelectorFilterItem},
+  components: {SharingModal, PresetBarPivot, PresetSelectorFilterItem},
 
   emits: [ 'apply' ],
 
@@ -508,7 +520,9 @@ export default{
 
     config: Object,
 
-    enumCache: Object
+    enumCache: Object,
+
+    sharingSrc: String,
 
   },
 
@@ -521,6 +535,13 @@ export default{
       this.apply()
     },
 
+    addSharing(item) {
+      if (!Array.isArray(this.preset.sharing))
+        this.preset.sharing = []
+
+      this.$util.push(this.preset.sharing, item, {key: "id"})
+    },
+
     addSort(obj){
       if(!Array.isArray(this.preset.sorts))
         this.preset.sorts = []
@@ -537,7 +558,7 @@ export default{
     canApply(){
 
       if(this.preset){
-        if(this.config.presetBarTabIndex === 2){
+        if(this.configParams.presetBarTabIndex === 2){
           return true
           /*if(Array.isArray(this.preset.filters)){
             if(this.preset.filters.filter(_ => !_.key).length > 0){
@@ -545,14 +566,14 @@ export default{
             }
           }*/
         }
-        else if(this.config.presetBarTabIndex === 3){
+        else if(this.configParams.presetBarTabIndex === 3){
           if(Array.isArray(this.preset.sorts)){
             if(this.preset.sorts.filter(_ => !_.key).length > 0){
               return false
             }
           }
         }
-        else if(this.config.presetBarTabIndex === 4){
+        else if(this.configParams.presetBarTabIndex === 4){
           if(Array.isArray(this.chartOpt.xAxis)){
             if(this.chartOpt.xAxis.filter(_ => !_.key).length > 0){
               return false
@@ -596,7 +617,7 @@ export default{
     },
 
     deselect(){
-      this.config.presetBar.view = 1
+      this.presetBar.view = 1
     },
 
     filterColumnAdded(column){
@@ -639,6 +660,12 @@ export default{
       return this.presetChart[this.chartType]
     },
 
+    configParams(){
+      if(!this.config.params)
+        this.config.params = {}
+      return this.config.params
+    },
+
     filterColumns(){
       return this.config.columns.filter(_ => {
         return _.filterable !== false
@@ -697,12 +724,12 @@ export default{
     },
 
     presetBar(){
-      if(!this.config.presetBar || !this.config.presetBar.view)
-        this.config.presetBar = {
+      if(!this.configParams.presetBar || !this.configParams.presetBar.view)
+        this.configParams.presetBar = {
           view: 2
         }
 
-      return this.config.presetBar
+      return this.configParams.presetBar
     }
 
   },
@@ -715,6 +742,7 @@ export default{
           ...((this.config ?? {}).filters !== false ? [{ text:'Filters', value:2 }] : []),
           ...((this.config ?? {}).sorts !== false ? [{ text:'Sorts', value:3 }] : []),
           ...((this.config ?? {}).pivot !== false ? [{ text:'Pivot', value:5 }] : []),
+          ...(this.sharingSrc ? [{ text:'Sharing', value:6 }] : []),
           ...('debug' in this.$route.query || import.meta.env.DEV ? [{ text:'Debug', value:9 }] : []),
         ],
         chart: [
@@ -726,8 +754,8 @@ export default{
   },
 
   mounted() {
-    if(!this.config.presetBarTabIndex){
-      this.config.presetBarTabIndex = this.config.type === 'chart' ? 4 : 1
+    if(!this.configParams.presetBarTabIndex){
+      this.configParams.presetBarTabIndex = this.config.type === 'chart' ? 4 : 1
     }
   }
 

package/src/widgets/PresetBarPivot.vue

@@ -76,10 +76,10 @@
                   <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>
-                  <option v-if="[ 'number' ].includes(item.type)" value="max">Max</option>
+                  <option v-if="[ 'number', 'currency' ].includes(item.type)" value="sum">Sum</option>
+                  <option v-if="[ 'number', 'currency' ].includes(item.type)" value="avg">Average</option>
+                  <option v-if="[ 'number', 'currency' ].includes(item.type)" value="min">Min</option>
+                  <option v-if="[ 'number', 'currency' ].includes(item.type)" value="max">Max</option>
                 </select>
               </div>
               <button type="button" @click="pivot.values.splice(index, 1); apply()">
@@ -154,7 +154,9 @@ export default{
     },
 
     addPivot(type, obj){
-      console.log(this.pivot, type)
+      if(!this.pivot[type])
+        this.pivot[type] = []
+
       this.pivot[type].push(Object.assign({}, obj))
       this.apply()
     },