pui9-components 2.0.8 → 3.0.0

package/src/components/PuiMultiSelect.vue

@@ -1,636 +0,0 @@
-<template>
-	<v-layout wrap class="pui-multiselect">
-		<v-flex xs12>
-			<v-card :flat="flat" elevation="0">
-				<v-container class="pb-2 mb-n2" :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="pa-2 pt-0 pl-1">
-								<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="$t('pui9.components.multiSelect.search')"
-									v-model="searchTextAvailableItems"
-									clearable
-									prepend-inner-icon="far fa-search"
-									noeditable
-									realtime
-								></pui-text-field>
-							</v-flex>
-							<v-flex xs12 class="py-0 px-1">
-								<v-list
-									:style="`height: ${heightList}px`"
-									:two-line="itemDescription !== null"
-									class="overflow-y-auto pui-multiselect__itemListContainer"
-								>
-									<draggable
-										v-model="availableItems"
-										v-bind="dragOptions"
-										@change="onChangeAvailableItems"
-										class="pui-multiselect__item-draggable"
-										:class="{ 'pui-multiselect__item--tall': filteredAvailableItems.length === 0 }"
-									>
-										<v-layout
-											v-for="(item, index) in filteredAvailableItems"
-											:key="`${index}__${item.itemText}__${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="selectItemFromClick(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 x-small icon ripple @click.native="selectItemFromClick(item)" :disabled="disabled">
-															<v-icon>far fa-plus</v-icon>
-														</v-btn>
-														<v-tooltip class="overflow-y-hidden" max-width="30%" max-height="30%" top v-if="itemTooltip">
-															<template v-slot:activator="{ on, attrs }">
-																<v-btn x-small icon ripple v-bind="attrs" v-on="on" :disabled="disabled">
-																	<v-icon>far fa-info-circle</v-icon>
-																</v-btn>
-															</template>
-															<div class="tooltipText">{{ itemTooltip }}</div>
-														</v-tooltip>
-													</v-list-item-action>
-												</v-list-item>
-											</v-flex>
-										</v-layout>
-									</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="pa-2 pt-0 pl-1">
-									<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="$t('pui9.components.multiSelect.search')"
-										v-model="searchTextSelectedItems"
-										clearable
-										prepend-inner-icon="far fa-search"
-										noeditable
-										realtime
-									></pui-text-field>
-								</v-flex>
-								<v-flex xs12 class="py-0 px-1">
-									<v-list
-										:style="`height: ${heightList}px`"
-										:two-line="itemDescription !== null"
-										class="overflow-y-auto pui-multiselect__itemListContainer"
-										:class="compClassItemListSelected"
-									>
-										<draggable
-											v-model="selectedItems"
-											v-bind="dragOptions"
-											@change="onChangeSelectedItems"
-											class="pui-multiselect__item-draggable"
-											:class="{ 'pui-multiselect__item--tall': filteredSelectedItems.length === 0 }"
-										>
-											<v-layout
-												v-for="(item, index) in filteredSelectedItems"
-												:key="`${index}__${item.itemText}__${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="unselectItemFromClick(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
-																x-small
-																icon
-																ripple
-																@click.native="unselectItemFromClick(item)"
-																:disabled="disabled"
-															>
-																<v-icon>far fa-times</v-icon>
-															</v-btn>
-															<v-tooltip top v-if="itemTooltip">
-																<template v-slot:activator="{ on, attrs }">
-																	<v-btn x-small icon ripple v-bind="attrs" v-on="on" :disabled="disabled">
-																		<v-icon>far fa-info-circle</v-icon>
-																	</v-btn>
-																</template>
-																<span v-html="item[itemTooltip]" />
-															</v-tooltip>
-														</v-list-item-action>
-													</v-list-item>
-												</v-flex>
-											</v-layout>
-										</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 ml-n1 mt-3 mr-2"
-							@click.native="selectAllItems()"
-							>{{ $t('pui9.components.multiSelect.add_all') }}</v-btn
-						>
-						<span class="pl-2 mt-3">{{ `${availableItems.length} ${$t('pui9.components.multiSelect.available').toLowerCase()}` }}</span>
-						<v-spacer></v-spacer>
-						<span class="pr-2 mt-3" v-show="selectedItems.length === 1">{{
-							`${selectedItems.length} ${$t('pui9.components.multiSelect.selected_item')}`
-						}}</span>
-						<span class="pr-2 mt-3" 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 mr-n1 mt-3"
-							>{{ $t('pui9.components.multiSelect.empty') }}</v-btn
-						>
-					</v-card-actions>
-				</v-container>
-			</v-card>
-		</v-flex>
-	</v-layout>
-</template>
-
-<script>
-import { isEqual } from 'lodash';
-import PuiTextField from './PuiTextField';
-import draggable from 'vuedraggable';
-
-export default {
-	name: 'PuiMultiSelect',
-	components: {
-		PuiTextField,
-		draggable
-	},
-	props: {
-		value: {
-			required: false
-		},
-		/* Array of Objects provided by the parent component */
-		items: {
-			type: Array,
-			default: null,
-			required: true
-		},
-		/**
-		 * Los items seleccionados que se pasan de inicio, se pasa en la directiva v-model al utilizar este componente
-		 * puede ser un array de Items igual que en la propiedad :items, o un array con los id's solamente
-		 */
-		itemsToSelect: {
-			type: Array,
-			default: () => []
-		},
-		// reactividad de los items seleccionados, solamente actualiza si viene true
-		trackItemsToSelect: {
-			type: Boolean,
-			default: false
-		},
-		/* Type: String
-		The items text property name */
-		itemText: {
-			type: String,
-			//type: [String, Array, Function],
-			default: 'text'
-		},
-		/* Type: String
-		The items id property name */
-		itemValue: {
-			type: String,
-			default: 'value'
-		},
-		flat: {
-			default: false
-		},
-		heightList: {
-			type: Number,
-			default: 300
-		},
-		itemDescription: {
-			type: String,
-			default: null
-		},
-		itemTooltip: {
-			type: String,
-			defautl: 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 {
-			itemTextMultiple: false,
-			itemValueMultiple: false,
-			itemTextNested: false,
-			itemValueNested: false,
-			searchTextAvailableItems: '',
-			searchTextSelectedItems: '',
-			dragOptions: {
-				group: 'multiselect',
-				disabled: this.disabled
-			},
-			availableItems: [],
-			selectedItems: []
-		};
-	},
-	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
-			};
-		},
-		filteredAvailableItems() {
-			if (!this.searchTextAvailableItems) {
-				return this.availableItems;
-			}
-
-			return this.availableItems
-				.filter((item) => {
-					try {
-						const match =
-							item[this.itemText].toUpperCase().includes(this.searchTextAvailableItems.toUpperCase()) ||
-							(this.itemDescription && item[this.itemDescription].toUpperCase().includes(this.searchTextAvailableItems.toUpperCase()));
-						return match;
-					} catch (e) {
-						//al item le falta el texto o la descripción
-						return false;
-					}
-				});
-		},
-		filteredSelectedItems() {
-			if (!this.searchTextSelectedItems) {
-				return this.selectedItems;
-			}
-
-			return this.selectedItems
-				.filter((item) => {
-					try {
-						const match =
-							item[this.itemText].toUpperCase().includes(this.searchTextSelectedItems.toUpperCase()) ||
-							(this.itemDescription && item[this.itemDescription].toUpperCase().includes(this.searchTextSelectedItems.toUpperCase()));
-						return match;
-					} catch (e) {
-						//al item le falta el texto o la descripción
-						return false;
-					}
-				});
-		},
-		selected() {
-			return this.selectedItems.length > 0;
-		}
-	},
-	watch: {
-		items(newValue, oldValue) {
-			if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
-				this.checkItemText();
-				this.checkItemValue();
-
-				this.setAvailableItems();
-				this.setSelectedItems();
-			}
-		},
-		itemsToSelect: {
-			handler() {
-				if (this.trackItemsToSelect) {
-					this.setAvailableItems();
-					this.setSelectedItems();
-				}
-			},
-			deep: true
-		}
-	},
-	mounted() {
-		this.checkItemText();
-		this.checkItemValue();
-
-		this.setAvailableItems();
-		this.setSelectedItems();
-	},
-	methods: {
-		checkItemText() {
-			this.itemTextMultiple = Array.isArray(this.itemText);
-
-			if (this.itemTextMultiple === false) {
-				this.itemTextNested = this.checkForNestedFields(this.itemText);
-			}
-		},
-		checkItemValue() {
-			this.itemValueMultiple = Array.isArray(this.itemValue);
-
-			if (this.itemValueMultiple === false) {
-				this.itemValueNested = this.checkForNestedFields(this.itemValue);
-			}
-		},
-		checkForNestedFields(stringField) {
-			if (stringField instanceof Function) {
-				return false;
-			}
-
-			return stringField.split('.').length > 1;
-		},
-		// order items by itemText alphabetically
-		orderItems(items) {
-			return items.sort((a, b) => {
-				const aValue = a[this.itemText] ? a[this.itemText] : '';
-				const bValue = b[this.itemText] ? b[this.itemText] : '';
-				return aValue.localeCompare(bValue);
-			});
-		},
-		setAvailableItems() {
-			this.availableItems = [...this.items];
-		},
-		setSelectedItems() {
-			this.selectedItems = [];
-
-			if (!this.itemsToSelect || this.itemsToSelect.length === 0) {
-				return;
-			}
-
-			for (let i = 0, length = this.itemsToSelect.length; i < length; i++) {
-				// this.selectItem(this.itemsToSelect[i]);
-				this.selectItemFromItemValue(this.itemsToSelect[i]);
-			}
-		},
-		// solo compara los valores de los items, se usa en setSelectItems
-		selectItemFromItemValue(item) {
-			for (let index = 0, length = this.availableItems.length; index < length; index++) {
-				const availableItem = this.availableItems[index];
-				if (availableItem[this.itemValue] === item[this.itemValue]) {
-					this.selectedItems.push({ ...item });
-					this.availableItems.splice(index, 1);
-					return;
-				}
-			}
-		},
-		// compara la equivalencia del objeto
-		selectItem(item) {
-			for (let index = 0, length = this.availableItems.length; index < length; index++) {
-				const availableItem = this.availableItems[index];
-				if (isEqual(availableItem, item)) {
-					this.selectedItems.push({ ...item });
-					this.availableItems.splice(index, 1);
-					return;
-				}
-			}
-		},
-		unselectItem(item) {
-			for (let index = 0, length = this.selectedItems.length; index < length; index++) {
-				const selectedItem = this.selectedItems[index];
-				if (isEqual(selectedItem, item)) {
-					this.availableItems.push({ ...item });
-					this.selectedItems.splice(index, 1);
-					return;
-				}
-			}
-		},
-		selectItemFromClick(item) {
-			if (this.disabled) {
-				return;
-			}
-
-			this.selectItem(item);
-			this.$emit('input', this.selectedItems);
-		},
-		unselectItemFromClick(item) {
-			if (this.disabled) {
-				return;
-			}
-
-			this.unselectItem(item);
-			this.$emit('input', this.selectedItems);
-		},
-		selectAllItems() {
-			this.searchTextSelectedItems = '';
-			this.selectedItems = this.selectedItems.concat(this.availableItems);
-			this.availableItems = [];
-			this.$emit('input', this.selectedItems);
-		},
-		unselectAllItems() {
-			this.searchTextAvailableItems = '';
-			this.availableItems = this.availableItems.concat(this.selectedItems);
-			this.selectedItems = [];
-			this.$emit('input', this.selectedItems);
-		},
-
-		// due to drag and drop, if searchTextAvailableItems or searchTextSelectedItems have values, 
-		// the item selected by the user is not the real item so we need to disapply the operations manually 
-		// and apply them again transforming the indexes of the filtered items to the real items
-
-		onChangeAvailableItems(event) {
-			if (event.moved) {
-				if (this.filteredAvailableItems.length > 0 && this.filteredAvailableItems.length < this.availableItems.length) {
-					// deshacer movimiento con indices equivocados
-					this.availableItems.splice(event.moved.newIndex, 1);
-					this.availableItems.splice(event.moved.oldIndex, 0, event.moved.element);
-
-					// realizar verdadero movimiento
-					const realItem = this.filteredAvailableItems[event.moved.oldIndex];
-					const realOldIndex = this.availableItems.indexOf(realItem);
-					this.availableItems.splice(realOldIndex, 1);
-
-					const previousItem = this.filteredAvailableItems[event.moved.newIndex - 1];
-					const realNewIndex = this.availableItems.indexOf(previousItem) + 1;
-					this.availableItems.splice(realNewIndex, 0, realItem);
-				}
-
-				this.$emit('input', this.selectedItems);
-			}
-
-			if (event.removed) {
-				if (this.filteredAvailableItems.length > 0 && this.filteredAvailableItems.length < this.availableItems.length) {
-					// deshacer el borrado de availableItems
-					this.availableItems.splice(event.removed.oldIndex, 0, event.removed.element);
-					// borrar el verdadero item
-					const realItem = this.filteredAvailableItems[event.removed.oldIndex];
-					for (let index = 0, length = this.availableItems.length; index < length; index++) {
-						const availableItem = this.availableItems[index];
-						if (isEqual(availableItem, realItem)) {
-							console.log('deleting', this.availableItems[index][this.itemValue]);
-							this.availableItems.splice(index, 1);
-							break;
-						}
-					}
-					// añadir el verdadero item a partir de la posición guardada previamente (added ejecuta antes que removed)
-					console.log('newIndex', this.newIndex);
-
-					const previousItem = this.filteredSelectedItems[this.newIndex - 1];
-					const realNewIndex = this.selectedItems.indexOf(previousItem) + 1;
-					this.selectedItems.splice(realNewIndex, 0, realItem);
-				}
-				this.$emit('input', this.selectedItems);
-			}
-
-			if (event.added) {
-				if (this.filteredSelectedItems.length > 0 && this.filteredSelectedItems.length < this.selectedItems.length) {
-					// deshacer el añadido de availableItems
-					this.availableItems.splice(event.added.newIndex, 1);
-					// guardar la posición donde se desea insertar el nuevo item
-					this.newIndex = event.added.newIndex;
-				}
-				this.$emit('input', this.selectedItems);
-			}
-		},
-		onChangeSelectedItems(event) {
-			if (event.moved) {
-				if (this.filteredSelectedItems.length > 0 && this.filteredSelectedItems.length < this.selectedItems.length) {
-					// deshacer movimiento con indices equivocados
-					this.selectedItems.splice(event.moved.newIndex, 1);
-					this.selectedItems.splice(event.moved.oldIndex, 0, event.moved.element);
-
-					// realizar verdadero movimiento
-					const realItem = this.filteredSelectedItems[event.moved.oldIndex];
-					const realOldIndex = this.selectedItems.indexOf(realItem);
-					this.selectedItems.splice(realOldIndex, 1);
-
-					const previousItem = this.filteredSelectedItems[event.moved.newIndex - 1];
-					const realNewIndex = this.selectedItems.indexOf(previousItem) + 1;
-					this.selectedItems.splice(realNewIndex, 0, realItem);
-				}
-
-				this.$emit('input', this.selectedItems);
-			}
-
-			if (event.removed) {
-				if (this.filteredSelectedItems.length > 0 && this.filteredSelectedItems.length < this.selectedItems.length) {
-					// deshacer el borrado de selectedItems
-					this.selectedItems.splice(event.removed.oldIndex, 0, event.removed.element);
-					// borrar el verdadero item
-					const realItem = this.filteredSelectedItems[event.removed.oldIndex];
-					for (let index = 0, length = this.selectedItems.length; index < length; index++) {
-						const selectedItem = this.selectedItems[index];
-						if (isEqual(selectedItem, realItem)) {
-							console.log('deleting', this.selectedItems[index][this.itemValue]);
-							this.selectedItems.splice(index, 1);
-							break;
-						}
-					}
-					// añadir el verdadero item a partir de la posición guardada previamente (added ejecuta antes que removed)
-					const previousItem = this.filteredAvailableItems[this.newIndex - 1];
-					const realNewIndex = this.availableItems.indexOf(previousItem) + 1;
-					this.availableItems.splice(realNewIndex, 0, realItem);
-				}
-				this.$emit('input', this.selectedItems);
-			}
-
-			if (event.added) {
-				if (this.filteredAvailableItems.length > 0 && this.filteredAvailableItems.length < this.availableItems.length) {
-					// deshacer el añadido de selectedItems
-					this.selectedItems.splice(event.added.newIndex, 1);
-					// guardar la posición donde se desea insertar el nuevo item
-					this.newIndex = event.added.newIndex;
-				}
-				this.$emit('input', this.selectedItems);
-			}
-		},
-		getItemIndexFromFilteredIndex(filteredIndex, filteredList, list) {
-			const filteredItem = filteredList[filteredIndex];
-			for (let index = 0, length = list.length; index < length; index++) {
-				const item = list[index];
-				if (isEqual(item, filteredItem)) {
-					return index;
-				}
-			}
-			return -1;
-		}
-	}
-};
-</script>
-
-<style scoped>
-.tooltipText {
-	word-break: break-all;
-	max-width: 100% !important;
-	max-height: 100% !important;
-	font: normal;
-}
-</style>