mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-02 12:49:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

added FDC import to food editor

Browse Source
This commit is contained in:
vabene1111
2025-07-11 21:08:56 +02:00
parent 7841397b59
commit 2ac6451370
4 changed files with 73 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
vue3/src/components/inputs/PropertiesEditor.vue
View File

@@ -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">

61
vue3/src/components/model_editors/FoodEditor.vue
View File

@@ -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>