Merge pull request #1934 from nextcloud/enh/cardDashboard

appinfo/routes.php

@@ -66,6 +66,7 @@ return [
 		['name' => 'card#assignUser', 'url' => '/cards/{cardId}/assign', 'verb' => 'POST'],
 		['name' => 'card#unassignUser', 'url' => '/cards/{cardId}/unassign', 'verb' => 'PUT'],
 
+		// attachments
 		['name' => 'attachment#getAll', 'url' => '/cards/{cardId}/attachments', 'verb' => 'GET'],
 		['name' => 'attachment#create', 'url' => '/cards/{cardId}/attachment', 'verb' => 'POST'],
 		['name' => 'attachment#display', 'url' => '/cards/{cardId}/attachment/{attachmentId}', 'verb' => 'GET'],
@@ -110,6 +111,8 @@ return [
 		['name' => 'card_api#reorder', 'url' => '/api/v1.0/boards/{boardId}/stacks/{stackId}/cards/{cardId}/reorder', 'verb' => 'PUT'],
 		['name' => 'card_api#delete', 'url' => '/api/v1.0/boards/{boardId}/stacks/{stackId}/cards/{cardId}', 'verb' => 'DELETE'],
 
+		['name' => 'card_api#findAllWithDue', 'url' => '/api/v1.0/dashboard/due', 'verb' => 'GET'],
+
 		['name' => 'label_api#get', 'url' => '/api/v1.0/boards/{boardId}/labels/{labelId}', 'verb' => 'GET'],
 		['name' => 'label_api#create', 'url' => '/api/v1.0/boards/{boardId}/labels', 'verb' => 'POST'],
 		['name' => 'label_api#update', 'url' => '/api/v1.0/boards/{boardId}/labels/{labelId}', 'verb' => 'PUT'],
@@ -131,5 +134,9 @@ return [
 		['name' => 'comments_api#create', 'url' => '/api/v1.0/cards/{cardId}/comments', 'verb' => 'POST'],
 		['name' => 'comments_api#update', 'url' => '/api/v1.0/cards/{cardId}/comments/{commentId}', 'verb' => 'PUT'],
 		['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'],
 	]
 ];

lib/Controller/OverviewApiController.php

@@ -0,0 +1,61 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * @copyright Copyright (c) 2020 Jakob Röhrl <jakob.roehrl@web.de>
+ *
+ * @author Jakob Röhrl <jakob.roehrl@web.de>
+ *
+ * @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\Controller;
+
+use OCA\Deck\Service\OverviewService;
+use OCP\AppFramework\Http\DataResponse;
+use OCP\AppFramework\OCSController;
+use OCP\IRequest;
+
+class OverviewApiController extends OCSController {
+
+	/** @var OverviewService */
+	private $dashboardService;
+
+	/** @var string */
+	private $userId;
+
+	public function __construct($appName, IRequest $request, OverviewService $dashboardService, $userId) {
+		parent::__construct($appName, $request);
+		$this->dashboardService = $dashboardService;
+		$this->userId = $userId;
+	}
+
+	/**
+	 * @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));
+	}
+}

lib/Db/CardMapper.php

@@ -141,6 +141,23 @@ class CardMapper extends DeckMapper implements IPermissionMapper {
 		return $this->findEntities($sql, [$stackId], $limit, $offset);
 	}
 
+	public function findAllWithDue($boardId) {
+		$sql = 'SELECT c.* FROM `*PREFIX*deck_cards` c
+	  	INNER JOIN `*PREFIX*deck_stacks` s ON s.id = c.stack_id
+		INNER JOIN `*PREFIX*deck_boards` b ON b.id = s.board_id
+		  WHERE `s`.`board_id` = ? AND duedate IS NOT NULL AND NOT c.archived AND c.deleted_at = 0 AND s.deleted_at = 0 AND NOT b.archived AND b.deleted_at = 0';
+		return $this->findEntities($sql, [$boardId]);
+	}
+
+	public function findAssignedCards($boardId, $username) {
+		$sql = 'SELECT c.* FROM `*PREFIX*deck_cards` c
+	  	INNER JOIN `*PREFIX*deck_stacks` s ON s.id = c.stack_id
+		INNER JOIN `*PREFIX*deck_boards` b ON b.id = s.board_id
+		INNER JOIN `*PREFIX*deck_assigned_users` u ON c.id = card_id
+		  WHERE `s`.`board_id` = ? AND participant = ? AND NOT c.archived AND c.deleted_at = 0 AND s.deleted_at = 0 AND NOT b.archived AND b.deleted_at = 0';
+		return $this->findEntities($sql, [$boardId, $username]);
+	}
+
 	public function findOverdue() {
 		$sql = 'SELECT id,title,duedate,notified from `*PREFIX*deck_cards` WHERE duedate < NOW() AND NOT archived AND deleted_at = 0';
 		return $this->findEntities($sql);

lib/Service/CardService.php

@@ -564,4 +564,28 @@ class CardService {
 			'\OCA\Deck\Card::onUpdate', new FTSEvent(null, ['id' => $cardId, 'card' => $card])
 		);
 	}
+
+	/**
+	 *
+	 * @return array
+	 * @throws \OCA\Deck\NoPermissionException
+	 * @throws BadRequestException
+	 */
+	public function findAllWithDue($userId) {
+		$cards = $this->cardMapper->findAllWithDue($userId);
+		
+		return $cards;
+	}
+
+	/**
+	 *
+	 * @return array
+	 * @throws \OCA\Deck\NoPermissionException
+	 * @throws BadRequestException
+	 */
+	public function findAssignedCards($userId) {
+		$cards = $this->cardMapper->findAssignedCards($userId);
+		
+		return $cards;
+	}
 }

lib/Service/OverviewService.php

@@ -0,0 +1,143 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * @copyright Copyright (c) 2016 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ * @author Maxence Lange <maxence@artificial-owl.com>
+ *
+ * @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\Service;
+
+use OCA\Deck\Db\AssignedUsersMapper;
+use OCA\Deck\Db\Card;
+use OCA\Deck\Db\CardMapper;
+use OCP\Comments\ICommentsManager;
+use OCP\IGroupManager;
+use OCA\Deck\Db\Board;
+use OCA\Deck\Db\BoardMapper;
+use OCA\Deck\Db\LabelMapper;
+use OCP\IUserManager;
+
+class OverviewService {
+
+	/** @var BoardMapper */
+	private $boardMapper;
+	/** @var LabelMapper */
+	private $labelMapper;
+	/** @var CardMapper */
+	private $cardMapper;
+	/** @var AssignedUsersMapper */
+	private $assignedUsersMapper;
+	/** @var IUserManager */
+	private $userManager;
+	/** @var IGroupManager */
+	private $groupManager;
+	/** @var ICommentsManager */
+	private $commentsManager;
+	/** @var AttachmentService */
+	private $attachmentService;
+
+	public function __construct(
+		BoardMapper $boardMapper,
+		LabelMapper $labelMapper,
+		CardMapper $cardMapper,
+		AssignedUsersMapper $assignedUsersMapper,
+		IUserManager $userManager,
+		IGroupManager $groupManager,
+		ICommentsManager $commentsManager,
+		AttachmentService $attachmentService
+	) {
+		$this->boardMapper = $boardMapper;
+		$this->labelMapper = $labelMapper;
+		$this->cardMapper = $cardMapper;
+		$this->assignedUsersMapper = $assignedUsersMapper;
+		$this->userManager = $userManager;
+		$this->groupManager = $groupManager;
+		$this->commentsManager = $commentsManager;
+		$this->attachmentService = $attachmentService;
+	}
+
+	public function enrich(Card $card, string $userId): void {
+		$cardId = $card->getId();
+
+		$this->cardMapper->mapOwner($card);
+		$card->setAssignedUsers($this->assignedUsersMapper->find($cardId));
+		$card->setLabels($this->labelMapper->findAssignedLabelsForCard($cardId));
+		$card->setAttachmentCount($this->attachmentService->count($cardId));
+
+		$user = $this->userManager->get($userId);
+		if ($user !== null) {
+			$lastRead = $this->commentsManager->getReadMark('deckCard', (string)$card->getId(), $user);
+			$count = $this->commentsManager->getNumberOfCommentsForObject('deckCard', (string)$card->getId(), $lastRead);
+			$card->setCommentsUnread($count);
+		}
+	}
+
+	public function findAllWithDue(string $userId): array {
+		$userBoards = $this->findAllBoardsFromUser($userId);
+		$allDueCards = [];
+		foreach ($userBoards as $userBoard) {
+			$service = $this;
+			$allDueCards[] = 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()));
+		}
+		return $allDueCards;
+	}
+
+	public function findAssignedCards(string $userId): array {
+		$userBoards = $this->findAllBoardsFromUser($userId);
+		$allAssignedCards = [];
+		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));
+		}
+		return $allAssignedCards;
+	}
+
+	// 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);
+		$groupBoards = $this->boardMapper->findAllByGroups($userInfo['user'], $userInfo['groups'],null, null);
+		$circleBoards = $this->boardMapper->findAllByCircles($userInfo['user'], null, null);
+		return array_merge($userBoards, $groupBoards, $circleBoards);
+	}
+
+	private function getBoardPrerequisites($userId): array {
+		$user = $this->userManager->get($userId);
+		$groups = $user !== null ? $this->groupManager->getUserGroupIds($user) : [];
+		return [
+			'user' => $userId,
+			'groups' => $groups
+		];
+	}
+}

src/components/Controls.vue

@@ -30,6 +30,9 @@
 				({{ t('deck', 'Archived cards') }})
 			</p>
 		</div>
+		<div v-if="overviewName" class="board-title">
+			<h2><a href="#">{{ overviewName }}</a></h2>
+		</div>
 		<div v-if="board" class="board-actions">
 			<div v-if="canManage && !showArchived && !board.archived"
 				id="stack-add"
@@ -206,6 +209,11 @@ export default {
 			required: false,
 			default: null,
 		},
+		overviewName: {
+			type: String,
+			required: false,
+			default: null,
+		},
 	},
 	data() {
 		return {

src/components/board/Board.vue

@@ -158,10 +158,7 @@ export default {
 <style lang="scss" scoped>
 
 	@import '../../css/animations.scss';
-
-	$board-spacing: 15px;
-	$stack-spacing: 10px;
-	$stack-width: 300px;
+	@import '../../css/variables.scss';
 
 	form {
 		text-align: center;

src/components/board/Stack.vue

@@ -253,8 +253,7 @@ export default {
 
 <style lang="scss" scoped>
 
-	$stack-spacing: 10px;
-	$stack-width: 260px;
+	@import './../../css/variables';
 
 	.stack {
 		width: $stack-width;

src/components/cards/CardBadges.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div class="badges">
+	<div v-if="card" class="badges">
 		<div v-if="card.commentsUnread > 0" class="icon icon-comment" />
 
 		<div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
@@ -34,7 +34,7 @@
 
 		<AvatarList :users="card.assignedUsers" />
 
-		<CardMenu :id="id" />
+		<CardMenu :card="card" />
 	</div>
 </template>
 <script>
@@ -45,8 +45,8 @@ export default {
 	name: 'CardBadges',
 	components: { AvatarList, CardMenu },
 	props: {
-		id: {
-			type: Number,
+		card: {
+			type: Object,
 			default: null,
 		},
 	},
@@ -57,9 +57,6 @@ export default {
 		checkListCheckedCount() {
 			return (this.card.description.match(/^\s*([*+-]|(\d\.))\s+\[\s*x\s*\](.*)$/gim) || []).length
 		},
-		card() {
-			return this.$store.getters.cardById(this.id)
-		},
 	},
 }
 </script>

src/components/cards/CardItem.vue

@@ -25,7 +25,7 @@
   -->
 
 <template>
-	<AttachmentDragAndDrop :card-id="id" class="drop-upload--card">
+	<AttachmentDragAndDrop v-if="card" :card-id="card.id" class="drop-upload--card">
 		<div :class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'is-editing': editing}"
 			tag="div"
 			class="card"
@@ -55,7 +55,7 @@
 					</transition>
 				</div>
 
-				<CardMenu v-if="!editing && compactMode" :id="id" class="right" />
+				<CardMenu v-if="!editing && compactMode" :card="card" class="right" />
 			</div>
 			<transition-group v-if="card.labels.length"
 				name="zoom"
@@ -67,7 +67,7 @@
 				</li>
 			</transition-group>
 			<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
-				<CardBadges :id="id" />
+				<CardBadges :card="card" />
 			</div>
 		</div>
 	</AttachmentDragAndDrop>
@@ -95,6 +95,10 @@ export default {
 			type: Number,
 			default: null,
 		},
+		item: {
+			type: Object,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -109,14 +113,20 @@ export default {
 			currentBoard: state => state.currentBoard,
 		}),
 		...mapGetters([
-			'canEdit',
 			'isArchived',
 		]),
+		canEdit() {
+			if (this.currentBoard) {
+				return this.$store.getters.canEdit
+			}
+			const board = this.$store.getters.boards.find((item) => item.id === this.card.boardId)
+			return board.permissions.PERMISSION_EDIT
+		},
 		card() {
-			return this.$store.getters.cardById(this.id)
+			return this.item ? this.item : this.$store.getters.cardById(this.id)
 		},
 		currentCard() {
-			return this.$route.params.cardId === this.id
+			return this.card && this.$route && this.$route.params.cardId === this.card.id
 		},
 		relativeDate() {
 			const diff = moment(this.$root.time).diff(this.card.duedate, 'seconds')
@@ -144,7 +154,8 @@ export default {
 	},
 	methods: {
 		openCard() {
-			this.$router.push({ name: 'card', params: { cardId: this.id } }).catch(() => {})
+			const boardId = this.card && this.card.boardId ? this.card.boardId : this.$route.params.id
+			this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => {})
 		},
 		startEditing(card) {
 			this.copiedCard = Object.assign({}, card)
@@ -165,9 +176,7 @@ export default {
 
 <style lang="scss" scoped>
 	@import './../../css/animations';
-
-	$card-spacing: 10px;
-	$card-padding: 10px;
+	@import './../../css/variables';
 
 	body.dark .card {
 		border: 1px solid var(--color-border);

src/components/cards/CardMenu.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div>
+	<div v-if="card">
 		<div @click.stop.prevent>
 			<Actions v-if="canEdit && !isArchived">
 				<ActionButton v-if="showArchived === false && !isCurrentUserAssigned" icon="icon-user" @click="assignCardToMe()">
@@ -80,8 +80,8 @@ export default {
 	name: 'CardMenu',
 	components: { Actions, ActionButton, Modal, Multiselect },
 	props: {
-		id: {
-			type: Number,
+		card: {
+			type: Object,
 			default: null,
 		},
 	},
@@ -95,16 +95,18 @@ export default {
 	},
 	computed: {
 		...mapGetters([
-			'canEdit',
 			'isArchived',
 		]),
 		...mapState({
 			showArchived: state => state.showArchived,
 			currentBoard: state => state.currentBoard,
 		}),
-
-		card() {
-			return this.$store.getters.cardById(this.id)
+		canEdit() {
+			if (this.currentBoard) {
+				return this.$store.getters.canEdit
+			}
+			const board = this.$store.getters.boards.find((item) => item.id === this.card.boardId)
+			return board.permissions.PERMISSION_EDIT
 		},
 		isBoardAndStackChoosen() {
 			if (this.selectedBoard === '' || this.selectedStack === '') {

src/components/navigation/AppNavigation.vue

@@ -23,6 +23,10 @@
 <template>
 	<AppNavigationVue :class="{'icon-loading': loading}">
 		<template #list>
+			<AppNavigationItem
+				:title="t('deck', 'My assigned cards')"
+				icon="icon-group"
+				to="/overview/assigned" />
 			<AppNavigationBoardCategory
 				id="deck-navigation-all"
 				to="/board"
@@ -68,7 +72,7 @@
 import axios from '@nextcloud/axios'
 import { mapGetters } from 'vuex'
 import ClickOutside from 'vue-click-outside'
-import { AppNavigation as AppNavigationVue, AppNavigationSettings, Multiselect } from '@nextcloud/vue'
+import { AppNavigation as AppNavigationVue, AppNavigationItem, AppNavigationSettings, Multiselect } from '@nextcloud/vue'
 import AppNavigationAddBoard from './AppNavigationAddBoard'
 import AppNavigationBoardCategory from './AppNavigationBoardCategory'
 import { loadState } from '@nextcloud/initial-state'
@@ -84,6 +88,7 @@ export default {
 		AppNavigationAddBoard,
 		AppNavigationBoardCategory,
 		Multiselect,
+		AppNavigationItem,
 	},
 	directives: {
 		ClickOutside,
@@ -111,7 +116,6 @@ export default {
 		]),
 		isAdmin() {
 			// eslint-disable-next-line
-			//return oc_isadmin
 			return OC.isUserAdmin()
 		},
 	},

src/components/overview/Overview.vue

@@ -0,0 +1,224 @@
+<!--
+  - @copyright Copyright (c) 2018 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>
+		<Controls :dashboard-name="filterDisplayName" />
+
+		<div v-if="loading" key="loading" class="emptycontent">
+			<div class="icon icon-loading" />
+			<h2>{{ t('deck', 'Loading filtered view') }}</h2>
+			<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>
+
+				<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>
+
+				<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>
+
+				<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>
+
+				<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>
+
+				<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>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+
+import Controls from '../Controls'
+import CardItem from '../cards/CardItem'
+import { mapGetters } from 'vuex'
+import moment from '@nextcloud/moment'
+
+const FILTER_DUE = 'due'
+const FILTER_ASSIGNED = 'assigned'
+
+const SUPPORTED_FILTERS = [
+	FILTER_ASSIGNED,
+	FILTER_DUE,
+]
+
+export default {
+	name: 'Overview',
+	components: {
+		Controls,
+		CardItem,
+	},
+	props: {
+		filter: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			loading: true,
+		}
+	},
+	computed: {
+		isValidFilter() {
+			return SUPPORTED_FILTERS.indexOf(this.filter) > -1
+		},
+		filterDisplayName() {
+			switch (this.filter) {
+			case 'assigned':
+				return t('deck', 'My assigned cards')
+			default:
+				return ''
+			}
+		},
+		...mapGetters([
+			'withDueDashboard',
+			'assignedCardsDashboard',
+		]),
+		cardsByDueDate() {
+			switch (this.filter) {
+			case FILTER_ASSIGNED:
+				return this.groupByDue(this.assignedCardsDashboard)
+			case FILTER_DUE:
+				return this.groupByDue(this.withDueDashboard)
+			default:
+				return null
+			}
+		},
+	},
+	watch: {
+		'$route.params.filter'() {
+			this.getData()
+		},
+	},
+	created() {
+		this.getData()
+	},
+	methods: {
+		async getData() {
+			this.loading = true
+			try {
+				if (this.filter === 'due') {
+					await this.$store.dispatch('loadDueDashboard')
+				}
+
+				if (this.filter === 'assigned') {
+					await this.$store.dispatch('loadAssignDashboard')
+				}
+			} catch (e) {
+				console.error(e)
+			}
+			this.loading = false
+		},
+
+		groupByDue(dataset) {
+			const all = {
+				nodue: [],
+				overdue: [],
+				today: [],
+				tomorrow: [],
+				thisWeek: [],
+				later: [],
+			}
+			dataset.forEach(card => {
+
+				if (card.duedate === null) {
+					all.nodue.push(card)
+				} else {
+					const hours = Math.floor(moment(card.duedate).diff(this.$root.time, 'seconds') / 60 / 60)
+					const d = new Date()
+					const currentHour = d.getHours()
+					if (hours < 0) {
+						all.overdue.push(card)
+					}
+					if (hours >= 0 && hours < (24 - currentHour)) {
+						all.today.push(card)
+					}
+					if (hours >= (24 - currentHour) && hours < (48 - currentHour)) {
+						all.tomorrow.push(card)
+					}
+					if (hours >= (48 - currentHour) && hours < (24 * 7)) {
+						all.thisWeek.push(card)
+					}
+					if (hours >= (24 * 7)) {
+						all.later.push(card)
+					}
+				}
+
+			})
+			return all
+
+		},
+	},
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import './../../css/variables';
+
+.dashboard {
+	display: flex;
+	align-items: stretch;
+	margin: $board-spacing;
+
+	.dashboard-column {
+		display: flex;
+		flex-direction: column;
+		width: $stack-width;
+		margin: $stack-spacing;
+	}
+}
+
+</style>

src/css/variables.scss

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

src/router.js

@@ -29,6 +29,7 @@ import Board from './components/board/Board'
 import Sidebar from './components/Sidebar'
 import BoardSidebar from './components/board/BoardSidebar'
 import CardSidebar from './components/card/CardSidebar'
+import Overview from './components/overview/Overview'
 
 Vue.use(Router)
 
@@ -41,6 +42,20 @@ export default new Router({
 			name: 'main',
 			component: Boards,
 		},
+		{
+			path: '/overview/:filter',
+			name: 'overview',
+			components: {
+				default: Overview,
+			},
+			props: {
+				default: (route) => {
+					return {
+						filter: route.params.filter,
+					}
+				},
+			},
+		},
 		{
 			path: '/board',
 			name: 'boards',

src/services/OverviewApi.js

@@ -0,0 +1,56 @@
+/*
+ * @copyright Copyright (c) 2020 Jakob Röhrl <jakob.roehrl@web.de>
+ *
+ * @author Jakob Röhrl <jakob.roehrl@web.de>
+ *
+ * @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 axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+
+export class OverviewApi {
+
+	url(url) {
+		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`), {
+			headers: { 'OCS-APIRequest': 'true' },
+		})
+			.then(
+				(response) => Promise.resolve(response.data.ocs.data),
+				(err) => Promise.reject(err)
+			)
+			.catch((err) => Promise.reject(err)
+			)
+	}
+
+}

src/store/card.js

@@ -96,9 +96,6 @@ export default {
 		},
 	},
 	mutations: {
-		clearCards(state) {
-			state.cards = []
-		},
 		addCard(state, card) {
 			card.labels = card.labels || []
 			card.assignedUsers = card.assignedUsers || []

src/store/main.js

@@ -26,12 +26,13 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
-import { BoardApi } from './../services/BoardApi'
+import { BoardApi } from '../services/BoardApi'
 import stack from './stack'
 import card from './card'
 import comment from './comment'
 import trashbin from './trashbin'
 import attachment from './attachment'
+import overview from './overview'
 import debounce from 'lodash/debounce'
 Vue.use(Vuex)
 
@@ -51,6 +52,7 @@ export default new Vuex.Store({
 		comment,
 		trashbin,
 		attachment,
+		overview,
 	},
 	strict: debug,
 	state: {

src/store/overview.js

@@ -0,0 +1,71 @@
+/*
+ * @copyright Copyright (c) 2020 Jakob Röhrl <jakob.roehrl@web.de>
+ *
+ * @author Jakob Röhrl <jakob.roehrl@web.de>
+ *
+ * @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 { OverviewApi } from '../services/OverviewApi'
+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 }) {
+			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 assignedCardsFlat = assignedCards.flat()
+			for (const i in assignedCardsFlat) {
+				commit('addCard', assignedCardsFlat[i])
+			}
+			commit('setAssignedCards', assignedCardsFlat)
+		},
+	},
+}

src/store/stack.js

@@ -76,7 +76,6 @@ export default {
 				})
 		},
 		async loadStacks({ commit }, boardId) {
-			commit('clearCards')
 			let call = 'loadStacks'
 			if (this.state.showArchived === true) {
 				call = 'loadArchivedStacks'