ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

nice dashboard add card button

Browse Source 
Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>
This commit is contained in:
Jakob Röhrl
2021-03-04 11:08:37 +01:00
parent 6aa63e0906
commit 435994fb1b
1 changed files with 46 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/views/Dashboard.vue
View File

@@ -21,32 +21,40 @@
--> -->
<template> <template>
<DashboardWidget :items="cards" <div>
empty-content-icon="icon-deck" <DashboardWidget :items="cards"
:empty-content-message="t('deck', 'No upcoming cards')" empty-content-icon="icon-deck"
:show-more-text="t('deck', 'upcoming cards')" :empty-content-message="t('deck', 'No upcoming cards')"
:show-more-url="showMoreUrl" :show-more-text="t('deck', 'upcoming cards')"
:loading="loading" :show-more-url="showMoreUrl"
@hide="() => {}" :loading="loading"
@markDone="() => {}"> @hide="() => {}"
<template v-slot:default="{ item }"> @markDone="() => {}">
<a :key="item.id" <template v-slot:default="{ item }">
:href="cardLink(item)" <a :key="item.id"
target="_blank" :href="cardLink(item)"
class="card"> target="_blank"
<div class="card--header"> class="card">
<DueDate class="right" :card="item" /> <div class="card--header">
<span class="title">{{ item.title }}</span> <DueDate class="right" :card="item" />
</div> <span class="title">{{ item.title }}</span>
<ul v-if="item.labels && item.labels.length" </div>
class="labels"> <ul v-if="item.labels && item.labels.length"
<li v-for="label in item.labels" :key="label.id" :style="labelStyle(label)"> class="labels">
<span>{{ label.title }}</span> <li v-for="label in item.labels" :key="label.id" :style="labelStyle(label)">
</li> <span>{{ label.title }}</span>
</ul> </li>
</a> </ul>
</template> </a>
</DashboardWidget> </template>
</DashboardWidget>
<div class="center-button">
<button @click="toggleAddCardModel" @close="toggleAddCardModel">
{{ t('deck', 'Add card') }}
</button>
<CardCreateDialog v-if="showAddCardModal" />
</div>
</div>
</template> </template>
<script> <script>
@@ -55,17 +63,20 @@ import { mapGetters } from 'vuex'
import labelStyle from './../mixins/labelStyle' import labelStyle from './../mixins/labelStyle'
import DueDate from '../components/cards/badges/DueDate' import DueDate from '../components/cards/badges/DueDate'
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
import CardCreateDialog from '../CardCreateDialog'
export default { export default {
name: 'Dashboard', name: 'Dashboard',
components: { components: {
DueDate, DueDate,
DashboardWidget, DashboardWidget,
CardCreateDialog,
}, },
mixins: [labelStyle], mixins: [labelStyle],
data() { data() {
return { return {
loading: false, loading: false,
showAddCardModal: false,
} }
}, },
computed: { computed: {
@@ -98,6 +109,11 @@ export default {
this.loading = false this.loading = false
}) })
}, },
methods: {
toggleAddCardModel() {
this.showAddCardModal = !this.showAddCardModal
},
},
} }
</script> </script>
@@ -145,4 +161,8 @@ export default {
.right { .right {
float: right; float: right;
} }
.center-button {
text-align: center;
}
</style> </style>