Finish activity

Signed-off-by: Julius Härtl <jus@bitgrid.net>

package-lock.json

@@ -3349,6 +3349,39 @@
 				}
 			}
 		},
+		"@nextcloud/moment": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@nextcloud/moment/-/moment-1.1.0.tgz",
+			"integrity": "sha512-mPwTGMF6Dlgr2d3CiHRpSfX+MZU+IzmuJSKV5SnS8sA8kU0LJl2TaimA19hMr2KthZhGV0+Tl+1w0pbmnyLz6w==",
+			"requires": {
+				"@nextcloud/l10n": "1.0.0",
+				"core-js": "3.6.1",
+				"i18next": "19.0.2",
+				"moment": "2.24.0"
+			},
+			"dependencies": {
+				"@nextcloud/l10n": {
+					"version": "1.0.0",
+					"resolved": "https://registry.npmjs.org/@nextcloud/l10n/-/l10n-1.0.0.tgz",
+					"integrity": "sha512-A6zUwFWgwvQ5q86GdcfgD2t3uZ+H/k45S0OUlS6iMf0p5br9IrovF7hdv5+jaJcdQpkpOX2AKuordC1KheNGGA==",
+					"requires": {
+						"core-js": "3.5.0"
+					},
+					"dependencies": {
+						"core-js": {
+							"version": "3.5.0",
+							"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.5.0.tgz",
+							"integrity": "sha512-Ifh3kj78gzQ7NAoJXeTu+XwzDld0QRIwjBLRqAMhuLhP3d2Av5wmgE9ycfnvK6NAEjTkQ1sDPeoEZAWO3Hx1Uw=="
+						}
+					}
+				},
+				"core-js": {
+					"version": "3.6.1",
+					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.1.tgz",
+					"integrity": "sha512-186WjSik2iTGfDjfdCZAxv2ormxtKgemjC3SI6PL31qOA0j5LhTDVjHChccoc7brwLvpvLPiMyRlcO88C4l1QQ=="
+				}
+			}
+		},
 		"@nextcloud/router": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@nextcloud/router/-/router-1.0.0.tgz",
@@ -6815,6 +6848,11 @@
 				"domelementtype": "1"
 			}
 		},
+		"dompurify": {
+			"version": "2.0.8",
+			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.0.8.tgz",
+			"integrity": "sha512-vIOSyOXkMx81ghEalh4MLBtDHMx1bhKlaqHDMqM2yeitJ996SLOk5mGdDpI9ifJAgokred8Rmu219fX4OltqXw=="
+		},
 		"domutils": {
 			"version": "1.7.0",
 			"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@@ -9691,6 +9729,14 @@
 			"integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
 			"dev": true
 		},
+		"i18next": {
+			"version": "19.0.2",
+			"resolved": "https://registry.npmjs.org/i18next/-/i18next-19.0.2.tgz",
+			"integrity": "sha512-fBa43Ann2udP1CQAz3IQpOZ1dGAkmi3mMfzisOhH17igneSRbvZ7P2RNbL+L1iRYKMufBmVwnC7G3gqcyviZ9g==",
+			"requires": {
+				"@babel/runtime": "^7.3.1"
+			}
+		},
 		"iconv-lite": {
 			"version": "0.4.24",
 			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -13087,6 +13133,11 @@
 				}
 			}
 		},
+		"moment": {
+			"version": "2.24.0",
+			"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+			"integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+		},
 		"move-concurrently": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -32,8 +32,10 @@
 		"@nextcloud/auth": "^1.2.1",
 		"@nextcloud/axios": "^1.3.1",
 		"@nextcloud/l10n": "^1.0.1",
+		"@nextcloud/moment": "^1.1.0",
 		"@nextcloud/router": "^1.0.0",
 		"@nextcloud/vue": "^1.3.0",
+		"dompurify": "^2.0.8",
 		"nextcloud-vue-collections": "^0.7.1",
 		"url-search-params-polyfill": "^7.0.1",
 		"vue": "^2.6.11",

src/components/ActivityEntry.vue

@@ -29,15 +29,15 @@
 				{{ getTime(activity.datetime) }}
 			</div>
 		</div>
-		<p v-if="activity.message" class="activity--message">
+		<p v-if="activity.message" class="activity--message" v-html="sanitizedMessage" />
-			{{ activity.message }}
-		</p>
 	</div>
 </template>
 
 <script>
 import RichText from '@juliushaertl/vue-richtext'
 import { UserBubble } from '@nextcloud/vue'
+import moment from '@nextcloud/moment'
+import DOMPurify from 'dompurify'
 
 const InternalLink = {
 	name: 'InternalLink',
@@ -73,7 +73,7 @@ export default {
 			const parameters = JSON.parse(JSON.stringify(this.activity.subject_rich[1]))
 			if (parameters.after && typeof parameters.after.id === 'string' && parameters.after.id.startsWith('dt:')) {
 				const dateTime = parameters.after.id.substr(3)
-				parameters.after.name = window.moment(dateTime).format('L LTS')
+				parameters.after.name = moment(dateTime).format('L LTS')
 			}
 
 			Object.keys(parameters).map(function(key, index) {
@@ -107,10 +107,18 @@ export default {
 				subject, parameters,
 			}
 		},
-	},
+
-	methods: {
+		sanitizedMessage() {
-		getTime(timestamp) {
+			return DOMPurify.sanitize(this.activity.message, { ALLOWED_TAGS: ['ins', 'del'], ALLOWED_ATTR: ['class'] })
-			return OC.Util.relativeModifiedDate(timestamp)
+		},
+		getTime() {
+			return (timestamp) => {
+				const diff = moment(this.$root.time).diff(moment(timestamp))
+				if (diff >= 0 && diff < 45000) {
+					return t('core', 'seconds ago')
+				}
+				return moment(timestamp).fromNow()
+			}
 		},
 	},
 }
@@ -147,3 +155,11 @@ export default {
 		}
 	}
 </style>
+<style>
+	.visualdiff ins {
+		color: green;
+	}
+	.visualdiff del {
+		color: darkred;
+	}
+</style>

src/components/ActivityList.vue

@@ -0,0 +1,127 @@
+<!--
+  - @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>
+	<div class="activity-list">
+		<div v-if="isLoading" class="icon icon-loading" />
+		<ActivityEntry v-for="activity in activities"
+			:key="activity.activity_id"
+			:activity="activity" />
+		<InfiniteLoading :identifier="objectId" @infinite="infiniteHandler" @change="changeObject">
+			<div slot="spinner" class="icon-loading" />
+			<div slot="no-more" />
+			<div slot="no-results" />
+		</InfiniteLoading>
+	</div>
+</template>
+
+<script>
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+import ActivityEntry from './ActivityEntry'
+import InfiniteLoading from 'vue-infinite-loading'
+
+const ACTIVITY_FETCH_LIMIT = 50
+
+export default {
+	name: 'ActivityList',
+	components: {
+		ActivityEntry,
+		InfiniteLoading,
+	},
+	props: {
+		filter: {
+			type: String,
+			default: 'deck',
+		},
+		type: {
+			type: String,
+			required: true,
+		},
+		objectId: {
+			type: Number,
+			required: true,
+		},
+		objectType: {
+			type: String,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			activities: [],
+			isLoading: false,
+			since: 0,
+			endReached: false,
+		}
+	},
+	methods: {
+		async loadActivity() {
+			const params = new URLSearchParams()
+			params.append('format', 'json')
+			params.append('type', this.type)
+			params.append('since', this.since)
+			params.append('object_type', this.objectType)
+			params.append('object_id', '' + this.objectId)
+			params.append('limit', ACTIVITY_FETCH_LIMIT)
+
+			const response = await axios.get(generateOcsUrl('apps/activity/api/v2/activity') + this.filter + '?' + params)
+			const activities = response.data.ocs.data
+			if (this.filter === 'deck') {
+				// We need to manually filter activities here, since currently we use two different types and there is no way
+				// to tell the backend to fetch all activites related to cards of a given board
+				this.activities.push(...activities.filter((activity) => {
+					return (activity.object_type === 'deck_board' && activity.object_id === this.objectId)
+							|| (activity.object_type === 'deck_card' && activity.subject_rich[1].board.id === this.objectId)
+				}))
+			} else {
+				this.activities.push(...activities)
+			}
+			if (response.data.ocs.meta.statuscode === 304) {
+				this.endReached = true
+				return []
+			}
+			this.since = (activities[activities.length - 1].activity_id)
+			return activities
+		},
+		async infiniteHandler($state) {
+			await this.loadActivity()
+			if (!this.endReached) {
+				$state.loaded()
+			} else {
+				$state.complete()
+			}
+		},
+		changeObject() {
+			this.since = 0
+			this.activities = []
+			this.endReached = false
+		},
+	},
+}
+</script>
+
+<style scoped>
+	.activity-list {
+		margin-bottom: 100px;
+	}
+</style>

src/components/board/TimelineTabSidebar.vue

@@ -1,25 +1,18 @@
 <template>
-	<div>
+	<ActivityList v-if="$parent.isActive"
-		<div v-if="isLoading" class="icon icon-loading" />
+		filter="deck"
-
+		:object-id="board.id"
-		<ActivityEntry v-for="entry in boardActivity"
+		object-type="deck"
-			v-else
+		type="deck" />
-			:key="entry.activity_id"
-			:activity="entry" />
-		<button v-if="activityLoadMore" @click="loadMore">
-			{{ t('deck', 'Load More') }}
-		</button>
-	</div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import ActivityList from '../ActivityList'
-import ActivityEntry from '../ActivityEntry'
 
 export default {
 	name: 'TimelineTabSidebar',
 	components: {
-		ActivityEntry,
+		ActivityList,
 	},
 	props: {
 		board: {
@@ -27,39 +20,5 @@ export default {
 			default: undefined,
 		},
 	},
-	data() {
-		return {
-			isLoading: false,
-			params: {
-				type: 'deck',
-				since: 0,
-				object_id: this.board.id,
-			},
-		}
-	},
-	computed: {
-		...mapState({
-			boardActivity: 'activity',
-			activityLoadMore: 'activityLoadMore',
-		}),
-	},
-	created() {
-		this.loadBoardActivity()
-	},
-	methods: {
-		loadBoardActivity() {
-			this.isLoading = true
-			this.$store.dispatch('loadActivity', this.params).then(response => {
-				this.isLoading = false
-			})
-		},
-		loadMore() {
-			const array = Object.values(this.boardActivity)
-			const aId = (array[array.length - 1].activity_id)
-
-			this.params.since = aId
-			this.loadBoardActivity()
-		},
-	},
 }
 </script>

src/components/card/CardSidebarTabActivity.vue

@@ -21,29 +21,21 @@
   -->
 
 <template>
-	<div>
+	<ActivityList v-if="$parent.isActive"
-		<div v-if="isLoading" class="icon icon-loading" />
+		:key="card.id"
-		<div v-else>
+		filter="filter"
-			<ActivityEntry v-for="entry in cardActivity"
+		:object-id="card.id"
-
+		object-type="deck_card"
-				:key="entry.activity_id"
+		type="deck" />
-				:activity="entry" />
-		</div>
-		<button v-if="activityLoadMore" @click="loadMore">
-			{{ t('deck', 'Load More') }}
-		</button>
-	</div>
 </template>
 
 <script>
-import ActivityEntry from '../ActivityEntry'
+import ActivityList from '../ActivityList'
-
-import { mapState } from 'vuex'
 
 export default {
 	name: 'CardSidebarTabActivity',
 	components: {
-		ActivityEntry,
+		ActivityList,
 	},
 	props: {
 		card: {
@@ -54,45 +46,7 @@ export default {
 	data() {
 		return {
 			id: 'activity',
-			isLoading: false,
-			params: {
-				type: 'filter',
-				since: 0,
-				object_type: 'deck_card',
-				object_id: this.id,
-			},
 		}
 	},
-	computed: {
-		...mapState({
-			currentBoard: state => state.currentBoard,
-			assignableUsers: state => state.assignableUsers,
-			cardActivity: 'activity',
-			activityLoadMore: 'activityLoadMore',
-		}),
-	},
-	mounted() {
-		this.params.object_id = this.card.id
-		this.loadCardActivity()
-	},
-	methods: {
-		loadCardActivity() {
-			this.isLoading = true
-			this.$store.dispatch('loadActivity', this.params).then(response => {
-				this.isLoading = false
-			})
-		},
-		loadMore() {
-			const array = Object.values(this.cardActivity)
-			const aId = (array[array.length - 1].activity_id)
-
-			this.params.since = aId
-			this.loadCardActivity()
-		},
-	},
 }
 </script>
-
-<style scoped>
-
-</style>

src/main.js

@@ -58,9 +58,21 @@ new Vue({
 	el: '#content',
 	router,
 	store,
-	mounted: function() {
+	data() {
+		return {
+			time: Date.now(),
+			interval: null,
+		}
+	},
+	created() {
 		// eslint-disable-next-line
 		new OCA.Search(this.filter, this.cleanSearch)
+		this.interval = setInterval(() => {
+			this.time = Date.now()
+		}, 1000)
+	},
+	beforeDestroy() {
+		clearInterval(this.interval)
 	},
 	methods: {
 		filter(query) {

src/store/main.js

@@ -59,8 +59,6 @@ export default new Vuex.Store({
 		sharees: [],
 		assignableUsers: [],
 		boardFilter: BOARD_FILTERS.ALL,
-		activity: [],
-		activityLoadMore: true,
 		searchQuery: '',
 	},
 	getters: {
@@ -170,20 +168,6 @@ export default new Vuex.Store({
 			state.sharees.push(...shareesUsersAndGroups.groups)
 			state.sharees.push(...shareesUsersAndGroups.circles)
 		},
-		setActivity(state, activity) {
-			activity.forEach(element => {
-				if (element.subject_rich[1].board.id === state.currentBoard.id) {
-					state.activity.push(element)
-				}
-			})
-
-		},
-		clearActivity(state) {
-			state.activity = []
-		},
-		setActivityLoadMore(state, value) {
-			state.activityLoadMore = value
-		},
 		setAssignableUsers(state, users) {
 			state.assignableUsers = users
 		},
@@ -334,30 +318,6 @@ export default new Vuex.Store({
 				commit('setSharees', response.data.ocs.data)
 			})
 		},
-		loadActivity({ commit }, obj) {
-			const params = new URLSearchParams()
-			params.append('format', 'json')
-			params.append('type', 'deck')
-			params.append('since', obj.since)
-			params.append('object_type', obj.object_type)
-			params.append('object_id', obj.object_id)
-
-			if (obj.since === 0) {
-				commit('clearActivity')
-			}
-
-			let keyword = 'deck'
-			if (obj.type === 'filter') {
-				keyword = 'filter'
-			}
-			axios.get(OC.linkToOCS('apps/activity/api/v2/activity') + keyword, { params }).then((response) => {
-				commit('setActivity', response.data.ocs.data)
-				commit('setActivityLoadMore', true)
-				if (response.data.ocs.meta.statuscode === 304) {
-					commit('setActivityLoadMore', false)
-				}
-			})
-		},
 
 		setBoardFilter({ commmit }, filter) {
 			commmit('setBoardFilter', filter)

templates/main.php

@@ -23,10 +23,6 @@
 
 use OCP\Util;
 
-Util::addScript('activity', 'richObjectStringParser');
-Util::addScript('activity', 'templates');
-Util::addStyle('activity', 'style');
-
 style('deck', 'globalstyles');
 script('deck', 'deck');