pui9-datatables 1.16.4

package/src/components/desktop/toolbar/filtercombo/PuiGridFilterCombo.vue

@@ -0,0 +1,237 @@
+<template>
+	<v-layout justify-end @click="changeState()">
+		<pui-select
+			v-for="filterConfig in filterCombo"
+			:key="filterConfig.id"
+			toplabel
+			noeditable
+			clearable
+			hideDetails
+			v-model="gridFilterModel"
+			:id="filterConfig.id"
+			:attach="filterConfig.id"
+			:modelName="getModelNameByConfig(filterConfig)"
+			:itemsToSelect="getItemsToSelect(filterConfig)"
+			:modelFormMapping="getModelFormMapping(filterConfig)"
+			:itemValue="filterConfig.search.value"
+			:itemText="filterConfig.search.text"
+			:placeholder="getPlaceHolder(filterConfig)"
+			:filterId="getFilterId(filterConfig)"
+			:filterMap="getFilterMap(filterConfig)"
+			:filterParentMap="getFilterParentMap(filterConfig)"
+			:order="filterConfig.search.order"
+			:style="getFilterComboStyles(filterConfig)"
+		></pui-select>
+	</v-layout>
+</template>
+
+<script>
+import PuiToolbarBtnMixin from '../../../../mixins/PuiToolbarBtnMixin';
+
+export default {
+	name: 'PuiGridFilterCombo',
+	mixins: [PuiToolbarBtnMixin],
+	data() {
+		return {
+			idTool: 'gridfiltercombo',
+			gridFilterProperties: [],
+			gridFilterModel: {},
+			gridFilterName: null,
+			propertiesArray: null
+		};
+	},
+	props: {
+		modelName: {
+			type: String,
+			required: true
+		},
+		filterCombo: {
+			type: Array,
+			required: true
+		}
+	},
+	created() {
+		this.model = this.$store.getters.getModelByName(this.modelName);
+
+		this.fillGridFilterModelFromStore();
+		this.subscribeToGridFilterModelChanges();
+	},
+	beforeDestroy() {
+		for (let i = 0, length = this.filterCombo.length; i < length; i++) {
+			const fieldName = this.filterCombo[i].id;
+			this.$puiEvents.$off(`onPuiSelect_selectedItems-${fieldName}`);
+		}
+	},
+	computed: {
+		getFilterMap() {
+			return (config) => {
+				let filterMap = null;
+				const columnValue = config.relatedCombo && config.relatedCombo.id;
+				const searchColumnName = config.search.related;
+				if (columnValue && searchColumnName) {
+					filterMap = {};
+					filterMap[searchColumnName] = this.gridFilterModel[columnValue];
+					filterMap = Object.assign({}, filterMap);
+				}
+				return filterMap;
+			};
+		},
+		getFilterParentMap() {
+			return (config) => {
+				let filterParentMap = null;
+				const searchColumnName = config.search.related;
+				const relatedColumnName = config.relatedCombo && config.relatedCombo.toColumn;
+				if (searchColumnName && relatedColumnName) {
+					filterParentMap = {};
+					filterParentMap[searchColumnName] = relatedColumnName;
+					filterParentMap = Object.assign({}, filterParentMap);
+				}
+				return filterParentMap;
+			};
+		}
+	},
+	methods: {
+		getModelNameByConfig(config) {
+			return config.search.model;
+		},
+		getItemsToSelect(config) {
+			const item = {};
+			if (!Array.isArray(config.search.value)) {
+				item[config.search.value] = this.gridFilterModel[config.local.value];
+			} else {
+				for (let i = 0, length = config.search.value.length; i < length; i++) {
+					item[config.search.value[i]] = this.gridFilterModel[config.local.value[i]];
+				}
+			}
+			return [item];
+		},
+		getModelFormMapping(config) {
+			const item = {};
+			if (!Array.isArray(config.search.value)) {
+				item[config.search.value] = config.local.value;
+			} else {
+				for (let i = 0, length = config.search.value.length; i < length; i++) {
+					item[config.search.value[i]] = config.local.value[i];
+				}
+			}
+			return item;
+		},
+		getPlaceHolder(config) {
+			return this.$t('filtercombo' + '.' + config.id);
+		},
+		getFilterId(config) {
+			return config.relatedCombo && config.relatedCombo.id;
+		},
+		/*
+		 * Fill the gridFilterModel for each filterCombo.
+		 * Only if not exist the gridFilterComboModel in the store,
+		 * save gridFilterModel with null values in filterCombo.filterComboModel variable.
+		 */
+		fillGridFilterModelFromStore() {
+			for (let i = 0, length = this.filterCombo.length; i < length; i++) {
+				if (!Array.isArray(this.filterCombo[i].local.value)) {
+					this.gridFilterProperties.push(this.filterCombo[i].local.value);
+					this.gridFilterModel[this.filterCombo[i].local.value] = null;
+				} else {
+					for (let j = 0; j < this.filterCombo[i].local.value.length; j++) {
+						this.gridFilterProperties.push(this.filterCombo[i].local.value[j]);
+						this.gridFilterModel[this.filterCombo[i].local.value[j]] = null;
+					}
+				}
+				if (this.gridFilterName === null) {
+					this.gridFilterName = this.filterCombo[i].search.model;
+				} else {
+					if (!this.$store.getters.isMobile) {
+						this.gridFilterName += '_' + this.filterCombo[i].search.model;
+					}
+				}
+			}
+
+			this.gridFilterModel = Object.assign({}, this.gridFilterModel);
+
+			const gridFilterComboModel = this.$store.getters.getGridFilterComboModelByName(this.gridFilterName);
+			if (gridFilterComboModel) {
+				this.gridFilterModel = Object.assign({}, gridFilterComboModel);
+			}
+		},
+		/*
+		 * Subscribe to PuiSelect changes for each filterCombo.
+		 * When PuiSelect changes:
+		 * - save gridFilterComboModel in store,
+		 * - create PUI9 filter from gridFilterModel and
+		 * - publish PUI9 filter for grid reloading
+		 */
+		subscribeToGridFilterModelChanges() {
+			for (let i = 0, length = this.filterCombo.length; i < length; i++) {
+				const fieldName = this.filterCombo[i].id;
+
+				this.$puiEvents.$off(`onPuiSelect_selectedItems-${fieldName}`);
+				this.$puiEvents.$on(`onPuiSelect_selectedItems-${fieldName}`, () => {
+					this.saveGridFilterModel();
+					const gridFilter = this.createPUI9FilterByGridFilterModel();
+					if (!this.filterApplied(gridFilter)) {
+						this.model.currentFilterComboName = this.gridFilterName;
+						this.model.currentFilterCombo = gridFilter;
+						!gridFilter && this.removeGridFilterModelInModelsStore();
+						this.$puiEvents.$emit(`onPui-apply-filtercombo-${this.modelName}`, gridFilter);
+					}
+				});
+			}
+		},
+		/*
+		 * Save gridFilterModel in the store.
+		 */
+		saveGridFilterModel() {
+			this.$store.commit('addGridFilterComboModel', {
+				name: this.gridFilterName,
+				model: this.gridFilterModel
+			});
+			this.$store.commit('saveModelNameWithGridFilterComboName', {
+				modelName: this.modelName,
+				gridFilterComboName: this.gridFilterName
+			});
+		},
+		/*
+		 * Create PUI9 filter from the gridFilterModel values.
+		 */
+		createPUI9FilterByGridFilterModel() {
+			const rules = [];
+			for (const property in this.gridFilterModel) {
+				for (let j = 0; j < this.gridFilterProperties.length; j++) {
+					const gridProperty = this.gridFilterProperties[j];
+					if (property === gridProperty) {
+						const value = this.gridFilterModel[property];
+						if (value) {
+							rules.push({ field: property, op: 'eq', data: value });
+						}
+					}
+				}
+			}
+
+			if (rules.length === 0) {
+				return null;
+			}
+			return { groups: [], groupOp: 'and', rules: rules };
+		},
+		filterApplied(gridFilter) {
+			return this.model.currentFilterComboName && JSON.stringify(this.model.currentFilterCombo) === JSON.stringify(gridFilter);
+		},
+		removeGridFilterModelInModelsStore() {
+			const allModels = this.$store.state.models;
+
+			for (const property in allModels) {
+				const model = allModels[property];
+				if (model.currentFilterComboName === this.gridFilterName) {
+					model.currentFilterCombo = null;
+				}
+			}
+		},
+		getFilterComboStyles(config) {
+			return this.$store.state.filterComboStyles && this.$store.state.filterComboStyles[config.id];
+		},
+		changeState() {
+			this.states.active = true;
+		}
+	}
+};
+</script>

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

@@ -0,0 +1,163 @@
+<template>
+	<div class="pui-toolbar__multiBtn" :class="compClass">
+		<div ref="btn">
+			<v-btn
+				class="elevation-0 pui-toolbar__btn pui-toolbar__miniBtn"
+				@click.native="toggleFilter(!states.applied, true)"
+				:class="compClass"
+				:title="$t('puidatatables.toogleFilter')"
+			>
+				<v-icon small>fa fa-filter</v-icon>
+			</v-btn>
+			<div class="pui-toolbar__multiBtnSeparator">|</div>
+			<v-btn
+				class="elevation-0 pui-toolbar__btn pui-toolbar__superMiniBtn"
+				@click.native.stop="states.active = !states.active"
+				:class="compClass"
+			>
+				<v-icon v-if="!states.active" small>fa fa-angle-down</v-icon>
+				<v-icon v-else small>fa fa-angle-up</v-icon>
+			</v-btn>
+		</div>
+		<pui-grid-filter-dialog
+			v-if="columns.length > 0 && panel.position.right && states.active"
+			:columns="columns"
+			:modelName="modelName"
+			:position="panel.position"
+		></pui-grid-filter-dialog>
+	</div>
+</template>
+
+<script>
+import PuiGridFilterDialog from './PuiGridFilterDialog';
+import PuiToolbarBtnMixin from '../../../../mixins/PuiToolbarBtnMixin';
+
+export default {
+	name: 'PuiGridFilterBtns',
+	mixins: [PuiToolbarBtnMixin],
+	components: {
+		PuiGridFilterDialog
+	},
+	props: {
+		columns: {
+			type: Array,
+			required: true
+		},
+		modelName: {
+			type: String
+		}
+	},
+	data() {
+		return {
+			idTool: 'filter',
+			panel: {
+				position: {}
+			},
+			modalDialog: {
+				showDialog: false,
+				disabled: false
+			},
+			//the filter object in db
+			model: null
+		};
+	},
+	mounted() {
+		this.$puiEvents.$on(`onPui-apply-storedFilter-${this.modelName}`, (params) => {
+			if (params && params.length > 0 && params[0] != null) {
+				this.model = params[0];
+				this.model.checked = params[1] !== undefined ? params[1] : false;
+				this.model.filter = Object.assign({}, this.model.filter instanceof Object ? this.model.filter : JSON.parse(this.model.filter));
+				const modelConfig = this.$store.getters.getModelByName(this.modelName);
+				modelConfig.currentFilter = this.model;
+			}
+		});
+		this.$puiEvents.$on(`onPui-disapply-storedFilter-${this.modelName}`, () => {
+			const modelConfig = this.$store.getters.getModelByName(this.modelName);
+			if (modelConfig.currentFilter) {
+				modelConfig.currentFilter.checked = false;
+			}
+		});
+		this.$puiEvents.$on(`onPui-apply-filtering-${this.modelName}`, (theFilter) => {
+			let filterApplied = true;
+			if (theFilter) {
+				this.currentFilter = theFilter;
+			} else {
+				filterApplied = false;
+			}
+			!(this.skipNextToggle === true) && this.toggleFilter(filterApplied, false);
+			this.skipNextToggle = false;
+		});
+		this.$puiEvents.$on('onPui-readRow-dataTable-puiusermodelfilter', (data) => {
+			this.model = data;
+			this.model.filter = data.filter instanceof Object ? data.filter : JSON.parse(data.filter);
+			this.modalDialog.disabled = true;
+			this.modalDialog.showDialog = true;
+			this.$puiEvents.$on(`onPui-close-filtering-modalDialog-${this.modelName}`, () => {
+				this.$puiEvents.$off(`onPui-close-filtering-modalDialog-${this.modelName}`);
+				this.modalDialog.showDialog = false;
+			});
+		});
+		this.$puiEvents.$on('onPui-updateRow-dataTable-puiusermodelfilter', (data) => {
+			this.model = data;
+			this.model.filter = data.filter instanceof Object ? data.filter : JSON.parse(data.filter);
+			this.modalDialog.disabled = false;
+			this.modalDialog.showDialog = true;
+			this.$puiEvents.$on(`onPui-close-filtering-modalDialog-${this.modelName}`, () => {
+				this.$puiEvents.$off(`onPui-close-filtering-modalDialog-${this.modelName}`);
+				this.modalDialog.showDialog = false;
+			});
+		});
+		this.$puiEvents.$on('onPui-deleteRow-dataTable-puiusermodelfilter', (data) => {
+			if (this.model && this.model.id === data.id) {
+				this.model = null;
+				this.currentFilter = null;
+			}
+		});
+		this.onLoad();
+		this.calculateDialogPosition();
+	},
+	destroyed() {
+		this.$puiEvents.$off(`onPui-apply-storedFilter-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-disapply-storedFilter-${this.modelName}`);
+		this.$puiEvents.$off(`onPui-apply-filtering-${this.modelName}`);
+		this.$puiEvents.$off('onPui-readRow-dataTable-puiusermodelfilter');
+		this.$puiEvents.$off('onPui-updateRow-dataTable-puiusermodelfilter');
+		this.$puiEvents.$off('onPui-deleteRow-dataTable-puiusermodelfilter');
+	},
+	methods: {
+		onLoad() {
+			const modelConfig = this.$store.getters.getModelByName(this.modelName);
+			if (modelConfig && modelConfig.currentFilter) {
+				this.currentFilter = modelConfig.currentFilter.filter;
+				!(this.skipNextToggle === true) && this.toggleFilter(modelConfig.currentFilter.checked, false);
+				this.skipNextToggle = false;
+			}
+		},
+		toggleFilter(value, publish) {
+			this.states.applied = value;
+			let filter = null;
+			if (this.states.applied === true) {
+				if (!this.currentFilter) {
+					this.states.applied = false;
+				}
+				filter = this.currentFilter;
+			}
+			this.skipNextToggle = true;
+			const theModel = this.$store.getters.getModelByName(this.modelName);
+			if (theModel !== undefined) {
+				theModel.hasActiveFilter = this.states.applied;
+			}
+			if (publish === true) {
+				if (filter) {
+					this.$puiEvents.$emit(`onPui-apply-storedFilter-${this.modelName}`, [theModel.currentFilter, this.states.applied]);
+				} else {
+					this.$puiEvents.$emit(`onPui-disapply-storedFilter-${this.modelName}`);
+				}
+				this.$puiEvents.$emit(`onPui-apply-filtering-${this.modelName}`, filter);
+				this.$puiEvents.$emit(`onPui-toggle-filtering-${this.modelName}`, [theModel.currentFilter, this.states.applied]);
+				this.states.active = false;
+			}
+		}
+	}
+};
+</script>