From 45a6564e1704898285ce408c87781c5cb9973323 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Wed, 10 Jul 2024 17:39:20 +0200
Subject: [PATCH] added FAB to editor

---
 vue3/src/pages/RecipeEditPage.vue | 25 ++++++++++++++++++++++++-
 vue3/src/vuetify.ts               |  6 +++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/vue3/src/pages/RecipeEditPage.vue b/vue3/src/pages/RecipeEditPage.vue
index 63a1c24cb..3aec216f3 100644
--- a/vue3/src/pages/RecipeEditPage.vue
+++ b/vue3/src/pages/RecipeEditPage.vue
@@ -17,6 +17,8 @@
                             <v-textarea
                                 label="Description"
                                 v-model="recipe.description"
+                                :rules="[v => v.length <= 512 || '> 512']"
+                                counter
                                 clearable
                             ></v-textarea>
 
@@ -73,8 +75,29 @@
                 <step-editor v-model="recipe.steps[index]" :step-index="index"></step-editor>
             </v-col>
         </v-row>
+
+        <v-speed-dial
+            location="top"
+            transition="fade-transition"
+        >
+            <template v-slot:activator="{ props: activatorProps }">
+                <v-fab
+                    app
+                    v-bind="activatorProps"
+                    color="primary"
+                    size="large"
+                    icon="$save"
+                ></v-fab>
+            </template>
+
+            <v-btn key="1" icon="$success"></v-btn>
+            <v-btn key="2" icon="$info"></v-btn>
+            <v-btn key="3" icon="$warning"></v-btn>
+            <v-btn key="4" icon="$error"></v-btn>
+        </v-speed-dial>
     </v-container>
 
+
     <v-btn @click="updateRecipe()">Save</v-btn>
     <v-btn :to="{name: 'view_recipe', params: {id: recipe_id}}">View</v-btn>
 
@@ -110,7 +133,7 @@ export default defineComponent({
 
         const api = new ApiApi()
         api.apiKeywordList({page: 1, pageSize: 100}).then(r => {
-            if(r.results){
+            if (r.results) {
                 this.keywords = r.results
             }
         })
diff --git a/vue3/src/vuetify.ts b/vue3/src/vuetify.ts
index e86d2ce0b..d9784a675 100644
--- a/vue3/src/vuetify.ts
+++ b/vue3/src/vuetify.ts
@@ -32,7 +32,11 @@ export default createVuetify({
     },
     icons: {
         defaultSet: 'fa',
-        aliases,
+        aliases : {
+            ...aliases,
+            save: 'fa-regular fa-floppy-disk',
+            delete: 'fa-regular fa-trash-can',
+        },
         sets: {
             fa,
         },