feat: use module store

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/components/EventEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import type { CollectionObject } from '@ChronoManager/models/collection'
 import type { EntityObject } from '@ChronoManager/models/entity'
 import type { EventObject } from '@ChronoManager/models/event'
@@ -25,20 +25,22 @@ const emit = defineEmits<{
   'edit': []
   'cancel': []
   'close': []
-  'save': [entity: any, collection?: any]
-  'delete': [entity: any, collection?: any]
+  'save': [entity: EntityObject, collection?: CollectionObject | null]
+  'delete': [entity: EntityObject, collection?: CollectionObject | null]
 }>()
 
 // State
 const loading = ref(false)
 const saving = ref(false)
-const selectedCollectionId = ref(props.entity?.collection || props.collection?.identifier || props.calendars?.[0]?.identifier || '')
+const initialEntity = props.entity as EntityObject | null
+const draftEntity = ref<EntityObject | null>(initialEntity?.clone ? initialEntity.clone() : null)
+const selectedCollectionId = ref<string | number>('')
 
 // Computed
 const mode = computed(() => props.mode)
-const entity = computed(() => props.entity || null)
-const entityObject = computed(() => entity.value?.properties as EventObject ?? null)
-const entityFresh = computed(() => !entity.value?.identifier)
+const editableEntity = computed(() => draftEntity.value)
+const entityObject = computed(() => editableEntity.value?.properties as EventObject ?? null)
+const entityFresh = computed(() => !editableEntity.value?.identifier)
 
 const calendarOptions = computed(() => 
   (props.calendars || []).map(cal => ({
@@ -69,50 +71,77 @@ const startEdit = () => {
 }
 
 const cancelEdit = () => {
+  const entity = props.entity as EntityObject | null
+  draftEntity.value = entity?.clone ? entity.clone() : null
   emit('cancel')
 }
 
 const saveEntity = async () => {
+  if (!editableEntity.value) {
+    return
+  }
+
   saving.value = true
   const targetCollection = (props.calendars || []).find(cal => cal.identifier === selectedCollectionId.value)
-  emit('save', entity.value!, targetCollection || props.collection)
+  emit('save', editableEntity.value as EntityObject, targetCollection || props.collection)
   saving.value = false
 }
 
 // Location management
 const addLocationPhysical = () => {
-  (entityObject.value as any)?.addLocationPhysical()
+  entityObject.value?.addLocationPhysical()
 }
 
 const removeLocationPhysical = (key: string) => {
-  (entityObject.value as any)?.removeLocationPhysical(key)
+  entityObject.value?.removeLocationPhysical(key)
 }
 
 const addLocationVirtual = () => {
-  (entityObject.value as any)?.addLocationVirtual()
+  entityObject.value?.addLocationVirtual()
 }
 
 const removeLocationVirtual = (key: string) => {
-  (entityObject.value as any)?.removeLocationVirtual(key)
+  entityObject.value?.removeLocationVirtual(key)
 }
 
 // Participant management
 const addParticipant = () => {
-  (entityObject.value as any)?.addParticipant()
+  entityObject.value?.addParticipant()
 }
 
 const removeParticipant = (key: string) => {
-  (entityObject.value as any)?.removeParticipant(key)
+  entityObject.value?.removeParticipant(key)
 }
 
 // Notification management
 const addNotification = () => {
-  (entityObject.value as any)?.addNotification()
+  entityObject.value?.addNotification()
 }
 
 const removeNotification = (key: string) => {
-  (entityObject.value as any)?.removeNotification(key)
+  entityObject.value?.removeNotification(key)
 }
+
+watch(
+  () => props.entity,
+  (newEntity) => {
+    const entity = newEntity as EntityObject | null
+    draftEntity.value = entity?.clone ? entity.clone() : null
+    selectedCollectionId.value = entity?.collection || props.collection?.identifier || props.calendars?.[0]?.identifier || ''
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.mode,
+  (newMode) => {
+    const entity = props.entity as EntityObject | null
+    if (newMode === 'edit' && entity?.clone) {
+      draftEntity.value = entity.clone()
+      selectedCollectionId.value = entity.collection || props.collection?.identifier || props.calendars?.[0]?.identifier || ''
+    }
+  },
+)
 </script>
 
 <template>
@@ -123,7 +152,7 @@ const removeNotification = (key: string) => {
         {{ entityObject?.label || 'Nothing Selected' }}
       </div>
 
-      <div v-if="!loading && entity">
+      <div v-if="!loading && editableEntity">
         <v-btn 
           v-if="mode === 'view' && canEdit"
           icon="mdi-pencil"
@@ -138,7 +167,7 @@ const removeNotification = (key: string) => {
           size="small"
           variant="text"
           color="error"
-          @click="emit('delete', entity!, collection)"
+          @click="emit('delete', editableEntity as EntityObject, collection)"
         />
 
         <v-btn
@@ -154,14 +183,14 @@ const removeNotification = (key: string) => {
       <v-divider />
       <v-progress-linear v-if="loading" indeterminate color="primary" />
 
-      <div v-if="!entity" class="text-center pa-8">
+      <div v-if="!editableEntity" class="text-center pa-8">
         <v-icon icon="mdi-calendar-blank" size="64" color="grey" class="mb-4" />
         <p class="text-h6 text-grey">Select an event to view details</p>
       </div>
 
       <div v-else class="pa-4">
         <v-select
-          v-if="mode === 'edit' && !entity.identifier"
+          v-if="mode === 'edit' && !editableEntity?.identifier"
           v-model="selectedCollectionId"
           :items="calendarOptions"
           label="Calendar"