show recipe and allow delete in ingredient editor

cookbook/serializer.py

@@ -496,8 +496,12 @@ class FoodSerializer(UniqueFieldsMixin, WritableNestedModelSerializer, ExtendedR
 class IngredientSimpleSerializer(WritableNestedModelSerializer):
     food = FoodSimpleSerializer(allow_null=True)
     unit = UnitSerializer(allow_null=True)
+    used_in_recipes = serializers.SerializerMethodField('get_used_in_recipes')
     amount = CustomDecimalField()
 
+    def get_used_in_recipes(self, obj):
+        return list(Recipe.objects.filter(steps__ingredients=obj.id).values('id', 'name'))
+
     def create(self, validated_data):
         validated_data['space'] = self.context['request'].space
         return super().create(validated_data)
@@ -510,7 +514,7 @@ class IngredientSimpleSerializer(WritableNestedModelSerializer):
         model = Ingredient
         fields = (
             'id', 'food', 'unit', 'amount', 'note', 'order',
-            'is_header', 'no_amount', 'original_text'
+            'is_header', 'no_amount', 'original_text', 'used_in_recipes',
         )
 
 

vue/src/apps/IngredientEditorView/IngredientEditorView.vue

@@ -60,7 +60,14 @@
                         </td>
                     </tr>
                     <template v-if="!loading">
-                        <tr v-for="i in ingredients" v-bind:key="i.id">
+                        <tbody v-for="i in ingredients" v-bind:key="i.id">
+                        <tr v-if="i.used_in_recipes.length > 0">
+                            <td colspan="5">
+                                <a v-for="r in i.used_in_recipes" :href="resolveDjangoUrl('view_recipe',r.id)"
+                                   v-bind:key="r.id" target="_blank" rel="noreferrer nofollow">{{ r.name }}</a>
+                            </td>
+                        </tr>
+                        <tr>
                             <td style="width: 5vw">
                                 <input type="number" class="form-control" v-model="i.amount"
                                        @input="$set(i, 'changed', true)">
@@ -93,9 +100,16 @@
                                           @click="updateIngredient(i)">
                                     <i class="fas fa-save"></i>
                                 </b-button>
+                                 <b-button variant="danger"
+                                          @click="deleteIngredient(i)">
+                                    <i class="fas fa-trash"></i>
+                                </b-button>
                             </td>
 
                         </tr>
+                        </tbody>
+
+
                     </template>
 
                 </table>
@@ -111,7 +125,7 @@ import Vue from "vue"
 import {BootstrapVue} from "bootstrap-vue"
 
 import "bootstrap-vue/dist/bootstrap-vue.css"
-import {ApiMixin, StandardToasts} from "@/utils/utils"
+import {ApiMixin, ResolveUrlMixin, StandardToasts} from "@/utils/utils"
 import {ApiApiFactory} from "@/utils/openapi/api";
 import GenericMultiselect from "@/components/GenericMultiselect";
 import GenericModalForm from "@/components/Modals/GenericModalForm";
@@ -122,7 +136,7 @@ Vue.use(BootstrapVue)
 
 export default {
     name: "IngredientEditorView",
-    mixins: [ApiMixin],
+    mixins: [ApiMixin, ResolveUrlMixin],
     components: {BetaWarning, LoadingSpinner, GenericMultiselect, GenericModalForm},
     data() {
         return {
@@ -199,6 +213,18 @@ export default {
                 })
             })
         },
+        deleteIngredient: function (i){
+            if (confirm(this.$t('delete_confirmation', this.$t('Ingredient')))){
+                let apiClient = new ApiApiFactory()
+                apiClient.destroyIngredient(i.id).then(r => {
+                    StandardToasts.makeStandardToast(StandardToasts.SUCCESS_DELETE)
+                    this.ingredients = this.ingredients.filter(li => li.id !== i.id)
+                }).catch(e => {
+                    StandardToasts.makeStandardToast(StandardToasts.FAIL_DELETE)
+                })
+            }
+        }
+
     },
 }
 </script>

vue/src/utils/openapi/api.ts

@@ -752,6 +752,12 @@ export interface Ingredient {
      * @memberof Ingredient
      */
     original_text?: string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof Ingredient
+     */
+    used_in_recipes?: string;
 }
 /**
  * 
@@ -1917,6 +1923,12 @@ export interface RecipeIngredients {
      * @memberof RecipeIngredients
      */
     original_text?: string | null;
+    /**
+     * 
+     * @type {string}
+     * @memberof RecipeIngredients
+     */
+    used_in_recipes?: string;
 }
 /**
  *