fixup! fix: calendar import

Signed-off-by: SebastianKrupinski <krupinskis05@gmail.com>

Author: SebastianKrupinski

src/components/AppNavigation/Settings.vue

@@ -277,10 +277,6 @@ export default {
 			return isAfterVersion(34)
 		},
 
-		files() {
-			return this.importStore.importFiles
-		},
-
 		hasBirthdayCalendar() {
 			return !!this.calendarsStore.getBirthdayCalendar
 		},

src/components/AppNavigation/Settings/ImportScreen.vue

@@ -11,7 +11,7 @@
 		@close="cancelImport">
 		<template v-if="isSelecting">
 			<transition-group class="import-modal__file-list" tag="ul">
-				<ImportScreenRow v-for="(file, index) in files" :key="`import-file-${index}`" :file="file" />
+				<ImportScreenRow v-for="entry in entries" :key="`import-file-${entry.file.id}`" :entry="entry" />
 			</transition-group>
 
 			<div class="import-modal__actions">
@@ -22,7 +22,7 @@
 					<template #icon>
 						<Upload :size="20" />
 					</template>
-					{{ $n('calendar', 'Import calendar', 'Import calendars', files.length) }}
+					{{ $n('calendar', 'Import calendar', 'Import calendars', entries.length) }}
 				</NcButton>
 			</div>
 		</template>
@@ -75,7 +75,7 @@ export default {
 	},
 
 	props: {
-		files: {
+		entries: {
 			type: Array,
 			required: true,
 		},

src/components/AppNavigation/Settings/ImportScreenRow.vue

@@ -6,6 +6,9 @@
 <template>
 	<li class="import-modal-file-item">
 		<NcFormGroup :label="$t('calendar', 'Calendar to import into')" :description="disabledHint">
+			<NcFormBox v-slot="{ itemClass }">
+				<NcFormBoxCopyButton :class="itemClass" :label="$t('calendar', 'File')" :value="file.name" />
+			</NcFormBox>
 			<NcFormBox v-slot="{ itemClass }">
 				<CalendarPicker
 					:class="itemClass"
@@ -14,16 +17,37 @@
 					:isCalendarSelectable="isCalendarSelectable"
 					@selectCalendar="selectCalendar" />
 			</NcFormBox>
+		</NcFormGroup>
+		<NcFormGroup :label="$t('calendar', 'Import options')">
 			<NcFormBox v-slot="{ itemClass }">
-				<NcFormBoxCopyButton :class="itemClass" :label="$t('calendar', 'File')" :value="file.name" />
+				<div class="import-modal-file-item__format" :class="itemClass">
+					<label :for="formatInputId" class="import-modal-file-item__format-label">
+						{{ $t('calendar', 'File format') }}
+					</label>
+					<NcSelect
+						v-model="selectedFormat"
+						:inputId="formatInputId"
+						:options="formatOptions"
+						:allowEmpty="false"
+						:clearable="false"
+						label="label" />
+				</div>
+			</NcFormBox>
+			<NcFormBox v-slot="{ itemClass }">
+				<NcFormBoxSwitch
+					:class="itemClass"
+					:modelValue="supersede"
+					:label="$t('calendar', 'Overwrite existing events')"
+					:description="$t('calendar', 'Replace events in the calendar that match the imported ones instead of skipping them.')"
+					@update:modelValue="setSupersede" />
 			</NcFormBox>
 		</NcFormGroup>
 	</li>
 </template>
 
 <script>
 import { getLanguage } from '@nextcloud/l10n'
-import { NcFormBox, NcFormBoxCopyButton, NcFormGroup } from '@nextcloud/vue'
+import { NcFormBox, NcFormBoxCopyButton, NcFormBoxSwitch, NcFormGroup, NcSelect } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import CalendarPicker from '../../Shared/CalendarPicker.vue'
 import useCalendarsStore from '../../../store/calendars.js'
@@ -37,18 +61,63 @@ export default {
 		CalendarPicker,
 		NcFormBox,
 		NcFormBoxCopyButton,
+		NcFormBoxSwitch,
 		NcFormGroup,
+		NcSelect,
 	},
 
 	props: {
-		file: {
+		entry: {
 			type: Object,
 			required: true,
 		},
 	},
 
 	computed: {
 		...mapStores(usePrincipalsStore, useImportStore, useCalendarsStore),
+
+		file() {
+			return this.entry.file
+		},
+
+		formatInputId() {
+			return `import-format-${this.file.id}`
+		},
+
+		formatOptions() {
+			return [{
+				id: 'ical',
+				label: this.$t('calendar', 'iCalendar (.ics)'),
+			}, {
+				id: 'jcal',
+				label: this.$t('calendar', 'jCal (.json)'),
+			}, {
+				id: 'xcal',
+				label: this.$t('calendar', 'xCal (.xml)'),
+			}]
+		},
+
+		selectedFormat: {
+			get() {
+				const format = this.entry.options.format
+				return this.formatOptions.find((option) => option.id === format) ?? this.formatOptions[0]
+			},
+
+			set(option) {
+				if (!option) {
+					return
+				}
+				this.importStore.setOptionsForFile({
+					fileId: this.file.id,
+					options: { format: option.id },
+				})
+			},
+		},
+
+		supersede() {
+			return this.entry.options.supersede
+		},
+
 		newCalendar() {
 			return {
 				id: 'new',
@@ -60,7 +129,7 @@ export default {
 		},
 
 		calendar() {
-			const calendarId = this.importStore.importCalendarRelation[this.file.id]
+			const calendarId = this.entry.calendarId
 			if (calendarId === this.newCalendar.id) {
 				return this.newCalendar
 			}
@@ -130,11 +199,31 @@ export default {
 		},
 
 		selectCalendar(newCalendar) {
-			this.importStore.setCalendarForFileId({
+			this.importStore.setCalendarForFile({
 				fileId: this.file.id,
 				calendarId: newCalendar.id,
 			})
 		},
+
+		setSupersede(supersede) {
+			this.importStore.setOptionsForFile({
+				fileId: this.file.id,
+				options: { supersede },
+			})
+		},
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.import-modal-file-item__format {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 8px 12px;
+
+	&-label {
+		font-weight: bold;
+	}
+}
+</style>

src/components/AppNavigation/Settings/SettingsImportSection.vue

@@ -31,7 +31,7 @@
 
 		<ImportScreen
 			v-if="showImportModal"
-			:files="files"
+			:entries="entries"
 			:stage="stage"
 			:totals="totals"
 			:activeSession="activeSession"
@@ -73,7 +73,7 @@ export default {
 	computed: {
 		...mapStores(useImportStore, useCalendarObjectsStore),
 		...mapState(useImportStore, {
-			files: 'importFiles',
+			entries: 'files',
 		}),
 
 		...mapState(useImportStore, {