@mixd-id/web-scaffold 0.1.2301231353 → 0.1.2301231355

package/package.json

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

package/src/components/ListPage1.vue

@@ -2,7 +2,7 @@
 	<Suspense @resolve="patch">
 		<div :class="$style.comp">
 
-			<div class="flex-1 flex flex-col p-6">
+			<div class="flex-1 flex flex-col p-6 relative">
 
 				<div class="pb-0 flex flex-row gap-3 items-center mb-6">
 					<slot v-if="$slots['lp-start']" name="lp-start" :preset="preset"/>
@@ -43,15 +43,19 @@
 					</div>
 				</div>
 
-				<div class="flex-1 mb-4 flex flex-col bg-base-500 border-text-50 border-[1px]" v-if="summary">
-					<VirtualTable v-if="preset.summary.mode === 'table'" :items="summary.items" :columns="summary.columns" class="flex-1"></VirtualTable>
-
+				<div class="flex-1 mb-4 flex flex-col bg-base-500 border-text-50 border-[1px]" v-if="summary && !isLoading">
+					<VirtualTable v-if="preset.summary.mode === 'table'" :items="summaryItems" :columns="summaryColumns" class="flex-1"></VirtualTable>
 					<Bar v-else-if="preset.summary.mode === 'bar'" :data="chartData" :options="chartOptions" class="flex-1 w-full p-2"/>
-
+					<Line v-else-if="preset.summary.mode === 'line'" :data="chartData" :options="chartOptions" class="flex-1 w-full p-2"/>
 				</div>
 
-				<VirtualTable v-if="!hideDetails" class="flex-1" :columns="presetColumns" :items="items"
+				<div v-if="isLoading" :class="$style.loadingComp">
+					<svg class="animate-spin aspect-square w-[36px] 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>
+					<label>Memuat...</label>
+				</div>
+				<VirtualTable v-else-if="!hideDetails" class="flex-1" :columns="presetColumns" :items="items" :state="isLoading ? 2 : 1"
 											:appearances="appearances" @scroll-end="loadNext" :pinned="pinned">
+
 					<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
 						<div :class="getHeader(column)" @click="openColumnOptions(column.key, $event.target.closest('.' + $style.header))">
 							<div>
@@ -255,7 +259,18 @@
 						</div>
 
 						<div class="p-3">
-							<label class="text-text-400 flex-1">Row</label>
+							<label class="text-text-400 flex-1">Type</label>
+							<div class="mt-2">
+								<Dropdown v-model="preset.summary.mode" class="flex-1" @change="load">
+									<option value="table">{{ $t('Table') }}</option>
+									<option value="bar">{{ $t('Bar Chart') }}</option>
+									<option value="line">{{ $t('Line Chart') }}</option>
+								</Dropdown>
+							</div>
+						</div>
+
+						<div class="p-3">
+							<label class="text-text-400 flex-1">{{ preset.summary.mode === 'table' ? $t('Row') : $t('X-axis') }}</label>
 							<div class="flex flex-row mt-2 gap-2">
 								<Dropdown v-model="preset.summary.rows[0].key" class="flex-1" @change="load">
 									<option value="" disabled selected>{{ $t('Add Column') }}</option>
@@ -264,15 +279,21 @@
 								<Dropdown v-model="preset.summary.rows[0].format" class="w-[100px]" @change="load">
 									<option value="">{{ $t('Default') }}</option>
 									<option value="date">{{ $t('Date') }}</option>
+									<option value="month">{{ $t('Month') }}</option>
+									<option value="year">{{ $t('Year') }}</option>
 								</Dropdown>
 							</div>
+							<Checkbox class="mt-2" v-if="preset.summary.mode === 'table'" v-model="preset.summary.showRowTotal">
+								Row Total
+							</Checkbox>
 						</div>
 
 						<div class="p-3">
-							<label class="text-text-400 flex-1">Column</label>
+							<label class="text-text-400 flex-1">{{ preset.summary.mode === 'table' ? $t('Column') : $t('Dimension') }}</label>
 							<div class="flex flex-row mt-2 gap-2">
 								<Dropdown v-model="preset.summary.columns[0].key" class="flex-1" @change="load">
 									<option value="" disabled selected>{{ $t('Add Column') }}</option>
+									<option value="(none)">{{ $t('None') }}</option>
 									<option v-for="column in filterableColumns" :value="column.key">{{ column.label }}</option>
 								</Dropdown>
 								<Dropdown v-model="preset.summary.columns[0].format" class="w-[100px]" @change="load">
@@ -280,28 +301,23 @@
 									<option value="date">{{ $t('Date') }}</option>
 								</Dropdown>
 							</div>
+							<Checkbox class="mt-2" v-if="preset.summary.mode === 'table'" v-model="preset.summary.showColumnTotal">
+								Column Total
+							</Checkbox>
+							<Checkbox class="mt-2" v-else-if="preset.summary.mode === 'bar'" v-model="preset.summary.stacked">
+								Stacked
+							</Checkbox>
 						</div>
 
 						<div class="p-3">
 							<label class="text-text-400 flex-1">Values</label>
 							<div class="flex flex-row mt-2 gap-2">
-								<Dropdown v-model="preset.summary.values[0].key" class="flex-1" @change="load">
-									<option value="" disabled selected>{{ $t('Add Column') }}</option>
-									<option v-for="column in filterableColumns" :value="column.key">{{ column.label }}</option>
-								</Dropdown>
-								<Dropdown v-model="preset.summary.values[0].aggregrate" class="w-[100px]" @change="load">
-									<option value="">{{ $t('Default') }}</option>
+								<Dropdown v-model="preset.summary.values[0].aggregrate" class="flex-1" @change="load">
+									<option value="" disabled selected>{{ $t('Select') }}</option>
 									<option value="count">{{ $t('Count') }}</option>
-								</Dropdown>
-							</div>
-						</div>
-
-						<div class="p-3">
-							<label class="text-text-400 flex-1">Type</label>
-							<div class="mt-2">
-								<Dropdown v-model="preset.summary.mode" class="flex-1" @change="load">
-									<option value="table">{{ $t('Table') }}</option>
-									<option value="bar">{{ $t('Bar Chart') }}</option>
+									<option value="max">{{ $t('Max') }}</option>
+									<option value="min">{{ $t('Min') }}</option>
+									<option value="avg">{{ $t('Avg') }}</option>
 								</Dropdown>
 							</div>
 						</div>
@@ -310,8 +326,6 @@
 
 				</div>
 
-				<div class="px-6 py-3 flex flex-row gap-2"></div>
-
 			</div>
 
 		</div>
@@ -325,14 +339,13 @@
 
 import throttle from "lodash/throttle";
 import {urlQuery} from "../utils/helpers.mjs";
-import { Bar } from 'vue-chartjs'
-import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
-
-ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+import { Bar, Line } from 'vue-chartjs'
+import Chart from 'chart.js/auto'
+import dayjs from "dayjs";
 
 export default{
 
-	components: { Bar },
+	components: { Bar, Line },
 
 	inject: [ 'socket', 'confirm', 'alert', 'socketEmit', 'toast' ],
 
@@ -421,6 +434,19 @@ export default{
 
 			var style = getComputedStyle(document.body)
 			var gridColor = style.getPropertyValue('--text-50')
+			var gridColor2 = style.getPropertyValue('--text-200')
+
+			const baseColumn = this.summary.columns[0]
+			const baseColumnType = baseColumn.type
+
+			let highGrids = []
+			if(baseColumnType === 'date'){
+				this.summary.items.forEach((item) => {
+					if(dayjs(item.dfDate).day() === 1){
+						highGrids.push(dayjs(item.dfDate).format('D MMM'))
+					}
+				})
+			}
 
 			return {
 				responsive: true,
@@ -431,12 +457,20 @@ export default{
 				scales: {
 					x: {
 						grid: {
-							color: `rgb(${gridColor})`
-						}
+							color: function(context){
+								if(baseColumnType === 'date' && context.tick && highGrids.includes(context.tick.label)){
+									return `rgb(${gridColor2})`
+								}
+								return `rgb(${gridColor})`
+							}
+						},
+						stacked: this.preset.summary.stacked
 					},
 					y: {
 						grid: {
-							color: `rgb(${gridColor})`
+							color: function(context){
+								return `rgb(${gridColor})`
+							}
 						}
 					}
 				}
@@ -447,9 +481,21 @@ export default{
 
 			//console.log(this.summary)
 
+			const column = this.summary.columns.filter((_) => _.key === 'dfDate').pop()
+
 			const labels = []
 			this.summary.items.forEach((item) => {
-				labels.push(item.dfDate)
+
+				let label = item.dfDate
+				switch(column.type){
+
+					case 'date':
+						const dateFormat = column.format ?? 'D MMM YY HH:mm:ss'
+						const djs = dayjs(item.dfDate)
+						label = djs.isValid() ? djs.format(dateFormat) : item.dfDate
+						break
+				}
+				labels.push(label)
 			})
 
 			const datasets = []
@@ -489,6 +535,52 @@ export default{
 			if(this.preset && this.preset.summary && this.preset.summary.hideDetails)
 				return this.preset.summary.hideDetails
 			return false;
+		},
+
+		summaryColumns(){
+
+			const columns = [ ...this.summary.columns ]
+
+			if(this.preset.summary.showColumnTotal){
+				columns.push({ key:"_total", label:"Total", visible:true, type:"number" })
+			}
+
+			return columns
+		},
+
+		summaryItems(){
+
+			const items = [ ...this.summary.items ]
+
+			//console.log('#1', this.preset.summary.showColumnTotal, this.preset.summary.showRowTotal, items.length)
+
+			if(this.preset.summary.showColumnTotal){
+				items.forEach((item) => {
+					let total = 0
+					for(let key in item){
+						if([ 'dfDate', '_total' ].includes(key)) continue
+						total += parseInt(item[key])
+					}
+					item._total = total
+				})
+			}
+
+			if(this.preset.summary.showRowTotal){
+				const totalItem = { dfDate:"Total" }
+				this.summary.items.forEach((item) => {
+
+					for(let key in item){
+						if([ 'dfDate' ].includes(key)) continue
+
+						if(!(key in totalItem))
+							totalItem[key] = 0
+						totalItem[key] += parseInt(item[key])
+					}
+				})
+				items.push(totalItem)
+			}
+
+			return items
 		}
 
 	},
@@ -512,6 +604,7 @@ export default{
 				{ text:'Sorts', value:'sort' },
 				{ text:'Summary', value:'summary' },
 			],
+			isLoading: false,
 			name: null,
 			columns: [],
 			selectedColumn: null,
@@ -542,6 +635,7 @@ export default{
 
 		patch(){
 
+			this.isLoading = true
 			this.socketEmit(`${this.computedDataSource}.patch`, {
 				...(urlQuery().reset ? { reset:1 } : {})
 			}, (res) => {
@@ -557,10 +651,14 @@ export default{
 					this.summary = data.summary
 					this.hasNext = data.hasNext
 					this.count = data.count
+					this.isLoading = false
 				})
 
 				if(this.name)
 					this.socketEmit(this.name + '.subscribe', { name:this.name })
+			}, (err) => {
+				this.isLoading = false
+				this.toast(err)
 			})
 		},
 
@@ -604,6 +702,7 @@ export default{
 		},
 
 		load(){
+			this.isLoading = true
 			this.socketEmit(`${this.computedDataSource}.load`, {
 				preset: this.preset
 			}, (res) => {
@@ -612,6 +711,10 @@ export default{
 				this.summary = data.summary
 				this.hasNext = data.hasNext
 				this.count = data.count
+				this.isLoading = false
+			}, (err) => {
+				this.isLoading = false
+				this.toast(err)
 			})
 		},
 
@@ -843,7 +946,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex-1 flex flex-row;
+	@apply flex-1 flex flex-row relative;
 }
 
 .header{
@@ -861,4 +964,10 @@ export default{
 	@apply hover:bg-primary hover:text-white;
 }
 
+.loadingComp{
+	@apply absolute left-0 top-0 right-0 bottom-0;
+	@apply flex flex-col gap-4 items-center justify-center;
+	background: rgba(0, 0, 0, .3);
+}
+
 </style>

package/src/components/VirtualTable.vue

@@ -331,12 +331,13 @@ export default{
 			}
 
 			let text = value
+			let dateFormat, val
 			switch(column.type){
 
 				case 'date':
-					const dateFormat = column.format ?? 'DD MMM YY HH:mm'
-					const val = dayjs(value)
-					text = val.isValid() ? val.format(dateFormat) : ''
+					dateFormat = column.format ?? 'D MMM YY HH:mm:ss'
+					val = dayjs(value)
+					text = val.isValid() ? val.format(dateFormat) : value
 					break
 
 				case 'currency':

package/src/utils/listpage1.js

@@ -1,7 +1,6 @@
 const { Op } = module.parent.require('sequelize')
 const Sequelize = module.parent.require('sequelize')
 const dayjs = require("dayjs");
-const util = require("util");
 
 let ListPage1 = {
 
@@ -107,11 +106,12 @@ let ListPage1 = {
     }
 
     if(preset.search){
+      const tableName = this.model.tableName
       where = {
         ...where,
-        [Op.and]: Sequelize.literal('MATCH(tag) AGAINST (? IN BOOLEAN MODE)')
+        [Op.and]: Sequelize.literal(`MATCH(\`${tableName}\`.tag) AGAINST (? IN BOOLEAN MODE)`)
       }
-      replacements.push(ftW)
+      replacements.push(preset.search)
     }
 
     if(afterItem){
@@ -164,6 +164,154 @@ let ListPage1 = {
     }
   },
 
+  async loadSummary(preset, modelParams){
+
+    const { columns, rows, values } = preset.summary
+
+    if(!Array.isArray(columns) || columns.length !== 1) return
+    if(!Array.isArray(rows) || rows.length !== 1) return
+    if(!Array.isArray(values) || values.length !== 1) return
+
+    const col = columns[0]
+    let columnValues = []
+    let colKey
+    if(col.key !== '(none)'){
+      colKey = this.model.rawAttributes[col.key].field
+      columnValues = await this.model.findAll({
+        attributes: [
+          [ Sequelize.fn("DISTINCT", Sequelize.col(colKey)), 'cols' ]
+        ],
+        order: [
+          [ colKey, 'asc' ]
+        ],
+        ...modelParams
+      })
+      //console.log(columnValues)
+    }
+
+    const attributes = []
+    const group = []
+    const summaryColumns = [
+      /*{ key:"dfDate", label:"Date", width:"200px", visible:true },
+      { key:"type-1", label:"Type 1", type:"number", visible:true },
+      { key:"type-2", label:"Type 2", type:"number", visible:true },
+      { key:"type-3", label:"Type 3", type:"number", visible:true },
+      { key:"type-4", label:"Type 4", type:"number", visible:true },
+      { key:"type-8", label:"Type 8", type:"number", visible:true },*/
+    ]
+
+    const row = rows[0]
+    const rowKey = this.model.rawAttributes[row.key].field
+    const rowLabel = this.columns[row.key].label
+    switch(row.format){
+      case 'date':
+        attributes.push([Sequelize.fn("DATE_FORMAT", Sequelize.col(rowKey), '%Y-%m-%d'), "dfDate"])
+        group.push([Sequelize.fn("DATE_FORMAT", Sequelize.col(rowKey), '%Y-%m-%d'), "dfDate"])
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"D MMM" })
+        break
+
+      case 'month':
+        attributes.push([Sequelize.fn("DATE_FORMAT", Sequelize.col(rowKey), '%Y-%m'), "dfDate"])
+        group.push([Sequelize.fn("DATE_FORMAT", Sequelize.col(rowKey), '%Y-%m'), "dfDate"])
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"MMM YYYY" })
+        break
+
+      case 'year':
+        attributes.push([Sequelize.fn("DATE_FORMAT", Sequelize.col(rowKey), '%Y'), "dfDate"])
+        group.push([Sequelize.fn("DATE_FORMAT", Sequelize.col(rowKey), '%Y'), "dfDate"])
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"YYYY" })
+        break
+
+      default:
+        attributes.push([Sequelize.col(rowKey), "dfDate"])
+        group.push([Sequelize.col(rowKey), "dfDate"])
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true })
+        break
+    }
+
+    const value = values[0]
+    if(columnValues.length > 0){
+      columnValues.forEach((obj) => {
+        const columnValue = obj.dataValues['cols']
+
+        switch(value.aggregrate){
+          case 'count':
+            attributes.push([Sequelize.fn("SUM", Sequelize.fn("IF", Sequelize.literal(`${colKey} = '${columnValue}'`), 1, 0)), colKey + "-" + columnValue])
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:(columnValue ?? '').toString(), visible:true, aggregrate:"count" })
+            break
+
+          case 'min':
+            attributes.push([Sequelize.fn("MIN", colKey), colKey + "-" + columnValue])
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:(columnValue ?? '').toString(), visible:true, aggregrate:"count" })
+            break
+
+          case 'max':
+            attributes.push([Sequelize.fn("MAX", colKey), colKey + "-" + columnValue])
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:(columnValue ?? '').toString(), visible:true, aggregrate:"count" })
+            break
+
+          case 'avg':
+            attributes.push([Sequelize.fn("AVG", colKey), colKey + "-" + columnValue])
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:(columnValue ?? '').toString(), visible:true, aggregrate:"count" })
+            break
+        }
+      })
+    }
+    else{
+      switch(value.aggregrate) {
+        case 'count':
+        default:
+          attributes.push([Sequelize.fn('count', '*'), 'Count'])
+          summaryColumns.push({ key:'Count', label:'Count', type:"number", visible:true, aggregrate:"count" })
+      }
+    }
+
+    //console.log(attributes)
+
+    const summaryItems = await this.model.findAll({
+      attributes,
+      group,
+      order: [
+        [ 'dfDate', 'asc' ]
+      ],
+      ...modelParams
+    })
+    /*const summaryItems = await this.model.findAll({
+      attributes: [
+        [Sequelize.fn("DATE_FORMAT", Sequelize.col("created_at"), '%Y-%m-%d'), "dfDate"],
+        [Sequelize.fn("SUM", Sequelize.fn("IF", Sequelize.literal("type = 1"), 1, 0)), "type-1"],
+        [Sequelize.literal("SUM(IF(type =  2, 1, 0))"), "type-2"],
+        [Sequelize.literal("SUM(IF(type =  3, 1, 0))"), "type-3"],
+        [Sequelize.literal("SUM(IF(type =  4, 1, 0))"), "type-4"],
+        [Sequelize.literal("SUM(IF(type =  8, 1, 0))"), "type-8"],
+      ],
+      group: [
+        [Sequelize.fn("DATE_FORMAT", Sequelize.col("created_at"), '%Y-%m-%d')]
+      ],
+      order: [
+        [ 'dfDate', 'asc' ]
+      ],
+      ...modelParams
+    })*/
+    //console.log(summaryItems)
+
+    const summary = {
+      type: "table",
+      columns: summaryColumns,
+      items: summaryItems
+      /*items: [
+        { date:"21 Jan 23", "type-1":12, "type-2":11, "type-3":16, "type-4":2, "type-8":8 },
+        { date:"22 Jan 23", "type-1":51, "type-2":87, "type-3":86, "type-4":3, "type-8":9 },
+        { date:"23 Jan 23", "type-1":14, "type-2":66, "type-3":77, "type-4":4, "type-8":18 },
+        { date:"24 Jan 23", "type-1":7, "type-2":3, "type-3":63, "type-4":5, "type-8":28 },
+        { date:"25 Jan 23", "type-1":88, "type-2":55, "type-3":68, "type-4":6, "type-8":38 },
+        { date:"26 Jan 23", "type-1":172, "type-2":13, "type-3":6, "type-4":7, "type-8":48 }
+      ]*/
+    }
+
+    return summary
+  },
+
   async subscribe(params, socket){
     const { name } = params
     if(name){