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
.temp/
.secret
*.zip
dev/data/backups/*
dev/data/debug/*
@ -193,3 +193,5 @@ frontend/dist/js/app.36f2760c.js
frontend/dist/js/app.36f2760c.js.map
frontend/dist/js/chunk-vendors.c93761e4.js
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) {
let response = await apiReq.put(recipeURLs.update(data.slug), data);
store.dispatch("requestRecentRecipes");
return response.data;
store.dispatch("patchRecipe", response.data);
return response.data.slug; // ! Temporary until I rewrite to refresh page without additional request
},
async patch(data) {
let response = await apiReq.patch(recipeURLs.update(data.slug), data);
store.dispatch("requestRecentRecipes");
store.dispatch("patchRecipe", response.data);
return response.data;
},

View file

@ -3,7 +3,8 @@
<v-card-title class=" headline">
{{ $t("meal-plan.create-a-new-meal-plan") }}
<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-card-title>
@ -153,7 +154,7 @@ export default {
return recipes.length > 0 ? recipes : this.items;
},
allRecipes() {
return this.$store.getters.getRecentRecipes;
return this.$store.getters.getAllRecipes;
},
},

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -5,6 +5,7 @@ import createPersistedState from "vuex-persistedstate";
import userSettings from "./modules/userSettings";
import language from "./modules/language";
import siteSettings from "./modules/siteSettings";
import recipes from "./modules/recipes";
import groups from "./modules/groups";
Vue.use(Vuex);
@ -20,6 +21,7 @@ const store = new Vuex.Store({
language,
siteSettings,
groups,
recipes,
},
state: {
// All Recipe Data Store
@ -35,9 +37,6 @@ const store = new Vuex.Store({
},
mutations: {
setRecentRecipes(state, payload) {
state.recentRecipes = payload;
},
setMealPlanCategories(state, payload) {
state.mealPlanCategories = payload;
},
@ -53,18 +52,6 @@ const store = new Vuex.Store({
},
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 }) {
const categories = await api.categories.getAll();
commit("setAllCategories", categories);
@ -80,7 +67,6 @@ const store = new Vuex.Store({
},
getters: {
getRecentRecipes: state => state.recentRecipes,
getMealPlanCategories: state => state.mealPlanCategories,
getAllCategories: state =>
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,
orgURL: str = None,
extras: dict = None,
*args,
**kwargs
) -> None:
self.name = name
self.description = description
@ -139,6 +141,8 @@ class RecipeModel(SqlAlchemyBase, BaseMixins):
rating: int = None,
orgURL: str = None,
extras: dict = None,
*args,
**kwargs
):
"""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:
rename_image(original_slug=recipe_slug, new_slug=recipe.slug)
return recipe.slug
return recipe
@router.patch("/{recipe_slug}")

View file

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