Skip to content

Commit 4b75cc2

Browse files
tacxoutacxou
committed
WIP fix merge
1 parent a5f535c commit 4b75cc2

File tree

4 files changed

+693
-529
lines changed

4 files changed

+693
-529
lines changed

‎app/src/components/searchfilters/Main.vue‎

Lines changed: 104 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,30 @@
33
//- .col.col-md-2
44
//- q-select(:options="fieldTypes" label="Type de champ" v-model="fieldType" clearable @update:model-value="clearFields(['field', 'comparator'])")
55
.col.col-md-2
6-
q-select(:options="fields" label="Champs" v-model="field" clearable @update:model-value="onFieldChange($event)")
6+
q-select(:options="fields" label="Champs" v-model="field" clearable @update:model-value="onFieldChange($event)")
77
.col.col-md-2
8-
q-select(:options="comparatorFilteredByType" label="Comparateurs" v-model="comparator" clearable @update:model-value="clearFields([])" :disable="isFieldDisabled.comparator")
9-
template(v-slot:selected-item="scope")
10-
q-icon(:name="scope.opt.icon" size="xs")
11-
template(v-slot:option="scope")
12-
q-item(v-bind="scope.itemProps")
13-
q-item-section(avatar)
14-
q-icon(:name="scope.opt.icon")
15-
q-item-section
16-
q-item-label
17-
span {{ scope.opt.label }}
8+
q-select(:options="comparatorFilteredByType" label="Comparateurs" v-model="comparator" clearable @update:model-value="clearFields([])" :disable="isFieldDisabled.comparator")
9+
template(v-slot:selected-item="scope")
10+
q-icon(:name="scope.opt.icon" size="xs")
11+
template(v-slot:option="scope")
12+
q-item(v-bind="scope.itemProps")
13+
q-item-section(avatar)
14+
q-icon(:name="scope.opt.icon")
15+
q-item-section
16+
q-item-label
17+
span {{ scope.opt.label }}
1818

1919
.col-12.col-md-2(v-show="!comparator?.multiplefields")
20-
q-input(v-model="search" label="Rechercher" clearable :type="searchInputType" :disable="isFieldDisabled.search" :prefix="comparator?.prefix" :suffix="comparator?.suffix")
20+
q-input(v-model="search" label="Rechercher" clearable :type="searchInputType" :disable="isFieldDisabled.search" :prefix="comparator?.prefix" :suffix="comparator?.suffix")
2121
.col-6.col-md-2(v-show="comparator?.multiplefields")
22-
q-input(v-model="searchMin" label="Min" clearable :type="searchInputType" :disable="isFieldDisabled.search" )
22+
q-input(v-model="searchMin" label="Min" clearable :type="searchInputType" :disable="isFieldDisabled.search" )
2323
.col-6.col-md-2(v-show="comparator?.multiplefields")
24-
q-input(v-model="searchMax" label="Max" clearable :type="searchInputType" :disable="isFieldDisabled.search" )
24+
q-input(v-model="searchMax" label="Max" clearable :type="searchInputType" :disable="isFieldDisabled.search" )
2525
.col-12.col-md-1
26-
q-btn(color="primary" @click="addFilter" :disable="isFieldDisabled.addButton") Ajouter
26+
q-btn(color="primary" @click="addFilter" :disable="isFieldDisabled.addButton") Ajouter
2727
q-space
2828
.col-12.col-md-2
29-
tk-SearchfiltersRightSelect(ref="rightSelect")
29+
tk-SearchfiltersRightSelect(ref="rightSelect")
3030
</template>
3131

3232
<script lang="ts" setup>
@@ -54,134 +54,134 @@ const searchMax = ref('')
5454
const filters = ref<Filter[]>([])
5555
5656
const fieldTypes = ref<{
57-
label: string
58-
value: string
57+
label: string
58+
value: string
5959
}[]>([
60-
{ label: 'Texte', value: 'text' },
61-
{ label: 'Nombre', value: 'number' },
62-
{ label: 'Date', value: 'date' },
60+
{ label: 'Texte', value: 'text' },
61+
{ label: 'Nombre', value: 'number' },
62+
{ label: 'Date', value: 'date' },
6363
])
6464
6565
const comparatorTypes = ref<Comparator[]>([
66-
{ label: 'Egal à', querySign: '=', value: '=', icon: 'mdi-equal', type: ['number'], multiplefields: false, prefix: '', suffix: '' },
67-
{ label: 'Différent', querySign: '!=', value: '!=', icon: 'mdi-exclamation', type: ['number'], multiplefields: false, prefix: '', suffix: '' },
68-
{ label: 'Supérieur à', querySign: '>', value: '>', icon: 'mdi-greater-than', type: ['number', 'date'], multiplefields: false, prefix: '', suffix: '' },
69-
{ label: 'Supérieur ou égal à', querySign: '>=', value: '>=', icon: 'mdi-greater-than-or-equal', type: ['number', 'date'], multiplefields: false, prefix: '', suffix: '' },
70-
{ label: 'Inférieur à', querySign: '<', value: '<', icon: 'mdi-less-than', type: ['number', 'date'], multiplefields: false, prefix: '', suffix: '' },
71-
{ label: 'Inférieur ou égal à', querySign: '<=', value: '<=', icon: 'mdi-less-than-or-equal', type: ['number', 'date'], multiplefields: false, prefix: '', suffix: '' },
72-
{ label: 'entre', querySign: '<<', value: 'between', icon: 'mdi-arrow-expand-horizontal', type: ['number', 'date'], multiplefields: true, prefix: '', suffix: '' },
73-
{ label: 'Contiens', querySign: '^', value: '^', icon: 'mdi-apple-keyboard-control', type: ['text'], multiplefields: false, prefix: '/', suffix: '/' },
74-
{ label: 'Commence par', querySign: '^', value: '/^', icon: 'mdi-apple-keyboard-control', type: ['text'], multiplefields: false, prefix: '/^', suffix: '/' },
75-
{ label: 'Fini par', querySign: '^', value: '$/', icon: 'mdi-apple-keyboard-control', type: ['text'], multiplefields: false, prefix: '/', suffix: '$/' },
76-
{ label: 'Egal à', querySign: '@', value: '@', icon: 'mdi-apple-keyboard-control', type: [], multiplefields: true, prefix: '', suffix: '' },
66+
{ label: 'Egal à', querySign: '=', value: '=', icon: 'mdi-equal', type: ['number'], multiplefields: false, prefix: '', suffix: '' },
67+
{ label: 'Différent', querySign: '!=', value: '!=', icon: 'mdi-exclamation', type: ['number'], multiplefields: false, prefix: '', suffix: '' },
68+
{ label: 'Supérieur à', querySign: '>', value: '>', icon: 'mdi-greater-than', type: ['number', 'date'], multiplefields: false, prefix: '', suffix: '' },
69+
{ label: 'Supérieur ou égal à', querySign: '>=', value: '>=', icon: 'mdi-greater-than-or-equal', type: ['number', 'date'], multiplefields: false, prefix: '', suffix: '' },
70+
{ label: 'Inférieur à', querySign: '<', value: '<', icon: 'mdi-less-than', type: ['number', 'date'], multiplefields: false, prefix: '', suffix: '' },
71+
{ label: 'Inférieur ou égal à', querySign: '<=', value: '<=', icon: 'mdi-less-than-or-equal', type: ['number', 'date'], multiplefields: false, prefix: '', suffix: '' },
72+
{ label: 'entre', querySign: '<<', value: 'between', icon: 'mdi-arrow-expand-horizontal', type: ['number', 'date'], multiplefields: true, prefix: '', suffix: '' },
73+
{ label: 'Contiens', querySign: '^', value: '^', icon: 'mdi-apple-keyboard-control', type: ['text'], multiplefields: false, prefix: '/', suffix: '/' },
74+
{ label: 'Commence par', querySign: '^', value: '/^', icon: 'mdi-apple-keyboard-control', type: ['text'], multiplefields: false, prefix: '/^', suffix: '/' },
75+
{ label: 'Fini par', querySign: '^', value: '$/', icon: 'mdi-apple-keyboard-control', type: ['text'], multiplefields: false, prefix: '/', suffix: '$/' },
76+
{ label: 'Egal à', querySign: '@', value: '@', icon: 'mdi-apple-keyboard-control', type: [], multiplefields: true, prefix: '', suffix: '' },
7777
7878
])
7979
8080
const onFieldChange = (value: Field) => {
81-
value === null ? fieldType.value = '' : fieldType.value = value.type
82-
clearFields(['comparator'])
81+
value === null ? fieldType.value = '' : fieldType.value = value.type
82+
clearFields(['comparator'])
8383
}
8484
8585
const clearFields = (fields: string[]) => {
86-
if (fields.includes('field')) field = ref()
87-
if (fields.includes('comparator')) comparator = ref()
88-
search.value = ''
89-
searchMin.value = ''
90-
searchMax.value = ''
86+
if (fields.includes('field')) field = ref()
87+
if (fields.includes('comparator')) comparator = ref()
88+
search.value = ''
89+
searchMin.value = ''
90+
searchMax.value = ''
9191
}
9292
9393
const addFilter = async () => {
94-
const searchFilter = getSearchFilter.value
95-
if (!searchFilter) return
96-
if (searchFilter.comparator.multiplefields) {
97-
for (const { key, value } of parseMultipleFilter(searchFilter)) {
98-
await pushQuery(key, value)
99-
}
100-
} else {
101-
const { key, value } = parseSimpleFilter(searchFilter)
102-
await pushQuery(key, value)
94+
const searchFilter = getSearchFilter.value
95+
if (!searchFilter) return
96+
if (searchFilter.comparator.multiplefields) {
97+
for (const { key, value } of parseMultipleFilter(searchFilter)) {
98+
await pushQuery(key, value)
10399
}
100+
} else {
101+
const { key, value } = parseSimpleFilter(searchFilter)
102+
await pushQuery(key, value)
103+
}
104104
}
105105
106106
const parseSimpleFilter = (searchFilter: SearchFilter) => {
107-
if (searchFilter.field.type === 'date') {
108-
if (searchFilter.comparator.querySign === '<' || searchFilter.comparator.querySign === '>=') searchFilter.search = dayjs(searchFilter.search).startOf('day').toISOString()
109-
if (searchFilter.comparator.querySign === '>' || searchFilter.comparator.querySign === '<=') searchFilter.search = dayjs(searchFilter.search).endOf('day').toISOString()
110-
}
111-
return {
112-
key: `filters[${searchFilter.comparator.querySign}${searchFilter.field.name}]`,
113-
value: `${searchFilter.comparator.prefix}${searchFilter.search}${searchFilter.comparator.suffix}`
114-
}
107+
if (searchFilter.field.type === 'date') {
108+
if (searchFilter.comparator.querySign === '<' || searchFilter.comparator.querySign === '>=') searchFilter.search = dayjs(searchFilter.search).startOf('day').toISOString()
109+
if (searchFilter.comparator.querySign === '>' || searchFilter.comparator.querySign === '<=') searchFilter.search = dayjs(searchFilter.search).endOf('day').toISOString()
110+
}
111+
return {
112+
key: `filters[${searchFilter.comparator.querySign}${searchFilter.field.name}]`,
113+
value: `${searchFilter.comparator.prefix}${searchFilter.search}${searchFilter.comparator.suffix}`
114+
}
115115
}
116116
117117
const parseMultipleFilter = (searchFilter: SearchFilter) => {
118-
if (searchFilter.field.type === 'date') {
119-
searchFilter.searchMin = dayjs(searchFilter.searchMin).startOf('day').toISOString()
120-
searchFilter.searchMax = dayjs(searchFilter.searchMax).endOf('day').toISOString()
121-
}
122-
const min = {
123-
key: `filters[>=${searchFilter.field.name}]`,
124-
value: `${searchFilter.comparator.prefix}${searchFilter.searchMin}${searchFilter.comparator.suffix}`
125-
}
126-
const max = {
127-
key: `filters[<=${searchFilter.field.name}]`,
128-
value: `${searchFilter.comparator.prefix}${searchFilter.searchMax}${searchFilter.comparator.suffix}`
129-
}
130-
return [min, max]
118+
if (searchFilter.field.type === 'date') {
119+
searchFilter.searchMin = dayjs(searchFilter.searchMin).startOf('day').toISOString()
120+
searchFilter.searchMax = dayjs(searchFilter.searchMax).endOf('day').toISOString()
121+
}
122+
const min = {
123+
key: `filters[>=${searchFilter.field.name}]`,
124+
value: `${searchFilter.comparator.prefix}${searchFilter.searchMin}${searchFilter.comparator.suffix}`
125+
}
126+
const max = {
127+
key: `filters[<=${searchFilter.field.name}]`,
128+
value: `${searchFilter.comparator.prefix}${searchFilter.searchMax}${searchFilter.comparator.suffix}`
129+
}
130+
return [min, max]
131131
}
132132
133133
const pushQuery = async (key: string, value: string) => {
134-
const query = {
135-
...route.query,
136-
}
137-
query[key] = value
138-
await router.push({
139-
query
140-
})
134+
const query = {
135+
...route.query,
136+
}
137+
query[key] = value
138+
await router.push({
139+
query
140+
})
141141
}
142142
143143
const getSearchFilter = computed(() => {
144-
if (field.value === undefined || field.value === null) return null
145-
if (comparator.value === undefined || comparator.value === null) return null
146-
return {
147-
field: field!.value,
148-
comparator: comparator!.value,
149-
search: search.value,
150-
searchMin: searchMin.value,
151-
searchMax: searchMax.value
152-
}
144+
if (field.value === undefined || field.value === null) return null
145+
if (comparator.value === undefined || comparator.value === null) return null
146+
return {
147+
field: field!.value,
148+
comparator: comparator!.value,
149+
search: search.value,
150+
searchMin: searchMin.value,
151+
searchMax: searchMax.value
152+
}
153153
})
154154
155155
const searchInputType = computed(() => {
156-
if (fieldType.value === undefined || fieldType.value === null) return 'text'
157-
return fieldType.value
156+
if (fieldType.value === undefined || fieldType.value === null) return 'text'
157+
return fieldType.value
158158
})
159159
160160
const fieldsFilteredByType = computed(() => {
161-
if (fieldType.value === undefined || fieldType.value === null) return []
162-
return fields.value.filter((field) => {
163-
return field.type === fieldType.value
164-
})
161+
if (fieldType.value === undefined || fieldType.value === null) return []
162+
return fields.value.filter((field) => {
163+
return field.type === fieldType.value
164+
})
165165
})
166166
167167
const comparatorFilteredByType = computed(() => {
168-
if (fieldType.value === undefined || fieldType.value === null) return []
169-
return comparatorTypes.value.filter((comparator) => {
170-
return comparator.type.includes(fieldType.value!)
171-
})
168+
if (fieldType.value === undefined || fieldType.value === null) return []
169+
return comparatorTypes.value.filter((comparator) => {
170+
return comparator.type.includes(fieldType.value!)
171+
})
172172
})
173173
174174
const isFieldDisabled = computed(() => {
175-
return {
176-
field: false,
177-
comparator: !field.value,
178-
search: !field.value || !comparator.value,
179-
addButton: !field.value || !comparator.value || !search.value,
180-
}
175+
return {
176+
field: false,
177+
comparator: !field.value,
178+
search: !field.value || !comparator.value,
179+
addButton: !field.value || !comparator.value || !search.value,
180+
}
181181
})
182182
183183
defineExpose({
184-
comparatorTypes,
185-
rightSelect,
184+
comparatorTypes,
185+
rightSelect,
186186
})
187-
</script>
187+
</script>

0 commit comments

Comments
 (0)