@mixd-id/web-scaffold 0.1.2301231352 → 0.1.2301231353

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.2301231352",
+  "version": "0.1.2301231353",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -24,6 +24,7 @@
     "@vueuse/core": "^9.0.2",
     "adm-zip": "^0.5.10",
     "axios": "^1.3.4",
+    "chart.js": "^4.2.1",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
@@ -41,13 +42,13 @@
     "serve-static": "^1.15.0",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.25",
+    "vue-chartjs": "^5.2.0",
     "vue-router": "^4.0.14"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.2.0",
     "autoprefixer": "^10.4.4",
     "postcss": "^8.4.12",
-    "sequelize": "^6.29.0",
     "vite": "^2.8.0"
   },
   "description": "This scaffold based on express vitejs vuejs",

package/src/components/ContextMenu.vue

@@ -56,7 +56,8 @@ export default {
 		return {
 			computedStyle: null,
 			isOpen: false,
-			context: null
+			context: null,
+			closing: false
 		}
 	},
 
@@ -80,16 +81,17 @@ export default {
 			if(typeof window === 'undefined') return
 
 			const transitionEnd = () => {
-				this.$emit('open')
 				window.addEventListener('click', this.onDismiss)
 				window.addEventListener('scroll', this.onDismiss)
 				this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
+				this.$emit('open')
 			}
 
+			this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
 			this.$refs.contextMenu.addEventListener('transitionend', transitionEnd)
-			window.setTimeout(() => {
+			this.$nextTick(() => {
 				this.$refs.contextMenu.classList.add(this.$style.active)
-			}, 77)
+			})
 		},
 
 		onDismiss(e){
@@ -104,6 +106,14 @@ export default {
 
 		open(caller, context){
 
+			if(this.isOpen){
+				return this.close(() => {
+					window.setTimeout(() => {
+						this.open(caller, context)
+					}, 30)
+				})
+			}
+
 			if(caller){
 				this.isOpen = true
 			}
@@ -181,10 +191,9 @@ export default {
 			else{
 				console.warn('Invalid context menu caller', this.caller)
 			}
-
 		},
 
-		close(){
+		close(fn){
 			const transitionEnd = () => {
 				window.removeEventListener('click', this.onDismiss)
 				window.removeEventListener('scroll', this.onDismiss)
@@ -194,7 +203,9 @@ export default {
 				this.computedStyle = null
 				this.isOpen = false
 				this.$emit('dismiss')
+				if(fn) fn()
 			}
+			this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
 			this.$refs.contextMenu.addEventListener('transitionend', transitionEnd)
 			this.$refs.contextMenu.classList.remove(this.$style.active)
 		}

package/src/components/ListPage1.vue

@@ -43,16 +43,14 @@
 					</div>
 				</div>
 
-				<VirtualScroll v-if="isMobile.value" :items="items" class="flex-1" @scroll-end="loadNext">
-					<template #item="{ item, index }">
-						<slot v-if="$slots.mobile" name="mobile" :item="item" :index="index"></slot>
-						<div v-else>
-							<div class="h-[2rem] bg-base-300 rounded-lg my-2"></div>
-						</div>
-					</template>
-				</VirtualScroll>
+				<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>
+
+					<Bar v-else-if="preset.summary.mode === 'bar'" :data="chartData" :options="chartOptions" class="flex-1 w-full p-2"/>
 
-				<VirtualTable v-else class="flex-1" :columns="presetColumns" :items="items"
+				</div>
+
+				<VirtualTable v-if="!hideDetails" class="flex-1" :columns="presetColumns" :items="items"
 											: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))">
@@ -163,7 +161,7 @@
 					</div>
 
 					<div class="flex justify-center">
-						<Tabs v-model="layout.presetTab" :items="[{text:'Columns',value:'column'},{text:'Filters',value:'filter'},{text:'Sorts',value:'sort'}]" />
+						<Tabs v-model="layout.presetTab" :items="tabItems" />
 					</div>
 				</div>
 
@@ -187,7 +185,7 @@
 						</ListItem>
 					</div>
 
-					<div class="flex flex-col" v-if="layout.presetTab === 'filter'">
+					<div class="flex flex-col" v-else-if="layout.presetTab === 'filter'">
 						<div v-if="filterableColumns.length > 0">
 							<ListPage1Filter v-if="preset.filters" v-for="filter in preset.filters"
 															 :filter="filter" :column="columns[filter.key]"
@@ -206,7 +204,7 @@
 						</div>
 					</div>
 
-					<div class="flex flex-col" v-if="layout.presetTab === 'sort'">
+					<div class="flex flex-col" v-else-if="layout.presetTab === 'sort'">
 						<div v-if="sortableColumns.length > 0" class="my-8">
 							<div v-for="sort in preset.sorts" class="py-4">
 								<div class="flex flex-row items-center gap-2">
@@ -244,6 +242,72 @@
 						</div>
 					</div>
 
+					<div class="flex flex-col gap-3 py-8" v-else-if="layout.presetTab === 'summary'">
+
+						<div class="flex flex-row items-center p-3">
+							<label class="text-text-400 flex-1">Enabled</label>
+							<Checkbox v-model="preset.summary.enabled" @change="load"/>
+						</div>
+
+						<div class="flex flex-row items-center p-3">
+							<label class="text-text-400 flex-1">Hide Details</label>
+							<Checkbox v-model="preset.summary.hideDetails" @change="load"/>
+						</div>
+
+						<div class="p-3">
+							<label class="text-text-400 flex-1">Row</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>
+									<option v-for="column in filterableColumns" :value="column.key">{{ column.label }}</option>
+								</Dropdown>
+								<Dropdown v-model="preset.summary.rows[0].format" class="w-[100px]" @change="load">
+									<option value="">{{ $t('Default') }}</option>
+									<option value="date">{{ $t('Date') }}</option>
+								</Dropdown>
+							</div>
+						</div>
+
+						<div class="p-3">
+							<label class="text-text-400 flex-1">Column</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 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">
+									<option value="">{{ $t('Default') }}</option>
+									<option value="date">{{ $t('Date') }}</option>
+								</Dropdown>
+							</div>
+						</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>
+									<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>
+								</Dropdown>
+							</div>
+						</div>
+
+					</div>
+
 				</div>
 
 				<div class="px-6 py-3 flex flex-row gap-2"></div>
@@ -261,9 +325,15 @@
 
 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)
 
 export default{
 
+	components: { Bar },
+
 	inject: [ 'socket', 'confirm', 'alert', 'socketEmit', 'toast' ],
 
 	props:{
@@ -345,12 +415,90 @@ export default{
 		currentFilters(){
 			if(!this.preset.filters) return []
 			return this.preset.filters.filter((_) => _.key === this.selectedColumn)
+		},
+
+		chartOptions(){
+
+			var style = getComputedStyle(document.body)
+			var gridColor = style.getPropertyValue('--text-50')
+
+			return {
+				responsive: true,
+				maintainAspectRatio: false,
+				plugins: {
+					legend: true
+				},
+				scales: {
+					x: {
+						grid: {
+							color: `rgb(${gridColor})`
+						}
+					},
+					y: {
+						grid: {
+							color: `rgb(${gridColor})`
+						}
+					}
+				}
+			}
+		},
+
+		chartData(){
+
+			//console.log(this.summary)
+
+			const labels = []
+			this.summary.items.forEach((item) => {
+				labels.push(item.dfDate)
+			})
+
+			const datasets = []
+			this.summary.columns.forEach((column) => {
+				if(column.key === 'dfDate') return
+
+				const data = []
+				this.summary.items.forEach((item) => {
+					data.push(parseInt(item[column.key]))
+				})
+
+				const dataset = {
+					label: column.key,
+					data,
+					backgroundColor: this.chartOpt.backgroundColors[datasets.length % 9],
+					borderColor: this.chartOpt.borderColors[datasets.length % 9]
+				}
+
+				datasets.push(dataset)
+			})
+
+			//console.log(labels)
+			//console.log(datasets)
+
+			return {
+				labels,
+				datasets
+			}
+
+			/*return {
+				labels: [ 'January', 'February', 'March' ],
+				datasets: [ { data: [40, 20, 12] } ]
+			}*/
+		},
+
+		hideDetails(){
+			if(this.preset && this.preset.summary && this.preset.summary.hideDetails)
+				return this.preset.summary.hideDetails
+			return false;
 		}
 
 	},
 
 	data(){
 		return {
+			chartOpt: {
+				backgroundColors: [ '#5D9CEC', '#4FC1E9', '#48CFAD', '#A0D468', '#FFCE54', '#FC6E51', '#ED5565', '#AC92EC', '#EC87C0' ],
+				borderColors: [ '#4A89DC', '#3BAFDA', '#37BC9B', '#8CC152', '#F6BB42', '#E9573F', '#DA4453', '#967ADC', '#D770AD' ],
+			},
 			layout: {
 				presetOpen: false,
 				presetTab: 'column',
@@ -358,12 +506,19 @@ export default{
 				presetFilterSelector: null,
 				presetSortSelector: null,
 			},
+			tabItems: [
+				{ text:'Columns', value:'column' },
+				{ text:'Filters', value:'filter' },
+				{ text:'Sorts', value:'sort' },
+				{ text:'Summary', value:'summary' },
+			],
 			name: null,
 			columns: [],
 			selectedColumn: null,
 			presets: [],
 			presetIdx: -1,
 			items: [],
+			summary: null,
 			count: null,
 			hasNext: false,
 			modal: null
@@ -399,6 +554,7 @@ export default{
 				this.patchPresets()
 				this.$nextTick(() => {
 					this.items = data.items
+					this.summary = data.summary
 					this.hasNext = data.hasNext
 					this.count = data.count
 				})
@@ -452,8 +608,10 @@ export default{
 				preset: this.preset
 			}, (res) => {
 				const data = res.data ? res.data : res
-				//console.log('load', data)
-				Object.assign(this.$data, data)
+				this.items = data.items
+				this.summary = data.summary
+				this.hasNext = data.hasNext
+				this.count = data.count
 			})
 		},
 

package/src/utils/listpage1.js

@@ -1,5 +1,5 @@
-const { Op } = require('sequelize')
-const Sequelize = require('sequelize')
+const { Op } = module.parent.require('sequelize')
+const Sequelize = module.parent.require('sequelize')
 const dayjs = require("dayjs");
 const util = require("util");
 
@@ -124,7 +124,7 @@ let ListPage1 = {
 
     let attributeIncludes
     if(this.getAttributeIncludes){
-      attributeIncludes = this.getAttributeIncludes()
+      attributeIncludes = this.getAttributeIncludes(preset)
     }
 
     const { rows:items, count } = await this.model.findAndCountAll({
@@ -136,7 +136,7 @@ let ListPage1 = {
       order,
       limit: itemsPerPage + 1,
       replacements,
-      include: this.getModelIncludes ? this.getModelIncludes() : undefined
+      include: this.getModelIncludes ? this.getModelIncludes(preset) : undefined
     })
 
     const hasNext = items.length > itemsPerPage
@@ -144,6 +144,14 @@ let ListPage1 = {
       items.splice(items.length - 1, 1)
     }
 
+    let summary
+    if(!afterItem && preset.summary && preset.summary.enabled){
+      summary = await this.loadSummary(preset, {
+        where,
+        replacements
+      })
+    }
+
     if(this.socket){
       this.socket.joinWithArgs(this.channel, { preset })
     }
@@ -151,7 +159,8 @@ let ListPage1 = {
     return {
       items,
       hasNext,
-      count
+      count,
+      summary
     }
   },