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

Merge pull request #3147 from nextcloud/enh/dashboardAddCardButton2

Browse Source
This commit is contained in:
Julius Härtl
2021-06-25 11:27:26 +02:00
committed by GitHub
parent 6365d83431 0335229f4f
commit e77041a105
1 changed files with 46 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/views/Dashboard.vue
View File

@@ -21,32 +21,39 @@
--> -->
<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" :loading="loading"
@hide="() => {}" @hide="() => {}"
@markDone="() => {}"> @markDone="() => {}">
<template #default="{ item }"> <template #default="{ item }">
<a :key="item.id" <a :key="item.id"
:href="cardLink(item)" :href="cardLink(item)"
target="_blank" target="_blank"
class="card"> class="card">
<div class="card--header"> <div class="card--header">
<DueDate class="right" :card="item" /> <DueDate class="right" :card="item" />
<span class="title">{{ item.title }}</span> <span class="title">{{ item.title }}</span>
</div> </div>
<ul v-if="item.labels && item.labels.length" <ul v-if="item.labels && item.labels.length"
class="labels"> class="labels">
<li v-for="label in item.labels" :key="label.id" :style="labelStyle(label)"> <li v-for="label in item.labels" :key="label.id" :style="labelStyle(label)">
<span>{{ label.title }}</span> <span>{{ label.title }}</span>
</li> </li>
</ul> </ul>
</a> </a>
</template> </template>
</DashboardWidget> </DashboardWidget>
<div class="center-button">
<button @click="toggleAddCardModel">
{{ t('deck', 'Add card') }}
</button>
<CardCreateDialog v-if="showAddCardModal" @close="toggleAddCardModel" />
</div>
</div>
</template> </template>
<script> <script>
@@ -55,17 +62,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: {
@@ -81,7 +91,7 @@ export default {
list.sort((a, b) => { list.sort((a, b) => {
return (new Date(a.duedate)).getTime() - (new Date(b.duedate)).getTime() return (new Date(a.duedate)).getTime() - (new Date(b.duedate)).getTime()
}) })
return list return list.slice(0, 6)
}, },
cardLink() { cardLink() {
return (card) => { return (card) => {
@@ -98,12 +108,21 @@ export default {
this.loading = false this.loading = false
}) })
}, },
methods: {
toggleAddCardModel() {
this.showAddCardModal = !this.showAddCardModal
},
},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import './../css/labels'; @import './../css/labels';
.center-button {
text-align: center;
}
#deck-widget-empty-content { #deck-widget-empty-content {
text-align: center; text-align: center;
margin-top: 5vh; margin-top: 5vh;