pui9-docgen 1.16.4

package/src/components/puidocgen/PuiDocgenTemplateForm.vue

@@ -0,0 +1,517 @@
+<template>
+	<div class="pui-form">
+		<v-form class="mb-4 pb-4" ref="form" v-model="valid" lazy-validation v-if="modelLoaded">
+			<v-layout wrap class="pui-form-layout">
+				<v-flex xs12 lg5>
+					<pui-field-set :title="$t('puidocgentemplate.form.data')">
+						<v-layout wrap>
+							<v-flex xs12>
+								<pui-text-field
+									:label="this.$t('puidocgentemplate.name')"
+									v-model="model.name"
+									maxlength="100"
+									toplabel
+									required
+									:disabled="formDisabled"
+								></pui-text-field>
+							</v-flex>
+							<v-flex xs12>
+								<pui-text-area
+									:label="this.$t('puidocgentemplate.description')"
+									v-model="model.description"
+									maxlength="1000"
+									toplabel
+									:disabled="formDisabled"
+								></pui-text-area>
+							</v-flex>
+						</v-layout>
+					</pui-field-set>
+					<pui-field-set :title="$t('puidocgentemplate.form.viewAndTemplate')">
+						<v-layout wrap>
+							<v-flex xs12 md8 xl9>
+								<pui-text-field
+									:label="this.$t('puidocgentemplate.filename')"
+									v-model="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" v-if="isCreatingElement" @click="pickFile" style="margin-top: 20px">{{
+									$t('puidocgentemplate.selectfile')
+								}}</v-btn>
+							</v-flex>
+						</v-layout>
+						<v-layout wrap>
+							<v-flex xs12>
+								<pui-select
+									id="mainmodel"
+									attach="mainmodel"
+									:label="$t('puidocgentemplate.mainmodel')"
+									toplabel
+									required
+									clearable
+									:disabled="formDisabled || !isCreatingElement"
+									v-model="model"
+									modelName="puidocgenmodel"
+									:itemsToSelect="[{ model: model.mainmodel }]"
+									:modelFormMapping="{ model: 'mainmodel' }"
+									itemValue="model"
+									itemText="label"
+								></pui-select>
+							</v-flex>
+							<v-flex xs12>
+								<pui-select
+									v-if="model.mainmodel && columns.length > 0"
+									id="columnfilename"
+									attach="columnfilename"
+									:key="'columnfilename_' + columnfilenameKey"
+									:label="$t('puidocgentemplate.columnfilename')"
+									toplabel
+									clearable
+									:disabled="formDisabled"
+									v-model="model.columnfilename"
+									:items="columns"
+									:itemsToSelect="model.columnfilename"
+									itemValue="name"
+									itemText="name"
+									multiple
+								></pui-select>
+							</v-flex>
+							<v-flex xs12>
+								<pui-select
+									v-if="model.mainmodel && modelsByEntity.length > 0"
+									id="models"
+									attach="models"
+									:key="'models_' + modelsKey"
+									:label="$t('puidocgentemplate.models')"
+									toplabel
+									clearable
+									:disabled="formDisabled"
+									v-model="model.models"
+									:items="modelsByEntity"
+									:itemsToSelect="model.models"
+									itemValue="name"
+									itemText="name"
+									multiple
+								></pui-select>
+							</v-flex>
+						</v-layout>
+					</pui-field-set>
+				</v-flex>
+				<v-flex xs12 lg7>
+					<pui-docgen-template-mapping
+						ref="puidocgentemplatemapping"
+						:templateid="model.id"
+						:title="$t('puidocgentemplate.form.mapping')"
+						:subtitle="$t('puidocgentemplate.help.mapping')"
+						:systemFields="systemFields"
+						:tableFields="tableFields"
+						:mappings="model.mapping"
+						:columns="columns"
+						:disabled="formDisabled"
+						:isCreatingElement="isCreatingElement"
+						:modelName="modelName"
+					></pui-docgen-template-mapping>
+					<pui-docgen-template-filter
+						ref="puidocgentemplatefilter"
+						:title="$t('puidocgentemplate.form.filter')"
+						:subtitle="$t('puidocgentemplate.help.filter')"
+						:filter="model.filter"
+						:columns="columns"
+						:disabled="formDisabled"
+					></pui-docgen-template-filter>
+					<pui-docgen-template-parameter
+						ref="puidocgentemplateparameter"
+						:title="$t('puidocgentemplate.form.parameters')"
+						:subtitle="$t('puidocgentemplate.help.parameters')"
+						:columns="columns"
+						:parameters="model.parameters"
+						:disabled="formDisabled"
+					></pui-docgen-template-parameter>
+				</v-flex>
+			</v-layout>
+
+			<pui-form-footer>
+				<pui-form-footer-btns
+					:formDisabled="formDisabled"
+					:saveDisabled="saving"
+					:saveAndNew="saveAndNew"
+					:saveAndUpdate="saveAndUpdate"
+					:save="save"
+					:back="back"
+				></pui-form-footer-btns>
+			</pui-form-footer>
+		</v-form>
+		<pui-form-loading v-else></pui-form-loading>
+	</div>
+</template>
+
+<script>
+import PuiFormMethodsMixin from '../../../../pui9-mixins/PuiFormMethodsMixin';
+import PuiDocgenTemplateMapping from './PuiDocgenTemplateMapping';
+import PuiDocgenTemplateFilter from './PuiDocgenTemplateFilter';
+import PuiDocgenTemplateParameter from './PuiDocgenTemplateParameter';
+
+export default {
+	name: 'PuiDocgenTemplateForm',
+	mixins: [PuiFormMethodsMixin],
+	components: {
+		PuiDocgenTemplateMapping,
+		PuiDocgenTemplateFilter,
+		PuiDocgenTemplateParameter
+	},
+	data() {
+		return {
+			modelName: 'puidocgentemplate',
+			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'
+			},
+			modelsByEntity: [],
+			systemFields: [],
+			tableFields: [],
+			columns: [],
+			selectedFile: null,
+			selectedFileType: null,
+			columnfilenameKey: 0,
+			modelsKey: 0
+		};
+	},
+	mounted() {
+		this.$puiEvents.$on('puiModelsLoaded', () => {
+			if (this.model.mainmodel) {
+				const modelSelected = this.$store.state.models[this.model.mainmodel];
+				if (modelSelected) this.setColumns(modelSelected);
+			}
+		});
+		this.$puiEvents.$on('onPuiSelect_selectedItems-mainmodel', (newVal) => {
+			const lupaModel = newVal.model;
+			this.modelsByEntity = [];
+			this.columns = [];
+			if (lupaModel) {
+				for (const modelName in this.$store.state.models) {
+					const model = this.$store.state.models[modelName];
+
+					if (lupaModel.entity !== model.entity) {
+						continue;
+					}
+
+					if (this.model.models) {
+						this.model.models = this.model.models.filter((selectedModel) => {
+							return selectedModel.name === model.name;
+						});
+					} else {
+						this.model.models = [];
+					}
+
+					this.modelsByEntity.push({ name: model.name });
+
+					if (this.columns.length > 0) {
+						continue;
+					}
+
+					this.setColumns(model);
+
+					if (this.model.columnfilename) {
+						this.model.columnfilename = this.model.columnfilename.filter((col) => {
+							for (let i = 0, columnsLength = this.columns.length; i < columnsLength; i++) {
+								if (col.name === this.columns[i].name) {
+									return true;
+								}
+							}
+							return false;
+						});
+					} else {
+						this.model.columnfilename = [];
+					}
+				}
+			}
+			this.columnfilenameKey += 1;
+			this.modelsKey += 1;
+			if (this.isCreatingElement) {
+				this.getMappings();
+			}
+		});
+	},
+	beforeDestroy() {
+		this.$puiEvents.$off('onPuiSelect_selectedItems-mainmodel');
+		this.$puiEvents.$off('puiModelsLoaded');
+	},
+	methods: {
+		afterGetData() {
+			this.getSystemFields();
+			this.getTableFields();
+
+			if (this.model.mapping) {
+				const tempMapping = JSON.parse(this.model.mapping);
+				let tempTags = [];
+				this.model.mapping = [];
+				for (let i = 0, mappingLength = tempMapping.length; i < mappingLength; i++) {
+					// remove duplicates
+					if (tempTags.includes(tempMapping[i].tag)) {
+						continue;
+					}
+					tempTags.push(tempMapping[i].tag);
+					this.model.mapping.push(tempMapping[i]);
+				}
+			}
+			if (this.model.filter) {
+				this.model.filter = JSON.parse(this.model.filter);
+				if (this.model.filter === null) {
+					this.model.filter = { groupOp: 'and', groups: [], rules: [] };
+				}
+			}
+			if (this.model.parameters) {
+				this.model.parameters = JSON.parse(this.model.parameters);
+			}
+			if (this.model.models) {
+				this.model.models = this.convertModelNamesToModelObjects(this.model.models);
+			}
+			if (this.model.columnfilename) {
+				this.model.columnfilename = this.convertModelNamesToModelObjects(this.model.columnfilename);
+			}
+		},
+		convertModelNamesToModelObjects(modelnames) {
+			const models = JSON.parse(modelnames);
+			const modelobjects = [];
+			for (let i = 0; i < models.length; i++) {
+				modelobjects.push({ name: models[i] });
+			}
+			return modelobjects;
+		},
+		convertModelObjectsToModelNames(modelobjects) {
+			const modelnames = [];
+			for (let i = 0; i < modelobjects.length; i++) {
+				modelnames.push(modelobjects[i].name);
+			}
+			return JSON.stringify(modelnames);
+		},
+		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.model.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];
+					this.getMappings();
+				});
+				fr.readAsDataURL(file);
+			} else {
+				this.model.filename = null;
+				this.selectedFile = null;
+				this.selectedFileType = null;
+				this.getMappings();
+			}
+		},
+		getSystemFields() {
+			this.saving = true;
+			this.$puiRequests.getRequest(
+				this.modelDependency.url.getSystemFields,
+				null,
+				(response) => {
+					this.saving = false;
+					if (response && response.data) {
+						this.systemFields = response.data;
+					}
+				},
+				(error) => {
+					this.saving = false;
+					this.onSaveError && this.onSaveError();
+					this.onError(error);
+				}
+			);
+		},
+		getTableFields() {
+			const params = { model: 'puidocgenattribute' };
+			this.saving = true;
+			this.$puiRequests.postRequest(
+				'/puisearch',
+				params,
+				(response) => {
+					this.saving = false;
+					if (response && response.data && response.data.data) {
+						this.tableFields = response.data.data;
+					}
+				},
+				(error) => {
+					this.saving = false;
+					this.onSaveError && this.onSaveError();
+					this.onError(error);
+				}
+			);
+		},
+		getMappings() {
+			if (!this.model.mainmodel || !this.selectedFile) {
+				this.model.mapping = [];
+				return;
+			}
+
+			const formData = new window.FormData();
+			formData.append('file', this.selectedFile, this.selectedFile.name);
+
+			this.saving = true;
+			this.$puiRequests.postRequest(
+				this.modelDependency.url.getTemplateMapping,
+				formData,
+				(response) => {
+					this.saving = false;
+					if (response && response.data) {
+						let tempTags = [];
+						this.model.mapping = [];
+						for (let i = 0, mappingLength = response.data.length; i < mappingLength; i++) {
+							// remove duplicates
+							if (tempTags.includes(response.data[i].tag)) {
+								continue;
+							}
+							tempTags.push(response.data[i].tag);
+							this.model.mapping.push(response.data[i]);
+						}
+					}
+				},
+				(error) => {
+					this.saving = false;
+					this.onSaveError && this.onSaveError();
+					this.onError(error);
+				}
+			);
+		},
+		beforeSave() {
+			this.model.filter = this.$refs.puidocgentemplatefilter.retrieveGroupsData();
+		},
+		insert(shouldStayInPage) {
+			const formData = new window.FormData();
+			formData.append('name', this.model.name);
+			formData.append('mainmodel', this.model.mainmodel);
+			formData.append('mapping', JSON.stringify(this.model.mapping));
+			formData.append('file', this.selectedFile, this.selectedFile.name);
+			formData.append('filename', this.selectedFile.name);
+			formData.append('filter', JSON.stringify(this.model.filter));
+			formData.append('parameters', JSON.stringify(this.model.parameters));
+			if (this.model.description) {
+				formData.append('description', this.model.description);
+			}
+			if (this.model.columnfilename && Array.isArray(this.model.columnfilename)) {
+				formData.append('columnfilename', this.convertModelObjectsToModelNames(this.model.columnfilename));
+			}
+			if (this.model.models && Array.isArray(this.model.models)) {
+				formData.append('models', this.convertModelObjectsToModelNames(this.model.models));
+			}
+
+			this.saving = true;
+			this.$puiRequests.uploadFileRequest(
+				this.modelDependency.url.uploadTemplate,
+				formData,
+				(response) => {
+					this.saving = false;
+					if (response.status === 200) {
+						this.$puiEvents.$emit(`onPui-insertRow-dataTable-${this.modelDependency.name}`, response.data);
+						this.afterSave && this.afterSave(response.data);
+						if (!(shouldStayInPage === true)) {
+							if (this.internal.afterInsertGoToUpdate) {
+								this.goToUpdate(response.data);
+							} else if (this.internal.afterInsertGoToCreate) {
+								// Router not allow to go same router with same parameters
+								this.refreshRouter();
+							} else {
+								this.back();
+							}
+						}
+					} else {
+						this.onError(response);
+					}
+					this.resetAfterSaveActions();
+				},
+				(error) => {
+					this.resetAfterSaveActions();
+					this.saving = false;
+					this.onSaveError && this.onSaveError();
+					this.onError(error);
+				}
+			);
+		},
+		update(shouldStayInPage) {
+			this.saving = true;
+			const data = JSON.parse(JSON.stringify(this.model));
+			data.mapping = JSON.stringify(data.mapping);
+			data.filter = JSON.stringify(data.filter);
+			data.parameters = JSON.stringify(data.parameters);
+			if (this.model.models && Array.isArray(this.model.models)) {
+				data.models = this.convertModelObjectsToModelNames(this.model.models);
+			}
+			if (this.model.columnfilename && Array.isArray(this.model.columnfilename)) {
+				data.columnfilename = this.convertModelObjectsToModelNames(this.model.columnfilename);
+			}
+
+			this.$puiRequests.putRequest(
+				this.modelDependency.url.update,
+				data,
+				(response) => {
+					this.saving = false;
+					this.$puiEvents.$emit(`onPui-editRow-dataTable-${this.modelDependency.name}`, response.data);
+					this.afterSave && this.afterSave(response.data);
+					if (!(shouldStayInPage === true)) {
+						if (this.internal.afterUpdateGoToUpdate) {
+							// Router not allow to go same router with same parameters
+							this.refreshRouter();
+						} else if (this.internal.afterUpdateGoToCreate) {
+							this.goToCreate();
+						} else {
+							this.back();
+						}
+					}
+					this.resetAfterSaveActions();
+				},
+				(error) => {
+					this.resetAfterSaveActions();
+					this.saving = false;
+					this.onSaveError && this.onSaveError();
+					this.onError(error);
+				}
+			);
+		},
+		setColumns(model) {
+			for (const index in model.columns) {
+				const column = model.columns[index];
+				let title = this.$puiI18n.t(column.title);
+				title = title !== column.title ? title : column.name;
+				this.columns.push({
+					name: column.name,
+					type: column.type,
+					title: title
+				});
+			}
+			this.columns.sort((a, b) => (a.title < b.title ? -1 : a.title > b.title ? 1 : 0));
+		}
+	}
+};
+</script>
+
+<style lang="postcss">
+.puidocgentemplate-subtitle {
+	text-align: center;
+}
+.puidocgentemplate-table {
+	margin: 0px auto;
+	th.docgen-table-column {
+		border-bottom-width: 1px;
+		border-bottom-color: black;
+		border-bottom-style: solid;
+	}
+}
+.puidocgentemplate-table-column {
+	text-align: center;
+}
+</style>

package/src/components/puidocgen/PuiDocgenTemplateGrid.vue

@@ -0,0 +1,23 @@
+<template>
+	<div>
+		<pui-datatable :modelName="modelName" :actions="actions"></pui-datatable>
+		<pui-docgen-template-modals :modelName="modelName"></pui-docgen-template-modals>
+		<pui-docgen-template-parameters-dialog></pui-docgen-template-parameters-dialog>
+	</div>
+</template>
+
+<script>
+import PuiDocgenTemplateActions from './PuiDocgenTemplateActions.js';
+import PuiDocgenTemplateModals from './PuiDocgenTemplateModals.vue';
+
+export default {
+	name: 'PuiDocgenTemplateGrid',
+	components: { PuiDocgenTemplateModals },
+	data() {
+		return {
+			modelName: 'puidocgentemplate',
+			actions: PuiDocgenTemplateActions.actions
+		};
+	}
+};
+</script>