Fix styling and rename to actual dashboard api

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

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')
-} catch (e) {}
+	maxUploadSizeState = loadState('deck', 'maxUploadSize')
+} 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>
-					<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>
+					<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', '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':
-				return t('deck', 'My assigned cards')
+			case FILTER_ASSIGNED:
+				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;
-		margin: $stack-spacing;
+		min-width: $stack-width;
+		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-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

@@ -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;
-
-import Dashboard from './views/Dashboard.vue'
+Vue.prototype.OC = OC
 
 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"
-				  @click="openCard">
+				class="labels"
+				@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;
 	}