From 5f3b19c595a200e6e6c82008d487fa941365f358 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 24 Nov 2022 12:06:24 +0100
Subject: [PATCH] contributionList style

---
 .../Contributions/ContributionForm.vue        |  6 +-
 .../Contributions/ContributionList.vue        |  2 +-
 .../Contributions/ContributionListItem.vue    | 91 ++++++++++++++++++-
 .../Contributions/OpenCreationsAmount.vue     |  2 +-
 frontend/src/pages/Community.vue              |  4 +-
 5 files changed, 96 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index c559c76f6..f2d9a3f8c 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -12,7 +12,11 @@
         <b>{{ $t('contribution.formText.describeYourCommunity') }}</b>
       </div>
     </div>
-    <b-form ref="form" @submit.prevent="submit" class="border p-3">
+    <b-form
+      ref="form"
+      @submit.prevent="submit"
+      class="border p-3 bg-white appBoxShadow gradido-border-radius"
+    >
       <label>{{ $t('contribution.selectDate') }} {{ $t('math.asterisk') }}</label>
       <b-form-datepicker
         id="contribution-date"
diff --git a/frontend/src/components/Contributions/ContributionList.vue b/frontend/src/components/Contributions/ContributionList.vue
index ca4e7a9a0..29fe7d0d5 100644
--- a/frontend/src/components/Contributions/ContributionList.vue
+++ b/frontend/src/components/Contributions/ContributionList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="contribution-list container">
-    <div class="list-group" v-for="item in items" :key="item.id">
+    <div class="mb-5" v-for="item in items" :key="item.id">
       <contribution-list-item
         v-bind="item"
         :contributionId="item.id"
diff --git a/frontend/src/components/Contributions/ContributionListItem.vue b/frontend/src/components/Contributions/ContributionListItem.vue
index 683d234ba..8e7ac4eae 100644
--- a/frontend/src/components/Contributions/ContributionListItem.vue
+++ b/frontend/src/components/Contributions/ContributionListItem.vue
@@ -1,7 +1,69 @@
 <template>
-  <div class="contribution-list-item">
+  <div class="contribution-list-item bg-white appBoxShadow gradido-border-radius p-3">
     <slot>
-      <div class="border p-3 w-100 mb-1" :class="`border-${variant}`">
+      <div class="">
+        <b-row>
+          <b-col cols="2">
+            <b-avatar :icon="icon" :variant="variant" size="4em"></b-avatar>
+          </b-col>
+          <b-col>
+            <div v-if="firstName" class="mr-3">{{ firstName }} {{ lastName }}</div>
+            <div class="small">
+              contributionDate {{ $d(new Date(contributionDate), 'monthAndYear') }}
+            </div>
+            <div class="mt-3 h5">Beitragstext</div>
+            <div>{{ memo }}</div>
+            <!-- <div class="small">
+            contributionDate {{ $d(new Date(contributionDate), 'monthAndYear') }}
+          </div>
+          <div class="small">createdAt {{ createdAt }}</div> -->
+          </b-col>
+          <b-col cols="3">
+            <div class="small">Schöpfung</div>
+            <div class="small">{{ amount | GDD }}</div>
+          </b-col>
+          <b-col cols="1" @click="visible = !visible">
+            <collapse-icon class="text-right" :visible="visible" v-if="messagesCount > 0" />
+          </b-col>
+        </b-row>
+        <b-row class="mt-2">
+          <b-col>
+            <div
+              v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
+              class="pointer mr-3"
+              @click="deleteContribution({ id })"
+            >
+              <b-icon icon="trash"></b-icon>
+              löschen
+            </div>
+          </b-col>
+          <b-col>
+            <div
+              v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
+              class="pointer mr-3"
+              @click="
+                $emit('update-contribution-form', {
+                  id: id,
+                  contributionDate: contributionDate,
+                  memo: memo,
+                  amount: amount,
+                })
+              "
+            >
+              <b-icon icon="pencil"></b-icon>
+              bearbeiten
+            </div>
+          </b-col>
+
+          <b-col>
+            <div v-if="messagesCount > 0" class="pointer">
+              <b-icon icon="chat-dots" @click="visible = !visible"></b-icon>
+              Moderatorchat
+            </div>
+          </b-col>
+        </b-row>
+      </div>
+      <!-- <div class="border p-3 w-100 mb-1" :class="`border-${variant}`">
         <div>
           <div class="d-inline-flex">
             <div class="mr-2">
@@ -68,7 +130,7 @@
           >
             {{ $t('contribution.alert.answerQuestion') }}
           </b-button>
-          <b-collapse :id="collapsId" class="mt-2">
+          <b-collapse :id="collapsId" class="mt-2" v-model="visible">
             <b-card>
               <contribution-messages-list
                 :messages="messages_get"
@@ -80,17 +142,30 @@
             </b-card>
           </b-collapse>
         </div>
-      </div>
+      </div> -->
+      <b-collapse :id="collapsId" class="mt-2" v-model="visible">
+        <b-card>
+          <contribution-messages-list
+            :messages="messages_get"
+            :state="state"
+            :contributionId="contributionId"
+            @get-list-contribution-messages="getListContributionMessages"
+            @update-state="updateState"
+          />
+        </b-card>
+      </b-collapse>
     </slot>
   </div>
 </template>
 <script>
+import CollapseIcon from '../TransactionRows/CollapseIcon'
 import ContributionMessagesList from '@/components/ContributionMessages/ContributionMessagesList.vue'
 import { listContributionMessages } from '../../graphql/queries.js'
 
 export default {
   name: 'ContributionListItem',
   components: {
+    CollapseIcon,
     ContributionMessagesList,
   },
   props: {
@@ -132,6 +207,7 @@ export default {
     state: {
       type: String,
       required: false,
+      default: '',
     },
     messagesCount: {
       type: Number,
@@ -151,12 +227,14 @@ export default {
     return {
       inProcess: true,
       messages_get: [],
+      visible: false,
     }
   },
   computed: {
     icon() {
       if (this.deletedAt) return 'x-circle'
       if (this.confirmedAt) return 'check'
+      if (this.state === 'IN_PROGRESS') return 'question-square'
       return 'bell-fill'
     },
     variant() {
@@ -200,5 +278,10 @@ export default {
       this.$emit('update-state', id)
     },
   },
+  watch: {
+    visible() {
+      if (this.visible) this.getListContributionMessages()
+    },
+  },
 }
 </script>
diff --git a/frontend/src/components/Contributions/OpenCreationsAmount.vue b/frontend/src/components/Contributions/OpenCreationsAmount.vue
index 4760280b4..741519467 100644
--- a/frontend/src/components/Contributions/OpenCreationsAmount.vue
+++ b/frontend/src/components/Contributions/OpenCreationsAmount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="open-creations-amount">
+  <div class="open-creations-amount bg-white appBoxShadow gradido-border-radius p-4">
     <b-table striped hover :items="items"></b-table>
   </div>
 </template>
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index 2e378525f..5cebc54ce 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="community-page">
-    <open-creations-amount v-if="hashLink === '#edit'" />
     <div>
       <b-tabs no-nav-style v-model="tabIndex" content-class="mt-3" align="center">
         <b-tab>
+          <open-creations-amount />
           <contribution-form
             @set-contribution="setContribution"
             @update-contribution="updateContribution"
@@ -41,10 +41,10 @@
   </div>
 </template>
 <script>
+import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
 import ContributionForm from '@/components/Contributions/ContributionForm.vue'
 import ContributionList from '@/components/Contributions/ContributionList.vue'
 import ContributionListInfo from '@/components/Contributions/ContributionListInfo.vue'
-import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
 import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
 import { listContributions, listAllContributions, verifyLogin } from '@/graphql/queries'