feat: import

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
2026-06-28 18:06:45 -04:00
parent 6657b8a0db
commit ee9495487e
3 changed files with 119 additions and 1 deletions
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useImportStore } from '@ChronoManager/stores/importStore'
+import { CollectionObject } from '@ChronoManager/models/collection'
+
+const props = defineProps<{ modelValue: boolean; collections: CollectionObject[] }>()
+const emit = defineEmits<{ 'update:modelValue': [value: boolean]; close: [refresh: boolean] }>()
+const importStore = useImportStore()
+const { files, sessions, order, stage, running, totals } = storeToRefs(importStore)
+
+const collectionOptions = computed(() => props.collections.map(collection => ({ title: collection.properties.label || 'Unnamed', value: collection.identifier })))
+const selecting = computed(() => stage.value === 'selecting')
+const complete = computed(() => stage.value === 'completed' || stage.value === 'error')
+const canImport = computed(() => files.value.length > 0 && files.value.every(entry => entry.collectionId !== null))
+const progress = computed(() => totals.value.discovered ? Math.min(100, Math.round(totals.value.processed / totals.value.discovered * 100)) : 0)
+const counters = computed(() => [
+  { key: 'discovered', label: 'Discovered', value: totals.value.discovered, color: 'info' },
+  { key: 'created', label: 'Created', value: totals.value.created, color: 'success' },
+  { key: 'updated', label: 'Updated', value: totals.value.updated, color: 'info' },
+  { key: 'exists', label: 'Skipped', value: totals.value.exists, color: 'warning' },
+  { key: 'error', label: 'Errors', value: totals.value.error, color: 'error' },
+])
+
+async function startImport() { try { await importStore.startImport() } catch (error) { console.error('[Chrono] - Import failed:', error) } }
+function cancel() { emit('update:modelValue', false); emit('close', false) }
+function done() { emit('update:modelValue', false); emit('close', totals.value.created > 0 || totals.value.updated > 0) }
+</script>
+
+<template>
+  <v-dialog :model-value="modelValue" max-width="640" persistent scrollable>
+    <v-card>
+      <v-card-title class="d-flex align-center"><v-icon icon="mdi-calendar-import" class="mr-2" />Import iCalendar Data</v-card-title>
+      <v-divider />
+      <v-card-text v-if="selecting" class="pt-4">
+        <p class="text-body-2 text-medium-emphasis mb-4">Choose a destination collection for each iCalendar file. Events, tasks, and journals are supported.</p>
+        <v-card v-for="entry in files" :key="entry.file.id" variant="tonal" class="mb-3 pa-3">
+          <div class="d-flex align-center mb-2"><v-icon icon="mdi-calendar-blank-outline" size="small" class="mr-2" /><span class="text-subtitle-2 text-truncate">{{ entry.file.name }}</span></div>
+          <v-select
+            :model-value="entry.collectionId" :items="collectionOptions" label="Calendar or task list"
+            density="compact" variant="outlined" hide-details
+            @update:model-value="importStore.setCollectionForFile(entry.file.id, $event)"
+          />
+        </v-card>
+      </v-card-text>
+      <v-card-text v-else class="pt-4">
+        <div class="d-flex justify-space-between mb-1"><span>{{ complete ? 'Import complete' : 'Importing…' }}</span><span class="text-medium-emphasis">{{ totals.processed }} / {{ totals.discovered }}</span></div>
+        <v-progress-linear :model-value="progress" :indeterminate="running && totals.discovered === 0" color="primary" height="8" rounded class="mb-4" />
+        <div class="d-flex flex-wrap ga-2"><v-chip v-for="counter in counters" :key="counter.key" :color="counter.color" size="small" variant="tonal">{{ counter.label }}: {{ counter.value }}</v-chip></div>
+        <v-list v-if="order.length > 1" density="compact" class="mt-3 bg-transparent">
+          <v-list-item v-for="id in order" :key="id" :title="sessions[id]?.fileName" :subtitle="sessions[id]?.lastError ?? undefined">
+            <template #append><span class="text-caption">{{ sessions[id]?.counters.processed }} / {{ sessions[id]?.counters.discovered }}</span></template>
+          </v-list-item>
+        </v-list>
+      </v-card-text>
+      <v-divider />
+      <v-card-actions><v-spacer />
+        <template v-if="selecting"><v-btn variant="text" @click="cancel">Cancel</v-btn><v-btn color="primary" variant="flat" :disabled="!canImport" @click="startImport">Import</v-btn></template>
+        <v-btn v-else color="primary" variant="flat" :disabled="running" @click="done">Close</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>