add path to generic cards for food/keywords

cookbook/serializer.py

@@ -305,7 +305,7 @@ class KeywordSerializer(UniqueFieldsMixin, ExtendedRecipeMixin):
         model = Keyword
         fields = (
             'id', 'name', 'icon', 'label', 'description', 'image', 'parent', 'numchild', 'numrecipe', 'created_at',
-            'updated_at')
+            'updated_at', 'full_name')
         read_only_fields = ('id', 'label', 'numchild', 'parent', 'image')
 
 
@@ -403,7 +403,7 @@ class FoodSerializer(UniqueFieldsMixin, WritableNestedModelSerializer, ExtendedR
         model = Food
         fields = (
             'id', 'name', 'description', 'shopping', 'recipe', 'ignore_shopping', 'supermarket_category',
-            'image', 'parent', 'numchild', 'numrecipe', 'on_hand', 'inherit', 'ignore_inherit',
+            'image', 'parent', 'numchild', 'numrecipe', 'on_hand', 'inherit', 'ignore_inherit', 'full_name'
         )
         read_only_fields = ('id', 'numchild', 'parent', 'image', 'numrecipe')
 

vue/src/components/GenericHorizontalCard.vue

@@ -17,13 +17,14 @@
         >
             <b-row no-gutters>
                 <b-col no-gutters class="col-sm-3">
-                    <b-card-img-lazy style="object-fit: cover; height: 6em;" :src="item_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
+                    <b-card-img-lazy style="object-fit: cover; height: 6em" :src="item_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
                 </b-col>
                 <b-col no-gutters class="col-sm-9">
                     <b-card-body class="m-0 py-0">
                         <b-card-text class="h-100 my-0 d-flex flex-column" style="text-overflow: ellipsis">
                             <h5 class="m-0 mt-1 text-truncate">{{ item[title] }}</h5>
                             <div class="m-0 text-truncate">{{ item[subtitle] }}</div>
+                            <div class="m-0 text-truncate small text-muted" v-if="getFullname">{{ getFullname }}</div>
 
                             <generic-pill v-for="x in itemTags" :key="x.field" :item_list="item[x.field]" :label="x.label" :color="x.color" />
                             <generic-ordered-pill
@@ -37,21 +38,11 @@
                                 @finish-action="finishAction"
                             />
                             <div class="mt-auto mb-1" align="right">
-                                <span
-                                    v-if="item[child_count]"
-                                    class="mx-2 btn btn-link btn-sm"
-                                    style="z-index: 800;"
-                                    v-on:click="$emit('item-action', { action: 'get-children', source: item })"
-                                >
+                                <span v-if="item[child_count]" class="mx-2 btn btn-link btn-sm" style="z-index: 800" v-on:click="$emit('item-action', { action: 'get-children', source: item })">
                                     <div v-if="!item.show_children">{{ item[child_count] }} {{ itemName }}</div>
                                     <div v-else>{{ text.hide_children }}</div>
                                 </span>
-                                <span
-                                    v-if="item[recipe_count]"
-                                    class="mx-2 btn btn-link btn-sm"
-                                    style="z-index: 800;"
-                                    v-on:click="$emit('item-action', { action: 'get-recipes', source: item })"
-                                >
+                                <span v-if="item[recipe_count]" class="mx-2 btn btn-link btn-sm" style="z-index: 800" v-on:click="$emit('item-action', { action: 'get-recipes', source: item })">
                                     <div v-if="!item.show_recipes">{{ item[recipe_count] }} {{ $t("Recipes") }}</div>
                                     <div v-else>{{ $t("Hide_Recipes") }}</div>
                                 </span>
@@ -77,14 +68,13 @@
         <!-- recursively add child cards -->
         <div class="row" v-if="item.show_children">
             <div class="col-md-10 offset-md-2">
-                <generic-horizontal-card v-for="child in item[children]" v-bind:key="child.id" :item="child" :model="model" @item-action="$emit('item-action', $event)">
-                </generic-horizontal-card>
+                <generic-horizontal-card v-for="child in item[children]" v-bind:key="child.id" :item="child" :model="model" @item-action="$emit('item-action', $event)"> </generic-horizontal-card>
             </div>
         </div>
         <!-- conditionally view recipes -->
         <div class="row" v-if="item.show_recipes">
             <div class="col-md-10 offset-md-2">
-                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 1rem;">
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 1rem">
                     <recipe-card v-for="r in item[recipes]" v-bind:key="r.id" :recipe="r"> </recipe-card>
                 </div>
             </div>
@@ -200,6 +190,12 @@ export default {
         itemOrderedTags: function () {
             return this.model?.ordered_tags ?? []
         },
+        getFullname: function () {
+            if (!this.item?.full_name.includes(">")) {
+                return undefined
+            }
+            return this.item?.full_name
+        },
     },
     methods: {
         handleDragStart: function (e) {

vue/src/components/Modals/GenericModalForm.vue

@@ -14,6 +14,7 @@
                 <choice-input v-if="f.type == 'choice'" :label="f.label" :value="f.value" :field="f.field" :options="f.options" :placeholder="f.placeholder" />
                 <emoji-input v-if="f.type == 'emoji'" :label="f.label" :value="f.value" :field="f.field" @change="storeValue" />
                 <file-input v-if="f.type == 'file'" :label="f.label" :value="f.value" :field="f.field" @change="storeValue" />
+                <small-text v-if="f.type == 'smalltext'" :value="f.value" />
             </div>
 
             <template v-slot:modal-footer>
@@ -39,10 +40,11 @@ import TextInput from "@/components/Modals/TextInput"
 import EmojiInput from "@/components/Modals/EmojiInput"
 import ChoiceInput from "@/components/Modals/ChoiceInput"
 import FileInput from "@/components/Modals/FileInput"
+import SmallText from "@/components/Modals/SmallText"
 
 export default {
     name: "GenericModalForm",
-    components: { FileInput, CheckboxInput, LookupInput, TextInput, EmojiInput, ChoiceInput },
+    components: { FileInput, CheckboxInput, LookupInput, TextInput, EmojiInput, ChoiceInput, SmallText },
     mixins: [ApiMixin, ToastMixin],
     props: {
         model: { required: true, type: Object },

vue/src/components/Modals/SmallText.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="small text-muted">
+        {{ value }}
+    </div>
+</template>
+
+<script>
+export default {
+    name: "TextInput",
+    props: {
+        value: { type: String, default: "" },
+    },
+    data() {
+        return {}
+    },
+    mounted() {},
+    watch: {},
+    methods: {},
+}
+</script>

vue/src/utils/models.js

@@ -134,6 +134,11 @@ export class Models {
                     list: "FOOD_INHERIT_FIELDS",
                     label: i18n.t("IgnoreInherit"),
                 },
+                full_name: {
+                    form_field: true,
+                    type: "smalltext",
+                    field: "full_name",
+                },
                 form_function: "FoodCreateDefault",
             },
         },
@@ -180,6 +185,11 @@ export class Models {
                     field: "icon",
                     label: i18n.t("Icon"),
                 },
+                full_name: {
+                    form_field: true,
+                    type: "smalltext",
+                    field: "full_name",
+                },
             },
         },
     }