Skip to content

Commit 71d3df4

Browse files
SebastianKrupinskiSebastianKrupinski
committed
fix: calendar import
Signed-off-by: SebastianKrupinski <krupinskis05@gmail.com>
1 parent c4b7e6f commit 71d3df4

12 files changed

Lines changed: 815 additions & 306 deletions

File tree

‎css/import.scss‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,44 @@
55

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

12-
.import-modal__title,
13-
.import-modal__subtitle {
11+
.import-modal__title {
1412
text-align: center;
13+
font-size: calc(var(--default-grid-baseline) * 5);
14+
font-weight: bold;
15+
}
16+
17+
.import-modal__progress-bar {
18+
margin-top: calc(var(--default-grid-baseline) * 6);
19+
margin-bottom: calc(var(--default-grid-baseline) * 4);
1520
}
1621

1722
.import-modal__actions {
23+
margin-top: calc(var(--default-grid-baseline) * 3);
1824
display: flex;
19-
gap: 5px;
25+
gap: var(--default-grid-baseline);
26+
justify-content: flex-end;
2027
}
2128

22-
.import-modal-file-item {
23-
display: flex;
29+
.import-modal__counters {
30+
display: grid;
31+
grid-template-columns: repeat(3, 1fr);
32+
column-gap: calc(var(--default-grid-baseline) * 2);
33+
row-gap: calc(var(--default-grid-baseline) * 2);
2434
margin-top: calc(var(--default-grid-baseline) * 2);
25-
margin-bottom: calc(var(--default-grid-baseline) * 2);
2635

27-
&--header {
28-
font-weight: bold;
36+
.notecard {
37+
align-items: center;
38+
margin: 0 !important;
2939
}
40+
}
3041

31-
&__filename {
32-
flex: 2 1 0;
33-
}
42+
.import-modal-file-item {
43+
margin-top: calc(var(--default-grid-baseline) * 2);
44+
margin-bottom: calc(var(--default-grid-baseline) * 2);
3445

35-
&__calendar-select {
36-
flex: 1 1 0;
37-
}
38-
3946
&__calendar-disabled-hint {
4047
color: var(--color-text-maxcontrast);
4148
}

‎src/components/AppNavigation/Settings.vue‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ import {
186186
} from '../../models/consts.js'
187187
import { getCurrentUserPrincipal } from '../../services/caldavService.js'
188188
import useCalendarsStore from '../../store/calendars.js'
189-
import useImportFilesStore from '../../store/importFiles.js'
189+
import useImportStore from '../../store/import.ts'
190190
import usePrincipalsStore from '../../store/principals.js'
191191
import useSettingsStore from '../../store/settings.js'
192192
import {
@@ -248,7 +248,7 @@ export default {
248248
},
249249
250250
computed: {
251-
...mapStores(useSettingsStore, useCalendarsStore, useImportFilesStore, usePrincipalsStore),
251+
...mapStores(useSettingsStore, useCalendarsStore, useImportStore, usePrincipalsStore),
252252
...mapState(useSettingsStore, [
253253
'eventLimit',
254254
'showTasks',
@@ -277,26 +277,10 @@ export default {
277277
return isAfterVersion(34)
278278
},
279279
280-
files() {
281-
return this.importFilesStore.importFiles
282-
},
283-
284280
hasBirthdayCalendar() {
285281
return !!this.calendarsStore.getBirthdayCalendar
286282
},
287283
288-
showUploadButton() {
289-
return this.importStateStore.importState.stage === IMPORT_STAGE_DEFAULT
290-
},
291-
292-
showImportModal() {
293-
return this.importStateStore.importState.stage === IMPORT_STAGE_PROCESSING
294-
},
295-
296-
showProgressBar() {
297-
return this.importStateStore.importState.stage === IMPORT_STAGE_IMPORTING
298-
},
299-
300284
settingsTitle() {
301285
return this.$t('calendar', 'Calendar settings')
302286
},

‎src/components/AppNavigation/Settings/ImportScreen.vue‎

Lines changed: 91 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,57 +6,117 @@
66
<template>
77
<Modal
88
class="import-modal"
9-
size="large"
9+
size="normal"
1010
:name="$t('calendar', 'Import destination selection')"
1111
@close="cancelImport">
12-
<h2 class="import-modal__title">
13-
{{ $t('calendar', 'Import calendars') }}
14-
</h2>
15-
<h4 class="import-modal__subtitle">
16-
<!-- eslint-disable-next-line no-irregular-whitespace -->
17-
{{ $t('calendar', 'Please select a calendar to import into …') }}
18-
</h4>
19-
20-
<transition-group class="import-modal__file-list" tag="ul">
21-
<li key="import-header-row" class="import-modal-file-item import-modal-file-item--header">
22-
<div class="import-modal-file-item__filename">
23-
{{ $t('calendar', 'Filename') }}
24-
</div>
25-
<div class="import-modal-file-item__calendar-select">
26-
{{ $t('calendar', 'Calendar to import into') }}
27-
</div>
28-
</li>
29-
<ImportScreenRow v-for="(file, index) in files" :key="`import-file-${index}`" :file="file" />
30-
</transition-group>
31-
32-
<div class="import-modal__actions">
33-
<NcButton @click="cancelImport">
34-
{{ $t('calendar', 'Cancel') }}
35-
</NcButton>
36-
<NcButton class="primary" @click="importCalendar">
37-
{{ $n('calendar', 'Import calendar', 'Import calendars', files.length) }}
38-
</NcButton>
39-
</div>
12+
<template v-if="isSelecting">
13+
<transition-group class="import-modal__file-list" tag="ul">
14+
<ImportScreenRow v-for="entry in entries" :key="`import-file-${entry.file.id}`" :entry="entry" />
15+
</transition-group>
16+
17+
<div class="import-modal__actions">
18+
<NcButton @click="cancelImport">
19+
{{ $t('calendar', 'Cancel') }}
20+
</NcButton>
21+
<NcButton variant="primary" @click="importCalendar">
22+
<template #icon>
23+
<Upload :size="20" />
24+
</template>
25+
{{ $n('calendar', 'Import calendar', 'Import calendars', entries.length) }}
26+
</NcButton>
27+
</div>
28+
</template>
29+
30+
<template v-else>
31+
<h4 class="import-modal__title">
32+
{{ activeFileLabel }}
33+
</h4>
34+
35+
<NcProgressBar class="import-modal__progress-bar" :value="progressValue" size="medium" />
36+
37+
<div class="import-modal__counters">
38+
<NcNoteCard type="info">
39+
<strong>{{ totals.discovered }}</strong> {{ $t('calendar', 'Discovered') }}
40+
</NcNoteCard>
41+
<NcNoteCard type="info">
42+
<strong>{{ totals.processed }}</strong> {{ $t('calendar', 'Processed') }}
43+
</NcNoteCard>
44+
<NcNoteCard type="success">
45+
<strong>{{ totals.created }}</strong> {{ $t('calendar', 'Created') }}
46+
</NcNoteCard>
47+
<NcNoteCard type="info">
48+
<strong>{{ totals.updated }}</strong> {{ $t('calendar', 'Updated') }}
49+
</NcNoteCard>
50+
<NcNoteCard type="warning">
51+
<strong>{{ totals.exists }}</strong> {{ $t('calendar', 'Skipped') }}
52+
</NcNoteCard>
53+
<NcNoteCard type="error">
54+
<strong>{{ totals.error }}</strong> {{ $t('calendar', 'Errors') }}
55+
</NcNoteCard>
56+
</div>
57+
</template>
4058
</Modal>
4159
</template>
4260

4361
<script>
44-
import { NcModal as Modal, NcButton } from '@nextcloud/vue'
62+
import { NcModal as Modal, NcButton, NcNoteCard, NcProgressBar } from '@nextcloud/vue'
63+
import Upload from 'vue-material-design-icons/TrayArrowUp.vue'
4564
import ImportScreenRow from './ImportScreenRow.vue'
4665
4766
export default {
4867
name: 'ImportScreen',
4968
components: {
5069
NcButton,
70+
NcNoteCard,
71+
NcProgressBar,
5172
ImportScreenRow,
5273
Modal,
74+
Upload,
5375
},
5476
5577
props: {
56-
files: {
78+
entries: {
5779
type: Array,
5880
required: true,
5981
},
82+
83+
stage: {
84+
type: String,
85+
required: true,
86+
},
87+
88+
totals: {
89+
type: Object,
90+
required: true,
91+
},
92+
93+
activeSession: {
94+
type: Object,
95+
default: null,
96+
},
97+
},
98+
99+
emits: ['cancelImport', 'importCalendar'],
100+
101+
computed: {
102+
isSelecting() {
103+
return this.stage === 'selecting'
104+
},
105+
106+
progressValue() {
107+
return Math.round(this.totals.processed / Math.max(this.totals.discovered, 1) * 100)
108+
},
109+
110+
activeFileLabel() {
111+
if (!this.activeSession) {
112+
return this.$t('calendar', 'Preparing import…')
113+
}
114+
115+
return this.$t('calendar', 'Importing {fileName} into {calendar}', {
116+
fileName: this.activeSession.fileName,
117+
calendar: this.activeSession.targetDisplayName || this.$t('calendar', 'selected calendar'),
118+
})
119+
},
60120
},
61121
62122
methods: {

0 commit comments

Comments
 (0)