pui9-datatables 1.16.4

package/src/mixins/PuiSearcherColumnsListMixin.js

@@ -0,0 +1,108 @@
+import PuiToolbarDialogMixin from './PuiToolbarDialogMixin';
+
+export default {
+	mixins: [PuiToolbarDialogMixin],
+	data() {
+		return {
+			checkColumns: [],
+			searchAll: true,
+			height: 20,
+			itemHeight: 31
+		};
+	},
+	props: {
+		position: {
+			type: Object
+		},
+		modelName: {
+			type: String,
+			required: true
+		}
+	},
+	watch: {
+		searchAll(val) {
+			this.checkUnCheckAllColumns(val);
+			if (val) {
+				this.$puiEvents.$emit(`onPuiApplySearchingColumnsDisable-${this.modelName}`);
+			}
+		},
+		checkColumns: {
+			handler(newVal) {
+				if (newVal) {
+					this.$puiEvents.$emit(`onPuiApplySearchingColumns-${this.modelName}`, newVal);
+				}
+			},
+			deep: true
+		}
+	},
+	methods: {
+		createColumnsList(columns) {
+			this.checkColumns = [];
+			columns
+				.sort((a, b) => (a.title < b.title ? -1 : a.title > b.title ? 1 : 0))
+				.forEach(column => {
+					const columnChecked = {};
+					columnChecked.name = column.name;
+					columnChecked.title = column.title;
+					columnChecked.checked = true;
+					this.checkColumns.push(columnChecked);
+				});
+			this.calculateHeightSubPanel(this.checkColumns);
+		},
+		updateColumnsList(columns) {
+			this.searchAll = false;
+			this.checkColumns = [];
+			columns
+				.sort((a, b) => (a.title < b.title ? -1 : a.title > b.title ? 1 : 0))
+				.forEach(column => {
+					const columnChecked = {};
+					columnChecked.name = column.name;
+					columnChecked.title = column.title;
+					columnChecked.checked = column.checked;
+					this.checkColumns.push(columnChecked);
+				});
+			this.calculateHeightSubPanel(this.checkColumns);
+		},
+		checkFirstElement() {
+			// check first element
+			if (this.checkColumns && this.checkColumns.length > 0) {
+				if (!this.checkAll) {
+					this.checkColumns[0].checked = true;
+				}
+			}
+		},
+		checkUnCheckAllColumns(checkAll) {
+			this.checkColumns.forEach(column => {
+				column.checked = checkAll;
+			});
+			this.checkFirstElement();
+		},
+		calculateHeightSubPanel(items) {
+			var size = this.itemHeight;
+			if (items.length > 0) {
+				this.height = items.length * size + 8;
+			} else {
+				this.height = size + 8;
+			}
+			if (this.height > 240) {
+				this.height = 240;
+			}
+		}
+	},
+	computed: {
+		compStyle() {
+			var style = {
+				top: this.position.top + 'px',
+				right: '0px'
+			};
+			return style;
+		},
+		compStyleMaxHeight() {
+			var style = {
+				height: this.height + 'px',
+				'overflow-y': 'auto'
+			};
+			return style;
+		}
+	}
+};

package/src/mixins/PuiSearcherMixin.js

@@ -0,0 +1,192 @@
+import PuiToolbarDialogMixin from './PuiToolbarDialogMixin';
+import PuiToolbarBtnMixin from './PuiToolbarBtnMixin';
+
+export default {
+	mixins: [PuiToolbarDialogMixin, PuiToolbarBtnMixin],
+	data() {
+		return {
+			idTool: 'gridsearcher',
+			isMobile: false,
+			input: {
+				previousSearchingText: '',
+				searchingText: '',
+				applied: false
+			},
+			visibleColumns: [],
+			active: false,
+			panel: {
+				searchingColumns: [],
+				firstSubscribe: true,
+				position: {
+					top: 40,
+					left: 0
+				}
+			}
+		};
+	},
+	props: {
+		columns: {
+			type: Array,
+			default: () => [],
+			required: true
+		},
+		modelName: {
+			type: String,
+			required: true
+		},
+		showOnlyVisibleColumns: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		getPlaceholder() {
+			return this.$t('puidatatables.searchPlaceholder');
+		},
+		compClass() {
+			return this.isMobile ? 'puiGridSearcher--mobile' : 'puiGridSearcher--desktop';
+		},
+		compIconClass() {
+			return {
+				'puiGridSearcher__icon--applied': this.input.applied
+			};
+		},
+		getTitle() {
+			return this.$t('puidatatables.searchBtnTitle');
+		}
+	},
+	created() {
+		this.isMobile = this.$store.getters.isMobile;
+		this.$puiEvents.$on('onPui-click-mainContainer', () => {
+			this.active = false;
+		});
+	},
+	mounted() {
+		this.$puiEvents.$on(`onPuiApplySearchingColumnsDisable-${this.modelName}`, () => {
+			this.disapplyTool();
+		});
+		this.$puiEvents.$on(`onPui-active-toolbarBtn-${this.modelName}`, (idtool) => {
+			if (idtool !== this.idTool) {
+				this.active = false;
+			}
+		});
+		this.$puiEvents.$on(`onPuiApplySearchingColumns-${this.modelName}`, (searchingColumns) => {
+			this.panel.searchingColumns = searchingColumns;
+			if (this.panel.firstSubscribe === false) {
+				this.publishSearching(this.input.searchingText);
+			}
+			this.panel.firstSubscribe = false;
+		});
+		this.showOnlyVisibleColumns === true &&
+			this.$puiEvents.$on(`onPui-apply-configuration-${this.modelName}`, (configuration) => {
+				this.setVisibleColumns(configuration.columns);
+				this.$refs.searchdialog.createColumnsList(this.visibleColumns);
+			});
+		// relocate panel onresize
+		window.addEventListener('resize', this.calculateDialogPosition);
+		this.setVisibleColumns(this.columns);
+		this.$refs.searchdialog.createColumnsList(this.visibleColumns);
+		this.applySearching();
+	},
+	beforeDestroy() {
+		this.$puiEvents.$off(`onPuiApplySearchingColumns-${this.modelName}`);
+		this.$puiEvents.$off(`onPuiApplySearchingColumnsDisable-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-apply-configuration-${this.modelName}`);
+		window.removeEventListener('resize', this.calculateDialogPosition);
+	},
+	methods: {
+		setVisibleColumns(columns) {
+			this.visibleColumns = columns
+				.filter((column) => {
+					if (this.showOnlyVisibleColumns === true) {
+						return column.visible === true;
+					}
+					return true;
+				})
+				.sort(function (a, b) {
+					if (a.name > b.name) {
+						return 1;
+					}
+					if (a.name < b.name) {
+						return -1;
+					}
+					return 0;
+				});
+		},
+		goSearch() {
+			clearTimeout(this.delayTimer);
+			this.delayTimer = setTimeout(() => {
+				if (this.input.previousSearchingText !== this.input.searchingText) {
+					this.input.previousSearchingText = this.input.searchingText;
+					this.publishSearching(this.input.searchingText);
+				}
+			}, 500);
+		},
+		goClearSearch() {
+			this.input.searchingText = null;
+			this.input.previousSearchingText = this.input.searchingText;
+			this.publishSearching('');
+		},
+		hideDialog() {
+			this.active = false;
+		},
+		goDialog() {
+			if (!this.active) {
+				this.calculateDialogPosition();
+			}
+			this.active = !this.active;
+			this.$puiEvents.$emit(`onPui-active-toolbarBtn-${this.modelName}`, this.idTool);
+		},
+		publishSearching(searchText) {
+			this.disapplyTool();
+			//miramos si hay columnas para la búsqueda, con que haya una seleccionamos el puiSearcher__icon de
+			//color sencodarycolor, después publicamos
+			for (let index = 0, length = this.panel.searchingColumns.length; index < length; index++) {
+				if (this.panel.searchingColumns[index] !== undefined && this.panel.searchingColumns[index].checked === false) {
+					this.applyTool();
+					break;
+				}
+			}
+			this.saveSearching(searchText);
+			if (this.panel.searchingColumns.filter(c => c.checked).length > 0) {
+				this.$puiEvents.$emit(`onPui-apply-searching-${this.modelName}`, [searchText, this.panel.searchingColumns]);
+			}
+		},
+		applyTool() {
+			this.input.applied = true;
+		},
+		disapplyTool() {
+			this.input.applied = false;
+		},
+		calculateDialogPosition() {
+			var offset = this.$puiUtils.getComponentOffset(this.$el);
+			this.panel.position.left = offset.left - 43;
+		},
+		saveSearching(searchText) {
+			// save searchText & searchColumns in model store for future uses
+			const currentModel = this.$store.getters.getModelByName(this.modelName);
+			currentModel.searcher = null;
+			if (searchText) {
+				currentModel.searcher = {
+					searchText: searchText,
+					applied: this.input.applied,
+					searchingColumns: this.panel.searchingColumns
+				};
+			}
+			this.$store.commit('puiModelsAddModel', currentModel);
+		},
+		applySearching() {
+			// apply searchText & searchColumns from model store
+			const currentModel = this.$store.getters.getModelByName(this.modelName);
+			if (currentModel.searcher) {
+				this.input.previousSearchingText = currentModel.searcher.searchText;
+				this.input.searchingText = currentModel.searcher.searchText;
+				this.input.applied = currentModel.searcher.applied;
+				this.panel.searchingColumns = currentModel.searcher.searchingColumns;
+				if (this.input.applied) {
+					this.$refs.searchdialog.updateColumnsList(this.panel.searchingColumns);
+				}
+			}
+		}
+	}
+};

package/src/mixins/PuiSortBtnMixin.js

@@ -0,0 +1,54 @@
+import PuiToolbarBtnMixin from './PuiToolbarBtnMixin';
+
+export default {
+	mixins: [PuiToolbarBtnMixin],
+	props: {
+		columns: {
+			type: Array
+		},
+		modelName: {
+			type: String
+		},
+		groupedColumn: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			idTool: 'sorting',
+			panel: {
+				position: {}
+			}
+		};
+	},
+	mounted() {
+		this.calculateDialogPosition();
+	},
+	created() {
+		this.$puiEvents.$on(`onPui-apply-sorting-${this.modelName}`, rules => {
+			if (rules && rules.length > 0) {
+				this.states.applied = true;
+			} else {
+				this.states.applied = false;
+			}
+		});
+	},
+	computed: {
+		compClass() {
+			return {
+				'pui-toolbar__btn--applied': this.states.applied,
+				'pui-toolbar__btn--active': this.states.active
+			};
+		}
+	},
+	destroyed() {
+		this.$puiEvents.$off(`onPui-apply-sorting-${this.modelName}`);
+	},
+	methods: {
+		toggleSorting() {
+			this.states.applied = !this.states.applied;
+			this.$children[2].toggleSorting(this.states.applied);
+		}
+	}
+};

package/src/mixins/PuiSortDialogMixin.js

@@ -0,0 +1,256 @@
+import PuiToolbarDialogMixin from './PuiToolbarDialogMixin';
+
+export default {
+	mixins: [PuiToolbarDialogMixin],
+	props: {
+		columns: {
+			type: Array
+		},
+		position: {
+			type: Object
+		},
+		modelName: {
+			type: String,
+			required: true
+		},
+		groupedColumn: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			selected: {},
+			selectedNum: 0,
+			width: 300,
+			height: 50,
+			rules: [],
+			grouped: false,
+			availableColumnsSetted: false,
+			availableColumns: [],
+			positionHelper: {
+				top: null,
+				right: null
+			},
+			sortingTypes: [
+				{
+					text: 'puidatatables.ascendent',
+					value: 'asc'
+				},
+				{
+					text: 'puidatatables.descendent',
+					value: 'desc'
+				}
+			]
+		};
+	},
+	watch: {
+		rules(val) {
+			var size = 50;
+			if (val.length > 0) {
+				this.height = val.length * size;
+			} else {
+				this.height = size;
+			}
+			if (this.height > 250) {
+				this.height = 280;
+			}
+		}
+	},
+	computed: {
+		heightPanel() {
+			return this.height + 'px';
+		},
+		showAddBtn() {
+			if (this.columns.length > this.rules.length) {
+				return true;
+			}
+			return false;
+		},
+		getTitleRemove() {
+			return this.$t('puidatatables.removeBtnTitle');
+		}
+	},
+	created() {
+		this.$puiEvents.$on(`onPui-groupColumn-dataTable-${this.modelName}`, (columnIndex) => {
+			this.grouped = columnIndex !== -1;
+		});
+		this.$puiEvents.$on(`onPui-apply-sorting-dataTable-${this.modelName}`, (sortingRule) => {
+			this.rules = sortingRule;
+			this.$parent.states.applied = true;
+		});
+		this.$puiEvents.$on(`onPui-apply-configuration-${this.modelName}`, (configuration) => {
+			if (configuration) {
+				this.grouped = configuration.grouped;
+				if (configuration.order.length > 0 && configuration.order[0].column) {
+					this.rules = configuration.order;
+					this.$parent.states.applied = true;
+				} else {
+					this.rules = [];
+					this.addRule();
+					this.$parent.states.applied = false;
+				}
+			}
+		});
+		this.translateSortingTypes();
+	},
+	mounted() {
+		const currentConfig = this.$store.getters.getCurrentGridConfiguration(this.modelName);
+		if (currentConfig && Array.isArray(currentConfig.configuration.order) && currentConfig.configuration.order.length > 0) {
+			currentConfig.configuration.order.forEach((sortingRule) => this.rules.push(sortingRule));
+			this.$puiEvents.$emit(`onPui-apply-sorting-${this.modelName}`, this.rules);
+		} else {
+			this.addRule();
+		}
+		this.grouped = this.groupedColumn;
+	},
+	updated() {
+		if (this.availableColumnsSetted === false && this.columns.length !== 0) {
+			this.availableColumnsSetted = true;
+			/*this.columns.forEach(column => {
+				this.availableColumns.push(column.name);
+			});*/
+			const rulesColNames = this.rules.map((rule) => {
+				return rule.column;
+			});
+			this.columns
+				.sort((a, b) => (a.title < b.title ? -1 : a.title > b.title ? 1 : 0))
+				.forEach((column) => {
+					if (rulesColNames.includes(column.name) === false && this.availableColumns.includes(column.name) === false) {
+						this.availableColumns.push(column.name);
+					}
+				});
+		}
+		this.calculatePosition();
+	},
+	destroyed() {
+		this.$puiEvents.$off(`onPui-apply-sorting-dataTable-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-apply-configuration-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-groupColumn-dataTable-${this.modelName}`);
+	},
+	methods: {
+		toggleSorting(val) {
+			const rules = val ? this.rules : [];
+			this.$puiEvents.$emit(`onPui-apply-sorting-${this.modelName}`, rules);
+		},
+		reset() {
+			this.columns
+				.sort((a, b) => (a.title < b.title ? -1 : a.title > b.title ? 1 : 0))
+				.forEach((column) => {
+					this.availableColumns.push(column.name);
+				});
+
+			this.rules = [];
+			this.addRule();
+			this.$puiEvents.$emit(`onPui-reset-sorting-${this.modelName}`);
+		},
+		toggleDialog(val) {
+			this.dialog = val;
+		},
+		removeSelectsFocus() {
+			for (let i = 0, length = this.rules.length; i < length; i++) {
+				this.$refs[`${i}-column`][0].$el.classList.remove('v-input--is-focused');
+				this.$refs[`${i}-sortType`][0].$el.classList.remove('v-input--is-focused');
+			}
+		},
+		getAvailableColumns(index) {
+			const availableColumns = this.availableColumns;
+			const columnNameSelected = this.rules[index].column;
+
+			const columnsAvailableForTheSelect = this.columns.filter((column) => {
+				return availableColumns.includes(column.name) || column.name === columnNameSelected;
+			});
+
+			return columnsAvailableForTheSelect;
+		},
+		onRuleNameChanged(value) {
+			//quitamos de las disponibles la nueva columna
+			this.removeColumnFromAvailable(value);
+			//a contiunación añadimos a disponibles la columna que se ha cambiado
+			const rulesColNames = this.rules.map((rule) => {
+				return rule.column;
+			});
+			this.columns
+				.sort((a, b) => (a.title < b.title ? -1 : a.title > b.title ? 1 : 0))
+				.forEach((column) => {
+					if (rulesColNames.includes(column.name) === false && this.availableColumns.includes(column.name) === false) {
+						this.availableColumns.push(column.name);
+					}
+				});
+		},
+		removeColumnFromAvailable(columnName) {
+			for (let i = 0, length = this.availableColumns.length; i < length; i++) {
+				const column = this.availableColumns[i];
+				if (column === columnName) {
+					this.availableColumns.splice(i, 1);
+					break;
+				}
+			}
+		},
+		calculatePosition() {
+			if (!this.top) {
+				var paneltop = this.position.top + 7;
+				this.$refs.dialog.style.top = paneltop + 'px';
+				const right = this.width / 2 < this.position.right ? 10 : this.width / 2 - this.position.right;
+				this.$refs.dialog.style.right = `${right}px`;
+			}
+		},
+		removeRule(index) {
+			this.availableColumns.push(this.rules[index].column);
+			this.rules.splice(index, 1);
+			if (this.rules.length === 0) {
+				this.columns
+					.sort((a, b) => (a.title < b.title ? -1 : a.title > b.title ? 1 : 0))
+					.forEach((column) => {
+						this.availableColumns.push(column.name);
+					});
+				this.addRule();
+			}
+		},
+		addRule() {
+			this.rules.push({ column: '', direction: 'asc' });
+		},
+		translateSortingTypes() {
+			for (var i = 0, length = this.sortingTypes.length; i < length; i++) {
+				this.sortingTypes[i].text = this.$t(this.sortingTypes[i].text);
+			}
+		},
+		setIndex(index) {
+			this.index = index;
+		},
+		validateSelectedRules() {
+			var ok = true;
+			for (let i = 0, length = this.rules.length; i < length; i++) {
+				const rule = this.rules[i];
+				if (rule.column.length === 0) {
+					ok = false;
+					break;
+				}
+			}
+			return ok;
+		},
+		publishSorting() {
+			var ok = this.validateSelectedRules();
+			if (ok) {
+				this.$puiEvents.$emit(`onPui-apply-sorting-${this.modelName}`, this.rules);
+				// close dialogt
+				this.$puiEvents.$emit(`onPui-active-toolbarBtn-${this.modelName}`, '');
+			} else {
+				this.$puiNotify.warning(this.$t('puidatatables.wrongSortingRules'));
+			}
+		},
+		handleScroll(event) {
+			const el = event.srcElement;
+			const classPrefix = 'puiToolbar-dialog';
+			if (el.scrollTop === 0) {
+				this.$refs.header.classList.remove(`${classPrefix}__header--scrolling`);
+				return;
+			} else if (el.scrollTop + el.clientHeight === el.scrollHeight) {
+				this.$refs.btnBar.classList.remove(`${classPrefix}__btnBar--scrolling`);
+				return;
+			}
+			this.$refs.header.classList.add(`${classPrefix}__header--scrolling`);
+			this.$refs.btnBar.classList.add(`${classPrefix}__btnBar--scrolling`);
+		}
+	}
+};

package/src/mixins/PuiToolbarBtnMixin.js

@@ -0,0 +1,66 @@
+export default {
+	data() {
+		return {
+			states: {
+				active: false,
+				applied: false,
+				unsaved: false,
+				hide: false
+			},
+			prevStates: {}
+		};
+	},
+	mounted() {
+		this.$puiEvents.$on(`onPui-active-toolbarBtn-${this.modelName}`, (idtool) => {
+			if (idtool !== this.idTool) {
+				this.states.active = false;
+			}
+		});
+	},
+	destroyed() {
+		this.$puiEvents.$off(`onPui-active-toolbarBtn-${this.modelName}`);
+	},
+	computed: {
+		compClass() {
+			return {
+				'pui-toolbar__btn--applied': this.states.applied && !this.states.unsaved /** prioridad 2 **/,
+				'pui-toolbar__btn--active': this.states.active && !this.states.applied && !this.states.unsaved /** prioridad 3 **/,
+				'pui-toolbar__btn--unsaved': this.states.unsaved /** prioridad 1 **/
+			};
+		},
+		onPuiMenuIconBarSelected() {
+			return this.$store.state.menu.iconBarSelected;
+		}
+	},
+	watch: {
+		/**
+		 *
+		 * Este metodo sirve para autocerrar el dialogo que controla este botón cuando se clica desde fuera del dialogo
+		 */
+		'states.active'(val) {
+			if (val === true) {
+				this.$puiEvents.$emit('onPui-active-toolbarBtn', this.idTool);
+				this.$puiEvents.$emit(`onPui-active-toolbarBtn-${this.modelName}`, this.idTool);
+				this.$puiEvents.$on('onPui-click-mainContainer', () => {
+					this.states.active = false;
+					this.$puiEvents.$off('onPui-click-mainContainer');
+				});
+			} else {
+				this.$puiEvents.$off('onPui-click-mainContainer');
+				this.$puiEvents.$emit(`onPui-inactive-toolbarBtn-${this.modelName}`, this.idTool);
+			}
+		},
+		onPuiMenuIconBarSelected() {
+			this.states.active = false;
+		}
+	},
+	methods: {
+		calculateDialogPosition() {
+			const topBtn = this.$refs.btn.offsetTop;
+			const topPanel = topBtn + 40;
+			const leftPanel = this.$refs.btn.offsetLeft;
+			this.panel.position.top = topPanel;
+			this.panel.position.right = window.innerWidth - leftPanel;
+		}
+	}
+};

package/src/mixins/PuiToolbarDialogMixin.js

@@ -0,0 +1,12 @@
+export default {
+  methods: {
+    calculatePosition () {
+      if (this.position === undefined || this.$refs.dialog === undefined) {
+        return
+      }
+      this.$refs.dialog.style.top = this.position.top + 'px'
+      const right = this.width / 2 < this.position.right ? 0 : this.width / 2 - this.position.right
+      this.$refs.dialog.style.right = `${right}px`
+    }
+  }
+}

package/src/router.js

@@ -0,0 +1,18 @@
+const router = {
+	routes: [
+		{
+			path: '/example1',
+			component: () => import('@/tests/PuiProfileTestSimpleDatatable')
+		},
+		{
+			path: '/example2',
+			component: () => import('@/tests/PuiUserTestCompleteDatatable')
+		},
+		{
+			path: '/example3',
+			component: () => import('@/tests/PuiVariableTestQuickEditionDatatable')
+		}
+	]
+};
+
+export default router;