Add activity entry component

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

src/components/ActivityEntry.vue

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

src/components/board/TimelineTabSidebard.vue

@@ -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">
+		<ActivityEntry v-for="entry in boardActivity" v-else :key="entry.activity_id"
-			<img :src="entry.icon">
+			:activity="entry" />
-			<span v-html="parseMessage(entry)" />
-			<span> {{ getTime(entry.datetime) }} </span>
-		</div>
 		<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)
 		}
 	}
 }

src/components/card/CardSidebar.vue

@@ -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">
+			<ActivityEntry v-for="entry in cardActivity" v-else :key="entry.activity_id"
-				<img :src="entry.icon">
+				:activity="entry" />
-				<span v-html="parseMessage(entry)" />
-				{{ getTime(entry.datetime) }}
-			</div>
 			<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() {
 
 		}