fix: Adapt NcEmptyContent usages to new slots

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2023-03-27 10:28:49 +02:00
parent 942b8d8919
commit 22616d8266
2 changed files with 30 additions and 9 deletions

View File

@@ -71,12 +71,22 @@
</div> </div>
</div> </div>
<div v-else id="modal-inner"> <div v-else id="modal-inner">
<NcEmptyContent v-if="creating" icon="icon-loading"> <NcEmptyContent v-if="creating">
<template #icon>
<NcLoadingIcon />
</template>
<template #title>
{{ t('deck', 'Creating the new card …') }} {{ t('deck', 'Creating the new card …') }}
</template>
</NcEmptyContent> </NcEmptyContent>
<NcEmptyContent v-else-if="created" icon="icon-checkmark"> <NcEmptyContent v-else-if="created">
<template #icon>
<CardPlusOutline />
</template>
<template #title>
{{ t('deck', 'Card "{card}" was added to "{board}"', { card: pendingTitle, board: selectedBoard.title }) }} {{ t('deck', 'Card "{card}" was added to "{board}"', { card: pendingTitle, board: selectedBoard.title }) }}
<template #desc> </template>
<template #action>
<button class="primary" @click="openNewCard"> <button class="primary" @click="openNewCard">
{{ t('deck', 'Open card') }} {{ t('deck', 'Open card') }}
</button> </button>
@@ -92,7 +102,8 @@
<script> <script>
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
import { NcModal, NcMultiselect, NcEmptyContent } from '@nextcloud/vue' import { NcModal, NcMultiselect, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
import CardPlusOutline from 'vue-material-design-icons/CardPlusOutline.vue'
import axios from '@nextcloud/axios' import axios from '@nextcloud/axios'
import { CardApi } from './services/CardApi.js' import { CardApi } from './services/CardApi.js'
@@ -104,6 +115,8 @@ export default {
NcEmptyContent, NcEmptyContent,
NcModal, NcModal,
NcMultiselect, NcMultiselect,
NcLoadingIcon,
CardPlusOutline,
}, },
props: { props: {
title: { title: {
@@ -203,6 +216,7 @@ export default {
max-width: 400px; max-width: 400px;
padding: 10px; padding: 10px;
min-height: 200px; min-height: 200px;
margin: auto;
} }
.multiselect-board, .multiselect-list, input, textarea { .multiselect-board, .multiselect-list, input, textarea {

View File

@@ -30,9 +30,14 @@
<h2>{{ t('deck', 'Loading board') }}</h2> <h2>{{ t('deck', 'Loading board') }}</h2>
<p /> <p />
</div> </div>
<NcEmptyContent v-else-if="isEmpty" key="empty" icon="icon-deck"> <NcEmptyContent v-else-if="isEmpty" key="empty">
<template #icon>
<DeckIcon />
</template>
<template #title>
{{ t('deck', 'No lists available') }} {{ t('deck', 'No lists available') }}
<template v-if="canManage" #desc> </template>
<template v-if="canManage" #action>
{{ t('deck', 'Create a new list to add cards to this board') }} {{ t('deck', 'Create a new list to add cards to this board') }}
<form @submit.prevent="addNewStack()"> <form @submit.prevent="addNewStack()">
<input id="new-stack-input-main" <input id="new-stack-input-main"
@@ -80,6 +85,7 @@
import { Container, Draggable } from 'vue-smooth-dnd' import { Container, Draggable } from 'vue-smooth-dnd'
import { mapState, mapGetters } from 'vuex' import { mapState, mapGetters } from 'vuex'
import Controls from '../Controls.vue' import Controls from '../Controls.vue'
import DeckIcon from '../icons/DeckIcon.vue'
import Stack from './Stack.vue' import Stack from './Stack.vue'
import { NcEmptyContent } from '@nextcloud/vue' import { NcEmptyContent } from '@nextcloud/vue'
import GlobalSearchResults from '../search/GlobalSearchResults.vue' import GlobalSearchResults from '../search/GlobalSearchResults.vue'
@@ -92,6 +98,7 @@ export default {
GlobalSearchResults, GlobalSearchResults,
Controls, Controls,
Container, Container,
DeckIcon,
Draggable, Draggable,
Stack, Stack,
NcEmptyContent, NcEmptyContent,