add calculator to property editore

vue3/src/pages/PropertyEditorPage.vue

@@ -6,7 +6,8 @@
                 <model-select append-to-body model="Recipe" v-model="recipe" @update:model-value="loadRecipe(recipe.id!)"></model-select>
             </v-card-text>
         </v-card>
-
+        <v-row>
+            <v-col>
                 <v-table class="mt-2">
                     <thead>
                     <tr>
@@ -43,9 +44,11 @@
                     <tr v-for="[i, food] in foods.entries()">
                         <td>{{ food.name }}</td>
                         <td>
-                    <v-text-field type="number" v-model="food.fdcId" density="compact" hide-details @change="updateFood(food)" style="min-width: 180px" :loading="food.loading">
+                            <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 @click="updateFoodFdcData(food)" icon="fa-solid fa-arrows-rotate" size="small" density="compact" variant="plain" v-if="food.fdcId"></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"
                                            size="small" variant="plain" v-if="food.fdcId"></v-btn>
                                 </template>
@@ -72,6 +75,48 @@
                     </tr>
                     </tbody>
                 </v-table>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col>
+                <v-card prepend-icon="fa-solid fa-calculator" :title="$t('Calculator')">
+                    <v-card-text>
+                        <v-row dense>
+                            <v-col cols="3">
+                                <v-text-field type="number" v-model="calculatorFromNumerator">
+                                    <template #append>
+                                        <i class="fa-solid fa-divide"></i>
+                                    </template>
+                                </v-text-field>
+                            </v-col>
+                            <v-col cols="3">
+                                <v-text-field type="number" v-model="calculatorFromDenominator">
+                                    <template #append>
+                                        <i class="fa-solid fa-equals"></i>
+                                    </template>
+                                </v-text-field>
+                            </v-col>
+                            <v-col cols="3">
+                                <v-text-field type="number" v-model="calculatorToNumerator">
+                                    <template #append>
+                                        <i class="fa-solid fa-divide"></i>
+                                    </template>
+                                    <template #append-inner>
+                                        <btn-copy variant="plain" :copy-value="calculatorToNumerator"></btn-copy>
+                                    </template>
+                                </v-text-field>
+                            </v-col>
+                            <v-col cols="3">
+                                <v-text-field type="number" v-model="calculatorToDenominator"></v-text-field>
+                            </v-col>
+                        </v-row>
+
+
+                    </v-card-text>
+                </v-card>
+
+            </v-col>
+        </v-row>
     </v-container>
 
     <v-dialog v-model="dialog" max-width="600">
@@ -100,20 +145,29 @@
 
 <script setup lang="ts">
 
-import {onMounted, ref} from "vue";
+import {computed, onMounted, ref} from "vue";
 import {ApiApi, Food, Property, PropertyType, Recipe, Unit} from "@/openapi";
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
 import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
 import {useUrlSearchParams} from "@vueuse/core";
+import BtnCopy from "@/components/buttons/BtnCopy.vue";
 
 const params = useUrlSearchParams('history', {})
 
+const calculatorToNumerator = computed(() => {
+    return (calculatorFromNumerator.value / calculatorFromDenominator.value * calculatorToDenominator.value).toFixed(2)
+})
+
 const dialog = ref(false)
 const dialogAmount = ref(100)
 const dialogUnit = ref<undefined | Unit>(undefined)
 
+const calculatorFromNumerator = ref(250)
+const calculatorFromDenominator = ref(500)
+const calculatorToDenominator = ref(100)
+
 const recipe = ref<undefined | Recipe>()
 const propertyTypes = ref([] as PropertyType[])
 const foods = ref(new Map<number, Food & { loading?: boolean }>())