add dialog to backup imports

frontend/src/pages/Admin/Dashboard/BackupViewer.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <ImportSummaryDialog ref="report" />
     <ImportDialog
       :name="selectedName"
       :date="selectedDate"
@@ -62,11 +63,12 @@
 
 <script>
 import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
+import ImportSummaryDialog from "@/components/ImportSummaryDialog";
 import { api } from "@/api";
 import StatCard from "./StatCard";
 import ImportDialog from "../Backup/ImportDialog";
 export default {
-  components: { StatCard, ImportDialog, TheUploadBtn },
+  components: { StatCard, ImportDialog, TheUploadBtn, ImportSummaryDialog },
   data() {
     return {
       color: "secondary",
@@ -108,10 +110,8 @@ export default {
       this.loading = true;
       const response = await api.backups.import(data.name, data);
       if (response) {
-        let importData = response.data;
+        const importData = response.data;
-        this.$emit("finished", importData);
+        this.$refs.report.open(importData);
-      } else {
-        this.$emit("finished");
       }
       this.loading = false;
     },

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

@@ -14,10 +14,14 @@
           </template>
           <template v-slot:actions>
             <div class="d-flex row py-3 justify-space-around">
-              <v-btn small color="primary">
+              <v-btn small color="primary" :to="{ path: '/admin/toolbox/', query: { tab: 'organize', filter: 'tag' } }">
                 <v-icon left> mdi-tag </v-icon> Untagged {{ statistics.untaggedRecipes }}
               </v-btn>
-              <v-btn small color="primary">
+              <v-btn
+                small
+                color="primary"
+                :to="{ path: '/admin/toolbox/', query: { tab: 'organize', filter: 'category' } }"
+              >
                 <v-icon left> mdi-tag </v-icon> Uncategorized {{ statistics.uncategorizedRecipes }}
               </v-btn>
             </div>

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 value="category-editor"> <CategoryTagEditor :is-tags="false"/></v-tab-item>
-        <v-tab-item><CategoryTagEditor :is-tags="true" /> </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 {
+    return {};
-      tab: 0,
-    };
   },
 };
 </script>