cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

properly reactive meal plan store with dict

Browse Source
This commit is contained in:
vabene1111
2023-02-18 19:13:32 +01:00
parent 9167261714
commit 83947e31aa
3 changed files with 74 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
vue/src/apps/RecipeSearchView/RecipeSearchView.vue
View File

@ -797,7 +797,8 @@
<div class="col-12 col-xl-10 col-lg-10 offset-xl-1 offset-lg-1">
<div style="overflow-x:visible; overflow-y: hidden;white-space: nowrap;">
<b-dropdown id="sortby" :text="sortByLabel" variant="outline-primary" size="sm" style="overflow-y: visible; overflow-x: visible; position: static"
<b-dropdown id="sortby" :text="sortByLabel" variant="outline-primary" size="sm"
style="overflow-y: visible; overflow-x: visible; position: static"
class="shadow-none" toggle-class="text-decoration-none">
<div v-for="o in sortOptions" :key="o.id">
<b-dropdown-item
@ -833,7 +834,8 @@
<div class="row">
<div class="col col-md-12">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 0.5rem;row-gap: 1rem; grid-auto-rows: max-content; ">
<div
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 0.5rem;row-gap: 1rem; grid-auto-rows: max-content; ">
<div v-for="day in meal_plan_grid" v-bind:key="day.day">
<b-list-group v-if="day.plan_entries.length > 0 || !isMobile">
<b-list-group-item>
@ -842,7 +844,8 @@
<h4>{{ day.date_label }}</h4>
</div>
<div class="flex-grow-1 text-right">
<!--<b-button class=""><i class="fa fa-plus"></i></b-button>--> <!-- TODO need to rewrite meal plan edit modal to use store -->
<!--<b-button class=""><i class="fa fa-plus"></i></b-button>-->
<!-- TODO need to rewrite meal plan edit modal to use store -->
</div>
</div>
@ -850,10 +853,15 @@
<b-list-group-item v-for="plan in day.plan_entries" v-bind:key="plan.id">
<div class="d-flex flex-row align-items-center">
<div>
<b-img style="height: 50px; width: 50px; object-fit: cover" :src="plan.recipe.image" rounded="circle"></b-img>
<b-img style="height: 50px; width: 50px; object-fit: cover"
:src="plan.recipe.image" rounded="circle"></b-img>
</div>
<div class="flex-grow-1 ml-2" style="text-overflow: ellipsis; overflow-wrap: anywhere;">
<span class="two-row-text"><a :href="resolveDjangoUrl('view_recipe', plan.recipe.id)">{{ plan.recipe.name }}</a></span>
<div class="flex-grow-1 ml-2"
style="text-overflow: ellipsis; overflow-wrap: anywhere;">
<span class="two-row-text"><a
:href="resolveDjangoUrl('view_recipe', plan.recipe.id)">{{
plan.recipe.name
}}</a></span>
</div>
</div>
</b-list-group-item>
@ -873,7 +881,8 @@
<div v-if="recipes.length > 0" class="mt-4">
<div class="row">
<div class="col col-md-12">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 0.5rem;row-gap: 1rem; grid-auto-rows: max-content; ">
<div
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 0.5rem;row-gap: 1rem; grid-auto-rows: max-content; ">
<!-- TODO remove once new meal plan view has proven to be good -->
<!-- <template v-if="!searchFiltered()">-->
@ -899,7 +908,8 @@
<div class="row" style="margin-top: 2vh" v-if="!random_search">
<div class="col col-md-12">
<b-pagination v-model="search.pagination_page" :total-rows="pagination_count" first-number last-number size="lg"
<b-pagination v-model="search.pagination_page" :total-rows="pagination_count" first-number
last-number size="lg"
:per-page="ui.page_size" @change="pageChange" align="center"></b-pagination>
</div>
</div>
@ -1069,11 +1079,16 @@ export default {
computed: {
meal_plan_grid: function () {
let grid = []
for (const x of Array(this.ui.meal_plan_days).keys()) {
let moment_date = moment().add(x, "d")
grid.push({date: moment_date, date_label: moment_date.format('DD.MM'), plan_entries: this.meal_plan_store.plans.filter((m) => moment(m.date).isSame(moment_date, 'day'))})
if (this.meal_plan_store !== null && this.meal_plan_store.plan_list.length > 0) {
for (const x of Array(this.ui.meal_plan_days).keys()) {
let moment_date = moment().add(x, "d")
grid.push({
date: moment_date,
date_label: moment_date.format('DD.MM'),
plan_entries: this.meal_plan_store.plan_list.filter((m) => moment(m.date).isSame(moment_date, 'day'))
})
}
}
return grid
},
locale: function () {

37
vue/src/stores/MealPlanStore.js
View File

@ -1,40 +1,47 @@
import {defineStore} from 'pinia'
import {ApiApiFactory} from "@/utils/openapi/api";
import moment from "moment/moment";
const _STORE_ID = 'meal_plan_store'
import Vue from "vue"
/*
* test store to play around with pinia and see if it can work for my usecases
* dont trust that all mealplans are in store as there is no cache validation logic, its just a shared data holder
* */
export const useMealPlanStore = defineStore(_STORE_ID, {
state: () => ({
plans: [] //TODO convert to dict and add translation functions for easy editing
plans: {},
currently_updating: null,
}),
getters: {
plan_list() {
plan_list: function () {
let plan_list = []
for (let key in this.plans) {
plan_list.push(this.plans[key]);
}
return plan_list
}
},
actions: {
refreshFromAPI(from_date, to_date) {
let options = {
query: {
from_date: from_date,
to_date: to_date,
},
if (this.currently_updating !== [from_date, to_date]) {
this.currently_updating = [from_date, to_date] // certainly no perfect check but better than nothing
let options = {
query: {
from_date: from_date,
to_date: to_date,
},
}
let apiClient = new ApiApiFactory()
apiClient.listMealPlans(options).then(r => {
r.data.forEach((p) => {
Vue.set(this.plans, p.id, p)
})
this.currently_updating = null
})
}
let apiClient = new ApiApiFactory()
apiClient.listMealPlans(options).then(r => {
this.plans = r.data
})
},
},
})