Fix styling and rename to actual dashboard api

Signed-off-by: Julius Härtl <jus@bitgrid.net>

lib/AppInfo/Application.php

@@ -29,7 +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\DeckPanel;
+use OCA\Deck\Dashboard\DeckWidget;
 use OCA\Deck\Db\Acl;
 use OCA\Deck\Db\AclMapper;
 use OCA\Deck\Db\AssignedUsersMapper;
@@ -44,7 +44,7 @@ use OCP\AppFramework\App;
 use OCP\Collaboration\Resources\IManager;
 use OCP\Collaboration\Resources\IProviderManager;
 use OCP\Comments\CommentsEntityEvent;
-use OCP\Dashboard\RegisterPanelEvent;
+use OCP\Dashboard\RegisterWidgetEvent;
 use OCP\EventDispatcher\Event;
 use OCP\EventDispatcher\IEventDispatcher;
 use OCP\FullTextSearch\IFullTextSearchManager;
@@ -92,9 +92,9 @@ class Application extends App {
 		if ($version >= 20) {
 			/** @var IEventDispatcher $dispatcher */
 			$dispatcher = $container->getServer()->query(IEventDispatcher::class);
-			$dispatcher->addListener(RegisterPanelEvent::class, function (RegisterPanelEvent $event) use ($container) {
+			$dispatcher->addListener(RegisterWidgetEvent::class, function (RegisterWidgetEvent $event) use ($container) {
 				\OCP\Util::addScript('myapp', 'dashboard');
-				$event->registerPanel(DeckPanel::class);
+				$event->registerWidget(DeckWidget::class);
 			});
 		}
 	}

lib/Dashboard/DeckWidget.php

@@ -27,9 +27,19 @@ declare(strict_types=1);
 namespace OCA\Deck\Dashboard;
 
 
-use OCP\Dashboard\IPanel;
+use OCP\Dashboard\IWidget;
+use OCP\IL10N;
 
-class DeckPanel implements IPanel {
+class DeckWidget implements IWidget {
+
+	/**
+	 * @var IL10N
+	 */
+	private $l10n;
+
+	public function __construct(IL10N $l10n) {
+		$this->l10n = $l10n;
+	}
 
 	/**
 	 * @inheritDoc
@@ -42,7 +52,7 @@ class DeckPanel implements IPanel {
 	 * @inheritDoc
 	 */
 	public function getTitle(): string {
-		return 'Deck';
+		return $this->l10n->t('Upcoming cards');
 	}
 
 	/**

package-lock.json

@@ -3851,6 +3851,23 @@
 				}
 			}
 		},
+		"@nextcloud/vue-dashboard": {
+			"version": "0.1.6",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue-dashboard/-/vue-dashboard-0.1.6.tgz",
+			"integrity": "sha512-AgJMFYLuWWKi7U5TE+Zjta02OzS83nMgmgQZOjvP92VV/TwcxMnUo/3eJRaNrAnoRej4x1hjdroQC8PgDbZqzQ==",
+			"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.6",
 		"blueimp-md5": "^2.17.0",
 		"dompurify": "^2.0.12",
 		"lodash": "^4.17.20",

src/components/AttachmentDragAndDrop.vue

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

src/components/cards/CardBadges.vue

@@ -21,11 +21,7 @@
   -->
 
 <template>
-<<<<<<< HEAD
 	<div v-if="card" class="badges">
-=======
-	<div class="badges" v-if="card">
->>>>>>> 37196bbf... Move duedate to separate component
 		<div v-if="card.commentsUnread > 0" class="icon icon-comment" />
 
 		<div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
@@ -59,11 +55,7 @@ export default {
 			return (this.card.description.match(/^\s*([*+-]|(\d\.))\s+\[\s*(\s|x)\s*\](.*)$/gim) || []).length
 		},
 		checkListCheckedCount() {
-<<<<<<< HEAD
 			return (this.card.description.match(/^\s*([*+-]|(\d\.))\s+\[\s*x\s*\](.*)$/gim) || []).length
-=======
-			return (this.card.description.match(/^\s*(\*|-|(\d\.))\s+\[\s*x\s*\](.*)$/gim) || []).length
->>>>>>> 37196bbf... Move duedate to separate component
 		},
 	},
 }

src/components/cards/badges/DueDate.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div class="duedate" v-if="card">
+	<div v-if="card" class="duedate">
 		<transition name="zoom">
 			<div v-if="card.duedate" :class="dueIcon">
 				<span>{{ relativeDate }}</span>
@@ -65,7 +65,7 @@ export default {
 		dueDateTooltip() {
 			return moment(this.card.duedate).format('LLLL')
 		},
-	}
+	},
 }
 </script>
 

src/components/navigation/AppNavigation.vue

@@ -24,7 +24,7 @@
 	<AppNavigationVue :class="{'icon-loading': loading}">
 		<template #list>
 			<AppNavigationItem
-				:title="t('deck', 'My assigned cards')"
+				:title="t('deck', 'Assigned cards')"
 				icon="icon-group"
 				to="/overview/assigned" />
 			<AppNavigationBoardCategory

src/components/overview/Overview.vue

@@ -22,7 +22,7 @@
 
 <template>
 	<div>
-		<Controls :dashboard-name="filterDisplayName" />
+		<Controls :overview-name="filterDisplayName" />
 
 		<div v-if="loading" key="loading" class="emptycontent">
 			<div class="icon icon-loading" />
@@ -33,46 +33,46 @@
 		<div v-else>
 			<div v-if="isValidFilter" class="dashboard">
 				<div class="dashboard-column">
-					<h2>{{ t('deck', 'No due') }}</h2>
+					<h3>{{ t('deck', 'Overdue') }}</h3>
-					<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>
+					<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', 'Tomorrow') }}</h2>
+					<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', 'This week') }}</h2>
+					<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', 'Later') }}</h2>
+					<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">
+					<h3>{{ t('deck', 'No due') }}</h3>
+					<div v-for="card in cardsByDueDate.nodue" :key="card.id">
+						<CardItem :id="card.id" />
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -102,7 +102,7 @@ export default {
 	props: {
 		filter: {
 			type: String,
-			default: '',
+			default: FILTER_ASSIGNED,
 		},
 	},
 	data() {
@@ -116,8 +116,8 @@ export default {
 		},
 		filterDisplayName() {
 			switch (this.filter) {
-			case 'assigned':
+			case FILTER_ASSIGNED:
-				return t('deck', 'My assigned cards')
+				return t('deck', 'Assigned cards')
 			default:
 				return ''
 			}
@@ -211,13 +211,15 @@ export default {
 .dashboard {
 	display: flex;
 	align-items: stretch;
-	margin: $board-spacing;
+	margin-left: $board-spacing;
+	margin-right: $board-spacing;
 
 	.dashboard-column {
 		display: flex;
 		flex-direction: column;
-		width: $stack-width;
+		min-width: $stack-width;
-		margin: $stack-spacing;
+		margin-left: $stack-spacing;
+		margin-right: $stack-spacing;
 	}
 }
 

src/css/dashboard.scss

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

src/css/variables.scss

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

src/init-dashboard.js

@@ -23,7 +23,11 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-import dashboard from './store/dashboard'
+import overview from './store/overview'
+
+import './css/dashboard.scss'
+
+import Dashboard from './views/Dashboard.vue'
 
 Vue.use(Vuex)
 
@@ -31,13 +35,11 @@ const debug = process.env.NODE_ENV !== 'production'
 
 const store = new Vuex.Store({
 	modules: {
-		dashboard,
+		overview,
 	},
 	strict: debug,
 })
 
-import './css/dashboard.scss'
-
 // eslint-disable-next-line
 __webpack_nonce__ = btoa(OC.requestToken);
 // eslint-disable-next-line
@@ -45,9 +47,7 @@ __webpack_public_path__ = OC.linkTo('deck', 'js/');
 
 Vue.prototype.t = t
 Vue.prototype.n = n
-Vue.prototype.OC = OC;
+Vue.prototype.OC = OC
-
-import Dashboard from './views/Dashboard.vue'
 
 document.addEventListener('DOMContentLoaded', () => {
 	OCA.Dashboard.register('deck', (el) => {
@@ -56,5 +56,6 @@ document.addEventListener('DOMContentLoaded', () => {
 			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/views/Dashboard.vue

@@ -22,14 +22,17 @@
 
 <template>
 	<div>
-		<a :href="cardLink(card)" class="card" v-for="card in assignedCardsDashboard">
+		<a v-for="card in assignedCardsDashboard"
+			:key="card.id"
+			:href="cardLink(card)"
+			class="card">
 			<div class="card--header">
 				<DueDate class="right" :card="card" />
 				<span>{{ card.title }}</span>
 			</div>
 			<ul v-if="card.labels && card.labels.length"
-				  class="labels"
+				class="labels"
-				  @click="openCard">
+				@click="openCard">
 				<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)">
 					<span>{{ label.title }}</span>
 				</li>
@@ -50,9 +53,6 @@ export default {
 		DueDate,
 	},
 	mixins: [ labelStyle ],
-	beforeMount() {
-		this.$store.dispatch('loadDashboards')
-	},
 	computed: {
 		...mapGetters([
 			'withDueDashboard',
@@ -70,6 +70,9 @@ export default {
 			}
 		},
 	},
+	beforeMount() {
+		this.$store.dispatch('loadAssignDashboard')
+	},
 }
 </script>
 
@@ -78,15 +81,15 @@ export default {
 
 	.card {
 		display: block;
-		border-radius: var(--border-radius);
+		border-radius: var(--border-radius-large);
 		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;
@@ -95,14 +98,17 @@ export default {
 			padding: 5px;
 		}
 	}
+
 	.labels {
 		margin-left: 0;
 	}
+
 	.duedate::v-deep {
 		.due {
 			margin: 0;
 		}
 	}
+
 	.right {
 		float: right;
 	}