new model editor activators

vue3/src/components/dialogs/ModelEditDialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-dialog max-width="1400" activator="parent" v-model="dialog">
+    <v-dialog max-width="1400" :activator="activator" v-model="dialog">
         <component :is="editorComponent" :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false"></component>
     </v-dialog>
 </template>
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 
 
-import {defineAsyncComponent, PropType, ref, shallowRef} from "vue";
+import {defineAsyncComponent, PropType, ref, shallowRef, watch} from "vue";
 import {EditorSupportedModels, getGenericModelFromString} from "@/types/Models";
 import {useI18n} from "vue-i18n";
 
@@ -17,6 +17,7 @@ const emit = defineEmits(['create', 'save', 'delete'])
 
 const props = defineProps({
     model: { type: String as PropType<EditorSupportedModels>, required: true, },
+    activator: {default: 'parent'},
     item: {default: null},
     disabledFields: {default: []},
     closeAfterCreate: {default: true},
@@ -27,6 +28,21 @@ const props = defineProps({
 const editorComponent = shallowRef(defineAsyncComponent(() => import(`@/components/model_editors/${getGenericModelFromString(props.model, t).model.name}Editor.vue`)))
 
 const dialog = ref(false)
+const model = defineModel<Boolean>({default: false})
+
+/**
+ * Allow opening the model edit dialog trough v-model property of the dialog by watching for model changes
+ */
+watch(model, (value, oldValue, onCleanup) => {
+    console.log('model changed to ', value)
+    dialog.value = !!value
+})
+
+watch(dialog, (value, oldValue, onCleanup) => {
+    console.log('dialog changed to ', value)
+    model.value = !!value
+})
+
 
 function createEvent(arg: any) {
     emit('create', arg)

vue3/src/components/display/MealPlanView.vue

@@ -8,7 +8,7 @@
                 :item-content-height="calendarItemHeight"
                 :enable-drag-drop="true"
                 @dropOnDate="dropCalendarItemOnDate"
-                @click-date="">
+                @click-date="newPlanDialog = true">
                 <template #header="{ headerProps }">
                     <CalendarViewHeader :header-props="headerProps"/>
                 </template>
@@ -23,6 +23,8 @@
                     ></meal-plan-calendar-item>
                 </template>
             </CalendarView>
+
+            <model-edit-dialog model="MealPlan" v-model="newPlanDialog"></model-edit-dialog>
         </v-col>
     </v-row>
 </template>
@@ -36,7 +38,7 @@ import "vue-simple-calendar/dist/css/default.css"
 
 import MealPlanCalendarItem from "@/components/display/MealPlanCalendarItem.vue";
 import {IMealPlanCalendarItem, IMealPlanNormalizedCalendarItem} from "@/types/MealPlan";
-import {computed, onMounted, ref} from "vue";
+import {computed, nextTick, onMounted, ref, useTemplateRef} from "vue";
 import {DateTime} from "luxon";
 import {useDisplay} from "vuetify";
 import {useMealPlanStore} from "@/stores/MealPlanStore";
@@ -46,7 +48,9 @@ import {MealPlan} from "@/openapi";
 const {lgAndUp} = useDisplay()
 
 const currentlyDraggedMealplan = ref({} as IMealPlanNormalizedCalendarItem)
-const clickedMealPlan = ref({} as IMealPlanNormalizedCalendarItem)
+
+const newPlanDialog = ref(false)
+
 /**
  * computed property that converts array of MealPlan object to
  * array of CalendarItems (format required/extended from vue-simple-calendar)

vue3/src/pages/TestPage.vue

@@ -1,22 +1,38 @@
 <template>
     <v-file-input label="File input" v-model="image"></v-file-input>
-
-
     <v-btn @click="imageToRecipe()">Upload</v-btn>
-
-
     <v-textarea v-model="response"></v-textarea>
+
+    <hr class="mt-4">
+    <v-btn ref="dialogOpenerRef">REF</v-btn>
+    <v-btn @click="dialog = !dialog">model</v-btn>
+
+    <v-btn>
+        direct
+        <model-edit-dialog model="MealPlan" v-model="dialog" :item="defaultItem" :activator="activator"></model-edit-dialog>
+    </v-btn>
+
 </template>
 
 <script setup lang="ts">
 
 
-import {ApiApi} from "@/openapi";
-import {ref} from "vue";
+import {ApiApi, MealPlan} from "@/openapi";
+import {ref, useTemplateRef} from "vue";
+import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
+import {DateTime} from "luxon";
 
 const image = ref(File)
 const response = ref('')
 
+const dialog = ref(false)
+const activator = useTemplateRef<Element>('dialogOpenerRef')
+
+const defaultItem = ref({
+    fromDate: DateTime.now().plus({day: 2}).toJSDate()
+} as MealPlan)
+
+
 function imageToRecipe() {
     const api = new ApiApi()