Refactored to modalData for Delete Comment and Posts

The error is gone with this.

webapp/components/Comment.vue

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

webapp/components/ContentMenu.vue

@@ -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,
         },
       })
     },

webapp/components/Modal.vue

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

webapp/components/Modal/DeleteModal.vue

@@ -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">
+      <ds-button
-        {{ $t('delete.submit') }}
+        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(this.modalData.messageIdent, this.modalData.messageParams)
-      return this.$t(`delete.${this.type}.message`, { name })
     },
   },
   methods: {
     async cancel() {
-      if (this.callbacks.cancel) {
+      await this.modalData.buttons.cancel.callback()
-        await this.callbacks.cancel()
-      }
       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.modalData.buttons.confirm.callback()
-          await this.callbacks.confirm()
-        }
         this.success = true
         setTimeout(() => {
           this.isOpen = false

webapp/components/Modal/DisableModal.vue

@@ -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) {
+      // 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.callbacks.cancel()
+      // 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) {
+        // 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.callbacks.confirm()
+        // await this.modalData.buttons.confirm.callback()
-        }
         await this.$apollo.mutate({
           mutation: gql`
             mutation($id: ID!) {

webapp/components/Modal/ReportModal.vue

@@ -10,9 +10,7 @@
     <p v-html="message" />
 
     <template slot="footer">
-      <ds-button class="cancel" icon="close" @click="cancel">
+      <ds-button class="cancel" icon="close" @click="cancel">{{ $t('report.cancel') }}</ds-button>
-        {{ $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) {
+      // 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.callbacks.cancel()
+      // 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!) {

webapp/components/PostCard/index.vue

@@ -18,9 +18,7 @@
       </div>
       <ds-space margin-bottom="small" />
       <!-- Post Title -->
-      <ds-heading tag="h3" no-margin>
+      <ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
-        {{ 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>

webapp/components/ReleaseModal/ReleaseModal.vue

@@ -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!) {

webapp/locales/de.json

@@ -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!"
     }
   },

webapp/locales/en.json

@@ -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!"
     }
   },

webapp/mixins/PostMutationHelpers.js

@@ -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'
+            // case 'page':
-            // console.log('called "this.$router.history.push" !!!')
             this.$router.history.push('/') // Single page type: Redirect to index (main) page
             break
         }

webapp/pages/post/_id/_slug/index.vue

@@ -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>
+      <ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
-        {{ 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>

webapp/pages/profile/_id/_slug.vue

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