pui9-components 1.16.4

package/src/tests/TestMultiSelect.vue

@@ -0,0 +1,127 @@
+<template>
+	<v-container>
+		<v-card class="pa-4 mt-4">
+			<v-layout>
+				<v-flex xs12 md6>
+					<pui-multi-select
+						itemValue="id"
+						itemText="name"
+						:items="model1.items_all"
+						:itemsToSelect="model1.items_selected"
+						v-model="model1.items_selected"
+					></pui-multi-select>
+				</v-flex>
+				<v-flex xs12 md6>
+					<v-layout wrap>
+						<v-flex xs12>
+							<b>Todos</b>
+							<div>{{ model1.items_all }}</div>
+						</v-flex>
+						<v-flex xs12>
+							<b>Seleccionados</b>
+							<div>{{ model1.items_selected }}</div>
+						</v-flex>
+					</v-layout>
+				</v-flex>
+			</v-layout>
+		</v-card>
+		<v-card class="pa-4 mt-4">
+			<v-layout>
+				<v-flex xs12 md6>
+					<pui-multi-select
+						:items="model2.items_all"
+						:itemsToSelect="model2.items_selected"
+						v-model="model2.items_selected"
+						:trackItemsToSelect="true"
+						:flat="true"
+					></pui-multi-select>
+				</v-flex>
+				<v-flex xs12 md6>
+					<v-layout wrap>
+						<v-flex xs12>
+							<b>Todos</b>
+							<div>{{ model2.items_all }}</div>
+						</v-flex>
+						<v-flex xs12>
+							<b>Seleccionados</b>
+							<div>{{ model2.items_selected }}</div>
+						</v-flex>
+					</v-layout>
+				</v-flex>
+			</v-layout>
+		</v-card>
+		<v-card class="pa-4 mt-4">
+			<v-layout>
+				<v-flex xs12 md6>
+					<pui-multi-select
+						:items="model3.items_all"
+						:itemsToSelect="model3.items_selected"
+						v-model="model3.items_selected"
+						disabled
+					></pui-multi-select>
+				</v-flex>
+				<v-flex xs12 md6>
+					<v-layout wrap>
+						<v-flex xs12>
+							<b>Todos</b>
+							<div>{{ model3.items_all }}</div>
+						</v-flex>
+						<v-flex xs12>
+							<b>Seleccionados</b>
+							<div>{{ model3.items_selected }}</div>
+						</v-flex>
+					</v-layout>
+				</v-flex>
+			</v-layout>
+		</v-card>
+	</v-container>
+</template>
+
+<script>
+import PuiMultiSelect from '@/components/PuiMultiSelect';
+
+export default {
+	name: 'TestMultiSelect',
+	components: { PuiMultiSelect },
+	data() {
+		return {
+			model1: {
+				items_selected: [{ name: 'sergi', id: 'sergi' }],
+				items_all: [
+					{ name: 'sergi', id: 'sergi' },
+					{ name: 'vicent', id: 'vicent' },
+					{ name: 'marc', id: 'marc' },
+					{ name: 'miquel', id: 'miquel' },
+					{ name: 'cesar', id: 'cesar' },
+					{ name: 'victor', id: 'victor' },
+					{ name: 'amelia', id: 'amelia' },
+					{ name: 'natxo', id: 'natxo' }
+				]
+			},
+			model2: {
+				items_selected: [{ text: 'ESTEBAN', value: 'ESTEBAN' }],
+				items_all: [
+					{ text: 'JOSE', value: 'JOSE' },
+					{ text: 'JUAN', value: 'JUAN' },
+					{ text: 'ANDRES', value: 'ANDRES' },
+					{ text: 'ESTEBAN', value: 'ESTEBAN' }
+				]
+			},
+			model3: {
+				items_selected: [{ text: 'ANDRES', value: 'ANDRES' }],
+				items_all: []
+			}
+		};
+	},
+	created() {
+		setTimeout(() => {
+			this.model3.items_all = [
+				{ text: 'JOSE', value: 'JOSE' },
+				{ text: 'JUAN', value: 'JUAN' },
+				{ text: 'ANDRES', value: 'ANDRES' },
+				{ text: 'ESTEBAN', value: 'ESTEBAN' }
+			];
+		}, 4000);
+	}
+};
+</script>

package/src/tests/TestPuiForm.vue

@@ -0,0 +1,68 @@
+<template>
+	<div class="pui-form">
+		<pui-form-header :showHeader="true" v-if="modelLoaded">
+			<div class="puiformheader">
+				<v-layout wrap>
+					<v-flex xs12>
+						<label>Here goes the header content</label>
+					</v-flex>
+				</v-layout>
+			</div>
+		</pui-form-header>
+
+		<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>
+					<label>Here goes the form content</label>
+				</v-flex>
+				<pui-form-mini-audit class="pl-2" :model="model"></pui-form-mini-audit>
+			</v-layout>
+			<pui-form-footer>
+				<pui-form-footer-btns :formDisabled="formDisabled" :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 PuiFormHeader from '@/components/PuiFormHeader';
+import PuiFormFooter from '@/components/PuiFormFooter';
+import PuiFormFooterBtns from '@/components/PuiFormFooterBtns';
+import PuiFormMiniAudit from '@/components/PuiFormMiniAudit';
+import PuiFormLoading from '@/components/PuiFormLoading';
+
+export default {
+	components: { PuiFormHeader, PuiFormFooter, PuiFormFooterBtns, PuiFormMiniAudit, PuiFormLoading },
+	data() {
+		return {
+			modelLoaded: false,
+			valid: true,
+			formDisabled: false,
+			model: {
+				usralta: 'Pepe Hortulano',
+				fecalta: '2019-09-05T10:26:49.441Z',
+				usrmodif: 'Elsa Abril',
+				fecmodif: '2019-09-08T12:18:43.441Z'
+			}
+		};
+	},
+	created() {
+		this.lazyLoadTest();
+		this.$store.commit('puiMenuHideMenu', true);
+	},
+	methods: {
+		lazyLoadTest() {
+			setTimeout(() => {
+				this.modelLoaded = true;
+			}, 3000);
+		},
+		save() {
+			console.log('Save clicked!');
+		},
+		back() {
+			console.log('Back clicked!');
+		}
+	}
+};
+</script>

package/src/tests/TestRichTextEditor.vue

@@ -0,0 +1,54 @@
+<template>
+	<v-container>
+		<v-flex xs12>
+			<v-card class="pa-4 mt-4">
+				<h2 class="mb-4">Rich Text Editor</h2>
+				<pui-rich-text-editor id="editor1" :label="label" v-model="model1"></pui-rich-text-editor>
+			</v-card>
+			<v-card class="pa-4 mt-4">
+				<h2 class="mb-4">Code Editor in Form</h2>
+
+				<v-form ref="form" v-model="valid" lazy-validation v-if="modelLoaded">
+					<pui-rich-text-editor
+						id="editor2"
+						:label="label"
+						v-model="model1"
+						required
+						:validationErrors="formValidationErrors"
+					></pui-rich-text-editor>
+					<v-btn depressed color="secondary" class="elevation-0" @click.native="save(false)">
+						Save
+					</v-btn>
+				</v-form>
+			</v-card>
+		</v-flex>
+	</v-container>
+</template>
+
+<script>
+import PuiRichTextEditor from '@/components/PuiRichTextEditor';
+
+export default {
+	name: 'TestRichTextEditor',
+	components: { PuiRichTextEditor },
+	data() {
+		return {
+			label: 'Etiqueta editor de texto enriquecido',
+			model1: 'Este texto se está editando con el componente PuiRichTextEditor',
+			valid: true,
+			modelLoaded: true,
+			formValidationErrors: false
+		};
+	},
+	methods: {
+		save() {
+			this.formValidationErrors = false;
+			if (this.$refs.form && this.$refs.form.validate && !this.$refs.form.validate()) {
+				this.formValidationErrors = true;
+				console.log('Hay errores de validación en el formulario');
+				return;
+			}
+		}
+	}
+};
+</script>

package/src/utils.js

@@ -0,0 +1,148 @@
+export default {
+	getPathModelMethodPk: (router, modelName) => {
+		var path = router.currentRoute.path;
+		var routeTokens = path.split('/');
+		var tokens = [];
+
+		for (let i = 0, length = routeTokens.length; i < length; i++) {
+			if (routeTokens[i] !== '') {
+				tokens.push(routeTokens[i]);
+			}
+		}
+
+		var position = null;
+		for (let i = 0, length = tokens.length; i < length; i++) {
+			const token = tokens[i];
+			if (token === modelName) {
+				position = i;
+				break;
+			}
+		}
+
+		if (position == null) {
+			return null;
+		}
+
+		var method = tokens[position + 1];
+		var bpk = tokens[position + 2];
+		var pk = null;
+
+		if (bpk !== 'new') {
+			pk = decodeURIComponent(escape(window.atob(bpk)));
+			pk = JSON.parse(pk);
+		}
+
+		var info = {
+			modelName: modelName,
+			method: method,
+			pk: pk
+		};
+
+		var parentTokens = tokens.slice(0, position);
+		var parentTokensLength = parentTokens.length;
+		var child = info;
+		while (parentTokensLength >= 3) {
+			var parentPk = parentTokens[parentTokensLength - 1];
+			var parentPkJson = decodeURIComponent(escape(window.atob(parentPk)));
+			var parentMethod = parentTokens[parentTokensLength - 2];
+			var parentModelName = parentTokens[parentTokensLength - 3];
+
+			if (parentMethod === 'create' || parentMethod === 'update' || parentMethod === 'read' || parentMethod === 'action') {
+				child.parent = {
+					modelName: parentModelName,
+					method: parentMethod,
+					pk: JSON.parse(parentPkJson)
+				};
+				child = child.parent;
+			}
+
+			parentTokens = parentTokens.slice(0, parentTokensLength - 3);
+			parentTokensLength = parentTokens.length;
+		}
+
+		return info;
+	},
+	getComponentOffset: component => {
+		var rect = component.getBoundingClientRect();
+		var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+		var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+		return { top: rect.top + scrollTop, left: rect.left + scrollLeft };
+	},
+	getModelFromRouter: router => {
+		var routeTokens = router.path.split('/');
+		var tokens = [];
+
+		for (let i = 0, length = routeTokens.length; i < length; i++) {
+			if (routeTokens[i] && routeTokens[i] !== router.params.pk && routeTokens[i] !== router.params.method) {
+				tokens.push(routeTokens[i]);
+			}
+		}
+
+		return tokens[tokens.length - 1];
+	},
+	utf8ToB64: str => {
+		if (str) {
+			return window.btoa(unescape(encodeURIComponent(str)));
+		}
+	},
+	b64ToUtf8: str => {
+		if (str) {
+			return decodeURIComponent(escape(window.atob(str)));
+		}
+	},
+	getFilenameFromHeaders: headers => {
+		const disposition = headers['content-disposition'];
+		if (disposition && disposition.indexOf('attachment') !== -1) {
+			var filenameRegex = /filename=((['"]).*?\2|[^;\n]*)/;
+			var matches = filenameRegex.exec(disposition);
+			if (matches != null && matches[1]) {
+				return matches[1].replace(/['"]/g, '');
+			}
+		}
+		return null;
+	},
+	compressImageFile: (file, fileReaderEvent, maxResolution, quality, compressImageFileCallback) => {
+		const MAX_RESOLUTION = maxResolution || 1200;
+		const QUALITY = quality === 'low' ? 0.1 : quality === 'medium' ? 0.5 : 1;
+
+		const img = new window.Image();
+		img.src = fileReaderEvent.target.result;
+		img.addEventListener('load', () => {
+			const canvas = document.createElement('canvas');
+			let ctx = canvas.getContext('2d');
+			ctx.drawImage(img, 0, 0);
+
+			// img.width and img.height will contain the original dimensions
+			let width = img.width;
+			let height = img.height;
+
+			if (width > height) {
+				if (width > MAX_RESOLUTION) {
+					height *= MAX_RESOLUTION / width;
+					width = MAX_RESOLUTION;
+				}
+			} else {
+				if (height > MAX_RESOLUTION) {
+					width *= MAX_RESOLUTION / height;
+					height = MAX_RESOLUTION;
+				}
+			}
+
+			canvas.width = width;
+			canvas.height = height;
+			ctx = canvas.getContext('2d');
+			ctx.drawImage(img, 0, 0, width, height);
+			canvas.toBlob(
+				blob => {
+					const newFile = new window.File([blob], file.name, {
+						type: file.type,
+						lastModified: Date.now()
+					});
+					compressImageFileCallback(newFile);
+				},
+				file.type,
+				QUALITY
+			);
+		});
+	}
+};