Add dashboard widget to show the latest notes. Issue #51

p.s: I would like to be able to select a particular tag to show, but
none of the dashboard widgets are configurable.

I hate increasing the app size from 300k to almost 3 mb for something
so simple, but we must adapt to the majority and use vue here.

src/NotesService.js

@@ -0,0 +1,21 @@
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
+
+function url(url) {
+	url = `apps/quicknotes${url}`
+	return generateUrl(url)
+}
+
+export const getDashboardData = () => {
+	return axios
+		.get(url('/notes/dashboard'))
+		.then(response => {
+			return response.data
+		})
+		.catch(err => {
+			console.error(err)
+			showError(t('notes', 'Fetching notes for dashboard has failed.'))
+			throw err
+		})
+}

src/components/Dashboard.vue

@@ -0,0 +1,107 @@
+<template>
+	<DashboardWidget :items="items"
+		:loading="loading"
+	>
+		<template #default="{ item }">
+			<DashboardWidgetItem
+				:target-url="getItemTargetUrl(item)"
+				:main-text="item.title"
+				:sub-text="item.content"
+			>
+				<template #avatar>
+					<div
+						class="note-item"
+						:class="{ 'icon-pinned': item.pinned, 'note-item-no-pinned': !hasPinned }"
+					/>
+				</template>
+			</DashboardWidgetItem>
+		</template>
+		<template #empty-content>
+			<EmptyContent icon="icon-quicknotes">
+				<template #desc>
+					<p class="notes-empty-content-label">
+						{{ t('quicknotes', 'Nothing here. Take your first quick notes') }}
+					</p>
+					<p>
+						<a :href="createNoteUrl" class="button">{{ t('quicknotes', 'Create a note…') }}</a>
+					</p>
+				</template>
+			</EmptyContent>
+		</template>
+	</DashboardWidget>
+</template>
+
+<script>
+import { DashboardWidget, DashboardWidgetItem } from '@nextcloud/vue-dashboard'
+import { EmptyContent } from '@nextcloud/vue'
+import { generateUrl } from '@nextcloud/router'
+
+import { getDashboardData } from '../NotesService.js'
+
+export default {
+	name: 'Dashboard',
+
+	components: {
+		DashboardWidget,
+		DashboardWidgetItem,
+		EmptyContent,
+	},
+
+	data() {
+		return {
+			loading: true,
+			items: [],
+		}
+	},
+
+	computed: {
+		hasPinned() {
+			return this.items.length > 0 && this.items[0].pinned
+		},
+
+		createNoteUrl() {
+			return generateUrl('/apps/quicknotes')
+		},
+
+		getItemTargetUrl() {
+			return (note) => {
+				return generateUrl('/apps/quicknotes/?n=' + note.id)
+			}
+		},
+	},
+
+	created() {
+		this.loadDashboardData()
+	},
+
+	methods: {
+		loadDashboardData() {
+			getDashboardData().then(data => {
+				this.items = data.notes
+				this.loading = false
+			})
+		},
+	},
+
+}
+</script>
+<style scoped>
+
+.note-item {
+	width: 44px;
+	height: 44px;
+	line-height: 44px;
+	flex-shrink: 0;
+	background-size: 50%;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+
+.note-item-no-pinned {
+	display: none;
+}
+
+.notes-empty-content-label {
+	margin-bottom: 20px;
+}
+</style>

src/dashboard.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import Dashboard from './components/Dashboard.vue'
+
+Vue.mixin({ methods: { t, n } })
+
+document.addEventListener('DOMContentLoaded', () => {
+	OCA.Dashboard.register('quicknotes', (el) => {
+		const View = Vue.extend(Dashboard)
+		new View().$mount(el)
+	})
+})