pui9-docgen 1.16.4

package/src/components/puidocgen/PuiDocgenTemplateFilterRule.vue

@@ -0,0 +1,352 @@
+<template>
+	<v-layout wrap class="PuiDocgenTemplateFilterRule pl-3">
+		<v-flex xs4>
+			<v-autocomplete
+				class="pr-2"
+				label="column"
+				append-icon="fa fa-angle-down"
+				solo
+				flat
+				required
+				:rules="getRules()"
+				: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
+				required
+				:rules="getRules()"
+				: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
+						:rules="getRules()"
+						v-model="value1"
+						:disabled="disabled"
+					></v-text-field>
+					<v-text-field
+						v-else
+						class="inputFilterText"
+						type="date"
+						solo
+						flat
+						outlined
+						required
+						:rules="getRules()"
+						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
+						:rules="getRules()"
+						v-model="value2"
+						:disabled="disabled"
+					></v-text-field>
+					<v-text-field
+						v-else
+						class="inputFilterText"
+						type="date"
+						solo
+						flat
+						outlined
+						required
+						:rules="getRules()"
+						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
+						required
+						:rules="getRules()"
+						: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"></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
+				:rules="getRules()"
+				: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
+				:rules="getRules()"
+				: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
+				:rules="getRules()"
+				:disabled="op === 'nu' || op === 'nn' || disabled"
+				v-model="value1"
+			></v-text-field>
+		</v-flex>
+	</v-layout>
+</template>
+
+<script>
+import PuiDocgenTemplateMixin from './PuiDocgenTemplateMixin';
+
+export default {
+	name: 'PuiDocgenTemplateFilterRule',
+	mixins: [PuiDocgenTemplateMixin],
+	props: {
+		group: {
+			type: String
+		},
+		ruleIndex: {
+			type: Number
+		},
+		fieldProp: {
+			type: String
+		},
+		opProp: {
+			type: String
+		},
+		dataProp: {},
+		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: '-' }
+			]
+		};
+	},
+	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) && this.value1 === null && this.value2 === null) {
+				this.value1 = '+';
+				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() {
+		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';
+		}
+	}
+};
+</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 {
+	}
+}
+.PuiDocgenTemplateFilterRule {
+	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>