ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactored handling of DeleteModal in Comments and Posts

Browse Source
This commit is contained in:
Wolfgang Huß 2019-05-18 12:58:51 +02:00
parent 04deda57ae
commit 9af8c2b46c
8 changed files with 88 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
webapp/components/Comment.vue
View File

@ -19,8 +19,8 @@
<content-menu
placement="bottom-end"
resource-type="comment"
:deleteCallback="deleteCallback"
:resource="comment"
:callbacks="{ confirmCallback, cancelCallback: null }"
style="float-right"
:is-owner="isAuthor(author.id)"
/>
@ -37,6 +37,7 @@
</template>
<script>
import gql from 'graphql-tag'
import { mapGetters } from 'vuex'
import HcUser from '~/components/User'
import ContentMenu from '~/components/ContentMenu'
@ -71,8 +72,27 @@ export default {
isAuthor(id) {
return this.user.id === id
},
deleteCallback() {
console.log('"deleteCallback" was called !!!')
async confirmCallback() {
console.log('"confirmCallback" was called !!! ', this.comment.id)
try {
// XXX Make custom mutation and tests in the Backend !!!
var gqlMutation = gql`
mutation($id: ID!) {
DeleteComment(id: $id) {
id
}
}
`
await this.$apollo.mutate({
mutation: gqlMutation,
variables: { id: this.comment.id }
})
this.$toast.success(this.$t(`delete.comment.success`))
this.$emit('deleteComment')
} catch (err) {
this.$toast.error(err.message)
}
}
}
}

6
webapp/components/ContentMenu.vue
View File

@ -60,7 +60,8 @@ export default {
validator: value => {
return value.match(/(contribution|comment|organization|user)/)
}
}
},
callbacks: { type: Object, default: () => {} }
},
computed: {
routes() {
@ -151,7 +152,8 @@ export default {
name: dialog,
data: {
type: this.resourceType,
resource: this.resource
resource: this.resource,
callbacks: this.callbacks
}
})
}

7
webapp/components/Modal.vue
View File

@ -18,7 +18,8 @@
v-if="open === 'delete'"
:id="data.resource.id"
:type="data.type"
:deleteCallback="deleteCallback"
:confirm-callback="data.callbacks.confirmCallback"
:cancel-callback="!!data.callbacks.cancelCallback ? data.callbacks.cancelCallback : null"
:name="name"
@close="close"
/>
@ -38,10 +39,6 @@ export default {
ReportModal,
DeleteModal
},
props: {
deleteCallback: { type: Function, required: true },
cancelCallback: { type: Function, default: null }
},
computed: {
...mapGetters({
data: 'modal/data',

56
webapp/components/Modal/DeleteModal.vue
View File

@ -53,7 +53,7 @@ export default {
props: {
name: { type: String, default: '' },
type: { type: String, required: true },
deleteCallback: { type: Function, required: true },
confirmCallback: { type: Function, required: true },
cancelCallback: { type: Function, default: null },
id: { type: String, required: true }
},
@ -78,6 +78,9 @@ export default {
this.isOpen = false
setTimeout(() => {
this.$emit('close')
if (!!this.cancelCallback) {
this.cancelCallback()
}
}, 1000)
},
async confirm() {
@ -87,34 +90,28 @@ export default {
try {
switch (this.type) {
case 'contribution':
gqlMutation = gql`
mutation($id: ID!) {
DeletePost(id: $id) {
id
}
}
`
// gqlMutation = gql`
// mutation($id: ID!) {
// DeletePost(id: $id) {
// id
// }
// }
// `
// await this.$apollo.mutate({
// mutation: gqlMutation,
// variables: { id: this.id }
// })
// this.$toast.success(this.$t(`delete.${this.type}.success`))
await this.confirmCallback()
break
case 'comment':
// XXX Make custom mutation and tests in the Backend !!!
gqlMutation = gql`
mutation($id: ID!) {
DeleteComment(id: $id) {
id
}
}
`
await this.confirmCallback()
break
}
await this.$apollo.mutate({
mutation: gqlMutation,
variables: { id: this.id }
})
this.success = true
this.$toast.success(this.$t(`delete.${this.type}.success`))
setTimeout(() => {
this.isOpen = false
// XXX For comment just reload the page !!!
setTimeout(() => {
this.success = false
this.$emit('close')
@ -122,25 +119,22 @@ export default {
case 'contribution':
if (this.$router.history.current.name === 'post-id-slug') {
// redirect to index
this.$router.history.push('/')
// this.$router.history.push('/')
} else {
// reload the page (when deleting from profile or index)
window.location.assign(window.location.href)
// window.location.assign(window.location.href)
}
break
case 'comment':
// reload the page
// window.location.assign(window.location.href)
console.log('Remove comment emit !!!')
// this.$parent.$parent.$emit('deleteComment')
this.deleteCallback()
break
}
}, 500)
}, 1500)
} catch (err) {
this.success = false
this.$toast.error(err.message)
// switch (this.type) {
// case 'contribution':
// this.$toast.error(err.message)
// break
// }
} finally {
this.loading = false
}

3
webapp/components/PostCard/index.vue
View File

@ -64,6 +64,7 @@
<content-menu
resource-type="contribution"
:resource="post"
:callbacks="{ confirmCallback, cancelCallback: null }"
:is-owner="isAuthor"
/>
</no-ssr>
@ -77,6 +78,7 @@ import HcUser from '~/components/User'
import ContentMenu from '~/components/ContentMenu'
import { randomBytes } from 'crypto'
import { mapGetters } from 'vuex'
import Post from '~/mixins/Post'
export default {
name: 'HcPostCard',
@ -84,6 +86,7 @@ export default {
HcUser,
ContentMenu
},
mixins: [Post],
props: {
post: {
type: Object,

25
webapp/mixins/Post.js Normal file
View File

@ -0,0 +1,25 @@
import gql from 'graphql-tag'
export default {
methods: {
async confirmCallback() {
try {
var gqlMutation = gql`
mutation($id: ID!) {
DeletePost(id: $id) {
id
}
}
`
await this.$apollo.mutate({
mutation: gqlMutation,
variables: { id: this.post.id }
})
this.$toast.success(this.$t(`delete.contribution.success`))
// this.$emit('deletePost')
} catch (err) {
this.$toast.error(err.message)
}
}
}
}

3
webapp/pages/post/_id/_slug/index.vue
View File

@ -18,6 +18,7 @@
placement="bottom-end"
resource-type="contribution"
:resource="post"
:callbacks="{ confirmCallback, cancelCallback: null }"
:is-owner="isAuthor(post.author.id)"
/>
</no-ssr>
@ -114,6 +115,7 @@ import HcUser from '~/components/User'
import HcShoutButton from '~/components/ShoutButton.vue'
import HcCommentForm from '~/components/comments/CommentForm'
import HcCommentList from '~/components/comments/CommentList'
import Post from '~/mixins/Post'
export default {
transition: {
@ -129,6 +131,7 @@ export default {
HcCommentForm,
HcCommentList
},
mixins: [Post],
head() {
return {
title: this.title

3
webapp/pages/profile/_id/_slug.vue
View File

@ -25,6 +25,7 @@
placement="bottom-end"
resource-type="user"
:resource="user"
:callbacks="{ confirmCallback, cancelCallback: null }"
:is-owner="myProfile"
class="user-content-menu"
/>
@ -327,6 +328,7 @@ import HcBadges from '~/components/Badges.vue'
import HcLoadMore from '~/components/LoadMore.vue'
import HcEmpty from '~/components/Empty.vue'
import ContentMenu from '~/components/ContentMenu'
import Post from '~/mixins/Post'
export default {
components: {
@ -339,6 +341,7 @@ export default {
HcEmpty,
ContentMenu
},
mixins: [Post],
transition: {
name: 'slide-up',
mode: 'out-in'