Merge pull request #1162 from nextcloud/enh/dashboard-widget

Add basic Dashboard widget

css/dashboard.css

@@ -0,0 +1,7 @@
+.icon-social {
+	background-image: url('../img/social-dark.svg');
+}
+
+body.theme--dark .icon-social {
+	background-image: url('../img/social.svg');
+}

img/add_user.svg

@@ -0,0 +1,11 @@
+<svg enable-background="new 67.6 244 270 309" version="1.1" viewBox="67.6 244 270 309" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+<g transform="matrix(.90269 0 0 .90269 23.302 39.704)" stroke="#fffffc" stroke-width="30.915" style="paint-order:stroke fill markers">
+	<path d="m348.23 396.07a149.41 149.16 0 0 1-147.84 149.15 149.41 149.16 0 0 1-150.95-146.01 149.41 149.16 0 0 1 144.66-152.22 149.41 149.16 0 0 1 154 142.8" fill="#f8ffff" stroke-opacity="0" style="paint-order:stroke fill markers"/><g fill="#2290d9" stroke="#fffffc"><path d="m149.88 358.97c1.0528 0.70188 2.1056 1.316 3.2461 1.9301 7.6328 4.1235 16.582 6.4923 25.881 6.4923 8.7733 0 17.108-2.1056 24.39-5.7904 1.6669-0.7896 3.2461-1.7546 4.7376-2.7197 15.178-9.6506 25.179-26.583 25.179-45.884 0-30.005-24.302-54.307-54.307-54.307-30.005 0.0878-54.395 24.39-54.395 54.395 0 19.301 10.089 36.234 25.267 45.884z" stroke-width="40.593" style="paint-order:stroke fill markers"/>
+	<g transform="matrix(.87733 0 0 .87733 .0026265 62.228)" stroke-width="46.269" style="paint-order:stroke fill markers">
+		<path d="m307.8 472.6c-13.899-66.294-30.466-77.245-71.424-70.682-12.155 1.9477-26.457 5.438-43.476 9.4821l-44.7-32.9c-56.1 6.7-70.4 48.7-70.4 99.5 0 55.5 47.91 41.797 111.41 41.797 4.555-0.049 8.8214-0.22353 12.866-0.50114 1.9962-0.137 3.9296-0.47024 5.835-0.48358 34.635-0.2424 112.91 15.343 99.888-46.213z" style="paint-order:stroke fill markers"/>
+		<path d="m307.8 472.6" style="paint-order:stroke fill markers"/>
+		
+	</g>
+	<polygon transform="matrix(1.3569 0 0 1.3569 -91.019 -238.59)" points="250 445.1 250 480.4 214.8 480.4 214.8 510.7 250 510.7 250 545.9 280.3 545.9 280.3 510.7 315.5 510.7 315.5 480.4 280.3 480.4 280.3 445.1" stroke-width="34.878" style="paint-order:stroke fill markers"/>
+</g></g>
+</svg>

lib/AppInfo/Application.php

@@ -38,6 +38,7 @@ use OCA\Social\Service\ConfigService;
 use OCA\Social\Service\UpdateService;
 use OCA\Social\WellKnown\WebfingerHandler;
 use OCA\Social\Listeners\ProfileSectionListener;
+use OCA\Social\Dashboard\SocialWidget;
 use OCP\AppFramework\App;
 use OCP\AppFramework\Bootstrap\IBootContext;
 use OCP\AppFramework\Bootstrap\IBootstrap;
@@ -68,6 +69,7 @@ class Application extends App implements IBootstrap {
 		$context->registerSearchProvider(UnifiedSearchProvider::class);
 		$context->registerWellKnownHandler(WebfingerHandler::class);
 		$context->registerEventListener(BeforeTemplateRenderedEvent::class, ProfileSectionListener::class);
+		$context->registerDashboardWidget(SocialWidget::class);
 	}
 
 	public function boot(IBootContext $context): void {

lib/Dashboard/SocialWidget.php

@@ -0,0 +1,84 @@
+<?php
+/**
+ * @copyright Copyright (c) 2020 Julien Veyssier <eneiluj@posteo.net>
+ *
+ * @author Julien Veyssier <eneiluj@posteo.net>
+ *
+ * @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\Social\Dashboard;
+
+use OCP\IURLGenerator;
+use OCP\Dashboard\IWidget;
+use OCP\IL10N;
+use OCA\Social\AppInfo\Application;
+
+class SocialWidget implements IWidget {
+	private IL10N $l10n;
+	private IURLGenerator $urlGenerator;
+
+	public function __construct(
+		IL10N $l10n,
+		IURLGenerator $urlGenerator
+	) {
+		$this->l10n = $l10n;
+		$this->urlGenerator = $urlGenerator;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getId(): string {
+		return 'social_notifications';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getTitle(): string {
+		return $this->l10n->t('Social notifications');
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getOrder(): int {
+		return 10;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getIconClass(): string {
+		return 'icon-social';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getUrl(): ?string {
+		return ''; //$this->uRLGenerator->linkToRoute('social.local.streamNotifications', []);
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function load(): void {
+		\OCP\Util::addScript(Application::APP_NAME, 'social-dashboard');
+	}
+}

src/dashboard.js

@@ -0,0 +1,33 @@
+/* jshint esversion: 6 */
+
+/**
+ * Nextcloud - social
+ *
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author Julien Veyssier <eneiluj@posteo.net>
+ * @copyright Julien Veyssier 2020
+ */
+
+import Vue from 'vue'
+import Dashboard from './views/Dashboard.vue'
+
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(OC.requestToken);
+// eslint-disable-next-line
+__webpack_public_path__ = OC.linkTo('social', 'js/');
+
+Vue.prototype.t = t
+Vue.prototype.n = n
+Vue.prototype.OC = window.OC
+
+document.addEventListener('DOMContentLoaded', function() {
+	OCA.Dashboard.register('social_notifications', (el, { widget }) => {
+		const View = Vue.extend(Dashboard)
+		new View({
+			propsData: { title: widget.title }
+		}).$mount(el)
+	})
+})

src/views/Dashboard.vue

@@ -0,0 +1,205 @@
+<template>
+	<NcDashboardWidget :items="items"
+		:show-more-url="showMoreUrl"
+		:show-more-text="title"
+		:loading="state === 'loading'">
+		<template #empty-content>
+			<NcEmptyContent
+				v-if="emptyContentMessage"
+				:icon="emptyContentIcon">
+				<template #desc>
+					{{ emptyContentMessage }}
+					<div v-if="state === 'error'" class="connect-button">
+						<a class="button" :href="appUrl">
+							{{ t('social', 'Go to Social app') }}
+						</a>
+					</div>
+				</template>
+			</NcEmptyContent>
+		</template>
+	</NcDashboardWidget>
+</template>
+
+<script>
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
+import NcDashboardWidget from '@nextcloud/vue/dist/Components/NcDashboardWidget.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+
+export default {
+	name: 'Dashboard',
+
+	components: {
+		NcDashboardWidget,
+		NcEmptyContent
+	},
+
+	props: {
+		title: {
+			type: String,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			notifications: [],
+			showMoreUrl: generateUrl('/apps/social/timeline/notifications'),
+			showMoreText: t('social', 'Social notifications'),
+			loop: null,
+			state: 'loading',
+			appUrl: generateUrl('/apps/social')
+		}
+	},
+
+	computed: {
+		items() {
+			return this.notifications.map((n) => {
+				return {
+					id: n.id,
+					targetUrl: this.getNotificationTarget(n),
+					avatarUrl: this.getAvatarUrl(n),
+					avatarUsername: this.getActorName(n),
+					overlayIconUrl: this.getNotificationTypeImage(n),
+					mainText: this.getMainText(n),
+					subText: this.getSubline(n)
+				}
+			})
+		},
+		lastTimestamp() {
+			return this.notifications.length
+				? this.notifications[0].publishedTime
+				: 0
+		},
+		emptyContentMessage() {
+			if (this.state === 'error') {
+				return t('social', 'Error getting Social notifications')
+			} else if (this.state === 'ok') {
+				return t('social', 'No Social notifications!')
+			}
+			return ''
+		},
+		emptyContentIcon() {
+			if (this.state === 'error') {
+				return 'icon-close'
+			} else if (this.state === 'ok') {
+				return 'icon-checkmark'
+			}
+			return 'icon-checkmark'
+		}
+	},
+
+	beforeMount() {
+		this.fetchNotifications()
+		this.loop = setInterval(() => this.fetchNotifications(), 10000)
+	},
+
+	methods: {
+		fetchNotifications() {
+			const req = {
+				params: {
+					limit: 10
+				}
+			}
+			const url = generateUrl('/apps/social/api/v1/stream/notifications')
+			// TODO check why 'since' param is in fact 'until'
+			/* if (this.lastDate) {
+				req.params.since = this.lastTimestamp,
+			} */
+			axios.get(url, req).then((response) => {
+				if (response.data?.result) {
+					this.processNotifications(response.data.result)
+					this.state = 'ok'
+				} else {
+					this.state = 'error'
+				}
+			}).catch((error) => {
+				clearInterval(this.loop)
+				if (error.response?.status && error.response.status >= 400) {
+					showError(t('social', 'Failed to get Social notifications'))
+					this.state = 'error'
+				} else {
+					// there was an error in notif processing
+					console.error(error)
+				}
+			})
+		},
+		processNotifications(newNotifications) {
+			if (this.lastTimestamp !== 0) {
+				// just add those which are more recent than our most recent one
+				let i = 0
+				while (i < newNotifications.length && this.lastTimestamp < newNotifications[i].publishedTime) {
+					i++
+				}
+				if (i > 0) {
+					const toAdd = this.filter(newNotifications.slice(0, i))
+					this.notifications = toAdd.concat(this.notifications)
+				}
+			} else {
+				// first time, we don't check the date
+				this.notifications = this.filter(newNotifications)
+			}
+		},
+		filter(notifications) {
+			return notifications
+			// TODO check if we need to filter
+			/* return notifications.filter((n) => {
+				return (n.type === 'something' || n.subtype === 'somethingElse')
+			}) */
+		},
+		getMainText(n) {
+			if (n.subtype === 'Follow') {
+				return t('social', '{account} is following you', { account: this.getActorName(n) })
+			}
+			if (n.subtype === 'Like') {
+				return t('social', '{account} liked your post', { account: this.getActorName(n) })
+			}
+		},
+		getAvatarUrl(n) {
+			return undefined
+			// TODO get external and internal avatars
+			/* return this.getActorAccountName(n)
+				? generateUrl('???')
+				: undefined */
+		},
+		getActorName(n) {
+			return n.actor_info && n.actor_info.type === 'Person' && n.actor_info.preferredUsername
+				? n.actor_info.preferredUsername
+				: ''
+		},
+		getActorAccountName(n) {
+			return n.actor_info && n.actor_info.type === 'Person' && n.actor_info.account
+				? n.actor_info.account
+				: ''
+		},
+		getNotificationTarget(n) {
+			if (n.subtype === 'Follow') {
+				return generateUrl('/apps/social/@' + this.getActorAccountName(n) + '/')
+			}
+			return this.showMoreUrl
+		},
+		getSubline(n) {
+			if (n.subtype === 'Follow') {
+				return this.getActorAccountName(n)
+			}
+			if (n.subtype === 'Like') {
+				return this.getActorAccountName(n)
+			}
+			return ''
+		},
+		getNotificationTypeImage(n) {
+			if (n.subtype === 'Follow') {
+				return generateUrl('/svg/social/add_user')
+			}
+			return ''
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .connect-button {
+	margin-top: 10px;
+}
+</style>

webpack.common.js

@@ -8,6 +8,7 @@ webpackConfig.entry = {
 	social: path.join(__dirname, 'src', 'main.js'),
 	ostatus: path.join(__dirname, 'src', 'ostatus.js'),
 	profilePage: path.join(__dirname, 'src', 'profile.js'),
+    dashboard: path.join(__dirname, 'src', 'dashboard.js'),
 }
 
 module.exports = webpackConfig

webpack.dev.js

@@ -1,12 +0,0 @@
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common.js');
-
-module.exports = merge(common, {
-  mode: 'development',
-  devServer: {
-    historyApiFallback: true,
-    noInfo: true,
-    overlay: true
-  },
-  devtool: 'source-map',
-})

webpack.prod.js

@@ -1,7 +0,0 @@
-const { merge } = require('webpack-merge')
-const common = require('./webpack.common.js')
-
-module.exports = merge(common, {
-  mode: 'production',
-  devtool: '#source-map'
-})