moved food property to seperate component and re-used that for the re…

…cipe editor
TandoorRecipes · Dec 8, 2024 · 01a4fb5 · 01a4fb5
1 parent 01d5214
commit 01a4fb5
Show file tree

Hide file tree

Showing 35 changed files with 144 additions and 68 deletions.
diff --git a/vue3/src/components/inputs/PropertiesEditor.vue b/vue3/src/components/inputs/PropertiesEditor.vue
@@ -0,0 +1,83 @@
+<template>
+    <v-btn-group density="compact">
+        <v-btn color="create" @click="properties.push({} as Property)" prepend-icon="$create">{{ $t('Add') }}</v-btn>
+        <v-btn color="secondary" @click="addAllProperties" prepend-icon="fa-solid fa-list">{{ $t('AddAll') }}</v-btn>
+    </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-number-input :step="10" v-model="p.propertyAmount" control-variant="stacked">
+                <template #append-inner v-if="p.propertyType">
+                    <v-chip class="me-4">{{ p.propertyType.unit }} / {{ props.amountFor }}
+                    </v-chip>
+                </template>
+            </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>
+        </v-col>
+    </v-row>
+    <v-list class="d-md-none">
+        <v-list-item v-for="p in properties" border>
+            <span v-if="p.propertyType">{{ p.propertyAmount }} {{ p.propertyType.unit }} {{ p.propertyType.name }} / {{ props.amountFor }}
+            </span>
+            <span v-else><i><{{ $t('New') }}></i></span>
+            <template #append>
+                <v-btn color="edit">
+                    <v-icon icon="$edit"></v-icon>
+                    <model-edit-dialog model="Property" :item="p"></model-edit-dialog>
+                </v-btn>
+            </template>
+        </v-list-item>
+    </v-list>
+</template>
+
+<script setup lang="ts">
+
+import {ApiApi, Property} from "@/openapi";
+import {VNumberInput} from 'vuetify/labs/VNumberInput'
+import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
+import ModelSelect from "@/components/inputs/ModelSelect.vue";
+
+const props = defineProps({
+    amountFor: {type: String, required: true}
+})
+
+const properties = defineModel<Property[]>({required: true})
+
+/**
+ * remove a property from the list
+ * @param property property to delete
+ */
+function deleteProperty(property: Property) {
+    properties.value = properties.value.filter(p => p !== property)
+    // TODO delete from DB, needs endpoint for property relation to either recipe or food
+}
+
+/**
+ * load list of property types from server and add all types that are not yet
+ * in the list to the list
+ */
+function addAllProperties() {
+    const api = new ApiApi()
+    api.apiPropertyTypeList().then(r => {
+        r.results.forEach(pt => {
+            if (properties.value.findIndex(x => x.propertyType.name == pt.name) == -1) {
+                properties.value.push({propertyAmount: 0, propertyType: pt} as Property)
+            }
+        })
+    })
+}
+
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/vue3/src/components/inputs/StepEditor.vue b/vue3/src/components/inputs/StepEditor.vue
@@ -108,7 +108,7 @@
         <v-card>
             <v-closable-card-title :title="$t('Ingredients')" v-model="dialogIngredientParser"></v-closable-card-title>
             <v-card-text>
-                <v-textarea v-model="ingredientTextInput"></v-textarea>
+                <v-textarea v-model="ingredientTextInput" :placeholder="$t('paste_ingredients_placeholder')"></v-textarea>
             </v-card-text>
             <v-card-actions>
                 <v-btn @click="parseAndInsertIngredients()" color="save">{{ $t('Add') }}</v-btn>

diff --git a/vue3/src/components/model_editors/FoodEditor.vue b/vue3/src/components/model_editors/FoodEditor.vue
@@ -34,46 +34,7 @@
                         <v-number-input :label="$t('Properties_Food_Amount')" v-model="editingObj.propertiesFoodAmount"></v-number-input>
                         <model-select :label="$t('Properties_Food_Unit')" v-model="editingObj.propertiesFoodUnit" model="Unit"></model-select>
 
-                        <v-btn-group density="compact">
-                            <v-btn color="create" @click="editingObj.properties.push({} as Property)" prepend-icon="$create">{{ $t('Add') }}</v-btn>
-                            <v-btn color="secondary" @click="addAllProperties" prepend-icon="fa-solid fa-list">{{ $t('AddAll') }}</v-btn>
-                        </v-btn-group>
-
-                        <v-row class="d-none d-md-flex mt-2" v-for="p in editingObj.properties" dense>
-                            <v-col cols="0" md="5">
-                                <v-number-input :step="10" v-model="p.propertyAmount" control-variant="stacked">
-                                    <template #append-inner v-if="p.propertyType">
-                                        <v-chip class="me-4">{{ p.propertyType.unit }} / {{ editingObj.propertiesFoodAmount }} <span v-if="editingObj.propertiesFoodUnit">&nbsp;{{
-                                                editingObj.propertiesFoodUnit.name
-                                            }}</span>
-                                        </v-chip>
-                                    </template>
-                                </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="deleteFoodProperty(p)">
-                                    <v-icon icon="$delete"></v-icon>
-                                </v-btn>
-                            </v-col>
-                        </v-row>
-                        <v-list class="d-md-none">
-                            <v-list-item v-for="p in editingObj.properties" border>
-                                <span v-if="p.propertyType">{{ p.propertyAmount }} {{ p.propertyType.unit }} {{ p.propertyType.name }}
-                                    <span v-if="editingObj.propertiesFoodUnit"> / {{ editingObj.propertiesFoodAmount }} {{ editingObj.propertiesFoodUnit.name }}</span>
-                                </span>
-                                <span v-else><i><{{ $t('New') }}></i></span>
-                                <template #append>
-                                    <v-btn color="edit">
-                                        <v-icon icon="$edit"></v-icon>
-                                        <model-edit-dialog model="Property" :item="p"></model-edit-dialog>
-                                    </v-btn>
-                                </template>
-                            </v-list-item>
-                        </v-list>
+                        <properties-editor v-model="editingObj.properties" :amount-for="propertiesAmountFor"></properties-editor>
                     </v-form>
                 </v-tabs-window-item>
 
@@ -153,7 +114,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType, ref, watch} from "vue";
+import {computed, onMounted, PropType, ref, watch} from "vue";
 import {ApiApi, Food, Property, Unit, UnitConversion} from "@/openapi";
 import {useI18n} from "vue-i18n";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
@@ -162,6 +123,7 @@ import {VNumberInput} from 'vuetify/labs/VNumberInput'
 import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
+import PropertiesEditor from "@/components/inputs/PropertiesEditor.vue";
 
 
 const props = defineProps({
@@ -175,6 +137,22 @@ const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading,
 
 
 // object specific data (for selects/display)
+
+/**
+ * compute label for the properties amount input to show user for
+ * what amount of food a property is entered
+ */
+const propertiesAmountFor = computed(() => {
+    let amountFor = ''
+    if(editingObj.value.propertiesFoodAmount){
+        amountFor += editingObj.value.propertiesFoodAmount
+    }
+    if(editingObj.value.propertiesFoodUnit){
+        amountFor += " " + editingObj.value.propertiesFoodUnit.name
+    }
+    return amountFor
+})
+
 const tab = ref("food")
 
 const unitConversions = ref([] as UnitConversion[])
@@ -220,30 +198,6 @@ async function saveObjectConversions() {
 // object specific functions
 // ------------------------------------------------------
 
-/**
- * load list of property types from server and add all types that are not yet linked
- * to the given food to its properties
- */
-function addAllProperties() {
-    const api = new ApiApi()
-    api.apiPropertyTypeList().then(r => {
-        r.results.forEach(pt => {
-            if (editingObj.value.properties.findIndex(x => x.propertyType.name == pt.name) == -1) {
-                editingObj.value.properties.push({propertyAmount: 0, propertyType: pt} as Property)
-            }
-        })
-    })
-}
-
-/**
- * remove property from food
- * //TODO also delete relation in database
- * @param property property to delete
- */
-function deleteFoodProperty(property: Property) {
-    editingObj.value.properties = editingObj.value.properties.filter(p => p !== property)
-}
-
 /**
  * load conversions for currently editing food from API
  */

diff --git a/vue3/src/components/model_editors/RecipeEditor.vue b/vue3/src/components/model_editors/RecipeEditor.vue
@@ -12,6 +12,7 @@
         <v-tabs v-model="tab" :disabled="loading" grow>
             <v-tab value="recipe">{{ $t('Recipe') }}</v-tab>
             <v-tab value="steps">{{ $t('Steps') }}</v-tab>
+            <v-tab value="properties">{{ $t('Properties') }}</v-tab>
             <v-tab value="settings">{{ $t('Settings') }}</v-tab>
 
         </v-tabs>
@@ -71,6 +72,12 @@
 
                     </v-form>
                 </v-tabs-window-item>
+                <v-tabs-window-item value="properties">
+                    <v-form :disabled="loading">
+                        <v-alert class="mb-2" icon="$help">{{ $t('PropertiesFoodHelp') }}</v-alert>
+                        <properties-editor  v-model="editingObj.properties" :amount-for="$t('Serving')"></properties-editor>
+                    </v-form>
+                </v-tabs-window-item>
                 <v-tabs-window-item value="settings">
                     <v-form :disabled="loading">
                         <v-checkbox :label="$t('Ingredient Overview')" :hint="$t('show_ingredient_overview')" persistent-hint
@@ -115,6 +122,7 @@ import {useI18n} from "vue-i18n";
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
 import StepEditor from "@/components/inputs/StepEditor.vue";
 import {VueDraggable} from "vue-draggable-plus";
+import PropertiesEditor from "@/components/inputs/PropertiesEditor.vue";
 
 const {t} = useI18n()
 

diff --git a/vue3/src/locales/ar.json b/vue3/src/locales/ar.json
@@ -261,6 +261,7 @@
   "Select_File": "",
   "Selected": "",
   "SelectedCategories": "",
+  "Serving": "",
   "Servings": "",
   "ServingsText": "",
   "Settings": "",

diff --git a/vue3/src/locales/bg.json b/vue3/src/locales/bg.json
@@ -254,6 +254,7 @@
   "Select_File": "Избери файл",
   "Selected": "Избрано",
   "SelectedCategories": "",
+  "Serving": "",
   "Servings": "Порции",
   "ServingsText": "",
   "Settings": "Настройки",

diff --git a/vue3/src/locales/ca.json b/vue3/src/locales/ca.json
@@ -333,6 +333,7 @@
   "Select_File": "Seleccioneu arxiu",
   "Selected": "",
   "SelectedCategories": "",
+  "Serving": "",
   "Servings": "",
   "ServingsText": "",
   "Settings": "",

diff --git a/vue3/src/locales/cs.json b/vue3/src/locales/cs.json
@@ -331,6 +331,7 @@
   "Select_File": "Vybrat soubor",
   "Selected": "Vybrané",
   "SelectedCategories": "",
+  "Serving": "",
   "Servings": "Porce",
   "ServingsText": "",
   "Settings": "Nastavení",

diff --git a/vue3/src/locales/da.json b/vue3/src/locales/da.json
@@ -313,6 +313,7 @@
   "Select_File": "Vælg fil",
   "Selected": "Valgt",
   "SelectedCategories": "",
+  "Serving": "",
   "Servings": "Serveringer",
   "ServingsText": "",
   "Settings": "Indstillinger",

diff --git a/vue3/src/locales/de.json b/vue3/src/locales/de.json
@@ -294,7 +294,7 @@
   "Private_Recipe_Help": "Dieses Rezept ist nur für dich und Personen mit denen du es geteilt hast sichtbar.",
   "Profile": "Profil",
   "Properties": "Eigenschaften",
-  "PropertiesFoodHelp": "Jedes Lebensmittel kann Eigenschaften zugeordnet bekommen. Rezepte berechnen die Summe der Eigenschaften basierend auf den verwendeten Lebensmitteln und Ihren Mengen.",
+  "PropertiesFoodHelp": "Eigenschaften können für Rezepte und Lebensmittel erfasst werden. Eigenschaften von Lebensmitteln werden entsprechend der Menge für das Rezept ausgerechnet und überschreiben  die Rezepteigenschaften. ",
   "Properties_Food_Amount": "Eigenschaften: Lebensmittelmenge",
   "Properties_Food_Unit": "Nährwert Einheit",
   "Property": "Eigenschaft",
@@ -336,6 +336,7 @@
   "Select_File": "Datei auswählen",
   "Selected": "Ausgewählt",
   "SelectedCategories": "Ausgewählte Kategorien",
+  "Serving": "Portion",
   "Servings": "Portionen",
   "ServingsText": "Portionstext",
   "Settings": "Einstellungen",

diff --git a/vue3/src/locales/el.json b/vue3/src/locales/el.json
@@ -305,6 +305,7 @@
   "Select_File": "Επιλογή αρχείου",
   "Selected": "Επιλεγμένο",
   "SelectedCategories": "",
+  "Serving": "",
   "Servings": "Μερίδες",
   "ServingsText": "",
   "Settings": "Ρυθμίσεις",

diff --git a/vue3/src/locales/en.json b/vue3/src/locales/en.json
@@ -293,7 +293,7 @@
   "Private_Recipe_Help": "Recipe is only shown to you and people its shared with.",
   "Profile": "Profile",
   "Properties": "Properties",
-  "PropertiesFoodHelp": "Every food can have properties. Recipes calculate the properties automatically, based on the properties of their foods and the amount given in the ingredients.",
+  "PropertiesFoodHelp": "Properties can be added to Recipes and Foods. Properties on Foods are calculated according based on their amount in the recipe and override the recipe properties.",
   "Properties_Food_Amount": "Properties Food Amount",
   "Properties_Food_Unit": "Properties Food Unit",
   "Property": "Property",
@@ -335,6 +335,7 @@
   "Select_File": "Select File",
   "Selected": "Selected",
   "SelectedCategories": "Selected Categories",
+  "Serving": "Serving",
   "Servings": "Servings",
   "ServingsText": "Servings Text",
   "Settings": "Settings",

diff --git a/vue3/src/locales/es.json b/vue3/src/locales/es.json
@@ -332,6 +332,7 @@
   "Select_File": "Seleccionar archivo",
   "Selected": "Selecionado",
   "SelectedCategories": "",
+  "Serving": "",
   "Servings": "Raciones",
   "ServingsText": "",
   "Settings": "Opciones",

diff --git a/vue3/src/locales/fi.json b/vue3/src/locales/fi.json
@@ -186,6 +186,7 @@
   "Select_File": "Valitse Tiedosto",
   "Selected": "Valittu",
   "SelectedCategories": "",
+  "Serving": "",
   "Servings": "Annokset",
   "ServingsText": "",
   "Settings": "Asetukset",

diff --git a/vue3/src/locales/fr.json b/vue3/src/locales/fr.json
@@ -333,6 +333,7 @@
   "Select_File": "Sélectionner le fichier",
   "Selected": "Sélectionné",
   "SelectedCategories": "",
+  "Serving": "",
   "Servings": "Portions",
   "ServingsText": "",
   "Settings": "Paramètres",

diff --git a/vue3/src/locales/he.json b/vue3/src/locales/he.json
@@ -334,6 +334,7 @@
   "Select_File": "בחר קובץ",
   "Selected": "נבחר",
   "SelectedCategories": "",
+  "Serving": "",
   "Servings": "מנות",
   "ServingsText": "",
   "Settings": "הגדרות",

diff --git a/vue3/src/locales/hu.json b/vue3/src/locales/hu.json
@@ -307,6 +307,7 @@
   "Select_File": "Fájl kiválasztása",
   "Selected": "Kiválasztott",
   "SelectedCategories": "",
+  "Serving": "",
   "Servings": "Adag",
   "ServingsText": "",
   "Settings": "Beállítások",

diff --git a/vue3/src/locales/hy.json b/vue3/src/locales/hy.json
@@ -130,6 +130,7 @@
   "Select_File": "Ընտրել Ֆայլ",
   "Selected": "",
   "SelectedCategories": "",
+  "Serving": "",
   "Servings": "",
   "ServingsText": "",
   "Settings": "Կարգավորումներ",

diff --git a/vue3/src/locales/id.json b/vue3/src/locales/id.json
@@ -283,6 +283,7 @@
   "Select_File": "Pilih Buku",
   "Selected": "Terpilih",
   "SelectedCategories": "",
+  "Serving": "",
   "Servings": "Porsi",
   "ServingsText": "",
   "Settings": "Pengaturan",

diff --git a/vue3/src/locales/is.json b/vue3/src/locales/is.json
@@ -333,6 +333,7 @@
   "Select_File": "",
   "Selected": "",
   "SelectedCategories": "",
+  "Serving": "",
   "Servings": "",
   "ServingsText": "",
   "Settings": "",

diff --git a/vue3/src/locales/it.json b/vue3/src/locales/it.json
@@ -291,6 +291,7 @@
   "Select_File": "Seleziona file",
   "Selected": "Selezionato",
   "SelectedCategories": "",
+  "Serving": "",
   "Servings": "Porzioni",
   "ServingsText": "",
   "Settings": "Impostazioni",