mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-02 12:49:02 -05:00
implement related recipes on home page
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div id="app" style="margin-bottom: 4vh">
|
||||
<RecipeSwitcher mode="mealplan" />
|
||||
<div class="row">
|
||||
<div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1">
|
||||
<div class="row">
|
||||
@@ -244,6 +245,7 @@ import RecipeCard from "@/components/RecipeCard"
|
||||
import GenericMultiselect from "@/components/GenericMultiselect"
|
||||
import Treeselect from "@riophae/vue-treeselect"
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
|
||||
import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher"
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
@@ -252,7 +254,7 @@ let SETTINGS_COOKIE_NAME = "search_settings"
|
||||
export default {
|
||||
name: "RecipeSearchView",
|
||||
mixins: [ResolveUrlMixin, ApiMixin],
|
||||
components: { GenericMultiselect, RecipeCard, Treeselect },
|
||||
components: { GenericMultiselect, RecipeCard, Treeselect, RecipeSwitcher },
|
||||
data() {
|
||||
return {
|
||||
// this.Models and this.Actions inherited from ApiMixin
|
||||
|
||||
@@ -34,9 +34,11 @@
|
||||
|
||||
<script>
|
||||
const { ApiApiFactory } = require("@/utils/openapi/api")
|
||||
import { ResolveUrlMixin } from "@/utils/utils"
|
||||
|
||||
export default {
|
||||
name: "RecipeSwitcher",
|
||||
mixins: [ResolveUrlMixin],
|
||||
props: {
|
||||
recipe: { type: Number, default: undefined },
|
||||
name: { type: String, default: undefined },
|
||||
@@ -64,7 +66,14 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.recipes = []
|
||||
this.loadRecipes()
|
||||
switch (this.mode) {
|
||||
case "recipe":
|
||||
this.loadRecipes()
|
||||
break
|
||||
case "mealplan":
|
||||
this.loadMealPlans()
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -74,7 +83,8 @@ export default {
|
||||
this.$emit("switch", recipe)
|
||||
break
|
||||
case "mealplan":
|
||||
console.log("navigate to", recipe)
|
||||
console.log("navigate to")
|
||||
window.location.href = this.resolveDjangoUrl("view_recipe", recipe.id)
|
||||
break
|
||||
default:
|
||||
console.log(this.mode, " isn't defined.")
|
||||
@@ -82,7 +92,7 @@ export default {
|
||||
},
|
||||
loadRecipes: function () {
|
||||
let apiClient = new ApiApiFactory()
|
||||
let today = new Date(Date.now()).toISOString().split("T")[0]
|
||||
|
||||
apiClient
|
||||
.relatedRecipe(this.recipe, { query: { levels: 2 } })
|
||||
// get related recipes and save them for later
|
||||
@@ -91,39 +101,44 @@ export default {
|
||||
})
|
||||
// get all recipes for today
|
||||
.then(() => {
|
||||
apiClient
|
||||
.listMealPlans({
|
||||
query: {
|
||||
from_date: today,
|
||||
to_date: today,
|
||||
},
|
||||
})
|
||||
.then((result) => {
|
||||
let promises = []
|
||||
result.data.forEach((mealplan) => {
|
||||
this.recipe_list.push(mealplan?.recipe)
|
||||
this.loadMealPlans()
|
||||
})
|
||||
},
|
||||
loadMealPlans: function () {
|
||||
let apiClient = new ApiApiFactory()
|
||||
let today = new Date(Date.now()).toISOString().split("T")[0]
|
||||
apiClient
|
||||
.listMealPlans({
|
||||
query: {
|
||||
from_date: today,
|
||||
to_date: today,
|
||||
},
|
||||
})
|
||||
.then((result) => {
|
||||
let promises = []
|
||||
result.data.forEach((mealplan) => {
|
||||
this.recipe_list.push(mealplan?.recipe)
|
||||
promises.push(
|
||||
apiClient.relatedRecipe(mealplan?.recipe?.id, { query: { levels: 2 } }).then((r) => {
|
||||
this.recipe_list = [...this.recipe_list, ...r.data]
|
||||
})
|
||||
)
|
||||
})
|
||||
return Promise.all(promises).then(() => {
|
||||
let promises = []
|
||||
let dedup = []
|
||||
this.recipe_list.forEach((recipe) => {
|
||||
if (!dedup.includes(recipe.id)) {
|
||||
dedup.push(recipe.id)
|
||||
promises.push(
|
||||
apiClient.relatedRecipe(mealplan?.recipe?.id, { query: { levels: 2 } }).then((r) => {
|
||||
this.recipe_list = [...this.recipe_list, ...r.data]
|
||||
apiClient.retrieveRecipe(recipe.id).then((result) => {
|
||||
this.recipes.push(result.data)
|
||||
})
|
||||
)
|
||||
})
|
||||
return Promise.all(promises).then(() => {
|
||||
let promises = []
|
||||
let dedup = []
|
||||
this.recipe_list.forEach((recipe) => {
|
||||
if (!dedup.includes(recipe.id)) {
|
||||
dedup.push(recipe.id)
|
||||
promises.push(
|
||||
apiClient.retrieveRecipe(recipe.id).then((result) => {
|
||||
this.recipes.push(result.data)
|
||||
})
|
||||
)
|
||||
}
|
||||
})
|
||||
return Promise.all(promises)
|
||||
})
|
||||
}
|
||||
})
|
||||
return Promise.all(promises)
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user