@mixd-id/web-scaffold 0.1.230406060 → 0.1.230406062

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406060",
+  "version": "0.1.230406062",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -16,7 +16,8 @@
       "import": "./src/utils/helpers.mjs"
     },
     "./importer": "./src/utils/importer.js",
-    "./listpage1": "./src/utils/listpage1.js"
+    "./listpage1": "./src/utils/listpage1.js",
+    "./listview": "./src/utils/listview.js"
   },
   "dependencies": {
     "@faker-js/faker": "^7.3.0",

package/src/components/Checkbox.vue

@@ -43,9 +43,12 @@ export default {
         if(Array.isArray(this.modelValue)){
           return this.modelValue.includes(this.value)
 				}
-        else{
+        else if(this.modelValue){
           return this.value === this.modelValue
 				}
+				else{
+					return !!this.value
+				}
 			}
       else if(this.trueValue && this.falseValue) {
         return this.modelValue === this.trueValue

package/src/components/ColorPicker.vue

@@ -0,0 +1,84 @@
+<template>
+	<div :class="$style.comp">
+		<div :class="$style.circle" @click="$refs.contextMenu.open($refs.btn)"
+				 ref="btn" :style="{ backgroundColor:this.modelValue }"></div>
+		<input type="color" :class="$style.inputColor" ref="inputColor"
+			@change="select($refs.inputColor.value)"/>
+
+		<ContextMenu ref="contextMenu" :dismiss="false">
+			<div class="p-4 flex flex-col gap-4">
+				<div class="grid grid-cols-6 gap-4">
+					<div v-for="color in colors">
+						<div :class="$style.circle" :style="{ backgroundColor:color }"
+						 	@click="select(color)"></div>
+					</div>
+				</div>
+				<button type="button" v-if="Boolean(customColor)"
+								class="w-full p-1 border-text-100 border-[1px] rounded-lg"
+								@click="$refs.inputColor.click()">Custom</button>
+			</div>
+		</ContextMenu>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+
+		colors: Array,
+
+		customColor: undefined,
+
+		modelValue: String
+
+	},
+
+	methods: {
+
+		select(color){
+			this.$emit('update:modelValue', color)
+			this.$refs.contextMenu.close()
+		}
+
+	},
+
+	computed:{
+
+		customColorCount(){
+			const count = parseInt(this.customColor)
+			return isNaN(count) ? 0 : count
+		}
+
+	},
+
+	data(){
+		return {
+			customColors: []
+		}
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply p-[2px] border-[1px] border-text-200 rounded-full relative;
+}
+
+.circle{
+	@apply w-[19px] h-[19px] rounded-full cursor-pointer;
+}
+
+.inputColor{
+	@apply absolute top-0 left-0;
+	width: 0;
+	height: 0;
+	opacity: 0;
+}
+
+</style>

package/src/components/ImagePreview.vue

@@ -71,7 +71,7 @@ export default{
 }
 
 .previewModal{
-	@apply !w-screen !h-screen !bg-base-300 top-0;
+	@apply !w-screen !h-screen !bg-base-300 !rounded-none top-0;
 	z-index: 21 !important;
 	max-width: unset !important;
 	max-height: unset !important;

package/src/components/ListView.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.comp" v-if="configLoaded">
+	<div :class="$style.comp">
 
 		<slot v-if="$slots.head" name="head"></slot>
 		<div v-else class="flex flex-row items-center gap-4 px-6 md:px-0 py-4 md:py-0 bg-base-400 dark:bg-base-300 md:bg-transparent">
@@ -8,7 +8,7 @@
 								class="flex-1 md:flex-none flex flex-row gap-1 items-center text-left md:ml-2"
 								@click="$refs.presetSelector.toggle($refs.presetSelectorBtn)">
 					<h2 class="overflow-hidden whitespace-nowrap text-ellipsis">{{ preset.name }}</h2>
-					<svg width="16" height="16" class="fill-text hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
+					<svg width="13" height="13" class="ml-1 relative top-[2px] fill-text hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
 				</button>
 
 				<ContextMenu ref="presetSelector">
@@ -53,8 +53,9 @@
 
 			<slot name="headerOpt"></slot>
 
-			<Textbox :placeholder="$t('Search...')" :clearable="true" @clear="clearSearch" v-model="preset.search"
-							 @keyup.enter="load" :class="$style.searchBox" v-if="mediaPrefix !== 'sm'">
+			<Textbox v-if="mediaPrefix && mediaPrefix !== 'sm'" :placeholder="$t('Search...')" :clearable="true"
+							 @clear="clearSearch" v-model="preset.search"
+							 @keyup.enter="load" :class="$style.searchBox">
 				<template #start>
 					<div class="pl-2">
 						<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z"/></svg>
@@ -63,9 +64,9 @@
 			</Textbox>
 		</div>
 
-		<div v-if="mediaPrefix === 'sm'" class="px-6 pb-4 border-b-[1px] border-text-50 bg-base-400 dark:bg-base-300">
+		<div v-if="mediaPrefix && mediaPrefix === 'sm'" class="px-6 pb-4 border-b-[1px] border-text-50 bg-base-400 dark:bg-base-300">
 			<Textbox :placeholder="$t('Search...')" :clearable="true" @clear="clearSearch" v-model="preset.search"
-							 @keyup.enter="load" :class="$style.searchBox">
+							 @keyup.enter="load" :class="$style.searchBox2">
 				<template #start>
 					<div class="pl-2">
 						<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z"/></svg>
@@ -74,8 +75,23 @@
 			</Textbox>
 		</div>
 
+		<div v-if="presetSummary && summary" class="h-[300px] max-h-[30vh] flex">
+			<Bar v-if="presetSummary.mode === 'bar'" :data="chartData" :options="chartOptions" class="flex-1 w-full p-2"/>
+			<Line v-else-if="presetSummary.mode === 'line'" :data="chartData" :options="chartOptions" class="flex-1 w-full p-2"/>
+			<VirtualTable v-else-if="presetSummary.mode === 'table'" :items="summaryItems" :columns="summaryColumns" class="flex-1"></VirtualTable>
+			<Gmaps v-else-if="presetSummary.mode === 'map'" :data="summary.items" :config="presetSummary.map"
+						 class="flex-1 w-full p-2" :apiKey="mapApiKey" />
+		</div>
+
 		<div class="flex-1 flex" v-if="mediaPrefix">
-			<VirtualTable v-if="mediaPrefix !== 'sm'" ref="table1" :columns="presetColumns" :items="items"
+			<VirtualScroll v-if="mediaPrefix === 'sm'" :items="items" ref="table2"
+										 class="flex-1 bg-base-400 dark:bg-base-300" @scroll-end="loadNext">
+				<template #item="{ item }">
+					<slot name="mobileItem" :item="item"></slot>
+				</template>
+			</VirtualScroll>
+
+			<VirtualTable v-else ref="table1" :columns="presetColumns" :items="items"
 										class="flex-1 bg-base-400"
 										@scroll-end="loadNext">
 				<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
@@ -110,11 +126,6 @@
 					<slot :name="slot" :item="item" :index="index"></slot>
 				</template>
 			</VirtualTable>
-			<VirtualScroll v-else :items="items" ref="table2" class="flex-1 bg-base-400 dark:bg-base-300" @scroll-end="loadNext">
-				<template #item="{ item }">
-					<slot name="mobileItem" :item="item"></slot>
-				</template>
-			</VirtualScroll>
 		</div>
 
 		<ContextMenu ref="columnMenu" :dismiss="false">
@@ -156,8 +167,12 @@
 <script>
 
 import throttle from "lodash/throttle";
+import { Bar, Line } from 'vue-chartjs'
+import Chart from 'chart.js/auto'
+import dayjs from "dayjs";
 
 export default{
+	components: {Line, Bar},
 
 	emits: [ ],
 
@@ -214,7 +229,7 @@ export default{
       this.presetFilterSelector = null
     },
 
-		calcMediaPrefix: throttle(function(){
+		calcMediaPrefix() {
 			if(!this.$el) return
 
 			const w = this.$el.clientWidth
@@ -238,7 +253,7 @@ export default{
 			}
 
 			this.mediaPrefix = prefix
-		}, 100, { leading:true }),
+		},
 
     clearSearch(){
       this.preset.search = ''
@@ -268,10 +283,14 @@ export default{
 		load(){
       if(!this.src) return
 
-			this.socketEmit2(this.src, { preset: this.preset })
+			this.$refs.table1 ? this.$refs.table1.setState(2) : this.$refs.table2.setState(3)
+			this.socketEmit2(this.src, { columns:this.config.columns, preset:this.preset })
 				.then((res) => {
 					Object.assign(this.$data, res)
 				})
+				.finally(() => {
+					this.$refs.table1 ? this.$refs.table1.setState(1) : this.$refs.table2.setState(1)
+				})
 		},
 
 		loadNext(){
@@ -293,8 +312,13 @@ export default{
 		},
 
 		async loadConfig(){
+
 			if(!this.configStoreObj || 'reset' in ((this.$route ?? {}).query ?? {})){
 				this.configLoaded = true
+
+				if('reset' in ((this.$route ?? {}).query ?? {}))
+					await this.saveConfig()
+
 				return
 			}
 
@@ -308,7 +332,6 @@ export default{
 							}
 
 							this.configLoaded = true
-							this.$nextTick(() => this.calcMediaPrefix())
 						})
 			}
 		},
@@ -321,8 +344,9 @@ export default{
 				preset: this.preset
 			})
 				.then((res) => {
-					const data = res && res.data ? res.data : res
-					this.summary = data
+					console.log('res', res)
+					/*const data = res && res.data ? res.data : res
+					this.summary = data*/
 				})
 				.catch((err) => {
 					this.toast(err)
@@ -330,20 +354,46 @@ export default{
 		},
 
     onHooks(model, event, items){
+
 			if(model === this.subscriptionObj.model){
         switch(event){
 
           case 'create':
           case 'update':
-            items.forEach((item) => {
-              this.$util.unshift(this.items, item)
-            })
+						if(Object.keys(items[0]).length <= 1 && Object.keys(items[0])[0] === 'uid'){
+							this.socketEmit2(this.src, {
+								columns:this.config.columns,
+								preset:{
+									...this.preset,
+									filters: [{
+											enabled: true,
+											key: "uid",
+											filters: [
+												{
+													operator: "in",
+													value: items.map((_) => _.uid)
+												}
+											]
+										}
+									]
+								}
+							})
+								.then(({ items }) => {
+									this.$util.unshift(this.items, ...items)
+								})
+						}
+						else{
+							this.$util.unshift(this.items, ...items)
+						}
             break
 
           case 'remove':
           case 'destroy':
             items.forEach((item) => {
-              const idx = this.items.findIndex((_) => _.id === item.id)
+              const idx = this.items.findIndex((_) => {
+								return item.uid ? _.uid === item.uid :
+									(item.id ? _.id === item.id : false)
+							})
               if(idx >= 0){
                 this.items.splice(idx, 1)
               }
@@ -421,7 +471,54 @@ export default{
           this.socketEmit2(method, { name:model }).then()
 					break
 			}
-		}
+		},
+
+		summaryColumns(){
+
+			const columns = [ ...this.summary.columns ]
+
+			if(this.presetSummary.mode === 'table' && this.presetSummary.table.showColumnTotal){
+				columns.push({ key:"_total", label:"Total", visible:true, type:"number" })
+			}
+
+			return columns
+		},
+
+		summaryItems(){
+
+			const items = [ ...this.summary.items ]
+
+			//console.log('#1', this.presetSummary.showColumnTotal, this.presetSummary.showRowTotal, items.length)
+
+			if(this.presetSummary.mode === 'table' && this.presetSummary.table.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.presetSummary.mode === 'table' && this.presetSummary.table.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
+		},
 
 	},
 
@@ -429,6 +526,128 @@ export default{
 
 	computed: {
 
+
+		chartOptions(){
+
+			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,
+				maintainAspectRatio: false,
+				plugins: {
+					legend: !this.presetSummary.hideLegends,
+					tooltip: {
+						callbacks: {
+							label: function(context) {
+
+								const labels = []
+
+								labels.push(context.dataset.label + ': ' + context.parsed.y)
+
+								if(context.parsed._stacks){
+									let total = 0
+									let percent = 0
+									for(let key in context.parsed._stacks.y){
+										if(!isNaN(parseInt(key))){
+											total += parseInt(context.parsed._stacks.y[key])
+										}
+									}
+									percent = Math.round(parseInt(context.parsed.y) / total * 100)
+									labels.push(`Total: ${total} (${percent}%)`)
+								}
+
+								return labels;
+							}
+						}
+					}
+				},
+				scales: {
+					x: {
+						grid: {
+							color: function(context){
+								if(baseColumnType === 'date' && context.tick && highGrids.includes(context.tick.label)){
+									return `rgb(${gridColor2})`
+								}
+								return `rgb(${gridColor})`
+							}
+						},
+						stacked: this.presetSummary.mode === 'bar' ? this.presetSummary[this.presetSummary.mode].stacked : undefined
+					},
+					y: {
+						grid: {
+							color: function(context){
+								return `rgb(${gridColor})`
+							}
+						},
+						stacked: this.presetSummary.mode === 'bar' ? this.presetSummary[this.presetSummary.mode].stacked : undefined
+					}
+				}
+			}
+		},
+
+		chartData(){
+
+			const column = this.summary.columns.filter((_) => _.key === 'dfDate').pop() ?? {}
+
+			const labels = []
+			this.summary.items.forEach((item) => {
+
+				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 = []
+			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.label,
+					data,
+					backgroundColor: this.chartOpt.backgroundColors[datasets.length % 9],
+					borderColor: this.chartOpt.borderColors[datasets.length % 9]
+				}
+
+				datasets.push(dataset)
+			})
+
+			return {
+				labels,
+				datasets
+			}
+
+			/*return {
+				labels: [ 'January', 'February', 'March' ],
+				datasets: [ { data: [40, 20, 12] } ]
+			}*/
+		},
+
     subscriptionObj(){
       const splitted = ((this.subscription ?? '').toString()).split(':')
 			const splitted2 = (splitted[1] ?? '').split(',')
@@ -521,6 +740,10 @@ export default{
 			return c
 		},
 
+		presetSummary(){
+			return ((this.preset ?? {}).summaries ?? []).filter((_) => _.enabled).pop()
+		},
+
 	},
 
 	data(){
@@ -531,20 +754,50 @@ export default{
       configLoaded: false,
       selectedColumn: null,
 			copiedConfig: null,
-			mediaPrefix: 'md'
+			mediaPrefix: null,
+			summary: null,
+			mapApiKey: null,
+			chartOpt: {
+				backgroundColors: [
+					'#5D9CEC',
+					'#A0D468',
+					'#FFCE54',
+					'#FC6E51',
+					'#48CFAD',
+					'#AC92EC',
+					'#4FC1E9',
+					'#FFCE54',
+					'#ED5565',
+					'#EC87C0'
+				],
+				borderColors: [
+					'#4A89DC',
+					'#8CC152',
+					'#F6BB42',
+					'#E9573F',
+					'#37BC9B',
+					'#967ADC',
+					'#3BAFDA',
+					'#F6BB42',
+					'#DA4453',
+					'#D770AD'
+				],
+			},
 		}
 	},
 
 
 	mounted() {
-		window.addEventListener('resize', () => this.calcMediaPrefix())
+		window.addEventListener('resize', throttle(() => this.calcMediaPrefix(), 100, { leading:true }))
 		this.calcMediaPrefix()
+
     this.socket.onAny(this.onHooks)
 
 		window.setTimeout(() => {
 			this.loadConfig().then(() => {
-				this.load()
-			})
+				window.setTimeout(() => {})
+					this.load()
+				}, 1000)
 		}, 201)
 
 		this.subscribe()
@@ -579,6 +832,10 @@ export default{
 	@apply !bg-base-400 md:w-[300px];
 }
 
+.searchBox2{
+	@apply bg-text-50;
+}
+
 .header{
 	@apply p-2 cursor-pointer border-b-[2px] border-transparent overflow-hidden;
 }

package/src/components/ListViewBarSummary.vue

@@ -0,0 +1,80 @@
+<template>
+	<div :class="$style.comp">
+
+		<div class="p-3">
+			<label class="text-text-400 flex-1">{{ $t('X-axis') }}</label>
+			<div class="flex flex-row mt-2 gap-2">
+				<Dropdown v-model="summary.bar.rows[0].key" class="flex-1">
+					<option value="" disabled selected>{{ $t('Add Column') }}</option>
+					<option v-for="column in columns" :value="column.key">{{ column.label ?? column.key }}</option>
+				</Dropdown>
+				<Dropdown v-model="summary.bar.rows[0].format" class="w-[100px]">
+					<option value="">{{ $t('Default') }}</option>
+					<option value="date">{{ $t('Date') }}</option>
+					<option value="month">{{ $t('Month') }}</option>
+					<option value="quarter">{{ $t('Quarterly') }}</option>
+					<option value="year">{{ $t('Year') }}</option>
+				</Dropdown>
+			</div>
+		</div>
+
+		<div class="p-3">
+			<label class="text-text-400 flex-1">{{ $t('Column') }}</label>
+			<div class="flex flex-row mt-2 gap-2">
+				<Dropdown v-model="summary.bar.columns[0].key" class="flex-1">
+					<option value="" disabled selected>{{ $t('Add Column') }}</option>
+					<option value="(none)">{{ $t('None') }}</option>
+					<option v-for="column in columns" :value="column.key">{{ column.label ?? column.key }}</option>
+				</Dropdown>
+				<Dropdown v-model="summary.bar.columns[0].format" class="w-[100px]">
+					<option value="">{{ $t('Default') }}</option>
+					<option value="date">{{ $t('Date') }}</option>
+				</Dropdown>
+			</div>
+			<Checkbox class="mt-2" v-model="summary.bar.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="summary.bar.values[0].aggregrate" class="flex-1">
+					<option value="" disabled selected>{{ $t('Select') }}</option>
+					<option value="count">{{ $t('Count') }}</option>
+					<option value="max">{{ $t('Max') }}</option>
+					<option value="min">{{ $t('Min') }}</option>
+					<option value="avg">{{ $t('Avg') }}</option>
+				</Dropdown>
+			</div>
+		</div>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+
+		columns: Array,
+
+		summary: {
+			type: Object,
+			required: true
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>