add slots for messages

frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue

@@ -4,7 +4,12 @@
       <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="1">
+            <b-avatar
+              :text="`${$store.state.firstName[0]} ${$store.state.lastName[0]}`"
+              variant="info"
+            ></b-avatar>
+          </b-col>
           <b-col cols="11">
             <pre class="mt-2">
             {{ $store.state.firstName }} {{ $store.state.lastName }}
@@ -34,7 +39,7 @@
   </div>
 </template>
 <script>
-import {createContributionMessage} from '../../graphql/mutations.js'
+import { createContributionMessage } from '../../graphql/mutations.js'
 
 export default {
   name: 'ContributionMessagesFormular',

frontend/src/components/ContributionMessages/ContributionMessagesList.vue

@@ -2,33 +2,22 @@
   <div class="contribution-messages-list">
     <b-container>
       <div v-for="message in messages" v-bind:key="message.id">
-        <contribution-messages-list-item :typeId="state">
-          <template #IN_PROGRESS>
-            <is-moderator :message="message"></is-moderator>
-          </template>
-          <template #PENDING>
-            <is-not-moderator :message="message" class="text-right"></is-not-moderator>
-          </template>
-        </contribution-messages-list-item>
+        <contribution-messages-list-item :message="message" />
       </div>
     </b-container>
     <br />
     <br />
     <br />
-    <contribution-messages-formular :contributionId="contributionId" />
+    <contribution-messages-formular v-if="state === 'PENDING' || state === 'IN_PROGRESS'" :contributionId="contributionId" />
   </div>
 </template>
 <script>
 import ContributionMessagesListItem from '@/components/ContributionMessages/ContributionMessagesListItem.vue'
-import IsModerator from '@/components/ContributionMessages/slots/IsModerator.vue'
-import IsNotModerator from '@/components/ContributionMessages/slots/IsNotModerator.vue'
 import ContributionMessagesFormular from '@/components/ContributionMessages/ContributionMessagesFormular.vue'
 export default {
   name: 'ContributionMessagesList',
   components: {
     ContributionMessagesListItem,
-    IsModerator,
-    IsNotModerator,
     ContributionMessagesFormular,
   },
   props: {
@@ -38,7 +27,7 @@ export default {
     },
     state: {
       type: String,
-      required: true,
+      required: false,
     },
     messages: {
       type: Array,

frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue

@@ -1,15 +1,37 @@
 <template>
   <div>
-    <slot :name="typeId"></slot>
+    <is-not-moderator v-if="isNotModerator" :message="message"></is-not-moderator>
+    <is-moderator v-else :message="message"></is-moderator>
   </div>
 </template>
 <script>
+import IsModerator from '@/components/ContributionMessages/slots/IsModerator.vue'
+import IsNotModerator from '@/components/ContributionMessages/slots/IsNotModerator.vue'
+
 export default {
   name: 'ContributionMessagesListItem',
+  components: {
+    IsModerator,
+    IsNotModerator,
+  },
   props: {
-    typeId: {
-      type: String,
+    message: {
+      type: Object,
       required: true,
+      default() {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      storeName: `${this.$store.state.firstName} ${this.$store.state.lastName}`,
+      moderationName: `${this.message.userFirstName} ${this.message.userLastName}`,
+    }
+  },
+  computed: {
+    isNotModerator() {
+      return this.storeName === this.moderationName
     },
   },
 }

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

@@ -1,8 +1,14 @@
 <template>
   <div class="slot-is-moderator">
-    <b-avatar square text="AA"></b-avatar>
-    <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
-    <div class="mt-2">{{ message }}</div>
+    <b-avatar
+      square
+      :text="`${message.userFirstName[0]} ${message.userLastName[0]}`"
+      variant="warning"
+    ></b-avatar>
+    <span class="ml-2 mr-2">
+      {{ message.userFirstName }} {{ message.userLastName }} (Moderator)
+    </span>
+    <div class="mt-2 h3">{{ message.message }}</div>
   </div>
 </template>
 <script>
@@ -20,7 +26,7 @@ export default {
 <style>
 .slot-is-moderator {
   clear: both;
-  background-color: rgb(250, 158, 207);
+  /* background-color: rgb(255, 242, 227); */
   width: 75%;
   margin-top: 20px;
 }

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

@@ -1,11 +1,14 @@
 <template>
   <div class="slot-is-not-moderator">
     <div class="text-right">
-      <b-avatar text="BV"></b-avatar>
+      <b-avatar
+        :text="`${message.userFirstName[0]} ${message.userLastName[0]}`"
+        variant="info"
+      ></b-avatar>
       <span class="ml-2 mr-2 text-bold">
         {{ message.userFirstName }} {{ message.userLastName }}
       </span>
-      <div class="mt-2">{{ message }}</div>
+      <div class="mt-2 h3">{{ message.message }}</div>
     </div>
   </div>
 </template>
@@ -28,7 +31,6 @@ export default {
 .slot-is-not-moderator {
   clear: both;
   float: right;
-  background-color: aquamarine;
   width: 75%;
   margin-top: 20px;
   margin-bottom: 20px;

frontend/src/components/Contributions/ContributionList.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="contribution-list container">
     <div class="list-group" v-for="item in items" :key="item.id">
-    {{item}}
       <contribution-list-item
         v-bind="item"
         :contributionId="item.id"

frontend/src/components/Contributions/ContributionListItem.vue

@@ -23,6 +23,7 @@
           class="d-flex flex-row-reverse"
         >
           <div
+            v-if="state !== 'CONFIRMED' && state !== 'DELETED'"
             class="pointer ml-5"
             @click="
               $emit('update-contribution-form', {
@@ -35,15 +36,20 @@
           >
             <b-icon icon="pencil" class="h2"></b-icon>
           </div>
-          <div class="pointer" @click="deleteContribution({ id })">
+          <div
+            v-if="state !== 'CONFIRMED' && state !== 'DELETED'"
+            class="pointer"
+            @click="deleteContribution({ id })"
+          >
             <b-icon icon="trash" class="h2"></b-icon>
           </div>
-          <div v-if="messages" class="pointer">
+          <div v-if="messages.length" class="pointer">
             <b-icon v-b-toggle="collapsId" icon="chat-dots" class="h2 mr-5"></b-icon>
           </div>
         </div>
         <div v-if="messages">
-          <b-button v-if="state === 'IN_PROGRESS'" v-b-toggle="collapsId" variant="primary">
+          <b-button v-if="state === 'IN_PROGRESS'" v-b-toggle="collapsId" variant="dark">
+            <b-icon icon="circle-fill" animation="throb" font-scale="1" variant="warning"></b-icon>
             Bitte beantworte die Nachfrage
           </b-button>
           <b-collapse :id="collapsId" class="mt-2">
@@ -111,6 +117,9 @@ export default {
     messages: {
       type: Array,
       required: false,
+      default() {
+        return []
+      },
     },
     contributionId: {
       type: Number,