Merge branch 'develop' into feature/importer_to_vue

# Conflicts: # vue/src/apps/RecipeEditView/RecipeEditView.vue # vue/src/utils/openapi/api.ts
2026-01-04 13:48:32 -05:00 · 2022-04-22 16:41:13 +02:00
parent 57ec6a2b3d 05383a2bc3
commit 2ddb0c719a
62 changed files with 2619 additions and 1380 deletions
--- a/vue/src/components/Buttons/RecipeSwitcher.vue
+++ b/vue/src/components/Buttons/RecipeSwitcher.vue
@@ -1,12 +1,13 @@
 <template>
    <div v-if="recipes !== {}">
        <div id="switcher" class="align-center">
-            <i class="btn btn-primary fas fa-receipt fa-xl fa-fw shadow-none btn-circle" v-b-toggle.related-recipes />
+            <i class="btn btn-primary fas fa-receipt fa-xl fa-fw shadow-none btn-circle" v-b-toggle.related-recipes/>
        </div>
-        <b-sidebar id="related-recipes" backdrop right bottom no-header shadow="sm" style="z-index: 10000" @shown="updatePinnedRecipes()">
+        <b-sidebar id="related-recipes" backdrop right bottom no-header shadow="sm" style="z-index: 10000"
+                   @shown="updatePinnedRecipes()">
            <template #default="{ hide }">
                <div class="d-flex flex-column justify-content-end h-100 p-3 align-items-end">
-                    <h5>{{$t("Planned")}} <i class="fas fa-calendar fa-fw"></i></h5>
+                    <h5>{{ $t("Planned") }} <i class="fas fa-calendar fa-fw"></i></h5>

                    <div class="text-right">
                        <template v-if="planned_recipes.length > 0">
@@ -18,24 +19,25 @@
                                            hide()
                                        "
                                        href="javascript:void(0);"
-                                        >{{ r.name }}</a
+                                    >{{ r.name }}</a
                                    >
                                </div>
                            </div>
                        </template>
                        <template v-else>
-                            <span class="text-muted">{{$t("nothing_planned_today")}}</span>
+                            <span class="text-muted">{{ $t("nothing_planned_today") }}</span>
                        </template>
                    </div>

-                    <h5>{{$t("Pinned")}} <i class="fas fa-thumbtack fa-fw"></i></h5>
+                    <h5>{{ $t("Pinned") }} <i class="fas fa-thumbtack fa-fw"></i></h5>

                    <template v-if="pinned_recipes.length > 0">
                        <div class="text-right">
                            <div v-for="r in pinned_recipes" :key="`pin${r.id}`">
                                <b-row class="pb-1 pt-1">
                                    <b-col cols="2">
-                                        <a href="javascript:void(0)" @click="unPinRecipe(r)" class="text-muted"><i class="fas fa-times"></i></a>
+                                        <a href="javascript:void(0)" @click="unPinRecipe(r)" class="text-muted"><i
+                                            class="fas fa-times"></i></a>
                                    </b-col>
                                    <b-col cols="10">
                                        <a
@@ -45,7 +47,7 @@
                                            "
                                            href="javascript:void(0);"
                                            class="align-self-end"
-                                            >{{ r.name }}
+                                        >{{ r.name }}
                                        </a>
                                    </b-col>
                                </b-row>
@@ -53,7 +55,7 @@
                        </div>
                    </template>
                    <template v-else>
-                        <span class="text-muted">{{$t("no_pinned_recipes")}}</span>
+                        <span class="text-muted">{{ $t("no_pinned_recipes") }}</span>
                    </template>

                    <template v-if="related_recipes.length > 0">
@@ -67,7 +69,7 @@
                                            hide()
                                        "
                                        href="javascript:void(0);"
-                                        >{{ r.name }}</a
+                                    >{{ r.name }}</a
                                    >
                                </div>
                            </div>
@@ -77,8 +79,8 @@
            </template>
            <template #footer="{ hide }">
                <div class="d-flex bg-dark text-light align-items-center px-3 py-2">
-                    <strong class="mr-auto">{{$t("Quick actions")}}</strong>
-                    <b-button size="sm" @click="hide">{{$t("Close")}}</b-button>
+                    <strong class="mr-auto">{{ $t("Quick actions") }}</strong>
+                    <b-button size="sm" @click="hide">{{ $t("Close") }}</b-button>
                </div>
            </template>
        </b-sidebar>
@@ -86,14 +88,14 @@
 </template>

 <script>
-const { ApiApiFactory } = require("@/utils/openapi/api")
-import { ResolveUrlMixin } from "@/utils/utils"
+const {ApiApiFactory} = require("@/utils/openapi/api")
+import {ResolveUrlMixin} from "@/utils/utils"

 export default {
    name: "RecipeSwitcher",
    mixins: [ResolveUrlMixin],
    props: {
-        recipe: { type: Number, default: undefined },
+        recipe: {type: Number, default: undefined},
    },
    data() {
        return {
@@ -158,7 +160,12 @@ export default {
            // get related recipes and save them for later
            if (this.$parent.recipe) {
                this.related_recipes = [this.$parent.recipe]
-                return apiClient.relatedRecipe(this.$parent.recipe.id, { query: { levels: 2, format: "json" } }).then((result) => {
+                return apiClient.relatedRecipe(this.$parent.recipe.id, {
+                    query: {
+                        levels: 2,
+                        format: "json"
+                    }
+                }).then((result) => {
                    this.related_recipes = this.related_recipes.concat(result.data)
                })
            }
@@ -172,16 +179,16 @@ export default {
            // TODO move to utility function moment is in maintenance mode https://momentjs.com/docs/
            var tzoffset = new Date().getTimezoneOffset() * 60000 //offset in milliseconds
            let today = new Date(Date.now() - tzoffset).toISOString().split("T")[0]
-            return apiClient.listMealPlans({ query: { from_date: today, to_date: today } }).then((result) => {
+            return apiClient.listMealPlans({query: {from_date: today, to_date: today}}).then((result) => {
                let promises = []
                result.data.forEach((mealplan) => {
-                    this.planned_recipes.push({ ...mealplan?.recipe, servings: mealplan?.servings })
+                    this.planned_recipes.push({...mealplan?.recipe, servings: mealplan?.servings})
                    const serving_factor = (mealplan?.servings ?? mealplan?.recipe?.servings ?? 1) / (mealplan?.recipe?.servings ?? 1)
                    promises.push(
-                        apiClient.relatedRecipe(mealplan?.recipe?.id, { query: { levels: 2 } }).then((r) => {
+                        apiClient.relatedRecipe(mealplan?.recipe?.id, {query: {levels: 2}}).then((r) => {
                            // scale all recipes to mealplan servings
                            r.data = r.data.map((x) => {
-                                return { ...x, factor: serving_factor }
+                                return {...x, factor: serving_factor}
                            })
                            this.planned_recipes = [...this.planned_recipes, ...r.data]
                        })
@@ -213,20 +220,28 @@ export default {
    z-index: 9000;
 }

-@media screen and (max-width: 600px) {
+
+@media (max-width: 991.98px) {
    #switcher .btn-circle {
        position: fixed;
-        top: 9px;
-        left: 80px;
-        color: white;
+        top: 12px;
+        right: 79px;
+        color: rgba(46, 46, 46, 0.5);
+        width: 56px;
+        height: 40px;
+        font-size: 1.25rem;
+        line-height: 1;
+        background-color: transparent;
+        border: 1px solid rgba(46, 46, 46, 0.5);
+        border-radius: 0.1875rem;
    }
 }

-@media screen and (max-width: 2000px) {
+@media (min-width: 992px) {
    #switcher .btn-circle {
        position: fixed;
-        bottom: 10px;
-        right: 50px;
+        bottom: 40px;
+        right: 40px;
    }
 }
 </style>
--- a/vue/src/components/ContextMenu/GenericContextMenu.vue
+++ b/vue/src/components/ContextMenu/GenericContextMenu.vue
@@ -6,7 +6,10 @@
            </template>
            <b-dropdown-item v-on:click="$emit('item-action', 'edit')" v-if="show_edit"> <i class="fas fa-pencil-alt fa-fw"></i> {{ $t("Edit") }} </b-dropdown-item>

+
            <b-dropdown-item v-on:click="$emit('item-action', 'delete')" v-if="show_delete"> <i class="fas fa-trash-alt fa-fw"></i> {{ $t("Delete") }} </b-dropdown-item>
+            <b-dropdown-item v-on:click="$emit('item-action', 'ingredient-editor')" v-if="show_ingredient_editor"> <i class="fas fa-th-list fa-dw"></i> {{ $t("Ingredient Editor") }} </b-dropdown-item>
+
            <b-dropdown-item v-on:click="$emit('item-action', 'add-shopping')" v-if="show_shopping">
                <i class="fas fa-cart-plus fa-fw"></i> {{ $t("Add_to_Shopping") }}
            </b-dropdown-item>
@@ -24,8 +27,11 @@
 </template>

 <script>
+import {ResolveUrlMixin} from "@/utils/utils";
+
 export default {
    name: "GenericContextMenu",
+    mixins: [ResolveUrlMixin],
    props: {
        show_edit: { type: Boolean, default: true },
        show_delete: { type: Boolean, default: true },
@@ -33,6 +39,7 @@ export default {
        show_merge: { type: Boolean, default: false },
        show_shopping: { type: Boolean, default: false },
        show_onhand: { type: Boolean, default: false },
+        show_ingredient_editor: { type: Boolean, default: false },
    },
 }
 </script>
--- a/vue/src/components/GenericHorizontalCard.vue
+++ b/vue/src/components/GenericHorizontalCard.vue
@@ -61,6 +61,7 @@
                        :show_move="useMove"
                        :show_shopping="useShopping"
                        :show_onhand="useOnhand"
+                        :show_ingredient_editor="useIngredientEditor"
                        @item-action="$emit('item-action', { action: $event, source: item })"
                    >
                    </generic-context-menu>
@@ -132,11 +133,12 @@ import GenericOrderedPill from "@/components/GenericOrderedPill"
 import RecipeCard from "@/components/RecipeCard"
 import { mixin as clickaway } from "vue-clickaway"
 import { createPopper } from "@popperjs/core"
+import {ApiMixin} from "@/utils/utils";

 export default {
    name: "GenericHorizontalCard",
    components: { GenericContextMenu, RecipeCard, Badges, GenericPill, GenericOrderedPill },
-    mixins: [clickaway],
+    mixins: [clickaway, ApiMixin],
    props: {
        item: { type: Object },
        model: { type: Object },
@@ -186,6 +188,9 @@ export default {
        useDrag: function () {
            return this.useMove || this.useMerge
        },
+        useIngredientEditor: function (){
+            return (this.model === this.Models.FOOD || this.model === this.Models.UNIT)
+        },
        itemTags: function () {
            return this.model?.tags ?? []
        },
--- a/vue/src/components/GenericMultiselect.vue
+++ b/vue/src/components/GenericMultiselect.vue
@@ -19,6 +19,7 @@
        @search-change="search"
        @input="selectionChanged"
        @tag="addNew"
+        @open="selectOpened()"
    >
    </multiselect>
 </template>
@@ -26,11 +27,11 @@
 <script>
 import Vue from "vue"
 import Multiselect from "vue-multiselect"
-import { ApiMixin } from "@/utils/utils"
+import {ApiMixin, StandardToasts} from "@/utils/utils"

 export default {
    name: "GenericMultiselect",
-    components: { Multiselect },
+    components: {Multiselect},
    mixins: [ApiMixin],
    data() {
        return {
@@ -42,16 +43,16 @@ export default {
        }
    },
    props: {
-        placeholder: { type: String, default: undefined },
+        placeholder: {type: String, default: undefined},
        model: {
            type: Object,
            default() {
                return {}
            },
        },
-        label: { type: String, default: "name" },
-        parent_variable: { type: String, default: undefined },
-        limit: { type: Number, default: 25 },
+        label: {type: String, default: "name"},
+        parent_variable: {type: String, default: undefined},
+        limit: {type: Number, default: 25},
        sticky_options: {
            type: Array,
            default() {
@@ -68,10 +69,11 @@ export default {
            type: Object,
            default: undefined,
        },
-        multiple: { type: Boolean, default: true },
-        allow_create: { type: Boolean, default: false },
-        create_placeholder: { type: String, default: "You Forgot to Add a Tag Placeholder" },
-        clear: { type: Number },
+        search_on_load: {type: Boolean, default: true},
+        multiple: {type: Boolean, default: true},
+        allow_create: {type: Boolean, default: false},
+        create_placeholder: {type: String, default: "You Forgot to Add a Tag Placeholder"},
+        clear: {type: Number},
    },
    watch: {
        initial_selection: function (newVal, oldVal) {
@@ -82,12 +84,12 @@ export default {
            empty[this.label] = `..${this.$t("loading")}..`
            this.selected_objects.forEach((x) => {
                if (typeof x !== "object") {
-                    this.selected_objects[this.selected_objects.indexOf(x)] = { ...empty, id: x }
+                    this.selected_objects[this.selected_objects.indexOf(x)] = {...empty, id: x}
                    get_details.push(x)
                }
            })
            get_details.forEach((x) => {
-                this.genericAPI(this.model, this.Actions.FETCH, { id: x })
+                this.genericAPI(this.model, this.Actions.FETCH, {id: x})
                    .then((result) => {
                        // this.selected_objects[this.selected_objects.map((y) => y.id).indexOf(x)] = result.data
                        Vue.set(this.selected_objects, this.selected_objects.map((y) => y.id).indexOf(x), result.data)
@@ -103,8 +105,8 @@ export default {
            if (typeof this.selected_objects !== "object") {
                let empty = {}
                empty[this.label] = `..${this.$t("loading")}..`
-                this.selected_objects = { ...empty, id: this.selected_objects }
-                this.genericAPI(this.model, this.Actions.FETCH, { id: this.selected_objects })
+                this.selected_objects = {...empty, id: this.selected_objects}
+                this.genericAPI(this.model, this.Actions.FETCH, {id: this.selected_objects})
                    .then((result) => {
                        this.selected_objects = result.data
                    })
@@ -123,7 +125,9 @@ export default {
    },
    mounted() {
        this.id = Math.random()
-        this.search("")
+        if (this.search_on_load) {
+            this.search("")
+        }
        if (this.multiple || !this.initial_single_selection) {
            this.selected_objects = this.initial_selection
        } else {
@@ -170,15 +174,30 @@ export default {
                }
            })
        },
+        selectOpened: function () {
+            if (this.objects.length < 1) {
+                this.search("")
+            }
+        },
        selectionChanged: function () {
-            this.$emit("change", { var: this.parent_variable, val: this.selected_objects })
+            this.$emit("change", {var: this.parent_variable, val: this.selected_objects})
        },
        addNew(e) {
-            this.$emit("new", e)
-            // could refactor as Promise - seems unnecessary
-            setTimeout(() => {
-                this.search("")
-            }, 750)
+            //TODO add ability to choose field name other than "name"
+            console.log('CREATEING NEW with -> ' , e)
+            this.genericAPI(this.model, this.Actions.CREATE, {name: e}).then(result => {
+                let createdObj = result.data?.results ?? result.data
+                StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
+                if (this.multiple) {
+                    this.selected_objects.push(createdObj)
+                } else {
+                    this.selected_objects = createdObj
+                }
+                this.objects.push(createdObj)
+                this.selectionChanged()
+            }).catch((r, err) => {
+                StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
+            })
        },
    },
 }
--- a/vue/src/components/MealPlanEditModal.vue
+++ b/vue/src/components/MealPlanEditModal.vue
@@ -48,7 +48,6 @@
                                        :initial_single_selection="entryEditing.meal_type"
                                        :allow_create="true"
                                        :create_placeholder="$t('Create_New_Meal_Type')"
-                                        @new="createMealType"
                                    ></generic-multiselect>
                                    <span class="text-danger" v-if="missing_meal_type">{{ $t("Meal_Type_Required") }}</span>
                                    <small tabindex="-1" class="form-text text-muted" v-if="!missing_meal_type">{{ $t("Meal_Type") }}</small>
@@ -228,20 +227,6 @@ export default {
                this.entryEditing.meal_type = null
            }
        },
-        createMealType(event) {
-            if (event != "") {
-                let apiClient = new ApiApiFactory()
-
-                apiClient
-                    .createMealType({ name: event })
-                    .then((e) => {
-                        this.$emit("reload-meal-types")
-                    })
-                    .catch((error) => {
-                        StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
-                    })
-            }
-        },
        selectRecipe(event) {
            this.missing_recipe = false
            if (event.val != null) {
--- a/vue/src/components/Modals/GenericModalForm.vue
+++ b/vue/src/components/Modals/GenericModalForm.vue
@@ -176,8 +176,11 @@ export default {
                    StandardToasts.makeStandardToast(StandardToasts.SUCCESS_DELETE)
                })
                .catch((err) => {
-                    console.log(err)
-                    StandardToasts.makeStandardToast(StandardToasts.FAIL_DELETE)
+                    if (err.response.status === 403){
+                        StandardToasts.makeStandardToast(StandardToasts.FAIL_DELETE_PROTECTED)
+                    }else {
+                        StandardToasts.makeStandardToast(StandardToasts.FAIL_DELETE)
+                    }
                    this.$emit("finish-action", "cancel")
                })
        },
--- a/vue/src/components/Modals/LookupInput.vue
+++ b/vue/src/components/Modals/LookupInput.vue
@@ -18,7 +18,6 @@
                :label="list_label"
                style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
                :placeholder="modelName"
-                @new="addNew"
            >
            </generic-multiselect>
            <em v-if="help" class="small text-muted">{{ help }}</em>
@@ -119,19 +118,6 @@ export default {
        },
    },
    methods: {
-        addNew: function (e) {
-            // if create a new item requires more than 1 parameter or the field 'name' is insufficient this will need reworked
-            // in a perfect world this would trigger a new modal and allow editing all fields
-            this.genericAPI(this.model, this.Actions.CREATE, { name: e })
-                .then((result) => {
-                    this.new_value = result.data
-                    StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
-                })
-                .catch((err) => {
-                    console.log(err)
-                    StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
-                })
-        },
        // ordered lookups have nested attributes that need flattened attributes to drive lookup
        flattenItems: function (itemlist) {
            let flat_items = []
--- a/vue/src/components/RecipeCard.vue
+++ b/vue/src/components/RecipeCard.vue
@@ -34,7 +34,7 @@
                    </template>
                    <p class="mt-1">
                        <last-cooked :recipe="recipe"></last-cooked>
-                        <keywords-component :recipe="recipe" style="margin-top: 4px"></keywords-component>
+                        <keywords-component :recipe="recipe" style="margin-top: 4px; position: relative; z-index: 3;"></keywords-component>
                    </p>
                    <transition name="fade" mode="in-out">
                        <div class="row mt-3" v-if="show_detail">
--- a/vue/src/components/RecipeContextMenu.vue
+++ b/vue/src/components/RecipeContextMenu.vue
@@ -206,11 +206,11 @@ export default {
            this.$bvModal.show(`shopping_${this.modal_id}`)
        },
        copyToNew: function () {
-            let recipename = window.prompt(this.$t("copy_to_new"), this.$t("recipe_name"))
+            let recipe_name = window.prompt(this.$t("copy_to_new"), this.$t("recipe_name"))

            let apiClient = new ApiApiFactory()
            apiClient.retrieveRecipe(this.recipe.id).then((results) => {
-                let recipe = { ...results.data, ...{ id: undefined, name: recipename } }
+                let recipe = { ...results.data, ...{ id: undefined, name: recipe_name } }
                recipe.steps = recipe.steps.map((step) => {
                    return {
                        ...step,
@@ -222,12 +222,14 @@ export default {
                        },
                    }
                })
-                console.log(recipe)
+                if (recipe.nutrition !== null){
+                    delete recipe.nutrition.id
+                }
                apiClient
                    .createRecipe(recipe)
-                    .then((newrecipe) => {
+                    .then((new_recipe) => {
                        StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
-                        window.open(this.resolveDjangoUrl("view_recipe", newrecipe.data.id))
+                        window.open(this.resolveDjangoUrl("view_recipe", new_recipe.data.id))
                    })
                    .catch((error) => {
                        StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)