nextcloud
/
calendar
mirror of https://github.com/nextcloud/calendar
0
0
Fork 0
Code Issues Releases Wiki Activity

Show loading view while loading deleted objects 

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
This commit is contained in:
Raimund Schlüßler 2021-07-24 21:20:57 +02:00 committed by backportbot[bot]
parent 26ec3a92a0
commit 86079eed5e
1 changed files with 72 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/AppNavigation/CalendarList/Trashbin.vue
View File

@ -29,8 +29,24 @@
@close="showModal = false"> @close="showModal = false">
<div class="modal__content"> <div class="modal__content">
<h2>{{ t('calendar', 'Trash bin') }}</h2> <h2>{{ t('calendar', 'Trash bin') }}</h2>
<span v-if="!items.length">{{ t('calendar', 'You do not have any deleted calendars or events') }}</span> <EmptyContent
<table v-else> v-if="loading"
icon="icon-loading"
class="modal__content__loading">
<template #desc>
{{ t('calendar', 'Loading deleted elements.') }}
</template>
</EmptyContent>
<EmptyContent
v-else-if="!items.length"
class="modal__content__empty"
icon="icon-delete">
<template #desc>
{{ t('calendar', 'You do not have any deleted elements.') }}
</template>
</EmptyContent>
<template v-else>
<table>
<tr> <tr>
<th class="name"> <th class="name">
{{ t('calendar', 'Name') }} {{ t('calendar', 'Name') }}
@ -78,6 +94,7 @@
<p v-if="retentionDuration" class="footer"> <p v-if="retentionDuration" class="footer">
{{ n('calendar', 'Elements in the trash bin are deleted after {numDays} day', 'Elements in the trash bin are deleted after {numDays} days', retentionDuration, { numDays: retentionDuration }) }} {{ n('calendar', 'Elements in the trash bin are deleted after {numDays} day', 'Elements in the trash bin are deleted after {numDays} days', retentionDuration, { numDays: retentionDuration }) }}
</p> </p>
</template>
</div> </div>
</Modal> </Modal>
</template> </template>
@ -89,6 +106,7 @@ import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
import Actions from '@nextcloud/vue/dist/Components/Actions' import Actions from '@nextcloud/vue/dist/Components/Actions'
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
import Modal from '@nextcloud/vue/dist/Components/Modal' import Modal from '@nextcloud/vue/dist/Components/Modal'
import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
import moment from '@nextcloud/moment' import moment from '@nextcloud/moment'
import logger from '../../../utils/logger' import logger from '../../../utils/logger'
import { showError } from '@nextcloud/dialogs' import { showError } from '@nextcloud/dialogs'
@ -100,6 +118,7 @@ export default {
name: 'Trashbin', name: 'Trashbin',
components: { components: {
AppNavigationItem, AppNavigationItem,
EmptyContent,
Modal, Modal,
Moment, Moment,
Actions, Actions,
@ -108,6 +127,7 @@ export default {
data() { data() {
return { return {
showModal: false, showModal: false,
loading: true,
} }
}, },
computed: { computed: {
@ -174,6 +194,7 @@ export default {
async onShow() { async onShow() {
this.showModal = true this.showModal = true
this.loading = true
try { try {
await Promise.all([ await Promise.all([
this.$store.dispatch('loadDeletedCalendars'), this.$store.dispatch('loadDeletedCalendars'),
@ -191,6 +212,7 @@ export default {
showError(t('calendar', 'Could not load deleted calendars and objects')) showError(t('calendar', 'Could not load deleted calendars and objects'))
} }
this.loading = false
}, },
async onDeletePermanently(item) { async onDeletePermanently(item) {
logger.debug('deleting ' + item.url + ' permanently', item) logger.debug('deleting ' + item.url + ' permanently', item)
@ -235,6 +257,11 @@ export default {
.modal__content { .modal__content {
max-width: 40vw; max-width: 40vw;
margin: 2vw; margin: 2vw;
&__loading,
&__empty {
margin-top: 25px !important;
}
} }
::v-deep .modal-wrapper .modal-container { ::v-deep .modal-wrapper .modal-container {
overflow-y: auto; overflow-y: auto;