pui9-datatables 1.16.4

package/src/components/desktop/toolbar/actions/docgen/PuiDocgenTemplateParametersDialog.vue

@@ -0,0 +1,317 @@
+<template>
+	<pui-modal-dialog-form
+		:overflow="false"
+		:titleText="$t('puidocgentemplate.generate.titleConfigDocGen')"
+		:modelName="modelName"
+		:dialogName="dialogNamePuiDocgenTemplateParameters"
+		v-model="dialogData"
+		:widthDialog="800"
+		:onOk="onOkGenerate"
+		:onShow="onShowGenerate"
+		:onCancel="onCancel"
+	>
+		<template slot="message">
+			<v-layout wrap class="pui-form-layout">
+				<v-flex xs12>
+					<pui-field-set
+						:title="$t('puidocgentemplate.generate.fieldset.parameters')"
+						v-if="model.parameters && model.parameters.length > 0"
+					>
+						<table class="puidocgentemplate-table">
+							<thead>
+								<tr>
+									<th class="docgen-table-column">{{ $t('puidocgentemplate.generate.parameter.name') }}</th>
+									<th class="docgen-table-column">{{ $t('puidocgentemplate.generate.parameter.operation') }}</th>
+									<th class="docgen-table-column">{{ $t('puidocgentemplate.generate.parameter.value') }}</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr v-for="parameter in model.parameters" :key="parameter.field">
+									<td class="puidocgentemplate-table-column">
+										<label>{{ parameter.field }}</label>
+									</td>
+									<td class="puidocgentemplate-table-column">
+										<label>{{ $t(`puidocgentemplate.ops.${parameter.op}`) }}</label>
+									</td>
+									<td class="puidocgentemplate-table-column">
+										<v-text-field
+											class="pr-2 inputFilterText"
+											type="text"
+											solo
+											flat
+											outlined
+											hide-details
+											required
+											:rules="getRules()"
+											v-model="parameter.data"
+										></v-text-field>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</pui-field-set>
+					<pui-field-set :title="$t('puidocgentemplate.generate.fieldset.mapping')" v-if="model.mappings && model.mappings.length > 0">
+						<table class="puidocgentemplate-table">
+							<thead>
+								<tr>
+									<th class="docgen-table-column">{{ $t('puidocgentemplate.generate.mapping.name') }}</th>
+									<th class="docgen-table-column">{{ $t('puidocgentemplate.generate.mapping.value') }}</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr v-for="mapping in model.mappings" :key="mapping.field">
+									<td class="puidocgentemplate-table-column">
+										<label>{{ mapping.field }}</label>
+									</td>
+									<td class="puidocgentemplate-table-column">
+										<v-text-field
+											class="pr-2 inputFilterText"
+											type="text"
+											solo
+											flat
+											outlined
+											hide-details
+											required
+											:rules="getRules()"
+											v-model="mapping.val"
+										></v-text-field>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</pui-field-set>
+					<pui-checkbox v-if="!hideGeneratePdf" :label="$t('puidocgentemplate.generate.topdf')" v-model="model.generatePdf"></pui-checkbox>
+				</v-flex>
+			</v-layout>
+		</template>
+	</pui-modal-dialog-form>
+</template>
+
+<script>
+export default {
+	name: 'PuiDocgenTemplateParametersDialog',
+	data() {
+		return {
+			modelName: 'puidocgentemplate',
+			model: {},
+			dialogData: {},
+			dialogNamePuiDocgenTemplateParameters: 'puiDocgenTemplateParameters',
+			defaultFilter: null,
+			hideGeneratePdf: undefined
+		};
+	},
+	props: {
+		parentModelName: {
+			type: String,
+			default: ''
+		}
+	},
+	watch: {
+		dialogData: {
+			handler(newValue) {
+				if (Object.keys(newValue).length > 0) {
+					if (newValue.isAction && newValue.model && newValue.registry) {
+						this.getToGenerate(newValue);
+					}
+				}
+			},
+			deep: true
+		}
+	},
+	methods: {
+		getRules() {
+			return [(value) => !!value || 'Required'];
+		},
+		getToGenerate(data) {
+			this.docgenModel = data.model;
+			this.docgenRegistries = data.registries;
+			this.docgenParameters = data.parameters;
+			const params = { id: data.registry.id };
+
+			this.$puiRequests.getRequest(
+				this.docgenModel.url.getToGenerate,
+				params,
+				(response) => {
+					this.$set(this.model, 'id', response.data.id);
+					this.$set(this.model, 'mainmodel', response.data.mainmodel);
+					this.$set(this.model, 'parameters', JSON.parse(response.data.parameters));
+					this.$set(this.model, 'gridFilter', JSON.parse(response.data.filter));
+					this.$set(this.model, 'generatePdf', false);
+					this.$set(this.model, 'mappings', []);
+
+					const mapping = JSON.parse(response.data.mapping);
+					for (let i = 0, mappingLength = mapping.length; i < mappingLength; i++) {
+						const mapp = mapping[i];
+						if (mapp.origin === 'U') {
+							this.model.mappings.push({
+								field: mapp.field,
+								val: null
+							});
+						}
+					}
+					for (const storeModelName in this.$store.state.models) {
+						const storeModel = this.$store.state.models[storeModelName];
+						if (response.data.dataview === storeModel.entity) {
+							this.$set(this.model, 'modelName', storeModel.name);
+							break;
+						}
+					}
+					if (!this.requireConfiguration(this.model)) {
+						this.onOkGenerate();
+					}
+				},
+				(error) => {
+					const title = this.$puiI18n.t('puiaction.notifyTitle') + ' > ' + this.$t('puiaction.docgen.generate');
+					let message = this.$puiI18n.t('puiaction.notifyError');
+					if (error.response && error.response.data) {
+						message = error.response.data.message;
+					}
+					this.$puiEvents.$emit(`onPui-action-running-ended-${this.modelName}`);
+					// If is called directly from an action
+					if (data.parentModel) this.$puiEvents.$emit(`onPui-action-running-ended-${data.parentModel}`);
+					this.$puiNotify.error(message, title);
+				}
+			);
+		},
+		requireConfiguration(model) {
+			return (
+				(model.mappings && model.mappings.length > 0) ||
+				(model.parameters && model.parameters.length > 0) ||
+				this.hideGeneratePdf === undefined
+			);
+		},
+		onOkGenerate() {
+			this.$store.commit('showPuiLoader', this.$t('puidocgentemplate.generate.processing'));
+
+			const params = this.getParameters();
+			return new Promise((resolve) => {
+				this.$puiRequests.downloadFileRequest(
+					'post',
+					this.docgenModel.url.generate,
+					params,
+					(response) => {
+						const link = document.createElement('a');
+						link.href = window.URL.createObjectURL(new window.Blob([response.data]));
+						link.download = this.$puiUtils.getFilenameFromHeaders(response.headers);
+						link.click();
+
+						this.$store.commit('hidePuiLoader');
+						this.endAction();
+						resolve(true);
+					},
+					(error) => {
+						const title = this.$puiI18n.t('puiaction.notifyTitle') + ' > ' + this.$t('puiaction.docgen.generate');
+						let message = this.$puiI18n.t('puiaction.notifyError');
+						if (error.response && error.response.data) {
+							message = error.response.data.message;
+						}
+						this.$store.commit('hidePuiLoader');
+						this.endAction();
+						this.$puiNotify.error(message, title);
+						resolve(true);
+					}
+				);
+			});
+		},
+		onCancel() {
+			this.endAction();
+			return Promise.resolve(true);
+		},
+		onShowGenerate(modalData) {
+			if (modalData.default && (modalData.default.filter || modalData.default.generatePdf)) {
+				if (modalData.default.filter) this.defaultFilter = modalData.default.filter;
+				if (modalData.default.generatePdf) {
+					this.hideGeneratePdf = true;
+				}
+			}
+		},
+		getParameters() {
+			const params = {
+				pk: { id: this.model.id },
+				model: this.model.mainmodel,
+				mappings: this.model.mappings,
+				parameters: this.model.parameters,
+				generatePdf: this.hideGeneratePdf || this.model.generatePdf,
+				filter: { groupOp: 'or', groups: [], rules: [] }
+			};
+
+			if (this.docgenRegistries && this.docgenRegistries.length > 0) {
+				params.filter = this.createFilter();
+				if (this.defaultFilter) {
+					params.filter.groups.push(this.defaultFilter);
+				}
+			} else if (this.docgenParameters) {
+				for (const prop in this.docgenParameters) {
+					if (!Object.prototype.hasOwnProperty.call(this.docgenParameters, prop)) {
+						continue;
+					}
+					params[prop] = this.docgenParameters[prop];
+				}
+				/*
+				const currentSearch = this.$parent.$parent.$parent.getCurrentSearch();
+				let queryText = '';
+				let queryFields = [];
+				if (currentSearch !== undefined && currentSearch !== null) {
+					queryText = currentSearch[0];
+					queryFields = currentSearch[1].map(field => {
+						return field.name;
+					});
+				}
+				params.filter = this.$parent.$parent.$parent.getCurrentFilter();
+				params.order = this.$parent.$parent.$parent.getCurrentSorting();
+				params.queryText = queryText;
+				params.queryFields = queryFields;
+				params.queryLang = this.$store.getters.getUserLanguage;
+				*/
+			}
+			return params;
+		},
+		createFilter() {
+			const filter = {
+				groupOp: 'or',
+				groups: [],
+				rules: []
+			};
+
+			for (let i = 0, registriesLength = this.docgenRegistries.length; i < registriesLength; i++) {
+				const group = {
+					groupOp: 'and',
+					groups: [],
+					rules: []
+				};
+
+				filter.groups.push(group);
+				const registry = this.docgenRegistries[i];
+
+				for (const property in registry) {
+					group.rules.push({ field: property, op: 'eq', data: registry[property] });
+				}
+			}
+
+			return filter;
+		},
+		endAction() {
+			// No entiendo porque se finaliza this.modelName y no el modelo de donde viene (El Grid), lo mantengo por si las moscas y añado el modelo del grid
+			this.$puiEvents.$emit(`onPui-action-running-ended-${this.modelName}`);
+			this.$puiEvents.$emit(`onPui-action-running-ended-${this.parentModelName}`);
+			this.model = {};
+			this.hideGeneratePdf = undefined;
+		}
+	}
+};
+</script>
+
+<style lang="postcss">
+.puidocgentemplate-table {
+	margin: 0px auto;
+	th.docgen-table-column {
+		padding-left: 2px;
+		padding-right: 2px;
+	}
+}
+.puidocgentemplate-table-column {
+	text-align: center;
+	padding-left: 2px;
+	padding-right: 2px;
+}
+</style>

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

@@ -0,0 +1,187 @@
+<template>
+	<v-dialog persistent v-model="showDialog" max-width="700px">
+		<v-card flat style="border-radius: 6px">
+			<v-card-title>
+				<div class="puiDialog__title pl-2">{{ $t('puidatatables.select_columns_to_export') }}</div>
+			</v-card-title>
+			<v-card-text>
+				<pui-multi-select
+					v-if="showDialog"
+					:items="columns"
+					:trackItemsToSelect="true"
+					:itemsToSelect="visibleColumns"
+					itemValue="name"
+					itemText="title"
+					:textSelected="this.$t('puidatatables.selected_columns')"
+					:textAvailable="this.$t('puidatatables.not_selected_columns')"
+					:heightList="columnPickerHeight"
+					v-model="selectedColumns"
+					:flat="true"
+				></pui-multi-select>
+				<v-layout v-if="showLanguages">
+					<v-flex xs12>
+						<label :class="{ 'v-label--required': true }">{{ $t('puidatatables.select_language') }}</label>
+					</v-flex>
+				</v-layout>
+				<v-layout v-if="showLanguages">
+					<v-flex xs12>
+						<v-autocomplete
+							:items="languages"
+							v-model="langModel.language"
+							item-value="isocode"
+							item-text="name"
+							solo
+							text
+							required
+							:rules="[(value) => !!value || $t('pui9.error.field_required')]"
+							:return-object="false"
+						/>
+					</v-flex>
+				</v-layout>
+			</v-card-text>
+			<v-card-actions class="pl-3 pr-3 pb-2">
+				<v-btn text outlined @click="cancelExport()" class="elevation-0">{{ $t('form.cancel') }}</v-btn>
+				<v-spacer />
+				<v-btn color="primary" @click="doExport()" class="elevation-0">{{ $t('form.apply') }}</v-btn>
+			</v-card-actions>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script>
+export default {
+	name: 'PuiGridExportDialog',
+	props: {
+		modelName: {
+			type: String,
+			required: true
+		},
+		importExportModelName: {
+			type: String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			exportableColumnsController: '/importexport/getExportableColumns',
+			exportController: '/importexport/export',
+			showDialog: false,
+			showLanguages: false,
+			columns: null,
+			visibleColumns: null,
+			selectedColumns: [],
+			languages: [],
+			langModel: {
+				language: this.$store.getters.getUserLanguage
+			}
+		};
+	},
+	computed: {
+		columnPickerHeight() {
+			return window.innerHeight > 600 ? 300 : 225;
+		}
+	},
+	created() {
+		this.$puiEvents.$on(`pui-show-exportDialog-${this.importExportModelName}`, () => {
+			//this.getExportableColumns();
+			this.showDialog = true;
+			this.selectedColumns = this.columns;
+		});
+
+		this.getLanguages();
+		this.getExportableColumns();
+	},
+	destroyed() {
+		this.$puiEvents.$off(`pui-show-exportDialog-${this.importExportModelName}`);
+	},
+	methods: {
+		getLanguages() {
+			this.$puiRequests.postRequest('/puilanguage/list', null, (response) => {
+				this.languages = response.data.data;
+			});
+		},
+		getExportableColumns() {
+			const params = { model: this.modelName };
+			this.$puiRequests.getRequest(
+				this.exportableColumnsController,
+				params,
+				(response) => {
+					const currentModel = this.$store.getters.getModelByName(this.modelName);
+					const modelColumns = [...currentModel.columns];
+					this.columns = response.data;
+					this.columns.forEach((column) => {
+						if (column.title === 'lang' || column.title === 'langstatus') {
+							column.title = this.$t(column.title);
+							this.showLanguages = true;
+							return;
+						}
+						for (let i = 0; i < modelColumns.length; i++) {
+							const modelColumn = modelColumns[i];
+							if (column.title === modelColumn.name) {
+								column.title = this.$t(modelColumn.title);
+								modelColumns.splice(i, 1);
+								return;
+							}
+						}
+					});
+					this.visibleColumns = [...this.columns];
+					this.selectedColumns = [...this.columns];
+				},
+				(error) => {
+					console.log(error);
+				}
+			);
+		},
+		cancelExport() {
+			this.$puiEvents.$emit(`onPui-action-running-ended-${this.modelName}`);
+			this.showDialog = false;
+		},
+		doExport() {
+			this.$store.commit('showPuiLoader', this.$t('puidatatables.downloading'));
+
+			const params = this.getParameters();
+			this.$puiRequests.downloadFileRequest(
+				'post',
+				this.exportController,
+				params,
+				(response) => {
+					const link = document.createElement('a');
+					link.href = window.URL.createObjectURL(new window.Blob([response.data]));
+					link.download = this.$puiUtils.getFilenameFromHeaders(response.headers);
+					link.click();
+
+					this.showDialog = false;
+					this.$store.commit('hidePuiLoader');
+				},
+				() => {
+					this.showDialog = false;
+					this.$store.commit('hidePuiLoader');
+				}
+			);
+
+			this.$puiEvents.$emit(`onPui-action-running-ended-${this.modelName}`);
+		},
+		getParameters() {
+			const currentSearch = this.$parent.$parent.$parent.getCurrentSearch();
+			let queryText = '';
+			let queryFields = [];
+			if (currentSearch !== undefined && currentSearch !== null) {
+				queryText = currentSearch[0];
+				queryFields = currentSearch[1].map((field) => {
+					return field.name;
+				});
+			}
+			const params = {
+				model: this.modelName,
+				exportColumns: this.selectedColumns,
+				filter: this.$parent.$parent.$parent.getCurrentFilter(),
+				order: this.$parent.$parent.$parent.getCurrentSorting(),
+				queryText: queryText,
+				queryFields: queryFields,
+				queryLang: this.langModel.language
+			};
+			return params;
+		}
+	}
+};
+</script>