Implement dashboard panel

Signed-off-by: Julius Härtl <[email protected]>

lib/AppInfo/Application.php

@@ -29,6 +29,7 @@
 use OCA\Deck\Capabilities;
 use OCA\Deck\Collaboration\Resources\ResourceProvider;
 use OCA\Deck\Collaboration\Resources\ResourceProviderCard;
+use OCA\Deck\Dashboard\DeckPanel;
 use OCA\Deck\Db\Acl;
 use OCA\Deck\Db\AclMapper;
 use OCA\Deck\Db\AssignedUsersMapper;
@@ -43,6 +44,7 @@
 use OCP\Collaboration\Resources\IManager;
 use OCP\Collaboration\Resources\IProviderManager;
 use OCP\Comments\CommentsEntityEvent;
+use OCP\Dashboard\RegisterPanelEvent;
 use OCP\EventDispatcher\Event;
 use OCP\EventDispatcher\IEventDispatcher;
 use OCP\FullTextSearch\IFullTextSearchManager;
@@ -85,6 +87,16 @@ public function __construct(array $urlParams = []) {
 		$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(RegisterPanelEvent::class, function (RegisterPanelEvent $event) use ($container) {
+				\OCP\Util::addScript('myapp', 'dashboard');
+				$event->registerPanel(DeckPanel::class);
+			});
+		}
 	}
 
 	public function register(): void {

lib/Dashboard/DeckPanel.php

@@ -0,0 +1,75 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * @copyright Copyright (c) 2020 Julius Härtl <[email protected]>
+ *
+ * @author Julius Härtl <[email protected]>
+ *
+ * @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\IPanel;
+
+class DeckPanel implements IPanel {
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getId(): string {
+		return 'deck';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getTitle(): string {
+		return 'Deck';
+	}
+
+	/**
+	 * @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');
+	}
+}

src/css/dashboard.scss

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

src/init-dashboard.js

@@ -0,0 +1,60 @@
+/*
+ * @copyright Copyright (c) 2019 Julius Härtl <[email protected]>
+ *
+ * @author Julius Härtl <[email protected]>
+ *
+ * @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 dashboard from './store/dashboard'
+
+Vue.use(Vuex)
+
+const debug = process.env.NODE_ENV !== 'production'
+
+const store = new Vuex.Store({
+	modules: {
+		dashboard,
+	},
+	strict: debug,
+})
+
+import './css/dashboard.scss'
+
+// 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;
+
+import Dashboard from './views/Dashboard.vue'
+
+document.addEventListener('DOMContentLoaded', () => {
+	OCA.Dashboard.register('deck', (el) => {
+		const View = Vue.extend(Dashboard)
+		const vm = new View({
+			propsData: {},
+			store,
+		}).$mount(el)
+	})
+})

src/views/Dashboard.vue

@@ -0,0 +1,109 @@
+<!--
+  - @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <[email protected]>
+  -
+  - @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>
+		<a :href="cardLink(card)" class="card" v-for="card in assignedCardsDashboard">
+			<div class="card--header">
+				<DueDate class="right" :card="card" />
+				<span>{{ card.title }}</span>
+			</div>
+			<ul v-if="card.labels && card.labels.length"
+				  class="labels"
+				  @click="openCard">
+				<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)">
+					<span>{{ label.title }}</span>
+				</li>
+			</ul>
+		</a>
+	</div>
+</template>
+
+<script>
+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,
+	},
+	mixins: [ labelStyle ],
+	beforeMount() {
+		this.$store.dispatch('loadDashboards')
+	},
+	computed: {
+		...mapGetters([
+			'withDueDashboard',
+			'assignedCardsDashboard',
+		]),
+		cards() {
+			return [
+				...this.withDueDashboard,
+				...this.assignedCardsDashboard,
+			]
+		},
+		cardLink() {
+			return (card) => {
+				return generateUrl('/apps/deck') + `#/board/${card.boardId}/card/${card.id}`
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	@import './../css/labels';
+
+	.card {
+		display: block;
+		border-radius: var(--border-radius);
+		margin-bottom: 8px;
+		padding: 5px;
+		border: 1px solid var(--color-border);
+
+		&:hover {
+			background-color: var(--color-background-hover);
+		}
+	}
+	.card--header {
+		overflow: hidden;
+		margin-bottom: 5px;
+		span {
+			display: inline-block;
+			padding: 5px;
+		}
+	}
+	.labels {
+		margin-left: 0;
+	}
+	.duedate::v-deep {
+		.due {
+			margin: 0;
+		}
+	}
+	.right {
+		float: right;
+	}
+</style>

webpack.common.js

@@ -5,6 +5,7 @@ module.exports = {
 	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',