From c20e036d90e9debd06975f9186412772e268d21c Mon Sep 17 00:00:00 2001
From: smilerz <smilerz@gmail.com>
Date: Wed, 22 Dec 2021 16:18:45 -0600
Subject: [PATCH] add path to generic cards for food/keywords

---
 cookbook/serializer.py                        |  4 +-
 vue/src/components/GenericHorizontalCard.vue  | 62 +++++++++----------
 .../components/Modals/GenericModalForm.vue    |  4 +-
 vue/src/components/Modals/SmallText.vue       | 20 ++++++
 vue/src/utils/models.js                       | 10 +++
 5 files changed, 64 insertions(+), 36 deletions(-)
 create mode 100644 vue/src/components/Modals/SmallText.vue

diff --git a/cookbook/serializer.py b/cookbook/serializer.py
index 4fe1b8148..fca43c1c5 100644
--- a/cookbook/serializer.py
+++ b/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')
 
diff --git a/vue/src/components/GenericHorizontalCard.vue b/vue/src/components/GenericHorizontalCard.vue
index 6ea8e558d..4e3ecbf39 100644
--- a/vue/src/components/GenericHorizontalCard.vue
+++ b/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">
+                        <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,20 +68,19 @@
         <!-- 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>
         </div>
         <!-- this should be made a generic component, would also require mixin for functions that generate the popup and put in parent container-->
-        <b-list-group ref="tooltip" variant="light" v-show="show_menu" v-on-clickaway="closeMenu" style="z-index:9999; cursor:pointer">
+        <b-list-group ref="tooltip" variant="light" v-show="show_menu" v-on-clickaway="closeMenu" style="z-index: 9999; cursor: pointer">
             <b-list-group-item
                 v-if="useMove"
                 action
@@ -176,47 +166,53 @@ export default {
         this.text.hide_children = this.$t("Hide_" + this.itemName)
     },
     computed: {
-        itemName: function() {
+        itemName: function () {
             return this.model?.name ?? "You Forgot To Set Model Name in model.js"
         },
-        useMove: function() {
+        useMove: function () {
             return this.model?.["move"] ?? false ? true : false
         },
-        useMerge: function() {
+        useMerge: function () {
             return this.model?.["merge"] ?? false ? true : false
         },
-        useShopping: function() {
+        useShopping: function () {
             return this.model?.["shop"] ?? false ? true : false
         },
-        useOnhand: function() {
+        useOnhand: function () {
             return this.model?.["onhand"] ?? false ? true : false
         },
-        useDrag: function() {
+        useDrag: function () {
             return this.useMove || this.useMerge
         },
-        itemTags: function() {
+        itemTags: function () {
             return this.model?.tags ?? []
         },
-        itemOrderedTags: function() {
+        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) {
+        handleDragStart: function (e) {
             this.isError = false
             e.dataTransfer.setData("source", JSON.stringify(this.item))
         },
-        handleDragEnter: function(e) {
+        handleDragEnter: function (e) {
             if (!e.currentTarget.contains(e.relatedTarget) && e.relatedTarget != null) {
                 this.over = true
             }
         },
-        handleDragLeave: function(e) {
+        handleDragLeave: function (e) {
             if (!e.currentTarget.contains(e.relatedTarget)) {
                 this.over = false
             }
         },
-        handleDragDrop: function(e) {
+        handleDragDrop: function (e) {
             let source = JSON.parse(e.dataTransfer.getData("source"))
             if (source.id != this.item.id) {
                 this.source = source
@@ -247,7 +243,7 @@ export default {
                 this.isError = true
             }
         },
-        generateLocation: function(x = 0, y = 0) {
+        generateLocation: function (x = 0, y = 0) {
             return () => ({
                 width: 0,
                 height: 0,
@@ -257,10 +253,10 @@ export default {
                 left: x,
             })
         },
-        closeMenu: function() {
+        closeMenu: function () {
             this.show_menu = false
         },
-        finishAction: function(e) {
+        finishAction: function (e) {
             this.$emit("finish-action", e)
         },
     },
diff --git a/vue/src/components/Modals/GenericModalForm.vue b/vue/src/components/Modals/GenericModalForm.vue
index 26ede38bc..28d21666e 100644
--- a/vue/src/components/Modals/GenericModalForm.vue
+++ b/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 },
diff --git a/vue/src/components/Modals/SmallText.vue b/vue/src/components/Modals/SmallText.vue
new file mode 100644
index 000000000..e2026c9b7
--- /dev/null
+++ b/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>
diff --git a/vue/src/utils/models.js b/vue/src/utils/models.js
index cb63ec50c..67423d5e1 100644
--- a/vue/src/utils/models.js
+++ b/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",
+                },
             },
         },
     }