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('')
5454const = ref <Filter []>([])
5555
5656const = ref <{
57- label: string
58- value: string
57+ label: string
58+ value: string
5959}[]>([
60- { label: ' Texte' ' text'
61- { label: ' Nombre' ' number'
62- { label: ' Date' ' date'
60+ { label: ' Texte' ' text'
61+ { label: ' Nombre' ' number'
62+ { label: ' Date' ' date'
6363])
6464
6565const = ref <Comparator []>([
66- { label: ' Egal à' ' =' ' =' ' mdi-equal' ' number' false , prefix: ' ' ' '
67- { label: ' Différent' ' !=' ' !=' ' mdi-exclamation' ' number' false , prefix: ' ' ' '
68- { label: ' Supérieur à' ' >' ' >' ' mdi-greater-than' ' number' ' date' false , prefix: ' ' ' '
69- { label: ' Supérieur ou égal à' ' >=' ' >=' ' mdi-greater-than-or-equal' ' number' ' date' false , prefix: ' ' ' '
70- { label: ' Inférieur à' ' <' ' <' ' mdi-less-than' ' number' ' date' false , prefix: ' ' ' '
71- { label: ' Inférieur ou égal à' ' <=' ' <=' ' mdi-less-than-or-equal' ' number' ' date' false , prefix: ' ' ' '
72- { label: ' entre' ' <<' ' between' ' mdi-arrow-expand-horizontal' ' number' ' date' true , prefix: ' ' ' '
73- { label: ' Contiens' ' ^' ' ^' ' mdi-apple-keyboard-control' ' text' false , prefix: ' /' ' /'
74- { label: ' Commence par' ' ^' ' /^' ' mdi-apple-keyboard-control' ' text' false , prefix: ' /^' ' /'
75- { label: ' Fini par' ' ^' ' $/' ' mdi-apple-keyboard-control' ' text' false , prefix: ' /' ' $/'
76- { label: ' Egal à' ' @' ' @' ' mdi-apple-keyboard-control' true , prefix: ' ' ' '
66+ { label: ' Egal à' ' =' ' =' ' mdi-equal' ' number' false , prefix: ' ' ' '
67+ { label: ' Différent' ' !=' ' !=' ' mdi-exclamation' ' number' false , prefix: ' ' ' '
68+ { label: ' Supérieur à' ' >' ' >' ' mdi-greater-than' ' number' ' date' false , prefix: ' ' ' '
69+ { label: ' Supérieur ou égal à' ' >=' ' >=' ' mdi-greater-than-or-equal' ' number' ' date' false , prefix: ' ' ' '
70+ { label: ' Inférieur à' ' <' ' <' ' mdi-less-than' ' number' ' date' false , prefix: ' ' ' '
71+ { label: ' Inférieur ou égal à' ' <=' ' <=' ' mdi-less-than-or-equal' ' number' ' date' false , prefix: ' ' ' '
72+ { label: ' entre' ' <<' ' between' ' mdi-arrow-expand-horizontal' ' number' ' date' true , prefix: ' ' ' '
73+ { label: ' Contiens' ' ^' ' ^' ' mdi-apple-keyboard-control' ' text' false , prefix: ' /' ' /'
74+ { label: ' Commence par' ' ^' ' /^' ' mdi-apple-keyboard-control' ' text' false , prefix: ' /^' ' /'
75+ { label: ' Fini par' ' ^' ' $/' ' mdi-apple-keyboard-control' ' text' false , prefix: ' /' ' $/'
76+ { label: ' Egal à' ' @' ' @' ' mdi-apple-keyboard-control' true , prefix: ' ' ' '
7777
7878])
7979
8080const = (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
8585const = (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
9393const = async () => {
94- const = getSearchFilter .value
95- if (! searchFilter ) return
96- if (searchFilter .comparator .multiplefields ) {
97- for (const of parseMultipleFilter (searchFilter )) {
98- await pushQuery (key , value )
99- }
100- } else {
101- const = parseSimpleFilter (searchFilter )
102- await pushQuery (key , value )
94+ const = getSearchFilter .value
95+ if (! searchFilter ) return
96+ if (searchFilter .comparator .multiplefields ) {
97+ for (const of parseMultipleFilter (searchFilter )) {
98+ await pushQuery (key , value )
10399 }
100+ } else {
101+ const = parseSimpleFilter (searchFilter )
102+ await pushQuery (key , value )
103+ }
104104}
105105
106106const = (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
117117const = (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 = {
123- key: ` filters[>=${searchFilter .field .name }] ` ,
124- value: ` ${searchFilter .comparator .prefix }${searchFilter .searchMin }${searchFilter .comparator .suffix } `
125- }
126- const = {
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 = {
123+ key: ` filters[>=${searchFilter .field .name }] ` ,
124+ value: ` ${searchFilter .comparator .prefix }${searchFilter .searchMin }${searchFilter .comparator .suffix } `
125+ }
126+ const = {
127+ key: ` filters[<=${searchFilter .field .name }] ` ,
128+ value: ` ${searchFilter .comparator .prefix }${searchFilter .searchMax }${searchFilter .comparator .suffix } `
129+ }
130+ return [min , max ]
131131}
132132
133133const = async (key : string , value : string ) => {
134- const = {
135- ... route .query ,
136- }
137- query [key ] = value
138- await router .push ({
139- query
140- })
134+ const = {
135+ ... route .query ,
136+ }
137+ query [key ] = value
138+ await router .push ({
139+ query
140+ })
141141}
142142
143143const = 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
155155const = 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
160160const = 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
167167const = 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
174174const = 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
183183defineExpose ({
184- comparatorTypes ,
185- rightSelect ,
184+ comparatorTypes ,
185+ rightSelect ,
186186})
187- script >
187+ script >
0 commit comments