pui9-components 1.16.4

package/src/components/PuiModalDialogForm.vue

@@ -0,0 +1,205 @@
+<template>
+	<v-layout wrap v-if="showDialog">
+		<v-flex xs10 md8 lg6 xl4>
+			<div class="text-center">
+				<v-dialog
+					:id="`${dialogName}-modal-container`"
+					persistent
+					v-model="showDialog"
+					:width="widthDialog"
+					:content-class="getDialogClasses"
+					v-bind="allProps"
+				>
+					<v-card class="pa-2">
+						<v-card-title class="pl-3 headline lighten-2" primary-title>{{ titleText }}</v-card-title>
+						<v-card-text>
+							<pui-form-header v-if="componentHeader && modalData.headerPk" showHeader>
+								<component :is="componentHeader" :modelPk="modalData.headerPk" />
+							</pui-form-header>
+							<v-form action ref="validateForm" class="px-4" @submit.prevent>
+								<slot name="message" v-bind:modalData="modalData"></slot>
+							</v-form>
+						</v-card-text>
+						<v-card-actions ref="actions">
+							<v-spacer></v-spacer>
+							<v-btn v-if="!disableCancel" :id="`${dialogName}-btn-cancel`" depressed @click="cancel()" :disabled="loading">{{
+								buttonCancel
+							}}</v-btn>
+							<v-btn color="primary" :id="`${dialogName}-btn-ok`" depressed @click="ok()" :loading="loading" :disabled="loading">{{
+								buttonOk
+							}}</v-btn>
+						</v-card-actions>
+					</v-card>
+				</v-dialog>
+			</div>
+		</v-flex>
+	</v-layout>
+</template>
+
+<script>
+export default {
+	name: 'PuiModalDialogForm',
+	props: {
+		value: {
+			type: Object
+		},
+		titleText: {
+			type: String,
+			required: true
+		},
+		modelName: {
+			type: String,
+			required: true
+		},
+		dialogName: {
+			type: String,
+			required: true
+		},
+		dialogClasses: {
+			type: String,
+			default: ''
+		},
+		overflow: {
+			type: Boolean,
+			default: true
+		},
+		okText: {
+			type: String
+		},
+		cancelText: {
+			type: String
+		},
+		disableCancel: {
+			type: Boolean,
+			default: false
+		},
+		widthDialog: {
+			type: [String, Number],
+			default: 'unset'
+		},
+		onShow: {
+			type: Function,
+			default: null
+		},
+		componentHeaderName: {
+			type: String
+		},
+		showDialogProp: {
+			type: Boolean,
+			default: false
+		},
+		onOk: {
+			type: Function,
+			default: null
+		},
+		onCancel: {
+			type: Function,
+			default: null
+		}
+	},
+	data() {
+		return {
+			modalData: {},
+			componentHeader: null,
+			headerPk: {},
+			showDialog: false,
+			loading: false
+		};
+	},
+	methods: {
+		ok() {
+			if (this.disableCancel || (!this.loading && this.$refs.validateForm !== undefined && this.$refs.validateForm.validate())) {
+				if (this.onOk) {
+					this.loading = true;
+					// onOk Function handles show/hide dialog on return value
+					const returnOnOk = this.onOk(this.modalData);
+					if (returnOnOk !== undefined) {
+						returnOnOk.then((value) => {
+							this.showDialog = !value;
+							this.loading = false;
+						});
+					} else {
+						this.loading = false;
+					}
+				} else {
+					if (this.modalData.isAction) {
+						this.$puiEvents.$emit(`onPui-action-running-ended-${this.modelName}`);
+					}
+					this.showDialog = false;
+				}
+			}
+		},
+		cancel() {
+			if (this.onCancel) {
+				// onCancel Function handles show/hide dialog on return value
+				const returnOnCancel = this.onCancel(this.modalData);
+				if (returnOnCancel !== undefined) this.showDialog = !returnOnCancel;
+			} else {
+				this.showDialog = false;
+			}
+			if (this.modalData.isAction) {
+				this.$puiEvents.$emit(`onPui-action-running-ended-${this.modelName}`);
+			}
+			this.modalData = {};
+		},
+		loaderDynamicHeader() {
+			if (this.headerPk && this.componentHeaderName) {
+				this.componentHeader = this.componentHeaderName;
+			}
+		}
+	},
+	computed: {
+		getOverflow() {
+			return this.overflow ? '' : 'pui-modal-dialog-overflow-off';
+		},
+		buttonOk() {
+			return this.okText || this.$t('pui9.accept');
+		},
+		buttonCancel() {
+			return this.cancelText || this.$t('pui9.cancel');
+		},
+		getDialogClasses() {
+			return this.dialogClasses + ' ' + this.getOverflow;
+		},
+		allProps() {
+			return { ...this.$attrs, ...this.$props };
+		}
+	},
+	mounted() {
+		this.loaderDynamicHeader();
+		this.$puiEvents.$on(`pui-modalDialogForm-${this.dialogName}-${this.modelName}-show`, (data) => {
+			// Clean posible oldData
+			this.modalData = {};
+			for (const key in data) {
+				if (Object.prototype.hasOwnProperty.call(data, key)) {
+					// For make the container of the data reactive we use $set vue function
+					this.$set(this.modalData, key, data[key]);
+				}
+			}
+			// If not loaded from action, disable action events for transfer data, disable styles action button...
+			this.modalData.isAction = data.isAction ? data.isAction : false;
+			if (data.showDialog === undefined || data.showDialog === true) this.showDialog = true;
+			this.onShow && this.onShow(this.modalData);
+		});
+	},
+	destroyed() {
+		this.$puiEvents.$off(`pui-modalDialogForm-${this.dialogName}-${this.modelName}-show`);
+	},
+	watch: {
+		// If some data change from the modalData $emit it in case that they need on the parent component
+		modalData: {
+			handler(newValue) {
+				if (newValue.showDialog !== undefined) {
+					this.showDialog = newValue.showDialog;
+				}
+				this.$emit('input', newValue);
+			},
+			deep: true
+		},
+		showDialogProp(newValue) {
+			this.loading = false;
+			this.showDialog = newValue;
+		}
+	}
+};
+</script>

package/src/components/PuiMultiSelect.vue

@@ -0,0 +1,499 @@
+<template>
+	<v-layout wrap>
+		<v-flex xs12>
+			<v-card :flat="flat" elevation="0">
+				<div :class="{ 'pui-multiselect--flat': flat, 'pui-multiselect--disabled': disabled }">
+					<v-layout wrap>
+						<v-flex xs12 sm6>
+							<!-- slot1, TODO MAKE SLOTS IN FILTER AND SORTING DIALOGS-->
+							<v-flex xs12 class="pt-2">
+								<span class="pui-dialog__title pui-dialog__title--margin">
+									{{ $t(textAvailable) }}
+								</span>
+							</v-flex>
+							<v-flex xs12 class="pui-multiselect__searchpanel">
+								<pui-text-field
+									:placeholder="labelSearch"
+									v-model="searchAvailable"
+									clearable
+									prepend-inner-icon="far fa-search"
+									noeditable
+									realtime
+								></pui-text-field>
+							</v-flex>
+							<v-flex xs12>
+								<v-list
+									:style="styleList"
+									class="overflow-y-auto pui-multiselect__itemListContainer pui-multiselect__itemListContainer-available"
+								>
+									<draggable
+										v-model="availableItems"
+										v-bind="dragOptions"
+										@change="onChangeAvailables"
+										@end="
+											searchSelected = '';
+											setSelectedItems();
+										"
+										class="pui-multiselect__item-draggable"
+										:class="{ 'pui-multiselect__item--tall': itemsSearchAvailable.length === 0 }"
+									>
+										<template v-for="(item, index) in itemsSearchAvailable">
+											<!-- He quitado esta líea del v-layout de abajo porque hacía de un tamaño 	 muy grande al elemento
+													:class="{'pui-multiselect__item--tall': itemsSearchAvailable.length < 4 && index === itemsSearchAvailable.length -1}"
+											-->
+											<v-layout :key="item[itemValue]" class="pui-multiselect__item">
+												<v-flex xs1 d-flex align-center>
+													<v-list-item class="move draggable_point">
+														<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 xs11>
+													<v-list-item class>
+														<v-list-item-content @dblclick="selectItemFromEvent(index, item)">
+															<v-list-item-title
+																class="pui-multiselect--title"
+																v-html="item[itemText]"
+																:title="item[itemText]"
+															></v-list-item-title>
+															<v-list-item-subtitle
+																v-if="itemDescription"
+																v-html="item[itemDescription]"
+															></v-list-item-subtitle>
+														</v-list-item-content>
+														<v-list-item-action>
+															<v-btn
+																small
+																icon
+																ripple
+																@click.native="selectItemFromEvent(index, item)"
+																:disabled="disabled"
+															>
+																<v-icon>far fa-plus</v-icon>
+															</v-btn>
+														</v-list-item-action>
+													</v-list-item>
+												</v-flex>
+											</v-layout>
+										</template>
+									</draggable>
+									<v-card v-show="availableItems.length === 0" flat class="pui-multiselect__itemListContainer-cardHelper pl-3 pr-3">
+										<div class="pui-multiselect__itemListContainer-cardHelper-text pb-1 pl-2 pr-2">
+											<span class="pui-multiselect__itemListContainer-cardHelper-text-title pb-3">
+												{{ $t('pui9.components.multiSelect.nothing_to_select') }}
+											</span>
+											<span class="pui-multiselect__itemListContainer-cardHelper-text-info">
+												{{ $t('pui9.components.multiSelect.multiselect_help_to_unselect') }}
+											</span>
+										</div>
+									</v-card>
+								</v-list>
+							</v-flex>
+						</v-flex>
+						<v-flex xs12 sm6>
+							<v-layout wrap>
+								<v-flex xs12 class="pt-2">
+									<span class="pui-dialog__title pui-dialog__title--margin">
+										{{ $t(textSelected) }}
+									</span>
+								</v-flex>
+								<v-flex xs12 class="pui-multiselect__searchpanel">
+									<pui-text-field
+										:placeholder="labelSearch"
+										v-model="searchSelected"
+										clearable
+										prepend-inner-icon="far fa-search"
+										noeditable
+										realtime
+									></pui-text-field>
+								</v-flex>
+								<v-flex xs12>
+									<v-list
+										:style="styleList"
+										:two-line="itemDescription !== null"
+										class="overflow-y-auto pui-multiselect__itemListContainer"
+										:class="compClassItemListSelected"
+									>
+										<draggable
+											v-model="selectedItems"
+											v-bind="dragOptions"
+											@change="onChangeSelected"
+											@end="
+												searchAvailable = '';
+												setSelectedItems();
+											"
+											class="pui-multiselect__item-draggable"
+											:class="{ 'pui-multiselect__item--tall': itemsSearchSelected.length === 0 }"
+										>
+											<template v-for="(item, index) in itemsSearchSelected">
+												<!-- He quitado esta líea del v-layout de abajo porque hacía de un tamaño muy grande al elemento
+													:class="{'pui-multiselect__item--tall': itemsSearchSelected.length < 4 && index === itemsSearchSelected.length -1}"
+												-->
+												<v-layout :key="item[itemValue]" class="pui-multiselect__item">
+													<v-flex xs1 d-flex align-center>
+														<v-list-item class="move draggable_point">
+															<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 xs11>
+														<v-list-item>
+															<v-list-item-content @dblclick="unselectItemFromEvent(index, item)">
+																<v-list-item-title
+																	class="pui-multiselect--title"
+																	v-html="item[itemText]"
+																	:title="item[itemText]"
+																></v-list-item-title>
+																<v-list-item-subtitle
+																	v-if="itemDescription"
+																	v-html="item[itemDescription]"
+																></v-list-item-subtitle>
+															</v-list-item-content>
+															<v-list-item-action>
+																<v-btn
+																	small
+																	icon
+																	ripple
+																	@click.native="unselectItemFromEvent(index, item)"
+																	:disabled="disabled"
+																>
+																	<v-icon>far fa-times</v-icon>
+																</v-btn>
+															</v-list-item-action>
+														</v-list-item>
+													</v-flex>
+												</v-layout>
+											</template>
+										</draggable>
+										<v-card
+											v-show="selectedItems.length === 0"
+											flat
+											class="pui9-grey pui-multiselect__itemListContainer-cardHelper pl-3 pr-3"
+										>
+											<div class="pui-multiselect__itemListContainer-cardHelper-text pb-1 pl-2 pr-2">
+												<span class="pui-multiselect__itemListContainer-cardHelper-text-title pb-3">
+													{{ $t('pui9.components.multiSelect.nothing_selected') }}
+												</span>
+												<span class="pui-multiselect__itemListContainer-cardHelper-text-info">
+													{{ $t('pui9.components.multiSelect.multiselect_help') }}
+												</span>
+											</div>
+										</v-card>
+									</v-list>
+								</v-flex>
+							</v-layout>
+						</v-flex>
+					</v-layout>
+					<v-card-actions class="ma-0 pb-2 pr-2 pl-2">
+						<v-btn
+							text
+							outlined
+							:disabled="disabled || availableItems.length === 0"
+							class="puiToolbar-dialog__button"
+							@click.native="selectAllItems()"
+							>{{ $t('pui9.components.multiSelect.add_all') }}</v-btn
+						>
+						<v-spacer></v-spacer>
+						<span class="pr-2" v-show="selectedItems.length === 1">{{
+							`${selectedItems.length} ${$t('pui9.components.multiSelect.selected_item')}`
+						}}</span>
+						<span class="pr-2" v-show="selectedItems.length > 1">{{
+							`${selectedItems.length} ${$t('pui9.components.multiSelect.selected_items')}`
+						}}</span>
+						<v-btn
+							text
+							outlined
+							:disabled="disabled || selectedItems.length === 0"
+							@click.native="unselectAllItems()"
+							class="puiToolbar-dialog__button"
+							>{{ $t('pui9.components.multiSelect.empty') }}</v-btn
+						>
+					</v-card-actions>
+				</div>
+			</v-card>
+		</v-flex>
+	</v-layout>
+</template>
+
+<script>
+import PuiMultiSelectMixin from '../mixins/PuiMultiSelectMixin';
+import PuiTextField from './PuiTextField';
+import draggable from 'vuedraggable';
+
+export default {
+	name: 'PuiMultiSelect',
+	mixins: [PuiMultiSelectMixin],
+	components: {
+		PuiTextField,
+		draggable
+	},
+	/**
+	 * !important there are more properties in the selectMixin:
+	 *     items,itemsToSelect,itemText,itemValue
+	 */
+	props: {
+		flat: {
+			default: false
+		},
+		heightList: {
+			type: Number,
+			default: 300
+		},
+		itemDescription: {
+			type: String,
+			default: null
+		},
+		/**
+		 * El texto por traducir que se muestra como titulo de los items disponibles
+		 * Por defecto disponibles
+		 */
+		textAvailable: {
+			type: String,
+			default: 'pui9.components.multiSelect.available'
+		},
+		/**
+		 * El texto por traducir que se muestra como titulo de los items seleccionados
+		 * Por defecto seleccionados
+		 */
+		textSelected: {
+			type: String,
+			default: 'pui9.components.multiSelect.selected'
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			searchAvailable: '',
+			searchSelected: '',
+			searchingAvailable: true,
+			searchingSelected: true,
+			dragOptions: {
+				group: 'multiselect',
+				disabled: this.disabled
+			},
+			selectedItems: [],
+			availableItems: []
+		};
+	},
+	updated() {
+		this.searchingAvailable = false;
+		this.searchingSelected = false;
+	},
+	computed: {
+		compClassItemListSelected() {
+			if (!this.selectedItems) {
+				return {
+					'pui9-grey': true,
+					'pui-multiselect__itemListContainer-selected': true
+				};
+			}
+			return {
+				'pui9-grey': this.selectedItems.length === 0,
+				'pui-multiselect__itemListContainer-selected': this.selectedItems.length === 0
+			};
+		},
+		itemsSearchAvailable() {
+			if (!this.searchAvailable) {
+				return this.availableItems;
+			}
+			//this.searchingAvailable = true;
+			return this.availableItems
+				.filter((item) => {
+					try {
+						const match =
+							item[this.itemText].toUpperCase().includes(this.searchAvailable.toUpperCase()) ||
+							(this.itemDescription && item[this.itemDescription].toUpperCase().includes(this.searchAvailable.toUpperCase()));
+						return match;
+					} catch (e) {
+						//al item le falta el texto o la descripción
+						return false;
+					}
+				})
+				.sort((a, b) => {
+					const aValue = a[this.itemText];
+					const bValue = b[this.itemText];
+					return aValue.localeCompare(bValue);
+				});
+			//this.searchingAvailable = false;
+		},
+		itemsSearchSelected() {
+			if (!this.searchSelected) {
+				return this.selectedItems;
+			}
+			//this.searchingSelected = true;
+			return this.selectedItems
+				.filter((item) => {
+					try {
+						const match =
+							item[this.itemText].toUpperCase().includes(this.searchSelected.toUpperCase()) ||
+							(this.itemDescription && item[this.itemDescription].toUpperCase().includes(this.searchSelected.toUpperCase()));
+						return match;
+					} catch (e) {
+						//al item le falta el texto o la descripción
+						return false;
+					}
+				})
+				.sort((a, b) => {
+					const aValue = a[this.itemText];
+					const bValue = b[this.itemText];
+					return aValue.localeCompare(bValue);
+				});
+			//this.searchingSelected = false;
+		},
+		styleList() {
+			return `height: ${this.heightList.toString()}px`;
+		},
+		labelSearch() {
+			return this.$t('pui9.components.multiSelect.search');
+		}
+	},
+	methods: {
+		setAvailableItems() {
+			this.availableItems = [];
+			this.items
+				.sort((item1, item2) => {
+					if (item1[this.itemText] > item2[this.itemText]) {
+						return 1;
+					} else if (item1[this.itemText] < item2[this.itemText]) {
+						return -1;
+					}
+					return 0;
+				})
+				.forEach((item) => this.availableItems.push(item));
+		},
+		selectItem(item) {
+			this.selectedItems.push(item);
+			this.availableItems.forEach((availableItem, index) => {
+				if (item[this.itemValue] === availableItem[this.itemValue]) {
+					this.availableItems.splice(index, 1);
+				}
+			});
+			this.$emit('input', this.selectedItems);
+		},
+		selectItemById(id, theItem) {
+			this.selectedItems.push(theItem);
+			for (let index = 0, length = this.availableItems.length; index < length; index++) {
+				const availableItem = this.availableItems[index];
+				if (availableItem[this.itemValue] === id) {
+					//comprobamos por referencia que el item y el availableItem no es lo mismo,
+					//en este caso hay que theItem que se acaba de añadir 4 lineas de código atras, y añadimos el bueno
+					//esto significa que theItem solo lleva los campos de la pk y no es el item "entero"
+					if (availableItem !== theItem) {
+						this.selectedItems.pop();
+						this.selectedItems.push(availableItem);
+					}
+					this.availableItems.splice(index, 1);
+					return;
+				}
+			}
+		},
+		setSelectedItems() {
+			this.$emit('input', this.selectedItems);
+		},
+		unselectItem(item) {
+			this.availableItems.push(item);
+			this.selectedItems.forEach((selectedItem, index) => {
+				if (item[this.itemValue] === selectedItem[this.itemValue]) {
+					this.selectedItems.splice(index, 1);
+				}
+			});
+			this.$emit('input', this.selectedItems);
+		},
+		selectItemFromEvent(index, item) {
+			if (this.disabled) {
+				return;
+			}
+			this.searchSelected = '';
+			if (this.searchAvailable) {
+				this.selectItem(item);
+				return;
+			}
+			this.availableItems.splice(index, 1);
+			this.selectedItems.push(item);
+			this.$emit('input', this.selectedItems);
+		},
+		unselectItemFromEvent(index, item) {
+			if (this.disabled) {
+				return;
+			}
+			this.searchAvailable = '';
+			if (this.searchSelected) {
+				this.unselectItem(item);
+				return;
+			}
+			this.selectedItems.splice(index, 1);
+			this.availableItems.push(item);
+			this.$emit('input', this.selectedItems);
+		},
+		selectAllItems() {
+			this.searchSelected = '';
+			this.searchingAvailable = true;
+			this.searchingSelected = true;
+			this.selectedItems = this.selectedItems.concat(this.availableItems);
+			this.availableItems = [];
+			this.$emit('input', this.selectedItems);
+		},
+		unselectAllItems() {
+			this.searchingAvailable = true;
+			this.searchingSelected = true;
+			this.searchAvailable = '';
+			this.availableItems = this.availableItems.concat(this.selectedItems);
+			this.selectedItems = [];
+			this.$emit('input', this.selectedItems);
+		},
+		onChangeAvailables(event) {
+			// due to drag and drop, if searchAvailable has value, the item selected by the user is not the item added to
+			// selectedItems so:
+			// - it has to be removed manually from selectedItems,
+			// - it has to be added to the availableItems one more time,
+			// - selected item by the user that is in itemsSearchAvailable, has to be added to selectedItems
+			// - and selected item by the user has to be removed from availableItems
+			if (event.removed && this.itemsSearchAvailable.length > 0 && this.itemsSearchAvailable.length < this.availableItems.length) {
+				// remove last from selectedItems because it is not the selected item by user
+				const removed = event.removed.element;
+				let removedIndex = this.selectedItems.length;
+				this.selectedItems.forEach((selectedItem, index) => {
+					if (removed[this.itemValue] === selectedItem[this.itemValue]) {
+						removedIndex = index;
+						this.selectedItems.splice(index, 1);
+					}
+				});
+				// push removed item in availableItems
+				this.availableItems.push(removed);
+				// add selected item by user to the selectedItems in the same position as removed previously
+				const added = this.itemsSearchAvailable[event.removed.oldIndex];
+				this.selectedItems.splice(removedIndex, 0, added);
+				// remove selected item from availableItems
+				this.availableItems.forEach((availableItem, index) => {
+					if (added[this.itemValue] === availableItem[this.itemValue]) {
+						this.availableItems.splice(index, 1);
+					}
+				});
+			}
+		},
+		onChangeSelected(event) {
+			if (event.removed && this.itemsSearchSelected.length > 0 && this.itemsSearchSelected.length < this.selectedItems.length) {
+				const removed = event.removed.element;
+				let removedIndex = this.availableItems.length;
+				this.availableItems.forEach((availableItem, index) => {
+					if (removed[this.itemValue] === availableItem[this.itemValue]) {
+						removedIndex = index;
+						this.availableItems.splice(index, 1);
+					}
+				});
+				this.selectedItems.splice(event.removed.oldIndex, 0, removed);
+				const added = this.itemsSearchSelected[event.removed.oldIndex];
+				this.availableItems.splice(removedIndex, 0, added);
+				this.selectedItems.forEach((selectedItem, index) => {
+					if (added[this.itemValue] === selectedItem[this.itemValue]) {
+						this.selectedItems.splice(index, 1);
+					}
+				});
+			}
+		}
+	}
+};
+</script>