feature/finish-recipe-assets (#384)

* add features to readme

* Copy markdown reference

* prop as whole recipe

* parameter as url instead of query

* add card styling to editor

* move images to /recipes/{slug}/images

* add image to breaking changes

* fix delete and import errors

* fix debug/about response

* logger updates

* dashboard ui

* add server side events

* unorganized routes

* default slot

* add backup viewer to dashboard

* format

* add dialog to backup imports

* initial event support

* delete assets when removed

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/pages/Admin/ToolBox/index.vue

@@ -4,20 +4,25 @@
       <v-tabs v-model="tab" background-color="primary" centered dark icons-and-text>
         <v-tabs-slider></v-tabs-slider>
 
-        <v-tab>
+        <v-tab href="#category-editor">
           {{ $t("recipe.categories") }}
           <v-icon>mdi-tag-multiple-outline</v-icon>
         </v-tab>
 
-        <v-tab>
+        <v-tab href="#tag-editor">
           {{ $t("tag.tags") }}
           <v-icon>mdi-tag-multiple-outline</v-icon>
         </v-tab>
+        <v-tab href="#organize">
+          Organize
+          <v-icon>mdi-broom</v-icon>
+        </v-tab>
       </v-tabs>
 
       <v-tabs-items v-model="tab">
-        <v-tab-item><CategoryTagEditor :is-tags="false"/></v-tab-item>
-        <v-tab-item><CategoryTagEditor :is-tags="true" /> </v-tab-item>
+        <v-tab-item value="category-editor"> <CategoryTagEditor :is-tags="false"/></v-tab-item>
+        <v-tab-item value="tag-editor"> <CategoryTagEditor :is-tags="true" /> </v-tab-item>
+        <v-tab-item value="organize"> <RecipeOrganizer :is-tags="true" /> </v-tab-item>
       </v-tabs-items>
     </v-card>
   </div>
@@ -25,14 +30,24 @@
 
 <script>
 import CategoryTagEditor from "./CategoryTagEditor";
+import RecipeOrganizer from "./RecipeOrganizer";
 export default {
   components: {
     CategoryTagEditor,
+    RecipeOrganizer,
+  },
+  computed: {
+    tab: {
+      set(tab) {
+        this.$router.replace({ query: { ...this.$route.query, tab } });
+      },
+      get() {
+        return this.$route.query.tab;
+      },
+    },
   },
   data() {
-    return {
-      tab: 0,
-    };
+    return {};
   },
 };
 </script>