pui9-components 2.0.8 → 3.0.0

package/src/tests/TestMultiSelect.vue

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

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

@@ -1,54 +0,0 @@
-<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/tests/unit/PuiCheckbox.spec.js

@@ -1,86 +0,0 @@
-import { createLocalVue, mount } from '@vue/test-utils';
-import PuiCheckbox from '@/components/PuiCheckbox.vue';
-
-import Vuex from 'vuex';
-import Vuetify from 'vuetify';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-const vuetify = new Vuetify();
-
-const id = 'puicheckbox';
-const label = 'PuiCheckbox label';
-
-
-describe('PuiCheckbox.vue', () => {
-
-	const getters = {
-		isMobile: () => false
-	};
-
-	const store = new Vuex.Store({ getters });
-
-	const createWrapper = (propsData) => {
-		return mount(PuiCheckbox, {
-			localVue,
-			store,
-			vuetify,
-			propsData
-		});
-	};
-
-	it('Should render pui-checkbox with label', () => {
-		const wrapper = createWrapper({
-			id,
-			label,
-			value: true
-		});
-
-		let element = wrapper.find('div[id="puicheckbox"] label');
-		expect(element.exists()).toBe(true);
-		expect(element.text()).toContain('PuiCheckbox label');
-		expect(element.classes('v-label--required')).toBe(false);
-	});
-
-	it('Should render pui-checkbox with required CSS class', () => {
-		const wrapper = createWrapper({
-			id,
-			label,
-			value: true,
-			required: true
-		});
-
-		let element = wrapper.find('div[id="puicheckbox"]');
-		expect(element.exists()).toBe(true);
-		expect(element.classes('v-input--checkbox--required')).toBe(true);
-	});
-
-	it('Should render pui-checkbox with 1|0 values', () => {
-		const wrapper = createWrapper({
-			id,
-			label,
-			value: 1,
-			trueValue: 1,
-			falseValue: 0
-		});
-
-		let element = wrapper.find('div[id="puicheckbox"] input');
-		expect(element.exists()).toBe(true);
-		expect(element.element.value).toBe("1");
-	});
-
-	it('Should render pui-checkbox with S|N values', () => {
-		const wrapper = createWrapper({
-			id,
-			label,
-			value: "N",
-			trueValue: "S",
-			falseValue: "N"
-		});
-
-		let element = wrapper.find('div[id="puicheckbox"] input');
-		expect(element.exists()).toBe(true);
-		expect(element.element.value).toBe("N");
-	});
-});

package/src/tests/unit/PuiTextArea.spec.js

@@ -1,62 +0,0 @@
-import { createLocalVue, mount } from '@vue/test-utils';
-import PuiTextArea from '@/components/PuiTextArea.vue';
-
-import Vuex from 'vuex';
-import Vuetify from 'vuetify';
-import VueI18n from 'vue-i18n';
-
-import enPuiTranslations from '../../../../pui9-translations/translations/en.json';
-import esPuiTranslations from '../../../../pui9-translations/translations/es.json';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueI18n);
-
-const vuetify = new Vuetify();
-const i18n = new VueI18n({
-	locale: 'es',
-	fallbackLocale: 'en',
-	messages: { en: enPuiTranslations, es: esPuiTranslations }
-});
-
-
-
-const id = 'puitextarea';
-const label = 'PuiTextArea label';
-
-
-describe('PuiTextArea.vue Mobile', () => {
-
-	const getters = {
-		isMobile: () => false
-	};
-
-	const store = new Vuex.Store({ getters });
-
-	const createWrapper = (propsData) => {
-		return mount(PuiTextArea, {
-			localVue,
-			store,
-			vuetify,
-			i18n,
-			propsData
-		});
-	};
-
-
-	it('Should render pui-text-area with label', () => {
-		const wrapper = createWrapper({
-			id,
-			label,
-			topLabel: true,
-			value: null
-		});
-
-		expect(wrapper.vm.hasLabel).toBe(true);
-
-		const element = wrapper.find('div[id="puitextarea"] label');
-		expect(element.exists()).toBe(true);
-		expect(element.text()).toContain('PuiTextArea label');
-	});
-
-});

package/src/tests/unit/PuiTextField.spec.js

@@ -1,119 +0,0 @@
-import { createLocalVue, mount } from '@vue/test-utils';
-import PuiTextField from '@/components/PuiTextField.vue';
-
-import Vuex from 'vuex';
-import Vuetify from 'vuetify';
-import VueI18n from 'vue-i18n';
-
-import enPuiTranslations from '../../../../pui9-translations/translations/en.json';
-import esPuiTranslations from '../../../../pui9-translations/translations/es.json';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueI18n);
-
-const vuetify = new Vuetify();
-const i18n = new VueI18n({
-	locale: 'es',
-	fallbackLocale: 'en',
-	messages: { en: enPuiTranslations, es: esPuiTranslations }
-});
-
-
-
-const id = 'puitextfield';
-const label = 'PuiTextField label';
-
-
-describe('PuiTextField.vue Desktop', () => {
-
-	const getters = {
-		isMobile: () => false
-	};
-
-	const store = new Vuex.Store({ getters });
-
-	const createWrapper = (propsData) => {
-		return mount(PuiTextField, {
-			localVue,
-			store,
-			vuetify,
-			i18n,
-			propsData
-		});
-	};
-
-	it('Should render pui-text-field with label', () => {
-		const wrapper = createWrapper({
-			id,
-			label,
-			topLabel: true,
-			value: null
-		});
-
-		expect(wrapper.vm.hasLabel).toBe(true);
-
-		const element = wrapper.find('div[id="puitextfield"] label');
-		expect(element.exists()).toBe(true);
-		expect(element.text()).toContain('PuiTextField label');
-	});
-
-	it('Should render pui-text-field with required CSS class', () => {
-		const wrapper = createWrapper({
-			id,
-			label,
-			topLabel: true,
-			value: null,
-			required: true
-		});
-
-		let element = wrapper.find('div[id="puitextfield"] label');
-		expect(element.classes('v-label--required')).toBe(true);
-	});
-
-	it('Should render pui-text-field, with null value and required attribute', () => {
-		const wrapper = createWrapper({
-			id,
-			label,
-			topLabel: true,
-			value: null,
-			required: true
-		});
-
-		let input = wrapper.find('input[id="puitextfield"]');
-		expect(input.exists()).toBe(true);
-		expect(input.element.value).toBe('');
-		expect(input.element.hasAttribute('required')).toBe(true);
-	});
-
-	it('Should render pui-text-field, with default value and set value', async () => {
-		const wrapper = createWrapper({
-			id,
-			label,
-			topLabel: true,
-			value: 'PuiTextField value'
-		});
-
-		const input = wrapper.find('input[id="puitextfield"]');
-		expect(input.exists()).toBe(true);
-		expect(input.element.value).toBe('PuiTextField value');
-
-		await input.setValue('new value');
-		expect(input.element.value).toBe('new value');
-	});
-
-	it('Should render pui-text-field, with tooltip', async () => {
-		const wrapper = createWrapper({
-			id,
-			label,
-			topLabel: true,
-			value: null,
-			tooltip: true,
-			description: 'Tooltip description'
-		});
-
-		expect(wrapper.vm.showTooltip).toBe(true);
-	});
-
-	// TODO: test more cases
-});

package/src/tests/unit/index.js

@@ -1,5 +0,0 @@
-import Vue from 'vue';
-import Vuetify from 'vuetify';
-
-Vue.config.productionTip = false;
-Vue.use(Vuetify);

package/src/utils.js

@@ -1,158 +0,0 @@
-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];
-	},
-	convertPkStringToPkObject: (model, pkStr) => {
-		const splits = pkStr.split("#");
-		const pkObj = {};
-		var i = 0;
-		model.columns.filter(c => c.isPk).forEach(c => {
-			pkObj[c.name] = splits[i++];
-		});
-
-		return pkObj;
-	},
-	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
-			);
-		});
-	}
-};