pui9-datatables 1.16.4

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

@@ -0,0 +1,192 @@
+<template>
+	<v-layout wrap class="puiGridFilterListItem ma-1" ref="theItem" :class="compClass">
+		<v-flex xs2>
+			<span class="puiGridFilterListItem__titleicon">
+				<v-icon v-if="!model.isSystemFilter" class="puiGridFilterListItem__icon" @click="showMessageBeforeDeleteItem()">fa fa-trash</v-icon>
+			</span>
+		</v-flex>
+		<v-flex xs8 @click="selectItem()">
+			<span class="puiGridFilterListItem__title">{{ model.label }}</span>
+		</v-flex>
+		<v-flex xs2>
+			<span class="puiGridFilterListItem__check" v-show="checked === true">
+				<v-icon>fa fa-check</v-icon>
+			</span>
+		</v-flex>
+		<!-- delete item modal dialog -->
+		<pui-modal-dialog
+			v-if="showDeleteItemDialog"
+			:cancelText="$t('form.cancel')"
+			:okText="$t('pui9.accept')"
+			:titleText="$t('pui9.delete.title')"
+			:messageText="$t('pui9.delete.confirm')"
+			:dialogName="`deleteItem-${this.model.id}`"
+		></pui-modal-dialog>
+	</v-layout>
+</template>
+
+<script>
+const puiGridFilterListItemSettings = { selectedItemId: null };
+
+export default {
+	name: 'PuiGridFilterListItem',
+	props: {
+		typeFilter: {
+			type: String,
+			default: 'user'
+		},
+		model: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			checked: false,
+			showDeleteItemDialog: false,
+			filterModelName: 'puiusermodelfilter'
+		};
+	},
+	computed: {
+		compClass() {
+			return {
+				'puiGridFilterListItem--selected': this.checked
+			};
+		}
+	},
+	mounted() {
+		if (this.model.checked === true) {
+			this.checked = true;
+			this.$puiEvents.$emit(`onPui-apply-storedFilter-${this.model.model}`, [this.model, this.model.checked]);
+		}
+	},
+	destroyed() {
+		this.$puiEvents.$off(`pui-modalDialog-deleteItem-${this.model.id}-ok`);
+		this.$puiEvents.$off(`pui-modalDialog-deleteItem-${this.model.id}-cancel`);
+	},
+	created() {
+		this.$puiEvents.$on(`onPui-apply-filtering-${this.model.model}`, (theFilter) => {
+			if (theFilter && puiGridFilterListItemSettings.selectedItemId && puiGridFilterListItemSettings.selectedItemId === this.model.id) {
+				return;
+			}
+			this.toggle(false);
+		});
+		this.$puiEvents.$on(`onPui-toggle-filtering-${this.model.model}`, (params) => {
+			if (params && params.length > 1) {
+				const model = params[0];
+				const checked = params[1];
+				if (model !== null && model !== undefined && checked !== null && checked !== undefined) {
+					if (this.model.id === model.id) {
+						this.toggle(checked);
+						return;
+					}
+				}
+			}
+			this.toggle(false);
+		});
+		// delete registry modal
+		this.$puiEvents.$on(`pui-modalDialog-deleteItem-${this.model.id}-ok`, () => {
+			this.showDeleteItemDialog = false;
+			this.deleteItem();
+		});
+		this.$puiEvents.$on(`pui-modalDialog-deleteItem-${this.model.id}-cancel`, () => {
+			this.showDeleteItemDialog = false;
+		});
+	},
+	methods: {
+		toggle(value) {
+			if (value === false) {
+				this.checked = false;
+				this.model.checked = false;
+			} else if (value === true) {
+				this.checked = true;
+				this.model.checked = true;
+			}
+		},
+		selectItem() {
+			const filterObject = this.model.filter instanceof Object ? this.model.filter : JSON.parse(this.model.filter);
+			puiGridFilterListItemSettings.selectedItemId = this.model.id;
+			if (!this.model.checked) {
+				this.checked = true;
+				this.$puiEvents.$emit(`onPui-apply-storedFilter-${this.model.model}`, [this.model, this.checked]);
+				this.$puiEvents.$emit(`onPui-apply-filtering-${this.model.model}`, filterObject);
+			} else {
+				this.checked = false;
+				this.$puiEvents.$emit(`onPui-apply-storedFilter-${this.model.model}`, [null, this.checked]);
+				this.$puiEvents.$emit(`onPui-apply-filtering-${this.model.model}`, null);
+				this.$puiEvents.$emit(`onPui-disapply-storedFilter-${this.model.model}`);
+			}
+			puiGridFilterListItemSettings.selectedItemId = null;
+		},
+		//method to get called by a parent component, only removes the class selected on item an the icon
+		unselectItem() {
+			this.checked = false;
+		},
+		showMessageBeforeDeleteItem() {
+			this.showDeleteItemDialog = true;
+		},
+		deleteItem() {
+			this.$puiRequests.deleteRequest(
+				`/${this.filterModelName}/delete`,
+				null,
+				(response) => {
+					this.$puiEvents.$emit(`onPui-deleteRow-dataTable-${this.filterModelName}`, response.data);
+					this.$puiNotify.success(this.$t('pui9.delete.success'));
+				},
+				(error) => {
+					this.$store.dispatch('puiRequestShowServerError', { error });
+				},
+				{ id: this.model.id }
+			);
+		}
+	}
+};
+</script>
+
+<style lang="postcss" scoped>
+.puiGridFilterListItem {
+	color: var(--N-500) !important;
+	background-color: var(--N-0) !important;
+	min-height: 30px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+	font-size: var(--font-base) !important;
+	text-indent: -0.5;
+	padding-left: 1em;
+	& span {
+		padding-left: 3px;
+	}
+	&:hover {
+		background-color: var(--N-10) !important;
+		cursor: pointer;
+	}
+	&__title {
+	}
+	&__titleicon {
+		padding-left: 2px !important;
+		padding-right: 0px !important;
+		margin-right: 2px !important;
+	}
+	&__icon {
+		font-size: 12px !important;
+		color: var(--N-200);
+	}
+	&--selected {
+		background-color: var(--primarycolor) !important;
+		color: var(--N-0) !important;
+		&:hover {
+			background-color: var(--primarycolor) !important;
+			color: var(--N-0) !important;
+		}
+		& .puiGridFilterListItem__icon {
+			color: var(--N-0) !important;
+		}
+	}
+	&__check {
+		& .v-icon {
+			font-size: 12px !important;
+			color: var(--N-0);
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,517 @@
+<template>
+	<v-layout wrap class="PuiFilterRule pl-3">
+		<!--  <v-flex xs1>
+            <v-btn class="elevation-0 dragger2">
+                <v-icon small>far fa-ellipsis-v</v-icon>
+                <v-icon small>far fa-ellipsis-v</v-icon>
+            </v-btn>
+		</v-flex>-->
+		<v-flex xs4>
+			<v-autocomplete
+				class="pr-2"
+				label="column"
+				append-icon="fa fa-angle-down"
+				solo
+				flat
+				:items="columns"
+				item-text="title"
+				item-value="name"
+				return-object
+				v-model="column"
+				:disabled="disabled"
+			></v-autocomplete>
+		</v-flex>
+		<v-flex xs4 class="operator">
+			<v-select
+				class="pr-2"
+				append-icon="fa fa-angle-down"
+				solo
+				flat
+				:items="operators"
+				:label="$t('equal')"
+				v-model="op"
+				:disabled="disabled"
+			></v-select>
+		</v-flex>
+		<!-- Caso de que operador es between o not between, dos inputs, depende del tipo: fecha o numero-->
+		<v-flex xs4 v-if="op === 'bt' || op === 'nbt'">
+			<v-layout>
+				<v-flex xs6>
+					<v-text-field
+						v-if="column.type !== 'date'"
+						class="inputFilterText"
+						type="number"
+						solo
+						flat
+						outlined
+						required
+						v-model="value1"
+						:disabled="disabled"
+					></v-text-field>
+					<v-text-field
+						v-else
+						class="inputFilterText"
+						type="date"
+						solo
+						flat
+						outlined
+						required
+						v-model="value1"
+						:disabled="disabled"
+					></v-text-field>
+				</v-flex>
+				<v-flex xs6>
+					<v-text-field
+						v-if="column.type !== 'date'"
+						class="inputFilterText"
+						type="number"
+						solo
+						flat
+						outlined
+						required
+						v-model="value2"
+						:disabled="disabled"
+					></v-text-field>
+					<v-text-field
+						v-else
+						class="inputFilterText"
+						type="date"
+						solo
+						flat
+						outlined
+						required
+						v-model="value2"
+						:disabled="disabled"
+					></v-text-field>
+				</v-flex>
+			</v-layout>
+		</v-flex>
+		<!-- Caso que sean fechas comparadas con HOY +- X dias, un solo input de tipo numero -->
+		<v-flex xs4 v-else-if="isTodayOperator(op)">
+			<v-layout>
+				<v-flex xs5>
+					<v-select
+						class="pr-2"
+						append-icon="fa fa-angle-down"
+						solo
+						flat
+						:items="todayOperators"
+						:label="$t('equal')"
+						v-model="value1"
+						:disabled="disabled"
+					></v-select>
+				</v-flex>
+				<v-flex xs7>
+					<v-text-field
+						class="inputFilter"
+						type="number"
+						solo
+						flat
+						outlined
+						required
+						v-model="value2"
+						@keydown="onTodayOperatorValue2KeyDown"
+					></v-text-field>
+				</v-flex>
+			</v-layout>
+		</v-flex>
+		<!-- Caso que sea el operador 'in' o 'not in', solo input de tipo texto -->
+		<v-flex xs4 v-else-if="op === 'in' || op === 'ni'">
+			<v-text-field class="inputFilter" type="text" solo flat outlined required :disabled="disabled" v-model="value1"></v-text-field>
+		</v-flex>
+		<!-- Caso que no sea between ni fechas comparadas con HOY +- X dias, entonces un solo imput, depende del tipo: fecha, numero o texto -->
+		<v-flex xs4 v-else>
+			<v-text-field
+				v-if="column.type === 'date' || column.type === 'datetime'"
+				class="inputFilter"
+				type="date"
+				solo
+				flat
+				outlined
+				required
+				:disabled="op === 'nu' || op === 'nn' || disabled"
+				v-model="value1"
+			></v-text-field>
+			<v-text-field
+				v-else-if="column.type === 'numeric' || column.type === 'decimal'"
+				class="inputFilter"
+				type="number"
+				solo
+				flat
+				outlined
+				required
+				:disabled="op === 'nu' || op === 'nn' || disabled"
+				v-model="value1"
+			></v-text-field>
+			<v-text-field
+				v-else
+				class="inputFilter"
+				type="text"
+				solo
+				flat
+				outlined
+				required
+				:disabled="op === 'nu' || op === 'nn' || disabled"
+				v-model="value1"
+			>
+				<template slot="append">
+					<v-tooltip bottom>
+						<template v-slot:activator="{ on }">
+							<v-icon
+								@click.native="caseSensitive = !caseSensitive"
+								:color="caseSensitive ? 'secondary' : null"
+								class="pointer"
+								small
+								v-on="on"
+								>fa fa-font-case</v-icon
+							>
+						</template>
+						<span>{{ $t('puidatatables.caseSensitive') }}</span>
+					</v-tooltip>
+				</template>
+			</v-text-field>
+		</v-flex>
+	</v-layout>
+</template>
+
+<script>
+export default {
+	name: 'PuiGridFilterRule',
+	props: {
+		columns: {
+			type: Array,
+			required: true
+		},
+		group: {
+			type: String
+		},
+		ruleIndex: {
+			type: Number
+		},
+		fieldProp: {
+			type: String
+		},
+		opProp: {
+			type: String
+		},
+		dataProp: {},
+		caseSensitiveProp: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			op: 'eq',
+			column: {
+				type: '',
+				name: '',
+				title: ''
+			},
+			value1: null,
+			value2: null,
+			field: null,
+			data: null,
+			todayOperators: [
+				{ text: '+', value: '+' },
+				{ text: '-', value: '-' }
+			],
+			filterOperators: {
+				common: [
+					{
+						text: 'equal',
+						value: 'eq'
+					},
+					{
+						text: 'notEqual',
+						value: 'ne'
+					},
+					{
+						text: 'isNotNull',
+						value: 'nn'
+					},
+					{
+						text: 'isNull',
+						value: 'nu'
+					},
+					{
+						text: 'in',
+						value: 'in'
+					},
+					{
+						text: 'notIn',
+						value: 'ni'
+					}
+				],
+				numeric: [
+					{
+						text: 'lessThan',
+						value: 'lt'
+					},
+					{
+						text: 'greaterEqualThan',
+						value: 'ge'
+					},
+					{
+						text: 'lessEqualThan',
+						value: 'le'
+					},
+					{
+						text: 'greaterThan',
+						value: 'gt'
+					},
+					{
+						text: 'between',
+						value: 'bt'
+					},
+					{
+						text: 'notBetween',
+						value: 'nbt'
+					}
+				],
+				text: [
+					{
+						text: 'contains',
+						value: 'cn'
+					},
+					{
+						text: 'notContains',
+						value: 'nc'
+					},
+					{
+						text: 'endsWith',
+						value: 'ew'
+					},
+					{
+						text: 'notEndsWith',
+						value: 'en'
+					},
+					{
+						text: 'beginsWith',
+						value: 'bw'
+					},
+					{
+						text: 'notBeginsWith',
+						value: 'bn'
+					}
+				],
+				date: [], //son igual que los numericos, solo que tendran un datetime picker en el input,
+				datetime: [
+					{
+						text: 'equalToday',
+						value: 'eqt'
+					},
+					{
+						text: 'notEqualToday',
+						value: 'net'
+					},
+					{
+						text: 'lessThanToday',
+						value: 'ltt'
+					},
+					{
+						text: 'greaterThanToday',
+						value: 'gtt'
+					},
+					{
+						text: 'lessEqualThanToday',
+						value: 'let'
+					},
+					{
+						text: 'greaterEqualThanToday',
+						value: 'get'
+					}
+				], //idem
+				decimal: [] //idem
+			},
+			caseSensitive: this.caseSensitiveProp
+		};
+	},
+	computed: {
+		isRule0() {
+			return this.ruleIndex === 0;
+		},
+		operators() {
+			let filterOperatorsSorted = this.filterOperators[this.column.type];
+			if (filterOperatorsSorted && Array.isArray(filterOperatorsSorted)) {
+				if (this.column.type === 'date' || this.column.type === 'datetime') {
+					filterOperatorsSorted = filterOperatorsSorted.filter(
+						(obj) => obj.value !== 'bt' && obj.value !== 'nbt' && obj.value !== 'in' && obj.value !== 'ni'
+					);
+				}
+				filterOperatorsSorted.sort((a, b) => (a.text > b.text ? 1 : b.text > a.text ? -1 : 0));
+				return filterOperatorsSorted;
+			}
+			return [];
+		}
+	},
+	watch: {
+		'column.name'(value) {
+			this.field = value;
+		},
+		'column.type'(value) {
+			if (this.opProp === undefined) {
+				this.op = value === 'text' ? 'cn' : 'eq';
+			}
+		},
+		op(value) {
+			if (this.isTodayOperator(value)) {
+				if (this.value1 === null || (this.value1 !== '+' && this.value1 !== '-')) {
+					this.value1 = '+';
+				}
+				if (this.value2 === null || (!Number.isInteger(this.value2) && !Number.isInteger(parseInt(this.value2)))) {
+					this.value2 = 0;
+				}
+			}
+		},
+		value2(value) {
+			if (Array.isArray(this.data)) {
+				this.data[1] = value;
+			} else if (this.isTodayOperator(this.op)) {
+				this.data = this.value1 + value;
+			} else {
+				this.data = [];
+				this.data[1] = value;
+			}
+		},
+		value1(value) {
+			//para el caso de between o not between
+			if (this.op === 'bt' || this.op === 'nbt') {
+				if (Array.isArray(this.data)) {
+					this.data[0] = value;
+				} else {
+					this.data = [];
+					this.data[0] = value;
+				}
+			} else if (this.isTodayOperator(this.op)) {
+				this.data = value + this.value2;
+			} else {
+				this.data = value;
+			}
+		}
+	},
+	created() {
+		this.translateFilterOperators();
+		this.addCommonAndDecimalAndDateFilterOperators();
+		if (this.fieldProp !== undefined && this.opProp !== undefined && this.dataProp !== undefined) {
+			this.columns.forEach((column) => {
+				if (column.name === this.fieldProp) {
+					this.column.name = column.name;
+					this.column.type = column.type;
+					this.column.title = column.title;
+					this.filterOperators[column.type].forEach((operatorsForType) => {
+						if (operatorsForType.value === this.opProp) {
+							this.op = operatorsForType.value;
+							// eslint-disable-next-line no-useless-return
+							return;
+						}
+					});
+					// eslint-disable-next-line no-useless-return
+					return;
+				}
+			});
+			if (this.opProp === 'in' || this.opProp === 'ni') {
+				this.value1 = Array.isArray(this.dataProp) === true ? this.dataProp.join(',') : this.dataProp;
+			} else if (Array.isArray(this.dataProp) === true) {
+				this.value1 = this.dataProp[0];
+				this.value2 = this.dataProp[1];
+			} else if (this.isTodayOperator(this.opProp)) {
+				this.value1 = this.dataProp.length > 1 ? this.dataProp.substring(0, 1) : '+';
+				this.value2 = this.dataProp.length > 1 ? this.dataProp.substring(1) : 0;
+			} else {
+				this.value1 = this.dataProp;
+			}
+		}
+	},
+	methods: {
+		isTodayOperator(operator) {
+			return operator === 'eqt' || operator === 'net' || operator === 'ltt' || operator === 'gtt' || operator === 'let' || operator === 'get';
+		},
+		translateFilterOperators() {
+			for (const colType in this.filterOperators) {
+				for (let i = 0, length = this.filterOperators[colType].length; i < length; i++) {
+					this.filterOperators[colType][i].text = this.$t(this.filterOperators[colType][i].text);
+				}
+			}
+		},
+		addCommonAndDecimalAndDateFilterOperators() {
+			const commonKey = 'common';
+			for (const colType in this.filterOperators) {
+				if (colType === commonKey) {
+					continue;
+				} else if (colType === 'decimal') {
+					this.filterOperators[colType] = this.filterOperators.numeric;
+				} else if (colType === 'date' || colType === 'datetime') {
+					this.filterOperators[colType] = this.filterOperators[colType].concat(this.filterOperators.numeric);
+				}
+				this.filterOperators[colType] = this.filterOperators[colType].concat(this.filterOperators[commonKey]);
+			}
+		},
+		onTodayOperatorValue2KeyDown(e) {
+			// prevent -, +, e
+			if (['-', '+', 'e'].includes(e.key)) {
+				e.preventDefault();
+			}
+		}
+	}
+};
+</script>
+
+<style lang="postcss" scoped>
+.dragger2 {
+	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;
+	margin-left: 18px;
+	&:hover {
+	}
+}
+.PuiFilterRule {
+	height: 35px;
+	& .v-input__control {
+		min-height: 30px !important;
+	}
+	& .v-input__slot {
+		min-height: 30px !important;
+		height: 30px !important;
+	}
+	& .v-text-field.v-text-field--solo .v-input__control {
+		min-height: 32px !important;
+	}
+}
+.inputFilter {
+	height: 36px !important;
+	&.v-input.v-text-field.v-text-field--single-line.v-text-field--solo .v-input__slot {
+		height: 36px !important;
+	}
+	& .v-input__slot {
+		min-height: 36px !important;
+		height: 36px !important;
+	}
+	&.v-text-field.v-text-field--solo .v-input__control {
+		min-height: 36px !important;
+		background-color: red;
+	}
+}
+.inputFilterText {
+	height: 36px !important;
+	&.v-input.v-text-field.v-text-field--single-line.v-text-field--solo .v-input__slot {
+		height: 36px !important;
+	}
+}
+.narrow-icon .v-input__icon {
+	width: 4px;
+	min-width: 4px;
+}
+.operator {
+	min-width: 102px;
+}
+</style>