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/RecipeOrganizer.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-card outlined class="mt-n1">
+    <div class="d-flex justify-center align-center pa-2 flex-wrap">
+      <v-btn-toggle v-model="filter" mandatory color="primary">
+        <v-btn small value="category">
+          <v-icon>mdi-tag-multiple</v-icon>
+          {{ $t("category.category") }}
+        </v-btn>
+
+        <v-btn small value="tag">
+          <v-icon>mdi-tag-multiple</v-icon>
+          {{ $t("tag.tags") }}
+        </v-btn>
+      </v-btn-toggle>
+      <v-spacer v-if="!isMobile"> </v-spacer>
+
+      <FuseSearchBar :raw-data="allItems" @results="filterItems" :search="searchString">
+        <v-text-field
+          v-model="searchString"
+          clearable
+          solo
+          dense
+          class="mx-2"
+          hide-details
+          single-line
+          :placeholder="$t('search.search')"
+          prepend-inner-icon="mdi-magnify"
+        >
+        </v-text-field>
+      </FuseSearchBar>
+    </div>
+  </v-card>
+</template>
+
+<script>
+import FuseSearchBar from "@/components/UI/Search/FuseSearchBar";
+export default {
+  components: { FuseSearchBar },
+  data() {
+    return {
+      buttonToggle: 0,
+      allItems: [],
+      searchString: "",
+      searchResults: [],
+    };
+  },
+  computed: {
+    isMobile() {
+      return this.$vuetify.breakpoint.name === "xs";
+    },
+    isCategory() {
+      return this.buttonToggle === 0;
+    },
+    filter: {
+      set(filter) {
+        this.$router.replace({ query: { ...this.$route.query, filter } });
+      },
+      get() {
+        return this.$route.query.filter;
+      },
+    },
+  },
+  methods: {
+    filterItems(val) {
+      this.searchResults = val.map(x => x.item);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

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>