pui9-datatables 1.16.4

package/src/components/desktop/PuiDatatable.vue

@@ -0,0 +1,709 @@
+<template>
+	<div row wrap :class="puiCompleteDatatableClass" ref="grid" v-if="showTemplate">
+		<pui-grid-toolbar
+			v-if="showToolbar && ready"
+			:columns="columns"
+			:modelName="modelName"
+			:modelNameSuffix="modelNameSuffix"
+			:actions="actions"
+			:searcherShowOnlyVisibleColumns="searcherShowOnlyVisibleColumns"
+			:groupedColumn="groupedColumn"
+			:masterDetail="masterDetail"
+			:readOnly="readOnly"
+			:showActionsBtn="showActionsBtn"
+			:showExportsBtn="showExportsBtn"
+			:showCreateBtn="showCreateBtn"
+			:showUpdateBtn="showUpdateBtn"
+			:showDeleteBtn="showDeleteBtn"
+			:showRefreshBtn="showRefreshBtn"
+			:showFilterListBtn="showFilterListBtn"
+			:showFilterBtn="showFilterBtn"
+			:showSortBtn="showSortBtn"
+			:showConfBtn="showConfBtn"
+			:showSearcher="showSearcher"
+			:showMasterDetailFilterListBtn="showMasterDetailFilterListBtn"
+			:showMasterDetailFilterBtn="showMasterDetailFilterBtn"
+			:showMasterDetailSortBtn="showMasterDetailSortBtn"
+			:showMasterDetailConfBtn="showMasterDetailConfBtn"
+			:showFilterComboSelect="filterCombo"
+		></pui-grid-toolbar>
+		<pui-simple-datatable
+			v-if="ready"
+			:class="puiCompleteDatatableClass + '__table'"
+			ref="table"
+			:modelName="modelName"
+			:modelNameSuffix="modelNameSuffix"
+			:columns="columns"
+			:info="info"
+			:lengthMenu="lengthMenu"
+			:pageLength="pageLength"
+			:search="search"
+			:select="select"
+			:multiselect="multiselect"
+			:tableMaxHeight="tableMaxHeight"
+			:showPaginator="showPaginator"
+			:scrollX="scrollX"
+			:scrollY="scrollY"
+			:scrollCollapse="scrollCollapse"
+			:externalSearch="currentSearch"
+			:externalFilter="getCurrentFilter()"
+			:modelColumnDefs="columnDefs"
+			:masterDetail="masterDetail"
+			:navigableDetail="navigableDetail"
+			:parentModelName="parentModelName"
+			:isEditableRegistry="isEditableRegistry"
+			:showRowActions="showRowActions"
+			:readOnly="readOnly"
+			:defaultActionRead="defaultActionRead"
+			:modalDialog="modalDialog"
+			:selectStyle="selectStyle"
+		></pui-simple-datatable>
+	</div>
+</template>
+
+<script>
+import PuiModelConfigurationMixin from '../../mixins/PuiModelConfigurationMixin';
+import PuiGridToolbar from './toolbar/PuiGridToolbar';
+import PuiSimpleDatatable from './PuiSimpleDatatable';
+
+export default {
+	name: 'PuiDatatable',
+	mixins: [PuiModelConfigurationMixin],
+	components: {
+		PuiGridToolbar,
+		PuiSimpleDatatable
+	},
+	data() {
+		return {
+			scrolling: 0,
+			columns: [],
+			gridConfiguration: null,
+			ready: false,
+			model: null,
+			filtering: null,
+			currentSearch: null,
+			currentFilterCombo: null,
+			isMenuExpaded: false,
+			showTemplate: false,
+			refreshTimeout: null,
+			topicPreffix: '/topic/model/'
+		};
+	},
+	props: {
+		info: {
+			type: Boolean,
+			default: true
+		},
+		lengthMenu: {
+			type: [Array],
+			default: () => [10, 20, 30, 50, 100]
+		},
+		modelName: {
+			type: String,
+			required: true
+		},
+		modelNameSuffix: {
+			type: String,
+			default: ''
+		},
+		pageLength: {
+			type: Number
+		},
+		search: {
+			type: Boolean,
+			default: false
+		},
+		select: {
+			type: [Boolean],
+			default: true
+		},
+		multiselect: {
+			type: [Boolean],
+			default: false
+		},
+		tableMaxHeight: {
+			type: Number,
+			default: 70
+		},
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
+		defaultActionRead: {
+			type: Boolean,
+			default: false
+		},
+		showPaginator: {
+			type: Boolean,
+			default: true
+		},
+		scrollX: {
+			type: Boolean,
+			default: true
+		},
+		scrollY: {
+			type: [Boolean, String],
+			default: true
+		},
+		scrollCollapse: {
+			type: Boolean,
+			default: false
+		},
+		showToolbar: {
+			type: Boolean,
+			default: true
+		},
+		actions: {
+			type: Array,
+			default: () => {
+				return [];
+			}
+		},
+		searcherShowOnlyVisibleColumns: {
+			type: Boolean,
+			default: true
+		},
+		externalFilter: {
+			type: Object
+		},
+		masterDetail: {
+			type: Boolean,
+			default: false
+		},
+		navigableDetail: {
+			type: Boolean,
+			default: true
+		},
+		masterDetailColumnVisibles: {
+			Object: Object
+		},
+		parentModelName: {
+			type: String,
+			default: null
+		},
+		isEditableRegistry: {
+			type: Function,
+			default: () => {
+				return true;
+			}
+		},
+		showRowActions: {
+			type: Boolean,
+			default: true
+		},
+		modelColumnDefs: {
+			type: Object
+		},
+		showActionsBtn: {
+			type: Boolean,
+			default: true
+		},
+		showExportsBtn: {
+			type: Boolean,
+			default: true
+		},
+		showCreateBtn: {
+			type: Boolean,
+			default: true
+		},
+		showUpdateBtn: {
+			type: Boolean,
+			default: true
+		},
+		showDeleteBtn: {
+			type: Boolean,
+			default: true
+		},
+		showRefreshBtn: {
+			type: Boolean,
+			default: true
+		},
+		showFilterListBtn: {
+			type: Boolean,
+			default: true
+		},
+		showFilterBtn: {
+			type: Boolean,
+			default: true
+		},
+		showSortBtn: {
+			type: Boolean,
+			default: true
+		},
+		showConfBtn: {
+			type: Boolean,
+			default: true
+		},
+		showSearcher: {
+			type: Boolean,
+			default: true
+		},
+		showMasterDetailFilterListBtn: {
+			type: Boolean,
+			default: false
+		},
+		showMasterDetailFilterBtn: {
+			type: Boolean,
+			default: false
+		},
+		showMasterDetailSortBtn: {
+			type: Boolean,
+			default: false
+		},
+		showMasterDetailConfBtn: {
+			type: Boolean,
+			default: false
+		},
+		modalDialog: {
+			type: Boolean,
+			default: false
+		},
+		selectStyle: {
+			type: String,
+			default: 'single'
+		},
+		filterCombo: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		puiCompleteDatatableClass() {
+			return 'pui-completeDatatable' + (this.$store.getters.isMobile ? '_mobile' : !this.masterDetail ? '_desktop' : '_desktop_detail');
+		},
+		onPuiModelsLoadedAndSaved() {
+			return this.$store.state.modelsLoadedAndSaved;
+		},
+		onPuiExpandMenu() {
+			return this.$store.state.menu.expandMenuForce;
+		},
+		onPuiSecondMenuShowed() {
+			return this.$store.state.menu.secondMenuShowedForce;
+		}
+	},
+	watch: {
+		onPuiModelsLoadedAndSaved() {
+			this.model = this.$store.getters.getModelByName(this.modelName);
+			this.onReady();
+		},
+		onPuiExpandMenu() {
+			this.onMenuExpandedShowed(this.$store.state.menu.expandMenu);
+		},
+		onPuiSecondMenuShowed() {
+			this.onMenuExpandedShowed(this.$store.state.menu.secondMenuShowed);
+		}
+	},
+	mounted() {
+		this.model = this.$store.getters.getModelByName(this.modelName);
+		if (this.model) {
+			this.onReady();
+		}
+		this.subscribeToToolbarEvents();
+
+		if (this.$store.getters.webSocketsEnabled) {
+			var self = this;
+			// wait until websocket connection established
+			setTimeout(function() {
+				self.$puiWebSockets.subscribe(self.$store.getters.getUser, self.topicPreffix + self.modelName, () => {
+					self.$refs.table.reloadGrid(self.gridConfiguration.configuration, self.columnDefs);
+				});
+			}, 250);
+		}
+	},
+	beforeDestroy() {
+		if (this.refreshTimeout) {
+			clearTimeout(this.refreshTimeout);
+		}
+
+		if (this.$store.getters.webSocketsEnabled) {
+			this.$puiWebSockets.unsubscribe(this.$store.getters.getUser, this.topicPreffix + this.modelName);
+		}
+	},
+	destroyed() {
+		this.$puiEvents.$off(`onPui-apply-edit-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-apply-delete-${this.modelName}${this.modelNameSuffix}`);
+		if (this.filterCombo) {
+			this.$puiEvents.$off(`onPui-apply-filtercombo-${this.modelName}${this.modelNameSuffix}`);
+		}
+		this.$puiEvents.$off(`onPui-apply-filtering-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-apply-searching-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-apply-sorting-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-apply-configuration-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-created-dataTable-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-active-toolbarBtn-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-inactive-toolbarBtn-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-action-before-running-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-action-running-ended-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-action-running-cancelled-${this.modelName}${this.modelNameSuffix}`);
+	},
+	methods: {
+		setColumnsAndGridConfigurationForDatatable(loadDefaultConfiguration, loadCurrentConfiguration) {
+			this.columns = [];
+			this.columnDefs = [];
+			this.customColumnDefs = [];
+			this.dateColumnIndexes = [];
+			this.dateTimeColumnIndexes = [];
+			this.decimalColumnIndexes = [];
+			// Get the current configuration
+			if (loadCurrentConfiguration) {
+				const currentConfig = this.$store.getters.getCurrentGridConfiguration(this.modelName);
+				if (currentConfig) {
+					this.gridConfiguration = this.cloneConfiguration(currentConfig);
+				}
+			} else if (loadDefaultConfiguration) {
+				// Or load the default
+				const defaultConfig = this.$store.getters.getDefaultGridConfiguration(this.modelName);
+				if (defaultConfig) {
+					this.gridConfiguration = this.cloneConfiguration(defaultConfig);
+					this.$store.commit('puiModelsSetCurrentGridConfiguration', { model: this.modelName, configuration: this.gridConfiguration });
+				}
+			}
+
+			// If there is no configuration (first time in the grid) a new one should be created to work with on runtime
+			if (!this.gridConfiguration || this.gridConfiguration === -1) {
+				this.gridConfiguration = {
+					model: this.modelName,
+					usr: this.$store.getters.getUser,
+					configuration: {
+						grouped: false,
+						columnSearch: false
+					}
+				};
+				let hiddenColsCounter = 0;
+				this.model.columns.forEach((colObj, index) => {
+					if (this.masterDetailColumnVisibles) {
+						if (this.masterDetailColumnVisibles[colObj.name]) {
+							this.setCustomColumnDefs(colObj.name, colObj.type, index + 1 - hiddenColsCounter);
+
+							this.columns.push({
+								order: colObj.order || index,
+								title: this.$parent.$t(colObj.title),
+								name: colObj.name,
+								data: colObj.name,
+								visible: true,
+								type: colObj.type,
+								orderable: true
+							});
+						} else {
+							hiddenColsCounter++;
+						}
+					} else {
+						if (colObj.visibility !== 'completelyhidden') {
+							this.setCustomColumnDefs(colObj.name, colObj.type, index + 1 - hiddenColsCounter);
+
+							this.columns.push({
+								order: colObj.order || index,
+								title: this.$parent.$t(colObj.title),
+								name: colObj.name,
+								data: colObj.name,
+								visible: colObj.visibility === 'visible',
+								type: colObj.type,
+								orderable: true
+							});
+						} else {
+							hiddenColsCounter++;
+						}
+					}
+				});
+			} else {
+				this.gridConfiguration = this.cloneConfiguration(this.gridConfiguration);
+				this.avoidOrder = this.gridConfiguration.configuration.order !== undefined;
+				this.gridConfiguration.configuration.columns
+					.sort((a, b) => {
+						return a.order - b.order;
+					})
+					.forEach((colObj, index) => {
+						delete colObj.bVisible;
+						this.setCustomColumnDefs(colObj.name, colObj.type, index + 1);
+
+						let colExist = false;
+						this.model.columns.forEach((colObj2) => {
+							if (colObj.name === colObj2.name) {
+								colExist = true;
+								colObj.title = colObj2.title;
+								colObj.type = colObj2.type;
+							}
+						});
+
+						if (colExist) {
+							colObj.title = this.$parent.$t(colObj.title);
+							this.columns.push({
+								order: colObj.order || index,
+								title: colObj.title,
+								name: colObj.name,
+								data: colObj.name,
+								visible: colObj.visible,
+								type: colObj.type,
+								orderable: true
+							});
+						}
+					});
+			}
+			this.groupedColumn = this.gridConfiguration.configuration.grouped;
+			this.setColumnDefs();
+		},
+		setCustomColumnDefs(columnName, columnType, index) {
+			if (this.modelColumnDefs && this.modelColumnDefs[columnName]) {
+				let hasCustomColumnDef = false;
+				const columnDef = { targets: [index] };
+				if (this.modelColumnDefs[columnName].render) {
+					hasCustomColumnDef = true;
+					columnDef.render = this.modelColumnDefs[columnName].render;
+				}
+				if (this.modelColumnDefs[columnName].createdCell) {
+					hasCustomColumnDef = true;
+					columnDef.createdCell = this.modelColumnDefs[columnName].createdCell;
+				}
+				if (hasCustomColumnDef) {
+					this.customColumnDefs.push(columnDef);
+				} else if (columnType === 'date' || columnType === 'datetime') {
+					if (this.modelColumnDefs[columnName].withoutHours) {
+						this.dateColumnIndexes.push(index);
+					} else {
+						this.dateTimeColumnIndexes.push(index);
+					}
+				} else if (columnType === 'decimal') {
+					this.decimalColumnIndexes.push(index);
+				}
+			} else {
+				if (columnType === 'date' || columnType === 'datetime') {
+					this.dateTimeColumnIndexes.push(index);
+				} else if (columnType === 'decimal') {
+					this.decimalColumnIndexes.push(index);
+				}
+			}
+		},
+		setColumnDefs() {
+			this.dateFormat = this.$store.getters.dateFormat;
+			this.timeFormat = this.$store.getters.timeFormat;
+			this.thousandSeparator = this.$store.getters.thousandSeparator;
+			this.decimalSeparator = this.$store.getters.decimalSeparator;
+
+			const dateColumnDefs = {
+				targets: this.dateColumnIndexes,
+				render: (val) => {
+					if (val === null) {
+						return '';
+					}
+					return this.$dateTimeUtils.getLocalFormattedDate(val, `${this.dateFormat}`);
+				}
+			};
+
+			const dateTimeColumnDefs = {
+				targets: this.dateTimeColumnIndexes,
+				render: (val) => {
+					if (val === null) {
+						return '';
+					}
+					return this.$dateTimeUtils.getLocalFormattedDate(val, `${this.dateFormat} ${this.timeFormat}`);
+				}
+			};
+
+			const decimalColumnDefs = {
+				targets: this.decimalColumnIndexes,
+				render: (val) => {
+					if (val === null) {
+						return '';
+					}
+					if (val.toString().includes('.')) {
+						const parts = val.toString().split('.');
+						parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, this.thousandSeparator);
+						return parts.join(this.decimalSeparator);
+					}
+					return val.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, `$1${this.thousandSeparator}`);
+				}
+			};
+
+			this.columnDefs.push(dateColumnDefs);
+			this.columnDefs.push(dateTimeColumnDefs);
+			this.columnDefs.push(decimalColumnDefs);
+			this.columnDefs.push(...this.customColumnDefs);
+		},
+		shouldCreateToolbar() {
+			return this.modelName && this.columns.length > 0;
+		},
+		subscribeToToolbarEvents() {
+			this.$puiEvents.$on(`onPui-apply-edit-${this.modelName}${this.modelNameSuffix}`, (data) => {
+				this.$refs.table.editRegistry(data.row, data.method);
+			});
+			this.$puiEvents.$on(`onPui-apply-delete-${this.modelName}${this.modelNameSuffix}`, (row) => {
+				this.$refs.table.deleteRegistry(row);
+			});
+			if (this.filterCombo) {
+				this.$puiEvents.$on(`onPui-apply-filtercombo-${this.modelName}${this.modelNameSuffix}`, (filteringObject) => {
+					this.currentFilterCombo = filteringObject;
+					this.currentFilter = this.getCurrentFilter();
+					this.$refs.table.applyFilter(this.currentFilter);
+				});
+			}
+			this.$puiEvents.$on(`onPui-apply-filtering-${this.modelName}${this.modelNameSuffix}`, (filteringObject) => {
+				this.filtering = filteringObject;
+				this.currentFilter = this.getCurrentFilter();
+				this.$refs.table.applyFilter(this.currentFilter);
+			});
+			this.$puiEvents.$on(`onPui-apply-sorting-${this.modelName}${this.modelNameSuffix}`, (sortingRules) => {
+				this.currentSorting = sortingRules;
+				this.$refs.table.applySort(sortingRules, true);
+			});
+			this.$puiEvents.$on(`onPui-apply-searching-${this.modelName}${this.modelNameSuffix}`, (columnsAndElement) => {
+				this.currentSearch = columnsAndElement;
+				const text = columnsAndElement[0];
+				const columns = columnsAndElement[1];
+				this.$refs.table.applySearch(text, columns);
+			});
+			this.$puiEvents.$on(`onPui-apply-configuration-${this.modelName}${this.modelNameSuffix}`, (config) => {
+				this.gridConfiguration.configuration = config;
+				this.setColumnsAndGridConfigurationForDatatable(false, false);
+				this.$refs.table.reloadGrid(this.gridConfiguration.configuration, this.columnDefs);
+			});
+			this.$puiEvents.$on(`onPui-active-toolbarBtn-${this.modelName}`, (idTool) => {
+				if (idTool === 'actions' && this.refreshTimeout) {
+					clearTimeout(this.refreshTimeout);
+					this.refreshTimeout = null;
+				}
+			});
+			this.$puiEvents.$on(`onPui-inactive-toolbarBtn-${this.modelName}`, (idTool) => {
+				if (idTool === 'actions' && !this.actionRunning) {
+					if (this.model.defaultConfiguration.refreshSeconds && !this.refreshTimeout) {
+						this.refreshAutomatically(this.model.defaultConfiguration.refreshSeconds);
+					}
+				}
+			});
+			this.$puiEvents.$on(`onPui-action-before-running-${this.modelName}${this.modelNameSuffix}`, () => {
+				this.actionRunning = true;
+				if (this.refreshTimeout) {
+					clearTimeout(this.refreshTimeout);
+					this.refreshTimeout = null;
+				}
+			});
+			this.$puiEvents.$on(`onPui-action-running-ended-${this.modelName}${this.modelNameSuffix}`, () => {
+				this.actionRunning = false;
+				if (this.model.defaultConfiguration.refreshSeconds && !this.refreshTimeout) {
+					this.refreshAutomatically(this.model.defaultConfiguration.refreshSeconds);
+				}
+			});
+			this.$puiEvents.$on(`onPui-action-running-cancelled-${this.modelName}${this.modelNameSuffix}`, () => {
+				this.actionRunning = false;
+				if (this.model.defaultConfiguration.refreshSeconds && !this.refreshTimeout) {
+					this.refreshAutomatically(this.model.defaultConfiguration.refreshSeconds);
+				}
+			});
+		},
+		onMenuExpandedShowed(expanded) {
+			const className = `${this.puiCompleteDatatableClass}--compressed`;
+			if (expanded === true) {
+				this.$refs.grid && this.$refs.grid.classList && this.$refs.grid.classList.add(className);
+			} else {
+				this.$refs.grid && this.$refs.grid.classList && this.$refs.grid.classList.remove(className);
+			}
+		},
+		getCurrentFilter() {
+			const filter = { groupOp: 'and', groups: [], rules: [] };
+			if (this.filterCombo && this.currentFilterCombo) {
+				filter.groups.push(this.currentFilterCombo);
+			}
+			if (!this.masterDetail && this.filtering) {
+				filter.groups.push(this.filtering);
+			}
+			if (this.externalFilter) {
+				filter.groups.push(this.externalFilter);
+			}
+			return filter;
+		},
+		getCurrentSorting() {
+			if (this.$refs.table.order) {
+				this.currentSorting = this.$refs.table.order;
+			}
+			return this.currentSorting;
+		},
+		getCurrentSearch() {
+			return this.currentSearch;
+		},
+		onReady() {
+			this.$emit('ready');
+
+			if (this.$store.getters.hasFunctionality(this.model.functionalities.list)) {
+				this.$puiEvents.$on(`onPui-created-dataTable-${this.modelName}${this.modelNameSuffix}`, this.onMenuExpandedShowed);
+
+				if (this.masterDetailColumnVisibles) {
+					this.setColumnsAndGridConfigurationForDatatable(false, false);
+				} else if (!this.$store.getters.gridIsInitialized(this.modelName)) {
+					this.setColumnsAndGridConfigurationForDatatable(true, false);
+				} else {
+					// If the grid was created and we are coming back
+					this.setColumnsAndGridConfigurationForDatatable(false, true);
+				}
+				this.beforeCreateDatatable();
+				// Create the datatable
+				this.ready = true;
+				this.showTemplate = true;
+			} else {
+				this.$store.dispatch('puiRequestShowServerError', { error: { response: { status: 403 } } });
+				this.$store.dispatch('puiRouterGoToDefaultEntryPage', this.$router);
+			}
+		},
+		beforeCreateDatatable() {
+			if (this.model.searcher) {
+				// apply searchText & searchColumns from model store
+				this.currentSearch = [this.model.searcher.searchText, this.model.searcher.searchingColumns];
+			}
+			if (this.filterCombo && this.model.currentFilterCombo) {
+				// apply filter combo from model store
+				this.currentFilterCombo = this.model.currentFilterCombo;
+			}
+			if (this.model.currentFilter && this.model.currentFilter.filter && this.model.currentFilter.checked) {
+				// apply filter user from model store
+				this.filtering = this.model.currentFilter.filter;
+			}
+			if (this.model.defaultConfiguration.refreshSeconds) {
+				this.refreshAutomatically(this.model.defaultConfiguration.refreshSeconds);
+			}
+		},
+		refreshAutomatically(seconds) {
+			const milliseconds = seconds * 1000;
+			this.refreshTimeout = setTimeout(() => {
+				this.$refs.table.reloadGrid(this.gridConfiguration.configuration, this.columnDefs);
+				this.refreshAutomatically(seconds);
+			}, milliseconds);
+		}
+	}
+};
+</script>
+
+<style lang="postcss">
+.pui-completeDatatable {
+	display: grid;
+	grid-template-rows: auto 1fr;
+	width: 100%;
+	&_desktop .bottom {
+		position: fixed;
+		bottom: 5px;
+		width: 92%;
+		padding-left: 8px;
+		padding-right: 20px;
+		& .left {
+			float: left;
+		}
+		& .right {
+			float: right;
+		}
+	}
+	&_desktop_detail .bottom {
+		& .left {
+			float: left;
+		}
+		& .right {
+			float: right;
+		}
+	}
+	&_desktop--compressed .bottom {
+		width: calc(92% - 304px);
+	}
+	&_mobile .bottom .left {
+		float: none !important;
+	}
+	&_mobile .bottom .right {
+		float: none !important;
+	}
+}
+</style>