pui9-datatables 1.16.4

package/src/components/desktop/toolbar/actions/importexport/PuiGridImportDialog.vue

@@ -0,0 +1,421 @@
+<template>
+	<div>
+		<pui-modal-dialog
+			v-if="dialogs.prepareImport.show"
+			:titleText="dialogs.prepareImport.titleText"
+			messageText
+			:okText="dialogs.prepareImport.okText"
+			:cancelText="dialogs.prepareImport.cancelText"
+			:disableOk="dialogs.prepareImport.disableOk"
+			:widthDialog="dialogs.prepareImport.width"
+			:dialogName="dialogs.prepareImport.name"
+			:ref="dialogs.prepareImport.name"
+		>
+			<template slot="message">
+				<v-layout wrap>
+					<v-flex xs12 md8 xl8>
+						<pui-text-field
+							:label="$t('puidatatables.filename')"
+							v-model="dialogs.prepareImport.filename"
+							toplabel
+							required
+							disabled
+						></pui-text-field>
+						<input type="file" v-show="false" ref="document" accept=".csv" @change="onFilePicked" />
+					</v-flex>
+					<v-flex xs12 md2 xl2>
+						<v-btn color="primary" @click="pickFile" style="margin-top: 20px">{{ $t('puidatatables.selectfile') }}</v-btn>
+					</v-flex>
+				</v-layout>
+			</template>
+		</pui-modal-dialog>
+		<pui-modal-dialog
+			v-if="dialogs.import.show"
+			:titleText="dialogs.import.titleText"
+			messageText
+			:okText="dialogs.import.okText"
+			:cancelText="dialogs.import.cancelText"
+			:disableOk="dialogs.import.disableOk"
+			:widthDialog="dialogs.import.width"
+			:dialogName="dialogs.import.name"
+			:ref="dialogs.import.name"
+		>
+			<template slot="message">
+				<v-data-table
+					v-if="dialogs.import.dataSetted"
+					:headers="dialogs.import.headers"
+					:items="dataFilteredByStatus"
+					fixed-header
+					:height="dialogs.import.height"
+				>
+					<template v-slot:item="{ item }">
+					<tr :class="getRowClass(item)">
+						<td v-for="(prop, index) in getItemValidProps(item)" :key="index">
+							<div v-html="prop" />
+						</td>
+					</tr>
+					</template>
+				</v-data-table>
+				<pui-form-loading style="height: 500px" v-else></pui-form-loading>
+				<v-layout wrap>
+					<v-chip class="ma-2" :class="isActive('ALL') ? 'active-chip' : ''" @click.native="showInDatatable('ALL')">
+						<v-avatar left class="import_total" :style="getAvatarStyle('totalRecords')">
+							{{ dialogs.prepareImport.data.totalRecords }}
+						</v-avatar>
+						{{ $t('puidatatables.total_records') }}
+					</v-chip>
+					<v-chip class="ma-2" :class="isActive('NEW') ? 'active-chip' : ''" @click.native="showInDatatable('NEW')">
+						<v-avatar left class="import_new" :style="getAvatarStyle('newRecords')">
+							{{ dialogs.prepareImport.data.newRecords }}
+						</v-avatar>
+						{{ $t('puidatatables.new_records') }}
+					</v-chip>
+					<v-chip class="ma-2" :class="isActive('MODIFIED') ? 'active-chip' : ''" @click.native="showInDatatable('MODIFIED')">
+						<v-avatar left class="import_modified" :style="getAvatarStyle('modifiedRecords')">
+							{{ dialogs.prepareImport.data.modifiedRecords }}
+						</v-avatar>
+						{{ $t('puidatatables.modified_records') }}
+					</v-chip>
+					<v-chip class="ma-2" :class="isActive('UNMODIFIED') ? 'active-chip' : ''" @click.native="showInDatatable('UNMODIFIED')">
+						<v-avatar left :style="getAvatarStyle('unmodifiedRecords')">
+							{{ dialogs.prepareImport.data.unmodifiedRecords }}
+						</v-avatar>
+						{{ $t('puidatatables.unmodified_records') }}
+					</v-chip>
+					<v-chip class="ma-2" :class="isActive('NEW_ERROR') ? 'active-chip' : ''" @click.native="showInDatatable('NEW_ERROR')">
+						<v-avatar left class="import_new_error" :style="getAvatarStyle('newWithErrorsRecords')">
+							{{ dialogs.prepareImport.data.newWithErrorsRecords }}
+						</v-avatar>
+						{{ $t('puidatatables.new_error_records') }}
+					</v-chip>
+					<v-chip class="ma-2" :class="isActive('ERROR') ? 'active-chip' : ''" @click.native="showInDatatable('ERROR')">
+						<v-avatar left class="import_error" :style="getAvatarStyle('errorRecords')">
+							{{ dialogs.prepareImport.data.errorRecords }}
+						</v-avatar>
+						{{ $t('puidatatables.error_records') }}
+					</v-chip>
+				</v-layout>
+			</template>
+		</pui-modal-dialog>
+		<pui-modal-dialog
+			v-if="dialogs.beforeImport.show"
+			:titleText="dialogs.beforeImport.titleText"
+			:messageText="dialogs.beforeImport.messageText"
+			:okText="dialogs.beforeImport.okText"
+			:cancelText="dialogs.beforeImport.cancelText"
+			:dialogName="dialogs.beforeImport.name"
+			:ref="dialogs.beforeImport.name"
+		></pui-modal-dialog>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PuiGridImportDialog',
+	props: {
+		modelName: {
+			type: String,
+			required: true
+		},
+		importExportModelName: {
+			type: String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			dialogs: {
+				prepareImport: {
+					name: 'importDialog',
+					urlController: '/importexport/prepareImport',
+					show: false,
+					titleText: this.$t('puidatatables.prepare_import_title'),
+					messageText: '',
+					okText: this.$t('puidatatables.import_btn'),
+					cancelText: this.$t('form.cancel'),
+					disableOk: true,
+					width: 650,
+					filename: null,
+					data: null
+				},
+				import: {
+					name: 'checkImportDialog',
+					performImportUrlController: '/importexport/performImport',
+					cancelImportUrlController: '/importexport/cancelImport',
+					show: false,
+					titleText: this.$t('puidatatables.import_title'),
+					messageText: '',
+					okText: this.$t('form.ok'),
+					cancelText: this.$t('form.cancel'),
+					disableOk: true,
+					width: window.innerWidth * 0.9,
+					height: '60vh',
+					dataSetted: false,
+					headers: [],
+					data: [],
+					dataFiltered: [],
+					statusToFilter: 'ALL'
+				},
+				beforeImport: {
+					name: 'beforeImportDialog',
+					show: false,
+					titleText: this.$t('puidatatables.before_import_title'),
+					okText: this.$t('form.ok'),
+					cancelText: this.$t('form.cancel'),
+					messageText: null
+				}
+			}
+		};
+	},
+	created() {
+		this.$puiEvents.$on(`pui-show-${this.dialogs.prepareImport.name}-${this.importExportModelName}`, () => {
+			this.dialogs.prepareImport.show = true;
+		});
+		this.$puiEvents.$on(`pui-modalDialog-${this.dialogs.prepareImport.name}-ok`, () => {
+			this.prepareImport();
+			this.dialogs.prepareImport.show = false;
+		});
+		this.$puiEvents.$on(`pui-modalDialog-${this.dialogs.prepareImport.name}-cancel`, () => {
+			this.dialogs.prepareImport.show = false;
+			this.$puiEvents.$emit(`onPui-action-running-ended-${this.modelName}`);
+		});
+		this.$puiEvents.$on(`pui-modalDialog-${this.dialogs.import.name}-ok`, () => {
+			const params = {
+				new: this.dialogs.prepareImport.data.newRecords,
+				modified: this.dialogs.prepareImport.data.modifiedRecords
+			};
+			this.dialogs.beforeImport.messageText = this.$t('puidatatables.before_import_message', params);
+			this.dialogs.beforeImport.show = true;
+		});
+		this.$puiEvents.$on(`pui-modalDialog-${this.dialogs.import.name}-cancel`, () => {
+			this.doImport(this.dialogs.import.cancelImportUrlController);
+		});
+		this.$puiEvents.$on(`pui-modalDialog-${this.dialogs.beforeImport.name}-ok`, () => {
+			this.doImport(this.dialogs.import.performImportUrlController);
+		});
+		this.$puiEvents.$on(`pui-modalDialog-${this.dialogs.beforeImport.name}-cancel`, () => {
+			this.doImport(this.dialogs.import.cancelImportUrlController);
+		});
+	},
+	destroyed() {
+		this.$puiEvents.$off(`pui-show-${this.dialogs.prepareImport.name}-${this.importExportModelName}`);
+		this.$puiEvents.$off(`pui-modalDialog-${this.dialogs.prepareImport.name}-ok`);
+		this.$puiEvents.$off(`pui-modalDialog-${this.dialogs.prepareImport.name}-cancel`);
+		this.$puiEvents.$off(`pui-modalDialog-${this.dialogs.import.name}-ok`);
+		this.$puiEvents.$off(`pui-modalDialog-${this.dialogs.import.name}-cancel`);
+		this.$puiEvents.$off(`pui-modalDialog-${this.dialogs.beforeImport.name}-ok`);
+		this.$puiEvents.$off(`pui-modalDialog-${this.dialogs.beforeImport.name}-cancel`);
+	},
+	computed: {
+		dataFilteredByStatus() {
+			const dateTimeRegex = new RegExp('(\\d{4})-(\\d{2})-(\\d{2})T(\\d{2}):(\\d{2}):(\\d{2}).(\\d{3})Z');
+			const dateFormat = this.$store.getters.dateFormat;
+			const timeFormat = this.$store.getters.timeFormat;
+
+			let registriesToShow = this.dialogs.import.data.filter(
+				(row) => this.dialogs.import.statusToFilter === 'ALL' || row.record_status === this.dialogs.import.statusToFilter
+			);
+			registriesToShow = registriesToShow.map((row) => {
+				const recordStatus = row.record_status;
+				for (const property in row) {
+					let newValue = row[property];
+					let oldValue = row[`${property}_oldValue`];
+					let status = row[`${property}_status`];
+
+					if (dateTimeRegex.test(newValue)) {
+						row[property] = this.$dateTimeUtils.getLocalFormattedDate(newValue, `${dateFormat} ${timeFormat}`);
+					}
+					if (dateTimeRegex.test(oldValue)) {
+						row[`${property}_oldValue`] = this.$dateTimeUtils.getLocalFormattedDate(oldValue, `${dateFormat} ${timeFormat}`);
+					}
+
+					if (recordStatus === 'ERROR' && status === 'MODIFIED') {
+						row[property] = `<strike>${oldValue || ''}</strike><br>${newValue || ''}`;
+					} else if (status === 'ERROR' || status === 'MODIFIED') {
+						row[property] = `<b><strike>${oldValue || ''}</strike><br>${newValue || ''}</b>`;
+					}
+				}
+				return row;
+			});
+			return registriesToShow;
+		},
+		data() {
+			return this.dialogs.prepareImport.data;
+		}
+	},
+	methods: {
+		getAvatarStyle(indexRecords) {
+			return `width: ${this.dialogs.prepareImport.data[indexRecords].toString().length * 12}px !important; border-radius: 10px;`;
+		},
+		isActive(status) {
+			return this.dialogs.import.dataSetted && this.dialogs.import.statusToFilter === status;
+		},
+		pickFile() {
+			this.$refs.document.click();
+		},
+		onFilePicked(e) {
+			const files = e.target.files;
+			if (files[0] !== undefined) {
+				const file = files[0];
+				if (file.name.lastIndexOf('.') <= 0 || !file.name.endsWith('.csv')) {
+					this.$puiNotify.error(this.$t('puidatatables.fileextension_notallowed'));
+					return;
+				}
+
+				this.dialogs.prepareImport.filename = file.name;
+				const fr = new window.FileReader();
+				fr.addEventListener('load', () => {
+					this.selectedFile = file; // this is the file that can be sent to server...
+				});
+				fr.readAsDataURL(file);
+				this.dialogs.prepareImport.disableOk = false;
+			}
+		},
+		resetFilePicked() {
+			this.dialogs.prepareImport.filename = null;
+			this.selectedFile = null;
+		},
+		prepareImport() {
+			const formData = new window.FormData();
+			formData.append('csv', this.selectedFile, this.selectedFile.name);
+			const params = { model: this.modelName };
+			this.$store.commit('showPuiLoader', this.$t('puidatatables.uploading'));
+			this.$puiRequests.uploadFileRequest(
+				this.dialogs.prepareImport.urlController,
+				formData,
+				(response) => {
+					this.$store.commit('hidePuiLoader');
+					if (response.data) {
+						this.dialogs.prepareImport.data = response.data;
+						this.afterPrepareImport();
+						this.dialogs.import.show = true;
+					}
+				},
+				(error) => {
+					this.$store.commit('hidePuiLoader');
+					this.$store.dispatch('puiRequestShowServerError', { error });
+					this.dialogs.prepareImport.show = false;
+					this.$puiEvents.$emit(`onPui-action-running-ended-${this.modelName}`);
+				},
+				params
+			);
+
+			this.resetFilePicked();
+		},
+		afterPrepareImport() {
+			this.dialogs.import.headers = [];
+			this.dialogs.import.data = [];
+
+			this.dialogs.prepareImport.data.columns.forEach((colObj, index) => {
+				const title = this.dialogs.prepareImport.data.columnTitles[index];
+				this.dialogs.import.headers.push({
+					text: title,
+					value: colObj
+				});
+			});
+			for (const pk in this.dialogs.prepareImport.data.records) {
+				if (Object.prototype.hasOwnProperty.call(this.dialogs.prepareImport.data.records, pk)) {
+					const record = this.dialogs.prepareImport.data.records[pk];
+					const item = { record_status: record.status };
+
+					this.dialogs.prepareImport.data.columns.forEach((colObj) => {
+						const attribute = record.attributes[colObj];
+						item[colObj] = attribute.value;
+						item[`${colObj}_oldValue`] = attribute.oldValue;
+						item[`${colObj}_status`] = attribute.status;
+					});
+
+					this.dialogs.import.data.push(item);
+				}
+			}
+			this.dialogs.import.dataFiltered = [...this.dialogs.import.data];
+
+			this.dialogs.import.disableOk =
+				this.dialogs.prepareImport.data.errorRecords > 0 ||
+				this.dialogs.prepareImport.data.newWithErrorsRecords > 0 ||
+				(this.dialogs.prepareImport.data.newRecords === 0 && this.dialogs.prepareImport.data.modifiedRecords === 0);
+			this.dialogs.import.dataSetted = true;
+		},
+		doImport(importUrlController) {
+			this.$store.commit('showPuiLoader', this.$t('puidatatables.uploading'));
+
+			const params = { id: this.dialogs.prepareImport.data.id };
+			this.$puiRequests.getRequest(
+				importUrlController,
+				params,
+				() => {
+					if (importUrlController === this.dialogs.import.performImportUrlController) {
+						this.$puiNotify.success(this.$t('puidatatables.import_success'));
+					}
+					this.dialogs.import.show = false;
+					this.dialogs.beforeImport.show = false;
+					this.$store.commit('hidePuiLoader');
+					this.$puiEvents.$emit(`onPui-action-running-ended-${this.modelName}`);
+				},
+				(error) => {
+					this.$store.dispatch('puiRequestShowServerError', { error });
+					this.dialogs.import.show = false;
+					this.dialogs.beforeImport.show = false;
+					this.$store.commit('hidePuiLoader');
+					this.$puiEvents.$emit(`onPui-action-running-ended-${this.modelName}`);
+				}
+			);
+		},
+		showInDatatable(newStatus) {
+			if (this.dialogs.import.dataSetted) {
+				this.dialogs.import.dataSetted = false;
+				this.dialogs.import.statusToFilter = this.dialogs.import.statusToFilter === newStatus ? 'ALL' : newStatus;
+				setTimeout(() => {
+					this.dialogs.import.dataSetted = true;
+				}, 10);
+			}
+		},
+		getRowClass(item) {
+			if (item.record_status === 'NEW') {
+				return 'import_new';
+			} else if (item.record_status === 'NEW_ERROR') {
+				return 'import_new_error';
+			} else if (item.record_status === 'ERROR') {
+				return 'import_error';
+			} else if (item.record_status === 'MODIFIED') {
+				return 'import_modified';
+			}
+		},
+		getItemValidProps(item) {
+			const newItem = {};
+			for (let property in item) {
+				if (!property.includes('_oldValue') && !property.includes('_status')) {
+					newItem[property] = item[property];
+				}
+			}
+			return newItem;
+		}
+	}
+};
+</script>
+
+<style>
+.import_total {
+	background-color: rgb(185, 185, 185) !important;
+	border-color: rgb(185, 185, 185);
+}
+.import_new {
+	background-color: lightblue !important;
+	border-color: lightblue;
+}
+.import_new_error {
+	background-color: lightsalmon !important;
+	border-color: lightsalmon;
+}
+.import_modified {
+	background-color: lightgreen !important;
+	border-color: lightgreen;
+}
+.import_error {
+	background-color: lightcoral !important;
+	border-color: lightcoral;
+}
+.active-chip {
+	font-weight: bold;
+}
+</style>

package/src/components/desktop/toolbar/export/PuiGridExportBtn.vue

@@ -0,0 +1,175 @@
+<template>
+	<div class="pui-toolbar__multiBtn" :class="compClass" style="margin-right: 10px">
+		<div ref="btn">
+			<v-btn
+				class="elevation-0 pui-toolbar__btn pui-toolbar__superMiniBtn"
+				@click.native.stop="states.active = !states.active"
+				:class="compClass"
+			>
+				<v-icon class="pr-3" small>fa fa-file-export</v-icon>
+				<v-icon v-if="!states.active" small>fa fa-angle-down</v-icon>
+				<v-icon v-else small>fa fa-angle-up</v-icon>
+			</v-btn>
+		</div>
+		<div v-show="states.active" class="pui-dialog--export elevation-5 pl-0 pr-0" :ref="'dialog'" @click.stop>
+			<v-layout wrap class="mb-1">
+				<v-list>
+					<v-list-item
+						v-for="format in formats"
+						:key="format.extension"
+						@click="exportData(format)"
+						tabindex="0"
+						@keydown.native.enter="exportData(format)"
+					>
+						<v-list-item-action>
+							<v-icon style="font-size: 16px">{{ `fa fa-${format.icon}` }}</v-icon>
+						</v-list-item-action>
+
+						<v-list-item-content>
+							<v-list-item-title v-text="`${$t('puidatatables.export_to')} ${format.name}`"></v-list-item-title>
+						</v-list-item-content>
+					</v-list-item>
+				</v-list>
+			</v-layout>
+		</div>
+	</div>
+</template>
+
+<script>
+import PuiToolbarBtnMixin from '../../../../mixins/PuiToolbarBtnMixin';
+
+export default {
+	name: 'PuiGridExportBtn',
+	mixins: [PuiToolbarBtnMixin],
+	props: {
+		modelName: {
+			type: String
+		}
+	},
+	data() {
+		return {
+			idTool: 'export',
+			panel: {
+				position: {}
+			},
+			formats: {
+				pdf: {
+					name: 'PDF',
+					type: 'direct',
+					extension: '.pdf',
+					icon: 'file-pdf'
+				},
+				csv: {
+					name: 'CSV',
+					type: 'direct',
+					extension: '.csv',
+					icon: 'file-csv'
+				},
+				excel: {
+					name: 'Excel',
+					type: 'direct',
+					extension: '.xls',
+					icon: 'file-excel'
+				}
+			}
+		};
+	},
+	mounted() {
+		this.calculateDialogPosition();
+	},
+	methods: {
+		exportData(format) {
+			this.$store.state.global.puiloader.message = this.$t('puidatatables.downloading');
+			this.$store.state.global.puiloader.show = true;
+
+			const currentConfiguration = this.$store.getters.getCurrentGridConfiguration(this.modelName);
+			const currentColumns = currentConfiguration.configuration.columns
+				.filter((column) => {
+					return column.visible === undefined || column.visible === true || column.visibility === 'visible';
+				})
+				.map((column, index) => {
+					let dateformat = this.$store.getters.javaDateFormat;
+					if (
+						!(
+							this.$parent.$parent.modelColumnDefs &&
+							this.$parent.$parent.modelColumnDefs[column.name] &&
+							this.$parent.$parent.modelColumnDefs[column.name].withoutHours
+						)
+					) {
+						dateformat += ' ' + this.$store.getters.timeFormat;
+					}
+					return {
+						order: index,
+						title: this.$t(column.title),
+						name: column.name,
+						dateformat: dateformat
+					};
+				});
+			const currentFilter = this.$parent.$parent.getCurrentFilter();
+			const currentOrder = this.$parent.$parent.getCurrentSorting();
+			const currentSearch = this.$parent.$parent.getCurrentSearch();
+			let queryText = '';
+			let queryFields = [];
+			if (currentSearch !== undefined && currentSearch !== null) {
+				queryText = currentSearch[0];
+				queryFields = currentSearch[1].map((field) => {
+					return field.name;
+				});
+			}
+
+			this.$puiRequests.downloadFileRequest(
+				'post',
+				`/${this.modelName}/export`,
+				{
+					model: this.modelName,
+					exportTitle: this.$t('menu.' + this.modelName),
+					exportType: format.name.toLowerCase(),
+					exportColumns: currentColumns,
+					filter: currentFilter,
+					order: currentOrder,
+					queryText: queryText,
+					queryFields: queryFields,
+					queryFlexible: false,
+					queryLang: this.$store.getters.getUserLanguage
+				},
+				(response) => {
+					if (response.data && response.headers) {
+						const link = document.createElement('a');
+						link.href = window.URL.createObjectURL(new window.Blob([response.data]));
+						link.download = this.$puiUtils.getFilenameFromHeaders(response.headers);
+						link.click();
+					} else {
+						console.log('PuiGridExportBtn - No response data');
+						this.$puiNotify.error(this.$t('pui9.error.puigridexportbtn'));
+					}
+					this.$store.state.global.puiloader.message = null;
+					this.$store.state.global.puiloader.show = false;
+				},
+				(error) => {
+					console.log(error);
+					this.$puiNotify.error(this.$t('pui9.error.puigridexportbtn'));
+					this.$store.state.global.puiloader.message = null;
+					this.$store.state.global.puiloader.show = false;
+				}
+			);
+		}
+	}
+};
+</script>
+
+<style lang="postcss">
+.pui-dialog--export {
+	border-radius: 5px;
+	line-height: 22px;
+	position: absolute;
+	z-index: 999;
+	background: white !important;
+	& .v-list__tile {
+		height: 35px !important;
+		font-size: 0.75rem;
+	}
+	& .v-list__tile__action {
+		min-width: 30px !important;
+	}
+}
+</style>