pui9-components 1.17.3 → 2.0.7

package/src/components/PuiFilterRule.vue

@@ -1,49 +1,54 @@
 <template>
-	<v-layout wrap class="PuiFilterRule pl-3">
+	<v-layout wrap class="PuiFilterRule pl-0 pt-0 pb-8">
+		<!-- Columna -->
 		<v-flex xs4>
 			<v-autocomplete
-				class="pr-2"
-				label="column"
+				ref="columnSelector"
+				class="pr-1"
+				:placeholder="$t('form.puimodel.gridColumns.columnName')"
 				append-icon="fa fa-angle-down"
 				solo
 				flat
-				required
-				:rules="getRules()"
-				:items="columns"
+				:items="columnsProp"
 				item-text="title"
 				item-value="name"
 				return-object
 				v-model="column"
 				:disabled="disabled"
+				@input="
+					clearValues();
+					setDefaultOp();
+				"
 			></v-autocomplete>
 		</v-flex>
-		<v-flex xs4 class="operator">
+
+		<!-- Operador -->
+		<v-flex xs3 class="operator">
 			<v-select
-				class="pr-2"
+				class="pr-1"
 				append-icon="fa fa-angle-down"
 				solo
 				flat
-				required
-				:rules="getRules()"
 				:items="operators"
-				:label="$t('equal')"
-				v-model="op"
+				:placeholder="$t('equal')"
+				v-model="filterRuleModel.op"
 				:disabled="disabled"
+				@input="clearValues()"
 			></v-select>
 		</v-flex>
+		<!-- Data -->
 		<!-- 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-flex xs5 v-if="filterRuleModel.op === 'bt' || filterRuleModel.op === 'nbt'">
 			<v-layout>
 				<v-flex xs6>
 					<v-text-field
 						v-if="column.type !== 'date'"
-						class="inputFilterText"
+						class="pr-1 inputFilterText"
 						type="number"
 						solo
 						flat
 						outlined
 						required
-						:rules="getRules()"
 						v-model="value1"
 						:disabled="disabled"
 					></v-text-field>
@@ -55,7 +60,6 @@
 						flat
 						outlined
 						required
-						:rules="getRules()"
 						v-model="value1"
 						:disabled="disabled"
 					></v-text-field>
@@ -69,7 +73,6 @@
 						flat
 						outlined
 						required
-						:rules="getRules()"
 						v-model="value2"
 						:disabled="disabled"
 					></v-text-field>
@@ -81,7 +84,6 @@
 						flat
 						outlined
 						required
-						:rules="getRules()"
 						v-model="value2"
 						:disabled="disabled"
 					></v-text-field>
@@ -89,93 +91,179 @@
 			</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-flex xs5 v-else-if="isTodayOperator(filterRuleModel.op)">
 			<v-layout>
-				<v-flex xs5>
+				<v-flex xs3>
 					<v-select
-						class="pr-2"
+						class="pr-1"
 						append-icon="fa fa-angle-down"
 						solo
 						flat
-						required
-						:rules="getRules()"
 						:items="todayOperators"
-						:label="$t('equal')"
+						placeholder="+"
 						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 xs4>
+					<v-text-field
+						class="pr-1 inputFilter"
+						type="number"
+						solo
+						flat
+						outlined
+						required
+						v-model="value2"
+						@keydown="onTodayOperatorValue2KeyDown"
+					>
+						<template slot="append">
+							<v-tooltip bottom>
+								<template v-slot:activator="{ on }">
+									<v-icon
+										@click.native="toggleTodaySelector()"
+										:color="todaySelector == 'TODAY' ? null : 'secondary'"
+										class="pointer"
+										small
+										v-on="on"
+										>fa fa-chess-clock</v-icon
+									>
+								</template>
+								<span>{{ todaySelectorTooltip() }}</span>
+							</v-tooltip>
+						</template>
+					</v-text-field>
+				</v-flex>
+				<v-flex xs5>
+					<v-select
+						append-icon="fa fa-angle-down"
+						solo
+						flat
+						:items="todayRange"
+						v-model="value3"
+						:placeholder="$t('form.puialertconfiguration.timeunit_days')"
+						:disabled="disabled"
+					></v-select>
 				</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-flex xs5 v-else-if="filterRuleModel.op === 'in' || filterRuleModel.op === 'ni'">
 			<v-text-field
-				v-if="column.type === 'date' || column.type === 'datetime'"
+				v-if="!columnHasFilterColumnValues"
 				class="inputFilter"
-				type="date"
+				type="text"
 				solo
 				flat
 				outlined
-				:required="requiredByOperator"
-				:rules="getRulesByOperator()"
-				:disabled="disabledByOperator"
+				required
+				:disabled="disabled"
 				v-model="value1"
 			></v-text-field>
-			<v-text-field
-				v-else-if="column.type === 'numeric' || column.type === 'decimal'"
-				class="inputFilter"
-				type="number"
+			<v-autocomplete
+				v-else
+				append-icon="fa fa-angle-down"
 				solo
 				flat
-				outlined
-				:required="requiredByOperator"
-				:rules="getRulesByOperator()"
-				:disabled="disabledByOperator"
-				v-model="value1"
-			></v-text-field>
-			<v-text-field
-				v-else
-				class="inputFilter"
-				type="text"
+				required
+				:items="getFilterColumnItemsFromAllowedValues()"
+				v-model="vSelectMultipleValue"
+				multiple
+				:disabled="disabled"
+			>
+			</v-autocomplete>
+		</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 xs5 v-else>
+			<v-autocomplete
+				v-if="(columnHasFilterColumnValues && filterRuleModel.op === 'eq') || filterRuleModel.op === 'ne'"
+				append-icon="fa fa-angle-down"
 				solo
 				flat
-				outlined
-				:required="requiredByOperator"
-				:rules="getRulesByOperator()"
-				:disabled="disabledByOperator"
+				required
+				:items="getFilterColumnItemsFromAllowedValues()"
 				v-model="value1"
-			></v-text-field>
+				:disabled="disabled"
+			>
+			</v-autocomplete>
+			<template v-else>
+				<v-text-field
+					v-if="column.type === 'date' || column.type === 'datetime'"
+					v-show="!(filterRuleModel.op === 'nu' || filterRuleModel.op === 'nn')"
+					class="inputFilter"
+					type="date"
+					solo
+					flat
+					outlined
+					required
+					:disabled="filterRuleModel.op === 'nu' || filterRuleModel.op === 'nn' || disabled"
+					v-model="value1"
+				></v-text-field>
+				<v-text-field
+					v-else-if="column.type === 'numeric' || column.type === 'decimal'"
+					v-show="!(filterRuleModel.op === 'nu' || filterRuleModel.op === 'nn')"
+					class="inputFilter"
+					type="number"
+					solo
+					flat
+					outlined
+					required
+					:disabled="filterRuleModel.op === 'nu' || filterRuleModel.op === 'nn' || disabled"
+					v-model="value1"
+				></v-text-field>
+				<v-text-field
+					v-else
+					v-show="!(filterRuleModel.op === 'nu' || filterRuleModel.op === 'nn')"
+					class="inputFilter"
+					type="text"
+					solo
+					flat
+					outlined
+					required
+					:disabled="filterRuleModel.op === 'nu' || filterRuleModel.op === 'nn' || disabled"
+					v-model="value1"
+				>
+					<template slot="append">
+						<v-tooltip bottom>
+							<template v-slot:activator="{ on }">
+								<v-icon
+									@click.native="filterRuleModel.caseSensitiveAndAccents = !filterRuleModel.caseSensitiveAndAccents"
+									:color="filterRuleModel.caseSensitiveAndAccents ? '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>
+			</template>
 		</v-flex>
 	</v-layout>
 </template>
 
 <script>
-import PuiFilterMixin from '../mixins/PuiFilterMixin';
-
 export default {
 	name: 'PuiFilterRule',
-	mixins: [PuiFilterMixin],
 	props: {
-		group: {
+		groupName: {
 			type: String
 		},
-		ruleIndex: {
+		ruleIndexProp: {
 			type: Number
 		},
-		fieldProp: {
-			type: String
+		filterRuleProp: {
+			type: Object
 		},
-		opProp: {
-			type: String
+		columnsProp: {
+			type: Array,
+			required: true
+		},
+		filterColumnValues: {
+			type: Object,
+			required: false
 		},
-		dataProp: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -183,7 +271,7 @@ export default {
 	},
 	data() {
 		return {
-			op: 'eq',
+			filterRuleModel: this.getDefaultFilterRuleModel(),
 			column: {
 				type: '',
 				name: '',
@@ -191,17 +279,140 @@ export default {
 			},
 			value1: null,
 			value2: null,
-			field: null,
-			data: null,
+			value3: null,
+			vSelectMultipleValue: null,
+			todaySelector: 'TODAY', // [ TODAY | NOW ]
 			todayOperators: [
 				{ text: '+', value: '+' },
 				{ text: '-', value: '-' }
-			]
+			],
+			todayRange: [
+				{ text: this.$t('form.puialertconfiguration.timeunit_hours'), value: 'HOURS' },
+				{ text: this.$t('form.puialertconfiguration.timeunit_days'), value: 'DAYS' },
+				{ text: this.$t('form.puialertconfiguration.timeunit_weeks'), value: 'WEEKS' },
+				{ text: this.$t('form.puialertconfiguration.timeunit_months'), value: 'MONTHS' },
+				{ text: this.$t('form.puialertconfiguration.timeunit_years'), value: 'YEARS' }
+			],
+			defaultEQTModel: {
+				type: 'TODAY',
+				sign: '+',
+				unitValue: 0,
+				unitType: 'DAYS'
+			},
+			ruleEQTModel: this.defaultEQTModel,
+			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
+			}
 		};
 	},
 	computed: {
 		isRule0() {
-			return this.ruleIndex === 0;
+			return this.ruleIndexProp === 0;
 		},
 		operators() {
 			let filterOperatorsSorted = this.filterOperators[this.column.type];
@@ -212,68 +423,148 @@ export default {
 					);
 				}
 				filterOperatorsSorted.sort((a, b) => (a.text > b.text ? 1 : b.text > a.text ? -1 : 0));
+
+				// A la lista de operadores ordenados, si el modelo tiene filterColumnValues (lista de valores permitidos prefijada)
+				// le eliminamos los siguientes operadores que sabemos que no son necesarios
+				if (this.columnHasFilterColumnValues) {
+					let filterOperatorsSortedAndTrimmedForSelectedValues = [];
+					filterOperatorsSorted.forEach((op) => {
+						if (op.value != 'cn' && op.value != 'nc' && op.value != 'ew' && op.value != 'en' && op.value != 'bw' && op.value != 'bn') {
+							filterOperatorsSortedAndTrimmedForSelectedValues.push(op);
+						}
+					});
+					return filterOperatorsSortedAndTrimmedForSelectedValues;
+				}
+
 				return filterOperatorsSorted;
 			}
 			return [];
 		},
-		disabledByOperator() {
-			return this.op === 'nu' || this.op === 'nn' || this.disabled;
-		},
-		requiredByOperator() {
-			return this.op !== 'nu' && this.op !== 'nn';
+		columnHasFilterColumnValues() {
+			for (const colName in this.filterColumnValues) {
+				return colName == this.column.name;
+			}
+			return false;
 		}
 	},
 	watch: {
-		'column.name'(value) {
-			this.field = value;
+		filterRuleProp() {
+			this.filterRuleModel = this.filterRuleProp;
+			this.setValues();
 		},
-		'column.type'(value) {
-			if (this.opProp === undefined) {
-				this.op = value === 'text' ? 'cn' : 'eq';
-			}
+		'column.name'(value) {
+			this.filterRuleModel.field = value;
+			this.getFilterOperatorsFromFilterRuleModelField();
 		},
-		op(value) {
-			if (this.isTodayOperator(value) && this.value1 === null && this.value2 === null) {
-				this.value1 = '+';
-				this.value2 = 0;
+		value1(value) {
+			//para el caso de between o not between
+			if (this.filterRuleModel.op === 'bt' || this.filterRuleModel.op === 'nbt') {
+				if (Array.isArray(this.filterRuleModel.data)) {
+					this.filterRuleModel.data[0] = value;
+				} else {
+					this.filterRuleModel.data = [];
+					this.filterRuleModel.data[0] = value;
+				}
+			} else if (this.isTodayOperator(this.filterRuleModel.op)) {
+				this.ruleEQTModel.sign = value;
+				this.filterRuleModel.data = this.ruleEQTModel;
+			} else {
+				this.filterRuleModel.data = value;
 			}
 		},
 		value2(value) {
-			if (Array.isArray(this.data)) {
-				this.data[1] = value;
-			} else if (this.isTodayOperator(this.op)) {
-				this.data = this.value1 + value;
+			if (Array.isArray(this.filterRuleModel.data)) {
+				this.filterRuleModel.data[1] = value;
+			} else if (this.isTodayOperator(this.filterRuleModel.op)) {
+				this.ruleEQTModel.unitValue = value;
+				this.filterRuleModel.data = this.ruleEQTModel;
 			} else {
-				this.data = [];
-				this.data[1] = value;
+				this.filterRuleModel.data = [];
+				this.filterRuleModel.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;
+		value3(value) {
+			this.ruleEQTModel.unitType = value;
+			this.filterRuleModel.data = this.ruleEQTModel;
+		},
+		vSelectMultipleValue(value) {
+			if (value.length > 0) {
+				this.filterRuleModel.data = value[0];
+				if (value.length > 1) {
+					for (let i = 1, length = value.length; i < length; i++) {
+						this.filterRuleModel.data += ',';
+						this.filterRuleModel.data += value[i];
+					}
+				}
+			}
+		},
+		todaySelector(value) {
+			this.ruleEQTModel.type = value;
+			this.filterRuleModel.data = this.ruleEQTModel;
+		},
+		filterRuleModel: {
+			deep: true,
+			handler() {
+				this.$emit('change', this.filterRuleModel);
+				if (this.filterRuleModel.field == null) {
+					this.$refs.columnSelector.lazyValue = null;
 				}
-			} 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.translateFilterOperators();
+		this.addCommonAndDecimalAndDateFilterOperators();
+		this.filterRuleModel = this.filterRuleProp;
+		this.setValues();
+	},
+	methods: {
+		setValues() {
+			if (this.filterRuleModel.field !== undefined && this.filterRuleModel.op !== undefined && this.filterRuleModel.data !== undefined) {
+				this.getFilterOperatorsFromFilterRuleModelField();
+				delete this.filterRuleModel.dataIsColumn; // innecesario - viene del back
+				if (this.filterRuleModel.op === 'in' || this.filterRuleModel.op === 'ni') {
+					if (!this.columnHasFilterColumnValues) {
+						this.value1 =
+							Array.isArray(this.filterRuleModel.data) === true ? this.filterRuleModel.data.join(',') : this.filterRuleModel.data;
+					} else {
+						this.vSelectMultipleValue = this.filterRuleModel.data;
+					}
+				} else if (Array.isArray(this.filterRuleModel.data)) {
+					this.value1 = this.filterRuleModel.data[0];
+					this.value2 = this.filterRuleModel.data[1];
+				} else if (this.isTodayOperator(this.filterRuleModel.op)) {
+					this.ruleEQTModel = this.filterRuleModel.data;
+					this.todaySelector = this.ruleEQTModel.type;
+					this.value1 = this.ruleEQTModel.sign;
+					this.value2 = this.ruleEQTModel.unitValue;
+					this.value3 = this.ruleEQTModel.unitType;
+				} else {
+					this.value1 = this.filterRuleModel.data;
+				}
+			}
+		},
+		clearValues() {
+			this.filterRuleModel.data = null;
+			this.ruleEQTModel = this.defaultEQTModel;
+			this.todaySelector = this.ruleEQTModel.type;
+			this.value1 = null;
+			this.value2 = null;
+			this.value3 = null;
+			this.vSelectMultipleValue = [];
+		},
+		setDefaultOp() {
+			this.filterRuleModel.op = 'eq';
+		},
+		getFilterOperatorsFromFilterRuleModelField() {
+			this.columnsProp.forEach((column) => {
+				if (column.name === this.filterRuleModel.field) {
 					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;
+						if (operatorsForType.value === this.filterRuleModel.op) {
+							this.filterRuleModel.op = operatorsForType.value;
 							// eslint-disable-next-line no-useless-return
 							return;
 						}
@@ -282,45 +573,72 @@ export default {
 					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';
 		},
-		getRulesByOperator() {
-			if (this.op === 'nu' || this.op === 'nn') {
-				return [];
+		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]);
+			}
+		},
+		getFilterColumnItemsFromAllowedValues() {
+			let items = [];
+
+			for (const colName in this.filterColumnValues) {
+				if (colName == this.column.name) {
+					let entries = Object.entries(this.filterColumnValues[colName]);
+					for (const index in entries) {
+						items.push({
+							text: this.$store.getters.getTranslate(entries[index][0]),
+							value: entries[index][1]
+						});
+					}
+				}
+			}
+
+			return items;
+		},
+		getDefaultFilterRuleModel() {
+			return {
+				op: 'eq',
+				field: null,
+				data: null,
+				caseSensitiveAndAccents: false
+			};
+		},
+		toggleTodaySelector() {
+			this.todaySelector == 'TODAY' ? (this.todaySelector = 'NOW') : (this.todaySelector = 'TODAY');
+		},
+		todaySelectorTooltip() {
+			return this.todaySelector == 'TODAY' ? this.$t('puidatatables.todaySelector.today') : this.$t('puidatatables.todaySelector.now');
+		},
+		onTodayOperatorValue2KeyDown(e) {
+			// prevent -, +, e
+			if (['-', '+', 'e'].includes(e.key)) {
+				e.preventDefault();
 			}
-			return [(value) => !!value || 'Required'];
 		}
 	}
 };
 </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 {
-	}
-}
+
+<style lang="postcss">
 .PuiFilterRule {
 	height: 35px;
 	& .v-input__control {
@@ -329,36 +647,37 @@ export default {
 	& .v-input__slot {
 		min-height: 30px !important;
 		height: 30px !important;
+
+		& label {
+			position: relative !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;
+
+	& input::placeholder {
+		color: black !important;
+		opacity: 1;
 	}
-	& .v-input__slot {
-		min-height: 36px !important;
-		height: 36px !important;
+
+	.inputFilter,
+	.inputFilterText {
+		& .v-input__slot {
+			height: 39px !important;
+
+			& .v-text-field__slot {
+				top: -2px;
+			}
+		}
 	}
-	&.v-text-field.v-text-field--solo .v-input__control {
-		min-height: 36px !important;
-		background-color: red;
+	.narrow-icon .v-input__icon {
+		width: 4px;
+		min-width: 4px;
 	}
-}
-.inputFilterText {
-	height: 36px !important;
-	&.v-input.v-text-field.v-text-field--single-line.v-text-field--solo .v-input__slot {
-		height: 36px !important;
+	.operator {
+		min-width: 102px;
 	}
 }
-.narrow-icon .v-input__icon {
-	width: 4px;
-	min-width: 4px;
-}
-.operator {
-	min-width: 102px;
-}
 </style>