show only 6 cards

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>

src/CardCreateDialog.vue

@@ -168,6 +168,7 @@ export default {
 
 		},
 		close() {
+			this.$emit('close')
 			this.$root.$emit('close')
 		},
 		async select() {

src/components/card/CommentForm.vue

@@ -28,11 +28,11 @@
 				:members="members"
 				name-key="uid"
 				:tab-select="true">
-				<template v-slot:item="s">
+				<template #item="s">
 					<Avatar class="atwho-li--avatar" :user="s.item.uid" :size="24" />
 					<span class="atwho-li--name" v-text="s.item.displayname" />
 				</template>
-				<template v-slot:embeddedItem="scope">
+				<template #embeddedItem="scope">
 					<span>
 						<UserBubble v-if="scope.current.uid"
 							:data-mention-id="scope.current.uid"

src/components/navigation/AppNavigationBoard.vue

@@ -149,6 +149,9 @@ export default {
 	directives: {
 		ClickOutside,
 	},
+	inject: [
+		'boardApi',
+	],
 	props: {
 		board: {
 			type: Object,
@@ -312,9 +315,6 @@ export default {
 			this.updateDueSetting = null
 		},
 	},
-	inject: [
-		'boardApi',
-	],
 }
 </script>
 

src/views/Dashboard.vue

@@ -21,6 +21,7 @@
   -->
 
 <template>
+	<div>
 		<DashboardWidget :items="cards"
 			empty-content-icon="icon-deck"
 			:empty-content-message="t('deck', 'No upcoming cards')"
@@ -29,7 +30,7 @@
 			:loading="loading"
 			@hide="() => {}"
 			@markDone="() => {}">
-		<template v-slot:default="{ item }">
+			<template #default="{ item }">
 				<a :key="item.id"
 					:href="cardLink(item)"
 					target="_blank"
@@ -47,6 +48,13 @@
 				</a>
 			</template>
 		</DashboardWidget>
+		<div class="center-button">
+			<button @click="toggleAddCardModel">
+				{{ t('deck', 'Add card') }}
+			</button>
+			<CardCreateDialog v-if="showAddCardModal" @close="toggleAddCardModel" />
+		</div>
+	</div>
 </template>
 
 <script>
@@ -55,17 +63,20 @@ import { mapGetters } from 'vuex'
 import labelStyle from './../mixins/labelStyle'
 import DueDate from '../components/cards/badges/DueDate'
 import { generateUrl } from '@nextcloud/router'
+import CardCreateDialog from '../CardCreateDialog'
 
 export default {
 	name: 'Dashboard',
 	components: {
 		DueDate,
 		DashboardWidget,
+		CardCreateDialog,
 	},
 	mixins: [labelStyle],
 	data() {
 		return {
 			loading: false,
+			showAddCardModal: false,
 		}
 	},
 	computed: {
@@ -73,11 +84,17 @@ export default {
 			'assignedCardsDashboard',
 		]),
 		cards() {
-			const list = [
+			/* const list = [
 				...this.assignedCardsDashboard,
 			].filter((card) => {
 				return card.duedate !== null
+			}) */
+
+			const list = this.assignedCardsDashboard.slice(0, 6)
+				.filter((card) => {
+					return card.duedate !== null
 				})
+
 			list.sort((a, b) => {
 				return (new Date(a.duedate)).getTime() - (new Date(b.duedate)).getTime()
 			})
@@ -98,6 +115,11 @@ export default {
 			this.loading = false
 		})
 	},
+	methods: {
+		toggleAddCardModel() {
+			this.showAddCardModal = !this.showAddCardModal
+		},
+	},
 }
 </script>
 
@@ -145,4 +167,8 @@ export default {
 	.right {
 		float: right;
 	}
+
+	.center-button {
+		text-align: center;
+	}
 </style>

webpack.js

@@ -11,7 +11,7 @@ const config = {
 	},
 	output: {
 		filename: '[name].js',
-		jsonpFunction: 'webpackJsonpOCADeck',
+		// jsonpFunction: 'webpackJsonpOCADeck',
 		chunkFilename: '[name].js?v=[contenthash]',
 	},
 	resolve: {