fdc search in property editor

This commit is contained in:
vabene1111
2025-03-21 19:05:06 +01:00
parent dea4fa000e
commit d6839c5dfa
2 changed files with 37 additions and 17 deletions

View File

@@ -3,14 +3,17 @@
<v-card>
<v-closable-card-title :title="$t('Search')" icon="$search" v-model="dialog"></v-closable-card-title>
<v-card-text>
<v-text-field v-model="query">
<v-text-field v-model="query" :loading="loading" :label="$t('Search')" @keydown.enter="fdcSearch()">
<template #append>
<v-btn icon="$search" @click="fdcSearch()"></v-btn>
<v-btn icon="$search" color="success" @click="fdcSearch()"></v-btn>
</template>
</v-text-field>
<v-select multiple v-model="fdcDataTypeSelection" :items="fdcDataTypeOptions" chips></v-select>
<v-list>
<v-list-item v-for="f in fdcQueryResults?.foods">{{ f}}</v-list-item>
<v-list-item v-for="f in fdcQueryResults?.foods" :title="f.description" @click="dialog = false; emit('selected', f.fdcId)">
<v-list-item-subtitle>{{f.dataType}} <v-chip size="small">{{f.fdcId}}</v-chip></v-list-item-subtitle>
</v-list-item>
</v-list>
</v-card-text>
</v-card>
@@ -22,17 +25,31 @@
import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
import {ref} from "vue";
import {ApiApi, FdcQuery} from "@/openapi";
import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
const dialog = defineModel<boolean>({required: true})
const emit = defineEmits(['selected'])
const dialog = defineModel<boolean>({default: false})
const loading = ref(false)
const query = ref("")
const fdcQueryResults = ref<undefined | FdcQuery>(undefined)
const fdcDataTypeOptions = ref(['Branded','Foundation','Survey (FNDDS)','SR Legacy'])
const fdcDataTypeSelection = ref(['Foundation','Survey (FNDDS)','SR Legacy'])
/**
* perform search in fdc database
*/
function fdcSearch() {
let api = new ApiApi()
api.apiFdcSearchRetrieve({query: query.value}).then(r => {
loading.value = true
api.apiFdcSearchRetrieve({query: query.value, dataType: fdcDataTypeSelection.value.join(',') }).then(r => {
fdcQueryResults.value = r
}).catch(err => {
useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
}).finally(() => {
loading.value = false
})
}

View File

@@ -47,6 +47,7 @@
<v-text-field type="number" v-model="food.fdcId" density="compact" hide-details @change="updateFood(food)" style="min-width: 180px"
:loading="food.loading">
<template #append-inner>
<v-btn icon="$search" size="small" density="compact" variant="plain" v-if="food.fdcId == undefined" @click="fdcSelectedFood = food; fdcDialog = true"></v-btn>
<v-btn @click="updateFoodFdcData(food)" icon="fa-solid fa-arrows-rotate" size="small" density="compact" variant="plain"
v-if="food.fdcId"></v-btn>
<v-btn :href="`https://fdc.nal.usda.gov/food-details/${food.fdcId}/nutrients`" target="_blank" icon="fa-solid fa-arrow-up-right-from-square"
@@ -118,8 +119,7 @@
</v-col>
</v-row>
<v-btn @click="fdcDialog = true">OpenSearch</v-btn>
<fdc-search-dialog v-model="fdcDialog"></fdc-search-dialog>
<fdc-search-dialog v-model="fdcDialog" @selected="(fdcId:number) => {fdcSelectedFood.fdcId = fdcId; updateFoodFdcData(fdcSelectedFood)}"></fdc-search-dialog>
</v-container>
<v-dialog v-model="dialog" max-width="600">
@@ -158,6 +158,8 @@ import {useUrlSearchParams} from "@vueuse/core";
import BtnCopy from "@/components/buttons/BtnCopy.vue";
import FdcSearchDialog from "@/components/dialogs/FdcSearchDialog.vue";
type FoodLoading = Food & { loading?: boolean }
const params = useUrlSearchParams('history', {})
const calculatorToNumerator = computed(() => {
@@ -173,10 +175,11 @@ const calculatorFromDenominator = ref(500)
const calculatorToDenominator = ref(100)
const fdcDialog = ref(false)
const fdcSelectedFood = ref<FoodLoading| undefined>(undefined)
const recipe = ref<undefined | Recipe>()
const propertyTypes = ref([] as PropertyType[])
const foods = ref(new Map<number, Food & { loading?: boolean }>())
const foods = ref(new Map<number, FoodLoading>())
const recipeLoading = ref(false)
const propertyTypesLoading = ref(false)
@@ -230,13 +233,13 @@ function loadPropertyTypes() {
* set null to indicate missing property, 0 for properties with the actual value 0
*/
function buildFoodMap() {
foods.value = new Map<number, Food & { loading?: boolean }>()
foods.value = new Map<number, FoodLoading>()
if (recipe.value != undefined) {
recipe.value.steps.forEach(step => {
step.ingredients.forEach(ingredient => {
if (ingredient.food && !foods.value.has(ingredient.food.id!)) {
let food: Food & { loading?: boolean } = buildFoodProperties(ingredient.food)
let food: FoodLoading = buildFoodProperties(ingredient.food)
food.loading = false
foods.value.set(food.id!, food)
}
@@ -274,7 +277,7 @@ function buildFoodProperties(food: Food) {
* @param p
* @param food
*/
function deleteFoodProperty(p: Property, food: Food & { loading?: boolean } ){
function deleteFoodProperty(p: Property, food: FoodLoading) {
let api = new ApiApi()
if (p.id) {
@@ -295,7 +298,7 @@ function deleteFoodProperty(p: Property, food: Food & { loading?: boolean } ){
* update food
* @param food
*/
function updateFood(food: Food & { loading?: boolean }) {
function updateFood(food: FoodLoading) {
let api = new ApiApi()
food.loading = true
api.apiFoodPartialUpdate({id: food.id!, patchedFood: food}).then(r => {
@@ -311,7 +314,7 @@ function updateFood(food: Food & { loading?: boolean }) {
* Update the food FDC data on the server and put the updated food into the food map
* @param food
*/
function updateFoodFdcData(food: Food & { loading?: boolean }) {
function updateFoodFdcData(food: FoodLoading) {
let api = new ApiApi()
food.loading = true
if (food.fdcId) {