Get Recipes Route Rewrite (#339)

* deprecate old route

* auto-gen

* recipe card infinite scroll

* fix datatable

* set hard-limit option

* add loader

* set scroll on navigation

* add auto-import

* fix slow initial load

* remove console.logs

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

frontend/src/components/ImportSummaryDialog/index.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import DataTable from "@/components/ImportSummaryDialog";
+import DataTable from "@/components/ImportSummaryDialog/DataTable";
 export default {
   components: {
     DataTable,

frontend/src/components/MealPlan/MealPlanNew.vue

@@ -116,6 +116,7 @@ export default {
   },
   async mounted() {
     await this.$store.dispatch("requestCurrentGroup");
+    await this.$store.dispatch("requestAllRecipes");
     await this.buildMealStore();
   },
 
@@ -151,6 +152,9 @@ export default {
       const recipes = this.items.filter(x => !this.usedRecipes.includes(x));
       return recipes.length > 0 ? recipes : this.items;
     },
+    allRecipes() {
+      return this.$store.getters.getRecentRecipes;
+    },
   },
 
   methods: {
@@ -159,15 +163,7 @@ export default {
       this.items = await api.recipes.getAllByCategory(categories);
 
       if (this.items.length === 0) {
-        const keys = [
-          "name",
-          "slug",
-          "image",
-          "description",
-          "dateAdded",
-          "rating",
-        ];
-        this.items = await api.recipes.allByKeys(keys);
+        this.items = this.allRecipes;
       }
     },
     getRandom(list) {

frontend/src/components/Recipe/EditorButtonRow.vue

@@ -9,7 +9,7 @@
     >
       <ConfirmationDialog
         :title="$t('recipe.delete-recipe')"
-        :message="$t('recipe.delete-ConfirmationDialog')"
+        :message="$t('recipe.delete-confirmation')"
         color="error"
         icon="mdi-alert-circle"
         ref="deleteRecipieConfirm"

frontend/src/components/Recipe/RecipeTimeCard.vue

@@ -33,11 +33,6 @@ export default {
     totalTime: String,
     performTime: String,
   },
-  watch: {
-    showCards(val) {
-      console.log(val);
-    },
-  },
   computed: {
     showCards() {
       return [this.prepTime, this.totalTime, this.performTime].some(

frontend/src/components/UI/CardSection.vue

@@ -78,6 +78,16 @@
         </v-col>
       </v-row>
     </div>
+    <div v-intersect="bumpList" class="d-flex">
+      <v-progress-circular
+        v-if="loading"
+        class="mx-auto mt-1"
+        :size="50"
+        :width="7"
+        color="primary"
+        indeterminate
+      ></v-progress-circular>
+    </div>
   </div>
 </template>
 
@@ -96,10 +106,16 @@ export default {
     title: {
       default: null,
     },
-    recipes: Array,
-    cardLimit: {
-      default: 999,
+    hardLimit: {
+      default: 99999,
     },
+    recipes: Array,
+  },
+  data() {
+    return {
+      cardLimit: 30,
+      loading: false,
+    };
   },
   computed: {
     viewScale() {
@@ -113,6 +129,22 @@ export default {
       }
     },
   },
+  methods: {
+    bumpList() {
+      const newCardLimit = Math.min(this.cardLimit + 20, this.hardLimit);
+
+      if (this.loading === false && newCardLimit > this.cardLimit) {
+        this.setLoader();
+      }
+
+      this.cardLimit = newCardLimit;
+    },
+    async setLoader() {
+      this.loading = true;
+      await new Promise(r => setTimeout(r, 3000));
+      this.loading = false;
+    },
+  },
 };
 </script>
 

frontend/src/components/UI/Search/SearchBar.vue

@@ -89,7 +89,6 @@ export default {
       searchSlug: "",
       search: "",
       menuModel: false,
-      data: [],
       result: [],
       fuseResults: [],
       isDark: false,
@@ -107,9 +106,12 @@ export default {
   },
   mounted() {
     this.isDark = this.$store.getters.getIsDark;
-    this.data = this.$store.getters.getRecentRecipes;
+    this.$store.dispatch("requestAllRecipes");
   },
   computed: {
+    data() {
+      return this.$store.getters.getRecentRecipes;
+    },
     autoResults() {
       return this.fuseResults.length > 1 ? this.fuseResults : this.results;
     },