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

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

@ -29,55 +29,72 @@
@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"
<tr> icon="icon-loading"
<th class="name"> class="modal__content__loading">
{{ t('calendar', 'Name') }} <template #desc>
</th> {{ t('calendar', 'Loading deleted elements.') }}
<th class="deletedAt"> </template>
{{ t('calendar', 'Deleted') }} </EmptyContent>
</th> <EmptyContent
<th>&nbsp;</th> v-else-if="!items.length"
</tr> class="modal__content__empty"
<tr v-for="item in items" :key="item.url"> icon="icon-delete">
<td> <template #desc>
<div class="item"> {{ t('calendar', 'You do not have any deleted elements.') }}
<div> </template>
<div </EmptyContent>
class="color-dot" <template v-else>
:style="{ 'background-color': item.color }" /> <table>
</div> <tr>
<th class="name">
{{ t('calendar', 'Name') }}
</th>
<th class="deletedAt">
{{ t('calendar', 'Deleted') }}
</th>
<th>&nbsp;</th>
</tr>
<tr v-for="item in items" :key="item.url">
<td>
<div class="item">
<div>
<div
class="color-dot"
:style="{ 'background-color': item.color }" />
</div>
<div> <div>
<div>{{ item.name }}</div> <div>{{ item.name }}</div>
<div v-if="item.subline" class="item-subline"> <div v-if="item.subline" class="item-subline">
{{ item.subline }} {{ item.subline }}
</div>
</div> </div>
</div> </div>
</div> </td>
</td> <td class="deletedAt">
<td class="deletedAt"> <Moment class="timestamp" :timestamp="item.deletedAt" />
<Moment class="timestamp" :timestamp="item.deletedAt" /> </td>
</td> <td>
<td> <button @click="restore(item)">
<button @click="restore(item)"> {{ t('calendar','Restore') }}
{{ t('calendar','Restore') }} </button>
</button>
<Actions :force-menu="true"> <Actions :force-menu="true">
<ActionButton <ActionButton
icon="icon-delete" icon="icon-delete"
@click="onDeletePermanently(item)"> @click="onDeletePermanently(item)">
{{ t('calendar','Delete permanently') }} {{ t('calendar','Delete permanently') }}
</ActionButton> </ActionButton>
</Actions> </Actions>
</td> </td>
</tr> </tr>
</table> </table>
<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;