various little fixes

vue3/src/apps/tandoor/Tandoor.vue

@@ -146,7 +146,7 @@
                     <v-list-item prepend-icon="fas fa-sliders" :title="$t('Settings')" :to="{ name: 'SettingsPage', params: {} }"></v-list-item>
                     <v-list-item prepend-icon="fa-solid fa-heart" link>
                         Tandoor {{ useUserPreferenceStore().serverSettings.version }}
-                         <help-dialog></help-dialog>
+                        <help-dialog></help-dialog>
                     </v-list-item>
                 </v-list>
             </template>
@@ -268,6 +268,11 @@ onMounted(() => {
         background-color: #b98766 !important;
     }
 
+    /* vueform/multiselect */
+
+    .multiselect-dropdown {
+        background: #212121 !important;
+    }
 }
 
 .v-theme--light {
@@ -295,10 +300,6 @@ onMounted(() => {
 
 /* vueform/multiselect */
 
-.multiselect-dropdown {
-    background: #212121 !important;
-}
-
 .multiselect-option.is-pointed {
     background: #b98766 !important;
 }

vue3/src/components/dialogs/ShoppingLineItemDialog.vue

@@ -6,7 +6,7 @@
             <v-card-text class="pt-0 pr-4 pl-4">
 
                 <v-label>{{ $t('Choose_Category') }}</v-label>
-                <model-select model="SupermarketCategory" @update:modelValue="categoryUpdate"></model-select>
+                <model-select model="SupermarketCategory" @update:modelValue="categoryUpdate" allow-create></model-select>
 
                 <v-row>
                     <v-col class="pr-0">

vue3/src/components/dialogs/VClosableCardTitle.vue

@@ -1,7 +1,7 @@
 <template>
     <v-card-title class="pb-1 pt-1 pl-1 pr-1">
-        <v-row align="center">
-            <v-col cols="10" md="11" class="text-truncate pt-0 pb-0">
+        <v-row no-gutters align="center">
+            <v-col cols="10" md="11" class="text-truncate pt-0 pb-0 pl-2">
                 <slot name="content">
                     <i :class="props.icon" v-if="props.icon != ''"></i>
                     {{ props.title }}

vue3/src/components/display/RecipeView.vue

@@ -25,7 +25,7 @@
                     <span class="ps-2 text-h5  flex-grow-1 pa-1" :class="{'text-truncate': !showFullRecipeName}" @click="showFullRecipeName = !showFullRecipeName">
                         {{ recipe.name }}
                     </span>
-                        <recipe-context-menu :recipe="recipe"></recipe-context-menu>
+                        <recipe-context-menu :recipe="recipe" v-if="useUserPreferenceStore().isAuthenticated"></recipe-context-menu>
                     </v-sheet>
                     <keywords-component variant="flat" class="ms-1 mb-2" :keywords="recipe.keywords"></keywords-component>
                     <v-sheet class="ps-2 text-disabled">
@@ -75,7 +75,7 @@
                         <v-card-text class="flex-grow-1">
                             <div class="d-flex">
                                 <h1 class="flex-column flex-grow-1">{{ recipe.name }}</h1>
-                                <recipe-context-menu :recipe="recipe" class="flex-column mb-auto mt-2 float-right"></recipe-context-menu>
+                                <recipe-context-menu :recipe="recipe" v-if="useUserPreferenceStore().isAuthenticated" class="flex-column mb-auto mt-2 float-right"></recipe-context-menu>
                             </div>
                             <p>
                                 {{ $t('created_by') }} {{ recipe.createdBy.displayName }} ({{ DateTime.fromJSDate(recipe.createdAt).toLocaleString(DateTime.DATE_SHORT) }})

vue3/src/components/inputs/ModelSelect.vue

@@ -18,7 +18,7 @@
             :on-create="createObject"
             :createOption="props.allowCreate"
             :delay="300"
-            :object="true"
+            :object="props.object"
             :valueProp="itemValue"
             :label="itemLabel"
             :searchable="true"
@@ -92,7 +92,7 @@ const props = defineProps({
 
     mode: {type: String as PropType<'single' | 'multiple' | 'tags'>, default: 'single'},
     appendToBody: {type: Boolean, default: false},
-    //object: {type: Boolean, default: true}, // TODO broken either fix or finally get other multiselect working
+    object: {type: Boolean, default: true}, // TODO broken either fix or finally get other multiselect working
 
     allowCreate: {type: Boolean, default: false},
     placeholder: {type: String, default: undefined},

vue3/src/components/model_editors/AccessTokenEditor.vue

@@ -30,8 +30,8 @@
 <script setup lang="ts">
 
 import {VDateInput} from 'vuetify/labs/VDateInput' //TODO remove once component is out of labs
-import {onMounted, PropType} from "vue";
-import {AccessToken} from "@/openapi";
+import {onMounted, PropType, watch} from "vue";
+import {AccessToken, ApiApi} from "@/openapi";
 
 import {DateTime} from "luxon";
 import BtnCopy from "@/components/buttons/BtnCopy.vue";
@@ -49,8 +49,22 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<AccessToken>('AccessToken', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
 
 onMounted(() => {
+    initializeEditor()
+})
+
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
     setupState(props.item, props.itemId, {
         newItemFunction: () => {
             editingObj.value.expires = DateTime.now().plus({year: 1}).toJSDate()
@@ -58,7 +72,7 @@ onMounted(() => {
         },
         itemDefaults: props.itemDefaults
     })
-})
+}
 
 </script>
 

vue3/src/components/model_editors/AutomationEditor.vue

@@ -31,7 +31,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType} from "vue";
+import {onMounted, PropType, watch} from "vue";
 import {Automation} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
@@ -60,6 +60,14 @@ const {
     applyItemDefaults
 } = useModelEditorFunctions<Automation>('Automation', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
 // object specific data (for selects/display)
 
 const AUTOMATION_TYPES = [
@@ -76,6 +84,13 @@ const AUTOMATION_TYPES = [
 ]
 
 onMounted(() => {
+    initializeEditor()
+})
+
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
     setupState(props.item, props.itemId, {
         newItemFunction: () => {
             editingObj.value.order = 0
@@ -84,7 +99,7 @@ onMounted(() => {
         },
         itemDefaults: props.itemDefaults
     })
-})
+}
 
 </script>
 

vue3/src/components/model_editors/ConnectorConfigEditor.vue

@@ -36,7 +36,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType} from "vue";
+import {onMounted, PropType, watch} from "vue";
 import {ConnectorConfig} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
@@ -61,12 +61,27 @@ const {
     modelClass
 } = useModelEditorFunctions<ConnectorConfig>('ConnectorConfig', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
 // object specific data (for selects/display)
 
 onMounted(() => {
-    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+    initializeEditor()
 })
 
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
+    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+}
+
 </script>
 
 <style scoped>

vue3/src/components/model_editors/CustomFilterEditor.vue

@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType} from "vue";
+import {onMounted, PropType, watch} from "vue";
 import {CustomFilter} from "@/openapi";
 
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
@@ -35,11 +35,27 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<CustomFilter>('CustomFilter', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
+// object specific data (for selects/display)
 
 onMounted(() => {
-    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+    initializeEditor()
 })
 
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
+    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+}
+
 </script>
 
 <style scoped>

vue3/src/components/model_editors/FoodEditor.vue

@@ -148,6 +148,7 @@ 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";
+import {DateTime} from "luxon";
 
 
 const props = defineProps({
@@ -160,6 +161,13 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Food>('Food', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
 
 // object specific data (for selects/display)
 
@@ -192,8 +200,14 @@ const stopConversionsWatcher = watch(tab, (value, oldValue, onCleanup) => {
     }
 })
 
-
 onMounted(() => {
+    initializeEditor()
+})
+
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
     setupState(props.item, props.itemId, {
         newItemFunction: () => {
             editingObj.value.propertiesFoodAmount = 100
@@ -201,7 +215,7 @@ onMounted(() => {
         },
         itemDefaults: props.itemDefaults,
     })
-})
+}
 
 
 /**

vue3/src/components/model_editors/InviteLinkEditor.vue

@@ -25,7 +25,7 @@
 <script setup lang="ts">
 
 import {VDateInput} from 'vuetify/labs/VDateInput' //TODO remove once component is out of labs
-import {onMounted, PropType, ref} from "vue";
+import {onMounted, PropType, ref, watch} from "vue";
 import {ApiApi, Group, InviteLink} from "@/openapi";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 import {DateTime} from "luxon";
@@ -43,11 +43,26 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<InviteLink>('InviteLink', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
 // object specific data (for selects/display)
 const groups = ref([] as Group[])
 
 onMounted(() => {
-    const api = new ApiApi()
+    initializeEditor()
+})
+
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
+     const api = new ApiApi()
 
     api.apiGroupList().then(r => {
         groups.value = r
@@ -63,8 +78,7 @@ onMounted(() => {
     }).catch(err => {
         useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
     })
-})
-
+}
 </script>
 
 <style scoped>

vue3/src/components/model_editors/KeywordEditor.vue

@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType} from "vue";
+import {onMounted, PropType, watch} from "vue";
 import {Keyword} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
@@ -38,12 +38,27 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Keyword>('Keyword', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
 // object specific data (for selects/display)
 
 onMounted(() => {
-    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+    initializeEditor()
 })
 
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
+    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+}
+
 </script>
 
 <style scoped>

vue3/src/components/model_editors/MealPlanEditor.vue

@@ -100,7 +100,7 @@
 
 <script setup lang="ts">
 
-import {nextTick, onMounted, PropType, ref, toRaw} from "vue";
+import {nextTick, onMounted, PropType, ref, toRaw, watch} from "vue";
 import {ApiApi, MealPlan, MealType, ShoppingListRecipe} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
@@ -139,12 +139,27 @@ const {
     modelClass
 } = useModelEditorFunctions<MealPlan>('MealPlan', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
 // object specific data (for selects/display)
 const tab = ref('plan')
 
 const dateRangeValue = ref([] as Date[])
 
 onMounted(() => {
+    initializeEditor()
+})
+
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
     const api = new ApiApi()
 
     // load meal types and create new object based on default type when initially loading
@@ -190,7 +205,7 @@ onMounted(() => {
             }
         },)
     })
-})
+}
 
 /**
  * update the editing object with data from the date range selector whenever its changed (could probably be a watcher)

vue3/src/components/model_editors/MealTypeEditor.vue

@@ -41,7 +41,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType, ref} from "vue";
+import {onMounted, PropType, ref, watch} from "vue";
 import {MealType} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
@@ -56,14 +56,29 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<MealType>('MealType', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
+
 // object specific data (for selects/display)
 const timePickerMenu = ref(false)
 
-
 onMounted(() => {
-    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+    initializeEditor()
 })
 
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
+    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+}
+
 </script>
 
 <style scoped>

vue3/src/components/model_editors/PropertyEditor.vue

@@ -25,7 +25,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType} from "vue";
+import {onMounted, PropType, watch} from "vue";
 import {Property} from "@/openapi";
 
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
@@ -44,11 +44,27 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Property>('Property', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
+// object specific data (for selects/display)
 
 onMounted(() => {
-    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+    initializeEditor()
 })
 
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
+    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+}
+
 
 </script>
 

vue3/src/components/model_editors/PropertyTypeEditor.vue

@@ -27,7 +27,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType, ref} from "vue";
+import {onMounted, PropType, ref, watch} from "vue";
 import {PropertyType} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
@@ -53,12 +53,27 @@ const {
     modelClass
 } = useModelEditorFunctions<PropertyType>('PropertyType', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
 // object specific data (for selects/display)
 
 onMounted(() => {
-    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+    initializeEditor()
 })
 
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
+    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+}
+
 </script>
 
 <style scoped>

vue3/src/components/model_editors/RecipeBookEditor.vue

@@ -58,7 +58,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType, ref} from "vue";
+import {onMounted, PropType, ref, watch} from "vue";
 import {ApiApi, Recipe, RecipeBook, RecipeBookEntry, User} from "@/openapi";
 import {VDataTableUpdateOptions} from "@/vuetify";
 
@@ -79,6 +79,14 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<RecipeBook>('RecipeBook', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
 const {t} = useI18n()
 const tab = ref("book")
 const recipeBookEntries = ref([] as RecipeBookEntry[])
@@ -94,6 +102,13 @@ const tableHeaders = [
 ]
 
 onMounted(() => {
+    initializeEditor()
+})
+
+/**
+ * component specific state setup logic
+ */
+function initializeEditor() {
     setupState(props.item, props.itemId, {
         newItemFunction: () => {
             editingObj.value.shared = [] as User[]
@@ -104,7 +119,7 @@ onMounted(() => {
         },
         itemDefaults: props.itemDefaults
     })
-})
+}
 
 /**
  * add selected recipe into the book and client list
@@ -116,12 +131,12 @@ function addRecipeToBook() {
         let duplicateFound = false
 
         recipeBookEntries.value.forEach(rBE => {
-            if (rBE.recipe == selectedRecipe.value.id){
+            if (rBE.recipe == selectedRecipe.value.id) {
                 duplicateFound = true
             }
         })
 
-        if (!duplicateFound){
+        if (!duplicateFound) {
             api.apiRecipeBookEntryCreate({recipeBookEntry: {book: editingObj.value.id!, recipe: selectedRecipe.value.id!}}).then(r => {
                 recipeBookEntries.value.push(r)
                 selectedRecipe.value = {} as Recipe

vue3/src/components/model_editors/RecipeEditor.vue

@@ -137,7 +137,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType, ref, shallowRef} from "vue";
+import {onMounted, PropType, ref, shallowRef, watch} from "vue";
 import {Ingredient, Recipe, Step} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
@@ -164,6 +164,14 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Recipe>('Recipe', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
 // object specific data (for selects/display)
 const {mobile} = useDisplay()
 
@@ -174,6 +182,13 @@ const {fileApiLoading, updateRecipeImage} = useFileApi()
 const file = shallowRef<File | null>(null)
 
 onMounted(() => {
+    initializeEditor()
+})
+
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
     setupState(props.item, props.itemId, {
         newItemFunction: () => {
             editingObj.value.steps = [] as Step[]
@@ -181,7 +196,7 @@ onMounted(() => {
         },
         itemDefaults: props.itemDefaults,
     })
-})
+}
 
 /**
  * save recipe via normal saveMethod and update image afterward if it was changed

vue3/src/components/model_editors/ShoppingListEntryEditor.vue

@@ -33,7 +33,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType} from "vue";
+import {onMounted, PropType, watch} from "vue";
 import {ShoppingListEntry} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
@@ -49,12 +49,27 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<ShoppingListEntry>('ShoppingListEntry', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
 // object specific data (for selects/display)
 
 onMounted(() => {
-    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+    initializeEditor()
 })
 
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
+    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+}
+
 </script>
 
 <style scoped>

vue3/src/components/model_editors/StorageEditor.vue

@@ -32,7 +32,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType} from "vue";
+import {onMounted, PropType, watch} from "vue";
 import { Storage } from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
@@ -47,12 +47,27 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Storage>('Storage', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
 // object specific data (for selects/display)
 
 onMounted(() => {
-    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+    initializeEditor()
 })
 
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
+    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+}
+
 </script>
 
 <style scoped>

vue3/src/components/model_editors/SupermarketCategoryEditor.vue

@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType} from "vue";
+import {onMounted, PropType, watch} from "vue";
 import {SupermarketCategory} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
@@ -40,12 +40,27 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<SupermarketCategory>('SupermarketCategory', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
 // object specific data (for selects/display)
 
 onMounted(() => {
-    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+    initializeEditor()
 })
 
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
+    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+}
+
 </script>
 
 <style scoped>

vue3/src/components/model_editors/SupermarketEditor.vue

@@ -103,7 +103,7 @@
 
 <script setup lang="ts">
 
-import {computed, onMounted, PropType, ref} from "vue";
+import {computed, onMounted, PropType, ref, watch} from "vue";
 import {ApiApi, Supermarket, SupermarketCategory, SupermarketCategoryRelation} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
@@ -121,6 +121,14 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Supermarket>('Supermarket', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
 // object specific data (for selects/display)
 const tab = ref("supermarket")
 
@@ -148,6 +156,13 @@ const unusedSupermarketCategories = computed(() => {
 })
 
 onMounted(() => {
+    initializeEditor()
+})
+
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
     const api = new ApiApi()
 
     api.apiSupermarketCategoryList({pageSize: 100}).then(r => {
@@ -161,7 +176,7 @@ onMounted(() => {
             itemDefaults: props.itemDefaults,
         })
     })
-})
+}
 
 /**
  * called whenever something in the list is moved to track the last moved element (to be used in add/remove functions)

vue3/src/components/model_editors/SyncEditor.vue

@@ -26,7 +26,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType} from "vue";
+import {onMounted, PropType, watch} from "vue";
 import { Sync} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
@@ -42,12 +42,27 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Sync>('Sync', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
 // object specific data (for selects/display)
 
 onMounted(() => {
-    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+    initializeEditor()
 })
 
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
+    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+}
+
 </script>
 
 <style scoped>

vue3/src/components/model_editors/UnitConversionEditor.vue

@@ -47,7 +47,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType} from "vue";
+import {onMounted, PropType, watch} from "vue";
 import {UnitConversion} from "@/openapi";
 
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
@@ -64,11 +64,27 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<UnitConversion>('UnitConversion', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
+// object specific data (for selects/display)
 
 onMounted(() => {
-    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+    initializeEditor()
 })
 
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
+    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+}
+
 </script>
 
 <style scoped>

vue3/src/components/model_editors/UnitEditor.vue

@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType} from "vue";
+import {onMounted, PropType, watch} from "vue";
 import {Unit} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
@@ -41,6 +41,13 @@ const props = defineProps({
 
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Unit>('Unit', emit)
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
 
 // object specific data (for selects/display)
 
@@ -67,9 +74,16 @@ const BASE_UNITS = [
 ]
 
 onMounted(() => {
-    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+    initializeEditor()
 })
 
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
+    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+}
+
 </script>
 
 <style scoped>

vue3/src/components/model_editors/UserFileEditor.vue

@@ -47,7 +47,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType, shallowRef} from "vue";
+import {onMounted, PropType, shallowRef, watch} from "vue";
 import {UserFile, UserSpace} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
@@ -66,15 +66,30 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<UserFile>('UserFile', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
 // object specific data (for selects/display)
 
 const {fileApiLoading, createOrUpdateUserFile} = useFileApi()
 const file = shallowRef<File | null>(null)
 
 onMounted(() => {
-    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+    initializeEditor()
 })
 
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
+    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
+}
+
 /**
  * save file to database via fileApi composable
  */

vue3/src/components/model_editors/UserSpaceEditor.vue

@@ -21,7 +21,7 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType, ref} from "vue";
+import {onMounted, PropType, ref, watch} from "vue";
 import {ApiApi, Group, UserSpace} from "@/openapi";
 
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
@@ -39,10 +39,25 @@ const props = defineProps({
 const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<UserSpace>('UserSpace', emit)
 
+/**
+ * watch prop changes and re-initialize editor
+ * required to embed editor directly into pages and be able to change item from the outside
+ */
+watch([() => props.item, () => props.itemId], () => {
+    initializeEditor()
+})
+
 // object specific data (for selects/display)
 const groups = ref([] as Group[])
 
 onMounted(() => {
+    initializeEditor()
+})
+
+/**
+ * component specific state setup logic
+ */
+function initializeEditor(){
     const api = new ApiApi()
     api.apiGroupList().then(r => {
         groups.value = r
@@ -51,8 +66,7 @@ onMounted(() => {
     })
 
     setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
-})
-
+}
 
 </script>