WIP custom filter usage

vue3/src/pages/SearchPage.vue

@@ -5,6 +5,7 @@
                 <v-card :loading="loading">
                     <v-card-title>
                         {{ $t('Search') }}
+
                     </v-card-title>
                     <v-card-text>
                         <v-form :disabled="loading">
@@ -22,13 +23,20 @@
                             <!--                            <v-date-input :label="$t('updatedon')" v-model="searchParameters.updatedon" clearable></v-date-input>-->
 
                             <v-checkbox :label="$t('make_now')" v-model="urlSearchParams.makenow"></v-checkbox>
+
+                            <model-select model="CustomFilter" v-model="selectedCustomFilter">
+                                <template #append>
+                                    <v-btn icon="fa-solid fa-upload" color="warning" :disabled="Object.keys(selectedCustomFilter).length == 0"></v-btn>
+                                    <v-btn icon="$save" class="ms-1" color="save" @click="saveCustomFilter()"></v-btn>
+                                </template>
+                            </model-select>
                         </v-form>
 
 
                     </v-card-text>
                     <v-card-actions>
-                        <v-btn @click="reset()">{{ $t('Reset') }}</v-btn>
-                        <v-btn @click="searchRecipes({page: 1})">{{ $t('Search') }}</v-btn>
+                        <v-btn @click="reset()" prepend-icon="fa-solid fa-circle-xmark" :disabled="Object.keys(urlSearchParams).length == 0">{{ $t('Reset') }}</v-btn>
+                        <v-btn @click="searchRecipes({page: 1})" prepend-icon="$search">{{ $t('Search') }}</v-btn>
                     </v-card-actions>
                 </v-card>
             </v-col>
@@ -46,6 +54,7 @@
                         :items-per-page="urlSearchParams.pageSize"
                         :items-length="tableItemCount"
                         @click:row="handleRowClick"
+                        disable-sort
                     >
                         <template #item.image="{item}">
                             <v-avatar :image="item.image"></v-avatar>
@@ -62,13 +71,25 @@
                 </v-card>
             </v-col>
         </v-row>
+
+        <v-dialog v-model="dialog">
+            <v-card>
+                <v-closable-card-title :title="$t('SavedSearch')" v-model="dialog"></v-closable-card-title>
+                <v-card-text>
+                    <v-text-field :label="$t('Name')" v-model="newFilterName"></v-text-field>
+                </v-card-text>
+                <v-card-actions>
+                    <v-btn prepend-icon="$create" color="create" @click="createCustomFilter()">{{ $t('Create') }}</v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
     </v-container>
 </template>
 
 <script setup lang="ts">
 
 import {onMounted, ref, watch} from "vue";
-import {ApiApi, ApiRecipeListRequest, RecipeOverview} from "@/openapi";
+import {ApiApi, ApiRecipeListRequest, CustomFilter, RecipeOverview} from "@/openapi";
 import {useUrlSearchParams} from "@vueuse/core";
 import {useI18n} from "vue-i18n";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
@@ -79,12 +100,14 @@ import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
 import {useRouter} from "vue-router";
 import KeywordsBar from "@/components/display/KeywordsBar.vue";
 import {VDataTableUpdateOptions} from "@/vuetify";
+import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
 
 const {t} = useI18n()
 const router = useRouter()
 const urlSearchParams = useUrlSearchParams('history', {})
 
 const loading = ref(false)
+const dialog = ref(false)
 
 const tableHeaders = [
     {title: t('Image'), width: '1%', noBreak: true, key: 'image',},
@@ -96,6 +119,8 @@ const tableHeaders = [
 const tableItemCount = ref(0)
 
 const recipes = ref([] as RecipeOverview[])
+const selectedCustomFilter = ref({} as CustomFilter)
+const newFilterName = ref('')
 
 onMounted(() => {
     urlSearchParams.page = 1
@@ -106,7 +131,7 @@ function searchRecipes(options: VDataTableUpdateOptions) {
     loading.value = true
 
     urlSearchParams.page = options.page
-    if(options.itemsPerPage){
+    if (options.itemsPerPage) {
         urlSearchParams.pageSize = options.itemsPerPage
     }
 
@@ -136,6 +161,43 @@ function handleRowClick(event: PointerEvent, data: any) {
     router.push({name: 'view_recipe', params: {id: recipes.value[data.index].id}})
 }
 
+/**
+ * triggered by save button, if filter exists update it, if not open dialog to create a new filter
+ */
+function saveCustomFilter() {
+    let api = new ApiApi()
+
+    if (Object.keys(selectedCustomFilter.value).length > 0) {
+        loading.value = true
+        api.apiCustomFilterUpdate({id: selectedCustomFilter.value.id!, customFilter: selectedCustomFilter.value}).then((r) => {
+            selectedCustomFilter.value = r
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+        }).finally(() => {
+            loading.value = false
+        })
+    } else {
+        dialog.value = true
+    }
+}
+
+/**
+ * create new filter
+ */
+function createCustomFilter() {
+    let api = new ApiApi()
+
+    dialog.value = false
+    loading.value = true
+    api.apiCustomFilterCreate({customFilter: {name: newFilterName.value} as CustomFilter}).then((r) => {
+        selectedCustomFilter.value = r
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+    }).finally(() => {
+        loading.value = false
+    })
+}
+
 </script>
 
 <style scoped>