Skip to content

fix: calendar import #8483

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SebastianKrupinski wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix: calendar import #8483

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a2ece9
fix: calendar import
SebastianKrupinski Jun 10, 2026
13a4fa4
fix: importing multiple calendars styling
GVodyanov Jun 15, 2026
2cae7eb
fixup! fix: importing multiple calendars styling
SebastianKrupinski Jun 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 24 additions & 17 deletions css/import.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,44 @@

.import-modal {
.modal-container {
padding: 24px !important;
min-width: 50%;
padding: calc(var(--default-grid-baseline) * 6) !important;
overflow: visible !important;

.import-modal__title,
.import-modal__subtitle {
.import-modal__title {
text-align: center;
font-size: calc(var(--default-grid-baseline) * 5);
font-weight: bold;
}

.import-modal__progress-bar {
margin-top: calc(var(--default-grid-baseline) * 6);
margin-bottom: calc(var(--default-grid-baseline) * 4);
}

.import-modal__actions {
margin-top: calc(var(--default-grid-baseline) * 3);
display: flex;
gap: 5px;
gap: var(--default-grid-baseline);
justify-content: flex-end;
}

.import-modal-file-item {
display: flex;
.import-modal__counters {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: calc(var(--default-grid-baseline) * 2);
row-gap: calc(var(--default-grid-baseline) * 2);
margin-top: calc(var(--default-grid-baseline) * 2);
margin-bottom: calc(var(--default-grid-baseline) * 2);

&--header {
font-weight: bold;
.notecard {
align-items: center;
margin: 0 !important;
}
}

&__filename {
flex: 2 1 0;
}
.import-modal-file-item {
margin-top: calc(var(--default-grid-baseline) * 2);
margin-bottom: calc(var(--default-grid-baseline) * 2);

&__calendar-select {
flex: 1 1 0;
}

&__calendar-disabled-hint {
color: var(--color-text-maxcontrast);
}
Expand Down
20 changes: 2 additions & 18 deletions src/components/AppNavigation/Settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ import {
} from '../../models/consts.js'
import { getCurrentUserPrincipal } from '../../services/caldavService.js'
import useCalendarsStore from '../../store/calendars.js'
import useImportFilesStore from '../../store/importFiles.js'
import useImportStore from '../../store/import.ts'
import usePrincipalsStore from '../../store/principals.js'
import useSettingsStore from '../../store/settings.js'
import {
Expand Down Expand Up @@ -248,7 +248,7 @@ export default {
},

computed: {
...mapStores(useSettingsStore, useCalendarsStore, useImportFilesStore, usePrincipalsStore),
...mapStores(useSettingsStore, useCalendarsStore, useImportStore, usePrincipalsStore),
...mapState(useSettingsStore, [
'eventLimit',
'showTasks',
Expand Down Expand Up @@ -277,26 +277,10 @@ export default {
return isAfterVersion(34)
},

files() {
return this.importFilesStore.importFiles
},

hasBirthdayCalendar() {
return !!this.calendarsStore.getBirthdayCalendar
},

showUploadButton() {
return this.importStateStore.importState.stage === IMPORT_STAGE_DEFAULT
},

showImportModal() {
return this.importStateStore.importState.stage === IMPORT_STAGE_PROCESSING
},

showProgressBar() {
return this.importStateStore.importState.stage === IMPORT_STAGE_IMPORTING
},

settingsTitle() {
return this.$t('calendar', 'Calendar settings')
},
Expand Down
122 changes: 91 additions & 31 deletions src/components/AppNavigation/Settings/ImportScreen.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,57 +6,117 @@
<template>
<Modal
class="import-modal"
size="large"
size="normal"
:name="$t('calendar', 'Import destination selection')"
@close="cancelImport">
<h2 class="import-modal__title">
{{ $t('calendar', 'Import calendars') }}
</h2>
<h4 class="import-modal__subtitle">
<!-- eslint-disable-next-line no-irregular-whitespace -->
{{ $t('calendar', 'Please select a calendar to import into …') }}
</h4>

<transition-group class="import-modal__file-list" tag="ul">
<li key="import-header-row" class="import-modal-file-item import-modal-file-item--header">
<div class="import-modal-file-item__filename">
{{ $t('calendar', 'Filename') }}
</div>
<div class="import-modal-file-item__calendar-select">
{{ $t('calendar', 'Calendar to import into') }}
</div>
</li>
<ImportScreenRow v-for="(file, index) in files" :key="`import-file-${index}`" :file="file" />
</transition-group>

<div class="import-modal__actions">
<NcButton @click="cancelImport">
{{ $t('calendar', 'Cancel') }}
</NcButton>
<NcButton class="primary" @click="importCalendar">
{{ $n('calendar', 'Import calendar', 'Import calendars', files.length) }}
</NcButton>
</div>
<template v-if="isSelecting">
<transition-group class="import-modal__file-list" tag="ul">
<ImportScreenRow v-for="entry in entries" :key="`import-file-${entry.file.id}`" :entry="entry" />
</transition-group>

<div class="import-modal__actions">
<NcButton @click="cancelImport">
{{ $t('calendar', 'Cancel') }}
</NcButton>
<NcButton variant="primary" @click="importCalendar">
<template #icon>
<Upload :size="20" />
</template>
{{ $n('calendar', 'Import calendar', 'Import calendars', entries.length) }}
</NcButton>
</div>
</template>

<template v-else>
<h4 class="import-modal__title">
{{ activeFileLabel }}
</h4>

<NcProgressBar class="import-modal__progress-bar" :value="progressValue" size="medium" />

<div class="import-modal__counters">
<NcNoteCard type="info">
<strong>{{ totals.discovered }}</strong> {{ $t('calendar', 'Discovered') }}
</NcNoteCard>
<NcNoteCard type="info">
<strong>{{ totals.processed }}</strong> {{ $t('calendar', 'Processed') }}
</NcNoteCard>
<NcNoteCard type="success">
<strong>{{ totals.created }}</strong> {{ $t('calendar', 'Created') }}
</NcNoteCard>
<NcNoteCard type="info">
<strong>{{ totals.updated }}</strong> {{ $t('calendar', 'Updated') }}
</NcNoteCard>
<NcNoteCard type="warning">
<strong>{{ totals.exists }}</strong> {{ $t('calendar', 'Skipped') }}
</NcNoteCard>
<NcNoteCard type="error">
<strong>{{ totals.error }}</strong> {{ $t('calendar', 'Errors') }}
</NcNoteCard>
</div>
</template>
</Modal>
</template>

<script>
import { NcModal as Modal, NcButton } from '@nextcloud/vue'
import { NcModal as Modal, NcButton, NcNoteCard, NcProgressBar } from '@nextcloud/vue'
import Upload from 'vue-material-design-icons/TrayArrowUp.vue'
import ImportScreenRow from './ImportScreenRow.vue'

export default {
name: 'ImportScreen',
components: {
NcButton,
NcNoteCard,
NcProgressBar,
ImportScreenRow,
Modal,
Upload,
},

props: {
files: {
entries: {
type: Array,
required: true,
},

stage: {
type: String,
required: true,
},

totals: {
type: Object,
required: true,
},

activeSession: {
type: Object,
default: null,
},
},

emits: ['cancelImport', 'importCalendar'],

computed: {
isSelecting() {
return this.stage === 'selecting'
},

progressValue() {
return Math.round(this.totals.processed / Math.max(this.totals.discovered, 1) * 100)
},

activeFileLabel() {
if (!this.activeSession) {
return this.$t('calendar', 'Preparing import…')
}

return this.$t('calendar', 'Importing {fileName} into {calendar}', {
fileName: this.activeSession.fileName,
calendar: this.activeSession.targetDisplayName || this.$t('calendar', 'selected calendar'),
})
},
},

methods: {
Expand Down
Loading
Loading