Merge pull request #2115 from nextcloud/enh/dashboard

appinfo/routes.php

@@ -136,7 +136,6 @@ return [
 		['name' => 'comments_api#delete', 'url' => '/api/v1.0/cards/{cardId}/comments/{commentId}', 'verb' => 'DELETE'],
 
 		// dashboard
-		['name' => 'overview_api#findAllWithDue', 'url' => '/api/v1.0/overview/due', 'verb' => 'GET'],
-		['name' => 'overview_api#findAssignedCards', 'url' => '/api/v1.0/overview/assigned', 'verb' => 'GET'],
+		['name' => 'overview_api#upcomingCards', 'url' => '/api/v1.0/overview/upcoming', 'verb' => 'GET'],
 	]
 ];

lib/AppInfo/Application.php

@@ -29,6 +29,7 @@ use OCA\Deck\Activity\CommentEventHandler;
 use OCA\Deck\Capabilities;
 use OCA\Deck\Collaboration\Resources\ResourceProvider;
 use OCA\Deck\Collaboration\Resources\ResourceProviderCard;
+use OCA\Deck\Dashboard\DeckWidget;
 use OCA\Deck\Db\Acl;
 use OCA\Deck\Db\AclMapper;
 use OCA\Deck\Db\AssignedUsersMapper;
@@ -43,6 +44,7 @@ use OCP\AppFramework\App;
 use OCP\Collaboration\Resources\IManager;
 use OCP\Collaboration\Resources\IProviderManager;
 use OCP\Comments\CommentsEntityEvent;
+use OCP\Dashboard\RegisterWidgetEvent;
 use OCP\EventDispatcher\Event;
 use OCP\EventDispatcher\IEventDispatcher;
 use OCP\FullTextSearch\IFullTextSearchManager;
@@ -85,6 +87,15 @@ class Application extends App {
 		$container->registerService('database4ByteSupport', static function () use ($server) {
 			return $server->getDatabaseConnection()->supports4ByteText();
 		});
+
+		$version = OC_Util::getVersion()[0];
+		if ($version >= 20) {
+			/** @var IEventDispatcher $dispatcher */
+			$dispatcher = $container->getServer()->query(IEventDispatcher::class);
+			$dispatcher->addListener(RegisterWidgetEvent::class, function (RegisterWidgetEvent $event) use ($container) {
+				$event->registerWidget(DeckWidget::class);
+			});
+		}
 	}
 
 	public function register(): void {

lib/Controller/OverviewApiController.php

@@ -48,14 +48,7 @@ class OverviewApiController extends OCSController {
 	/**
 	 * @NoAdminRequired
 	 */
-	public function findAllWithDue(): DataResponse {
-		return new DataResponse($this->dashboardService->findAllWithDue($this->userId));
-	}
-
-	/**
-	 * @NoAdminRequired
-	 */
-	public function findAssignedCards(): DataResponse {
-		return new DataResponse($this->dashboardService->findAssignedCards($this->userId));
+	public function upcomingCards(): DataResponse {
+		return new DataResponse($this->dashboardService->findUpcomingCards($this->userId));
 	}
 }

lib/Dashboard/DeckWidget.php

@@ -0,0 +1,84 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+namespace OCA\Deck\Dashboard;
+
+use OCP\Dashboard\IWidget;
+use OCP\IL10N;
+
+class DeckWidget implements IWidget {
+
+	/**
+	 * @var IL10N
+	 */
+	private $l10n;
+
+	public function __construct(IL10N $l10n) {
+		$this->l10n = $l10n;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getId(): string {
+		return 'deck';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getTitle(): string {
+		return $this->l10n->t('Upcoming cards');
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getOrder(): int {
+		return 20;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getIconClass(): string {
+		return 'icon-deck';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getUrl(): ?string {
+		return null;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function load(): void {
+		\OCP\Util::addScript('deck', 'dashboard');
+	}
+}

lib/Service/OverviewService.php

@@ -107,23 +107,34 @@ class OverviewService {
 		return $allDueCards;
 	}
 
-	public function findAssignedCards(string $userId): array {
+	public function findUpcomingCards(string $userId): array {
 		$userBoards = $this->findAllBoardsFromUser($userId);
-		$allAssignedCards = [];
+		$findCards = [];
 		foreach ($userBoards as $userBoard) {
 			$service = $this;
-			$allAssignedCards[] = array_map(static function ($card) use ($service, $userBoard, $userId) {
-				$service->enrich($card, $userId);
-				$cardData = $card->jsonSerialize();
-				$cardData['boardId'] = $userBoard->getId();
-				return $cardData;
-			}, $this->cardMapper->findAssignedCards($userBoard->getId(), $userId));
+
+			if (count($userBoard->getAcl()) === 0) {
+				// get cards with due date
+				$findCards[] = array_map(static function ($card) use ($service, $userBoard, $userId) {
+					$service->enrich($card, $userId);
+					$cardData = $card->jsonSerialize();
+					$cardData['boardId'] = $userBoard->getId();
+					return $cardData;
+				}, $this->cardMapper->findAllWithDue($userBoard->getId()));
+			} else {
+				// get assigned cards
+				$findCards[] = array_map(static function ($card) use ($service, $userBoard, $userId) {
+					$service->enrich($card, $userId);
+					$cardData = $card->jsonSerialize();
+					$cardData['boardId'] = $userBoard->getId();
+					return $cardData;
+				}, $this->cardMapper->findAssignedCards($userBoard->getId(), $userId));
+			}
 		}
-		return $allAssignedCards;
+		return $findCards;
 	}
 
 	// FIXME: This is duplicate code with the board service
-
 	private function findAllBoardsFromUser(string $userId): array {
 		$userInfo = $this->getBoardPrerequisites($userId);
 		$userBoards = $this->boardMapper->findAllByUser($userInfo['user'], null, null);

package-lock.json

@@ -3851,6 +3851,23 @@
 				}
 			}
 		},
+		"@nextcloud/vue-dashboard": {
+			"version": "0.1.8",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue-dashboard/-/vue-dashboard-0.1.8.tgz",
+			"integrity": "sha512-OGr1oK/WF9+bYHK8dE8Vjwh3IDNamN+9MSti1VO7zuUSm5A9EGCzAghR7zzCG4O43rAJEDcvnQwsYIiA6g4Yrw==",
+			"requires": {
+				"@nextcloud/vue": "^2.3.0",
+				"core-js": "^3.6.4",
+				"vue": "^2.6.11"
+			},
+			"dependencies": {
+				"core-js": {
+					"version": "3.6.5",
+					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
+					"integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
+				}
+			}
+		},
 		"@nextcloud/webpack-vue-config": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@nextcloud/webpack-vue-config/-/webpack-vue-config-1.1.0.tgz",

package.json

@@ -40,6 +40,7 @@
 		"@nextcloud/moment": "^1.1.1",
 		"@nextcloud/router": "^1.1.0",
 		"@nextcloud/vue": "^2.6.0",
+		"@nextcloud/vue-dashboard": "^0.1.8",
 		"blueimp-md5": "^2.17.0",
 		"dompurify": "^2.0.12",
 		"lodash": "^4.17.20",

src/components/AttachmentDragAndDrop.vue

@@ -68,7 +68,13 @@
 import { Modal } from '@nextcloud/vue'
 import attachmentUpload from '../mixins/attachmentUpload'
 import { loadState } from '@nextcloud/initial-state'
-const maxUploadSizeState = loadState('deck', 'maxUploadSize')
+
+let maxUploadSizeState
+try {
+	maxUploadSizeState = loadState('deck', 'maxUploadSize')
+} catch (e) {
+	maxUploadSizeState = -1
+}
 
 export default {
 	name: 'AttachmentDragAndDrop',

src/components/cards/CardItem.vue

@@ -47,17 +47,11 @@
 					<input type="button" class="icon-confirm" @click="finishedEdit(card)">
 				</form>
 
-				<div v-if="!editing" class="duedate right">
-					<transition name="zoom">
-						<div v-if="card.duedate" :class="dueIcon">
-							<span>{{ relativeDate }}</span>
-						</div>
-					</transition>
-				</div>
+				<DueDate v-if="!editing" :card="card" />
 
 				<CardMenu v-if="!editing && compactMode" :card="card" class="right" />
 			</div>
-			<transition-group v-if="card.labels.length"
+			<transition-group v-if="card.labels && card.labels.length"
 				name="zoom"
 				tag="ul"
 				class="labels"
@@ -76,16 +70,16 @@
 <script>
 import ClickOutside from 'vue-click-outside'
 import { mapState, mapGetters } from 'vuex'
-import moment from 'moment'
 import CardBadges from './CardBadges'
 import Color from '../../mixins/color'
 import labelStyle from '../../mixins/labelStyle'
 import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
 import CardMenu from './CardMenu'
+import DueDate from './badges/DueDate'
 
 export default {
 	name: 'CardItem',
-	components: { CardBadges, AttachmentDragAndDrop, CardMenu },
+	components: { CardBadges, AttachmentDragAndDrop, CardMenu, DueDate },
 	directives: {
 		ClickOutside,
 	},
@@ -128,29 +122,7 @@ export default {
 		currentCard() {
 			return this.card && this.$route && this.$route.params.cardId === this.card.id
 		},
-		relativeDate() {
-			const diff = moment(this.$root.time).diff(this.card.duedate, 'seconds')
-			if (diff >= 0 && diff < 45) {
-				return t('core', 'seconds ago')
-			}
-			return moment(this.card.duedate).fromNow()
-		},
-		dueIcon() {
-			const days = Math.floor(moment(this.card.duedate).diff(this.$root.time, 'seconds') / 60 / 60 / 24)
-			if (days < 0) {
-				return 'icon-calendar due icon overdue'
-			}
-			if (days === 0) {
-				return 'icon-calendar-dark due icon now'
-			}
-			if (days === 1) {
-				return 'icon-calendar-dark due icon next'
-			}
-			return 'icon-calendar-dark due icon'
-		},
-		dueDateTooltip() {
-			return moment(this.card.duedate).format('LLLL')
-		},
+
 	},
 	methods: {
 		openCard() {
@@ -178,10 +150,6 @@ export default {
 	@import './../../css/animations';
 	@import './../../css/variables';
 
-	body.dark .card {
-		border: 1px solid var(--color-border);
-	}
-
 	.card:hover {
 		box-shadow: 0 0 5px 1px var(--color-box-shadow);
 	}
@@ -226,42 +194,7 @@ export default {
 			}
 		}
 
-		.labels {
-			flex-grow: 1;
-			flex-shrink: 1;
-			min-width: 0;
-			display: flex;
-			flex-direction: row;
-			margin-left: $card-padding;
-			margin-right: $card-padding;
-			margin-top: -5px;
-
-			li {
-				flex-grow: 0;
-				flex-shrink: 1;
-				display: flex;
-				flex-direction: row;
-				overflow: hidden;
-				padding: 0px 5px;
-				border-radius: 15px;
-				font-size: 85%;
-				margin-right: 3px;
-				margin-bottom: 3px;
-
-				&:hover {
-					overflow: unset;
-				}
-
-				span {
-					flex-grow: 0;
-					flex-shrink: 1;
-					min-width: 0;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
-			}
-		}
+		@import './../../css/labels';
 
 		.card-controls {
 			display: flex;
@@ -282,49 +215,6 @@ export default {
 		align-items: flex-start;
 	}
 
-	.icon.due {
-		background-position: 4px center;
-		border-radius: 3px;
-		margin-top: 9px;
-		margin-bottom: 9px;
-		padding: 3px 4px;
-		padding-right: 0;
-		font-size: 90%;
-		display: flex;
-		align-items: center;
-		opacity: .5;
-		flex-shrink: 1;
-		z-index: 2;
-
-		.icon {
-			background-size: contain;
-		}
-
-		&.overdue {
-			background-color: var(--color-error);
-			color: var(--color-primary-text);
-			opacity: .7;
-			padding: 3px 4px;
-		}
-		&.now {
-			background-color: var(--color-warning);
-			opacity: .7;
-			padding: 3px 4px;
-		}
-		&.next {
-			background-color: var(--color-background-dark);
-			opacity: .7;
-			padding: 3px 4px;
-		}
-
-		span {
-			margin-left: 20px;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-		}
-	}
-
 	.compact {
 		min-height: 44px;
 

src/components/cards/badges/DueDate.vue

@@ -0,0 +1,115 @@
+<!--
+  - @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div v-if="card" class="duedate">
+		<transition name="zoom">
+			<div v-if="card.duedate" :class="dueIcon">
+				<span>{{ relativeDate }}</span>
+			</div>
+		</transition>
+	</div>
+</template>
+
+<script>
+import moment from '@nextcloud/moment'
+
+export default {
+	name: 'DueDate',
+	props: {
+		card: {
+			type: Object,
+			default: null,
+		},
+	},
+	computed: {
+		dueIcon() {
+			const days = Math.floor(moment(this.card.duedate).diff(this.$root.time, 'seconds') / 60 / 60 / 24)
+			if (days < 0) {
+				return 'icon-calendar due icon overdue'
+			}
+			if (days === 0) {
+				return 'icon-calendar-dark due icon now'
+			}
+			if (days === 1) {
+				return 'icon-calendar-dark due icon next'
+			}
+			return 'icon-calendar-dark due icon'
+		},
+		relativeDate() {
+			const diff = moment(this.$root.time).diff(this.card.duedate, 'seconds')
+			if (diff >= 0 && diff < 45) {
+				return t('core', 'seconds ago')
+			}
+			return moment(this.card.duedate).fromNow()
+		},
+		dueDateTooltip() {
+			return moment(this.card.duedate).format('LLLL')
+		},
+	},
+}
+</script>
+
+<style lang="scss" coped>
+	.icon.due {
+		background-position: 4px center;
+		border-radius: 3px;
+		margin-top: 9px;
+		margin-bottom: 9px;
+		padding: 3px 4px;
+		padding-right: 0;
+		font-size: 90%;
+		display: flex;
+		align-items: center;
+		opacity: .5;
+		flex-shrink: 1;
+		z-index: 2;
+
+		.icon {
+			background-size: contain;
+		}
+
+		&.overdue {
+			background-color: var(--color-error);
+			color: var(--color-primary-text);
+			opacity: .7;
+			padding: 3px 4px;
+		}
+		&.now {
+			background-color: var(--color-warning);
+			opacity: .7;
+			padding: 3px 4px;
+		}
+		&.next {
+			background-color: var(--color-background-dark);
+			opacity: .7;
+			padding: 3px 4px;
+		}
+
+		span {
+			margin-left: 20px;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+		}
+	}
+</style>

src/components/navigation/AppNavigation.vue

@@ -24,9 +24,9 @@
 	<AppNavigationVue :class="{'icon-loading': loading}">
 		<template #list>
 			<AppNavigationItem
-				:title="t('deck', 'My assigned cards')"
-				icon="icon-group"
-				to="/overview/assigned" />
+				:title="t('deck', 'Upcoming cards')"
+				icon="icon-desktop"
+				to="/" />
 			<AppNavigationBoardCategory
 				id="deck-navigation-all"
 				to="/board"

src/components/overview/Overview.vue

@@ -21,8 +21,8 @@
   -->
 
 <template>
-	<div>
-		<Controls :dashboard-name="filterDisplayName" />
+	<div class="overview-wrapper">
+		<Controls :overview-name="filterDisplayName" />
 
 		<div v-if="loading" key="loading" class="emptycontent">
 			<div class="icon icon-loading" />
@@ -30,48 +30,46 @@
 			<p />
 		</div>
 
-		<div v-else>
-			<div v-if="isValidFilter" class="dashboard">
-				<div class="dashboard-column">
-					<h2>{{ t('deck', 'No due') }}</h2>
-					<div v-for="card in cardsByDueDate.nodue" :key="card.id">
-						<CardItem :id="card.id" />
-					</div>
+		<div v-else-if="isValidFilter" class="overview">
+			<div v-if="cardsByDueDate.overdue.length > 0" class="dashboard-column">
+				<h3>{{ t('deck', 'Overdue') }}</h3>
+				<div v-for="card in cardsByDueDate.overdue" :key="card.id">
+					<CardItem :id="card.id" />
 				</div>
+			</div>
 
-				<div class="dashboard-column">
-					<h2>{{ t('deck', 'Overdue') }}</h2>
-					<div v-for="card in cardsByDueDate.overdue" :key="card.id">
-						<CardItem :id="card.id" />
-					</div>
+			<div class="dashboard-column">
+				<h3>{{ t('deck', 'Today') }}</h3>
+				<div v-for="card in cardsByDueDate.today" :key="card.id">
+					<CardItem :id="card.id" />
 				</div>
+			</div>
 
-				<div class="dashboard-column">
-					<h2>{{ t('deck', 'Today') }}</h2>
-					<div v-for="card in cardsByDueDate.today" :key="card.id">
-						<CardItem :id="card.id" />
-					</div>
+			<div class="dashboard-column">
+				<h3>{{ t('deck', 'Tomorrow') }}</h3>
+				<div v-for="card in cardsByDueDate.tomorrow" :key="card.id">
+					<CardItem :id="card.id" />
 				</div>
+			</div>
 
-				<div class="dashboard-column">
-					<h2>{{ t('deck', 'Tomorrow') }}</h2>
-					<div v-for="card in cardsByDueDate.tomorrow" :key="card.id">
-						<CardItem :id="card.id" />
-					</div>
+			<div class="dashboard-column">
+				<h3>{{ t('deck', 'This week') }}</h3>
+				<div v-for="card in cardsByDueDate.thisWeek" :key="card.id">
+					<CardItem :id="card.id" />
 				</div>
+			</div>
 
-				<div class="dashboard-column">
-					<h2>{{ t('deck', 'This week') }}</h2>
-					<div v-for="card in cardsByDueDate.thisWeek" :key="card.id">
-						<CardItem :id="card.id" />
-					</div>
+			<div class="dashboard-column">
+				<h3>{{ t('deck', 'Later') }}</h3>
+				<div v-for="card in cardsByDueDate.later" :key="card.id">
+					<CardItem :id="card.id" />
 				</div>
+			</div>
 
-				<div class="dashboard-column">
-					<h2>{{ t('deck', 'Later') }}</h2>
-					<div v-for="card in cardsByDueDate.later" :key="card.id">
-						<CardItem :id="card.id" />
-					</div>
+			<div class="dashboard-column">
+				<h3>{{ t('deck', 'No due') }}</h3>
+				<div v-for="card in cardsByDueDate.nodue" :key="card.id">
+					<CardItem :id="card.id" />
 				</div>
 			</div>
 		</div>
@@ -85,12 +83,10 @@ import CardItem from '../cards/CardItem'
 import { mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
 
-const FILTER_DUE = 'due'
-const FILTER_ASSIGNED = 'assigned'
+const FILTER_UPCOMING = 'upcoming'
 
 const SUPPORTED_FILTERS = [
-	FILTER_ASSIGNED,
-	FILTER_DUE,
+	FILTER_UPCOMING,
 ]
 
 export default {
@@ -102,7 +98,7 @@ export default {
 	props: {
 		filter: {
 			type: String,
-			default: '',
+			default: FILTER_UPCOMING,
 		},
 	},
 	data() {
@@ -116,25 +112,21 @@ export default {
 		},
 		filterDisplayName() {
 			switch (this.filter) {
-			case 'assigned':
-				return t('deck', 'My assigned cards')
+			case FILTER_UPCOMING:
+				return t('deck', 'Upcoming cards')
 			default:
 				return ''
 			}
 		},
 		...mapGetters([
-			'withDueDashboard',
 			'assignedCardsDashboard',
 		]),
 		cardsByDueDate() {
 			switch (this.filter) {
-			case FILTER_ASSIGNED:
+			case FILTER_UPCOMING:
 				return this.groupByDue(this.assignedCardsDashboard)
-			case FILTER_DUE:
-				return this.groupByDue(this.withDueDashboard)
-			default:
-				return null
 			}
+			return null
 		},
 	},
 	watch: {
@@ -149,12 +141,8 @@ export default {
 		async getData() {
 			this.loading = true
 			try {
-				if (this.filter === 'due') {
-					await this.$store.dispatch('loadDueDashboard')
-				}
-
-				if (this.filter === 'assigned') {
-					await this.$store.dispatch('loadAssignDashboard')
+				if (this.filter === FILTER_UPCOMING) {
+					await this.$store.dispatch('loadUpcoming')
 				}
 			} catch (e) {
 				console.error(e)
@@ -172,7 +160,6 @@ export default {
 				later: [],
 			}
 			dataset.forEach(card => {
-
 				if (card.duedate === null) {
 					all.nodue.push(card)
 				} else {
@@ -195,10 +182,13 @@ export default {
 						all.later.push(card)
 					}
 				}
-
+			})
+			Object.keys(all).forEach((list) => {
+				all[list] = all[list].sort((a, b) => {
+					return (new Date(a.duedate)).getTime() - (new Date(b.duedate)).getTime()
+				})
 			})
 			return all
-
 		},
 	},
 
@@ -208,16 +198,39 @@ export default {
 <style lang="scss" scoped>
 @import './../../css/variables';
 
-.dashboard {
+.overview-wrapper {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	max-height: calc(100vh - 50px);
+}
+
+.overview {
+	position: relative;
+	height: calc(100% - 44px);
+	overflow-x: scroll;
 	display: flex;
 	align-items: stretch;
-	margin: $board-spacing;
+	padding-left: $board-spacing;
+	padding-right: $board-spacing;
 
 	.dashboard-column {
 		display: flex;
 		flex-direction: column;
-		width: $stack-width;
-		margin: $stack-spacing;
+		min-width: $stack-width;
+		margin-left: $stack-spacing;
+		margin-right: $stack-spacing;
+
+		h3 {
+			margin: -6px;
+			margin-bottom: 12px;
+			padding: 6px 13px;
+			position: sticky;
+			top: 0;
+			z-index: 100;
+			background-color: var(--color-main-background);
+			border: 1px solid var(--color-main-background);
+		}
 	}
 }
 

src/css/dashboard.scss

@@ -0,0 +1,7 @@
+.icon-deck {
+	background-image: url(./../../img/deck-dark.svg);
+}
+
+body.dark .icon-deck {
+	background-image: url(./../../img/deck.svg);
+}

src/css/labels.scss

@@ -0,0 +1,39 @@
+$card-spacing: 10px;
+$card-padding: 10px;
+
+.labels {
+	flex-grow: 1;
+	flex-shrink: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: row;
+	margin-left: $card-padding;
+	margin-right: $card-padding;
+	margin-top: -5px;
+
+	li {
+		flex-grow: 0;
+		flex-shrink: 1;
+		display: flex;
+		flex-direction: row;
+		overflow: hidden;
+		padding: 0px 5px;
+		border-radius: 15px;
+		font-size: 85%;
+		margin-right: 3px;
+		margin-bottom: 3px;
+
+		&:hover {
+			overflow: unset;
+		}
+
+		span {
+			flex-grow: 0;
+			flex-shrink: 1;
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+}

src/css/variables.scss

@@ -1,5 +1,5 @@
-$card-spacing: 10px;
-$card-padding: 10px;
-$stack-spacing: 10px;
+$card-spacing: 16px;
+$card-padding: 8px;
+$stack-spacing: 12px;
 $stack-width: 260px;
-$board-spacing: 15px;
+$board-spacing: 16px;

src/init-dashboard.js

@@ -0,0 +1,61 @@
+/*
+ * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import overview from './store/overview'
+
+import './css/dashboard.scss'
+
+import Dashboard from './views/Dashboard.vue'
+
+Vue.use(Vuex)
+
+const debug = process.env.NODE_ENV !== 'production'
+
+const store = new Vuex.Store({
+	modules: {
+		overview,
+	},
+	strict: debug,
+})
+
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(OC.requestToken);
+// eslint-disable-next-line
+__webpack_public_path__ = OC.linkTo('deck', 'js/');
+
+Vue.prototype.t = t
+Vue.prototype.n = n
+Vue.prototype.OC = OC
+
+document.addEventListener('DOMContentLoaded', () => {
+	OCA.Dashboard.register('deck', (el) => {
+		const View = Vue.extend(Dashboard)
+		const vm = new View({
+			propsData: {},
+			store,
+		}).$mount(el)
+		return vm
+	})
+})

src/router.js

@@ -40,7 +40,7 @@ export default new Router({
 		{
 			path: '/',
 			name: 'main',
-			component: Boards,
+			component: Overview,
 		},
 		{
 			path: '/overview/:filter',

src/services/OverviewApi.js

@@ -29,20 +29,8 @@ export class OverviewApi {
 		return generateOcsUrl(`apps/deck/api/v1.0`) + url
 	}
 
-	findAllWithDue(data) {
-		return axios.get(this.url(`overview/due`), {
-			headers: { 'OCS-APIRequest': 'true' },
-		})
-			.then(
-				(response) => Promise.resolve(response.data.ocs.data),
-				(err) => Promise.reject(err)
-			)
-			.catch((err) => Promise.reject(err)
-			)
-	}
-
-	findMyAssignedCards(data) {
-		return axios.get(this.url(`overview/assigned`), {
+	get(filter) {
+		return axios.get(this.url(`overview/${filter}`), {
 			headers: { 'OCS-APIRequest': 'true' },
 		})
 			.then(

src/store/overview.js

@@ -28,39 +28,22 @@ Vue.use(Vuex)
 const apiClient = new OverviewApi()
 export default {
 	state: {
-		withDue: [],
 		assignedCards: [],
 	},
 	getters: {
-		withDueDashboard: state => {
-			return state.withDue
-		},
 		assignedCardsDashboard: state => {
 			return state.assignedCards
 		},
 	},
 	mutations: {
-		setWithDueDashboard(state, withDue) {
-			state.withDue = withDue
-		},
 		setAssignedCards(state, assignedCards) {
 			state.assignedCards = assignedCards
 		},
 	},
 	actions: {
-		async loadDueDashboard({ commit }) {
+		async loadUpcoming({ commit }) {
 			commit('setCurrentBoard', null)
-			const cardsWithDueDate = await apiClient.findAllWithDue()
-			const withDueFlat = cardsWithDueDate.flat()
-			for (const i in withDueFlat) {
-				commit('addCard', withDueFlat[i])
-			}
-			commit('setWithDueDashboard', withDueFlat)
-		},
-
-		async loadAssignDashboard({ commit }) {
-			commit('setCurrentBoard', null)
-			const assignedCards = await apiClient.findMyAssignedCards()
+			const assignedCards = await apiClient.get('upcoming')
 			const assignedCardsFlat = assignedCards.flat()
 			for (const i in assignedCardsFlat) {
 				commit('addCard', assignedCardsFlat[i])

src/views/Dashboard.vue

@@ -0,0 +1,150 @@
+<!--
+  - @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<DashboardWidget :items="cards"
+		:show-more-text="t('deck', 'upcoming cards')"
+		:show-more-url="showMoreUrl"
+		:loading="loading"
+		@hide="() => {}"
+		@markDone="() => {}">
+		<template v-slot:default="{ item }">
+			<a :key="item.id"
+				:href="cardLink(item)"
+				target="_blank"
+				class="card">
+				<div class="card--header">
+					<DueDate class="right" :card="item" />
+					<span class="title">{{ item.title }}</span>
+				</div>
+				<ul v-if="item.labels && item.labels.length"
+					class="labels">
+					<li v-for="label in item.labels" :key="label.id" :style="labelStyle(label)">
+						<span>{{ label.title }}</span>
+					</li>
+				</ul>
+			</a>
+		</template>
+		<template v-slot:empty-content>
+			<EmptyContent
+				id="deck-widget-empty-content"
+				icon="icon-deck">
+				{{ t('deck', 'No upcoming cards') }}
+			</EmptyContent>
+		</template>
+	</DashboardWidget>
+</template>
+
+<script>
+import { DashboardWidget } from '@nextcloud/vue-dashboard'
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import { mapGetters } from 'vuex'
+import labelStyle from './../mixins/labelStyle'
+import DueDate from '../components/cards/badges/DueDate'
+import { generateUrl } from '@nextcloud/router'
+
+export default {
+	name: 'Dashboard',
+	components: {
+		DueDate,
+		EmptyContent,
+		DashboardWidget,
+	},
+	mixins: [ labelStyle ],
+	data() {
+		return {
+			loading: false,
+		}
+	},
+	computed: {
+		...mapGetters([
+			'assignedCardsDashboard',
+		]),
+		cards() {
+			const list = [
+				...this.assignedCardsDashboard,
+			].filter((card) => {
+				return card.duedate !== null
+			})
+			list.sort((a, b) => {
+				return (new Date(a.duedate)).getTime() - (new Date(b.duedate)).getTime()
+			})
+			return list
+		},
+		cardLink() {
+			return (card) => {
+				return generateUrl('/apps/deck') + `#/board/${card.boardId}/card/${card.id}`
+			}
+		},
+		showMoreUrl() {
+			return this.cards.length > 7 ? generateUrl('/apps/deck') : null
+		},
+	},
+	beforeMount() {
+		this.loading = true
+		this.$store.dispatch('loadUpcoming').then(() => {
+			this.loading = false
+		})
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	@import './../css/labels';
+
+	.card {
+		display: block;
+		border-radius: var(--border-radius-large);
+		padding: 8px;
+		height: 60px;
+
+		&:hover {
+			background-color: var(--color-background-hover);
+		}
+	}
+
+	.card--header {
+		overflow: hidden;
+		.title {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			display: block;
+		}
+	}
+
+	.labels {
+		margin-left: 0;
+	}
+
+	.duedate::v-deep {
+		.due {
+			margin: 0 0 0 10px;
+			padding: 2px 4px;
+			font-size: 90%;
+		}
+	}
+
+	.right {
+		float: right;
+	}
+</style>

webpack.js

@@ -6,6 +6,7 @@ const config = {
 	entry: {
 		deck: path.join(__dirname, 'src', 'main.js'),
 		collections: path.join(__dirname, 'src', 'init-collections.js'),
+		dashboard: path.join(__dirname, 'src', 'init-dashboard.js'),
 	},
 	output: {
 		filename: '[name].js',