property editor

vue/src/apps/TestView/TestView.vue

@@ -8,30 +8,61 @@
                 <thead>
                 <tr>
                     <td>{{ $t('Name') }}</td>
-                    <td v-for="pt in property_types" v-bind:key="pt.id">{{ pt.name }}
+                    <td>FDC</td>
-                        <input class="form-control form-control-sm" type="text" v-model="pt.unit" @change="updatePropertyType(pt)">
+                    <td>{{ $t('Properties_Food_Amount') }}</td>
-                        <input class="form-control form-control-sm" v-model="pt.fdc_id" type="number" placeholder="FDC ID" @change="updatePropertyType(pt)"></td>
+                    <td>{{ $t('Properties_Food_Unit') }}</td>
+                    <td v-for="pt in properties" v-bind:key="pt.id">
+                        <b-input-group>
+                            <b-form-input v-model="pt.name" ></b-form-input> <!-- TODO handle manual input -->
+                            <b-input-group-append>
+                                <b-input-group-text>{{ pt.unit }}</b-input-group-text>
+                                <b-button variant="primary" @click="editing_property_type = pt"><i class="fas fa-pencil-alt"></i></b-button>
+                            </b-input-group-append>
+                        </b-input-group>
+                    </td>
                 </tr>
                 </thead>
                 <tbody>
                 <tr v-for="f in this.foods" v-bind:key="f.food.id">
                     <td>
-                        {{ f.food.name }} #{{ f.food.id }}
+                        {{ f.food.name }}
-                        {{ $t('Property') }} / <input class="form-control form-control-sm" type="number" v-model="f.food.properties_food_amount" @change="updateFood(f.food)">
+                    </td>
+                    <td>
+                        <b-input-group>
+                            <b-form-input v-model="f.food.fdc_id" type="number" @change="updateFood(f.food)"></b-form-input>
+                            <b-input-group-append>
+                                <b-button variant="success" @click="updateFoodFromFDC(f.food)"><i class="fas fa-sync-alt"></i></b-button>
+                            </b-input-group-append>
+                        </b-input-group>
+
+                    </td>
+                    <td>
+                        <b-input v-model="f.food.properties_food_amount" type="number" @change="updateFood(f.food)"></b-input>
+                    </td>
+                    <td>
                         <generic-multiselect
                             @change="f.food.properties_food_unit = $event.val; updateFood(f.food)"
                             :initial_selection="f.food.properties_food_unit"
                             label="name" :model="Models.UNIT"
                             :multiple="false"/>
-                        <input class="form-control form-control-sm" v-model="f.food.fdc_id" placeholder="FDC ID" @change="updateFood(f.food)">
-                        <button @click="updateFoodFromFDC(f.food)">Load FDC</button>
                     </td>
                     <td v-for="p in f.properties" v-bind:key="`${f.id}_${p.property_type.id}`">
-                        <input class="form-control form-control-sm" type="number" v-model="p.property_amount"> {{ p.property_type.unit }} ({{ p.property_type.name }})
+                        <b-input-group>
+                            <b-form-input v-model="p.property_amount" type="number"></b-form-input> <!-- TODO handle manual input -->
+                        </b-input-group>
                     </td>
                 </tr>
                 </tbody>
             </table>
+
+            <generic-modal-form
+                :show="editing_property_type !== null"
+                :model="Models.PROPERTY_TYPE"
+                :action="Actions.UPDATE"
+                :item1="editing_property_type"
+                @finish-action="editing_property_type = null; loadPropertyTypes()">
+            </generic-modal-form>
+
         </div>
     </div>
 </template>
@@ -47,6 +78,7 @@ import axios from "axios";
 import BetaWarning from "@/components/BetaWarning.vue";
 import {ApiApiFactory} from "@/utils/openapi/api";
 import GenericMultiselect from "@/components/GenericMultiselect.vue";
+import GenericModalForm from "@/components/Modals/GenericModalForm.vue";
 
 
 Vue.use(BootstrapVue)
@@ -55,10 +87,10 @@ Vue.use(BootstrapVue)
 export default {
     name: "TestView",
     mixins: [ApiMixin],
-    components: {GenericMultiselect},
+    components: {GenericModalForm, GenericMultiselect},
     computed: {
         foods: function () {
-            let foods = []
+            let foods = {}
             if (this.recipe !== null && this.property_types !== []) {
                 this.recipe.steps.forEach(s => {
                     s.ingredients.forEach(i => {
@@ -70,49 +102,53 @@ export default {
                         i.food.properties.forEach(fp => {
                             food.properties[fp.property_type.id] = {changed: false, property_amount: fp.property_amount, property_type: fp.property_type}
                         })
-                        foods.push(food)
+                        foods[food.food.id] = food
                     })
                 })
             }
             return foods
+        },
+        properties: function () {
+            let properties = {}
+            this.property_types.forEach(pt => {
+                properties[pt.id] = pt
+            })
+            return properties
         }
     },
     data() {
         return {
             recipe: null,
-            property_types: []
+            property_types: [],
+            editing_property_type: null,
         }
     },
     mounted() {
         this.$i18n.locale = window.CUSTOM_LOCALE
 
-        this.loadData();
+        this.loadRecipe();
+        this.loadPropertyTypes();
     },
     methods: {
-        loadData: function () {
+        loadRecipe: function () {
             let apiClient = new ApiApiFactory()
 
             apiClient.retrieveRecipe("112").then(result => {
                 this.recipe = result.data
             })
-
-            apiClient.listPropertyTypes().then(result => {
-                this.property_types = result.data
-            })
         },
         updateFood: function (food) {
             let apiClient = new ApiApiFactory()
             apiClient.partialUpdateFood(food.id, food).then(result => {
-                //TODO handle properly
                 StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
             }).catch((err) => {
                 StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
             })
         },
-        updatePropertyType: function (pt) {
+        loadPropertyTypes: function () {
             let apiClient = new ApiApiFactory()
-            apiClient.partialUpdatePropertyType(pt.id, pt).then(result => {
+            apiClient.listPropertyTypes().then(result => {
-                //TODO handle properly
+                this.property_types = result.data
                 StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
             }).catch((err) => {
                 StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
@@ -122,7 +158,7 @@ export default {
             let apiClient = new ApiApiFactory()
 
             apiClient.fdcFood(food.id).then(result => {
-                this.loadData()
+                this.loadRecipe()
                 StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
             }).catch((err) => {
                 StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)

vue/src/components/FoodEditor.vue

@@ -33,11 +33,11 @@
 
                             <h5><i class="fas fa-database"></i> {{ $t('Properties') }}</h5>
 
-                            <b-form-group :label="$t('Properties Food Amount')" description=""> <!-- TODO localize -->
+                            <b-form-group :label="$t('Properties_Food_Amount')" description="">
                                 <b-form-input v-model="food.properties_food_amount"></b-form-input>
                             </b-form-group>
 
-                            <b-form-group :label="$t('Properties Food Unit')" description=""> <!-- TODO localize -->
+                            <b-form-group :label="$t('Properties_Food_Unit')" description="">
                                 <generic-multiselect
                                     @change="food.properties_food_unit = $event.val;"
                                     :model="Models.UNIT"

vue/src/locales/en.json

@@ -81,6 +81,8 @@
     "open_data_help_text": "The Tandoor Open Data project provides community contributed data for Tandoor. This field is filled automatically when importing it and allows updates in the future.",
     "Open_Data_Slug": "Open Data Slug",
     "Open_Data_Import": "Open Data Import",
+    "Properties_Food_Amount": "Properties Food Amount",
+    "Properties_Food_Unit": "Properties Food Unit",
     "FDC_ID": "FDC ID",
     "FDC_ID_help": "FDC database ID",
     "Data_Import_Info": "Enhance your Space by importing a community curated list of foods, units and more to improve your recipe collection.",

vue/src/utils/models.js

@@ -738,7 +738,13 @@ export class Models {
                 },
                 fdc_id: {
                     form_field: true,
-                    type: "text",
+                    type: "choice",
+                    options: [
+                        { value: 1008, text: "Calories (1008)" },
+                        { value: 1005, text: "Carbohydrates (1005)" },
+                        { value: 1003, text: "Protein (1003)" },
+                        { value: 1004, text: "Fat (1004)" },
+                    ],
                     field: "fdc_id",
                     label: "FDC_ID",
                     help_text: "FDC_ID_help",