pui9-components 1.17.3 → 2.0.7

package/src/components/PuiField.vue

@@ -2,7 +2,7 @@
 	<div>
 		<v-layout>
 			<v-flex xs12>
-				<span style="font-weight: 500">{{ label }}</span>
+				<span style="font-weight: 600">{{ label }}</span>
 			</v-flex>
 		</v-layout>
 		<v-layout>

package/src/components/PuiFileUpload.vue

@@ -0,0 +1,275 @@
+<template>
+	<v-card class="puiFileUpload pa-4" outlined>
+		<v-row v-if="descriptionEnabled">
+			<v-col cols="12" class="pb-0 mb-n4">
+				<pui-text-field
+					v-if="value"
+					:id="puiFileUploadId + '_description'"
+					:label="$t('form.puidocument.description')"
+					v-model="internalDescription"
+					maxlength="100"
+					toplabel
+					required
+					noeditable
+					:disabled="disabled || uploaded"
+					@input="update()"
+				></pui-text-field>
+			</v-col>
+		</v-row>
+		<v-row>
+			<v-col cols="12" class="py-0">
+				<!--<pui-text-field :label="$t('form.puidocument.filename')" v-model="fileUploadModel.filenameorig" toplabel required disabled></pui-text-field>-->
+				<input type="file" v-show="false" ref="document" @change="onFilePicked" />
+			</v-col>
+			<v-col cols="12">
+				<v-container
+				v-if = "!uploaded"
+					:id="puiFileUploadId + '_fileUploadContainer'"
+					class="drop align-center py-4"
+					@dragover.prevent
+					@dragenter="setStyle"
+					@dragleave="removeStyle"
+					@drop="onDrop"
+				>
+					<span v-if="!selectedFile" @dragenter="setStyle">
+						<span class="label-file ma-4" @dragenter="setStyle">{{ $t('form.puidocument.dropfilehere') }}</span>
+					</span>
+					<span v-if="selectedFile" @dragenter="setStyle">
+						<span class="label-file ma-4" @dragenter="setStyle">
+							<i :class="selectedFileType" style="font-size: 20px; color: black" @dragenter="setStyle"></i>&nbsp;&nbsp;{{
+								selectedFileName
+							}}
+						</span>
+					</span>
+				</v-container>
+
+				<v-container v-else
+					:id="puiFileUploadId + '_fileUploadContainer'"
+					class="drop align-center py-4"
+					@dragover.prevent
+					@drop.prevent
+				>
+					<span v-if="selectedFile">
+						<span class="label-file ma-4">
+							<i :class="selectedFileType" style="font-size: 20px; color: black"></i>&nbsp;&nbsp;{{
+								selectedFileName
+							}}
+						</span>
+					</span>
+				</v-container>
+			</v-col>
+			<v-col cols="12" class="pt-0 d-flex justify-end">
+				<slot name="customButton"></slot>
+				<v-btn v-if="!uploaded && !disabled" color="primary" @click="$refs.document.click()">
+					<span>{{ $t('form.puidocument.selectfile') }}</span>
+				</v-btn>
+				<v-btn v-if="uploaded" color="primary" @click="downloadEvent()">
+					<span>{{ $t('form.puidocument.downloadfile') }}</span>
+				</v-btn>
+			</v-col>
+		</v-row>
+	</v-card>
+</template>
+
+<script>
+export default {
+	name: 'PuiFileUpload',
+	props: {
+		id: {
+			required: false
+		},
+		value: {
+			required: false
+		},
+		maxSize: {
+			required: false
+		},
+		descriptionEnabled: {
+			type: Boolean,
+			default: false,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+			required: false
+		}
+	},
+	data() {
+		return {
+			puiFileUploadId: this.id,
+			internalDescription: null,
+			compressImage: {
+				maxResolution: null,
+				quality: null
+			},
+			fileTypes: {
+				'image/png': 'fas fa-file-image',
+				'image/jpeg': 'fas fa-file-image',
+				'application/pdf': 'fas fa-file-pdf',
+				'application/vnd.ms-excel': 'fas fa-file-excel',
+				'application/vnd.oasis.opendocument.spreadsheet': 'fas fa-file-excel',
+				'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'fas fa-file-excel',
+				'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',
+				'application/vnd.ms-powerpoint': 'fas fa-file-powerpoint',
+				'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'fas fa-file-powerpoint',
+				'application/vnd.oasis.opendocument.presentation': 'fas fa-file-powerpoint',
+				'text/xml': 'fas fa-file-alt',
+				'text/plain': 'fas fa-file-alt'
+			}
+		};
+	},
+	computed: {
+		selectedFile: {
+			get: function () {
+				return this.value && this.value.selectedFile;
+			},
+			set: function (newValue) {
+				this.value.selectedFile = newValue;
+			}
+		},
+		selectedFileName() {
+			if (this.value && this.value.selectedFile) {
+				return this.value.selectedFile.name;
+			}
+			return '';
+		},
+		selectedFileType() {
+			if (this.value && this.value.selectedFile && this.value.selectedFile.type) {
+				return this.fileTypes[this.value.selectedFile.type];
+			}
+			return '';
+		},
+		uploaded() {
+			return this.value.idDocument != null;
+		}
+	},
+	watch: {
+		value(v) {
+			if (v == null || v == undefined) {
+				this.$emit('input', this.getEmptyFileUploadModel());
+			}
+		},
+		'value.description'(v) {
+			this.internalDescription = v;
+		}
+	},
+	created() {
+		if (this.value == null || this.value == undefined) {
+			this.$emit('input', this.getEmptyFileUploadModel());
+		}
+	},
+	mounted() {
+		this.internalDescription = this.value.description;
+	},
+	methods: {
+		getEmptyFileUploadModel() {
+			return {
+				description: null,
+				selectedFile: null,
+				idDocument: null
+			};
+		},
+		/*send(formData) {
+			const fileData = new window.FormData();
+			fileData.append('files', this.selectedFile, this.selectedFile.name);
+
+			this.$puiRequests.uploadFileRequest(
+				'/issueTicket',
+				fileData,
+				(response) => {
+					alert(response);
+					this.dialog = false;
+				},
+				(error) => {
+					alert(error);
+					this.dialog = false;
+				},
+				formData // as parameters
+			);
+		},*/
+		setStyle() {
+			document.getElementById(this.puiFileUploadId + '_fileUploadContainer').className = 'container drop align-center py-4 highlight';
+		},
+		removeStyle(e) {
+			if (e.target.id == this.puiFileUploadId + '_fileUploadContainer') {
+				document.getElementById(this.puiFileUploadId + '_fileUploadContainer').className = 'container drop align-center py-4';
+			}
+		},
+		onFilePicked(e) {
+			const files = e.target.files;
+			if (files[0] !== undefined) {
+				this.onFileDropped(files[0]);
+			} else {
+				this.selectedFile = null;
+				this.$emit('input', this.getEmptyFileUploadModel());
+			}
+		},
+		onDrop(e) {
+			e.stopPropagation();
+			e.preventDefault();
+			this.removeStyle(e);
+			const files = e.dataTransfer.files;
+			this.onFileDropped(files[0]);
+		},
+		onFileDropped(file) {
+			if (this.disabled) {
+				return
+			}
+
+			if (this.descriptionEnabled && (this.value.description == null || this.value.description == '' || this.value.description == undefined)) {
+				this.$puiNotify.error(this.$t('form.puidocument.descriptionNeeded'));
+				return
+			}
+
+			const self = this;
+			const fr = new window.FileReader();
+
+			fr.addEventListener('load', (event) => {
+				if (fr.result === 'data:') {
+					// empty file selected
+					self.selectedFile = null;
+				} else if (file.size > self.maxSize * 1024) {
+					self.selectedFile = null;
+					this.$puiNotify.error(this.$t('form.puidocument.maxSizeExceeded', { maxsize: self.maxSize }));
+				} else if (file.type === 'image/png' || file.type === 'image/jpeg') {
+					const afterCompressImageFile = function (newFile) {
+						// newFile is the compress image that will be sent to the server...
+						self.selectedFile = newFile;
+					};
+					this.$puiUtils.compressImageFile(
+						file,
+						event,
+						self.compressImage.maxResolution,
+						self.compressImage.quality,
+						afterCompressImageFile
+					);
+				} else {
+					// file is the file that will be sent to the server...
+					self.selectedFile = file;
+				}
+			});
+
+			fr.readAsDataURL(file);
+
+			fr.onloadend = () => {
+				//console.log('DONE', fr.readyState); // readyState will be 2
+				this.$puiEvents.$emit(`onPuiFileUpload_selectedFile`, { id: this.puiFileUploadId });
+			};
+		},
+		customEvent() {
+			this.$puiEvents.$emit(`onPuiFileUpload_customEvent`, { id: this.puiFileUploadId });
+		},
+		downloadEvent() {
+			this.$puiEvents.$emit(`onPuiFileUpload_downloadFile`, { id: this.puiFileUploadId });
+		},
+		update() {
+			let updatedModel = {...this.value};
+			updatedModel.description = this.internalDescription;
+			this.$emit('input', updatedModel);
+		}
+	}
+};
+</script>

package/src/components/PuiFileUploadGroup.vue

@@ -0,0 +1,241 @@
+<template>
+	<v-container>
+		<v-row>
+			<v-col :cols="12" class="d-flex justify-end py-0" v-if="!disabled">
+				<v-btn v-if="this.slotsAvailableToRemove" text outlined small @click="removeFileUpload()">
+					<v-icon small>fas fa-minus-circle</v-icon>
+				</v-btn>
+				<v-btn v-if="this.slotsAvailable" text outlined small @click="addFileUpload">
+					<v-icon small>fas fa-plus-circle</v-icon>
+				</v-btn>
+			</v-col>
+		</v-row>
+		<v-row ref="fileUploads">
+			<v-col :cols="fileUploadCounter > 1 ? 6 : 12" v-for="index in fileUploadCounter" :key="getFileUploadId(index)">
+				<v-container v-if="customTab" class="pa-0">
+					<v-tabs v-model="tabActive[index]" slider-color="white" class="mt-n3" ref="tabs">
+						<v-tab :href="`#tab${index}_1`" :ref="`tab${index}_1`">{{ $t('form.puidocument.fileupload') }}</v-tab>
+						<v-tab :href="`#tab${index}_2`" :ref="`tab${index}_2`">{{ customTab }}</v-tab>
+
+						<v-tab-item :value="`tab${index}_1`" class="mt-2">
+							<pui-file-upload
+								:id="getFileUploadId(index)"
+								:ref="getFileUploadId(index)"
+								v-model="model.files[index - 1]"
+								:maxSize="maxSize"
+								:descriptionEnabled="descriptionEnabled"
+								@input="emitInputUpdate(model.files)"
+								:disabled="disabled"
+								:key="getFileUploadId(index)"
+							>
+								<template v-slot:customButton v-if="customButton">
+									<v-btn
+										class="mr-2"
+										color="primary"
+										@click="$puiEvents.$emit(`onPuiFileUpload_customEvent`, { id: getFileUploadId(index) })"
+									>
+										{{ customButton }}
+									</v-btn>
+								</template>
+							</pui-file-upload>
+						</v-tab-item>
+						<v-tab-item :value="`tab${index}_2`" class="mt-2">
+							<slot name="customTab"></slot>
+						</v-tab-item>
+					</v-tabs>
+				</v-container>
+				<v-container v-else class="pa-0">
+					<pui-file-upload
+						:id="getFileUploadId(index)"
+						:ref="getFileUploadId(index)"
+						v-model="model.files[index - 1]"
+						:maxSize="maxSize"
+						:descriptionEnabled="descriptionEnabled"
+						@input="emitInputUpdate(model.files)"
+						:disabled="disabled"
+						:key="getFileUploadId(index)"
+					>
+						<template v-slot:customButton v-if="customButton">
+							<v-btn
+								class="mr-2"
+								color="primary"
+								@click="$puiEvents.$emit(`onPuiFileUpload_customEvent`, { id: getFileUploadId(index) })"
+							>
+								{{ customButton }}
+							</v-btn>
+						</template>
+					</pui-file-upload>
+				</v-container>
+			</v-col>
+		</v-row>
+	</v-container>
+</template>
+
+<script>
+import PuiFileUpload from './PuiFileUpload.vue';
+
+export default {
+	name: 'PuiFileUploadGroup',
+	components: { PuiFileUpload },
+	props: {
+		value: {
+			required: false
+		},
+		minDocuments: {
+			type: Number,
+			default: 1,
+			required: false
+		},
+		maxDocuments: {
+			type: Number,
+			default: 0,
+			required: false
+		},
+		maxSize: {
+			type: Number,
+			required: false
+		},
+		descriptionEnabled: {
+			type: Boolean,
+			default: false,
+			required: false
+		},
+		customTab: {
+			type: String,
+			default: null,
+			required: false
+		},
+		customButton: {
+			type: String,
+			default: null,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+			required: false
+		}
+	},
+	data() {
+		return {
+			puiFileUploadGroupId: this.$attrs.id,
+			tabActive: [],
+			model: null,
+			fileUploadCounter: 0
+		};
+	},
+	computed: {
+		emptySlots() {
+			return this.model.files.filter((file) => {
+				return file.description == null && file.idDocument == null && file.selectedFile == null;
+			}).length;
+		},
+		filledSlots() {
+			return this.model.files.filter((file) => {
+				return file.description != null && file.idDocument != null && file.selectedFile != null;
+			}).length;
+		},
+		slotsAvailable() {
+			return this.maxDocuments == 0 || this.model.files.length < this.maxDocuments;
+		},
+		slotsAvailableToRemove() {
+			return this.emptySlots > 0 && this.filledSlots + this.emptySlots > this.minDocuments;
+		},
+		slotsEmptyToReplace() {
+			for (let file of this.model.files) {
+				if (this.isEmptyModel(file)) {
+					return true;
+				}
+			}
+			return false;
+		}
+	},
+	watch: {
+		value(v) {
+			this.fileUploadCounter = v.length;
+			this.model.files = v;
+		},
+		'model.files': {
+			handler() {
+				this.$emit('input',this.model.files);
+			}
+		}
+	},
+	created() {
+		this.setInitialValues();
+	},
+	methods: {
+		setInitialValues() {
+			this.model = this.getEmptyModel();
+			this.fileUploadCounter = 0;
+			for (let initial = 0; initial < this.minDocuments; initial++) {
+				if (this.slotsAvailable) {
+					this.addFileUpload();
+				}
+			}
+		},
+		getEmptyModel() {
+			return {
+				files: []
+			};
+		},
+		validateFileUploads() {
+			let validation = true;
+			const self = this;
+			this.model.files.forEach((file) => {
+				if (file.selectedFile == null) {
+					self.$puiNotify.error(self.$t('puicau.fileValidation'));
+					validation = false;
+				}
+			});
+
+			return validation;
+		},
+		// provoca redibujado en el v-for de puiFileUploadGroup por el cambio de key y pérdida de foco en el input
+		getUniqueIndex() {
+			let numberSTR = Math.random().toString().replace('.', Math.random().toString().replace('.', '').substring(0, 10)).substring(0, 20);
+			let numberInt = parseInt(numberSTR).toFixed();
+			let integer = parseInt(numberInt);
+			return integer;
+		},
+		getFileUploadId(index) {
+			return `${this.puiFileUploadGroupId}_fileUpload_${index}`;
+		},
+		addFileUpload(value) {
+			if (this.slotsEmptyToReplace && !this.isEmptyModel(value)) {
+				this.replaceFileUpload(value);
+			} else if (this.slotsAvailable) {
+				if (!this.isEmptyModel(value)) {
+					this.fileUploadCounter++;
+					this.model.files.push(value);
+				} else {
+					this.fileUploadCounter++;
+					this.model.files.push(PuiFileUpload.methods.getEmptyFileUploadModel());
+				}
+			}
+		},
+		isEmptyModel(value) {
+			return value == null || (value.description == null && value.idDocument == null && value.selectedFile == null);
+		},
+		replaceFileUpload(value) {
+			for (let file of this.model.files) {
+				if (file.description == null && file.idDocument == null && file.selectedFile == null) {
+					Object.assign(file, value);
+					return;
+				}
+			}
+		},
+		removeFileUpload() {
+			this.fileUploadCounter--;
+			this.model.files.pop();
+		},
+		reset() {
+			this.fileUploadCounter = 0;
+			this.model.files = [];
+		},
+		emitInputUpdate(value) {
+			this.$emit('input', value);
+		}
+	}
+};
+</script>

package/src/components/PuiFilter.vue

@@ -1,19 +1,21 @@
 <template>
-	<pui-filter-group
-		v-if="columns.length > 0"
-		:ref="'group0'"
-		:columns="columns"
-		:groupName="'0'"
-		:rulesProp="filter ? filter.rules : undefined"
-		:groupOpProp="filter ? filter.groupOp : undefined"
-		:groupsProp="filter ? filter.groups : undefined"
-		:disabled="disabled"
-		:showSubgroupBtn="showSubgroupBtn"
-	></pui-filter-group>
+	<v-container class="puiFilterGroup pa-0">
+		<pui-filter-group
+			v-if="columns.length > 0"
+			ref="group0"
+			:columnsProp="columns"
+			:filterColumnValues="filterColumnValues"
+			:filterGroupProp="filterModel"
+			:disabled="disabled"
+			:showSubgroupBtn="showSubgroupBtn"
+			isRootGroup
+			@change="onFilterGroupChanges"
+		></pui-filter-group>
+	</v-container>
 </template>
 
 <script>
-import PuiFilterGroup from './PuiFilterGroup';
+import PuiFilterGroup from './PuiFilterGroup.vue';
 
 export default {
 	name: 'PuiFilter',
@@ -22,80 +24,80 @@ export default {
 	},
 	data() {
 		return {
+			filterModel: null,
 			showSubgroupBtn: true
 		};
 	},
 	props: {
-		filter: {
-			type: Object,
+		filterProp: {
+			//type: Object,
 			required: true
 		},
 		columns: {
 			type: Array,
 			required: true
 		},
+		filterColumnValues: {
+			type: Object,
+			required: false
+		},
 		disabled: {
 			type: Boolean,
 			required: true
 		}
 	},
+	watch: {
+		filterProp() {
+			this.filterModel = this.filterProp;
+		},
+		filterModel: {
+			deep: true,
+			handler() {
+				this.$emit('change', this.filterModel);
+			}
+		}
+	},
+	created() {
+		this.filterModel = this.filterProp;
+	},
 	methods: {
 		retrieveGroupsData() {
-			//
-			const isRule = function (name) {
-				return name.startsWith('rule');
-			};
+			// validation - al menos una regla por filtro
+
 			let validFilter = true;
 			let almenosUnaRegla = false;
-			//funcion recursiva que recorre los subgrupos hasta el final mientras queden
-			const processGroup = (groupComponent, groupFilterObject) => {
-				for (var ruleOrGroup in groupComponent.$refs) {
-					if (isRule(ruleOrGroup) === true) {
+			const validate = (filterGroupModel) => {
+				if (filterGroupModel) {
+					for (const index in filterGroupModel.rules) {
 						almenosUnaRegla = true;
-						const ruleComponent = groupComponent.$refs[ruleOrGroup][0];
-						const rule = {
-							field: ruleComponent.field,
-							op: ruleComponent.op,
-							data: ruleComponent.data
-						};
+						let rule = filterGroupModel.rules[index];
 						if (!rule.field || !rule.op || (!rule.data && rule.op !== 'nn' && rule.op !== 'nu')) {
-							!this.destroying && this.$puiNotify.warning(this.$t('not-valid-rule-error'));
+							this.$puiNotify.warning(this.$t('puidatatables.not-valid-rule-error'));
 							validFilter = false;
 							return;
 						}
-						if (rule.op === 'in' || rule.op === 'ni') {
+						if (typeof rule.data !== 'object' && (rule.op === 'in' || rule.op === 'ni')) {
 							rule.data = rule.data.split(',');
 						}
-						groupFilterObject.rules.push(rule);
-					} else {
-						//isGroup
-						const subgroupComponent = groupComponent.$refs[ruleOrGroup][0];
-						if (subgroupComponent instanceof Object) {
-							const group = {
-								groupOp: subgroupComponent.groupOp,
-								rules: [],
-								groups: []
-							};
-							groupFilterObject.groups.push(group);
-							processGroup(subgroupComponent, group);
-						}
+					}
+					for (const index in filterGroupModel.groups) {
+						validate(filterGroupModel.groups[index]);
 					}
 				}
 			};
+			this.filterModel && validate(this.filterModel);
 
-			const internalFilter = {
-				rules: [],
-				groups: [],
-				groupOp: this.$refs.group0.groupOp
-			};
-			//empezamos por el grupo 0
-			processGroup(this.$refs.group0, internalFilter);
 			if (almenosUnaRegla === false) {
-				return { groupOp: 'and', groups: [], rules: [] };
+				this.$puiNotify.warning(this.$t('puidatatables.no-rules-error'));
+				return null;
 			} else if (validFilter === true) {
-				return internalFilter;
+				return this.filterModel;
 			}
+
 			return null;
+		},
+		onFilterGroupChanges() {
+			this.filterModel = this.$refs.group0.filterGroupModel;
 		}
 	}
 };