list unorganized recipes

frontend/src/api/recipe.js

@@ -17,6 +17,8 @@ const recipeURLs = {
   createAsset: slug => `${prefix}${slug}/assets`,
   recipeImage: slug => `${prefix}${slug}/image`,
   updateImage: slug => `${prefix}${slug}/image`,
+  untagged: prefix + "summary/untagged",
+  uncategorized: prefix + "summary/uncategorized ",
 };
 
 export const recipeAPI = {
@@ -134,6 +136,16 @@ export const recipeAPI = {
     return response.data;
   },
 
+  async allUntagged() {
+    const response = await apiReq.get(recipeURLs.untagged);
+    return response.data;
+  },
+
+  async allUnategorized() {
+    const response = await apiReq.get(recipeURLs.uncategorized);
+    return response.data;
+  },
+
   recipeImage(recipeSlug) {
     return `/api/media/recipes/${recipeSlug}/images/original.webp`;
   },

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

@@ -14,7 +14,7 @@
       </v-btn-toggle>
       <v-spacer v-if="!isMobile"> </v-spacer>
 
-      <FuseSearchBar :raw-data="allItems" @results="filterItems" :search="searchString">
+      <!-- <FuseSearchBar :raw-data="shownRecipes" @results="filterItems" :search="searchString">
         <v-text-field
           v-model="searchString"
           clearable
@@ -27,24 +27,52 @@
           prepend-inner-icon="mdi-magnify"
         >
         </v-text-field>
-      </FuseSearchBar>
+      </FuseSearchBar> -->
     </div>
+    <v-card-text>
+      <CardSection :sortable="true" title="Unorganized" :recipes="shownRecipes" @sort="assignSorted" />
+    </v-card-text>
   </v-card>
 </template>
 
 <script>
-import FuseSearchBar from "@/components/UI/Search/FuseSearchBar";
+// import FuseSearchBar from "@/components/UI/Search/FuseSearchBar";
+import { api } from "@/api";
+import CardSection from "@/components/UI/CardSection";
 export default {
-  components: { FuseSearchBar },
+  components: {
+    // FuseSearchBar,
+    CardSection,
+  },
   data() {
     return {
       buttonToggle: 0,
-      allItems: [],
+      tagRecipes: [],
+      categoryRecipes: [],
       searchString: "",
-      searchResults: [],
+      sortedResults: [],
     };
   },
   computed: {
+    shownRecipes() {
+      console.log(this.filter);
+      if (this.sortedResults.length > 0) {
+        return this.sortedResults;
+      } else {
+        switch (this.filter) {
+          case "category":
+            console.log(this.categoryRecipes);
+            return this.categoryRecipes;
+          case "tag":
+            console.log(this.tagRecipes);
+            return this.tagRecipes;
+
+          default:
+            break;
+        }
+        return [];
+      }
+    },
     isMobile() {
       return this.$vuetify.breakpoint.name === "xs";
     },
@@ -60,10 +88,22 @@ export default {
       },
     },
   },
+  mounted() {
+    this.refreshUnorganized();
+  },
   methods: {
     filterItems(val) {
       this.searchResults = val.map(x => x.item);
     },
+    async refreshUnorganized() {
+      this.loading = true;
+      this.tagRecipes = await api.recipes.allUntagged();
+      this.categoryRecipes = await api.recipes.allUnategorized();
+      this.loading = false;
+    },
+    assignSorted(val) {
+      this.sortedResults = val;
+    },
   },
 };
 </script>