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 to modalData for Delete Comment and Posts

Browse Source 
The error is gone with this.
This commit is contained in:
Wolfgang Huß 2019-06-07 18:04:12 +02:00
parent f944142e4b
commit b2e1873ade
13 changed files with 106 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
webapp/components/Comment.vue
View File

@ -9,12 +9,14 @@
<ds-space margin-bottom="x-small">
<hc-user :user="author" :date-time="comment.createdAt" />
</ds-space>
<!-- Content Menu (can open Modals) -->
<no-ssr>
<content-menu
placement="bottom-end"
resource-type="comment"
:resource="comment"
:callbacks="{ confirm: deleteCommentCallback, cancel: null }"
:modalsData="menuModalsData"
style="float-right"
:is-owner="isAuthor(author.id)"
/>
@ -47,6 +49,31 @@ export default {
},
dateTime: { type: [Date, String], default: null },
},
data() {
return {
menuModalsData: {
delete: {
titleIdent: 'delete.comment.title',
messageIdent: 'delete.comment.message',
messageParams: {
name: this.$filters.truncate(this.comment.contentExcerpt, 30),
},
buttons: {
confirm: {
icon: 'trash',
textIdent: 'delete.submit',
callback: this.deleteCommentCallback,
},
cancel: {
icon: 'close',
textIdent: 'delete.cancel',
callback: () => {},
},
},
},
},
}
},
computed: {
...mapGetters({
user: 'auth/user',

10
webapp/components/ContentMenu.vue
View File

@ -43,7 +43,13 @@ export default {
return value.match(/(contribution|comment|organization|user)/)
},
},
callbacks: { type: Object, required: true },
modalsData: {
type: Object,
required: false,
// default: () => {
// return {}
// },
},
},
computed: {
routes() {
@ -145,7 +151,7 @@ export default {
data: {
type: this.resourceType,
resource: this.resource,
callbacks: this.callbacks,
modalsData: this.modalsData,
},
})
},

6
webapp/components/Modal.vue
View File

@ -6,7 +6,6 @@
:id="data.resource.id"
:type="data.type"
:name="name"
:callbacks="data.callbacks"
@close="close"
/>
<release-modal
@ -21,7 +20,6 @@
:id="data.resource.id"
:type="data.type"
:name="name"
:callbacks="data.callbacks"
@close="close"
/>
<delete-modal
@ -29,7 +27,7 @@
:id="data.resource.id"
:type="data.type"
:name="name"
:callbacks="data.callbacks"
:modalData="data.modalsData.delete"
@close="close"
/>
</div>
@ -63,7 +61,7 @@ export default {
switch (this.data.type) {
case 'user':
return name
case 'contribution':
case 'contribution': // REFACTORING: In DeleteModal – Already replaced "title" by "this.menuModalsData.delete.messageParams".
return title
case 'comment':
return author && author.name

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

@ -10,10 +10,18 @@
<p v-html="message" />
<template slot="footer">
<ds-button class="cancel" icon="close" @click="cancel">{{ $t('delete.cancel') }}</ds-button>
<ds-button class="cancel" :icon="modalData.buttons.cancel.icon" @click="cancel">
{{ $t(modalData.buttons.cancel.textIdent) }}
</ds-button>
<ds-button danger class="confirm" icon="trash" :loading="loading" @click="confirm">
{{ $t('delete.submit') }}
<ds-button
danger
class="confirm"
:icon="modalData.buttons.confirm.icon"
:loading="loading"
@click="confirm"
>
{{ $t(modalData.buttons.confirm.textIdent) }}
</ds-button>
</template>
</ds-modal>
@ -30,7 +38,7 @@ export default {
props: {
name: { type: String, default: '' },
type: { type: String, required: true },
callbacks: { type: Object, required: true },
modalData: { type: Object, required: true },
id: { type: String, required: true },
},
data() {
@ -42,18 +50,15 @@ export default {
},
computed: {
title() {
return this.$t(`delete.${this.type}.title`)
return this.$t(this.modalData.titleIdent)
},
message() {
const name = this.$filters.truncate(this.name, 30)
return this.$t(`delete.${this.type}.message`, { name })
return this.$t(this.modalData.messageIdent, this.modalData.messageParams)
},
},
methods: {
async cancel() {
if (this.callbacks.cancel) {
await this.callbacks.cancel()
}
await this.modalData.buttons.cancel.callback()
this.isOpen = false
setTimeout(() => {
this.$emit('close')
@ -62,9 +67,7 @@ export default {
async confirm() {
this.loading = true
try {
if (this.callbacks.confirm) {
await this.callbacks.confirm()
}
await this.modalData.buttons.confirm.callback()
this.success = true
setTimeout(() => {
this.isOpen = false

11
webapp/components/Modal/DisableModal.vue
View File

@ -21,7 +21,6 @@ export default {
props: {
name: { type: String, default: '' },
type: { type: String, required: true },
callbacks: { type: Object, required: true },
id: { type: String, required: true },
},
data() {
@ -42,9 +41,8 @@ export default {
},
methods: {
async cancel() {
if (this.callbacks.cancel) {
await this.callbacks.cancel()
}
// TODO: Use the "modalData" structure introduced in "DeleteModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
// await this.modalData.buttons.cancel.callback()
this.isOpen = false
setTimeout(() => {
this.$emit('close')
@ -52,9 +50,8 @@ export default {
},
async confirm() {
try {
if (this.callbacks.confirm) {
await this.callbacks.confirm()
}
// TODO: Use the "modalData" structure introduced in "DeleteModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
// await this.modalData.buttons.confirm.callback()
await this.$apollo.mutate({
mutation: gql`
mutation($id: ID!) {

15
webapp/components/Modal/ReportModal.vue
View File

@ -10,9 +10,7 @@
<p v-html="message" />
<template slot="footer">
<ds-button class="cancel" icon="close" @click="cancel">
{{ $t('report.cancel') }}
</ds-button>
<ds-button class="cancel" icon="close" @click="cancel">{{ $t('report.cancel') }}</ds-button>
<ds-button
danger
@ -39,7 +37,6 @@ export default {
props: {
name: { type: String, default: '' },
type: { type: String, required: true },
callbacks: { type: Object, required: true },
id: { type: String, required: true },
},
data() {
@ -60,9 +57,8 @@ export default {
},
methods: {
async cancel() {
if (this.callbacks.cancel) {
await this.callbacks.cancel()
}
// TODO: Use the "modalData" structure introduced in "DeleteModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
// await this.modalData.buttons.cancel.callback()
this.isOpen = false
setTimeout(() => {
this.$emit('close')
@ -70,10 +66,9 @@ export default {
},
async confirm() {
this.loading = true
// TODO: Use the "modalData" structure introduced in "DeleteModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
// await this.modalData.buttons.confirm.callback()
try {
if (this.callbacks.confirm) {
await this.callbacks.confirm()
}
await this.$apollo.mutate({
mutation: gql`
mutation($id: ID!) {

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

@ -18,9 +18,7 @@
</div>
<ds-space margin-bottom="small" />
<!-- Post Title -->
<ds-heading tag="h3" no-margin>
{{ post.title }}
</ds-heading>
<ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
<ds-space margin-bottom="small" />
<!-- Post Content Excerpt -->
<!-- eslint-disable vue/no-v-html -->
@ -55,7 +53,7 @@
<content-menu
resource-type="contribution"
:resource="post"
:callbacks="{ confirm: deletePostCallback, cancel: null }"
:modalsData="menuModalsData"
:is-owner="isAuthor"
/>
</div>

4
webapp/components/ReleaseModal/ReleaseModal.vue
View File

@ -40,6 +40,8 @@ export default {
},
methods: {
cancel() {
// TODO: Use the "modalData" structure introduced in "DeleteModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
// await this.modalData.buttons.cancel.callback()
this.isOpen = false
setTimeout(() => {
this.$emit('close')
@ -47,6 +49,8 @@ export default {
},
async confirm() {
try {
// TODO: Use the "modalData" structure introduced in "DeleteModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
// await this.modalData.buttons.confirm.callback()
await this.$apollo.mutate({
mutation: gql`
mutation($id: ID!) {

2
webapp/locales/de.json
View File

@ -235,7 +235,7 @@
"comment": {
"title": "Lösche Kommentar",
"type": "Comment",
"message": "Bist du sicher, dass du den Kommentar von \"<b>{name}</b>\" löschen möchtest?",
"message": "Bist du sicher, dass du den Kommentar \"<b>{name}</b>\" löschen möchtest?",
"success": "Kommentar erfolgreich gelöscht!"
}
},

2
webapp/locales/en.json
View File

@ -235,7 +235,7 @@
"comment": {
"title": "Delete Comment",
"type": "Comment",
"message": "Do you really want to delete the comment from \"<b>{name}</b>\"?",
"message": "Do you really want to delete the comment \"<b>{name}</b>\"?",
"success": "Comment successfully deleted!"
}
},

32
webapp/mixins/PostMutationHelpers.js
View File

@ -1,9 +1,34 @@
import gql from 'graphql-tag'
export default {
data() {
return {
menuModalsData: {
delete: {
titleIdent: 'delete.contribution.title',
messageIdent: 'delete.contribution.message',
messageParams: {
// "this.post" is not defined at the beginning …
name: this.post ? this.$filters.truncate(this.post.title, 30) : '',
},
buttons: {
confirm: {
icon: 'trash',
textIdent: 'delete.submit',
callback: this.deletePostCallback,
},
cancel: {
icon: 'close',
textIdent: 'delete.cancel',
callback: () => {},
},
},
},
},
}
},
methods: {
async deletePostCallback(postDisplayType = 'list') {
// console.log('inside "deletePostCallback" !!! ', this.post)
try {
var gqlMutation = gql`
mutation($id: ID!) {
@ -19,15 +44,12 @@ export default {
},
})
this.$toast.success(this.$t('delete.contribution.success'))
// console.log('called "this.$t" !!!')
switch (postDisplayType) {
case 'list':
this.$emit('deletePost')
// console.log('emitted "deletePost" !!!')
break
default:
// case 'page'
// console.log('called "this.$router.history.push" !!!')
// case 'page':
this.$router.history.push('/') // Single page type: Redirect to index (main) page
break
}

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

@ -7,19 +7,18 @@
>
<ds-space margin-bottom="small" />
<hc-user :user="post.author" :date-time="post.createdAt" />
<!-- Content Menu (can open Modals) -->
<no-ssr>
<content-menu
placement="bottom-end"
resource-type="contribution"
:resource="post"
:callbacks="{ confirm: () => deletePostCallback('page'), cancel: null }"
:modalsData="menuModalsDataPage()"
:is-owner="isAuthor(post.author.id)"
/>
</no-ssr>
<ds-space margin-bottom="small" />
<ds-heading tag="h3" no-margin>
{{ post.title }}
</ds-heading>
<ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
<ds-space margin-bottom="small" />
<!-- Content -->
<!-- eslint-disable vue/no-v-html -->
@ -215,6 +214,11 @@ export default {
isAuthor(id) {
return this.$store.getters['auth/user'].id === id
},
menuModalsDataPage() {
const locMenuModalsData = this.menuModalsData
locMenuModalsData.delete.buttons.confirm.callback = () => this.deletePostCallback('page')
return locMenuModalsData
},
},
}
</script>

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

@ -12,13 +12,12 @@
>
<hc-upload v-if="myProfile" :user="user" />
<hc-avatar v-else :user="user" class="profile-avatar" size="x-large" />
<!-- Content Menu (can open Modals) -->
<!-- Menu -->
<no-ssr>
<content-menu
placement="bottom-end"
resource-type="user"
:resource="user"
:modalsData="modalsData"
:is-owner="myProfile"
class="user-content-menu"
/>
@ -241,7 +240,6 @@ import HcEmpty from '~/components/Empty.vue'
import ContentMenu from '~/components/ContentMenu'
import HcUpload from '~/components/Upload'
import HcAvatar from '~/components/Avatar/Avatar.vue'
import PostMutationHelpers from '~/mixins/PostMutationHelpers'
export default {
components: {
@ -256,7 +254,6 @@ export default {
ContentMenu,
HcUpload,
},
mixins: [PostMutationHelpers],
transition: {
name: 'slide-up',
mode: 'out-in',
@ -267,35 +264,6 @@ export default {
voted: false,
page: 1,
pageSize: 6,
modalsData: {
delete: {
titel: () => {
this.$t('delete.contribution.title')
},
message: () => {
const name = this.$filters.truncate(this.name, 30)
return this.$t(`delete.contribution.message`, { name })
},
buttons: {
confirm: {
icon: 'trash',
text: () => {
this.$t('delete.submit')
},
callback: this.deletePostCallback,
},
cancel: {
icon: 'close',
text: () => {
this.$t('delete.cancel')
},
callback: () => {},
},
},
},
disableCallbacks: { confirmCallback: () => {}, cancelCallback: () => {} },
reportCallbacks: { confirmCallback: () => {}, cancelCallback: () => {} },
},
}
},
computed: {