reload messages if submited adminarea

admin/src/components/ContributionMessages/ContributionMessagesFormular.vue

@@ -1,23 +1,5 @@
 <template>
   <div class="contribution-messages-formular">
-    <div v-if="form.text !== ''" class="mt-5">
-      <h4>{{ $t('preview') }}</h4>
-      <div class="border border-info m-5">
-        <b-row>
-          <b-col cols="1"><b-avatar square text="AA"></b-avatar></b-col>
-          <b-col cols="11">
-            <pre class="mt-2">
-            {{ $store.state.moderator.firstName }} {{ $store.state.moderator.lastName }}
-            </pre>
-          </b-col>
-        </b-row>
-        <b-row>
-          <b-col>
-            <pre class="ml-3 mt-3 mb-5">{{ form.text }}</pre>
-          </b-col>
-        </b-row>
-      </div>
-    </div>
     <div>
       <b-form @submit="onSubmit" @reset="onReset">
         <b-form-textarea
@@ -27,8 +9,14 @@
           rows="3"
           max-rows="6"
         ></b-form-textarea>
-        <b-button type="submit" variant="primary">{{ $t('form.submit') }}</b-button>
-        <b-button type="reset" variant="danger">{{ $t('form.reset') }}</b-button>
+        <b-row class="mt-4 mb-6">
+          <b-col>
+            <b-button type="reset" variant="danger">{{ $t('form.reset') }}</b-button>
+          </b-col>
+          <b-col class="text-right">
+            <b-button type="submit" variant="primary">{{ $t('form.submit') }}</b-button>
+          </b-col>
+        </b-row>
       </b-form>
     </div>
   </div>
@@ -63,6 +51,8 @@ export default {
           },
         })
         .then((result) => {
+          this.$emit('get-list-contribution-messages', this.contributionId)
+          this.form.text = ''
           this.toastSuccess(result)
         })
         .catch((error) => {

admin/src/components/ContributionMessages/ContributionMessagesList.vue

@@ -16,7 +16,10 @@
       </div>
     </b-container>
 
-    <contribution-messages-formular :contributionId="contributionId" />
+    <contribution-messages-formular
+      :contributionId="contributionId"
+      @get-list-contribution-messages="getListContributionMessages"
+    />
   </div>
 </template>
 <script>
@@ -51,6 +54,7 @@ export default {
           variables: {
             contributionId: id,
           },
+          fetchPolicy: 'no-cache',
         })
         .then((result) => {
           // console.log('result', result.data.listContributionMessages)

admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue

@@ -23,12 +23,6 @@ export default {
       },
     },
   },
-  data() {
-    return {
-      // storeName: `${this.$store.state.firstName} ${this.$store.state.lastName}`,
-      moderationName: `${this.message.userFirstName} ${this.message.userLastName}`,
-    }
-  },
   computed: {
     isModerator() {
       return this.$store.state.moderator.id === this.message.userId

admin/src/components/ContributionMessages/slots/IsModerator.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="slot-is-moderator">
-    <b-avatar
-      square
-      :text="`${message.userFirstName[0]} ${message.userLastName[0]}`"
-      variant="warning"
-    ></b-avatar>
-    <span class="ml-2 mr-2">
-      {{ message.userFirstName }} {{ message.userLastName }}
-      <small class="ml-4 text-success">{{ $t('moderator') }}</small>
-    </span>
-    <div class="mt-2 text-bold h4">{{ message.message }}</div>
+    <div class="text-right">
+      <b-avatar
+        square
+        :text="`${message.userFirstName[0]} ${message.userLastName[0]}`"
+        variant="warning"
+      ></b-avatar>
+      <span class="ml-2 mr-2">
+        {{ message.userFirstName }} {{ message.userLastName }}
+        <small class="ml-4 text-success">{{ $t('moderator') }}</small>
+      </span>
+      <div class="mt-2 text-bold h4">{{ message.message }}</div>
+    </div>
   </div>
 </template>
 <script>
@@ -27,7 +29,9 @@ export default {
 <style>
 .slot-is-moderator {
   clear: both;
+  float: right;
   width: 75%;
   margin-top: 20px;
+  margin-bottom: 20px;
 }
 </style>

admin/src/components/ContributionMessages/slots/IsNotModerator.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="slot-is-not-moderator">
-    <div class="text-right">
+    <div>
       <b-avatar
         :text="`${message.userFirstName[0]} ${message.userLastName[0]}`"
         variant="info"
@@ -25,14 +25,9 @@ export default {
 }
 </script>
 <style>
-.clear {
-  clear: both;
-}
 .slot-is-not-moderator {
   clear: both;
-  float: right;
   width: 75%;
   margin-top: 20px;
-  margin-bottom: 20px;
 }
 </style>