55
55
/>
56
56
</InputField >
57
57
58
+ <InputField v-slot =" { id }" :label =" $t('admin.settings.agents.filters.name')" >
59
+ <span class =" text-sm text-wp-text-alt-100 mb-2" >{{ $t('admin.settings.agents.filters.desc') }}</span >
60
+ <div class =" flex flex-col gap-2" >
61
+ <div v-for =" (filter, index) in filters" :key =" index" class =" flex gap-4" >
62
+ <TextField
63
+ :id =" `${id}-key-${index}`"
64
+ v-model =" filter.key"
65
+ :placeholder =" $t('admin.settings.agents.filters.key')"
66
+ />
67
+ <TextField
68
+ :id =" `${id}-value-${index}`"
69
+ v-model =" filter.value"
70
+ :placeholder =" $t('admin.settings.agents.filters.value')"
71
+ />
72
+ <div class =" w-10 flex-shrink-0" >
73
+ <Button
74
+ type =" button"
75
+ color =" red"
76
+ class =" ml-auto"
77
+ :title =" $t('admin.settings.agents.filters.delete')"
78
+ @click =" deleteFilter(index)"
79
+ >
80
+ <Icon name =" remove" />
81
+ </Button >
82
+ </div >
83
+ </div >
84
+ <div class =" flex gap-4" >
85
+ <TextField
86
+ :id =" `${id}-new-key`"
87
+ v-model =" newFilterKey"
88
+ :placeholder =" $t('admin.settings.agents.filters.key')"
89
+ />
90
+ <TextField
91
+ :id =" `${id}-new-value`"
92
+ v-model =" newFilterValue"
93
+ :placeholder =" $t('admin.settings.agents.filters.value')"
94
+ />
95
+ <div class =" w-10 flex-shrink-0" >
96
+ <Button
97
+ type =" button"
98
+ color =" green"
99
+ class =" ml-auto"
100
+ :title =" $t('admin.settings.agents.filters.add')"
101
+ @click =" addFilter"
102
+ >
103
+ <Icon name =" plus" />
104
+ </Button >
105
+ </div >
106
+ </div >
107
+ </div >
108
+ </InputField >
109
+
58
110
<InputField :label =" $t('admin.settings.agents.no_schedule.name')" >
59
111
<Checkbox
60
112
:model-value =" selectedAgent.no_schedule || false"
@@ -136,6 +188,7 @@ import { useI18n } from 'vue-i18n';
136
188
137
189
import Badge from ' ~/components/atomic/Badge.vue' ;
138
190
import Button from ' ~/components/atomic/Button.vue' ;
191
+ import Icon from ' ~/components/atomic/Icon.vue' ;
139
192
import IconButton from ' ~/components/atomic/IconButton.vue' ;
140
193
import ListItem from ' ~/components/atomic/ListItem.vue' ;
141
194
import Checkbox from ' ~/components/form/Checkbox.vue' ;
@@ -161,6 +214,9 @@ if (org === undefined) {
161
214
162
215
const selectedAgent = ref <Partial <Agent >>();
163
216
const isEditingAgent = computed (() => !! selectedAgent .value ?.id );
217
+ const filters = ref <Array <{ key: string ; value: string }>>([]);
218
+ const newFilterKey = ref (' ' );
219
+ const newFilterValue = ref (' ' );
164
220
165
221
async function loadAgents(page : number ): Promise <Agent [] | null > {
166
222
return apiClient .getOrgAgents (org ! .value .id , { page });
@@ -173,9 +229,12 @@ const { doSubmit: saveAgent, isLoading: isSaving } = useAsyncAction(async () =>
173
229
throw new Error (" Unexpected: Can't get agent" );
174
230
}
175
231
232
+ selectedAgent .value .filters = Object .fromEntries (filters .value .map ((filter ) => [filter .key , filter .value ]));
233
+
176
234
if (isEditingAgent .value ) {
177
235
await apiClient .updateOrgAgent (org .value .id , selectedAgent .value .id ! , selectedAgent .value );
178
236
selectedAgent .value = undefined ;
237
+ filters .value = [];
179
238
} else {
180
239
selectedAgent .value = await apiClient .createOrgAgent (org .value .id , selectedAgent .value );
181
240
}
@@ -199,9 +258,23 @@ const { doSubmit: deleteAgent, isLoading: isDeleting } = useAsyncAction(async (_
199
258
200
259
function editAgent(agent : Agent ) {
201
260
selectedAgent .value = cloneDeep (agent );
261
+ filters .value = Object .entries (agent .filters || {}).map (([key , value ]) => ({ key , value }));
202
262
}
203
263
204
264
function showAddAgent() {
205
- selectedAgent .value = cloneDeep ({ name: ' ' });
265
+ selectedAgent .value = cloneDeep ({ name: ' ' , filters: {} });
266
+ filters .value = [];
267
+ }
268
+
269
+ function deleteFilter(index : number ) {
270
+ filters .value .splice (index , 1 );
271
+ }
272
+
273
+ function addFilter() {
274
+ if (newFilterKey .value && newFilterValue .value ) {
275
+ filters .value .push ({ key: newFilterKey .value , value: newFilterValue .value });
276
+ newFilterKey .value = ' ' ;
277
+ newFilterValue .value = ' ' ;
278
+ }
206
279
}
207
280
</script >
0 commit comments