all food editor functions implemented

2026-01-01 04:10:06 -05:00 · 2024-09-22 20:07:12 +02:00
parent 73e4f22256
commit ea8ab582eb
35 changed files with 350 additions and 19 deletions
--- a/vue3/src/components/dialogs/ModelEditorDialog.vue
+++ b/vue3/src/components/dialogs/ModelEditorDialog.vue
@@ -1,5 +1,6 @@
 <template>
    <v-dialog max-width="600" activator="parent" v-model="dialog">
+        <unit-conversion-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.UnitConversion" :disabled-fields="disabledFields"></unit-conversion-editor>
        <access-token-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.AccessToken"></access-token-editor>
        <invite-link-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.InviteLink"></invite-link-editor>
        <user-space-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.UserSpace"></user-space-editor>
@@ -11,15 +12,17 @@
 <script setup lang="ts">


-import {PropType, ref} from "vue";
+import {ref} from "vue";
 import AccessTokenEditor from "@/components/model_editors/AccessTokenEditor.vue";
 import {AccessToken, Food} from "@/openapi";
 import InviteLinkEditor from "@/components/model_editors/InviteLinkEditor.vue";
 import UserSpaceEditor from "@/components/model_editors/UserSpaceEditor.vue";
 import MealTypeEditor from "@/components/model_editors/MealTypeEditor.vue";
 import PropertyEditor from "@/components/model_editors/PropertyEditor.vue";
+import UnitConversionEditor from "@/components/model_editors/UnitConversionEditor.vue";

 enum SupportedModels {
+    UnitConversion = 'UnitConversion',
    AccessToken = 'AccessToken',
    InviteLink = 'InviteLink',
    UserSpace = 'UserSpace',
@@ -35,6 +38,7 @@ const props = defineProps({
        required: true,
    },
    item: {default: null},
+    disabledFields: {default: []},
    closeAfterCreate: {default: true},
    closeAfterSave: {default: true},
    closeAfterDelete: {default: true},
--- a/vue3/src/components/model_editors/FoodEditor.vue
+++ b/vue3/src/components/model_editors/FoodEditor.vue
@@ -34,7 +34,7 @@
                            <v-btn color="secondary" @click="addAllProperties" prepend-icon="fa-solid fa-list">{{ $t('AddAll') }}</v-btn>
                        </v-btn-group>

-                        <v-row class="mt-2" v-for="p in editingObj.properties" dense>
+                        <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">
@@ -55,21 +55,86 @@
                                </v-btn>
                            </v-col>
                        </v-row>
-                        <v-list >
+                        <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 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>
+                                <span v-else><i><{{ $t('New') }}></i></span>
                                <template #append>
-                                    <v-btn color="edit"><v-icon icon="$edit"></v-icon>
-                                    <model-editor-dialog model="Property" :item="p"></model-editor-dialog>
+                                    <v-btn color="edit">
+                                        <v-icon icon="$edit"></v-icon>
+                                        <model-editor-dialog model="Property" :item="p"></model-editor-dialog>
                                    </v-btn>
                                </template>
                            </v-list-item>
                        </v-list>
                    </v-form>
                </v-tabs-window-item>
+
+                <v-tabs-window-item value="conversions">
+                    <v-alert icon="$help">{{ $t('ConversionsHelp') }}</v-alert>
+                    <v-form class="mt-5">
+
+                        <v-btn color="create" @click="unitConversions.push({food: editingObj} as UnitConversion)" prepend-icon="$create">{{ $t('Add') }}</v-btn>
+
+                        <v-card class="mt-2" border v-for="uc in unitConversions" dense>
+                            <v-card-title>
+                                <span v-if="uc.baseUnit">{{ uc.baseAmount }} {{ uc.baseUnit.name }}</span>
+                                <v-icon size="x-small" icon="fa-solid fa-arrows-left-right" class="me-2 ms-2"></v-icon>
+                                <span v-if="uc.convertedUnit">{{ uc.convertedAmount }} {{ uc.convertedUnit.name }}</span>
+                                <v-btn color="delete" class="float-right d-none d-md-block" @click="deleteUnitConversion(uc, true)">
+                                    <v-icon icon="$delete"></v-icon>
+                                </v-btn>
+                                <v-btn color="edit" class="float-right d-md-none">
+                                    <v-icon icon="$edit"></v-icon>
+                                    <model-editor-dialog model="UnitConversion" :item="uc" @delete="deleteUnitConversion(uc, false)" :disabled-fields="['food']"></model-editor-dialog>
+                                </v-btn>
+                            </v-card-title>
+                            <v-card-text class="d-none d-md-block">
+                                <v-row>
+                                    <v-col md="6">
+                                        <v-number-input :label="$t('Amount')" :step="10" v-model="uc.baseAmount" control-variant="stacked"></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>
+                                    </v-col>
+                                </v-row>
+                                <v-row>
+                                    <v-col md="6">
+                                        <v-number-input :label="$t('Amount')" :step="10" v-model="uc.convertedAmount" control-variant="stacked"></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>
+                                    </v-col>
+                                </v-row>
+                            </v-card-text>
+
+                        </v-card>
+                    </v-form>
+                </v-tabs-window-item>
+
+                <v-tabs-window-item value="misc">
+                    <v-form class="mt-5">
+                        <ModelSelect model="Recipe" v-model="editingObj.recipe" :label="$t('Recipe')"></ModelSelect>
+                        <v-text-field :label="$t('Website')" v-model="editingObj.url"></v-text-field>
+                        <v-checkbox :label="$t('OnHand')" :hint="$t('OnHand_help')" v-model="editingObj.foodOnhand" persistent-hint></v-checkbox>
+                        <v-checkbox :label="$t('Ignore_Shopping')" :hint="$t('ignore_shopping_help')" v-model="editingObj.ignoreShopping" persistent-hint></v-checkbox>
+                        <v-divider class="mt-2 mb-2"></v-divider>
+                        <ModelSelect model="Food" v-model="editingObj.substitute" :label="$t('Substitutes')" :hint="$t('substitute_help')" mode="tags"></ModelSelect>
+
+                        <v-checkbox :label="$t('substitute_siblings')" :hint="$t('substitute_siblings_help')" v-model="editingObj.substituteSiblings" persistent-hint></v-checkbox>
+                        <v-checkbox :label="$t('substitute_children')" :hint="$t('substitute_children_help')" v-model="editingObj.substituteChildren" persistent-hint></v-checkbox>
+
+                        <ModelSelect model="FoodInheritField" v-model="editingObj.inheritFields" :label="$t('InheritFields')" :hint="$t('InheritFields_help')" mode="tags"></ModelSelect>
+                        <ModelSelect model="FoodInheritField" v-model="editingObj.childInheritFields" :label="$t('ChildInheritFields')" :hint="$t('ChildInheritFields_help')" mode="tags"></ModelSelect>
+
+                        <!-- TODO re-add reset inheritance button/api call /function (previously annotated field on food -->
+                        <v-text-field :label="$t('Open_Data_Slug')" :hint="$t('open_data_help_text')" persistent-hint v-model="editingObj.openDataSlug" disabled></v-text-field>
+                    </v-form>
+                </v-tabs-window-item>
            </v-tabs-window>

        </v-card-text>
@@ -84,8 +149,8 @@

 <script setup lang="ts">

-import {computed, onMounted, Prop, ref} from "vue";
-import {ApiApi, Food, Property, Unit} from "@/openapi";
+import {computed, onMounted, Prop, ref, watch} from "vue";
+import {ApiApi, Food, Property, Unit, UnitConversion} from "@/openapi";
 import DeleteConfirmDialog from "@/components/dialogs/DeleteConfirmDialog.vue";
 import {useI18n} from "vue-i18n";
 import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
@@ -108,12 +173,17 @@ const editingObj = ref({} as Food)
 const loading = ref(false)

 // object specific data (for selects/display)
-const tab = ref("properties")
-const propertyTableHeaders = ref([
-    {title: t('Amount'), key: 'propertyAmount'},
-    {title: t('Type'), key: 'propertyType'},
-    {title: t('Delete'), key: 'action', align: 'end'},
-])
+const tab = ref("misc")
+
+const unitConversions = ref([] as UnitConversion[])
+
+// load conversions the first time the conversions tab is opened
+const stopConversionsWatcher = watch(tab, (value, oldValue, onCleanup) => {
+    if (value == 'conversions') {
+        loadConversions()
+        stopConversionsWatcher()
+    }
+})

 /**
 * checks if given object has ID property to determine if it needs to be updated or created
@@ -168,6 +238,18 @@ async function saveObject() {
            useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
        })
    }
+
+    unitConversions.value.forEach((uc) => {
+        if (uc.id) {
+            api.apiUnitConversionUpdate({id: uc.id, unitConversion: uc}).catch(err => {
+                useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+            })
+        } else {
+            api.apiUnitConversionCreate({id: uc.id, unitConversion: uc}).catch(err => {
+                useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
+            })
+        }
+    })
 }

 /**
@@ -211,6 +293,33 @@ function deleteFoodProperty(property: Property) {
    editingObj.value.properties = editingObj.value.properties.filter(p => p !== property)
 }

+/**
+ * load conversions for currently editing food from API
+ */
+function loadConversions() {
+    const api = new ApiApi()
+    api.apiUnitConversionList({foodId: editingObj.value.id}).then(r => {
+        unitConversions.value = r.results
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+    })
+}
+
+/**
+ * delete unit conversion from local list and if parameter is true also from database
+ * @param unitConversion UnitConversion to delete
+ * @param database if UnitConversion should also be deleted from database
+ */
+function deleteUnitConversion(unitConversion: UnitConversion, database = false) {
+    unitConversions.value = unitConversions.value.filter(uc => uc !== uc)
+    if (database && unitConversion.id) {
+        const api = new ApiApi()
+        api.apiUnitConversionDestroy({id: unitConversion.id}).catch(err => {
+            useMessageStore().addError(ErrorMessageType.DELETE_ERROR, err)
+        })
+    }
+}
+
 </script>

 <style scoped>
--- a/vue3/src/components/model_editors/UnitConversionEditor.vue
+++ b/vue3/src/components/model_editors/UnitConversionEditor.vue
@@ -0,0 +1,157 @@
+<template>
+    <v-card>
+        <v-card-title>
+            {{ $t(OBJ_LOCALIZATION_KEY) }}
+            <v-btn class="float-right" icon="$close" variant="plain" @click="emit('close')" v-if="dialog"></v-btn>
+        </v-card-title>
+
+        <v-card-text>
+            <v-form>
+                <v-row>
+                    <v-col>
+                        <model-select model="Food" v-model="editingObj.food" :label="$t('Food')" :disabled="disabledFields.includes('food')"></model-select>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col md="6">
+                        <v-number-input :label="$t('Amount')" :step="10" v-model="editingObj.baseAmount" control-variant="stacked"></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="editingObj.baseUnit" model="Unit"></model-select>
+                    </v-col>
+                </v-row>
+                <v-row class="mt-0">
+                    <v-col class="text-center">
+                        <v-icon icon="fa-solid fa-arrows-up-down"></v-icon>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col md="6">
+                        <v-number-input :label="$t('Amount')" :step="10" v-model="editingObj.convertedAmount" control-variant="stacked"></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="editingObj.convertedUnit" model="Unit"></model-select>
+                    </v-col>
+                </v-row>
+            </v-form>
+        </v-card-text>
+        <v-card-actions>
+            <v-btn color="delete" prepend-icon="$delete" v-if="isUpdate">{{ $t('Delete') }}
+                <delete-confirm-dialog :object-name="objectName" @delete="deleteObject"></delete-confirm-dialog>
+            </v-btn>
+            <v-btn color="save" prepend-icon="$save" @click="saveObject">{{ isUpdate ? $t('Save') : $t('Create') }}</v-btn>
+        </v-card-actions>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+
+import {computed, onMounted, ref} from "vue";
+import {ApiApi, Property, UnitConversion} from "@/openapi";
+import DeleteConfirmDialog from "@/components/dialogs/DeleteConfirmDialog.vue";
+import {useI18n} from "vue-i18n";
+import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
+import ModelSelect from "@/components/inputs/ModelSelect.vue";
+import {VNumberInput} from 'vuetify/labs/VNumberInput' //TODO remove once component is out of labs
+
+const {t} = useI18n()
+
+const emit = defineEmits(['create', 'save', 'delete', 'close'])
+
+const props = defineProps({
+    item: {type: {} as UnitConversion, required: false},
+    itemId: {type: String, required: false},
+    dialog: {type: Boolean, default: false},
+
+    disabledFields: {default: []},
+})
+
+const OBJ_LOCALIZATION_KEY = 'Conversion'
+const editingObj = ref({} as UnitConversion)
+const loading = ref(false)
+
+// object specific data (for selects/display)
+
+/**
+ * checks if given object has ID property to determine if it needs to be updated or created
+ */
+const isUpdate = computed(() => {
+    return Object.keys(editingObj.value).length > 0
+})
+
+/**
+ * display name for object in headers/delete dialog/...
+ */
+const objectName = computed(() => {
+    return isUpdate ? `${t(OBJ_LOCALIZATION_KEY)} ${editingObj.value.token}` : `${t(OBJ_LOCALIZATION_KEY)} (${t('New')})`
+})
+
+onMounted(() => {
+    if (props.item != null) {
+        editingObj.value = props.item
+    } else if (props.itemId != null) {
+        const api = new ApiApi()
+        api.apiUnitConversionRetrieve({id: props.itemId}).then(r => {
+            editingObj.value = r
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+        })
+    } else {
+        // functions to populate defaults for new item
+
+    }
+})
+
+/**
+ * saves the edited object in the database
+ */
+async function saveObject() {
+    let api = new ApiApi()
+    if (editingObj.value.id) {
+        api.apiUnitConversionUpdate({id: editingObj.value.id, unitConversion: editingObj.value}).then(r => {
+            editingObj.value = r
+            emit('save', r)
+            useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+        })
+    } else {
+        api.apiUnitConversionCreate({unitConversion: editingObj.value}).then(r => {
+            editingObj.value = r
+            emit('create', r)
+            useMessageStore().addPreparedMessage(PreparedMessage.CREATE_SUCCESS)
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
+        })
+    }
+}
+
+/**
+ * deletes the editing object from the database
+ */
+async function deleteObject() {
+    if (editingObj.value.id !== undefined) {
+        let api = new ApiApi()
+        api.apiUnitConversionDestroy({id: editingObj.value.id}).then(r => {
+            editingObj.value = {} as UnitConversion
+            emit('delete', editingObj.value)
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.DELETE_ERROR, err)
+        })
+    } else {
+        editingObj.value = {} as UnitConversion
+        emit('delete', editingObj.value)
+    }
+}
+
+// ------------------------------------------------------
+// object specific functions
+// ------------------------------------------------------
+
+</script>
+
+<style scoped>
+
+</style>
--- a/vue3/src/locales/ar.json
+++ b/vue3/src/locales/ar.json
@@ -37,6 +37,7 @@
  "Color": "",
  "Coming_Soon": "",
  "Completed": "",
+  "ConversionsHelp": "",
  "Copy": "",
  "Copy Link": "",
  "Copy Token": "",
@@ -257,6 +258,7 @@
  "Step_Type": "",
  "Step_start_time": "",
  "SubstituteOnHand": "",
+  "Substitutes": "",
  "Success": "",
  "SuccessClipboard": "",
  "Sunday": "",
--- a/vue3/src/locales/bg.json
+++ b/vue3/src/locales/bg.json
@@ -37,6 +37,7 @@
  "Color": "Цвят",
  "Coming_Soon": "Очаквайте скоро",
  "Completed": "Завършено",
+  "ConversionsHelp": "",
  "Copy": "Копиране",
  "Copy_template_reference": "Копирайте препратка към шаблона",
  "CountMore": "...+{count} още",
@@ -250,6 +251,7 @@
  "Step_Type": "Стъпка Тип",
  "Step_start_time": "Стъпка Начално време",
  "SubstituteOnHand": "Имате заместител под ръка.",
+  "Substitutes": "",
  "Success": "Успешно",
  "SuccessClipboard": "Списъкът за пазаруване е копиран в клипборда",
  "Sunday": "",
--- a/vue3/src/locales/ca.json
+++ b/vue3/src/locales/ca.json
@@ -50,6 +50,7 @@
  "Comments_setting": "",
  "Completed": "",
  "Conversion": "",
+  "ConversionsHelp": "",
  "Copy": "",
  "Copy Link": "",
  "Copy Token": "",
@@ -340,6 +341,7 @@
  "Sticky_Nav": "",
  "Sticky_Nav_Help": "",
  "SubstituteOnHand": "",
+  "Substitutes": "",
  "Success": "",
  "SuccessClipboard": "",
  "Sunday": "",
--- a/vue3/src/locales/cs.json
+++ b/vue3/src/locales/cs.json
@@ -50,6 +50,7 @@
  "Comments_setting": "Zobrazit komentáře",
  "Completed": "Dokončeno",
  "Conversion": "Převod",
+  "ConversionsHelp": "",
  "Copy": "Kopírovat",
  "Copy Link": "Kopírovat odkaz",
  "Copy Token": "Kopírovat token",
@@ -336,6 +337,7 @@
  "Sticky_Nav": "Připnout navigační panel",
  "Sticky_Nav_Help": "Vždy zobrazit navigační panel na vrchu stránky.",
  "SubstituteOnHand": "Máte k dispozici náhradu.",
+  "Substitutes": "",
  "Success": "Úspěch",
  "SuccessClipboard": "Nákupní seznam byl zkopírován do schránky",
  "Sunday": "",
--- a/vue3/src/locales/da.json
+++ b/vue3/src/locales/da.json
@@ -49,6 +49,7 @@
  "Comments_setting": "Vis kommentarer",
  "Completed": "Afsluttet",
  "Conversion": "Konversion",
+  "ConversionsHelp": "",
  "Copy": "Kopier",
  "Copy Link": "Kopier link",
  "Copy Token": "Kopier token",
@@ -314,6 +315,7 @@
  "Sticky_Nav": "Fastlåst navigation",
  "Sticky_Nav_Help": "Vis altid navigationsmenuen øverst på skærmen.",
  "SubstituteOnHand": "Du har erstatninger tilgængeligt.",
+  "Substitutes": "",
  "Success": "Succes",
  "SuccessClipboard": "Indkøbsliste kopieret til udklipsholder",
  "Sunday": "",
--- a/vue3/src/locales/de.json
+++ b/vue3/src/locales/de.json
@@ -51,6 +51,7 @@
  "Comments_setting": "Kommentare anzeigen",
  "Completed": "Fertig",
  "Conversion": "Umrechnung",
+  "ConversionsHelp": "Mit Umrechnungen kann die Menge einens Lebensmittels in verschiedenen Einheiten ausgerechnet werden. Aktuell wird dies nur zur berechnung von Eigenschaften verwendet, später jedoch sollen auch andere Funktionen von Tandoor davon profitieren.",
  "Copy": "Kopieren",
  "Copy Link": "Link Kopieren",
  "Copy Token": "Kopiere Token",
@@ -342,7 +343,7 @@
  "Sticky_Nav": "Navigationsleiste immer sichtbar (sticky navigation)",
  "Sticky_Nav_Help": "Navigationsleiste immer im Seitenkopf anzeigen.",
  "SubstituteOnHand": "Du hast eine Alternative vorrätig.",
-  "Substitutes": "Zusätze",
+  "Substitutes": "Alternativen",
  "Success": "Erfolgreich",
  "SuccessClipboard": "Einkaufsliste wurde in die Zwischenablage kopiert",
  "Sunday": "Sonntag",
--- a/vue3/src/locales/el.json
+++ b/vue3/src/locales/el.json
@@ -48,6 +48,7 @@
  "Comments_setting": "Εμφάνιση σχολίων",
  "Completed": "Ολοκληρωμένο",
  "Conversion": "Μετατροπή",
+  "ConversionsHelp": "",
  "Copy": "Αντιγραφή",
  "Copy Link": "Αντιγραφή συνδέσμου",
  "Copy Token": "Αντιγραφή token",
@@ -305,6 +306,7 @@
  "Sticky_Nav": "Κολλητική πλοήγηση",
  "Sticky_Nav_Help": "Μόνιμη εμφάνιση του μενού πλοήγησης στο πάνω μέρος της οθόνης.",
  "SubstituteOnHand": "Έχετε διαθέσιμο ένα υποκατάστατο.",
+  "Substitutes": "",
  "Success": "Επιτυχία",
  "SuccessClipboard": "Η λίστα αγορών αντιγράφηκε στο πρόχειρο",
  "Sunday": "",
--- a/vue3/src/locales/en.json
+++ b/vue3/src/locales/en.json
@@ -50,6 +50,7 @@
  "Comments_setting": "Show Comments",
  "Completed": "Completed",
  "Conversion": "Conversion",
+  "ConversionsHelp": "With conversions you can calculate the amount of a food in different units. Currently this is only used for property calculation, later it might also be used in other parts of tandoor. ",
  "Copy": "Copy",
  "Copy Link": "Copy Link",
  "Copy Token": "Copy Token",
@@ -344,6 +345,7 @@
  "Sticky_Nav": "Sticky Navigation",
  "Sticky_Nav_Help": "Always show the navigation menu at the top of the screen.",
  "SubstituteOnHand": "You have a substitute on hand.",
+  "Substitutes": "Substitutes",
  "Success": "Success",
  "SuccessClipboard": "Shopping list copied to clipboard",
  "Sunday": "Sunday",
--- a/vue3/src/locales/es.json
+++ b/vue3/src/locales/es.json
@@ -50,6 +50,7 @@
  "Comments_setting": "Mostrar Comentarios",
  "Completed": "Completado",
  "Conversion": "Conversión",
+  "ConversionsHelp": "",
  "Copy": "Copiar",
  "Copy Link": "Copiar Enlace",
  "Copy Token": "Copiar Token",
@@ -339,6 +340,7 @@
  "Sticky_Nav": "Navegación Fija",
  "Sticky_Nav_Help": "Mostrar siempre el menú de navegación el la parte superior de la pantalla.",
  "SubstituteOnHand": "Tienen un sustituto disponible.",
+  "Substitutes": "",
  "Success": "Exito",
  "SuccessClipboard": "Lista de la compra copiada al portapapeles",
  "Sunday": "",
--- a/vue3/src/locales/fi.json
+++ b/vue3/src/locales/fi.json
@@ -23,6 +23,7 @@
  "Close": "Sulje",
  "Color": "Väri",
  "Coming_Soon": "Tulossa pian",
+  "ConversionsHelp": "",
  "Copy": "Kopioi",
  "Copy_template_reference": "Kopioi malliviittaus",
  "Create": "Luo",
@@ -177,6 +178,7 @@
  "Step_Name": "Vaiheen Nimi",
  "Step_Type": "Vaiheen Tyyppi",
  "Step_start_time": "Vaiheen aloitusaika",
+  "Substitutes": "",
  "Success": "Onnistui",
  "Sunday": "",
  "Supermarket": "Supermarket",
--- a/vue3/src/locales/fr.json
+++ b/vue3/src/locales/fr.json
@@ -49,6 +49,7 @@
  "Comments_setting": "Montrer les commentaires",
  "Completed": "Achevé",
  "Conversion": "Conversion",
+  "ConversionsHelp": "",
  "Copy": "Copier",
  "Copy Link": "Copier le lien",
  "Copy Token": "Copier le jeton",
@@ -339,6 +340,7 @@
  "Step_start_time": "Heure de début de l’étape",
  "Sticky_Nav": "Barre de navigation collante",
  "Sticky_Nav_Help": "Toujours afficher le menu de navigation en haut de l’écran.",
+  "Substitutes": "",
  "Success": "Réussite",
  "SuccessClipboard": "Liste de courses copiée dans le presse-papiers",
  "Sunday": "",
--- a/vue3/src/locales/he.json
+++ b/vue3/src/locales/he.json
@@ -50,6 +50,7 @@
  "Comments_setting": "הצג תגובות",
  "Completed": "הושלם",
  "Conversion": "עברית",
+  "ConversionsHelp": "",
  "Copy": "העתקה",
  "Copy Link": "העתק קישור",
  "Copy Token": "העתק טוקן",
@@ -341,6 +342,7 @@
  "Sticky_Nav": "ניווט דביק",
  "Sticky_Nav_Help": "תמיד הצג את תפריט הניווט בראש העמוד.",
  "SubstituteOnHand": "יש לך תחלופה זמינה.",
+  "Substitutes": "",
  "Success": "הצלחה",
  "SuccessClipboard": "רשימת קניות הועתקה",
  "Sunday": "",
--- a/vue3/src/locales/hu.json
+++ b/vue3/src/locales/hu.json
@@ -49,6 +49,7 @@
  "Comments_setting": "Hozzászólások megjelenítése",
  "Completed": "Kész",
  "Conversion": "Konverzió",
+  "ConversionsHelp": "",
  "Copy": "Másolás",
  "Copy Link": "Link másolása",
  "Copy Token": "Token másolása",
@@ -306,6 +307,7 @@
  "Step_start_time": "A lépés kezdési ideje",
  "Sticky_Nav_Help": "A navigációs menü mindig a képernyő tetején jelenjen meg.",
  "SubstituteOnHand": "Van elérhető helyettesítője.",
+  "Substitutes": "",
  "Success": "Sikeres",
  "SuccessClipboard": "Bevásárlólista a vágólapra másolva",
  "Sunday": "",
--- a/vue3/src/locales/hy.json
+++ b/vue3/src/locales/hy.json
@@ -15,6 +15,7 @@
  "Categories": "",
  "Category": "",
  "Close": "",
+  "ConversionsHelp": "",
  "Copy": "",
  "Create": "Ստեղծել",
  "Create_New_Food": "Ավելացնել նոր սննդամթերք",
@@ -115,6 +116,7 @@
  "SpaceSettings": "",
  "Step": "",
  "Step_start_time": "Քայլի սկսելու ժամանակը",
+  "Substitutes": "",
  "Success": "",
  "Sunday": "",
  "Supermarket": "",
--- a/vue3/src/locales/id.json
+++ b/vue3/src/locales/id.json
@@ -41,6 +41,7 @@
  "Coming_Soon": "",
  "Comments_setting": "",
  "Completed": "",
+  "ConversionsHelp": "",
  "Copy": "Salin",
  "Copy Link": "Salin Tautan",
  "Copy Token": "Salin Token",
@@ -282,6 +283,7 @@
  "Sticky_Nav": "",
  "Sticky_Nav_Help": "",
  "SubstituteOnHand": "",
+  "Substitutes": "",
  "Success": "Sukses",
  "SuccessClipboard": "",
  "Sunday": "",
--- a/vue3/src/locales/is.json
+++ b/vue3/src/locales/is.json
@@ -50,6 +50,7 @@
  "Comments_setting": "",
  "Completed": "",
  "Conversion": "",
+  "ConversionsHelp": "",
  "Copy": "",
  "Copy Link": "",
  "Copy Token": "",
@@ -339,6 +340,7 @@
  "Sticky_Nav": "",
  "Sticky_Nav_Help": "",
  "SubstituteOnHand": "",
+  "Substitutes": "",
  "Success": "",
  "SuccessClipboard": "",
  "Sunday": "",
--- a/vue3/src/locales/it.json
+++ b/vue3/src/locales/it.json
@@ -45,6 +45,7 @@
  "Coming_Soon": "In-Arrivo",
  "Comments_setting": "Mostra commenti",
  "Completed": "Completato",
+  "ConversionsHelp": "",
  "Copy": "Copia",
  "Copy Link": "Copia link",
  "Copy Token": "Copia token",
@@ -291,6 +292,7 @@
  "Sticky_Nav": "Navigazione con menu fissato",
  "Sticky_Nav_Help": "Mostra sempre il menu di navigazione in alto.",
  "SubstituteOnHand": "Hai un sostituto disponibile.",
+  "Substitutes": "",
  "Success": "Riuscito",
  "SuccessClipboard": "Lista della spesa copiata negli appunti",
  "Sunday": "",
--- a/vue3/src/locales/lt.json
+++ b/vue3/src/locales/lt.json
@@ -49,6 +49,7 @@
  "Comments_setting": "",
  "Completed": "",
  "Conversion": "",
+  "ConversionsHelp": "",
  "Copy": "",
  "Copy Link": "",
  "Copy Token": "",
@@ -312,6 +313,7 @@
  "Sticky_Nav": "",
  "Sticky_Nav_Help": "",
  "SubstituteOnHand": "",
+  "Substitutes": "",
  "Success": "",
  "SuccessClipboard": "",
  "Sunday": "",
--- a/vue3/src/locales/nb_NO.json
+++ b/vue3/src/locales/nb_NO.json
@@ -47,6 +47,7 @@
  "Comments_setting": "",
  "Completed": "Fullført",
  "Conversion": "Omregn enhet",
+  "ConversionsHelp": "",
  "Copy": "Kopier",
  "Copy Link": "Kopier lenke",
  "Copy Token": "Kopier Token",
@@ -303,6 +304,7 @@
  "Sticky_Nav": "",
  "Sticky_Nav_Help": "",
  "SubstituteOnHand": "",
+  "Substitutes": "",
  "Success": "Vellykket",
  "SuccessClipboard": "Handleliste kopiert til utklippstavlen",
  "Sunday": "",
--- a/vue3/src/locales/nl.json
+++ b/vue3/src/locales/nl.json
@@ -50,6 +50,7 @@
  "Comments_setting": "Commentaar weergeven",
  "Completed": "Voltooid",
  "Conversion": "Omrekening",
+  "ConversionsHelp": "",
  "Copy": "Kopie",
  "Copy Link": "Kopieer Link",
  "Copy Token": "Kopieer Token",
@@ -307,6 +308,7 @@
  "Sticky_Nav": "Navigatie altijd zichbaar",
  "Sticky_Nav_Help": "Geef navigatiemenu altijd bovenin weer.",
  "SubstituteOnHand": "Je hebt een vervanger op voorraad.",
+  "Substitutes": "",
  "Success": "Succes",
  "SuccessClipboard": "Boodschappenlijst is gekopieerd naar klembord",
  "Sunday": "",
--- a/vue3/src/locales/pl.json
+++ b/vue3/src/locales/pl.json
@@ -51,6 +51,7 @@
  "Comments_setting": "Pokaż komentarze",
  "Completed": "Zakończone",
  "Conversion": "Konwersja",
+  "ConversionsHelp": "",
  "Copy": "Kopiuj",
  "Copy Link": "Skopiuj link",
  "Copy Token": "Kopiuj Token",
@@ -342,6 +343,7 @@
  "Sticky_Nav": "Przyklejona nawigacja",
  "Sticky_Nav_Help": "Zawsze pokazuj menu nawigacyjne u góry ekranu.",
  "SubstituteOnHand": "Masz pod ręką zamienniki.",
+  "Substitutes": "",
  "Success": "Powodzenie",
  "SuccessClipboard": "Lista zakupów skopiowana do schowka",
  "Sunday": "",
--- a/vue3/src/locales/pt.json
+++ b/vue3/src/locales/pt.json
@@ -36,6 +36,7 @@
  "Color": "Cor",
  "Coming_Soon": "",
  "Completed": "Completo",
+  "ConversionsHelp": "",
  "Copy": "Copiar",
  "Copy Link": "Copiar Ligação",
  "Copy Token": "Copiar Chave",
@@ -244,6 +245,7 @@
  "Step_Type": "Tipo do passo",
  "Step_start_time": "Hora de Inicio do passo",
  "SubstituteOnHand": "",
+  "Substitutes": "",
  "Success": "Sucesso",
  "SuccessClipboard": "",
  "Sunday": "",
--- a/vue3/src/locales/pt_BR.json
+++ b/vue3/src/locales/pt_BR.json
@@ -49,6 +49,7 @@
  "Comments_setting": "Mostrar Comentários",
  "Completed": "Finalizado",
  "Conversion": "Conversão",
+  "ConversionsHelp": "",
  "Copy": "Copiar",
  "Copy Link": "Copiar Link",
  "Copy Token": "Copiar Token",
@@ -323,6 +324,7 @@
  "Step_start_time": "Hora de início",
  "Sticky_Nav_Help": "Permitir mostrar o menu de navegação no topo da tela.",
  "SubstituteOnHand": "Você tem um substituto disponível.",
+  "Substitutes": "",
  "Success": "Sucesso",
  "SuccessClipboard": "Lista de compras copiada para área de transferência",
  "Sunday": "",
--- a/vue3/src/locales/ro.json
+++ b/vue3/src/locales/ro.json
@@ -46,6 +46,7 @@
  "Coming_Soon": "În curând",
  "Comments_setting": "Afișează comentarii",
  "Completed": "Completat",
+  "ConversionsHelp": "",
  "Copy": "Copie",
  "Copy Link": "Copiere link",
  "Copy Token": "Copiere token",
@@ -295,6 +296,7 @@
  "Sticky_Nav": "Navigare lipicioasă",
  "Sticky_Nav_Help": "Afișați întotdeauna meniul de navigare din partea de sus a ecranului.",
  "SubstituteOnHand": "Ai un înlocuitor la îndemână.",
+  "Substitutes": "",
  "Success": "Succes",
  "SuccessClipboard": "Lista de cumpărături copiată în clipboard",
  "Sunday": "",
--- a/vue3/src/locales/ru.json
+++ b/vue3/src/locales/ru.json
@@ -31,6 +31,7 @@
  "Color": "Цвет",
  "Coming_Soon": "Скоро",
  "Completed": "Завершено",
+  "ConversionsHelp": "",
  "Copy": "Копировать",
  "Copy_template_reference": "Скопировать ссылку на шаблон",
  "CountMore": "...+{count} больше",
@@ -228,6 +229,7 @@
  "Step_Name": "Имя шага",
  "Step_Type": "Тип шага",
  "Step_start_time": "Время начала шага",
+  "Substitutes": "",
  "Success": "Успешно",
  "Sunday": "",
  "Supermarket": "Супермаркет",
--- a/vue3/src/locales/sl.json
+++ b/vue3/src/locales/sl.json
@@ -32,6 +32,7 @@
  "Color": "Barva",
  "Coming_Soon": "Kmalu",
  "Completed": "Končano",
+  "ConversionsHelp": "",
  "Copy": "Kopiraj",
  "Copy_template_reference": "Kopiraj referenco vzorca",
  "CountMore": "...+{count} več",
@@ -218,6 +219,7 @@
  "Step_Name": "Ime koraka",
  "Step_Type": "Tip koraka",
  "Step_start_time": "Začetni čas koraka",
+  "Substitutes": "",
  "Success": "Uspešno",
  "SuccessClipboard": "Nakupovalni listek je kopiran v odložišče",
  "Sunday": "",
--- a/vue3/src/locales/sv.json
+++ b/vue3/src/locales/sv.json
@@ -51,6 +51,7 @@
  "Comments_setting": "Visa Kommentarer",
  "Completed": "Avslutad",
  "Conversion": "Omvandling",
+  "ConversionsHelp": "",
  "Copy": "Kopiera",
  "Copy Link": "Kopiera Länk",
  "Copy Token": "Kopiera token",
@@ -342,6 +343,7 @@
  "Sticky_Nav": "Fastlåst navigering",
  "Sticky_Nav_Help": "Visa alltid navigeringsmenyn högst upp på skärmen.",
  "SubstituteOnHand": "Du har ett substitut till hands.",
+  "Substitutes": "",
  "Success": "Lyckas",
  "SuccessClipboard": "Inköpslista kopierad till urklipp",
  "Sunday": "",
--- a/vue3/src/locales/tr.json
+++ b/vue3/src/locales/tr.json
@@ -50,6 +50,7 @@
  "Comments_setting": "Yorumları Göster",
  "Completed": "Tamamlandı",
  "Conversion": "Dönüşüm",
+  "ConversionsHelp": "",
  "Copy": "Kopyala",
  "Copy Link": "Bağlantıyı Kopyala",
  "Copy Token": "Anahtarı Kopyala",
@@ -341,6 +342,7 @@
  "Sticky_Nav": "Yapışkan Gezinme Çubuğu",
  "Sticky_Nav_Help": "Gezinme menüsünü her zaman ekranın üst kısmında gösterin.",
  "SubstituteOnHand": "Elinizde bir yedek var.",
+  "Substitutes": "",
  "Success": "Başarılı",
  "SuccessClipboard": "Alışveriş listesi panoya kopyalandı",
  "Sunday": "",
--- a/vue3/src/locales/uk.json
+++ b/vue3/src/locales/uk.json
@@ -40,6 +40,7 @@
  "Color": "Колір",
  "Coming_Soon": "",
  "Completed": "Виконано",
+  "ConversionsHelp": "",
  "Copy": "Копіювати",
  "Copy Link": "Скопіювати Посилання",
  "Copy Token": "Скопіювати Токен",
@@ -265,6 +266,7 @@
  "Step_Type": "Тип Кроку",
  "Step_start_time": "Час початку кроку",
  "SubstituteOnHand": "",
+  "Substitutes": "",
  "Success": "Успішно",
  "SuccessClipboard": "",
  "Sunday": "",
--- a/vue3/src/locales/zh_Hans.json
+++ b/vue3/src/locales/zh_Hans.json
@@ -49,6 +49,7 @@
  "Comments_setting": "显示评论",
  "Completed": "完成",
  "Conversion": "转换",
+  "ConversionsHelp": "",
  "Copy": "复制",
  "Copy Link": "复制链接",
  "Copy Token": "复制令牌",
@@ -335,6 +336,7 @@
  "Sticky_Nav": "粘性导航",
  "Sticky_Nav_Help": "始终在屏幕顶部显示导航菜单。",
  "SubstituteOnHand": "你手头有一个替代品。",
+  "Substitutes": "",
  "Success": "成功",
  "SuccessClipboard": "购物清单已复制到剪贴板",
  "Sunday": "",
--- a/vue3/src/locales/zh_Hant.json
+++ b/vue3/src/locales/zh_Hant.json
@@ -12,6 +12,7 @@
  "Categories": "",
  "Category": "",
  "Close": "",
+  "ConversionsHelp": "",
  "Copy": "",
  "Copy_template_reference": "複製參考模板",
  "Create": "",
@@ -85,6 +86,7 @@
  "SpaceSettings": "",
  "Step": "",
  "Step_start_time": "步驟開始時間",
+  "Substitutes": "",
  "Success": "",
  "Sunday": "",
  "Supermarket": "",
--- a/vue3/src/stores/MessageStore.ts
+++ b/vue3/src/stores/MessageStore.ts
@@ -94,10 +94,10 @@ export const useMessageStore = defineStore('message_store', () => {
        if (preparedMessage == PreparedMessage.UPDATE_SUCCESS) {
            addMessage(MessageType.SUCCESS, 'Updated Successfully', 7000, {}) // TODO localize and make more useful ?
        }
-        if (preparedMessage == PreparedMessage.DELETE_SUCCESS) {
+        if (preparedMessage == PreparedMessage.CREATE_SUCCESS) {
            addMessage(MessageType.SUCCESS, 'Created Successfully', 7000, {})
        }
-        if (preparedMessage == PreparedMessage.CREATE_SUCCESS) {
+        if (preparedMessage == PreparedMessage.DELETE_SUCCESS) {
            addMessage(MessageType.SUCCESS, 'Deleted Successfully', 7000, {})
        }
    }