Add dashboard widget: On this day

Signed-off-by: Marcel Klehr <[email protected]>

lib/AppInfo/Application.php

@@ -25,6 +25,7 @@
 
 namespace OCA\Photos\AppInfo;
 
+use OCA\Photos\Dashboard\OnThisDay;
 use OCP\AppFramework\App;
 use OCP\AppFramework\Bootstrap\IBootContext;
 use OCP\AppFramework\Bootstrap\IBootstrap;
@@ -58,6 +59,7 @@ public function __construct() {
 	}
 
 	public function register(IRegistrationContext $context): void {
+        $context->registerDashboardWidget(OnThisDay::class);
 	}
 
 	public function boot(IBootContext $context): void {

lib/Dashboard/OnThisDay.php

@@ -0,0 +1,80 @@
+<?php
+namespace OCA\Photos\Dashboard;
+
+use OCA\Photos\AppInfo\Application;
+use OCP\AppFramework\Services\IInitialState;
+use OCP\IInitialStateService;
+use OCP\Util;
+
+class OnThisDay implements \OCP\Dashboard\IWidget
+{
+    /**
+     * @var \OCP\IL10N
+     */
+    private $l;
+    /**
+     * @var \OCP\IURLGenerator
+     */
+    private $url;
+    /**
+     * @var \OCP\AppFramework\Services\IInitialState
+     */
+    private $initialState;
+
+    public function __construct(\OCP\IL10N $l, \OCP\IURLGenerator $url, IInitialStateService $initialState)
+    {
+        $this->l = $l;
+        $this->url = $url;
+        $this->initialState = $initialState;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getId(): string
+    {
+        return 'photos.onthisday';
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getTitle(): string
+    {
+        return $this->l->t('On This Day');
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getOrder(): int
+    {
+        return 20;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getIconClass(): string
+    {
+        return 'icon-calendar-dark';
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getUrl(): ?string
+    {
+        return $this->url->linkToRoute('photos.page.indexthisday');
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function load(): void
+    {
+        Util::addScript('photos', 'photos-dashboard');
+        $this->initialState->provideInitialState('photos', 'image-mimes', Application::IMAGE_MIMES);
+        $this->initialState->provideInitialState('photos', 'video-mimes', Application::VIDEO_MIMES);
+    }
+}

src/components/Dashboard/DashboardOnThisDay.vue

@@ -0,0 +1,68 @@
+<!--
+  - Copyright (c) 2020. The Nextcloud Bookmarks contributors.
+  -
+  - This file is licensed under the Affero General Public License version 3 or later. See the COPYING file.
+  -->
+
+<template>
+	<div>
+		<template v-if="items.length">
+			<File :item="{injected: items[0]}" />
+			<p class="subline">
+				<a :href="moreUrl" class="button">{{ t('photos', 'More photos from this day') }}</a>
+			</p>
+		</template>
+		<p v-else class="icon-loading" />
+	</div>
+</template>
+
+<script>
+import { generateUrl } from '@nextcloud/router'
+import getPhotos from '../../services/PhotoSearch.js'
+import { allMimes } from '../../services/AllowedMimes.js'
+import File from '../File.vue'
+
+const NUMBER_OF_IMAGES = 10
+
+export default {
+	name: 'DashboardOnThisDay',
+	components: { File },
+	data() {
+		return {
+			loading: true,
+			items: [],
+		}
+	},
+	computed: {
+		moreUrl() {
+			return generateUrl('/apps/photos/thisday')
+		},
+	},
+	async created() {
+		let files
+		try {
+			// Load next batch of images
+			files = await getPhotos(false, {
+				page: 0,
+				perPage: NUMBER_OF_IMAGES,
+				mimesType: allMimes,
+				onThisDay: true,
+			})
+		} catch (e) {
+			console.error(e)
+			return
+		}
+		// eslint-disable-next-line no-console
+		console.log(files)
+
+		this.items = files.map(file => ({ ...file, mime: 'image' }))
+		this.loading = false
+	},
+}
+</script>
+<style scoped>
+.subline {
+	text-align: center;
+	margin-top: 20px;
+}
+</style>

src/dashboard.js

@@ -0,0 +1,53 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <[email protected]>
+ *
+ * @author John Molakvoæ <[email protected]>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * 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 { generateFilePath } from '@nextcloud/router'
+import { getRequestToken } from '@nextcloud/auth'
+import { translate, translatePlural } from '@nextcloud/l10n'
+import Vue from 'vue'
+
+import store from './store'
+import DashboardOnThisDay from './components/Dashboard/DashboardOnThisDay.vue'
+
+// CSP config for webpack dynamic chunk loading
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(getRequestToken())
+
+// Correct the root of the app for chunk loading
+// OC.linkTo matches the apps folders
+// OC.generateUrl ensure the index.php (or not)
+// We do not want the index.php since we're loading files
+// eslint-disable-next-line
+__webpack_public_path__ = generateFilePath('photos', '', 'js/')
+
+Vue.prototype.t = translate
+Vue.prototype.n = translatePlural
+
+window.addEventListener('DOMContentLoaded', () => {
+	OCA.Dashboard.register('photos.onthisday', (el) => {
+		global.PhotosOnThisDay = new Vue({
+			el,
+			store,
+			render: h => h(DashboardOnThisDay),
+		})
+	})
+})

webpack.js

@@ -78,4 +78,6 @@ webpackConfig.plugins.push(
 	})
 )
 
+webpackConfig.entry.dashboard = path.resolve(path.join('src', 'dashboard.js'))
+
 module.exports = webpackConfig