pui9-datatables 1.16.4

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

@@ -0,0 +1,434 @@
+<template>
+	<div class="pui-dialog elevation-5" ref="dialog" @click.stop>
+		<v-layout wrap>
+			<v-flex xs-12>
+				<v-card flat raised>
+					<v-card-text class="ma-0 pt-2 pl-2 pr-2">
+						<!-- slot1, TODO MAKE SLOTS IN FILTER AND SORTING DIALOGS-->
+						<!-- HEADER -->
+						<v-layout :ref="'header'" wrap>
+							<v-toolbar class="elevation-0 pui-dialog__bar" height="50">
+								<v-toolbar-title class="pui-dialog__title pui-dialog__title--margin pui-dialog__margin">{{
+									getTitle
+								}}</v-toolbar-title>
+								<v-btn
+									v-if="showSqlBtn"
+									class="pui-dialog__toolbarBtn pui-dialog__toolbarBtn--text elevation-0"
+									@click="goSqlFilter()"
+									:class="compSqlClass"
+									>SQL</v-btn
+								>
+								<v-spacer></v-spacer>
+								<v-btn
+									v-show="!saving && disabled === false && saveDisabled === false"
+									class="pui-dialog__toolbarBtn elevation-0"
+									@click="goSaveMode()"
+								>
+									<v-icon small>fa fa-save</v-icon>
+								</v-btn>
+								<v-btn v-if="saving" text class="pui-dialog__toolbarBtn elevation-0 mr-2" @click="cancelSave()">
+									<v-icon>far fa-times</v-icon>
+								</v-btn>
+							</v-toolbar>
+						</v-layout>
+						<div class="pb-3" v-show="saving === true" ref="form">
+							<v-flex xs12 class="pl-3">
+								<v-list-item-action-text class="puiToolbar__text">{{ $t('puidatatables.nameFilter') }}</v-list-item-action-text>
+							</v-flex>
+							<v-flex xs12>
+								<v-list-item>
+									<v-text-field
+										v-model="model.label"
+										single-line
+										:rules="[filterNameRequired]"
+										:error="filterNameRequiredError"
+										ref="filterName"
+									></v-text-field>
+								</v-list-item>
+							</v-flex>
+						</div>
+						<div v-show="!showSql" class="pui-dialog__ruleContainer ml-2 mr-2" @scroll="handleScroll">
+							<pui-grid-filter-group
+								:ref="'group0'"
+								:columns="columns"
+								:groupName="'0'"
+								:rulesProp="filterToBuild ? filterToBuild.rules : undefined"
+								:groupOpProp="filterToBuild ? filterToBuild.groupOp : undefined"
+								:groupsProp="filterToBuild ? filterToBuild.groups : undefined"
+								:disabled="disabled"
+								:showSubgroupBtn="showSubgroupBtn"
+							></pui-grid-filter-group>
+						</div>
+						<div v-show="showSql" class="pui-dialog__sqlContainer ml-2 mr-2 mt-2">
+							<v-textarea filled name="input-7-4" label v-model="sql" class="elevation-0" height="200" no-resize></v-textarea>
+						</div>
+						<!-- slot1-->
+					</v-card-text>
+					<!-- saving mode-->
+					<v-card-actions v-if="saving === true" class="pl-1 pr-1 pb-1" :ref="'btnBar'">
+						<v-btn text @click="cancelSave()" class="elevation-0">{{ $t('form.cancel') }}</v-btn>
+						<v-spacer></v-spacer>
+						<v-btn color="primary" @click="checkFilterNameBeforeSave()" class="elevation-0">{{ $t('form.save') }}</v-btn>
+					</v-card-actions>
+					<!--reseting mode-->
+					<v-card-actions v-else-if="resetting === true" class="pl-4 pr-1 pb-1" :ref="'btnBar'">
+						<div class="pr-2">{{ $t('puidatatables.resetFilterQuestion') }}</div>
+						<v-btn text @click="resetting = false" class="elevation-0">{{ $t('form.cancel') }}</v-btn>
+						<v-btn color="red" dark @click="reset();publishFiltering()" class="elevation-0">{{ $t('puidatatables.reset') }}</v-btn>
+					</v-card-actions>
+					<!-- normal mode-->
+					<v-card-actions v-else class="pr-1 pl-1 pb-1" :ref="'btnBar'">
+						<v-btn text outlined @click="resetting = true" class="elevation-0">{{ $t('puidatatables.reset') }}</v-btn>
+						<v-spacer></v-spacer>
+						<v-btn color="primary" @click="publishFiltering()" class="elevation-0">{{ $t('form.apply') }}</v-btn>
+					</v-card-actions>
+				</v-card>
+			</v-flex>
+		</v-layout>
+		<pui-modal-dialog
+			v-if="dialogs.saveFilterAlert"
+			:cancelText="$t('form.cancel')"
+			:okText="$t('form.ok')"
+			:titleText="`${$t('puidatatables.saveFilter')}: ${model.label}`"
+			:messageText="$t('puidatatables.overwriteFilterQuestion')"
+			:dialogName="`saveFilterAlert-${this.modelName}`"
+		></pui-modal-dialog>
+	</div>
+</template>
+
+<script>
+import PuiGridFilterGroup from './PuiGridFilterGroup';
+import PuiGridFormMethodsMixin from '../../../../mixins/PuiGridFormMethodsMixin';
+import PuiToolbarDialogMixin from '../../../../mixins/PuiToolbarDialogMixin';
+
+export default {
+	name: 'PuiGridFilterDialog',
+	mixins: [PuiGridFormMethodsMixin, PuiToolbarDialogMixin],
+	components: {
+		PuiGridFilterGroup
+	},
+	props: {
+		columns: {
+			type: Array,
+			default: () => [],
+			required: true
+		},
+		position: {
+			type: Object
+		},
+		modelName: {
+			//the name of the model of the grid
+			type: String,
+			required: true
+		},
+		//for the view mode
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		saveDisabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			showSql: false,
+			showFilterGroup: true,
+			sql: '',
+			width: 600,
+			showByIndex: null,
+			saving: false,
+			resetting: false,
+			modelDependencyName: 'puiusermodelfilter',
+			method: 'create',
+			isModal: false,
+			createGroup0: true,
+			dialogs: {
+				saveFilterAlert: false
+			},
+			filterNameRequired: (value) => !!value || this.$t('pui9.error.field_required'),
+			filterNameRequiredError: false,
+			showSqlBtn: false,
+			showSubgroupBtn: true
+		};
+	},
+	mounted() {
+		this.calculatePosition();
+	},
+	created() {
+		const theModel = this.$store.getters.getModelByName(this.modelName);
+		const currentFilter = theModel !== undefined ? theModel.currentFilter : theModel;
+		if (currentFilter !== undefined && currentFilter !== null && currentFilter.checked) {
+			this.currentFilter = JSON.parse(JSON.stringify(currentFilter.filter));
+			this.model = JSON.parse(JSON.stringify(currentFilter));
+			if (this.model.id && !currentFilter.isSystemFilter) {
+				this.method = 'update';
+			}
+			theModel.hasFilterActive &&
+				theModel.noStoredFilterActive === true &&
+				this.$puiEvents.$emit(`onPui-apply-filtering-${this.modelName}`, this.model.filter);
+		}
+
+		this.getPuiVariables();
+		this.subscribeToModalDialogsEvents();
+	},
+	destroyed() {
+		this.isModal === false && this.$puiEvents.$off(`onPui-closed-gridFilter-${this.modelName}`);
+		this.unsubscribeToModalDialogEvent(`pui-modalDialog-saveFilterAlert-${this.modelName}`);
+	},
+	beforeDestroy() {
+		this.destroying = true;
+	},
+	updated() {
+		this.calculatePosition();
+	},
+	computed: {
+		compSqlClass() {
+			return {
+				'pui-dialog__toolbarBtn--text--selected': this.showSql
+			};
+		},
+		getTitle() {
+			if (this.model && this.model.id !== undefined && this.model.id !== null) {
+				return this.$t('puidatatables.editFilter');
+			} else if (this.saving === true) {
+				return this.$t('puidatatables.saveFilter');
+			}
+			return this.$t('puidatatables.filter');
+		},
+		filterToBuild() {
+			return this.currentFilter;
+		}
+	},
+	methods: {
+		/* overwrites the getData of the formMethodsMixins in order to not make a get Request to the puiusermodelfilter controller
+		because it has not get?pk service the grid configuration provides the filters and the filter get passed as a property in this component */
+		getData() {
+			//empty, but don't delete it
+		},
+		goSqlFilter() {
+			this.showSql = !this.showSql;
+		},
+		goSaveMode() {
+			this.saving = true;
+			this.$nextTick(() => this.$refs.filterName.$el.focus());
+			this.$refs.form.validate = () => {
+				const formValid = this.model.filter && this.model.label;
+				if (!formValid) {
+					this.filterNameRequiredError = true;
+				}
+				return formValid;
+			};
+			this.model.model = this.modelName;
+			this.model.usr = this.$store.getters.getUser;
+			this.model.filter = JSON.stringify(this.retrieveGroupsData());
+			this.previousModelLabel = this.model.label;
+		},
+		cancelSave() {
+			this.saving = false;
+			this.isModal === true && this.$puiEvents.$emit(`onPui-close-filtering-modalDialog-${this.modelName}`);
+		},
+		beforeSave() {
+			this.model.filter = JSON.stringify(this.retrieveGroupsData());
+		},
+		handleScroll(event) {
+			const el = event.srcElement;
+			const classPrefix = 'pui-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`);
+		},
+		retrieveGroupsData() {
+			//
+			const isRule = function (name) {
+				return name.startsWith('rule');
+			};
+			let validFilter = true;
+			let almenosUnaRegla = false;
+			//funcion recursiva que recorre los subgrupos hasta el final mientras queden
+			const processGroup = (groupComponent, groupFilterObject) => {
+				for (var ruleOrGroup in groupComponent.$refs) {
+					if (isRule(ruleOrGroup) === true) {
+						almenosUnaRegla = true;
+						const ruleComponent = groupComponent.$refs[ruleOrGroup][0];
+						const rule = {
+							field: ruleComponent.field,
+							op: ruleComponent.op,
+							data: ruleComponent.data,
+							caseSensitiveAndAccents: ruleComponent.caseSensitive
+						};
+						if (!rule.field || !rule.op || (!rule.data && rule.op !== 'nn' && rule.op !== 'nu')) {
+							!this.destroying && this.$puiNotify.warning(this.$t('puidatatables.not-valid-rule-error'));
+							validFilter = false;
+							return;
+						}
+						if (rule.op === 'in' || rule.op === 'ni') {
+							rule.data = rule.data.split(',');
+						}
+						groupFilterObject.rules.push(rule);
+					} else {
+						//isGroup
+						const subgroupComponent = groupComponent.$refs[ruleOrGroup][0];
+						if (subgroupComponent instanceof Object) {
+							const group = {
+								groupOp: subgroupComponent.groupOp,
+								rules: [],
+								groups: []
+							};
+							groupFilterObject.groups.push(group);
+							processGroup(subgroupComponent, group);
+						}
+					}
+				}
+			};
+
+			const filter = {
+				rules: [],
+				groups: [],
+				groupOp: this.$refs.group0.groupOp
+			};
+			//empezamos por el grupo 0
+			processGroup(this.$refs.group0, filter);
+			if (almenosUnaRegla === false) {
+				this.$puiNotify.warning(this.$t('puidatatables.no-rules-error'));
+				return null;
+			} else if (validFilter === true) {
+				return filter;
+			}
+			return null;
+		},
+		publishFiltering() {
+			this.model.filter = this.retrieveGroupsData();
+			const theModel = this.$store.getters.getModelByName(this.modelName);
+			theModel.noStoredFilterActive = true;
+			if (!this.model.filter) {
+				theModel.noStoredFilterActive = false;
+			}
+			this.$puiEvents.$emit(`onPui-apply-filtering-${this.modelName}`, this.model.filter);
+			this.$puiEvents.$emit(`onPui-disapply-storedFilter-${this.modelName}`);
+
+			if (this.model.isSystemFilter) {
+				this.model.id = this.model.label = null;
+			}
+
+			if (!this.model.filter) {
+				theModel.currentFilter = null;
+			} else {
+				theModel.currentFilter = JSON.parse(JSON.stringify(this.model));
+				theModel.currentFilter.id = theModel.currentFilter.label = null;
+				theModel.currentFilter.checked = true;
+			}
+			theModel.userFilters.forEach((filter) => {
+				filter.checked = false;
+			});
+			theModel.modelFilters.forEach((filter) => {
+				filter.checked = false;
+			});
+		},
+		afterSave() {
+			if (this.isModal === false) {
+				this.saving = false;
+				if (this.model.id) {
+					this.method = 'update';
+				}
+			} else {
+				this.$puiEvents.$emit(`onPui-close-filtering-modalDialog-${this.modelName}`);
+			}
+		},
+		reset() {
+			this.$puiEvents.$emit('reset-filtering');
+			this.resetting = false;
+			this.sql = '';
+		},
+		checkFilterNameBeforeSave() {
+			if (this.method === 'create') {
+				const modelConfig = this.$store.getters.getModelByName(this.modelName);
+				for (let i = 0, userFiltersLength = modelConfig.userFilters.length; i < userFiltersLength; i++) {
+					const filter = modelConfig.userFilters[i];
+					if (filter.label === this.model.label) {
+						this.dialogs.saveFilterAlert = true;
+						this.model.id = filter.id;
+						this.model.filter = filter.filter;
+						return;
+					}
+				}
+			} else {
+				if (this.previousModelLabel && this.previousModelLabel !== this.model.label) {
+					this.method = 'create';
+				}
+			}
+			this.save();
+		},
+		getPuiVariables() {
+			this.showSqlBtn = this.$store.state.global.gridfilterShowSqlBtn;
+			this.showSubgroupBtn = this.$store.state.global.gridfilterShowSubgroupBtn;
+
+			if (this.showSqlBtn === undefined || !this.showSubgroupBtn === undefined) {
+				const data = {
+					model: 'puivariable',
+					filter: {
+						groups: [],
+						groupOp: 'or',
+						rules: [
+							{ field: 'variable', op: 'eq', data: 'GRIDFILTER_SHOW_SQL_BTN' },
+							{ field: 'variable', op: 'eq', data: 'GRIDFILTER_SHOW_SUBGROUP_BTN' }
+						]
+					}
+				};
+
+				this.$puiRequests.postRequest(
+					'/puisearch',
+					data,
+					(response) => {
+						this.updateShowSqlBtnVar(false);
+						this.updateShowSubgroupBtnVar(true);
+						if (response.data && response.data.data && Array.isArray(response.data.data)) {
+							for (let i = 0, dataLength = response.data.data.length; i < dataLength; i++) {
+								const puivariable = response.data.data[i];
+								if (puivariable.variable === 'GRIDFILTER_SHOW_SQL_BTN') {
+									this.updateShowSqlBtnVar(puivariable.value && puivariable.value === 'true');
+								} else if (puivariable.variable === 'GRIDFILTER_SHOW_SUBGROUP_BTN') {
+									this.updateShowSubgroupBtnVar(puivariable.value && puivariable.value === 'true');
+								}
+							}
+						}
+					},
+					() => {
+						this.updateShowSqlBtnVar(false);
+						this.updateShowSubgroupBtnVar(true);
+					}
+				);
+			}
+		},
+		updateShowSqlBtnVar(newValue) {
+			this.showSqlBtn = newValue;
+			this.$store.state.global.gridfilterShowSqlBtn = this.showSqlBtn;
+		},
+		updateShowSubgroupBtnVar(newValue) {
+			this.showSubgroupBtn = newValue;
+			this.$store.state.global.gridfilterShowSubgroupBtn = this.showSubgroupBtn;
+		},
+		subscribeToModalDialogsEvents() {
+			this.$puiEvents.$on(`pui-modalDialog-saveFilterAlert-${this.modelName}-ok`, () => {
+				this.dialogs.saveFilterAlert = false;
+				this.method = 'update';
+				this.save();
+			});
+			this.$puiEvents.$on(`pui-modalDialog-saveFilterAlert-${this.modelName}-cancel`, () => {
+				this.dialogs.saveFilterAlert = false;
+			});
+		},
+		unsubscribeToModalDialogEvent(topicPrefix) {
+			this.$puiEvents.$off(`${topicPrefix}-ok`);
+			this.$puiEvents.$off(`${topicPrefix}-cancel`);
+		}
+	}
+};
+</script>