allow users to choose between food and recipe properties

vue/src/apps/RecipeView/RecipeView.vue

@@ -137,7 +137,7 @@
 
             <div class="row" style="margin-top: 2vh; ">
                 <div class="col-lg-6 offset-lg-3 col-12">
-                    <food-property-view-component :recipe="recipe" :servings="servings" @foodUpdated="loadRecipe(recipe.id)"></food-property-view-component>
+                    <property-view-component :recipe="recipe" :servings="servings" @foodUpdated="loadRecipe(recipe.id)"></property-view-component>
                 </div>
             </div>
         </div>
@@ -184,7 +184,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";
+import PropertyViewComponent from "@/components/PropertyViewComponent.vue";
 
 Vue.prototype.moment = moment
 
@@ -209,7 +209,7 @@ export default {
         RecipeSwitcher,
         CustomInputSpinButton,
         BottomNavigationBar,
-        FoodPropertyViewComponent,
+        PropertyViewComponent,
     },
     computed: {
         ingredient_factor: function () {

vue/src/components/PropertyViewComponent.vue

@@ -15,21 +15,32 @@
                         <i class="fas fa-toggle-on" v-if="!show_total"></i>
                         <i class="fas fa-toggle-off" v-if="show_total"></i>
                     </a>
+
+                    <div v-if="hasRecipeProperties && hasFoodProperties">
+                        <span v-if="!show_recipe_properties">{{ $t('Food') }} </span>
+                        <span v-if="show_recipe_properties">{{ $t('Recipe') }} </span>
+
+                        <a href="#" @click="show_recipe_properties = !show_recipe_properties">
+                        <i class="fas fa-toggle-on" v-if="!show_recipe_properties"></i>
+                        <i class="fas fa-toggle-off" v-if="show_recipe_properties"></i>
+                    </a>
+                    </div>
+
                 </b-col>
             </b-row>
 
 
             <table class="table table-bordered table-sm">
 
-                <tr v-for="p in recipe.food_properties" v-bind:key="`id_${p.id}`">
+                <tr v-for="p in property_list" v-bind:key="`id_${p.id}`">
                     <td>
 
                         {{ p.icon }} {{ p.name }}
                     </td>
-                    <td class="text-right">{{ get_amount(p.total_value) }}</td>
+                    <td class="text-right">{{ get_amount(p.property_amount) }}</td>
                     <td class=""> {{ p.unit }}</td>
 
-                    <td class="align-middle text-center">
+                    <td class="align-middle text-center" v-if="!show_recipe_properties">
                         <a href="#" @click="selected_property = p">
                             <i v-if="p.missing_value" class="text-warning fas fa-exclamation-triangle"></i>
                             <i v-if="!p.missing_value" class="text-muted fas fa-info-circle"></i>
@@ -74,7 +85,7 @@ import GenericModalForm from "@/components/Modals/GenericModalForm.vue";
 import {ApiApiFactory} from "@/utils/openapi/api";
 
 export default {
-    name: "FoodPropertyViewComponent",
+    name: "PropertyViewComponent",
     mixins: [ApiMixin],
     components: {GenericModalForm},
     props: {
@@ -87,15 +98,65 @@ export default {
             selected_food: undefined,
             show_food_edit_modal: false,
             show_total: false,
+            show_recipe_properties: false,
         }
     },
     computed: {
         show_modal: function () {
             return this.selected_property !== undefined
         },
+        hasRecipeProperties: function () {
+            return this.recipe.properties.length !== 0
+        },
+        hasFoodProperties: function () {
+            let has_food_properties = false
+            for (const [key, fp] of Object.entries(this.recipe.food_properties)) {
+                if (fp.total_value !== 0) {
+                    has_food_properties = true
+                }
+            }
+            return has_food_properties
+        },
+        property_list: function () {
+            let pt_list = []
+            if (this.show_recipe_properties) {
+                this.recipe.properties.forEach(rp => {
+                    pt_list.push(
+                        {
+                            'id': rp.property_type.id,
+                            'name': rp.property_type.name,
+                            'description': rp.property_type.description,
+                            'icon': rp.property_type.icon,
+                            'food_values': [],
+                            'property_amount': rp.property_amount,
+                            'missing_value': false,
+                            'unit': rp.property_type.unit,
+                        }
+                    )
+                })
+            } else {
+                for (const [key, fp] of Object.entries(this.recipe.food_properties)) {
+                    pt_list.push(
+                        {
+                            'id': fp.id,
+                            'name': fp.name,
+                            'description': fp.description,
+                            'icon': fp.icon,
+                            'food_values': fp.food_values,
+                            'property_amount': fp.total_value,
+                            'missing_value': fp.missing_value,
+                            'unit': fp.unit,
+                        }
+                    )
+                }
+            }
+            return pt_list
+        }
     },
     mounted() {
-
+        if (this.hasRecipeProperties && !this.hasFoodProperties) {
+            this.show_recipe_properties = true
+        }
     },
     methods: {
         get_amount: function (amount) {