pui9-dashboard 1.16.4

package/src/widgets/PuiWidgetDatatable.vue

@@ -0,0 +1,155 @@
+<template>
+	<v-card outlined elevation="1" :style="{ width: width, height: height }">
+		<v-card-title>
+			<span>{{ title }}</span>
+			<v-spacer />
+			<pui-text-field
+				v-if="searchable"
+				v-model="search"
+				append-icon="fas fa-search"
+				placeholder="search"
+				noeditable
+				realtime
+				hide-details
+			></pui-text-field>
+		</v-card-title>
+		<v-divider />
+		<v-card-text>
+			<v-data-table
+				:headers="headers"
+				:items="items"
+				class="elevation-1"
+				:loading="loading"
+				:height="tableHeight"
+				:search="search"
+				dense
+				fixed-header
+				:hide-default-footer="hideFooter"
+			></v-data-table>
+		</v-card-text>
+	</v-card>
+</template>
+
+<script>
+import defaultOptions from './PuiWidgetDatatableOptions.js';
+
+export default {
+	name: 'PuiWidgetDatatable',
+	props: {
+		definition: {
+			type: Object,
+			required: false
+		},
+		resized: {
+			type: Object,
+			required: false
+		}
+	},
+	data() {
+		return {
+			width: '100%',
+			height: '100%',
+			loading: true,
+			title: null,
+			headers: [],
+			items: [],
+			search: null
+		};
+	},
+	computed: {
+		tableHeight() {
+			if (this.resized && this.resized.height) {
+				return this.resized.height - 150;
+			}
+			return '100%';
+		},
+		searchable() {
+			return (this.definition && this.definition.searchable && this.definition.searchable.value) || false;
+		},
+		hideFooter() {
+			return (this.definition && this.definition.hidePagination && this.definition.hidePagination.value) || false;
+		}
+	},
+	created() {
+		this.initDatatable();
+	},
+	methods: {
+		initDatatable() {
+			if (!this.definition) {
+				(this.title = 'Example Datatable'), (this.columns = defaultOptions.columns);
+				this.headers = defaultOptions.headers;
+				this.items = defaultOptions.items;
+				this.loading = false;
+				return;
+			}
+
+			this.title = this.definition.title.value;
+			const model = this.$store.getters.getModelByName(this.definition.entityName.value);
+
+			if (model) {
+				this.initDatatableFromModel(model);
+			} else {
+				console.log(this.definition.entityName.value, 'not exist in PUI9 models');
+				this.initDatatableFromPuiWidget();
+			}
+
+		},
+		initDatatableFromModel(model) {
+			const modelColumns = model.columns;
+			this.headers = modelColumns.map((col) => {
+				return { text: this.$t(col.title), value: col.name };
+			});
+
+			const data = {
+				model: this.definition.entityName.value,
+				filter: this.definition.filter,
+				rows: 1000,
+				columns:
+					this.definition.columns ||
+					modelColumns.map((col) => {
+						return col.name;
+					})
+			};
+
+			this.$puiRequests.postRequest('/puisearch', data, (response) => {
+					if (response && response.data && response.data.data) {
+						this.items = response.data.data;
+						this.loading = false;
+					}
+				},
+				(error) => {
+					console.log(error);
+					this.loading = false;
+				}
+			);
+		},
+		initDatatableFromPuiWidget() {
+			const url = '/puiwidget/getVuetifyDatatableValues';
+			const params = {
+				entity: this.definition.entityName.value
+			};
+
+			this.$puiRequests.getRequest(url, params, (response) => {
+					if (response && response.data) {
+						for (let i = 0, dataLength = response.data.length; i < dataLength; i++) {
+							const item = response.data[i];
+
+							if (i === 0) {
+								for (const [key] of Object.entries(item)) {
+									this.headers.push({ text: key, value: key });
+								}
+							}
+							this.items.push(item);
+						}
+						this.loading = false;
+					}
+				},
+				(error) => {
+					console.log(error);
+					this.loading = false;
+				}
+			);
+		}
+	}
+};
+</script>

package/src/widgets/PuiWidgetDatatableOptions.js

@@ -0,0 +1,13 @@
+export default {
+	headers: [
+		{ text: 'Code', value: 'code' },
+		{ text: 'Name', value: 'name' },
+		{ text: 'Description', value: 'description' }
+	],
+	items: [
+		{ code: 1, name: 'Test 1', description: 'Test 1 description' },
+		{ code: 2, name: 'Test 2', description: 'Test 2 description' },
+		{ code: 3, name: 'Test 3', description: 'Test 3 description' },
+		{ code: 4, name: 'Test 4', description: 'Test 4 description' }
+	]
+};

package/src/widgets/PuiWidgetEChart.vue

@@ -0,0 +1,188 @@
+<template>
+	<v-card outlined elevation="1" class="overflow-y-hidden" :style="{ width: width, height: height }" :loading="loading" v-resize="onResize">
+		<v-card-title v-if="title">{{ title }}</v-card-title>
+		<v-divider v-if="title" />
+		<v-card-text>
+			<div class="chart" :style="{ width: defaultWidth, height: defaultHeight }" ref="echart" />
+			<span v-if="noData">{{ noData }}</span>
+		</v-card-text>
+	</v-card>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+// echarts themes (macarons | roma | shine | vintage)
+require('echarts/theme/macarons');
+require('echarts/theme/roma');
+require('echarts/theme/shine');
+require('echarts/theme/vintage');
+
+import defaultOptions from './PuiWidgetEChartOptions.js';
+
+export default {
+	name: 'PuiWidgetEChart',
+	props: {
+		type: {
+			type: String,
+			required: true
+		},
+		/**
+		 * definition.title.value (String)
+		 * definition.theme.value (String) (macarons | roma | shine | vintage)
+		 * definition.model.value (String)
+		 */
+		definition: {
+			type: Object,
+			required: false
+		},
+		filter: {
+			type: Object,
+			required: false
+		},
+		resized: {
+			type: Object,
+			required: false
+		}
+	},
+	data() {
+		return {
+			width: '100%',
+			height: '100%',
+			echartMethods: {
+				EChartsBar: 'getEChartsLineBarOptions',
+				EChartsLine: 'getEChartsLineBarOptions',
+				EChartsPie: 'getEChartsPieOptions'
+			},
+			echartTypes: {
+				EChartsBar: 'bar',
+				EChartsLine: 'line',
+				EChartsPie: 'pie'
+			},
+			loading: true,
+			title: null,
+			chart: null,
+			noData: null
+		};
+	},
+	computed: {
+		defaultWidth() {
+			if (this.resized && this.resized.width) {
+				//return `${this.resized.width - 50}px`;
+			}
+			return '100%';
+		},
+		defaultHeight() {
+			if (this.resized && this.resized.height) {
+				return `${this.resized.height - 100}px`;
+			}
+			return '100%';
+		}
+	},
+	watch: {
+		resized: {
+			handler() {
+				this.onResize();
+			},
+			deep: true
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.initChart();
+		});
+	},
+	beforeDestroy() {
+		if (!this.chart) {
+			return;
+		}
+		this.chart.dispose();
+		this.chart = null;
+	},
+	methods: {
+		onResize() {
+			if (this.chart) {
+				this.chart.resize();
+			}
+		},
+		initChart() {
+			if (!this.definition) {
+				this.title = `Example ${this.type} Chart`;
+				this.chart = echarts.init(this.$refs.echart);
+				this.chart.setOption(defaultOptions[this.type]);
+				this.loading = false;
+				return;
+			}
+
+			this.title = this.definition.title.value;
+
+			const theme = (this.definition.theme && this.definition.theme.value) || null;
+			const url = `/puiwidget/${this.echartMethods[this.type]}`;
+			const params = {
+				entity: this.definition.entityName.value,
+				name: this.definition.columnName.value,
+				value: this.definition.columnValue.value,
+				type: this.echartTypes[this.type]
+			};
+
+			this.$puiRequests.postRequest(
+				url,
+				this.filter,
+				(response) => {
+					if (response && response.data) {
+						const chartOptions = this.getChartOptions();
+
+						if (response.data.categories) {
+							chartOptions.xAxis.data = response.data.categories;
+						}
+
+						chartOptions.series = [];
+						for (let i = 0; i < response.data.series.length; i++) {
+							const serie = response.data.series[i];
+							chartOptions.series.push(serie);
+						}
+
+						this.chart = echarts.init(this.$refs.echart, theme);
+						this.chart.setOption(chartOptions);
+						this.loading = false;
+					} else {
+						console.log('No response data');
+						this.noData = this.$t('puiwidget.nodata');
+						this.loading = false;
+					}
+				},
+				(error) => {
+					console.log(error);
+					this.noData = this.$t('puiwidget.nodata');
+					this.loading = false;
+				},
+				null,
+				params
+			);
+		},
+		getChartOptions() {
+			// do copy of default chart options
+			const chartOptions = JSON.parse(JSON.stringify(defaultOptions[this.type]));
+
+			if (this.definition.legend && this.definition.legend.value) {
+				chartOptions.legend = {};
+			}
+			if (this.definition.toolbox && this.definition.toolbox.value) {
+				chartOptions.toolbox = {
+					show: true,
+					feature: {
+						dataZoom: {
+							yAxisIndex: 'none'
+						},
+						dataView: {readOnly: false},
+						magicType: {type: ['line', 'bar']},
+						restore: {},
+						saveAsImage: {}
+					}
+				};
+			}
+
+			return chartOptions;
+		}
+	}
+};
+</script>

package/src/widgets/PuiWidgetEChartOptions.js

@@ -0,0 +1,79 @@
+const tooltip = {
+	trigger: 'axis',
+	axisPointer: {
+		type: 'shadow' // 'line' | 'shadow'
+	}
+};
+const grid = {
+	top: 10,
+	left: '2%',
+	right: '2%',
+	bottom: '3%',
+	containLabel: true
+};
+const legend = null;
+const xAxis = {
+	type: 'category',
+	data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+};
+const yAxis = { type: 'value' };
+
+const barChartOptions = {
+	tooltip,
+	grid,
+	legend,
+	xAxis,
+	yAxis,
+	series: [
+		{
+			data: [120, 200, 150, 80, 70, 110, 130],
+			type: 'bar'
+		}
+	]
+};
+
+const lineChartOptions = {
+	tooltip,
+	grid,
+	legend,
+	xAxis,
+	yAxis,
+	series: [
+		{
+			data: [820, 932, 901, 934, 1290, 1330, 1300],
+			type: 'line'
+		}
+	]
+};
+
+const pieChartOptions = {
+	tooltip: {
+		trigger: 'item',
+		formatter: '{b} : {c} ({d}%)'
+	},
+	legend,
+	series: [
+		{
+			type: 'pie',
+			//roseType: 'area',
+			//radius: [15, 120],
+			//animationEasing: 'cubicInOut',
+			//animationDuration: 2600,
+			data: [
+				{ value: 320, name: '1' },
+				{ value: 240, name: '2' },
+				{ value: 149, name: '3' },
+				{ value: 100, name: '4' },
+				{ value: 59, name: '5' }
+			]
+		}
+	]
+};
+
+const echartTypes = {
+	EChartsBar: barChartOptions,
+	EChartsLine: lineChartOptions,
+	EChartsPie: pieChartOptions
+};
+
+export default echartTypes;