1st try

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

lib/AppInfo/Application.php

@@ -22,14 +22,29 @@
 
 namespace OCA\Tasks\AppInfo;
 
+use OCA\Taks\Dashboard\TasksWidget;
 use OCP\AppFramework\App;
+use OCP\AppFramework\Bootstrap\IBootContext;
+use OCP\AppFramework\Bootstrap\IBootstrap;
+use OCP\AppFramework\Bootstrap\IRegistrationContext;
 
-class Application extends App {
+class Application extends App implements IBootstrap {
+
+	/** @var string */
+	public const APP_ID = 'tasks';
 
 	/**
 	 * @param array $params
 	 */
 	public function __construct(array $params=[]) {
-		parent::__construct('tasks', $params);
+		parent::__construct(self::APP_ID, $params);
+	}
+
+	public function register(IRegistrationContext $context): void {
+		$context->registerDashboardWidget(TasksWidget::class);
 	}
+
+	public function boot(IBootContext $context): void {
+	}
+
 }

lib/Dashboard/TasksWidget.php

@@ -0,0 +1,110 @@
+<?php
+
+declare(strict_types=1);
+/**
+ * @copyright Copyright (c) 2021 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\Tasks\Dashboard;
+
+use OCA\Tasks\AppInfo\Application;
+use OCA\Tasks\Service\CollectionsService;
+use OCP\Dashboard\IWidget;
+use OCP\IInitialStateService;
+use OCP\IL10N;
+
+class TasksWidget implements IWidget {
+
+	/**
+	 * @var IL10N
+	 */
+	private $l10n;
+
+	/**
+	 * @var IInitialStateService
+	 */
+	private $initialStateService;
+
+	/**
+	 * @var CollectionsService
+	 */
+	private $dataService;
+
+	/**
+	 * CalendarWidget constructor.
+	 * @param IL10N $l10n
+	 * @param IInitialStateService $initialStateService
+	 * @param CollectionsService $dataService
+	 */
+	public function __construct(IL10N $l10n,
+								IInitialStateService $initialStateService,
+								CollectionsService $dataService) {
+		$this->l10n = $l10n;
+		$this->initialStateService = $initialStateService;
+		$this->dataService = $dataService;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getId(): string {
+		return Application::APP_ID;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getTitle(): string {
+		return $this->l10n->t('Upcoming tasks');
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getOrder(): int {
+		return 20;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getIconClass(): string {
+		return 'icon-tasks';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getUrl(): ?string {
+		return null;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function load(): void {
+		\OCP\Util::addScript('tasks', 'tasks');
+
+		$this->initialStateService->provideLazyInitialState(Application::APP_ID, 'dashboard', function () {
+			return $this->dataService;
+		});
+	}
+}

package.json

@@ -34,6 +34,7 @@
 		"@nextcloud/router": "^2.0.0",
 		"@nextcloud/vue": "^4.0.0",
 		"@vue/test-utils": "^1.2.0",
+		"@nextcloud/vue-dashboard": "^2.0.1",
 		"cdav-library": "github:nextcloud/cdav-library",
 		"color-convert": "^2.0.1",
 		"debounce": "^1.2.1",

src/dashboard.js

@@ -0,0 +1,49 @@
+/*
+ * @copyright Copyright (c) 2021 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 { generateFilePath } from '@nextcloud/router'
+import { getRequestToken } from '@nextcloud/auth'
+import { translate, translatePlural } from '@nextcloud/l10n'
+import Dashboard from './views/Dashboard'
+import store from './store/store.js'
+
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(getRequestToken())
+
+// eslint-disable-next-line
+__webpack_public_path__ = generateFilePath('tasks', '', 'js/')
+
+Vue.prototype.t = translate
+Vue.prototype.n = translatePlural
+Vue.prototype.OC = OC
+Vue.prototype.OCA = OCA
+
+document.addEventListener('DOMContentLoaded', function() {
+	OCA.Dashboard.register('tasks', (el) => {
+		const View = Vue.extend(Dashboard)
+		new View({
+			store,
+			propsData: {},
+		}).$mount(el)
+	})
+})

src/views/Dashboard.vue

@@ -0,0 +1,146 @@
+<!--
+	- @copyright Copyright (c) 2021 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/>.
+	-
+	-->
+<template>
+	<DashboardWidget :items="cards"
+		empty-content-icon="icon-tasks"
+		:empty-content-message="t('tasks', 'No upcoming tasks')"
+		:show-more-text="t('tasks', 'upcoming cards')"
+		:show-more-url="showMoreUrl"
+		:loading="loading"
+		@hide="() => {}"
+		@markDone="() => {}">
+		<template #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>
+	</DashboardWidget>
+</template>
+
+<script>
+import { DashboardWidget } from '@nextcloud/vue-dashboard'
+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,
+		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/tasks') : null
+		},
+	},
+	// beforeMount() {
+	// 	this.loading = true
+	// 	this.$store.dispatch('loadUpcoming').then(() => {
+	// 		this.loading = false
+	// 	})
+	// },
+}
+</script>
+
+<style lang="scss" scoped>
+
+	#deck-widget-empty-content {
+		text-align: center;
+		margin-top: 5vh;
+	}
+
+	.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

@@ -1,3 +1,9 @@
 const webpackConfig = require('@nextcloud/webpack-vue-config')
+const path = require('path')
+
+webpackConfig.entry = {
+	...webpackConfig.entry,
+	dashboard: path.join(__dirname, 'src', 'dashboard.js'),
+}
 
 module.exports = webpackConfig