kopia lustrzana https://github.com/nextcloud/social
Merge pull request #1162 from nextcloud/enh/dashboard-widget
Add basic Dashboard widgetpull/1471/head
commit
345e2bd8ed
|
@ -0,0 +1,7 @@
|
||||||
|
.icon-social {
|
||||||
|
background-image: url('../img/social-dark.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme--dark .icon-social {
|
||||||
|
background-image: url('../img/social.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>
|
Po Szerokość: | Wysokość: | Rozmiar: 1.8 KiB |
|
@ -38,6 +38,7 @@ use OCA\Social\Service\ConfigService;
|
||||||
use OCA\Social\Service\UpdateService;
|
use OCA\Social\Service\UpdateService;
|
||||||
use OCA\Social\WellKnown\WebfingerHandler;
|
use OCA\Social\WellKnown\WebfingerHandler;
|
||||||
use OCA\Social\Listeners\ProfileSectionListener;
|
use OCA\Social\Listeners\ProfileSectionListener;
|
||||||
|
use OCA\Social\Dashboard\SocialWidget;
|
||||||
use OCP\AppFramework\App;
|
use OCP\AppFramework\App;
|
||||||
use OCP\AppFramework\Bootstrap\IBootContext;
|
use OCP\AppFramework\Bootstrap\IBootContext;
|
||||||
use OCP\AppFramework\Bootstrap\IBootstrap;
|
use OCP\AppFramework\Bootstrap\IBootstrap;
|
||||||
|
@ -68,6 +69,7 @@ class Application extends App implements IBootstrap {
|
||||||
$context->registerSearchProvider(UnifiedSearchProvider::class);
|
$context->registerSearchProvider(UnifiedSearchProvider::class);
|
||||||
$context->registerWellKnownHandler(WebfingerHandler::class);
|
$context->registerWellKnownHandler(WebfingerHandler::class);
|
||||||
$context->registerEventListener(BeforeTemplateRenderedEvent::class, ProfileSectionListener::class);
|
$context->registerEventListener(BeforeTemplateRenderedEvent::class, ProfileSectionListener::class);
|
||||||
|
$context->registerDashboardWidget(SocialWidget::class);
|
||||||
}
|
}
|
||||||
|
|
||||||
public function boot(IBootContext $context): void {
|
public function boot(IBootContext $context): void {
|
||||||
|
|
|
@ -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');
|
||||||
|
}
|
||||||
|
}
|
|
@ -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)
|
||||||
|
})
|
||||||
|
})
|
|
@ -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>
|
|
@ -8,6 +8,7 @@ webpackConfig.entry = {
|
||||||
social: path.join(__dirname, 'src', 'main.js'),
|
social: path.join(__dirname, 'src', 'main.js'),
|
||||||
ostatus: path.join(__dirname, 'src', 'ostatus.js'),
|
ostatus: path.join(__dirname, 'src', 'ostatus.js'),
|
||||||
profilePage: path.join(__dirname, 'src', 'profile.js'),
|
profilePage: path.join(__dirname, 'src', 'profile.js'),
|
||||||
|
dashboard: path.join(__dirname, 'src', 'dashboard.js'),
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = webpackConfig
|
module.exports = webpackConfig
|
||||||
|
|
|
@ -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',
|
|
||||||
})
|
|
|
@ -1,7 +0,0 @@
|
||||||
const { merge } = require('webpack-merge')
|
|
||||||
const common = require('./webpack.common.js')
|
|
||||||
|
|
||||||
module.exports = merge(common, {
|
|
||||||
mode: 'production',
|
|
||||||
devtool: '#source-map'
|
|
||||||
})
|
|
Ładowanie…
Reference in New Issue