New dashboard: Unread and favourites conversations

lib/AppInfo/Application.php

@@ -36,6 +36,7 @@
 use OCA\Talk\Collaboration\Resources\Listener as ResourceListener;
 use OCA\Talk\Config;
 use OCA\Talk\Dashboard\TalkWidget;
+use OCA\Talk\Dashboard\TalkWidget2;
 use OCA\Talk\Events\ChatEvent;
 use OCA\Talk\Events\RoomEvent;
 use OCA\Talk\Files\Listener as FilesListener;
@@ -102,6 +103,7 @@ public function register(IRegistrationContext $context): void {
  $context->registerSearchProvider(MessageSearch::class);
 
  $context->registerDashboardWidget(TalkWidget::class);
+ $context->registerDashboardWidget(TalkWidget2::class);
  }
 
  public function boot(IBootContext $context): void {

lib/Dashboard/TalkWidget2.php

@@ -0,0 +1,90 @@
+<?php
+
+declare(strict_types=1);
+/**
+ * @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.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\Talk\Dashboard;
+
+use OCP\Dashboard\IWidget;
+use OCP\IL10N;
+use OCP\IURLGenerator;
+use OCP\Util;
+
+class TalkWidget2 implements IWidget {
+
+ /** @var IURLGenerator */
+ private $url;
+ /** @var IL10N */
+ private $l10n;
+
+ public function __construct(
+ IURLGenerator $url,
+ IL10N $l10n
+ ) {
+ $this->url = $url;
+ $this->l10n = $l10n;
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function getId(): string {
+ return 'spreed';
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function getTitle(): string {
+ return $this->l10n->t('Unread and favourites conversations');
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function getOrder(): int {
+ return 10;
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function getIconClass(): string {
+ return 'icon-talk';
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function getUrl(): ?string {
+ return $this->url->linkToRouteAbsolute('spreed.Page.index');
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function load(): void {
+ Util::addStyle('spreed', 'icons');
+ Util::addScript('spreed', 'dashboard');
+ }
+}

src/dashboard.js

@@ -25,6 +25,7 @@ import { generateFilePath } from '@nextcloud/router'
 import { getRequestToken } from '@nextcloud/auth'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import Dashboard from './views/Dashboard'
+import Dashboard2 from './views/Dashboard2'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line
@@ -51,4 +52,11 @@ document.addEventListener('DOMContentLoaded', function() {
  }).$mount(el)
  })
 
+ OCA.Dashboard2.register('spreed', (el) => {
+ const View = Vue.extend(Dashboard2)
+ new View({
+ propsData: {},
+ }).$mount(el)
+ })
+
 })

src/views/Dashboard2.vue

@@ -0,0 +1,195 @@
+<!--
+ - @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+ -
+ - @author Julius Härtl <jus@bitgrid.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/>.
+ -
+ -->
+
+<template>
+ <DashboardWidget id="talk-panel"
+ :items="roomOptions"
+ :show-more-url="''"
+ :loading="loading"
+ :show-items-and-empty-content="!hasImportantConversations"
+ :half-empty-content-message="t('spreed', 'No unread mentions')">
+ <template v-slot:default="{ item }">
+ <DashboardWidgetItem
+ :target-url="getItemTargetUrl(item)"
+ :main-text="getMainText(item)"
+ :sub-text="getSubText(item)"
+ :item="item"
+ v-on="handlers">
+ <template v-slot:avatar>
+ <ConversationIcon
+ :item="item"
+ :hide-favorite="true"
+ :hide-call="false" />
+ </template>
+ </DashboardWidgetItem>
+ </template>
+ <template v-slot:empty-content>
+ <EmptyContent icon="icon-talk">
+ <template #desc>
+ {{ t('spreed', 'Say hi to your friends and colleagues!') }}
+ <button
+ @click="clickStartNew">
+ {{ t('spreed', 'Start a conversation') }}
+ </button>
+ </template>
+ </EmptyContent>
+ </template>
+ </DashboardWidget>
+</template>
+
+<script>
+import { DashboardWidget, DashboardWidgetItem } from '@nextcloud/vue-dashboard'
+import ConversationIcon from './../components/ConversationIcon'
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import axios from '@nextcloud/axios'
+import { generateOcsUrl, generateUrl } from '@nextcloud/router'
+
+const ROOM_POLLING_INTERVAL = 30
+
+const propertySort = (properties) => (a, b) => properties.map(obj => {
+ let dir = 1
+ if (obj[0] === '-') {
+ dir = -1
+ obj = obj.substring(1)
+ }
+ return a[obj] > b[obj] ? dir : a[obj] < b[obj] ? -(dir) : 0
+}).reduce((p, n) => p || n, 0)
+
+export default {
+ name: 'Dashboard2',
+ components: { DashboardWidget, DashboardWidgetItem, ConversationIcon, EmptyContent },
+
+ data() {
+ return {
+ roomOptions: [],
+ hasImportantConversations: false,
+ loading: true,
+ }
+ },
+
+ computed: {
+ callLink() {
+ return (conversation) => {
+ return generateUrl('call/' + conversation.token)
+ }
+ },
+
+ /**
+ * This is a simplified version of the last chat message.
+ * Parameters are parsed without markup (just replaced with the name),
+ * e.g. no avatars on mentions.
+ * @returns {string} A simple message to show below the conversation name
+ */
+ simpleLastChatMessage() {
+ return (lastChatMessage) => {
+ if (!Object.keys(lastChatMessage).length) {
+ return ''
+ }
+
+ const params = lastChatMessage.messageParameters
+ let subtitle = lastChatMessage.message.trim()
+
+ // We don't really use rich objects in the subtitle, instead we fall back to the name of the item
+ Object.keys(params).forEach((parameterKey) => {
+ subtitle = subtitle.replace('{' + parameterKey + '}', params[parameterKey].name)
+ })
+
+ return subtitle
+ }
+ },
+
+ getItemTargetUrl() {
+ return (conversation) => {
+ return generateUrl(`call/${conversation.token}`)
+ }
+ },
+
+ getMainText() {
+ return (conversation) => {
+ return conversation.displayName
+ }
+ },
+
+ getSubText() {
+ return (conversation) => {
+ if (conversation.hasCall) {
+ return t('spreed', 'Call in progress')
+ }
+
+ if (conversation.unreadMention) {
+ return t('spreed', 'You were mentioned')
+ }
+
+ return this.simpleLastChatMessage(conversation.lastMessage)
+ }
+ },
+ },
+
+ beforeMount() {
+ this.fetchRooms()
+ // FIXME: reduce interval if user not active
+ setInterval(() => this.fetchRooms(), ROOM_POLLING_INTERVAL * 1000)
+ },
+
+ methods: {
+ fetchRooms() {
+ axios.get(generateOcsUrl('apps/spreed/api/v2', 2) + 'room').then((response) => {
+ const rooms = response.data.ocs.data
+ const importantRooms = rooms.filter((conversation) => {
+ return conversation.hasCall || conversation.unreadMention
+ })
+
+ if (importantRooms.length) {
+ importantRooms.sort(propertySort(['-hasCall', '-unreadMention', '-lastActivity']))
+ this.roomOptions = importantRooms.slice(0, 7)
+ this.hasImportantConversations = true
+ } else {
+ this.roomOptions = rooms.sort(propertySort(['-lastActivity'])).slice(0, 5)
+ this.hasImportantConversations = false
+ }
+
+ this.loading = false
+ })
+ },
+
+ clickStartNew() {
+ window.location = generateUrl('/apps/spreed')
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+ ::v-deep .item-list__entry {
+ position: relative;
+ }
+
+ .empty-content {
+ text-align: center;
+ margin-top: 5vh;
+
+ &.half-screen {
+ margin-top: 0;
+ margin-bottom: 2vh;
+ }
+ }
+</style>