refactor: code clean up

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

src/components/EventEditor.vue

@@ -49,6 +49,10 @@ const calendarOptions = computed(() =>
   }))
 )
 
+const selectedCalendar = computed(() =>
+  (props.calendars || []).find(calendar => calendar.identifier === selectedCollectionId.value) ?? null
+)
+
 // Permissions
 const isExternalEvent = computed(() => {
   return false
@@ -77,13 +81,12 @@ const cancelEdit = () => {
 }
 
 const saveEntity = async () => {
-  if (!editableEntity.value) {
+  if (!editableEntity.value || !selectedCalendar.value) {
     return
   }
 
   saving.value = true
-  const targetCollection = (props.calendars || []).find(cal => cal.identifier === selectedCollectionId.value)
+  emit('save', editableEntity.value as EntityObject, selectedCalendar.value)
-  emit('save', editableEntity.value as EntityObject, targetCollection || props.collection)
   saving.value = false
 }
 
@@ -127,7 +130,7 @@ watch(
   (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 || ''
+    selectedCollectionId.value = entity?.collection || props.collection?.identifier || ''
   },
   { immediate: true },
 )
@@ -138,7 +141,7 @@ watch(
     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 || ''
+      selectedCollectionId.value = entity.collection || props.collection?.identifier || ''
     }
   },
 )
@@ -194,6 +197,7 @@ watch(
           v-model="selectedCollectionId"
           :items="calendarOptions"
           label="Calendar"
+          :rules="[value => (value !== '' && value != null) || 'Calendar is required']"
           variant="outlined"
           density="compact"
           class="mb-4"
@@ -293,6 +297,7 @@ watch(
         color="primary"
         variant="elevated"
         @click="saveEntity"
+        :disabled="!selectedCalendar"
         :loading="saving">
         Save
       </v-btn>

src/components/TaskEditor.vue

@@ -34,6 +34,7 @@
           v-model="selectedCollectionId"
           :items="listOptions"
           label="Task List"
+          :rules="[value => (value !== '' && value != null) || 'Task list is required']"
           :readonly="!isEditing || !canChangeCollection"
           :variant="isEditing && canChangeCollection ? 'outlined' : 'plain'"
           class="mb-4"
@@ -243,13 +244,13 @@ watch(() => props.entity, (newEntity) => {
     startDate.value = '';
   }
   
-  selectedCollectionId.value = draftEntity.value?.collection || props.collection?.identifier || props.lists[0]?.identifier || '';
+  selectedCollectionId.value = draftEntity.value?.collection || props.collection?.identifier || '';
 }, { immediate: true });
 
 watch(() => props.mode, (newMode) => {
   if (newMode === 'edit' && props.entity) {
     draftEntity.value = cloneEntity(props.entity);
-    selectedCollectionId.value = draftEntity.value?.collection || props.collection?.identifier || props.lists[0]?.identifier || '';
+    selectedCollectionId.value = draftEntity.value?.collection || props.collection?.identifier || '';
   }
 });
 
@@ -260,6 +261,10 @@ const listOptions = computed(() =>
   }))
 );
 
+const selectedTaskList = computed(() =>
+  props.lists.find(list => list.identifier === selectedCollectionId.value) ?? null
+);
+
 const priorityOptions = [
   { title: 'Low', value: 3 },
   { title: 'Medium', value: 2 },
@@ -288,8 +293,9 @@ async function handleSave() {
   const { valid } = await formRef.value.validate();
   if (!valid) return;
 
-  const targetCollection = props.lists.find(list => list.identifier === selectedCollectionId.value);
+  if (!selectedTaskList.value) return;
-  emit('save', editableEntity.value as EntityObject, targetCollection || props.collection);
+
+  emit('save', editableEntity.value as EntityObject, selectedTaskList.value);
 }
 
 function handleCancel() {

src/pages/ChronoPage.vue

@@ -1,4 +1,3 @@
-
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
@@ -72,8 +71,7 @@ const {
   selectSection,
   selectDate,
   selectCollection,
-  openEditCalendar,
+  openCollectionEditor,
-  openEditTaskList,
   createEventFromDate,
   startEditingSelectedEntity,
   cancelEditingSelectedEntity,
@@ -86,8 +84,6 @@ const {
   deleteTask,
   saveCollection,
   deleteCollection,
-  openCreateCalendar,
-  openCreateTaskList,
   openImport,
   closeImport,
 } = chronoUiStore;
@@ -98,35 +94,51 @@ const {
   ensureTasksLoaded,
 } = chronoOperationsStore;
 
-function setCalendarView(view: CalendarViewType) {
-  chronoSettingsStore.calendarView = view;
-}
-
-function setDaysViewSpan(span: DaysViewSpan) {
-  chronoSettingsStore.daysViewSpan = span;
-}
-
-function setAgendaViewSpan(span: AgendaViewSpan) {
-  chronoSettingsStore.agendaViewSpan = span;
-}
-
 const fileInputRef = ref<HTMLInputElement | null>(null)
-function triggerFileInput() { fileInputRef.value?.click() }
+
-async function onFilesSelected(event: Event) {
+watch(() => route.fullPath, async () => {
+  selectSectionFromRoute();
+  if (isTasksSection.value) {
+    await ensureTasksLoaded();
+  }
+});
+
+watch(
+  [calendarView, currentDate, daysViewSpan, agendaViewSpan],
+  () => { loadVisibleRangeOperations(computeVisibleRange()); },
+  { immediate: true },
+);
+
+onMounted(async () => {
+  try {
+    selectSectionFromRoute();
+    await initialize(isTasksSection.value ? 'tasks' : 'calendar');
+  } catch (error) {
+    console.error('[Chrono] - Failed to load data from Chrono Manager:', error);
+  }
+});
+
+function handleImportStart() {
+  fileInputRef.value?.click()
+}
+
+async function handleImportSelect(event: Event) {
   const input = event.target as HTMLInputElement
   const files = Array.from(input.files ?? [])
   input.value = ''
   if (files.length) await openImport(files)
 }
 
-function selectSectionFromRoute() {
+function handleCalendarViewChange(view: CalendarViewType) {
-  const routePath = route.path;
+  chronoSettingsStore.calendarView = view;
-  const section = routePath.endsWith('/tasks') ? 'tasks' : 'calendar';
-  selectSection(section);
 }
 
-function handleCalendarViewChange(view: CalendarViewType) {
+function handleCalendarDaysViewSpanChange(span: DaysViewSpan) {
-  setCalendarView(view);
+  chronoSettingsStore.daysViewSpan = span;
+}
+
+function handleCalendarAgendaViewSpanChange(span: AgendaViewSpan) {
+  chronoSettingsStore.agendaViewSpan = span;
 }
 
 function computeVisibleRange(): EpochSpan {
@@ -141,28 +153,11 @@ function computeVisibleRange(): EpochSpan {
   return daysVisibleRange(currentDate.value, spanToDays(span));
 }
 
-watch(
+function selectSectionFromRoute() {
-  [calendarView, currentDate, daysViewSpan, agendaViewSpan],
+  const routePath = route.path;
-  () => { loadVisibleRangeOperations(computeVisibleRange()); },
+  const section = routePath.endsWith('/tasks') ? 'tasks' : 'calendar';
-  { immediate: true },
+  selectSection(section);
-);
+}
-
-onMounted(async () => {
-  try {
-    selectSectionFromRoute();
-    await initialize(isTasksSection.value ? 'tasks' : 'calendar');
-  } catch (error) {
-    console.error('[Chrono] - Failed to load data from ChronoManager:', error);
-  }
-});
-
-watch(() => route.fullPath, async () => {
-  selectSectionFromRoute();
-  if (isTasksSection.value) {
-    await ensureTasksLoaded();
-  }
-});
-
 </script>
 
 <template>
@@ -218,7 +213,7 @@ watch(() => route.fullPath, async () => {
             :selected-collection="selectedCollection"
             type="calendar"
             @select="selectCollection"
-            @edit="openEditCalendar"
+            @edit="openCollectionEditor('calendar', $event)"
             @toggle-visibility="toggleCalendarVisibility"
           />
           <CollectionList
@@ -227,7 +222,7 @@ watch(() => route.fullPath, async () => {
             :selected-collection="selectedCollection"
             type="tasklist"
             @select="selectCollection"
-            @edit="openEditTaskList"
+            @edit="openCollectionEditor('tasklist', $event)"
           />
           
           <v-btn
@@ -236,7 +231,7 @@ watch(() => route.fullPath, async () => {
             color="primary"
             block
             class="mt-3"
-            @click="openCreateCalendar"
+            @click="openCollectionEditor('calendar')"
           >
             <v-icon start>mdi-plus</v-icon>
             New Calendar
@@ -248,17 +243,17 @@ watch(() => route.fullPath, async () => {
             color="primary"
             block
             class="mt-3"
-            @click="openCreateTaskList"
+            @click="openCollectionEditor('tasklist')"
           >
             <v-icon start>mdi-plus</v-icon>
             New Task List
           </v-btn>
 
           <v-divider class="my-3" />
-          <v-btn variant="text" prepend-icon="mdi-calendar-import" block class="justify-start" @click="triggerFileInput">
+          <v-btn variant="text" prepend-icon="mdi-calendar-import" block class="justify-start" @click="handleImportStart">
             Import iCalendar
           </v-btn>
-          <input ref="fileInputRef" type="file" accept=".ics,text/calendar" multiple class="d-none" @change="onFilesSelected" />
+          <input ref="fileInputRef" type="file" accept=".ics,text/calendar" multiple class="d-none" @change="handleImportSelect" />
 
           <!-- Mini Calendar Widget -->
           <v-card v-if="!isTasksSection" class="mt-4" variant="outlined">
@@ -307,8 +302,8 @@ watch(() => route.fullPath, async () => {
             @event-click="editEvent"
             @date-click="createEventFromDate"
             @update:current-date="selectDate"
-            @update:days-span="setDaysViewSpan"
+            @update:days-span="handleCalendarDaysViewSpanChange"
-            @update:agenda-span="setAgendaViewSpan"
+            @update:agenda-span="handleCalendarAgendaViewSpanChange"
           />
 
           <TaskView

src/stores/chronoUiStore.ts

@@ -39,46 +39,21 @@ export const useChronoUiStore = defineStore('chronoUiStore', () => {
     selectedCollection.value = collection
   }
 
-  function openCollectionEditor(type: 'calendar' | 'tasklist') {
+  function openCollectionEditor(type: 'calendar' | 'tasklist', collection?: CollectionObject) {
-    const collection = new CollectionObject()
+    const target = collection ?? new CollectionObject()
-    collection.properties.fromJson({
+    if (!collection) {
-      ...collection.properties.toJson(),
+      target.properties.fromJson({
-      content: [type === 'calendar' ? 'event' : 'task'],
+        ...target.properties.toJson(),
-    })
+        content: [type === 'calendar' ? 'event' : 'task'],
-    editingCollection.value = collection
+      })
-    collectionEditorMode.value = 'create'
+    }
+
+    editingCollection.value = target
+    collectionEditorMode.value = collection ? 'edit' : 'create'
     collectionEditorType.value = type
     showCollectionEditor.value = true
   }
 
-  function openCreateCalendar() {
-    openCollectionEditor('calendar')
-  }
-
-  function openCreateTaskList() {
-    openCollectionEditor('tasklist')
-  }
-
-  function openEditCalendar(collection: CollectionObject) {
-    editingCollection.value = collection
-    collectionEditorMode.value = 'edit'
-    collectionEditorType.value = 'calendar'
-    showCollectionEditor.value = true
-  }
-
-  function openEditTaskList(collection: CollectionObject) {
-    editingCollection.value = collection
-    collectionEditorMode.value = 'edit'
-    collectionEditorType.value = 'tasklist'
-    showCollectionEditor.value = true
-  }
-
-  function ensureSelectedCollection(type: 'calendar' | 'tasklist'): CollectionObject | null {
-    const candidates = type === 'calendar' ? operationsStore.calendars : operationsStore.taskLists
-    if (!selectedCollection.value && candidates.length > 0) selectedCollection.value = candidates[0]
-    return selectedCollection.value
-  }
-
   function openEntityEditor(entity: EntityObject, type: 'event' | 'task', mode: 'edit' | 'view') {
     selectedEntity.value = entity
     entityEditorMode.value = mode
@@ -87,8 +62,6 @@ export const useChronoUiStore = defineStore('chronoUiStore', () => {
   }
 
   function createEventFromDate(date?: Date) {
-    if (!ensureSelectedCollection('calendar')) return
-
     const entity = new EntityObject()
     entity.properties = new EventObject()
     if (date) {
@@ -107,8 +80,6 @@ export const useChronoUiStore = defineStore('chronoUiStore', () => {
   }
 
   function createTask() {
-    if (!ensureSelectedCollection('tasklist')) return
-
     const entity = new EntityObject()
     entity.properties = new TaskObject()
     openEntityEditor(entity, 'task', 'edit')
@@ -217,10 +188,7 @@ export const useChronoUiStore = defineStore('chronoUiStore', () => {
     selectSection,
     selectDate,
     selectCollection,
-    openCreateCalendar,
+    openCollectionEditor,
-    openCreateTaskList,
-    openEditCalendar,
-    openEditTaskList,
     createEvent,
     editEvent,
     createTask,