pui9-dashboard 1.16.4

package/package.json

@@ -0,0 +1,70 @@
+{
+	"name": "pui9-dashboard",
+	"description": "PUI9 Dashboard Components",
+	"author": {
+		"name": "Prodevelop S.L."
+	},
+	"version": "1.16.4",
+	"license": "Copyright",
+	"main": "dist/pui9-dashboard.common.js",
+	"scripts": {
+		"serve": "vue-cli-service serve",
+		"build-bundle": "vue-cli-service build --target lib --name pui9-dashboard ./src/index.js",
+		"prepare": "npm run build-bundle",
+		"lint": "vue-cli-service lint"
+	},
+	"dependencies": {
+		"echarts": "5.1.2",
+		"vue-grid-layout": "2.3.12"
+	},
+	"devDependencies": {
+		"@vue/cli-plugin-babel": "4.5.13",
+		"@vue/cli-plugin-eslint": "4.5.13",
+		"@vue/cli-service": "4.5.13",
+		"autoprefixer": "9.8.6",
+		"babel-eslint": "10.1.0",
+		"core-js": "3.17.2",
+		"css-loader": "0.28.11",
+		"deepmerge": "4.2.2",
+		"eslint": "6.8.0",
+		"eslint-plugin-vue": "6.2.2",
+		"postcss-css-variables": "0.18.0",
+		"postcss-import": "12.0.1",
+		"postcss-loader": "4.1.0",
+		"postcss-nested": "4.2.3",
+		"postcss-url": "8.0.0",
+		"sass": "1.27.0",
+		"sass-loader": "10.0.2",
+		"stylus": "0.54.8",
+		"stylus-loader": "3.0.2",
+		"vue": "2.6.14",
+		"vue-i18n": "8.25.0",
+		"vue-cli-plugin-vuetify": "2.4.1",
+		"vue-template-compiler": "2.6.14",
+		"vuetify-loader": "1.7.3",
+		"vuetify": "2.3.23"
+	},
+	"eslintConfig": {
+		"root": true,
+		"env": {
+			"node": true
+		},
+		"extends": [
+			"plugin:vue/essential",
+			"eslint:recommended"
+		],
+		"parserOptions": {
+			"parser": "babel-eslint"
+		},
+		"rules": {}
+	},
+	"browserslist": [
+		"> 1%",
+		"last 2 versions"
+	],
+	"files": [
+		"dist/*",
+		"src/*",
+		"*.json"
+	]
+}

package/src/components/PuiDashboard.vue

@@ -0,0 +1,87 @@
+<template>
+	<div class="ml-4 mr-4 overflow-y-auto" :style="{ 'max-height': maxHeight }">
+		<v-select
+			v-if="!defaultDashboard"
+			v-model="dashboardSelected"
+			:items="dashboards"
+			:item-text="(item) => `${item.name}`"
+			return-object
+			placeholder=" "
+			outlined
+			solo
+			hide-details
+		></v-select>
+		<pui-grid-layout :key="layoutKey" :layout="layout" :widgets="widgets" :draggable="false" :resizable="false" />
+	</div>
+</template>
+
+<script>
+import PuiGridLayout from './PuiGridLayout.vue';
+
+export default {
+	name: 'PuiDashboard',
+	components: { PuiGridLayout },
+	props: {
+		defaultDashboard: {
+			type: Object,
+			required: false,
+			default: null
+		}
+	},
+	data() {
+		return {
+			dashboardSelected: null,
+			dashboards: [],
+			widgets: [],
+			layoutKey: 1
+		};
+	},
+	computed: {
+		maxHeight() {
+			if (this.$store.state.global.appContainerHeader) {
+				return `${window.innerHeight - 78}px`;
+			}
+			return `${window.innerHeight}px`;
+		},
+		layout() {
+			if (this.defaultDashboard && this.defaultDashboard.definition) {
+				return this.defaultDashboard.definition;
+			}
+			return (this.dashboardSelected && this.dashboardSelected.definition) || [];
+		}
+	},
+	watch: {
+		dashboardSelected() {
+			// force redraw pui-grid-layout component on dashboard selected
+			this.layoutKey += 1;
+		}
+	},
+	mounted() {
+		this.$puiRequests.postRequest('/puisearch', { model: 'puidashboard', rows: 100 }, (response) => {
+			if (response && response.data && response.data.data) {
+				this.dashboards = response.data.data.map((item) => {
+					return {
+						id: item.id,
+						name: item.name,
+						definition: JSON.parse(item.definition)
+					};
+				});
+				this.dashboardSelected = this.dashboards[0];
+			}
+		});
+		this.$puiRequests.postRequest('/puisearch', { model: 'puiwidget', rows: 100 }, (response) => {
+			if (response && response.data && response.data.data) {
+				this.widgets = response.data.data.map((item) => {
+					return {
+						id: item.id,
+						name: item.name,
+						component: item.component,
+						type: item.type,
+						definition: JSON.parse(item.definition)
+					};
+				});
+			}
+		});
+	}
+};
+</script>

package/src/components/PuiDashboardOverview.vue

@@ -0,0 +1,12 @@
+<template>
+	<pui-dashboard />
+</template>
+
+<script>
+import PuiDashboard from './PuiDashboard.vue';
+
+export default {
+	name: 'PuiDashboardOverview',
+	components: { PuiDashboard }
+}
+</script>

package/src/components/PuiGridLayout.vue

@@ -0,0 +1,127 @@
+<template>
+	<grid-layout
+		:layout.sync="internalLayout"
+		:row-height="30"
+		:is-draggable="draggable"
+		:is-resizable="resizable"
+		:responsive="responsive"
+		:vertical-compact="true"
+		:use-css-transforms="true"
+		@layout-ready="layoutReadyEvent"
+	>
+		<grid-item v-for="item in internalLayout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i" @resize="resizeEvent">
+			<component
+				:is="getWidgetProperty(item.widget, 'component')"
+				:type="getWidgetProperty(item.widget, 'type')"
+				:definition="getWidgetProperty(item.widget, 'definition')"
+				:resized="item.resized"
+			/>
+			<span class="remove" v-if="draggable && resizable" @click="removeItem(item.i)">x</span>
+		</grid-item>
+	</grid-layout>
+</template>
+
+<script>
+import { GridLayout, GridItem } from 'vue-grid-layout';
+
+export default {
+	components: { GridLayout, GridItem },
+	props: {
+		layout: {
+			type: Array,
+			required: true
+		},
+		widgets: {
+			type: Array,
+			required: true
+		},
+		draggable: {
+			type: Boolean,
+			default: true
+		},
+		resizable: {
+			type: Boolean,
+			default: true
+		},
+		responsive: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		internalLayout: {
+			// getter
+			get() {
+				return [...this.layout];
+			},
+			// setter
+			set() {
+				// not remove to prevent vue warning
+			}
+		}
+	},
+	methods: {
+		layoutReadyEvent() {
+			for (let j = 0; j < this.internalLayout.length; j++) {
+				const item = this.internalLayout[j];
+				item.resized = { width: item.resized.width, height: item.resized.height };
+			}
+		},
+		resizeEvent(i, newH, newW, newHPx, newWPx) {
+			for (let j = 0; j < this.internalLayout.length; j++) {
+				const item = this.internalLayout[j];
+				if (item.i === i) {
+					item.resized = { width: newWPx, height: newHPx };
+					break;
+				}
+			}
+		},
+		getWidgetProperty(widgetId, property) {
+			for (let i = 0; i < this.widgets.length; i++) {
+				const widget = this.widgets[i];
+				if (widget.id === widgetId) {
+					return widget[property];
+				}
+			}
+			return null;
+		},
+		removeItem(index) {
+			this.$emit('remove-widget', index);
+		}
+	}
+};
+</script>
+
+<style lang="postcss">
+.vue-grid-layout {
+	background: #eee;
+}
+.vue-grid-item .resizing {
+	opacity: 0.9;
+}
+.vue-grid-item .no-drag {
+	height: 100%;
+	width: 100%;
+}
+.vue-draggable-handle {
+	position: absolute;
+	width: 20px;
+	height: 20px;
+	top: 0;
+	left: 0;
+	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
+		no-repeat;
+	background-position: bottom right;
+	padding: 0 8px 8px 0;
+	background-repeat: no-repeat;
+	background-origin: content-box;
+	box-sizing: border-box;
+	cursor: pointer;
+}
+.remove {
+	position: absolute;
+	right: 2px;
+	top: 0;
+	cursor: pointer;
+}
+</style>

package/src/components/PuiWidgetOverview.vue

@@ -0,0 +1,41 @@
+<template>
+	<div class="overflow-y-auto" :style="{ 'max-height': maxHeight }">
+		<v-row dense class="ma-3">
+			<v-col cols="12" sm="3" md="6" v-for="(item, index) in items" :key="index" style="max-height: 500px">
+				<component :is="item.component" :type="item.type" :definition="item.definition" :resized="{ height: 450 }" />
+			</v-col>
+		</v-row>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PuiWidgetOverview',
+	data() {
+		return {
+			items: []
+		};
+	},
+	computed: {
+		maxHeight() {
+			if (this.$store.state.global.appContainerHeader) {
+				return `${window.innerHeight - 134}px`;
+			}
+			return `${window.innerHeight - 78}px`;
+		}
+	},
+	mounted() {
+		this.$puiRequests.postRequest('/puisearch', { model: 'puiwidget', rows: 100 }, (response) => {
+			if (response && response.data && response.data.data) {
+				this.items = response.data.data.map(function (item) {
+					return {
+						component: item.component,
+						type: item.type,
+						definition: JSON.parse(item.definition)
+					};
+				});
+			}
+		});
+	}
+};
+</script>

package/src/components/puidashboard/PuiDashboardForm.vue

@@ -0,0 +1,143 @@
+<template>
+	<div class="pui-form">
+		<v-form class="mb-4 pb-4" ref="form" v-model="valid" lazy-validation v-if="modelLoaded">
+			<v-row class="pui-form-layout">
+				<v-col cols="12">
+					<pui-field-set :title="$t('form.puidashboard')">
+						<v-row dense>
+							<v-col cols="6">
+								<pui-text-field
+									:label="$t('form.puidashboard.name')"
+									v-model="model.name"
+									:disabled="formDisabled"
+									maxlength="100"
+									toplabel
+									required
+								></pui-text-field>
+							</v-col>
+							<v-col cols="6">
+								<v-btn @click="dialog = true">Add widget</v-btn>
+							</v-col>
+						</v-row>
+						<v-row dense>
+							<v-col cols="12">
+								<pui-grid-layout :layout="layout" :widgets="widgets" @remove-widget="removeWidget" />
+							</v-col>
+						</v-row>
+					</pui-field-set>
+				</v-col>
+			</v-row>
+			<pui-form-footer>
+				<pui-form-footer-btns :formDisabled="formDisabled" :saveDisabled="saving" :save="save" :back="back"></pui-form-footer-btns>
+			</pui-form-footer>
+		</v-form>
+		<pui-form-loading v-else></pui-form-loading>
+
+		<v-dialog v-model="dialog" max-width="450">
+			<v-card>
+				<v-card-title>Select widget</v-card-title>
+
+				<v-card-text>
+					<v-select
+						v-model="widgetSelected"
+						:items="widgets"
+						:item-text="(item) => `${item.name} (${item.type})`"
+						return-object
+						placeholder=" "
+						outlined
+						solo
+						hide-details
+					></v-select>
+				</v-card-text>
+
+				<v-card-actions>
+					<v-spacer></v-spacer>
+
+					<v-btn text @click="dialog = false">{{ $t('form.close') }}</v-btn>
+
+					<v-btn
+						color="green darken-1"
+						text
+						@click="
+							addWidget(widgetSelected);
+							dialog = false;
+						"
+						>{{ $t('form.ok') }}</v-btn
+					>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
+	</div>
+</template>
+
+<script>
+import PuiFormMethodsMixin from '../../../../pui9-mixins/PuiFormMethodsMixin';
+import PuiGridLayout from '../PuiGridLayout.vue';
+
+export default {
+	name: 'PuiDashboardForm',
+	mixins: [PuiFormMethodsMixin],
+	components: { PuiGridLayout },
+	data() {
+		return {
+			modelName: 'puidashboard',
+			dialog: false,
+			index: 0,
+			layout: [],
+			widgets: [],
+			widgetSelected: null
+		};
+	},
+	mounted() {
+		this.$puiRequests.postRequest('/puisearch', { model: 'puiwidget', rows: 100 }, (response) => {
+			if (response && response.data && response.data.data) {
+				this.widgets = response.data.data.map((item) => {
+					return {
+						id: item.id,
+						name: item.name,
+						component: item.component,
+						type: item.type,
+						definition: JSON.parse(item.definition)
+					};
+				});
+			}
+		});
+	},
+	methods: {
+		addWidget(widget) {
+			// Add a new item. It must have a unique key!
+			this.layout.push({
+				x: (this.layout.length * 2) % (this.colNum || 12),
+				y: this.layout.length + (this.colNum || 12), // puts it at the bottom
+				w: 6,
+				h: 6,
+				i: this.index,
+				widget: widget.id
+			});
+			// Increment the counter to ensure key is always unique.
+			this.index++;
+			// Reset last widget selected
+			this.widgetSelected = null;
+		},
+		removeWidget(widget) {
+			const index = this.layout.map((item) => item.i).indexOf(widget);
+			this.layout.splice(index, 1);
+		},
+		afterGetData() {
+			if (this.model.definition) {
+				this.layout = JSON.parse(this.model.definition);
+				this.index =
+					Math.max.apply(
+						Math,
+						this.layout.map(function (item) {
+							return item.i;
+						})
+					) + 1;
+			}
+		},
+		beforeSave() {
+			this.model.definition = JSON.stringify(this.layout);
+		}
+	}
+};
+</script>

package/src/components/puidashboard/PuiDashboardGrid.vue

@@ -0,0 +1,14 @@
+<template>
+	<pui-datatable :modelName="modelName"></pui-datatable>
+</template>
+
+<script>
+export default {
+	name: 'PuiDashboardGrid',
+	data() {
+		return {
+			modelName: 'puidashboard'
+		};
+	}
+};
+</script>

package/src/components/puiwidget/PuiWidgetForm.vue

@@ -0,0 +1,129 @@
+<template>
+	<div class="pui-form">
+		<v-form class="mb-4 pb-4" ref="form" v-model="valid" lazy-validation v-if="modelLoaded">
+			<v-row class="pui-form-layout">
+				<v-col cols="5">
+					<pui-field-set highlighted>
+						<v-row dense>
+							<v-col cols="12">
+								<pui-text-field
+									:label="$t('form.puiwidget.name')"
+									v-model="model.name"
+									:disabled="formDisabled"
+									maxlength="100"
+									toplabel
+									required
+								></pui-text-field>
+							</v-col>
+							<v-col cols="12">
+								<pui-select
+									:id="`type-${modelName}`"
+									:attach="`type-${modelName}`"
+									:label="this.$t('form.puiwidget.type')"
+									toplabel
+									required
+									:disabled="formDisabled"
+									v-model="model"
+									modelName="puiwidgettype"
+									:modelFormMapping="{ id: 'typeid' }"
+									:itemsToSelect="[{ id: model.typeid }]"
+									itemValue="id"
+									itemText="name"
+								></pui-select>
+							</v-col>
+							<v-col cols="12">
+								<component :is="component" :type="componentType" :key="componentKey" :resized="{ height: 450 }" />
+							</v-col>
+						</v-row>
+					</pui-field-set>
+				</v-col>
+				<v-col cols="7">
+					<pui-field-set :title="$t('form.puiwidget.definition.attributes')">
+						<v-row dense>
+							<v-col cols="12" v-for="(field, index) in definitionModel" :key="index">
+								<component
+									v-if="field.component === 'pui-select'"
+									:is="field.component"
+									toplabel
+									:label="$t(field.label)"
+									v-model="field.value"
+									:items="field.items"
+									:itemsToSelect="field.value ? [field.value] : []"
+									:itemText="
+										(item) => {
+											return item;
+										}
+									"
+									:required="field.required"
+								/>
+								<component
+									v-else
+									:is="field.component"
+									toplabel
+									:label="$t(field.label)"
+									v-model="field.value"
+									:required="field.required"
+								/>
+							</v-col>
+							<v-col cols="12">
+								<pui-text-area toplabel v-model="model.definition" maxlength="1000" disabled noeditable />
+							</v-col>
+						</v-row>
+					</pui-field-set>
+				</v-col>
+			</v-row>
+			<pui-form-footer>
+				<pui-form-footer-btns :formDisabled="formDisabled" :saveDisabled="saving" :save="save" :back="back"></pui-form-footer-btns>
+			</pui-form-footer>
+		</v-form>
+		<pui-form-loading v-else></pui-form-loading>
+	</div>
+</template>
+
+<script>
+import PuiFormMethodsMixin from '../../../../pui9-mixins/PuiFormMethodsMixin';
+
+export default {
+	name: 'PuiWidgetForm',
+	mixins: [PuiFormMethodsMixin],
+	data() {
+		return {
+			modelName: 'puiwidget',
+			component: null,
+			componentType: null,
+			componentKey: 1,
+			definitionModel: null
+		};
+	},
+	watch: {
+		definitionModel: {
+			handler(newVal) {
+				this.model.definition = JSON.stringify(newVal);
+			},
+			deep: true
+		}
+	},
+	mounted() {
+		this.$puiEvents.$on(`onPuiSelect_selectedItems-type-${this.modelName}`, (newVal) => {
+			this.component = newVal.model.component;
+			this.componentType = newVal.model.type;
+			this.componentKey = this.componentKey + 1;
+
+			if (this.isCreatingElement || this.model.typeid !== this.initialTypeid) {
+				this.model.definition = newVal.model.definition;
+			}
+			this.definitionModel = JSON.parse(this.model.definition);
+		});
+	},
+	beforeDestroy() {
+		this.$puiEvents.$off(`onPuiSelect_selectedItems-type-${this.modelName}`);
+	},
+	methods: {
+		afterGetData() {
+			if (!this.isCreatingElement) {
+				this.initialTypeid = this.model.typeid;
+			}
+		}
+	}
+};
+</script>

package/src/components/puiwidget/PuiWidgetGrid.vue

@@ -0,0 +1,14 @@
+<template>
+	<pui-datatable :modelName="modelName"></pui-datatable>
+</template>
+
+<script>
+export default {
+	name: 'PuiWidgetGrid',
+	data() {
+		return {
+			modelName: 'puiwidget'
+		};
+	}
+};
+</script>

package/src/index.js

@@ -0,0 +1,17 @@
+import PuiDashboard from './components/PuiDashboard';
+import PuiWidgetDatatable from './widgets/PuiWidgetDatatable';
+import PuiWidgetEChart from './widgets/PuiWidgetEChart';
+
+const Components = {
+	PuiDashboard,
+	PuiWidgetDatatable,
+	PuiWidgetEChart
+};
+
+export default {
+	install(Vue) {
+		Object.keys(Components).forEach((name) => {
+			Vue.component(name, Components[name]);
+		});
+	}
+};