pui9-docgen 1.16.4

package/src/components/puidocgen/PuiDocgenTemplateMapping.vue

@@ -0,0 +1,235 @@
+<template>
+	<pui-field-set :title="title">
+		<h4 class="puidocgentemplate-subtitle">{{ subtitle }}</h4>
+		<div class="d-flex justify-space-around pa-4">
+			<v-btn color="primary" @click="doAutoMapping()">{{ $t('puidocgentemplatemapping.mappingAuto') }}</v-btn>
+			<v-btn v-if="!isCreatingElement" class="px-2" color="primary" @click="reloadDocGenTemplateConfig()">
+				<v-icon class="px-1">far fa-file-search</v-icon>
+				<v-icon class="px-1">fas fa-sync-alt</v-icon>
+				<v-icon class="px-1">fal fa-table</v-icon>
+			</v-btn>
+		</div>
+		<table class="puidocgentemplate-table" v-if="mappings.length > 0">
+			<thead>
+				<tr>
+					<th class="puidocgentemplate-table-column">{{ $t('puidocgentemplatemapping.tag') }}</th>
+					<th class="puidocgentemplate-table-column">{{ $t('puidocgentemplatemapping.origin') }}</th>
+					<th class="puidocgentemplate-table-column">{{ $t('puidocgentemplatemapping.field') }}</th>
+				</tr>
+				<tr>
+					<th>
+						<hr />
+					</th>
+					<th>
+						<hr />
+					</th>
+					<th>
+						<hr />
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="item in mappings" :key="item.tag">
+					<td class="puidocgentemplate-table-column">
+						<label>{{ item.tag }}</label>
+					</td>
+					<td>
+						<v-autocomplete
+							class="pl-2 pr-2"
+							append-icon="fa fa-angle-down"
+							solo
+							flat
+							hide-details
+							:rules="getRules()"
+							:items="originItems"
+							item-value="id"
+							item-text="name"
+							v-model="item.origin"
+							:disabled="disabled"
+						>
+						</v-autocomplete>
+					</td>
+					<td>
+						<v-autocomplete
+							v-if="item.origin === 'V'"
+							class="pr-2"
+							append-icon="fa fa-angle-down"
+							solo
+							flat
+							hide-details
+							:rules="getRules()"
+							:items="columns"
+							item-value="name"
+							item-text="title"
+							v-model="item.field"
+							:disabled="disabled"
+						>
+							<template v-slot:append-outer>
+								<v-icon size="6" style="top: -10px; left: -5px" color="red">fas fa-asterisk</v-icon>
+							</template>
+						</v-autocomplete>
+						<v-autocomplete
+							v-else-if="item.origin === 'S'"
+							class="pr-2"
+							append-icon="fa fa-angle-down"
+							solo
+							flat
+							hide-details
+							:rules="getRules()"
+							:items="systemFields"
+							v-model="item.field"
+							:disabled="disabled"
+						>
+							<template v-slot:append-outer>
+								<v-icon size="6" style="top: -10px; left: -5px" color="red">fas fa-asterisk</v-icon>
+							</template>
+						</v-autocomplete>
+						<v-autocomplete
+							v-else-if="item.origin === 'T'"
+							class="pr-2"
+							append-icon="fa fa-angle-down"
+							solo
+							flat
+							hide-details
+							:rules="getRules()"
+							:items="tableFields"
+							item-value="id"
+							item-text="label"
+							v-model="item.field"
+							:disabled="disabled"
+						>
+							<template v-slot:append-outer>
+								<v-icon size="6" style="top: -10px; left: -5px" color="red">fas fa-asterisk</v-icon>
+							</template>
+						</v-autocomplete>
+						<v-text-field
+							v-else
+							class="pr-2 inputFilterText"
+							type="text"
+							solo
+							flat
+							outlined
+							hide-details
+							:rules="getRules()"
+							v-model="item.field"
+							:disabled="disabled"
+						>
+							<template v-slot:append-outer>
+								<v-icon size="6" style="top: -10px; left: -5px" color="red">fas fa-asterisk</v-icon>
+							</template>
+						</v-text-field>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</pui-field-set>
+</template>
+
+<script>
+export default {
+	name: 'PuiDocgenTemplateMapping',
+	data() {
+		return {
+			originItems: [
+				{ id: 'V', name: this.getOriginName('puidocgentemplatemapping.origin.view') },
+				{ id: 'S', name: this.getOriginName('puidocgentemplatemapping.origin.system') },
+				{ id: 'T', name: this.getOriginName('puidocgentemplatemapping.origin.table') },
+				{ id: 'U', name: this.getOriginName('puidocgentemplatemapping.origin.user') }
+			]
+		};
+	},
+	props: {
+		templateid: {
+			type: Number
+		},
+		title: {
+			type: String,
+			required: true
+		},
+		subtitle: {
+			type: String,
+			required: true
+		},
+		systemFields: {
+			type: Array,
+			required: true
+		},
+		tableFields: {
+			type: Array,
+			required: true
+		},
+		mappings: {
+			type: Array,
+			required: true
+		},
+		columns: {
+			type: Array,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: true
+		},
+		isCreatingElement: {
+			type: Boolean,
+			required: true
+		},
+		modelName: {
+			type: String,
+			required: true
+		}
+	},
+	methods: {
+		getRules() {
+			return [(value) => !!value || 'Required'];
+		},
+		getOriginName(originName) {
+			return this.$t(originName);
+		},
+		doAutoMapping() {
+			for (let i = 0, mappingLength = this.mappings.length; i < mappingLength; i++) {
+				if (this.mappings[i].origin !== 'V') {
+					continue;
+				}
+				for (let j = 0, columnsLength = this.columns.length; j < columnsLength; j++) {
+					if (this.mappings[i].tag.toLowerCase() === this.columns[j].name.toLowerCase()) {
+						this.mappings[i].field = this.columns[j].name;
+						break;
+					}
+				}
+			}
+		},
+		reloadDocGenTemplateConfig() {
+			this.refreshMapping();
+			this.$store.dispatch('reloadInfoModels');
+		},
+		refreshMapping() {
+			const modelDependency = this.$store.getters.getModelByName(this.modelName);
+			this.$puiRequests.postRequest(
+				modelDependency.url.getTemplateMappingFromId,
+				null,
+				(response) => {
+					if (response && response.data) {
+						const newMappings = response.data;
+						// remove not existent mappings
+						this.mappings.forEach((item, index, array) => {
+							var exist = newMappings.findIndex((mapping) => mapping.tag === item.tag) != -1;
+							if (!exist) array.splice(index, 1);
+						});
+						// add new mappings
+						newMappings.forEach((item) => {
+							var exist = this.mappings.findIndex((mapping) => mapping.tag === item.tag) != -1;
+							if (!exist) this.mappings.push(item);
+						});
+					}
+				},
+				() => {
+					this.$puiNotify.error(this.$puiI18n.t('puiaction.notifyError'));
+				},
+				null,
+				{ id: this.templateid }
+			);
+		}
+	}
+};
+</script>

package/src/components/puidocgen/PuiDocgenTemplateMixin.vue

@@ -0,0 +1,159 @@
+<script>
+export default {
+	data() {
+		return {
+			filterOperators: {
+				common: [
+					{
+						text: 'equal',
+						value: 'eq'
+					},
+					{
+						text: 'notEqual',
+						value: 'ne'
+					},
+					{
+						text: 'isNotNull',
+						value: 'nn'
+					},
+					{
+						text: 'isNull',
+						value: 'nu'
+					},
+					{
+						text: 'in',
+						value: 'in'
+					},
+					{
+						text: 'notIn',
+						value: 'ni'
+					}
+				],
+				numeric: [
+					{
+						text: 'lessThan',
+						value: 'lt'
+					},
+					{
+						text: 'greaterEqualThan',
+						value: 'ge'
+					},
+					{
+						text: 'lessEqualThan',
+						value: 'le'
+					},
+					{
+						text: 'greaterThan',
+						value: 'gt'
+					},
+					{
+						text: 'between',
+						value: 'bt'
+					},
+					{
+						text: 'notBetween',
+						value: 'nbt'
+					}
+				],
+				text: [
+					{
+						text: 'contains',
+						value: 'cn'
+					},
+					{
+						text: 'notContains',
+						value: 'nc'
+					},
+					{
+						text: 'endsWith',
+						value: 'ew'
+					},
+					{
+						text: 'notEndsWith',
+						value: 'en'
+					},
+					{
+						text: 'beginsWith',
+						value: 'bw'
+					},
+					{
+						text: 'notBeginsWith',
+						value: 'bn'
+					}
+				],
+				date: [], //son igual que los numericos, solo que tendran un datetime picker en el input,
+				datetime: [
+					{
+						text: 'equalToday',
+						value: 'eqt'
+					},
+					{
+						text: 'notEqualToday',
+						value: 'net'
+					},
+					{
+						text: 'lessThanToday',
+						value: 'ltt'
+					},
+					{
+						text: 'greaterThanToday',
+						value: 'gtt'
+					},
+					{
+						text: 'lessEqualThanToday',
+						value: 'let'
+					},
+					{
+						text: 'greaterEqualThanToday',
+						value: 'get'
+					}
+				], //idem
+				decimal: [] //idem
+			}
+		};
+	},
+	props: {
+		columns: {
+			type: Array,
+			required: true
+		}
+	},
+	created() {
+		this.translateFilterOperators();
+		this.addCommonAndDecimalAndDateFilterOperators();
+	},
+	methods: {
+		getRules() {
+			return [(value) => !!value || 'Required'];
+		},
+		translateFilterOperators() {
+			for (const colType in this.filterOperators) {
+				for (let i = 0, length = this.filterOperators[colType].length; i < length; i++) {
+					this.filterOperators[colType][i].text = this.$t(this.filterOperators[colType][i].text);
+				}
+			}
+		},
+		addCommonAndDecimalAndDateFilterOperators() {
+			const commonKey = 'common';
+			for (const colType in this.filterOperators) {
+				if (colType === commonKey) {
+					continue;
+				} else if (colType === 'decimal') {
+					this.filterOperators[colType] = this.filterOperators.numeric;
+				} else if (colType === 'date' || colType === 'datetime') {
+					this.filterOperators[colType] = this.filterOperators[colType].concat(this.filterOperators.numeric);
+				}
+				this.filterOperators[colType] = this.filterOperators[colType].concat(this.filterOperators[commonKey]);
+			}
+		},
+		getColumnType(columnName) {
+			for (let i = 0, columnsLength = this.columns.length; i < columnsLength; i++) {
+				if (this.columns[i].name === columnName) {
+					return this.columns[i].type;
+				}
+			}
+			return null;
+		}
+	}
+};
+</script>

package/src/components/puidocgen/PuiDocgenTemplateModals.vue

@@ -0,0 +1,112 @@
+<template>
+	<div>
+		<pui-modal-dialog-form
+			:titleText="$t('puiaction.docgen.uploadnewtemplate')"
+			:modelName="modelName"
+			:dialogName="dialogNameUploadNewTemplate"
+			:widthDialog="800"
+			:onOk="onOkUploadNewTemplate"
+		>
+			<template slot="message">
+				<v-layout wrap class="justify-center">
+					<v-flex xs12 md8 xl9>
+						<pui-text-field :label="$t('puidocgentemplate.filename')" v-model="fileName" toplabel required disabled></pui-text-field>
+						<input v-show="false" type="file" accept=".doc, .docx, .odt" ref="document" @change="onFilePicked" />
+					</v-flex>
+					<v-flex xs12 md4 xl3>
+						<v-btn color="primary" @click="pickFile" style="margin-top: 20px">{{ $t('puidocgentemplate.selectfile') }}</v-btn>
+					</v-flex>
+				</v-layout>
+			</template>
+		</pui-modal-dialog-form>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			dialogNameUploadNewTemplate: 'uploadNewTemplate',
+			fileTypes: {
+				'application/msword': 'fas fa-file-word',
+				'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'fas fa-file-word',
+				'application/vnd.oasis.opendocument.text': 'fas fa-file-word'
+			},
+			fileName: null,
+			selectedFile: null,
+			selectedFileType: null
+		};
+	},
+	props: {
+		modelName: {
+			required: true,
+			type: String
+		}
+	},
+	methods: {
+		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) {
+					return;
+				}
+
+				this.fileName = file.name;
+				const fr = new window.FileReader();
+				fr.addEventListener('load', () => {
+					this.selectedFile = file; // this is the file that can be sent to server...
+					this.selectedFileType = this.fileTypes[file.type];
+				});
+				fr.readAsDataURL(file);
+			} else {
+				this.fileName = null;
+				this.selectedFile = null;
+				this.selectedFileType = null;
+			}
+		},
+		onOkUploadNewTemplate(modalData) {
+			const formData = new window.FormData();
+			formData.append('id', modalData.id);
+			formData.append('file', this.selectedFile, this.selectedFile.name);
+			formData.append('filename', this.selectedFile.name);
+
+			const urlController = this.$store.getters.getModelByName(this.modelName).url.uploadTemplate;
+			const title = this.$puiI18n.t('puiaction.notifyTitle') + ' > ' + this.$puiI18n.t('puiaction.docgen.uploadnewtemplate');
+			return new Promise((resolve) => {
+				this.$puiRequests.uploadFileRequest(
+					urlController,
+					formData,
+					(response) => {
+						if (response.status === 200) {
+							this.$puiEvents.$emit('onPui-action-running-ended-' + this.modelName);
+							const message = this.$puiI18n.t('puiaction.notifySuccess');
+							this.$puiNotify.success(message, title);
+							resolve(true);
+						} else {
+							let message = this.$puiI18n.t('puiaction.notifyError');
+							if (response.data) {
+								message = response.data.message;
+							}
+							this.$puiNotify.error(message, title);
+							resolve(false);
+						}
+					},
+					(error) => {
+						this.$puiEvents.$emit('onPui-action-running-ended-' + this.modelName);
+						let message = this.$puiI18n.t('puiaction.notifyError');
+						if (error.response && error.response.data) {
+							message = error.response.data.message;
+						}
+						this.$puiNotify.error(message, title);
+						resolve(false);
+					}
+				);
+			});
+		}
+	}
+};
+</script>

package/src/components/puidocgen/PuiDocgenTemplateParameter.vue

@@ -0,0 +1,104 @@
+<template>
+	<pui-field-set :title="title">
+		<h4 class="puidocgentemplate-subtitle">{{ subtitle }}</h4>
+		<table class="puidocgentemplate-table" v-if="Array.isArray(parameters) && columns.length > 0">
+			<thead>
+				<tr>
+					<th class="puidocgentemplate-table-column">{{ $t('puidocgentemplateparameter.column') }}</th>
+					<th class="puidocgentemplate-table-column">{{ $t('puidocgentemplateparameter.operation') }}</th>
+				</tr>
+				<tr>
+					<th>
+						<hr />
+					</th>
+					<th>
+						<hr />
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="(parameter, index) in parameters" :key="parameter.field">
+					<td>
+						<v-select
+							class="pr-2"
+							append-icon="fa fa-angle-down"
+							solo
+							flat
+							hide-details
+							required
+							:rules="getRules()"
+							:items="columns"
+							item-value="name"
+							item-text="title"
+							v-model="parameter.field"
+							:disabled="disabled"
+						></v-select>
+					</td>
+					<td>
+						<v-select
+							class="pl-2 pr-2"
+							append-icon="fa fa-angle-down"
+							solo
+							flat
+							hide-details
+							required
+							:rules="getRules()"
+							:items="filterOperators[getColumnType(parameter.field)]"
+							item-value="value"
+							item-text="text"
+							v-model="parameter.op"
+							:disabled="disabled"
+						></v-select>
+					</td>
+					<td>
+						<v-btn color="primary" @click="removeParameter(index)">{{ $t('puidocgentemplateparameter.remove') }}</v-btn>
+					</td>
+				</tr>
+				<tr>
+					<td colspan="2"></td>
+					<td>
+						<v-btn color="primary" @click="addParameter">{{ $t('puidocgentemplateparameter.add') }}</v-btn>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</pui-field-set>
+</template>
+
+<script>
+import PuiDocgenTemplateMixin from './PuiDocgenTemplateMixin';
+
+export default {
+	name: 'PuiDocgenTemplateParameter',
+	mixins: [PuiDocgenTemplateMixin],
+	data() {
+		return {};
+	},
+	props: {
+		title: {
+			type: String,
+			required: true
+		},
+		subtitle: {
+			type: String,
+			required: true
+		},
+		parameters: {
+			type: [String, Array],
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: true
+		}
+	},
+	methods: {
+		addParameter() {
+			this.parameters.push({ field: null, op: null });
+		},
+		removeParameter(index) {
+			this.parameters.splice(index, 1);
+		}
+	}
+};
+</script>

package/src/index.js

@@ -0,0 +1,15 @@
+import PuiDocgenTemplateForm from './components/puidocgen/PuiDocgenTemplateForm';
+import PuiDocgenTemplateGrid from './components/puidocgen/PuiDocgenTemplateGrid';
+
+const Components = {
+	PuiDocgenTemplateForm,
+	PuiDocgenTemplateGrid
+};
+
+export default {
+	install(Vue) {
+		Object.keys(Components).forEach(name => {
+			Vue.component(name, Components[name]);
+		});
+	}
+};