From fb65b686feaa81cd2e0f177acf92e1d5095de1b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 11 Jan 2019 10:15:31 +0100
Subject: [PATCH] Implement post deletion and add animation to timeline list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
src/components/TimelineEntry.vue | 24 +++++++++++++++---------
src/components/TimelineList.vue | 20 +++++++++++++++++++-
src/store/timeline.js | 13 +++++++++++++
3 files changed, 47 insertions(+), 10 deletions(-)
diff --git a/src/components/TimelineEntry.vue b/src/components/TimelineEntry.vue
index ed9dd7b0..6e201294 100644
--- a/src/components/TimelineEntry.vue
+++ b/src/components/TimelineEntry.vue
@@ -32,7 +32,7 @@
</div>
<div v-click-outside="hidePopoverMenu" class="post-actions">
<a class="icon-more" @click.prevent="togglePopoverMenu" />
- <div :class="{open: menuOpened}" class="popovermenu menu-center">
+ <div :class="{open: menuOpened}" class="popovermenu">
<popover-menu :menu="popoverMenu" />
</div>
</div>
@@ -48,6 +48,7 @@ import pluginTag from 'linkifyjs/plugins/hashtag'
import pluginMention from 'linkifyjs/plugins/mention'
import 'linkifyjs/string'
import popoverMenu from './../mixins/popoverMenu'
+import currentUser from './../mixins/currentUserMixin'
pluginTag(linkify)
pluginMention(linkify)
@@ -57,7 +58,7 @@ export default {
components: {
Avatar
},
- mixins: [popoverMenu],
+ mixins: [popoverMenu, currentUser],
props: {
item: { type: Object, default: () => {} }
},
@@ -74,13 +75,18 @@ export default {
text: t('social', 'Reply to post')
}
]
- actions.push(
- {
- action: () => { },
- icon: 'icon-delete',
- text: t('social', 'Delete post')
- }
- )
+ if (this.item.actor_info.account === this.cloudId) {
+ actions.push(
+ {
+ action: () => {
+ this.$store.dispatch('postDelete', this.item)
+ this.hidePopoverMenu()
+ },
+ icon: 'icon-delete',
+ text: t('social', 'Delete post')
+ }
+ )
+ }
return actions
},
relativeTimestamp() {
diff --git a/src/components/TimelineList.vue b/src/components/TimelineList.vue
index 94d51935..9d405b16 100644
--- a/src/components/TimelineList.vue
+++ b/src/components/TimelineList.vue
@@ -22,7 +22,9 @@
<template>
<div class="social__timeline">
- <timeline-entry v-for="entry in timeline" :key="entry.id" :item="entry" />
+ <transition-group name="list" tag="div">
+ <timeline-entry v-for="entry in timeline" :key="entry.id" :item="entry" />
+ </transition-group>
<infinite-loading ref="infiniteLoading" @infinite="infiniteHandler">
<div slot="spinner">
<div class="icon-loading" />
@@ -37,6 +39,22 @@
</div>
</template>
+<style scoped>
+ .list-item {
+ }
+ .list-enter-active, .list-leave-active {
+ transition: all .5s;
+ }
+ .list-enter {
+ opacity: 0;
+ transform: translateY(-30px);
+ }
+ .list-leave-to {
+ opacity: 0;
+ transform: translateX(-100px);
+ }
+</style>
+
<script>
import InfiniteLoading from 'vue-infinite-loading'
import TimelineEntry from './../components/TimelineEntry'
diff --git a/src/store/timeline.js b/src/store/timeline.js
index be1ca66c..38f9e090 100644
--- a/src/store/timeline.js
+++ b/src/store/timeline.js
@@ -37,6 +37,9 @@ const mutations = {
Vue.set(state.timeline, data[item].id, data[item])
}
},
+ removePost(state, post) {
+ Vue.delete(state.timeline, post.id)
+ },
resetTimeline(state) {
state.timeline = {}
state.since = Math.floor(Date.now() / 1000) + 1
@@ -83,6 +86,16 @@ const actions = {
})
})
},
+ postDelete(context, post) {
+ return axios.delete(OC.generateUrl(`apps/social/api/v1/post?id=${post.id}`)).then((response) => {
+ context.commit('removePost', post)
+ // eslint-disable-next-line no-console
+ console.log('Post deleted with token ' + response.data.result.token)
+ }).catch((error) => {
+ OC.Notification.showTemporary('Failed to delete the post')
+ console.error('Failed to delete the post', error)
+ })
+ },
refreshTimeline(context) {
return this.dispatch('fetchTimeline', { sinceTimestamp: Math.floor(Date.now() / 1000) + 1 })
},