mirror of https://github.com/Fabio286/antares.git
176 lines
4.9 KiB
Vue
176 lines
4.9 KiB
Vue
<template>
|
|
<form class="workspace-table-filters" @submit.prevent="doFilter">
|
|
<div
|
|
v-for="(row, index) of rows"
|
|
:key="index"
|
|
class="workspace-table-filters-row"
|
|
>
|
|
<label class="form-checkbox my-0">
|
|
<input
|
|
v-model="row.active"
|
|
type="checkbox"
|
|
@change="doFilter"
|
|
><i class="form-icon" />
|
|
</label>
|
|
<select v-model="row.field" class="form-select col-auto select-sm">
|
|
<option
|
|
v-for="(item, j) of fields"
|
|
:key="j"
|
|
:value="item.name"
|
|
>
|
|
{{ item.name }}
|
|
</option>
|
|
</select>
|
|
<select v-model="row.op" class="form-select ml-2 col-auto select-sm">
|
|
<option
|
|
v-for="(operator, k) of operators"
|
|
:key="k"
|
|
:value="operator"
|
|
>
|
|
{{ operator }}
|
|
</option>
|
|
</select>
|
|
<div class="workspace-table-filters-row-value ml-2">
|
|
<input
|
|
v-if="!row.op.includes('NULL')"
|
|
v-model="row.value"
|
|
type="text"
|
|
class="form-input input-sm"
|
|
>
|
|
<input
|
|
v-if="row.op === 'BETWEEN'"
|
|
v-model="row.value2"
|
|
type="text"
|
|
class="form-input ml-2 input-sm"
|
|
>
|
|
</div>
|
|
<button
|
|
class="btn btn-sm btn-dark mr-0 ml-2"
|
|
type="button"
|
|
@click="removeRow(index)"
|
|
>
|
|
<i class="mdi mdi-minus-circle-outline" />
|
|
</button>
|
|
</div>
|
|
<div class="workspace-table-filters-buttons">
|
|
<button
|
|
class="btn btn-sm btn-primary mr-0 ml-2"
|
|
type="submit"
|
|
>
|
|
{{ $t('word.filter') }}
|
|
</button>
|
|
<button
|
|
class="btn btn-sm btn-dark mr-0 ml-2"
|
|
type="button"
|
|
@click="addRow"
|
|
>
|
|
<i class="mdi mdi-plus-circle-outline" />
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
import customizations from 'common/customizations';
|
|
import { NUMBER, FLOAT } from 'common/fieldTypes';
|
|
|
|
export default {
|
|
props: {
|
|
fields: Array,
|
|
connClient: String
|
|
},
|
|
data () {
|
|
return {
|
|
rows: [],
|
|
operators: [
|
|
'=', '!=', '>', '<', '>=', '<=', 'IN', 'NOT IN', 'LIKE', 'BETWEEN', 'IS NULL', 'IS NOT NULL'
|
|
]
|
|
};
|
|
},
|
|
computed: {
|
|
customizations () {
|
|
return customizations[this.connClient];
|
|
}
|
|
},
|
|
created () {
|
|
this.addRow();
|
|
},
|
|
methods: {
|
|
addRow () {
|
|
this.rows.push({ active: true, field: this.fields[0].name, op: '=', value: '', value2: '' });
|
|
this.$emit('filter-change', this.rows);
|
|
},
|
|
removeRow (i) {
|
|
this.rows = this.rows.filter((_, idx) => idx !== i);
|
|
this.$emit('filter-change', this.rows);
|
|
},
|
|
doFilter () {
|
|
const clausoles = this.rows.filter(el => el.active).map(el => this.createClausole(el));
|
|
this.$emit('filter', clausoles);
|
|
},
|
|
createClausole (filter) {
|
|
const field = this.fields.find(field => field.name === filter.field);
|
|
const isNumeric = [...NUMBER, ...FLOAT].includes(field.type);
|
|
const { elementsWrapper: ew, stringsWrapper: sw } = this.customizations;
|
|
let value;
|
|
|
|
switch (filter.op) {
|
|
case '=':
|
|
case '!=':
|
|
value = isNumeric ? filter.value : `${sw}${filter.value}${sw}`;
|
|
break;
|
|
case 'BETWEEN':
|
|
value = isNumeric ? filter.value : `${sw}${filter.value}${sw}`;
|
|
value += ' AND ';
|
|
value += isNumeric ? filter.value2 : `${sw}${filter.value2}${sw}`;
|
|
break;
|
|
case 'IN':
|
|
case 'NOT IN':
|
|
value = filter.value.split(',').map(val => {
|
|
val = val.trim();
|
|
return isNumeric ? val : `${sw}${val}${sw}`;
|
|
}).join(',');
|
|
value = `(${filter.value})`;
|
|
break;
|
|
case 'IS NULL':
|
|
case 'IS NOT NULL':
|
|
value = '';
|
|
break;
|
|
default:
|
|
value = `${sw}${filter.value}${sw}`;
|
|
}
|
|
|
|
if (isNumeric && !value.length && !['IS NULL', 'IS NOT NULL'].includes(filter.op))
|
|
value = `${sw}${sw}`;
|
|
|
|
return `${ew}${filter.field}${ew} ${filter.op} ${value}`;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.workspace-table-filters {
|
|
padding: 0 0.6rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.workspace-table-filters-buttons {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
padding-bottom: 0.4rem;
|
|
}
|
|
|
|
.workspace-table-filters-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-bottom: 0.4rem;
|
|
}
|
|
|
|
.workspace-table-filters-row-value {
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
</style>
|