pui9-components 1.17.3 → 2.0.7

package/src/components/PuiSelectDetailDialog.vue

@@ -62,7 +62,7 @@ export default {
 			} else {
 				const form = self.getFormComponent(self.$refs.modalForm.$children[0]);
 				if (form) {
-					form.$parent.save(true);
+					form.save(true);
 					this.$puiEvents.$on(`onPui-insertRow-dataTable-${self.modelName}`, (data) => {
 						this.$puiEvents.$emit(`pui-modalDialog-${self.dialogName}-hide`, data);
 					});
@@ -91,12 +91,19 @@ export default {
 			if (!component) {
 				return null;
 			}
-			if (component.validate && component.$options && component.$options._componentTag === 'v-form') {
+			if (
+				component.$options &&
+				(component.$options._componentTag === `${this.modelName}form` || component.$options._componentTag === `${this.modelName}-form`)
+			) {
 				return component;
 			}
 			for (let i = 0, childrenLength = component.$children.length; i < childrenLength; i++) {
 				const child = this.getFormComponent(component.$children[i]);
-				if (child && child.validate && child.$options && child.$options._componentTag === 'v-form') {
+				if (
+					child &&
+					child.$options &&
+					(child.$options._componentTag === `${this.modelName}form` || child.$options._componentTag === `${this.modelName}-form`)
+				) {
 					return child;
 				}
 			}

package/src/components/PuiSelectorList.vue

@@ -0,0 +1,169 @@
+<template>
+	<div>
+		<v-row>
+			<v-col>
+				<div :style="{ 'max-height': '336px', 'overflow-y': 'auto' }">
+					<v-list v-if="hasCols">
+						<v-list-item-group v-model="columnId" color="primary" mandatory>
+							<!-- <v-list-item link v-for="(column, index) in confReactive.columns" :key="`gridColumn-${index}`" @click="columnId = index"> -->
+							<v-list-item
+								link
+								v-for="(column, index) in columns"
+								:key="`gridColumn-${index}`"
+								@click="
+									columnId = index;
+									columnValue = column;
+									handleClick();
+								"
+							>
+								<v-list-item-content>
+									<v-list-item-title v-if="dataType == 'Object'"> {{ column[nameProp] }} </v-list-item-title>
+									<v-list-item-title v-else> {{ column }} </v-list-item-title>
+								</v-list-item-content>
+							</v-list-item>
+						</v-list-item-group>
+					</v-list>
+				</div>
+			</v-col>
+			<v-col>
+				<v-row>
+					<v-col>
+						<v-btn depressed @click="addColumn()"><v-icon small>far fa-plus</v-icon></v-btn>
+					</v-col>
+				</v-row>
+				<v-row class="mb-2">
+					<v-col>
+						<v-btn depressed @click="removeColumn()"><v-icon small>far fa-minus</v-icon></v-btn>
+					</v-col>
+				</v-row>
+				<v-select toplabel clearable :items="currentItemsToSelect" v-model="selected"></v-select>
+			</v-col>
+		</v-row>
+		<slot name="below"></slot>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PuiSelectorList',
+	data() {
+		return {
+			columnId: this.value,
+			columnValue: '',
+			selected: '',
+			currentItemsToSelect: []
+		};
+	},
+	props: {
+		confReactive: {
+			required: true
+		},
+
+		objName: {
+			type: String,
+			required: true
+		},
+		dataType: {
+			type: String,
+			default: 'Object'
+		},
+		nameProp: {
+			type: String,
+			default: 'name'
+		},
+		dataTemplate: {},
+		itemsToSelect: {
+			type: Array
+		},
+		colsNames: {
+			type: Array
+		}
+	},
+	methods: {
+		addColumn() {
+			if (this.selected != '') {
+				let data = '';
+
+				if (this.dataType == 'Object') {
+					data = { ...this.dataTemplate };
+					this.$set(data, this.nameProp, this.selected);
+				} else {
+					data = this.selected;
+				}
+				if (!(this.objName in this.confReactive)) {
+					//add = [add];
+					this.$set(this.confReactive, this.objName, [data]);
+				} else {
+					this.confReactive[this.objName].push(data);
+				}
+				this.currentItemsToSelect = this.currentItemsToSelect.filter((v) => v != this.selected);
+				this.selected = '';
+			}
+		},
+		removeColumn() {
+			if (this.confReactive[this.objName].length == 0) {
+				return;
+			}
+			let v = this.columnValue;
+			if (v == '') {
+				v = this.confReactive[this.objName][this.columnId];
+			}
+			if (this.dataType == 'Object') {
+				v = v[this.nameProp];
+			}
+			this.currentItemsToSelect.push(v);
+			this.columnValue = '';
+			let colDelete = this.columnId;
+			if (this.columnId > 0) {
+				this.columnId--;
+			}
+			this.handleClick(); // Update the value on the parent before removing the value from the array. It may give undefined errors without this line.
+			this.confReactive[this.objName].splice(colDelete, 1);
+		},
+		handleClick() {
+			this.$emit('input', this.columnId);
+		}
+	},
+	computed: {
+		hasCols() {
+			if (typeof this.confReactive === 'undefined') {
+				return false;
+			}
+
+			if (typeof this.confReactive != undefined) {
+				return Object.prototype.hasOwnProperty.call(this.confReactive, this.objName);
+			}
+			return false;
+		},
+		columns() {
+			if (typeof this.objName != undefined && Object.prototype.hasOwnProperty.call(this.confReactive, this.objName)) {
+				return this.confReactive[this.objName];
+			}
+			return this.confReactive;
+		}
+	},
+	created() {
+		if (this.itemsToSelect != undefined) {
+			if (this.itemsToSelect.length != 0) {
+				this.currentItemsToSelect = [...this.itemsToSelect];
+			}
+		}
+		if (this.hasCols && Array.isArray(this.confReactive[this.objName])) {
+			this.confReactive[this.objName] = this.confReactive[this.objName].map((v) => {
+				if (!(typeof v === 'object' && v !== null)) {
+					return { name: v };
+				}
+				return v;
+			});
+			for (let item of this.confReactive[this.objName]) {
+				if (this.dataType == 'Object') {
+					const value = item[this.nameProp];
+					this.currentItemsToSelect = this.currentItemsToSelect.filter((v) => v != value);
+				} else {
+					this.currentItemsToSelect = this.currentItemsToSelect.filter((v) => v != item);
+				}
+			}
+		}
+	}
+};
+</script>

package/src/components/PuiSort.vue

@@ -0,0 +1,98 @@
+<template>
+	<v-card-text class="pt-0 pr-2 pl-0 pb-0">
+		<!-- slot1, TODO MAKE SLOTS IN FILTER AND SORTING DIALOGS-->
+		<v-list-item>
+			<v-list-item-action-text class="pui-dialog__title">{{ $t('puidatatables.sort') }}</v-list-item-action-text>
+		</v-list-item>
+		<v-flex xs12 class="pui-dialog__ruleContainer mb-1" :style="{ height: heightPanel }">
+			<draggable :list="rules" v-bind="{ group: 'rules' }" @end="removeSelectsFocus">
+				<div v-for="(rule, index) in rules" class="pui-dialog__rule pui-dialog__rule--small ml-1" :key="index">
+					<v-layout wrap class="rule">
+						<v-flex xs1>
+							<v-list-item class="move draggable_point" v-show="(grouped === true && index === 0) === false">
+								<v-icon small>far fa-ellipsis-v</v-icon>
+								<v-icon small>far fa-ellipsis-v</v-icon>
+							</v-list-item>
+						</v-flex>
+						<v-flex xs6 class="pr-2">
+							<v-autocomplete
+								class="font-size-12"
+								label="column"
+								append-icon="fa fa-angle-down"
+								v-model="rule.column"
+								:ref="`${index}-column`"
+								:disabled="grouped === true && index === 0"
+								solo
+								flat
+								@change="setIndex(index), onRuleNameChanged($event, index)"
+								:items="getAvailableColumns(index)"
+								item-text="name"
+								item-value="name"
+								hide-selected
+							></v-autocomplete>
+						</v-flex>
+						<v-flex xs4>
+							<v-select
+								append-icon="fa fa-angle-down"
+								class="font-size-12"
+								v-model="rule.direction"
+								:ref="`${index}-sortType`"
+								solo
+								flat
+								:items="sortingTypes"
+								:label="$t('puidatatables.ascendent')"
+							></v-select>
+						</v-flex>
+						<v-flex xs1 class="pointer" @click="removeRule(index)" v-show="(grouped === true && index === 0) === false">
+							<v-list-item>
+								<v-icon small class="trashIcon" :title="getTitleRemove">fa fa-trash-alt</v-icon>
+							</v-list-item>
+						</v-flex>
+					</v-layout>
+				</div>
+			</draggable>
+		</v-flex>
+		<v-flex xs12 v-show="showAddBtn">
+			<v-btn class="btnAdd elevation-0 mt-0 mb-1" @click="addRule()">
+				<v-icon small>far fa-plus</v-icon>
+				<span>{{ $t('puidatatables.addRule') }}</span>
+			</v-btn>
+		</v-flex>
+	</v-card-text>
+</template>
+<script>
+import PuiSortMixin from '../mixins/PuiSortMixin';
+
+export default {
+	name: 'PuiSort',
+	mixins: [PuiSortMixin]
+};
+</script>
+
+<style lang="postcss" scoped>
+.trashIcon {
+	top: 10px;
+	position: absolute;
+}
+.btnAdd {
+	height: 28px !important;
+	color: var(--N-500);
+	&.v-btn {
+		background-color: var(--N-0) !important;
+	}
+	& span {
+		padding-left: 6px;
+	}
+}
+
+.draggable_point .v-icon {
+	margin-top: -12px;
+	color: var(--N-50);
+}
+.draggable_btn {
+	width: 20px !important;
+	& .v-icon {
+		margin-top: -12px;
+	}
+}
+</style>

package/src/components/PuiSpinnerField.vue

@@ -6,20 +6,7 @@
 				<v-flex xs12>
 					<label v-if="getLabel === '$nbsp;'">&nbsp;</label>
 					<label v-else :class="getLabelRequiredClass">{{ getLabel }}</label>
-					<v-tooltip top v-if="showTooltip">
-						<template v-slot:activator="{ on }">
-							<v-icon class="info-tooltip" size="14" v-on="on">fas fa-info-circle info-tooltip</v-icon>
-						</template>
-						<span>
-							<span v-if="this.description !== ''">
-								{{ this.description }}
-								<hr v-if="this.infoTooltipMessages.length > 0" />
-							</span>
-							<ul>
-								<li v-for="(message, index) in this.infoTooltipMessages" :key="index">{{ message }}</li>
-							</ul>
-						</span>
-					</v-tooltip>
+					<pui-form-tooltip v-bind="{ tooltipDescription, tooltipIcon }" v-if="showTooltip" ref="tooltip"></pui-form-tooltip>
 				</v-flex>
 			</v-layout>
 			<v-layout>
@@ -45,7 +32,7 @@
 
 					<v-btn
 						icon
-						class="primary--text pui-spinner-btnCtrl pui-spinner-btnCtrl_minus ml-0 pl-0 pr-0 mt-0"
+						class="primary--text pui-spinner-btnCtrl pui-spinner-btnCtrl_minus ml-2 pl-0 pr-0 mt-0"
 						:class="{ 'pui-spinner-btnCtrl_disabled': isBtnSubstractDisable }"
 						:ripple="!isBtnSubstractDisable"
 						@click="downValue"
@@ -68,20 +55,7 @@
 			<v-layout>
 				<v-flex :class="labelColumnStyles ? labelColumnStyles : 'xs12 sm6 md4 xl3'">
 					<label :class="getLabelRequiredClass">{{ getLabel }}</label>
-					<v-tooltip top v-if="showTooltip">
-						<template v-slot:activator="{ on }">
-							<v-icon class="info-tooltip" size="14" v-on="on">fas fa-info-circle info-tooltip</v-icon>
-						</template>
-						<span>
-							<span v-if="this.description !== ''">
-								{{ this.description }}
-								<hr />
-							</span>
-							<ul>
-								<li v-for="(message, index) in this.infoTooltipMessages" :key="index">{{ message }}</li>
-							</ul>
-						</span>
-					</v-tooltip>
+					<pui-form-tooltip v-bind="{ tooltipDescription, tooltipIcon }" v-if="showTooltip" ref="tooltip"></pui-form-tooltip>
 				</v-flex>
 				<v-flex :class="valueColumnStyles ? valueColumnStyles : 'xs12 sm6 md8 xl9'">
 					<v-text-field
@@ -184,8 +158,7 @@ export default {
 		disableBtnAdd: false,
 		disableBtnSubstract: false,
 		internalMessages: [],
-		internalErrorMessages: [],
-		infoTooltipMessages: []
+		internalErrorMessages: []
 	}),
 	props: {
 		value: {
@@ -212,14 +185,17 @@ export default {
 			required: false
 		},
 		tooltip: {
-			type: [Boolean],
-			default: false,
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        tooltipDescription: {
+			type: String,
 			required: false
 		},
-		description: {
-			type: [String],
-			default: '',
-			required: false
+		tooltipIcon: {
+			type: String,
+			required: false,
 		},
 		noLazyModel: {
 			type: [Boolean],
@@ -245,14 +221,99 @@ export default {
 			required: false
 		}
 	},
+	
+	computed: {
+		getMobileClass() {
+			return { 'v-text-field--edited': this.isEdited, 'v-text-field--required': this.required };
+		},
+		getLabelRequiredClass() {
+			return { 'v-label--required': this.required };
+		},
+		getEditedClass() {
+			return { 'v-text-field--edited': this.isEdited };
+		},
+		getCompStyle() {
+			var inputWidth = this.width;
+			if (this.value && !isNaN(parseInt(this.value))) {
+				var numLength = this.value.toString().length;
+				var newle = numLength * 13;
+				const sufPref = this.allProps.suffix || this.allProps.prefix;
+				if (sufPref) newle += sufPref.length * 13;
+				if (newle > inputWidth) {
+					inputWidth = newle;
+				}
+			}
+			return { width: inputWidth + 'px' };
+		},
+		isBtnAddDisable() {
+			return this.checkBtnAddDisable();
+		},
+		isBtnSubstractDisable() {
+			return this.checkBtnSubstarctDisable();
+		},
+		showTooltip() {
+            if (this.getLabel === '' || this.getLabel === null) {
+                return false;
+            }
+            return this.tooltipDescription || this.tooltip;
+        }
+	},
+	watch: {
+		value(val) {
+			if (!this.noLazyModel && !this.firstLazyLoad) {
+				this.initializeModel(val);
+				this.firstLazyLoad = true;
+			} else {
+				this.internalModel = val;
+			}
+		},
+		min(newVal) {
+			if (newVal !== null && newVal !== undefined) {
+				const minVal = parseInt(newVal);
+				if (!isNaN(minVal)) {
+					if (minVal < this.maxValue) {
+						this.minValue = minVal;
+					}
+				}
+			} else {
+				this.minValue = Number.MIN_SAFE_INTEGER;
+			}
+		},
+		max(newVal) {
+			if (newVal !== null && newVal !== undefined) {
+				const maxVal = parseInt(newVal);
+				if (!isNaN(maxVal)) {
+					if (maxVal > this.minValue) {
+						this.maxValue = maxVal;
+					}
+				}
+			} else {
+				this.maxValue = Number.MAX_SAFE_INTEGER;
+			}
+		}
+	},
+	created() {
+		if (this.noLazyModel) {
+			this.firstLazyLoad = true;
+		}
+		this.initializeModel(this.value);
+	},
+	mounted() {
+		if (this.tooltip && this.$refs.tooltip) {
+			this.setTooltip();
+		}
+    },
+	destroyed() {
+		// No hay que eliminar el evento de onPuiTreeMenuItemSelected
+	},
 	methods: {
-		getInfoTooltip() {
+		setTooltip() {
 			if (this.max !== Number.MAX_SAFE_INTEGER) {
-				this.infoTooltipMessages.push(this.$t('pui9.components.spinnerField.overmaxvalue') + ': ' + this.max);
+				this.$refs.tooltip.pushMessage(this.$t('pui9.components.spinnerField.overmaxvalue') + ': ' + this.max);
 			}
 
 			if (this.min !== Number.MIN_SAFE_INTEGER) {
-				this.infoTooltipMessages.push(this.$t('pui9.components.spinnerField.overminvalue') + ': ' + this.min);
+				this.$refs.tooltip.pushMessage(this.$t('pui9.components.spinnerField.overminvalue') + ': ' + this.min);
 			}
 		},
 		updateValueLazy() {
@@ -398,87 +459,6 @@ export default {
 				this.firstLazyLoad = true;
 			}
 		}
-	},
-	computed: {
-		getMobileClass() {
-			return { 'v-text-field--edited': this.isEdited, 'v-text-field--required': this.required };
-		},
-		getLabelRequiredClass() {
-			return { 'v-label--required': this.required };
-		},
-		getEditedClass() {
-			return { 'v-text-field--edited': this.isEdited };
-		},
-		getCompStyle() {
-			var inputWidth = this.width;
-			if (this.value && !isNaN(parseInt(this.value))) {
-				var numLength = this.value.toString().length;
-				var newle = numLength * 13;
-				const sufPref = this.allProps.suffix || this.allProps.prefix;
-				if (sufPref) newle += sufPref.length * 13;
-				if (newle > inputWidth) {
-					inputWidth = newle;
-				}
-			}
-			return { width: inputWidth + 'px' };
-		},
-		isBtnAddDisable() {
-			return this.checkBtnAddDisable();
-		},
-		isBtnSubstractDisable() {
-			return this.checkBtnSubstarctDisable();
-		},
-		showTooltip() {
-			if (!this.tooltip || this.getLabel === '' || this.getLabel === null) {
-				return false;
-			}
-			return (this.infoTooltipMessages.length > 0 || this.description !== '') && this.tooltip;
-		}
-	},
-	created() {
-		if (this.noLazyModel) {
-			this.firstLazyLoad = true;
-		}
-		this.initializeModel(this.value);
-
-		this.getInfoTooltip();
-	},
-	watch: {
-		value(val) {
-			if (!this.noLazyModel && !this.firstLazyLoad) {
-				this.initializeModel(val);
-				this.firstLazyLoad = true;
-			} else {
-				this.internalModel = val;
-			}
-		},
-		min(newVal) {
-			if (newVal !== null && newVal !== undefined) {
-				const minVal = parseInt(newVal);
-				if (!isNaN(minVal)) {
-					if (minVal < this.maxValue) {
-						this.minValue = minVal;
-					}
-				}
-			} else {
-				this.minValue = Number.MIN_SAFE_INTEGER;
-			}
-		},
-		max(newVal) {
-			if (newVal !== null && newVal !== undefined) {
-				const maxVal = parseInt(newVal);
-				if (!isNaN(maxVal)) {
-					if (maxVal > this.minValue) {
-						this.maxValue = maxVal;
-					}
-				}
-			} else {
-				this.maxValue = Number.MAX_SAFE_INTEGER;
-			}
-		}
-	},
-	destroyed() {
-		// No hay que eliminar el evento de onPuiTreeMenuItemSelected
 	}
 };
 </script>