pui9-datatables 1.16.4

package/src/components/desktop/toolbar/filtering/PuiGridFilterGroup.vue

@@ -0,0 +1,313 @@
+<template>
+	<v-layout wrap class="pb-1 pt-1 mb-1 puiGridFilterGroup" @mouseover.stop="showGroupBtns = true" @mouseout="showGroupBtns = false">
+		<v-flex xs12 v-if="isGroup0">
+			<v-toolbar height="48" class="elevation-0 bottomtoolbar pt-1 pb-1">
+				<v-btn v-if="disabled === false" class="btnAddGroup elevation-0" @click="addSubGroup()">
+					<v-icon small>fa fa-layer-group</v-icon>
+					<span>{{ $t('addGroup') }}</span>
+				</v-btn>
+				<v-spacer></v-spacer>
+			</v-toolbar>
+		</v-flex>
+		<v-flex xs12 v-if="(isGroup0 && groups.length > 1) || !isGroup0">
+			<v-layout wrap class="puiGridFilterGroup__groupOperator pt-1 pl-3">
+				<v-flex xs4 align-self-center>
+					<span>{{ $t('labelGroup') }}</span>
+				</v-flex>
+				<v-flex xs2>
+					<v-select
+						:label="$t('or')"
+						append-icon="fa fa-angle-down"
+						solo
+						flat
+						hide-details
+						:items="groupOperators"
+						v-model="groupOp"
+						:disabled="disabled"
+					></v-select>
+				</v-flex>
+			</v-layout>
+		</v-flex>
+		<v-layout v-if="!isGroup0" wrap>
+			<v-flex xs12>
+				<v-layout v-for="rule in rules" :key="rule.index">
+					<v-flex xs11>
+						<pui-grid-filter-rule
+							:ref="`rule${rule.index}`"
+							:ruleIndex="rule.index"
+							:columns="columns"
+							:fieldProp="rule.field"
+							:opProp="rule.op"
+							:dataProp="rule.data"
+							:caseSensitiveProp="rule.caseSensitiveAndAccents"
+							:group="groupName"
+							:ruleOperators="groupOperators"
+							:disabled="disabled"
+						></pui-grid-filter-rule>
+					</v-flex>
+					<v-flex xs1 v-if="disabled === false">
+						<v-list-item>
+							<v-icon class="pointer" small @click.native="removeRule(rule.index)">fa fa-trash-alt</v-icon>
+						</v-list-item>
+					</v-flex>
+				</v-layout>
+			</v-flex>
+		</v-layout>
+		<v-layout wrap v-if="groups.length > 0" class="full-width">
+			<pui-grid-filter-group
+				v-for="(group, i) in groups"
+				:key="group.index"
+				:ref="`group${group.index}`"
+				:groupName="groupName + '-' + group.index"
+				:groupOperators="groupOperators"
+				:columns="columns"
+				:rulesProp="groupsProp ? groupsProp[i].rules : undefined"
+				:groupOpProp="groupsProp ? groupsProp[i].groupOp : undefined"
+				:groupsProp="groupsProp ? groupsProp[i].groups : undefined"
+				:disabled="disabled"
+				:showSubgroupBtn="showSubgroupBtn"
+			></pui-grid-filter-group>
+		</v-layout>
+		<v-layout v-if="!isGroup0" wrap>
+			<v-flex xs12>
+				<v-toolbar height="32" class="elevation-0 puiGridFilterGroup__bottombar">
+					<v-btn v-if="disabled === false" class="btnGroup btnAddRule elevation-0 ml-3" @click="addRule()">
+						<v-icon small>far fa-plus</v-icon>
+						<span>{{ $t('addRule') }}</span>
+					</v-btn>
+					<v-btn v-if="showSubgroupBtn && disabled === false" class="btnGroup btnAddGroup elevation-0" @click="addSubGroup()">
+						<v-icon small>fa fa-layer-group</v-icon>
+						<span>{{ $t('addSubGroup') }}</span>
+					</v-btn>
+					<v-btn v-if="!isFirstGroup && disabled === false" class="btnGroup btnRemGroup elevation-0" @click="removeGroup()">
+						<v-icon small>fa fa-trash-alt</v-icon>
+						<span>{{ $t('removeGroup') }}</span>
+					</v-btn>
+					<v-spacer></v-spacer>
+				</v-toolbar>
+			</v-flex>
+		</v-layout>
+	</v-layout>
+</template>
+
+<script>
+import PuiGridFilterRule from './PuiGridFilterRule';
+
+export default {
+	name: 'PuiGridFilterGroup',
+	components: {
+		PuiGridFilterRule
+	},
+	props: {
+		columns: {
+			type: Array,
+			required: true
+		},
+		groupName: {
+			type: String
+		},
+		rulesProp: {
+			type: Array
+		},
+		groupOpProp: {
+			type: String
+		},
+		groupsProp: {
+			type: Array
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		showSubgroupBtn: {
+			type: Boolean
+		}
+	},
+	data() {
+		return {
+			rules: [],
+			groups: [],
+			groupOp: 'or',
+			showDeleteRule: null,
+			showGroupBtns: null,
+			groupOperators: [
+				{
+					text: 'and',
+					value: 'and'
+				},
+				{
+					text: 'or',
+					value: 'or'
+				}
+			]
+		};
+	},
+	computed: {
+		isFirstGroup() {
+			if (this.groups.length === 1) {
+				return true;
+			}
+			return false;
+		},
+		isGroup0() {
+			return this.groupName === '0';
+		}
+	},
+	created() {
+		this.translateGroupOperators();
+		if (this.groupOpProp && this.groupsProp && this.rulesProp) {
+			this.groupOp = this.groupOpProp;
+			this.groups = this.groupsProp;
+			this.rules = this.rulesProp;
+			this.groups.forEach((element) => (element.index = this.getUniqueIndex()));
+			this.rules.forEach((element) => (element.index = this.getUniqueIndex()));
+		}
+	},
+	mounted() {
+		this.$puiEvents.$on('reset-filtering', this.reset);
+		this.$puiEvents.$on(`groupRemoved-${this.groupName}`, this.onGroupRemoved);
+		if (!this.groupsProp && this.isGroup0 === true && !this.groupComp) {
+			this.addSubGroup();
+		} else if (!this.groupsProp && this.groupName === '0-0' && this.rules.length === 0) {
+			this.addRule();
+		}
+	},
+	destroyed() {
+		this.$puiEvents.$off('reset-filtering', this.reset);
+		this.$puiEvents.$off(`groupRemoved-${this.groupName}`);
+	},
+	methods: {
+		getUniqueIndex() {
+			let numberSTR = Math.random().toString().replace('.', Math.random().toString().replace('.', '').substring(0, 10)).substring(0, 20);
+			let numberInt = parseInt(numberSTR).toFixed();
+			let integer = parseInt(numberInt);
+			return integer;
+		},
+		translateGroupOperators() {
+			for (let i = 0, length = this.groupOperators.length; i < length; i++) {
+				this.groupOperators[i].text = this.$t(this.groupOperators[i].text);
+			}
+		},
+		reset() {
+			this.rules = [];
+			this.groups = [];
+			for (var ruleOrGroup in this.$refs) {
+				delete this.$refs[ruleOrGroup];
+			}
+			this.addSubGroup();
+		},
+		addRule() {
+			this.rules.push({ index: this.getUniqueIndex() });
+		},
+		addSubGroup() {
+			this.groups.push({ index: this.getUniqueIndex() });
+		},
+		removeRule(index) {
+			delete this.$refs[`rule${index}`];
+			this.rules.splice(
+				this.rules.findIndex((rule) => rule.index === index),
+				1
+			);
+		},
+		onGroupRemoved(index) {
+			delete this.$refs[`group${index}`];
+			this.groups.splice(
+				this.groups.findIndex((group) => group.index === index),
+				1
+			);
+
+			if (this.isGroup0 && this.groupsProp) {
+				this.groups = this.groupsProp;
+			}
+		},
+		removeGroup() {
+			//Obtenemos el indice de grupo de sí mismo
+			const array = this.groupName.split('-');
+			//el indice de grupo es el numero más a la derecha del nombre (separados por -)
+			const index = array[array.length - 1];
+			//el nombre del padre es el groupName quitandole '-' + index
+			const parentGroupName = array.slice(0, -1).join('-') || array[0];
+			//publicamos el evento y el grupo padre se encargará de borrar este grupo
+			this.$puiEvents.$emit(`groupRemoved-${parentGroupName}`, index);
+		}
+	}
+};
+</script>
+
+<style lang="postcss" scoped>
+.dragger {
+	height: 24px !important;
+	width: 20px !important;
+	min-width: 20px !important;
+	padding-left: 3px !important;
+	padding-right: 3px !important;
+	color: var(--N-100) !important;
+	cursor: move !important;
+	&:hover {
+	}
+}
+.btnGroup {
+	height: 28px !important;
+	color: var(--N-500);
+	& span {
+		padding-left: 6px;
+	}
+}
+.puiGridFilterGroup {
+	background-color: var(--N-10);
+	border-radius: 5px;
+	&__groupOperator {
+		height: 50px;
+	}
+	&__bottombar {
+	}
+	& .bottomtoolbar {
+		background-color: transparent !important;
+	}
+	& .puiGridFilterGroup {
+		background-color: var(--N-0);
+		margin-left: 11px;
+		margin-right: 5px;
+		border-width: 1px;
+		border-style: solid;
+		border-color: var(--N-100);
+		& .v-toolbar,
+		.v-btn {
+			background-color: var(--N-0);
+		}
+
+		& .puiGridFilterGroup {
+			background-color: var(--N-10);
+			margin-left: 11px;
+			margin-right: 5px;
+			& .v-toolbar,
+			.v-btn {
+				background-color: var(--N-10);
+			}
+			& .puiGridFilterGroup {
+				background-color: var(--N-0);
+				margin-left: 11px;
+				margin-right: 5px;
+				& .v-toolbar,
+				.v-btn {
+					background-color: var(--N-0);
+				}
+				& .puiGridFilterGroup {
+					background-color: var(--N-10);
+					margin-left: 11px;
+					margin-right: 5px;
+					& .v-toolbar,
+					.v-btn {
+						background-color: var(--N-10);
+					}
+				}
+			}
+		}
+	}
+}
+.puiFilter__group {
+	padding-left: 15px;
+	background-color: var(--N-10);
+	border-radius: 3px;
+}
+</style>

package/src/components/desktop/toolbar/filtering/PuiGridFilterListBtn.vue

@@ -0,0 +1,85 @@
+<template>
+	<div ref="btn">
+		<label v-if="label && !$store.getters.isMobile">{{ label }}</label>
+		<v-btn
+			v-if="!$store.getters.isMobile"
+			class="pui-toolbar__btn elevation-0"
+			:class="compClass"
+			@click.native.stop="states.active = !states.active"
+		>
+			<span>{{ $t('puidatatables.filters') }}</span>
+			<span class="ml-2">
+				<v-icon v-if="!states.active" small>fa fa-angle-down</v-icon>
+				<v-icon v-else small>fa fa-angle-up</v-icon>
+			</span>
+		</v-btn>
+		<v-btn v-else class="pui-toolbar__btn elevation-0" :class="compClass" @click.native.stop="states.active = !states.active">
+			<v-icon x-small>fas fa-filter</v-icon>
+		</v-btn>
+		<label v-if="label && $store.getters.isMobile">{{ label }}</label>
+		<pui-grid-filter-list-dialog
+			:modelName="modelName"
+			:position="panel.position"
+			v-show="states.active"
+			:visibility="states.active"
+		></pui-grid-filter-list-dialog>
+	</div>
+</template>
+
+<script>
+import PuiGridFilterListDialog from './PuiGridFilterListDialog';
+import PuiToolbarBtnMixin from '../../../../mixins/PuiToolbarBtnMixin';
+
+export default {
+	name: 'PuiGridFilterListBtn',
+	mixins: [PuiToolbarBtnMixin],
+	components: {
+		PuiGridFilterListDialog
+	},
+	data() {
+		return {
+			idTool: 'filterlist',
+			panel: {
+				position: {}
+			},
+			label: ''
+		};
+	},
+	props: {
+		modelName: {
+			type: String,
+			required: true
+		}
+	},
+	mounted() {
+		this.$puiEvents.$on(`onPui-apply-storedFilter-${this.modelName}`, (params) => {
+			if (params && params.length > 1) {
+				// params[0] == filter
+				this.label = (params[0] && params[0].label) || '';
+				this.prevLabel = this.label;
+			}
+		});
+		this.$puiEvents.$on(`onPui-disapply-storedFilter-${this.modelName}`, () => {
+			this.label = '';
+			this.prevLabel = '';
+		});
+		this.$puiEvents.$on(`onPui-toggle-filtering-${this.modelName}`, (params) => {
+			if (params && params.length > 1) {
+				// params[1] == cheched
+				const val = params[1];
+				if (val === false) {
+					this.prevLabel = this.label;
+					this.label = '';
+				} else {
+					this.label = this.prevLabel;
+				}
+			}
+		});
+	},
+	destroyed() {
+		this.$puiEvents.$off(`onPui-apply-storedFilter-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-disapply-storedFilter-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-toggle-filtering-${this.modelName}`);
+	}
+};
+</script>

package/src/components/desktop/toolbar/filtering/PuiGridFilterListDialog.vue

@@ -0,0 +1,254 @@
+<template>
+	<div class="puiGridFilterListDialog elevation-5" :ref="'dialog'" @click.stop>
+		<v-layout wrap class="mb-1">
+			<v-tabs centered grow v-model="tabActive" slider-color="primary" ref="tabs">
+				<v-tab href="#tab1" ref="tab1">{{ $t('puidatatables.user') }}</v-tab>
+				<v-tab href="#tab2" ref="tab2">{{ $t('puidatatables.system') }}</v-tab>
+
+				<v-tab-item value="tab1" class="mt-2">
+					<pui-text-field
+						id="searchFilter5"
+						class="ma-1 mr-2 ml-2"
+						:placeholder="getPlaceholder"
+						v-model="search1"
+						clearable
+						prepend-inner-icon="far fa-search"
+						noeditable
+						realtime
+					></pui-text-field>
+					<div>
+						<pui-grid-filter-list-item
+							v-for="filter in filteredUser"
+							:key="filter.id"
+							:model="filter"
+							typeFilter="user"
+							:ref="`user-${filter.id}`"
+						></pui-grid-filter-list-item>
+					</div>
+				</v-tab-item>
+				<v-tab-item value="tab2" class="mt-2">
+					<pui-text-field
+						class="ma-1 mr-2 ml-2"
+						:placeholder="getPlaceholder"
+						v-model="search2"
+						clearable
+						prepend-inner-icon="far fa-search"
+						noeditable
+						realtime
+					></pui-text-field>
+					<div>
+						<pui-grid-filter-list-item
+							v-for="filter in filteredSystem"
+							:key="filter.id"
+							:model="filter"
+							typeFilter="system"
+							:ref="`system-${filter.id}`"
+						></pui-grid-filter-list-item>
+					</div>
+				</v-tab-item>
+			</v-tabs>
+		</v-layout>
+	</div>
+</template>
+
+<script>
+import PuiToolbarDialogMixin from '../../../../mixins/PuiToolbarDialogMixin';
+import PuiGridFilterListItem from './PuiGridFilterListItem';
+
+export default {
+	name: 'PuiGridFilterListDialog',
+	components: {
+		PuiGridFilterListItem
+	},
+	mixins: [PuiToolbarDialogMixin],
+	props: {
+		position: {
+			type: Object
+		},
+		modelName: {
+			type: String,
+			required: true
+		},
+		visibility: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			filters: {
+				user: [],
+				system: []
+			},
+			filteredUser: null,
+			filteredSystem: null,
+			search1: '',
+			search2: '',
+			tabActive: 'tab2',
+			userFilterModelName: 'puiusermodelfilter',
+			firstLoad: true
+		};
+	},
+	mounted() {
+		if (this.$store.getters.isMobile) {
+			this.$refs.dialog.style.right = '0px';
+		}
+		const self = this;
+		this.$puiEvents.$on(`onPui-apply-storedFilter-${this.modelName}`, (params) => {
+			// params[0] === filter object selected, can be null
+			// params[1] === true or false (checked or not)
+			if (params && params.length > 0 && params[0] != null) {
+				self.filterId = params[0].id;
+				self.isSystemFilter = params[0].isSystemFilter;
+			}
+			self.filters.user.forEach((fil) => {
+				if (fil.id === self.filterId && !self.isSystemFilter) {
+					fil.checked = params[1];
+				} else {
+					fil.checked = false;
+				}
+				console.log('Filtros de usuario: ', fil.label + ' ' + fil.checked);
+			});
+			self.filters.system.forEach((fil) => {
+				if (fil.id === self.filterId && self.isSystemFilter) {
+					fil.checked = params[1];
+				} else {
+					fil.checked = false;
+				}
+				console.log('Filtros de sistema: ', fil.label + ' ' + fil.checked);
+			});
+
+			self.filteredUser = self.filters.user;
+			self.filteredSystem = self.filters.system;
+		});
+		this.$puiEvents.$on(`onPui-insertRow-dataTable-${this.userFilterModelName}`, (theNewFilter) => {
+			//por si hay más de un grid en el componente comprobamos que añadimos en el filterListDialog correcto
+			if (theNewFilter.model === self.modelName) {
+				self.filters.user.push(theNewFilter);
+				self.filters.user.sort((filter1, filter2) => {
+					return filter1.label1 > filter2.label;
+				});
+				self.filteredUser = self.filters.user;
+				const modelConfig = self.$store.getters.getModelByName(self.modelName);
+				modelConfig.userFilters = self.filters.user;
+				modelConfig.currentFilter = theNewFilter;
+				this.$puiEvents.$emit(`onPui-apply-storedFilter-${self.modelName}`, [theNewFilter, true]);
+			}
+		});
+		this.$puiEvents.$on(`onPui-deleteRow-dataTable-${this.userFilterModelName}`, (theFilter) => {
+			const modelConfig = self.$store.getters.getModelByName(self.modelName);
+			self.filters.user.forEach((filter, index) => {
+				if (theFilter.id === filter.id) {
+					self.filters.user.splice(index, 1);
+					self.filteredUser = self.filters.user;
+					modelConfig.userFilters = self.filters.user;
+					if (modelConfig.currentFilter && modelConfig.currentFilter.id === theFilter.id) {
+						modelConfig.currentFilter = null;
+						this.$puiEvents.$emit(`onPui-apply-filtering-${self.modelName}`, null);
+						this.$puiEvents.$emit(`onPui-disapply-storedFilter-${self.modelName}`);
+					}
+					//eslint-disable-next-line no-useless-return
+					return;
+				}
+			});
+		});
+		this.$puiEvents.$on(`onPui-updateRow-dataTable-${this.userFilterModelName}`, (theFilter) => {
+			//por si hay más de un grid en el componente comprobamos que editamos en el filterListDialog correcto
+			if (theFilter.model === self.modelName) {
+				const modelConfig = self.$store.getters.getModelByName(self.modelName);
+				self.filters.user.forEach((filter, index) => {
+					if (filter.id === theFilter.id) {
+						self.filters.user[index] = theFilter;
+						modelConfig.userFilters = self.filters.user;
+						modelConfig.currentFilter = theFilter;
+						this.$puiEvents.$emit(`onPui-apply-storedFilter-${self.modelName}`, [theFilter, true]);
+						//eslint-disable-next-line no-useless-return
+						return;
+					}
+				});
+				self.filters.user = self.filters.user.map((filter) => {
+					return filter;
+				});
+				self.filteredUser = self.filters.user;
+			}
+		});
+
+		this.getData();
+		this.calculatePosition();
+	},
+	updated() {
+		this.calculatePosition();
+	},
+	destroyed() {
+		this.$puiEvents.$off(`onPui-insertRow-dataTable-${this.userFilterModelName}`);
+		this.$puiEvents.$off(`onPui-updateRow-dataTable-${this.userFilterModelName}`);
+		this.$puiEvents.$off(`onPui-deleteRow-dataTable-${this.userFilterModelName}`);
+		this.$puiEvents.$off(`onPui-apply-storedFilter-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-apply-filtering-${this.modelName}`);
+	},
+	computed: {
+		getPlaceholder() {
+			return this.$t('puidatatables.searchPlaceholder');
+		},
+		onPuiModelsLoadedAndSaved() {
+			return this.$store.state.modelsLoadedAndSaved;
+		}
+	},
+	watch: {
+		onPuiModelsLoadedAndSaved() {
+			if (this.modelConfig === undefined) {
+				this.getData();
+			}
+		},
+		search1(val) {
+			if (val && val.length > 0) {
+				this.filteredUser = this.filters.user.filter((filter) => {
+					return filter.label.toUpperCase().match(val.toUpperCase());
+				});
+			} else {
+				this.filteredUser = this.filters.user;
+			}
+		},
+		search2(val) {
+			if (val && val.length > 0) {
+				this.filteredSystem = this.filters.system.filter((filter) => {
+					return filter.label.toUpperCase().match(val.toUpperCase());
+				});
+			} else {
+				this.filteredSystem = this.filters.system;
+			}
+		},
+		visibility(val) {
+			// HACK GET STYLE FIRST TAB
+			if (val && this.firstLoad) {
+				this.firstLoad = false;
+				this.$refs.tabs.$emit('change', 'tab1');
+			}
+		}
+	},
+	methods: {
+		getData() {
+			this.modelConfig = this.$store.getters.getModelByName(this.modelName);
+			if (this.modelConfig === undefined) {
+				return;
+			}
+			this.filteredUser = this.filters.user = this.modelConfig.userFilters;
+			this.filteredSystem = this.filters.system = this.modelConfig.modelFilters;
+		}
+	}
+};
+</script>
+<style lang="postcss" scoped>
+.puiGridFilterListDialog {
+	background-color: var(--N-0);
+	position: absolute;
+	z-index: 8;
+	border-radius: 5px;
+	width: 260px;
+}
+</style>
+<style lang="postcss">
+.searchFilter .v-input__icon.v-input__icon--clear .v-icon {
+	margin-top: 12px !important;
+}
+</style>