recipe store refactor

This commit is contained in:
hay-kot 2021-04-27 09:53:55 -08:00
commit 7a48b659f8
13 changed files with 110 additions and 32 deletions

4
.gitignore vendored
View file

@ -9,7 +9,7 @@ mealie/temp/*
mealie/temp/api.html mealie/temp/api.html
.temp/ .temp/
.secret .secret
*.zip
dev/data/backups/* dev/data/backups/*
dev/data/debug/* dev/data/debug/*
@ -193,3 +193,5 @@ frontend/dist/js/app.36f2760c.js
frontend/dist/js/app.36f2760c.js.map frontend/dist/js/app.36f2760c.js.map
frontend/dist/js/chunk-vendors.c93761e4.js frontend/dist/js/chunk-vendors.c93761e4.js
frontend/dist/js/chunk-vendors.c93761e4.js.map frontend/dist/js/chunk-vendors.c93761e4.js.map
dev/data/backups/dev_sample_data_2021-Apr-25.zip
dev/data/backups/dev_sample_data_2021-Feb-13.zip

View file

@ -67,13 +67,13 @@ export const recipeAPI = {
async update(data) { async update(data) {
let response = await apiReq.put(recipeURLs.update(data.slug), data); let response = await apiReq.put(recipeURLs.update(data.slug), data);
store.dispatch("requestRecentRecipes"); store.dispatch("patchRecipe", response.data);
return response.data; return response.data.slug; // ! Temporary until I rewrite to refresh page without additional request
}, },
async patch(data) { async patch(data) {
let response = await apiReq.patch(recipeURLs.update(data.slug), data); let response = await apiReq.patch(recipeURLs.update(data.slug), data);
store.dispatch("requestRecentRecipes"); store.dispatch("patchRecipe", response.data);
return response.data; return response.data;
}, },

View file

@ -3,7 +3,8 @@
<v-card-title class=" headline"> <v-card-title class=" headline">
{{ $t("meal-plan.create-a-new-meal-plan") }} {{ $t("meal-plan.create-a-new-meal-plan") }}
<v-btn color="info" class="ml-auto" @click="setQuickWeek()"> <v-btn color="info" class="ml-auto" @click="setQuickWeek()">
<v-icon left>mdi-calendar-minus</v-icon> {{$t('meal-plan.quick-week')}} <v-icon left>mdi-calendar-minus</v-icon>
{{ $t("meal-plan.quick-week") }}
</v-btn> </v-btn>
</v-card-title> </v-card-title>
@ -153,7 +154,7 @@ export default {
return recipes.length > 0 ? recipes : this.items; return recipes.length > 0 ? recipes : this.items;
}, },
allRecipes() { allRecipes() {
return this.$store.getters.getRecentRecipes; return this.$store.getters.getAllRecipes;
}, },
}, },

View file

@ -132,7 +132,7 @@ export default {
}, },
computed: { computed: {
data() { data() {
return this.$store.getters.getRecentRecipes; return this.$store.getters.getAllRecipes;
}, },
autoResults() { autoResults() {
return this.fuseResults.length > 1 ? this.fuseResults : this.results; return this.fuseResults.length > 1 ? this.fuseResults : this.results;

View file

@ -94,7 +94,7 @@ export default {
}, },
computed: { computed: {
allRecipes() { allRecipes() {
return this.$store.getters.getRecentRecipes; return this.$store.getters.getAllRecipes;
}, },
// results() { // results() {
// if (this.search === null || this.search === "") { // if (this.search === null || this.search === "") {

View file

@ -38,8 +38,8 @@ export default {
return this.$store.getters.getSiteSettings; return this.$store.getters.getSiteSettings;
}, },
recentRecipes() { recentRecipes() {
let recipes = this.$store.getters.getRecentRecipes; return this.$store.getters.getRecentRecipes;
return recipes.sort((a, b) => (a.dateAdded > b.dateAdded ? -1 : 1));
}, },
}, },
async mounted() { async mounted() {

View file

@ -1,5 +1,10 @@
<template> <template>
<v-container> <v-container>
<v-progress-linear
v-if="loading"
indeterminate
color="primary"
></v-progress-linear>
<CardSection <CardSection
:sortable="true" :sortable="true"
:title="$t('page.all-recipes')" :title="$t('page.all-recipes')"
@ -18,14 +23,20 @@ export default {
CardSection, CardSection,
}, },
data() { data() {
return {}; return {
loading: false,
};
}, },
mounted() { async mounted() {
this.$store.dispatch("requestAllRecipes"); if (this.allRecipes.length < 1) {
this.loading = true;
}
await this.$store.dispatch("requestAllRecipes");
this.loading = false;
}, },
computed: { computed: {
allRecipes() { allRecipes() {
return this.$store.getters.getRecentRecipes; return this.$store.getters.getAllRecipes;
}, },
}, },
methods: { methods: {

View file

@ -119,7 +119,7 @@ export default {
}, },
computed: { computed: {
allRecipes() { allRecipes() {
return this.$store.getters.getRecentRecipes; return this.$store.getters.getAllRecipes;
}, },
filteredRecipes() { filteredRecipes() {
return this.allRecipes.filter(recipe => { return this.allRecipes.filter(recipe => {

View file

@ -5,6 +5,7 @@ import createPersistedState from "vuex-persistedstate";
import userSettings from "./modules/userSettings"; import userSettings from "./modules/userSettings";
import language from "./modules/language"; import language from "./modules/language";
import siteSettings from "./modules/siteSettings"; import siteSettings from "./modules/siteSettings";
import recipes from "./modules/recipes";
import groups from "./modules/groups"; import groups from "./modules/groups";
Vue.use(Vuex); Vue.use(Vuex);
@ -20,6 +21,7 @@ const store = new Vuex.Store({
language, language,
siteSettings, siteSettings,
groups, groups,
recipes,
}, },
state: { state: {
// All Recipe Data Store // All Recipe Data Store
@ -35,9 +37,6 @@ const store = new Vuex.Store({
}, },
mutations: { mutations: {
setRecentRecipes(state, payload) {
state.recentRecipes = payload;
},
setMealPlanCategories(state, payload) { setMealPlanCategories(state, payload) {
state.mealPlanCategories = payload; state.mealPlanCategories = payload;
}, },
@ -53,18 +52,6 @@ const store = new Vuex.Store({
}, },
actions: { actions: {
async requestRecentRecipes({ getters }) {
const payload = await api.recipes.allSummary(0, 30);
const recent = getters.getRecentRecipes;
if (recent.length >= 30) return;
this.commit("setRecentRecipes", payload);
},
async requestAllRecipes({ getters }) {
const recent = getters.getRecentRecipes;
const start = recent.length + 1;
const payload = await api.recipes.allSummary(start, 9999);
this.commit("setRecentRecipes", [...recent, ...payload]);
},
async requestCategories({ commit }) { async requestCategories({ commit }) {
const categories = await api.categories.getAll(); const categories = await api.categories.getAll();
commit("setAllCategories", categories); commit("setAllCategories", categories);
@ -80,7 +67,6 @@ const store = new Vuex.Store({
}, },
getters: { getters: {
getRecentRecipes: state => state.recentRecipes,
getMealPlanCategories: state => state.mealPlanCategories, getMealPlanCategories: state => state.mealPlanCategories,
getAllCategories: state => getAllCategories: state =>
state.allCategories.sort((a, b) => (a.slug > b.slug ? 1 : -1)), state.allCategories.sort((a, b) => (a.slug > b.slug ? 1 : -1)),

View file

@ -0,0 +1,73 @@
import { api } from "@/api";
const state = {
recentRecipes: [],
allRecipes: [],
};
const mutations = {
setRecentRecipes(state, payload) {
state.recentRecipes = payload;
},
patchRecentRecipes(state, payload) {
if (state.recentRecipes[payload.id]) {
state.recentRecipes[payload.id] = payload;
}
},
dropRecentRecipes(state, payload) {
if (state.recentRecipes[payload.id]) {
delete state.recentRecipes[payload.id];
}
},
setAllRecipes(state, payload) {
state.allRecipes = payload;
},
patchAllRecipes(state, payload) {
state.allRecipes[payload.id] = payload;
},
dropAllRecipes(state, payload) {
if (state.allRecipes[payload.id]) {
delete state.allRecipes[payload.id];
}
},
};
const actions = {
async requestRecentRecipes() {
const payload = await api.recipes.allSummary(0, 30);
payload.sort((a, b) => (a.dateAdded > b.dateAdded ? -1 : 1));
console.log(payload);
const hash = Object.fromEntries(payload.map(e => [e.id, e]));
this.commit("setRecentRecipes", hash);
},
async requestAllRecipes({ getters }) {
const all = getters.getAllRecipes;
const payload = await api.recipes.allSummary(all.length, 9999);
const hash = Object.fromEntries([...all, ...payload].map(e => [e.id, e]));
console.log(hash);
this.commit("setAllRecipes", hash);
},
patchRecipe({ commit }, payload) {
commit("patchAllRecipes", payload);
commit("patchRecentRecipes", payload);
},
dropRecipe({ commit }, payload) {
commit("dropAllRecipes", payload);
commit("dropRecentRecipes", payload);
},
};
const getters = {
getAllRecipes: state => Object.values(state.allRecipes),
getAllRecipesHash: state => state.allRecipes,
getRecentRecipes: state => Object.values(state.recentRecipes),
getRecentRecipesHash: state => state.recentRecipes,
};
export default {
state,
mutations,
actions,
getters,
};

View file

@ -86,6 +86,8 @@ class RecipeModel(SqlAlchemyBase, BaseMixins):
rating: int = None, rating: int = None,
orgURL: str = None, orgURL: str = None,
extras: dict = None, extras: dict = None,
*args,
**kwargs
) -> None: ) -> None:
self.name = name self.name = name
self.description = description self.description = description
@ -139,6 +141,8 @@ class RecipeModel(SqlAlchemyBase, BaseMixins):
rating: int = None, rating: int = None,
orgURL: str = None, orgURL: str = None,
extras: dict = None, extras: dict = None,
*args,
**kwargs
): ):
"""Updated a database entry by removing nested rows and rebuilds the row through the __init__ functions""" """Updated a database entry by removing nested rows and rebuilds the row through the __init__ functions"""

View file

@ -61,7 +61,7 @@ def update_recipe(
if recipe_slug != recipe.slug: if recipe_slug != recipe.slug:
rename_image(original_slug=recipe_slug, new_slug=recipe.slug) rename_image(original_slug=recipe_slug, new_slug=recipe.slug)
return recipe.slug return recipe
@router.patch("/{recipe_slug}") @router.patch("/{recipe_slug}")

View file

@ -35,6 +35,7 @@ class Nutrition(BaseModel):
class RecipeSummary(BaseModel): class RecipeSummary(BaseModel):
id: Optional[int]
name: str name: str
slug: Optional[str] = "" slug: Optional[str] = ""
image: Optional[Any] image: Optional[Any]