pui9-datatables 1.16.4

package/src/components/desktop/PuiQuickEditionDatatable.vue

@@ -0,0 +1,548 @@
+<template>
+	<div v-if="showTemplate">
+		<v-layout wrap v-if="formPosition === 'top'">
+			<v-flex xs12>
+				<pui-quick-edition-form
+					v-if="formComponent && formModel && formLoaded"
+					:modelName="modelName"
+					:showSaveModal="showSaveModal"
+					:formComponent="formComponent"
+					:formModel="formModel"
+					:formDisabled="disabled"
+					:parentModel="parentModel"
+				></pui-quick-edition-form>
+			</v-flex>
+		</v-layout>
+		<v-layout wrap>
+			<v-flex xs12 md5 v-if="formPosition === 'left'">
+				<pui-quick-edition-form
+					v-if="formComponent && formModel && formLoaded"
+					:modelName="modelName"
+					:showSaveModal="showSaveModal"
+					:formComponent="formComponent"
+					:formModel="formModel"
+					:formDisabled="disabled"
+					:parentModel="parentModel"
+				></pui-quick-edition-form>
+			</v-flex>
+			<v-flex class="xs12" :class="getDatatableClass()">
+				<v-layout justify-end>
+					<pui-quick-edition-toolbar
+						:modelName="modelName"
+						:formDisabled="disabled"
+						:showSaveModal="showSaveModal"
+						:externalFilter="externalFilter"
+						:exportable="exportable"
+					></pui-quick-edition-toolbar>
+				</v-layout>
+				<pui-simple-datatable
+					v-if="ready"
+					:class="puiDatatableClass + '__table'"
+					ref="table"
+					:modelName="modelName"
+					:columns="columns"
+					:showRowActions="showRowActions"
+					:parentModelName="parentModelName"
+					:externalFilter="externalFilter"
+					:modelColumnDefs="columnDefs"
+					masterDetail
+					:navigableDetail="navigableDetail"
+				></pui-simple-datatable>
+			</v-flex>
+			<v-flex xs12 md5 v-if="formPosition === 'right'">
+				<pui-quick-edition-form
+					v-if="formComponent && formModel && formLoaded"
+					:modelName="modelName"
+					:formComponent="formComponent"
+					:formModel="formModel"
+					:formDisabled="disabled"
+					:showSaveModal="showSaveModal"
+					:parentModel="parentModel"
+				></pui-quick-edition-form>
+			</v-flex>
+		</v-layout>
+		<v-layout wrap v-if="formPosition === 'bottom'">
+			<v-flex xs12>
+				<pui-quick-edition-form
+					v-if="formComponent && formModel && formLoaded"
+					:modelName="modelName"
+					:formComponent="formComponent"
+					:formModel="formModel"
+					:formDisabled="disabled"
+					:showSaveModal="showSaveModal"
+					:parentModel="parentModel"
+				></pui-quick-edition-form>
+			</v-flex>
+		</v-layout>
+		<!-- delete registry modal dialog -->
+		<pui-modal-dialog
+			v-if="showDeleteRegistryDialog"
+			:cancelText="$t('form.cancel')"
+			:okText="$t('pui9.accept')"
+			:titleText="$t('pui9.delete.title')"
+			:messageText="$t('pui9.delete.confirm')"
+			:dialogName="`deleteRegistry-${this.modelName}`"
+		></pui-modal-dialog>
+	</div>
+</template>
+
+<script>
+import $ from 'jquery';
+import PuiGridDetailMixin from '../../../../pui9-mixins/PuiGridDetailMixin';
+import PuiModelConfigurationMixin from '../../mixins/PuiModelConfigurationMixin';
+import PuiSimpleDatatable from './PuiSimpleDatatable';
+import PuiQuickEditionToolbar from './quickedition/PuiQuickEditionToolbar';
+import PuiQuickEditionForm from './quickedition/PuiQuickEditionForm';
+
+export default {
+	name: 'PuiQuickEditionDatatable',
+	mixins: [PuiGridDetailMixin, PuiModelConfigurationMixin],
+	components: {
+		PuiSimpleDatatable,
+		PuiQuickEditionToolbar,
+		PuiQuickEditionForm
+	},
+	data() {
+		return {
+			columns: [],
+			gridConfiguration: null,
+			ready: false,
+			showRowActions: false,
+			model: null,
+			formComponent: null,
+			formModel: null,
+			formModelTemplateInternal: null,
+			completeGridName: null,
+			showDeleteRegistryDialog: false,
+			selectedRows: null,
+			selectedRow: null,
+			showTemplate: false,
+			formLoaded: false
+		};
+	},
+	props: {
+		modelName: {
+			type: String,
+			required: true
+		},
+		formPosition: {
+			type: String,
+			default: 'top' // left|top|bottom|right
+		},
+		disabled: {
+			type: Boolean,
+			required: true
+		},
+		navigableDetail: {
+			type: Boolean,
+			default: false
+		},
+		formComponentName: {
+			type: String
+		},
+		formModelTemplate: {
+			type: Object,
+			default: null
+		},
+		parentModel: {
+			type: Object,
+			required: false
+		},
+		showSaveModal: {
+			type: Object,
+			required: false
+		},
+		modelColumnDefs: {
+			type: Object
+		},
+		exportable: {
+			type: Boolean,
+			default: false
+		},
+		quickEditionExternalFilter: {
+			type: Object,
+			default: null
+		}
+	},
+	computed: {
+		puiDatatableClass() {
+			return 'pui-quickEditionDatatable' + (!this.$store.getters.isMobile ? '_desktop' : '_mobile');
+		},
+		onPuiModelsLoadedAndSaved() {
+			return this.$store.state.modelsLoadedAndSaved;
+		}
+	},
+	watch: {
+		onPuiModelsLoadedAndSaved() {
+			this.model = this.$store.getters.getModelByName(this.modelName);
+			this.onReady();
+		}
+	},
+	mounted() {
+		if (this.formComponentName) {
+			this.formComponent = this.formComponentName;
+		} else {
+			this.formComponent = this.modelName + 'form';
+		}
+		this.completeGridName = this.modelName + '_' + this.$store.getters.getGridNumberOfInstances(this.modelName);
+		if (this.quickEditionExternalFilter) {
+			this.externalFilter = this.quickEditionExternalFilter;
+		}
+
+		this.model = this.$store.getters.getModelByName(this.modelName);
+		if (this.model) {
+			this.onReady();
+		}
+
+		this.subscribeEvents();
+	},
+	beforeDestroy() {
+		this.$puiEvents.$off(`onPui-selectItem-dataTable-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-quickEditionForm-${this.modelName}-save`);
+		this.$puiEvents.$off(`onPui-quickEditionForm-${this.modelName}-delete`);
+		this.$puiEvents.$off(`pui-modalDialog-deleteRegistry-${this.modelName}-ok`);
+		this.$puiEvents.$off(`pui-modalDialog-deleteRegistry-${this.modelName}-cancel`);
+		this.$puiEvents.$off(`onPui-deleteRow-dataTable-${this.modelName}`);
+		this.$puiEvents.$off('onPui-form-changedModelLanguage');
+	},
+	methods: {
+		subscribeEvents() {
+			// quick edition datatable registry selected
+			this.$puiEvents.$on(`onPui-selectItem-dataTable-${this.modelName}`, (selectedRows) => {
+				this.selectedRows = selectedRows.map((row) => {
+					return Object.values(row)[0];
+				});
+				if (this.selectedRows && this.selectedRows.length === 1) {
+					this.formModel = Object.assign({}, this.selectedRows[0]);
+				} else if (this.formLoaded) {
+					this.formModel = Object.assign({}, this.formModelTemplateInternal);
+				}
+			});
+			// quick edition form save press
+			this.$puiEvents.$on(`onPui-quickEditionForm-${this.modelName}-save`, () => {
+				if (!this.selectedRows || this.selectedRows.length === 0) {
+					this.insert();
+				} else {
+					this.update();
+				}
+			});
+			// quick edition form delete press
+			this.$puiEvents.$on(`onPui-quickEditionForm-${this.modelName}-delete`, () => {
+				this.delete();
+			});
+			// delete registry modal ok press
+			this.$puiEvents.$on(`pui-modalDialog-deleteRegistry-${this.modelName}-ok`, () => {
+				this.$refs.table.deleteRegistry(this.selectedRow);
+				this.selectedRows = null;
+				this.showDeleteRegistryDialog = false;
+				this.formModel = Object.assign({}, this.formModelTemplateInternal);
+			});
+			// delete registry modal cancel press
+			this.$puiEvents.$on(`pui-modalDialog-deleteRegistry-${this.modelName}-cancel`, () => {
+				this.showDeleteRegistryDialog = false;
+			});
+			// PuiDatatable delete a registry
+			this.$puiEvents.$on(`onPui-deleteRow-dataTable-${this.modelName}`, () => {
+				this.$puiEvents.$emit(`onPui-quickEditionDatatable-${this.modelName}-delete-ended`);
+				this.publishRequestEnded();
+			});
+
+			this.$puiEvents.$on('onPui-form-changedModelLanguage', () => {
+				this.onReady();
+			});
+		},
+		hasFunctionalities() {
+			if (this.model.functionalities.list && !this.$store.getters.hasFunctionality(this.model.functionalities.list)) {
+				return false;
+			}
+			if (this.model.functionalities.insert && !this.$store.getters.hasFunctionality(this.model.functionalities.insert)) {
+				return false;
+			}
+			if (this.model.functionalities.update && !this.$store.getters.hasFunctionality(this.model.functionalities.update)) {
+				return false;
+			}
+			if (this.model.functionalities.delete && !this.$store.getters.hasFunctionality(this.model.functionalities.delete)) {
+				return false;
+			}
+			return true;
+		},
+		onReady() {
+			if (this.hasFunctionalities()) {
+				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);
+				}
+				// Create the datatable
+				this.ready = true;
+				this.showTemplate = true;
+				this.getTemplate();
+			}
+		},
+		setColumnsAndGridConfigurationForDatatable(loadDefaultConfiguration, loadCurrentConfiguration) {
+			this.columns = [];
+			this.columnDefs = [];
+			this.customColumnDefs = [];
+			this.dateColumnIndexes = [];
+			this.dateTimeColumnIndexes = [];
+			this.decimalColumnIndexes = [];
+			// Get the current configuration
+			if (loadCurrentConfiguration) {
+				this.gridConfiguration = this.cloneConfiguration(this.$store.getters.getDefaultGridConfiguration(this.modelName));
+			} else if (loadDefaultConfiguration) {
+				// Or load the default
+				const defaultConfig = this.$store.getters.getDefaultGridConfiguration(this.modelName);
+				if (defaultConfig) {
+					this.$store.commit('puiModelsSetCurrentGridConfiguration', { model: this.modelName, configuration: defaultConfig });
+					this.gridConfiguration = this.cloneConfiguration(defaultConfig);
+				}
+			}
+
+			// 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 = {
+					model: this.modelName,
+					usr: this.$store.getters.getUser,
+					configuration: {
+						grouped: false,
+						columnSearch: false
+					}
+				};
+				let hiddenColsCounter = 0;
+				this.model.columns.forEach((colObj, index) => {
+					if (colObj.visibility !== 'completelyhidden') {
+						this.setCustomColumnDefs(colObj.name, colObj.type, index + 1 - hiddenColsCounter);
+
+						let visible = colObj.visibility === 'visible';
+						if (this.modelColumnDefs) {
+							const columnDef = this.modelColumnDefs[colObj.name];
+							if (columnDef && columnDef.visible !== undefined) {
+								visible = columnDef.visible;
+							}
+						}
+
+						this.columns.push({
+							order: colObj.order || index,
+							title: this.$puiI18n.t(colObj.title),
+							name: colObj.name,
+							data: colObj.name,
+							visible: 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 visible = colObj.visible;
+						if (this.modelColumnDefs) {
+							const columnDef = this.modelColumnDefs[colObj.name];
+							if (columnDef && columnDef.visible !== undefined) {
+								visible = columnDef.visible;
+							}
+						}
+
+						colObj.title = this.$puiI18n.t(colObj.title);
+						this.columns.push({
+							order: colObj.order || index,
+							title: colObj.title,
+							name: colObj.name,
+							data: colObj.name,
+							visible: 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);
+		},
+		getDatatableClass() {
+			if (this.formPosition === 'left' || this.formPosition === 'right') {
+				return { md7: true };
+			}
+			return null;
+		},
+		getTemplate() {
+			if (this.formModel) {
+				this.formLoaded = true;
+				return;
+			}
+			if (this.formModelTemplate) {
+				this.formModelTemplateInternal = Object.assign({}, this.formModelTemplate);
+				this.formModel = Object.assign({}, this.formModelTemplate);
+				this.formLoaded = true;
+				return;
+			}
+			this.$puiRequests.getRequest(
+				this.model.url.template,
+				null,
+				(response) => {
+					this.formModelTemplateInternal = Object.assign({}, response.data);
+					const bpk = this.$puiUtils.b64ToUtf8(this.parentPk);
+					const ppPk = JSON.parse(bpk);
+					for (var key in ppPk) {
+						const field = this.parentPkChildFk != null ? this.parentPkChildFk[key] : key;
+						const data = ppPk[key];
+						this.formModelTemplateInternal[field] = data;
+					}
+					this.formModel = Object.assign({}, this.formModelTemplateInternal);
+					// Timeout needed due unnecessary multiple datatable Events Emited causing inconsistency
+					setTimeout(() => (this.formLoaded = true), 200);
+				},
+				(error) => {
+					this.$store.dispatch('puiRequestShowServerError', { error });
+				}
+			);
+		},
+		insert() {
+			this.$puiRequests.postRequest(
+				this.model.url.insert,
+				this.formModel,
+				() => {
+					this.$refs.table.reloadGrid(this.gridConfiguration.configuration);
+					this.getTemplate();
+					this.$puiEvents.$emit(`onPui-quickEditionDatatable-${this.modelName}-insert-ended`);
+					this.publishRequestEnded();
+				},
+				(error) => {
+					this.$store.dispatch('puiRequestShowServerError', { error });
+				}
+			);
+		},
+		update() {
+			this.$puiRequests.putRequest(
+				this.model.url.update,
+				this.formModel,
+				() => {
+					this.$refs.table.reloadGrid(this.gridConfiguration.configuration);
+					this.getTemplate();
+					this.$puiEvents.$emit(`onPui-quickEditionDatatable-${this.modelName}-update-ended`);
+					this.publishRequestEnded();
+				},
+				(error) => {
+					this.$store.dispatch('puiRequestShowServerError', { error });
+				}
+			);
+		},
+		delete() {
+			this.selectedRow = $('#' + this.completeGridName)
+				.DataTable()
+				.row('.selected');
+			if (this.selectedRow && this.selectedRow.data()) {
+				this.showDeleteRegistryDialog = true;
+			} else {
+				this.$puiNotify.warning(this.$t('puigriddelete.notselectedrow'), '', null, false);
+			}
+		},
+		publishRequestEnded() {
+			// Publish event when the puiquickeditiondatatable do some request insert/update/delete
+			this.$puiEvents.$emit(`onPui-quickEditionDatatable-${this.modelName}-request-ended`);
+		}
+	}
+};
+</script>
+
+<style lang="postcss">
+.pui-quickEditionDatatable {
+	&_desktop__table {
+		& .bottom {
+			& .left {
+				float: left;
+			}
+			& .right {
+				float: right;
+			}
+		}
+	}
+}
+</style>