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

Add activity entry component

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2019-08-27 12:11:46 +02:00
parent 001aaa4dcd
commit e3405c915b
3 changed files with 85 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/ActivityEntry.vue Normal file
View File

@@ -0,0 +1,77 @@
<!--
- @copyright Copyright (c) 2019 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 v-if="activity" class="activity">
<img :src="activity.icon" class="activity--icon">
<div class="activity--message" v-html="parseMessage(activity)" />
<div class="activity--timestamp">{{ getTime(activity.datetime) }}</div>
</div>
</template>
<script>
export default {
name: 'ActivityEntry',
props: {
activity: {
type: Object,
default: null
}
},
methods: {
getTime(timestamp) {
return OC.Util.relativeModifiedDate(timestamp)
},
parseMessage(activity) {
let subject = activity.subject_rich[0]
let parameters = activity.subject_rich[1]
if (parameters.after && typeof parameters.after.id === 'string' && parameters.after.id.startsWith('dt:')) {
let dateTime = parameters.after.id.substr(3)
parameters.after.name = window.moment(dateTime).format('L LTS')
}
return OCA.Activity.RichObjectStringParser.parseMessage(subject, parameters)
}
}
}
</script>
<style scoped lang="scss">
.activity {
display: flex;
.activity--icon {
width: 16px;
height: 16px;
flex-shrink: 0;
flex-grow: 0;
}
.activity--message {
margin-left: 10px;
}
.activity--timestamp {
color: var(--color-text-maxcontrast);
text-align: right;
font-size: 0.8em;
width: 25%;
padding: 1px;
}
}
</style>

22
src/components/board/TimelineTabSidebard.vue
View File

@@ -2,22 +2,20 @@
<div>
<div v-if="isLoading" class="icon icon-loading" />
<div v-for="entry in boardActivity" v-else :key="entry.activity_id">
<img :src="entry.icon">
<span v-html="parseMessage(entry)" />
<span> {{ getTime(entry.datetime) }} </span>
</div>
<ActivityEntry v-for="entry in boardActivity" v-else :key="entry.activity_id"
:activity="entry" />
<button v-if="activityLoadMore" @click="loadMore">Load More</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
import ActivityEntry from '../ActivityEntry'
export default {
name: 'TimelineTabSidebard',
components: {
ActivityEntry
},
props: {
board: {
@@ -51,24 +49,12 @@ export default {
this.isLoading = false
})
},
getTime(timestamp) {
return OC.Util.relativeModifiedDate(timestamp)
},
loadMore() {
let array = Object.values(this.boardActivity)
let aId = (array[array.length - 1].activity_id)
this.params.since = aId
this.loadBoardActivity()
},
parseMessage(activity) {
let subject = activity.subject_rich[0]
let parameters = activity.subject_rich[1]
if (parameters.after && typeof parameters.after.id === 'string' && parameters.after.id.startsWith('dt:')) {
let dateTime = parameters.after.id.substr(3)
parameters.after.name = window.moment(dateTime).format('L LTS')
}
return OCA.Activity.RichObjectStringParser.parseMessage(subject, parameters)
}
}
}

22
src/components/card/CardSidebar.vue
View File

@@ -77,13 +77,9 @@
</button>
</AppSidebarTab>
<AppSidebarTab :order="2" name="Timeline" icon="icon-activity">
<div v-if="isLoading" class="icon icon-loading" />
<div v-for="entry in cardActivity" v-else :key="entry.activity_id">
<img :src="entry.icon">
<span v-html="parseMessage(entry)" />
{{ getTime(entry.datetime) }}
</div>
<ActivityEntry v-for="entry in cardActivity" v-else :key="entry.activity_id"
:activity="entry" />
<button v-if="activityLoadMore" @click="loadMore">Load More</button>
</AppSidebarTab>
</app-sidebar>
@@ -95,10 +91,12 @@ import { mapState } from 'vuex'
import VueEasymde from 'vue-easymde'
import { Actions } from 'nextcloud-vue/dist/Components/Actions'
import { ActionButton } from 'nextcloud-vue/dist/Components/ActionButton'
import ActivityEntry from '../ActivityEntry'
export default {
name: 'CardSidebar',
components: {
ActivityEntry,
AppSidebar,
AppSidebarTab,
Multiselect,
@@ -260,9 +258,6 @@ export default {
this.isLoading = false
})
},
getTime(timestamp) {
return OC.Util.relativeModifiedDate(timestamp)
},
loadMore() {
let array = Object.values(this.cardActivity)
let aId = (array[array.length - 1].activity_id)
@@ -270,15 +265,6 @@ export default {
this.params.since = aId
this.loadCardActivity()
},
parseMessage(activity) {
let subject = activity.subject_rich[0]
let parameters = activity.subject_rich[1]
if (parameters.after && typeof parameters.after.id === 'string' && parameters.after.id.startsWith('dt:')) {
let dateTime = parameters.after.id.substr(3)
parameters.after.name = window.moment(dateTime).format('L LTS')
}
return OCA.Activity.RichObjectStringParser.parseMessage(subject, parameters)
},
clickAddNewAttachmment() {
}