add slotsystem

admin/src/components/ContributionMessages/ContributionMessagesFormular.vue

@@ -1,18 +1,33 @@
 <template>
   <div class="contribution-messages-formular">
-    <b-form @submit="onSubmit" @reset="onReset">
+    <div v-if="form.text !== ''" class="mt-5">
-      <b-form-textarea
+      <h4>Vorschau</h4>
-        id="textarea"
+      <div class="border border-info m-5">
-        v-model="form.text"
+        <b-row>
-        placeholder="Enter something..."
+          <b-col cols="1"><b-avatar square text="AA"></b-avatar></b-col>
-        rows="3"
+          <b-col cols="11">
-        max-rows="6"
+            <pre class="ml-3 mt-3 mb-5">
-      ></b-form-textarea>
+              <span class="ml-2 mr-2">
-      <p v-if="form.text !== ''" class="mt-5">Vorschau</p>
+              {{ $store.state.moderator.firstName }} {{ $store.state.moderator.lastName }}
-      <pre class="ml-3 mt-3 mb-5">{{ form.text }}</pre>
+            </span>
-      <b-button type="submit" variant="primary">Submit</b-button>
+            {{ form.text }}</pre>
-      <b-button type="reset" variant="danger">Reset</b-button>
+          </b-col>
-    </b-form>
+        </b-row>
+      </div>
+    </div>
+    <div>
+      <b-form @submit="onSubmit" @reset="onReset">
+        <b-form-textarea
+          id="textarea"
+          v-model="form.text"
+          placeholder="Enter something..."
+          rows="3"
+          max-rows="6"
+        ></b-form-textarea>
+        <b-button type="submit" variant="primary">Submit</b-button>
+        <b-button type="reset" variant="danger">Reset</b-button>
+      </b-form>
+    </div>
   </div>
 </template>
 <script>

admin/src/components/ContributionMessages/ContributionMessagesList.vue

@@ -3,15 +3,37 @@
     ContributionMessagesList
 
     <b-container>
-      <div v-for="message in messages">
+      <div v-for="message in messages" v-bind:key="message.id">
-        {{ message }}
+        <contribution-messages-list-item :typeId="message.isModerator">
+          <template #1>
+            <is-moderator :message="message"></is-moderator>
+          </template>
+          <template #0>
+            <is-not-moderator :message="message" class="text-right"></is-not-moderator>
+          </template>
+        </contribution-messages-list-item>
       </div>
     </b-container>
+    <br />
+    <br />
+    <br />
+    <contribution-messages-formular />
   </div>
 </template>
 <script>
+import ContributionMessagesListItem from './slots/ContributionMessagesListItem.vue'
+import IsModerator from './slots/IsModerator.vue'
+import IsNotModerator from './slots/IsNotModerator.vue'
+import ContributionMessagesFormular from '../ContributionMessages/ContributionMessagesFormular.vue'
+
 export default {
   name: 'ContributionMessagesList',
+  components: {
+    ContributionMessagesListItem,
+    IsModerator,
+    IsNotModerator,
+    ContributionMessagesFormular,
+  },
   data() {
     return {
       messages: [
@@ -22,7 +44,7 @@ export default {
           uuid: '1',
           firstName: 'peter',
           lastName: 'lustig',
-          isModerator: true,
+          isModerator: 1,
         },
         {
           id: '1',
@@ -31,19 +53,33 @@ export default {
           uuid: '2',
           firstName: 'bibi',
           lastName: 'bloxberg',
-          isModerator: false,
+          isModerator: 0,
         },
         {
-          id: '0',
+          id: '2',
           msgid: '0',
           memo: 'oG iu Hih hi  ',
           uuid: '1',
           firstName: 'peter',
           lastName: 'lustig',
-          isModerator: true,
+          isModerator: 1,
+        },
+        {
+          id: '3',
+          msgid: '0',
+          memo: 'zdg  gdggs ds gdggusgdug nftz s s ZF TZfz FF 564c ',
+          uuid: '2',
+          firstName: 'bibi',
+          lastName: 'bloxberg',
+          isModerator: 0,
         },
       ],
     }
   },
 }
 </script>
+<style scoped>
+.temp-message {
+  margin-top: 50px;
+}
+</style>

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

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <slot :name="typeId"></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ContributionMessagesListItem',
+  props: {
+    typeId: {
+      type: Number,
+      required: true,
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,27 @@
+<template>
+  <div class="slot-is-moderator">
+    <b-avatar square text="AA"></b-avatar>
+    <span class="ml-2 mr-2">{{ message.firstName }} {{ message.lastName }}</span>
+    <div class="mt-2">{{ message }}</div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    message: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+  },
+}
+</script>
+<style>
+.slot-is-moderator {
+  clear: both;
+  background-color: rgb(250, 158, 207);
+  width: 75%;
+  margin-top: 20px;
+}
+</style>

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

@@ -0,0 +1,33 @@
+<template>
+  <div class="slot-is-not-moderator">
+    <div class="text-right">
+      <b-avatar text="BV"></b-avatar>
+      <span class="ml-2 mr-2 text-bold">{{ message.firstName }} {{ message.lastName }}</span>
+      <div class="mt-2">{{ message }}</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    message: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+  },
+}
+</script>
+<style>
+.clear {
+  clear: both;
+}
+.slot-is-not-moderator {
+  clear: both;
+  float: right;
+  background-color: aquamarine;
+  width: 75%;
+  margin-top: 20px;
+}
+</style>

admin/src/components/Tables/OpenCreationsTable.vue

@@ -51,12 +51,7 @@
               />
             </div>
             <div v-else>
-              <contribution-messages-formular />
-              <hr />
               <contribution-messages-list />
-              <br />
-              <br />
-              <br />
             </div>
           </template>
         </row-details>
@@ -69,7 +64,7 @@
 import { toggleRowDetails } from '../../mixins/toggleRowDetails'
 import RowDetails from '../RowDetails.vue'
 import EditCreationFormular from '../EditCreationFormular.vue'
-import ContributionMessagesFormular from '../ContributionMessages/ContributionMessagesFormular.vue'
+
 import ContributionMessagesList from '../ContributionMessages/ContributionMessagesList.vue'
 
 export default {
@@ -78,7 +73,6 @@ export default {
   components: {
     EditCreationFormular,
     RowDetails,
-    ContributionMessagesFormular,
     ContributionMessagesList,
   },
   props: {