ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Finish activity

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2020-02-04 16:41:54 +01:00
parent 9eea838a3c
commit 2a4b2b7d49
9 changed files with 232 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/ActivityEntry.vue
View File

@@ -29,15 +29,15 @@
{{ getTime(activity.datetime) }}
</div>
</div>
<p v-if="activity.message" class="activity--message">
{{ activity.message }}
</p>
<p v-if="activity.message" class="activity--message" v-html="sanitizedMessage" />
</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: {
getTime(timestamp) {
return OC.Util.relativeModifiedDate(timestamp)
sanitizedMessage() {
return DOMPurify.sanitize(this.activity.message, { ALLOWED_TAGS: ['ins', 'del'], ALLOWED_ATTR: ['class'] })
},
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>

127
src/components/ActivityList.vue Normal file
View File

@@ -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>

55
src/components/board/TimelineTabSidebar.vue
View File

@@ -1,25 +1,18 @@
<template>
<div>
<div v-if="isLoading" class="icon icon-loading" />
<ActivityEntry v-for="entry in boardActivity"
v-else
:key="entry.activity_id"
:activity="entry" />
<button v-if="activityLoadMore" @click="loadMore">
{{ t('deck', 'Load More') }}
</button>
</div>
<ActivityList v-if="$parent.isActive"
filter="deck"
:object-id="board.id"
object-type="deck"
type="deck" />
</template>
<script>
import { mapState } from 'vuex'
import ActivityEntry from '../ActivityEntry'
import ActivityList from '../ActivityList'
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>

62
src/components/card/CardSidebarTabActivity.vue
View File

@@ -21,29 +21,21 @@
-->
<template>
<div>
<div v-if="isLoading" class="icon icon-loading" />
<div v-else>
<ActivityEntry v-for="entry in cardActivity"
:key="entry.activity_id"
:activity="entry" />
</div>
<button v-if="activityLoadMore" @click="loadMore">
{{ t('deck', 'Load More') }}
</button>
</div>
<ActivityList v-if="$parent.isActive"
:key="card.id"
filter="filter"
:object-id="card.id"
object-type="deck_card"
type="deck" />
</template>
<script>
import ActivityEntry from '../ActivityEntry'
import { mapState } from 'vuex'
import ActivityList from '../ActivityList'
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>