basic food property viewer in recipe view

vue/src/apps/RecipeView/RecipeView.vue

@@ -137,8 +137,9 @@
 
             <div class="row" style="margin-top: 2vh; ">
                 <div class="col-lg-6 offset-lg-3 col-12">
-                    <Nutrition-component :recipe="recipe" id="nutrition_container"
-                                         :ingredient_factor="ingredient_factor"></Nutrition-component>
+<!--                    <Nutrition-component :recipe="recipe" id="nutrition_container"-->
+<!--                                         :ingredient_factor="ingredient_factor"></Nutrition-component>-->
+                    <food-property-view-component :recipe="recipe"></food-property-view-component>
                 </div>
             </div>
         </div>
@@ -185,6 +186,7 @@ import CustomInputSpinButton from "@/components/CustomInputSpinButton"
 import {ApiApiFactory} from "@/utils/openapi/api";
 import ImportTandoor from "@/components/Modals/ImportTandoor.vue";
 import BottomNavigationBar from "@/components/BottomNavigationBar.vue";
+import FoodPropertyViewComponent from "@/components/FoodPropertyViewComponent.vue";
 
 Vue.prototype.moment = moment
 
@@ -202,13 +204,14 @@ export default {
         IngredientsCard,
         StepComponent,
         RecipeContextMenu,
-        NutritionComponent,
+        // NutritionComponent,
         KeywordsComponent,
         LoadingSpinner,
         AddRecipeToBook,
         RecipeSwitcher,
         CustomInputSpinButton,
         BottomNavigationBar,
+        FoodPropertyViewComponent,
     },
     computed: {
         ingredient_factor: function () {

vue/src/apps/TestView/TestView.vue

@@ -6,32 +6,38 @@
         <div class="row" v-if="recipe !== undefined">
             <div class="col-6">
                 <div class="card">
-                    <table>
-                        <tbody v-for="p in recipe.food_properties" v-bind:key="`id_${p.id}`">
-                            <tr>
-                                <td><b-button v-b-toggle="`id_collapse_property_${p.id}`" size="sm"><i class="fas fa-caret-right"></i></b-button></td>
-                                <td>{{ p.icon }}</td>
-                                <td>{{ p.name }}</td>
-                                <td>{{ p.total_value }} {{ p.unit }}</td>
-                            </tr>
-                            <b-collapse :id="`id_collapse_property_${p.id}`" class="mt-2">
-                                <tr>
-                                    <td colspan="4">
-                                        {{p.description}}
-                                    </td>
-                                </tr>
-                                <tr v-for="f in p.food_values" v-bind:key="`id_${p.id}_food_${f.id}`">
-                                    <td>{{f.food}}</td>
-                                    <td>{{f.value}} {{ p.unit }}</td>
-                                </tr>
-                            </b-collapse>
-                        </tbody>
+                    <table class="table table-bordered table-sm">
+
+                        <tr v-for="p in recipe.food_properties" v-bind:key="`id_${p.id}`">
+                            <td>
+                                <button class="btn btn-danger btn-sm"
+                                        @click="selected_property = p"><i
+                                        class="fas fa-exclamation-triangle"></i>
+                                </button>
+                                {{ p.icon }} {{ p.name }}
+                            </td>
+                            <td>{{ p.total_value }} {{ p.unit }}</td>
+                        </tr>
+
 
                     </table>
                 </div>
             </div>
         </div>
 
+        <b-modal id="id_modal_property_overview" title="Property Overview" v-model="show_modal" @hidden="selected_property = undefined">
+            <template v-if="selected_property !== undefined">
+                {{ selected_property.description }}
+                <table class="table table-bordered">
+                    <tr v-for="f in selected_property.food_values" v-bind:key="`id_${selected_property.id}_food_${f.id}`">
+                        <td>{{ f.food }}</td>
+                        <td>{{ f.value }} {{ selected_property.unit }}</td>
+                    </tr>
+                </table>
+            </template>
+
+
+        </b-modal>
 
     </div>
 </template>
@@ -57,9 +63,14 @@ export default {
     data() {
         return {
             recipe: undefined,
-
+            selected_property: undefined,
         }
     },
+    computed: {
+        show_modal: function () {
+            return this.selected_property !== undefined
+        },
+    },
     mounted() {
         this.$i18n.locale = window.CUSTOM_LOCALE
         let apiClient = new ApiApiFactory()
@@ -74,4 +85,5 @@ export default {
 
 <style>
 
+
 </style>

vue/src/components/FoodPropertyViewComponent.vue

@@ -0,0 +1,73 @@
+<template>
+    <div>
+
+
+        <div class="card" v-if="recipe !== undefined">
+            <h5>Properties</h5>
+            <table class="table table-bordered table-sm">
+
+                <tr v-for="p in recipe.food_properties" v-bind:key="`id_${p.id}`">
+                    <td>
+                        <button class="btn btn-danger btn-sm"
+                                @click="selected_property = p"
+                                v-if="p.missing_value"><i
+                                class="fas fa-exclamation-triangle"></i>
+                        </button>
+                        {{ p.icon }} {{ p.name }}
+                    </td>
+                    <td>{{ p.total_value }} {{ p.unit }}</td>
+                </tr>
+
+
+            </table>
+        </div>
+
+
+        <b-modal id="id_modal_property_overview" title="Property Overview" v-model="show_modal"
+                 @hidden="selected_property = undefined">
+            <template v-if="selected_property !== undefined">
+                {{ selected_property.description }}
+                <table class="table table-bordered">
+                    <tr v-for="f in selected_property.food_values"
+                        v-bind:key="`id_${selected_property.id}_food_${f.id}`">
+                        <td>{{ f.food }}</td>
+                        <td>{{ f.value }} {{ selected_property.unit }}</td>
+                    </tr>
+                </table>
+            </template>
+
+
+        </b-modal>
+    </div>
+</template>
+
+<script>
+import {ApiMixin} from "@/utils/utils";
+
+export default {
+    name: "FoodPropertyViewComponent",
+    mixins: [ApiMixin],
+    components: {},
+    props: {
+        recipe: Object,
+    },
+    data() {
+        return {
+            selected_property: undefined,
+        }
+    },
+    computed: {
+        show_modal: function () {
+            return this.selected_property !== undefined
+        },
+    },
+    mounted() {
+
+    },
+    methods: {},
+}
+</script>
+
+<style scoped>
+
+</style>