From 2ac64513708c10bcbb59608f19cc303b527cbf84 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Fri, 11 Jul 2025 21:08:56 +0200
Subject: [PATCH] added FDC import to food editor

---
 .../components/inputs/PropertiesEditor.vue    | 16 ++---
 .../components/model_editors/FoodEditor.vue   | 61 ++++++++++++++++---
 vue3/src/pages/PropertyEditorPage.vue         | 10 +--
 vue3/src/utils/fdc.ts                         | 10 +++
 4 files changed, 73 insertions(+), 24 deletions(-)

diff --git a/vue3/src/components/inputs/PropertiesEditor.vue b/vue3/src/components/inputs/PropertiesEditor.vue
index 9253343a6..84095b845 100644
--- a/vue3/src/components/inputs/PropertiesEditor.vue
+++ b/vue3/src/components/inputs/PropertiesEditor.vue
@@ -5,7 +5,7 @@
     </v-btn-group>
 
     <v-row class="d-none d-md-flex mt-2" v-for="p in properties" dense>
-        <v-col cols="0" md="5">
+        <v-col cols="0" md="6">
             <v-number-input :step="10" v-model="p.propertyAmount" control-variant="stacked" :precision="2">
                 <template #append-inner v-if="p.propertyType">
                     <v-chip class="me-4">{{ p.propertyType.unit }} / {{ props.amountFor }}
@@ -14,13 +14,13 @@
             </v-number-input>
         </v-col>
         <v-col cols="0" md="6">
-            <!-- TODO fix card overflow invisible, overflow-visible class is not working -->
-            <model-select :label="$t('Property')" v-model="p.propertyType" model="PropertyType"></model-select>
-        </v-col>
-        <v-col cols="0" md="1">
-            <v-btn color="delete" @click="deleteProperty(p)">
-                <v-icon icon="$delete"></v-icon>
-            </v-btn>
+            <model-select  v-model="p.propertyType" model="PropertyType">
+                <template #append>
+                    <v-btn color="delete" icon @click="deleteProperty(p)">
+                        <v-icon icon="$delete"></v-icon>
+                    </v-btn>
+                </template>
+            </model-select>
         </v-col>
     </v-row>
     <v-list class="d-md-none">
diff --git a/vue3/src/components/model_editors/FoodEditor.vue b/vue3/src/components/model_editors/FoodEditor.vue
index f22649606..54b2dd63c 100644
--- a/vue3/src/components/model_editors/FoodEditor.vue
+++ b/vue3/src/components/model_editors/FoodEditor.vue
@@ -34,6 +34,19 @@
                 <v-tabs-window-item value="properties">
                     <v-alert icon="$help">{{ $t('PropertiesFoodHelp') }}</v-alert>
                     <v-form :disabled="loading" class="mt-5">
+                        <v-number-input :label="$t('FDC_ID')" v-model="editingObj.fdcId" :precision="0" control-variant="hidden" clearable>
+                            <template #append-inner>
+                                <v-btn icon="$search" size="small" density="compact" variant="plain" v-if="editingObj.fdcId == undefined"
+                                       @click="fdcDialog = true"></v-btn>
+                                <v-btn @click="updateFoodFdcData()" icon="fa-solid fa-arrows-rotate" size="small" density="compact" variant="plain"
+                                       v-if="editingObj.fdcId"></v-btn>
+                                <v-btn @click="openFdcPage(editingObj.fdcId)" :href="`https://fdc.nal.usda.gov/food-details/${editingObj.fdcId}/nutrients`" target="_blank"
+                                       icon="fa-solid fa-arrow-up-right-from-square"
+                                       size="small" variant="plain" v-if="editingObj.fdcId"></v-btn>
+                            </template>
+
+                        </v-number-input>
+
                         <v-number-input :label="$t('Properties_Food_Amount')" v-model="editingObj.propertiesFoodAmount" :precision="2"></v-number-input>
                         <model-select :label="$t('Properties_Food_Unit')" v-model="editingObj.propertiesFoodUnit" model="Unit"></model-select>
 
@@ -61,22 +74,27 @@
                                 </v-btn>
                             </v-card-title>
                             <v-card-text class="d-none d-md-block">
-                                <v-row>
+                                <v-row dense>
                                     <v-col md="6">
-                                        <v-number-input :label="$t('Amount')" :step="10" v-model="uc.baseAmount" control-variant="stacked" :precision="3"></v-number-input>
+                                        <v-number-input :label="$t('Amount')" :step="10" v-model="uc.baseAmount" control-variant="stacked" :precision="3" hide-details></v-number-input>
                                     </v-col>
                                     <v-col md="6">
                                         <!-- TODO fix card overflow invisible, overflow-visible class is not working -->
-                                        <model-select :label="$t('Unit')" v-model="uc.baseUnit" model="Unit"></model-select>
+                                        <model-select  v-model="uc.baseUnit" model="Unit" hide-details></model-select>
                                     </v-col>
                                 </v-row>
-                                <v-row>
+                                <v-row dense>
+                                    <v-col cols="12" class="text-center">
+                                        <v-icon icon="fa-solid fa-arrows-up-down" class="mt-4 mb-4"></v-icon>
+                                    </v-col>
+                                </v-row>
+                                <v-row dense>
                                     <v-col md="6">
                                         <v-number-input :label="$t('Amount')" :step="10" v-model="uc.convertedAmount" control-variant="stacked" :precision="3"></v-number-input>
                                     </v-col>
                                     <v-col md="6">
                                         <!-- TODO fix card overflow invisible, overflow-visible class is not working -->
-                                        <model-select :label="$t('Unit')" v-model="uc.convertedUnit" model="Unit"></model-select>
+                                        <model-select  v-model="uc.convertedUnit" model="Unit"></model-select>
                                     </v-col>
                                 </v-row>
                             </v-card-text>
@@ -110,6 +128,8 @@
 
         </v-card-text>
 
+        <fdc-search-dialog v-model="fdcDialog"
+                           @selected="(fdcId:number) => {editingObj.fdcId = fdcId;}"></fdc-search-dialog>
 
     </model-editor-base>
 
@@ -118,7 +138,7 @@
 <script setup lang="ts">
 
 import {computed, onMounted, PropType, ref, watch} from "vue";
-import {ApiApi, Food,  Unit, UnitConversion} from "@/openapi";
+import {ApiApi, Food, Unit, UnitConversion} from "@/openapi";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
 import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
@@ -126,6 +146,8 @@ import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
 import PropertiesEditor from "@/components/inputs/PropertiesEditor.vue";
 import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+import FdcSearchDialog from "@/components/dialogs/FdcSearchDialog.vue";
+import {openFdcPage} from "@/utils/fdc.ts";
 
 
 const props = defineProps({
@@ -147,10 +169,10 @@ const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading,
  */
 const propertiesAmountFor = computed(() => {
     let amountFor = ''
-    if(editingObj.value.propertiesFoodAmount){
+    if (editingObj.value.propertiesFoodAmount) {
         amountFor += editingObj.value.propertiesFoodAmount
     }
-    if(editingObj.value.propertiesFoodUnit){
+    if (editingObj.value.propertiesFoodUnit) {
         amountFor += " " + editingObj.value.propertiesFoodUnit.name
     }
     return amountFor
@@ -160,6 +182,8 @@ const tab = ref("food")
 
 const unitConversions = ref([] as UnitConversion[])
 
+const fdcDialog = ref(false)
+
 // load conversions the first time the conversions tab is opened
 const stopConversionsWatcher = watch(tab, (value, oldValue, onCleanup) => {
     if (value == 'conversions') {
@@ -229,6 +253,27 @@ function deleteUnitConversion(unitConversion: UnitConversion, database = false)
     }
 }
 
+/**
+ * Update the food FDC data on the server and update the editing object
+ */
+function updateFoodFdcData() {
+    let api = new ApiApi()
+    if (editingObj.value.fdcId) {
+        saveObject().then(() => {
+
+            loading.value = true
+            api.apiFoodFdcCreate({id: editingObj.value.id!, food: editingObj.value}).then(r => {
+                editingObj.value = r
+            }).catch(err => {
+                useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+            }).finally(() => {
+                loading.value = false
+                editingObjChanged.value = false
+            })
+        })
+    }
+}
+
 </script>
 
 <style scoped>
diff --git a/vue3/src/pages/PropertyEditorPage.vue b/vue3/src/pages/PropertyEditorPage.vue
index fc40a5bd0..7709c0247 100644
--- a/vue3/src/pages/PropertyEditorPage.vue
+++ b/vue3/src/pages/PropertyEditorPage.vue
@@ -187,6 +187,7 @@ import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
 import {useUrlSearchParams} from "@vueuse/core";
 import BtnCopy from "@/components/buttons/BtnCopy.vue";
 import FdcSearchDialog from "@/components/dialogs/FdcSearchDialog.vue";
+import {openFdcPage} from "@/utils/fdc.ts";
 
 type IngredientLoading = Ingredient & { loading?: boolean }
 
@@ -346,8 +347,8 @@ function updateFood(ingredient: IngredientLoading) {
  */
 function updateFoodFdcData(ingredient: IngredientLoading) {
     let api = new ApiApi()
-    ingredient.loading = true
     if (ingredient.food.fdcId) {
+        ingredient.loading = true
         api.apiFoodFdcCreate({id: ingredient.food.id!, food: ingredient.food}).then(r => {
             ingredient.food = r
             ingredients.value.set(r.id!, buildIngredientFoodProperties(ingredient))
@@ -381,13 +382,6 @@ function changeAllPropertyFoodAmounts(amount: number) {
     })
 }
 
-/**
- * for some reason v-btn href does not work in append inner slot of text field so open link with js
- * @param fdcId
- */
-function openFdcPage(fdcId: number){
-    window.open(`https://fdc.nal.usda.gov/food-details/${fdcId}/nutrients`, '_blank')
-}
 
 </script>
 
diff --git a/vue3/src/utils/fdc.ts b/vue3/src/utils/fdc.ts
index aa27c45ce..7037c3119 100644
--- a/vue3/src/utils/fdc.ts
+++ b/vue3/src/utils/fdc.ts
@@ -1,4 +1,14 @@
+/**
+ * for some reason v-btn href does not work in append inner slot of text field so open link with js
+ * @param fdcId
+ */
+export function openFdcPage(fdcId: number){
+    window.open(`https://fdc.nal.usda.gov/food-details/${fdcId}/nutrients`, '_blank')
+}
 
+/**
+ * different types defined in the FDC Database
+ */
 export const FDC_PROPERTY_TYPES = [
     {value: 1002, text: "Nitrogen [g] (1002)"},
     {value: 1003, text: "Protein [g] (1003)"},