pui9-components 2.0.7 → 3.0.0

package/src/components/PuiField.vue

@@ -1,30 +0,0 @@
-<template>
-	<div>
-		<v-layout>
-			<v-flex xs12>
-				<span style="font-weight: 600">{{ label }}</span>
-			</v-flex>
-		</v-layout>
-		<v-layout>
-			<v-flex xs12>{{ value }}</v-flex>
-		</v-layout>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'PuiField',
-	props: {
-		label: {
-			type: String,
-			required: true,
-			default: ''
-		},
-		value: {
-			type: [String, Number],
-			required: true,
-			default: ''
-		}
-	}
-};
-</script>

package/src/components/PuiFieldSet.vue

@@ -1,27 +0,0 @@
-<template>
-	<fieldset class="pt-1 pb-1 pl-2 pr-2 ml-1 mr-1 mb-1" :class="getStyleComp">
-		<legend>{{ title }}</legend>
-		<slot></slot>
-	</fieldset>
-</template>
-
-<script>
-export default {
-	name: 'PuiFieldSet',
-	props: {
-		title: {
-			type: String,
-			default: ''
-		},
-		highlighted: {
-			type: Boolean,
-			default: false
-		}
-	},
-	computed: {
-		getStyleComp() {
-			return { highlighted: this.highlighted };
-		}
-	}
-};
-</script>

package/src/components/PuiFileUpload.vue

@@ -1,275 +0,0 @@
-<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

@@ -1,241 +0,0 @@
-<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,104 +0,0 @@
-<template>
-	<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.vue';
-
-export default {
-	name: 'PuiFilter',
-	components: {
-		PuiFilterGroup
-	},
-	data() {
-		return {
-			filterModel: null,
-			showSubgroupBtn: true
-		};
-	},
-	props: {
-		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() {
-			// validation - al menos una regla por filtro
-
-			let validFilter = true;
-			let almenosUnaRegla = false;
-			const validate = (filterGroupModel) => {
-				if (filterGroupModel) {
-					for (const index in filterGroupModel.rules) {
-						almenosUnaRegla = true;
-						let rule = filterGroupModel.rules[index];
-						if (!rule.field || !rule.op || (!rule.data && rule.op !== 'nn' && rule.op !== 'nu')) {
-							this.$puiNotify.warning(this.$t('puidatatables.not-valid-rule-error'));
-							validFilter = false;
-							return;
-						}
-						if (typeof rule.data !== 'object' && (rule.op === 'in' || rule.op === 'ni')) {
-							rule.data = rule.data.split(',');
-						}
-					}
-					for (const index in filterGroupModel.groups) {
-						validate(filterGroupModel.groups[index]);
-					}
-				}
-			};
-			this.filterModel && validate(this.filterModel);
-
-			if (almenosUnaRegla === false) {
-				this.$puiNotify.warning(this.$t('puidatatables.no-rules-error'));
-				return null;
-			} else if (validFilter === true) {
-				return this.filterModel;
-			}
-
-			return null;
-		},
-		onFilterGroupChanges() {
-			this.filterModel = this.$refs.group0.filterGroupModel;
-		}
-	}
-};
-</script>