new community style prepared

frontend/src/components/Contributions/ContributionForm.vue

@@ -30,7 +30,16 @@
         <template #nav-prev-year><span></span></template>
         <template #nav-next-year><span></span></template>
       </b-form-datepicker>
-      <validation-provider
+      <div v-if="validMaxGDD > 0">
+        <input-textarea
+          v-model="form.memo"
+          :name="$t('form.message')"
+          :label="$t('contribution.activity')"
+          :placeholder="$t('contribution.yourActivity')"
+          :rules="{ required: true, min: 5, max: 255 }"
+        />
+
+        <!-- <validation-provider
         :rules="{
           min: minlength,
           max: maxlength,
@@ -49,28 +58,40 @@
         <b-col v-if="errors">
           <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
         </b-col>
-      </validation-provider>
-      <label class="mt-3">{{ $t('form.amount') }} {{ $t('math.asterisk') }}</label>
-      <b-input-group size="lg" prepend="GDD">
-        <b-form-input
-          id="contribution-amount"
+      </validation-provider> -->
+        <input-amount
           v-model="form.amount"
-          type="text"
-          :formatter="numberFormat"
-        ></b-form-input>
-      </b-input-group>
-      <div
-        v-if="isThisMonth && parseInt(form.amount) > parseInt(maxGddThisMonth)"
-        class="text-danger text-right"
-      >
-        {{ $t('contribution.formText.maxGDDforMonth', { amount: maxGddThisMonth }) }}
+          :name="$t('form.amount')"
+          :label="$t('form.amount')"
+          :placeholder="'20'"
+          :rules="{ required: true, gddSendAmount: [20, validMaxGDD] }"
+          typ="ContributionForm"
+        ></input-amount>
       </div>
-      <div
-        v-if="!isThisMonth && parseInt(form.amount) > parseInt(maxGddLastMonth)"
-        class="text-danger text-right"
+      <div v-else class="mb-5">{{ $t('contribution.exhausted') }}</div>
+      <!-- <validation-provider
+        :name="$t('form.amount')"
+        :rules="{
+          required: true,
+          gddSendAmount: [0.01, validMaxGDD],
+        }"
+        v-slot="{ errors }"
       >
-        {{ $t('contribution.formText.maxGDDforMonth', { amount: maxGddLastMonth }) }}
-      </div>
+        <label class="mt-3">{{ $t('form.amount') }} {{ $t('math.asterisk') }}</label>
+        <b-input-group size="lg" prepend="GDD">
+          <b-form-input
+            id="contribution-amount"
+            v-model="form.amount"
+            type="number"
+            :formatter="numberFormat"
+            :max="validMaxGDD"
+            required
+          ></b-form-input>
+        </b-input-group>
+        <b-col v-if="errors">
+          <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
+        </b-col>
+      </validation-provider> -->
       <b-row class="mt-3">
         <b-col>
           <b-button type="reset" variant="secondary" @click="reset" data-test="button-cancel">
@@ -88,10 +109,17 @@
   </div>
 </template>
 <script>
+import InputAmount from '@/components/Inputs/InputAmount.vue'
+import InputTextarea from '@/components/Inputs/InputTextarea.vue'
+
 const PATTERN_NON_DIGIT = /\D/g
 
 export default {
   name: 'ContributionForm',
+  components: {
+    InputAmount,
+    InputTextarea,
+  },
   props: {
     value: { type: Object, required: true },
     updateAmount: { type: String, required: false },
@@ -139,6 +167,7 @@ export default {
         this.form.date === '' ||
         this.form.memo.length < this.minlength ||
         this.form.memo.length > this.maxlength ||
+        this.form.amount === '' ||
         parseInt(this.form.amount) <= 0 ||
         parseInt(this.form.amount) > 1000 ||
         (this.isThisMonth && parseInt(this.form.amount) > parseInt(this.maxGddThisMonth)) ||
@@ -164,6 +193,9 @@ export default {
         ? parseInt(this.$store.state.creation[2]) + parseInt(this.updateAmount)
         : this.$store.state.creation[2]
     },
+    validMaxGDD() {
+      return Number(this.isThisMonth ? this.maxGddThisMonth : this.maxGddLastMonth)
+    },
   },
 }
 </script>

frontend/src/components/GddSend/TransactionForm.vue

@@ -9,7 +9,13 @@
                 <b-row>
                   <b-col cols="12">
                     <div v-if="radioSelected === sendTypes.send">
-                      <validation-provider
+                      <input-email
+                        :name="$t('form.recipient')"
+                        :label="$t('form.recipient')"
+                        :placeholder="$t('form.email')"
+                        v-model="form.email"
+                      />
+                      <!-- <validation-provider
                         name="Email"
                         :rules="{
                           required: radioSelected === sendTypes.send ? true : false,
@@ -45,11 +51,20 @@
                             {{ error }}
                           </span>
                         </b-col>
-                      </validation-provider>
+                      </validation-provider> -->
                     </div>
                   </b-col>
                   <b-col cols="12">
-                    <validation-provider
+                    <input-amount
+                      v-model="form.amount"
+                      :name="$t('form.amount')"
+                      :label="$t('form.amount')"
+                      :placeholder="'0.01'"
+                      :rules="{ required: true, gddSendAmount: [0.01, balance] }"
+                      typ="TransactionForm"
+                    ></input-amount>
+
+                    <!-- <validation-provider
                       :name="$t('form.amount')"
                       :rules="{
                         required: true,
@@ -82,7 +97,7 @@
                       <b-col v-if="errors">
                         <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
                       </b-col>
-                    </validation-provider>
+                    </validation-provider> -->
                   </b-col>
                 </b-row>
               </b-col>
@@ -122,7 +137,14 @@
 
             <b-row>
               <b-col>
-                <validation-provider
+                <input-textarea
+                  v-model="form.memo"
+                  :name="$t('form.message')"
+                  :label="$t('form.message')"
+                  :placeholder="$t('form.message')"
+                  :rules="{ required: true, min: 5, max: 255 }"
+                />
+                <!-- <validation-provider
                   :rules="{
                     required: true,
                     min: 5,
@@ -147,13 +169,13 @@
                   <b-col v-if="errors">
                     <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
                   </b-col>
-                </validation-provider>
+                </validation-provider> -->
               </b-col>
             </b-row>
-            <div v-if="!!isBalanceDisabled" class="text-danger">
+            <div v-if="!!isBalanceDisabled" class="text-danger mt-5">
               {{ $t('form.no_gdd_available') }}
             </div>
-            <b-row v-else class="test-buttons">
+            <b-row v-else class="test-buttons mt-5">
               <b-col>
                 <b-button type="reset" variant="secondary" @click="onReset">
                   {{ $t('form.cancel') }}
@@ -172,13 +194,19 @@
   </b-row>
 </template>
 <script>
-import { BIcon } from 'bootstrap-vue'
+// import { BIcon } from 'bootstrap-vue'
 import { SEND_TYPES } from '@/pages/Send.vue'
+import InputEmail from '@/components/Inputs/InputEmail.vue'
+import InputAmount from '@/components/Inputs/InputAmount.vue'
+import InputTextarea from '@/components/Inputs/InputTextarea.vue'
 
 export default {
   name: 'TransactionForm',
   components: {
-    BIcon,
+    // BIcon,
+    InputEmail,
+    InputAmount,
+    InputTextarea,
   },
   props: {
     balance: { type: Number, default: 0 },

frontend/src/components/GdtTransactionList.vue

@@ -45,7 +45,7 @@
 import Transaction from '@/components/Transaction.vue'
 
 export default {
-  name: 'gdt-transaction-list',
+  name: 'GdtTransactionList',
   components: {
     Transaction,
   },

frontend/src/components/Inputs/InputAmount.vue

@@ -0,0 +1,77 @@
+<template>
+  <validation-provider
+    tag="div"
+    :rules="rules"
+    :name="name"
+    v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
+  >
+    <b-form-group :label="label" :label-for="labelFor">
+      <b-form-input
+        v-model="currentValue"
+        v-bind="ariaInput"
+        :id="labelFor"
+        :name="name"
+        :placeholder="placeholder"
+        type="text"
+        :state="validated ? valid : false"
+        trim
+        v-focus="amountFocused"
+        @focus="amountFocused = true"
+        @blur="normalizeAmount(valid)"
+      ></b-form-input>
+      <b-form-invalid-feedback v-bind="ariaMsg">
+        {{ errors[0] }}
+      </b-form-invalid-feedback>
+    </b-form-group>
+  </validation-provider>
+</template>
+<script>
+export default {
+  name: 'InputAmount',
+  props: {
+    rules: {
+      type: Object,
+      default: () => {},
+    },
+    typ: { type: String, default: 'TransactionForm' },
+    name: { type: String, required: true, default: 'Amount' },
+    label: { type: String, required: true, default: 'Amount' },
+    placeholder: { type: String, required: true, default: 'Amount' },
+    value: { type: String, required: true },
+    balance: { type: Number, default: 0.0 },
+  },
+  data() {
+    return {
+      currentValue: '',
+      amountValue: 0.0,
+      amountFocused: false,
+    }
+  },
+  computed: {
+    labelFor() {
+      return this.name + '-input-field'
+    },
+  },
+  watch: {
+    currentValue() {
+      this.$emit('input', this.currentValue)
+    },
+    value() {
+      if (this.value !== this.currentValue) this.currentValue = this.value
+    },
+  },
+  methods: {
+    normalizeAmount(isValid) {
+      this.amountFocused = false
+      if (!isValid) return
+      this.amountValue = Number(this.currentValue.replace(',', '.'))
+      if (this.typ === 'TransactionForm') {
+        this.currentValue = this.$n(this.amountValue, 'ungroupedDecimal')
+      }
+      if (this.typ === 'ContributionForm') {
+        this.currentValue = this.amountValue.toFixed()
+      }
+    },
+  },
+}
+</script>

frontend/src/components/Inputs/InputTextarea.vue

@@ -0,0 +1,56 @@
+<template>
+  <validation-provider
+    tag="div"
+    :rules="rules"
+    :name="name"
+    v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
+  >
+    <b-form-group :label="label" :label-for="labelFor">
+      <b-form-textarea
+        v-model="currentValue"
+        v-bind="ariaInput"
+        :id="labelFor"
+        :name="name"
+        :placeholder="placeholder"
+        :state="validated ? valid : false"
+        trim
+      ></b-form-textarea>
+      <b-form-invalid-feedback v-bind="ariaMsg">
+        {{ errors[0] }}
+      </b-form-invalid-feedback>
+    </b-form-group>
+  </validation-provider>
+</template>
+<script>
+export default {
+  name: 'InputTextarea',
+  props: {
+    rules: {
+      type: Object,
+      default: () => {},
+    },
+    name: { type: String, required: true },
+    label: { type: String, required: true },
+    placeholder: { type: String, required: true },
+    value: { type: String, required: true },
+  },
+  data() {
+    return {
+      currentValue: '',
+    }
+  },
+  computed: {
+    labelFor() {
+      return this.name + '-input-field'
+    },
+  },
+  watch: {
+    currentValue() {
+      this.$emit('input', this.currentValue)
+    },
+    value() {
+      if (this.value !== this.currentValue) this.currentValue = this.value
+    },
+  },
+}
+</script>

frontend/src/components/Template/ContentHeader/CommunityMember.vue

@@ -6,8 +6,17 @@
     <div
       class="community-member bg-white appBoxShadow gradido-border-radius p-4 border border-success"
     >
-      <div>CommunityMember components</div>
-      <div>{{ CONFIG.COMMUNITY_NAME }}</div>
+      <div class="h4">Du bist aktives Mitglied</div>
+      <b-row>
+        <b-col cols="8">
+          <div class="small">Ortsname</div>
+          <div class="small">{{ CONFIG.COMMUNITY_NAME }}</div>
+        </b-col>
+        <b-col cols="4" class="border-left border-light">
+          <b-icon icon="people" class="ml-3 mr-3"></b-icon> 1240
+        </b-col>
+      </b-row>
+       
     </div>
   </div>
 </template>

frontend/src/components/Template/ContentHeader/GddAmount.vue

@@ -1,21 +1,33 @@
 <template>
   <div class="translucent-color-opacity">
-    <div v-if="badge" class="text-center">
-      <b-badge class="position-absolute mt--2 ml--5 px-3" variant="success">GDD Senden</b-badge>
+    <div class="text-center">
+      <b-badge
+        v-if="showStatus"
+        class="position-absolute mt--2 ml--5 px-3"
+        :variant="badge ? 'success' : 'light'"
+      >
+        GDD Senden
+      </b-badge>
     </div>
     <div
       class="wallet-amount bg-white appBoxShadow gradido-border-radius p-4 border border-success"
+      :class="badge ? 'border-success' : 'border-light'"
     >
       <b-row>
-        <b-col cols="10" class="h4">GDD Konto</b-col>
-        <b-col cols="2" class="text-center">
-          <b-icon icon="check-circle" variant="success"></b-icon>
-          <div class="small">aktiv</div>
+        <b-col cols="9" class="h4">GDD Konto</b-col>
+        <b-col cols="3" class="text-center">
+          <div v-if="showStatus">
+            <b-icon
+              :icon="badge ? 'check-circle' : 'circle'"
+              :variant="badge ? 'success' : 'light'"
+            ></b-icon>
+            <div class="small">{{ badge ? 'aktiv' : 'inaktiv' }}</div>
+          </div>
         </b-col>
       </b-row>
       <div>
         <b-icon icon="layers" class="mr-3" variant="success"></b-icon>
-        <span class="text-success">{{ balance | GDD }}</span>
+        <span :class="badge ? 'text-success' : 'text-light'">{{ balance | GDD }}</span>
       </div>
     </div>
   </div>
@@ -24,8 +36,10 @@
 export default {
   name: 'GddAmount',
   props: {
+    path: { type: String, required: false, default: '' },
     balance: { type: Number, required: true },
     badge: { type: Boolean, default: false },
+    showStatus: { type: Boolean, default: false },
   },
 }
 </script>

frontend/src/components/Template/ContentHeader/GdtAmount.vue

@@ -1,22 +1,33 @@
 <template>
   <div>
     <div class="text-center">
-      <b-badge class="position-absolute mt--2 ml--4 px-3 zindex1" variant="light">GDT</b-badge>
+      <b-badge
+        class="position-absolute mt--2 ml--4 px-3 zindex1"
+        :variant="badge ? 'success' : 'light'"
+      >
+        GDT
+      </b-badge>
     </div>
 
     <div
-      class="wallet-amount bg-white appBoxShadow gradido-border-radius p-4 border border-light opacity-05"
+      class="wallet-amount bg-white appBoxShadow gradido-border-radius p-4 border opacity-05"
+      :class="badge ? 'border-success' : 'border-light'"
     >
       <b-row>
         <b-col cols="9" class="h4">GDT Konto</b-col>
         <b-col cols="3" class="text-center">
-          <b-icon icon="circle" variant="light"></b-icon>
-          <div class="small">inaktiv</div>
+          <div>
+            <b-icon
+              :icon="badge ? 'check-circle' : 'circle'"
+              :variant="badge ? 'success' : 'light'"
+            ></b-icon>
+            <div class="small">{{ badge ? 'aktiv' : 'inaktiv' }}</div>
+          </div>
         </b-col>
       </b-row>
       <div>
-        <b-icon icon="layers" class="mr-3"></b-icon>
-        0.00 GDT
+        <b-icon icon="layers" class="mr-3" :variant="badge ? 'success' : 'light'"></b-icon>
+        <span :class="badge ? 'text-success' : 'text-light'">0,00 GDT</span>
       </div>
     </div>
   </div>
@@ -24,5 +35,8 @@
 <script>
 export default {
   name: 'GdtAmount',
+  props: {
+    badge: { type: Boolean, default: false },
+  },
 }
 </script>

frontend/src/components/Transaction.vue

@@ -1,80 +1,42 @@
 <template>
   <div>
     <div class="list-group">
-      <div class="list-group-item gdt-transaction-list-item" v-b-toggle="collapseId">
-        <!-- icon  -->
-        <div class="text-right position-absolute">
-          <b-icon :icon="getLinesByType.icon" :class="getLinesByType.iconclasses"></b-icon>
-        </div>
+      <b-row @click="visible = !visible" class="">
+        <b-col cols="2">
+          <b-avatar :icon="getLinesByType.icon" variant="light" size="4em"></b-avatar>
+        </b-col>
+        <b-col>
+          <div>
+            {{ getLinesByType }}
+          </div>
+        </b-col>
+        <b-col cols="3">
+          <div class="small">Gesendet</div>
+          <div class="small">{{ amount | GDT }}</div>
+        </b-col>
+        <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
+      </b-row>
 
-        <!-- collaps Button  -->
-        <div class="text-right gradido-width-96 position-absolute">
-          <b-icon
-            :icon="getCollapseState(id) ? 'caret-up-square' : 'caret-down-square'"
-            :class="getCollapseState(id) ? 'text-black' : 'text-muted'"
-          />
-        </div>
-
-        <!-- type  -->
-        <b-row>
-          <b-col cols="6" class="text-right">
-            {{ getLinesByType.description }}
-          </b-col>
-          <b-col cols="6">
-            {{ getLinesByType.descriptiontext }}
-          </b-col>
-        </b-row>
-
-        <!-- credit -->
-        <b-row>
-          <b-col cols="6" class="text-right">
-            {{ $t('gdt.credit') }}
-          </b-col>
-          <b-col cols="6">
-            {{ getLinesByType.credittext }}
-          </b-col>
-        </b-row>
-
-        <!-- Message-->
-        <b-row v-if="comment && !isGlobalModificator">
-          <b-col cols="6" class="text-right">
-            {{ $t('form.memo') }}
-          </b-col>
-          <b-col cols="6">
-            {{ comment }}
-          </b-col>
-        </b-row>
-
-        <!-- date-->
-        <b-row class="gdt-list-row text-header">
-          <b-col cols="6" class="text-right">
-            {{ $t('form.date') }}
-          </b-col>
-          <b-col cols="6">
-            {{ $d(new Date(date), 'long') }}
-          </b-col>
-        </b-row>
-
-        <!-- collaps trancaction info-->
-        <b-collapse :id="collapseId" class="mt-2 pb-4">
-          <transaction-collapse
-            :amount="amount"
-            :gdtEntryType="gdtEntryType"
-            :factor="factor"
-            :gdt="gdt"
-          ></transaction-collapse>
-        </b-collapse>
-      </div>
+      <b-collapse :id="collapseId" class="mt-2 pb-4" v-model="visible">
+        <transaction-collapse
+          :amount="amount"
+          :gdtEntryType="gdtEntryType"
+          :factor="factor"
+          :gdt="gdt"
+        ></transaction-collapse>
+      </b-collapse>
     </div>
   </div>
 </template>
 <script>
+import CollapseIcon from './TransactionRows/CollapseIcon'
 import TransactionCollapse from './TransactionCollapse.vue'
 import { GdtEntryType } from '../graphql/enums'
 
 export default {
   name: 'Transaction',
   components: {
+    CollapseIcon,
     TransactionCollapse,
   },
   props: {
@@ -89,6 +51,7 @@ export default {
   data() {
     return {
       collapseStatus: [],
+      visible: false,
     }
   },
   methods: {

frontend/src/layouts/templates/ContentHeader.vue

@@ -5,7 +5,7 @@
         <b-row>
           <b-col cols="5">
             <div>
-              <gdd-amount :balance="balance" />
+              <gdd-amount :balance="balance" :showStatus="false" />
             </div>
           </b-col>
           <b-col cols="7">
@@ -21,7 +21,7 @@
         <b-row>
           <b-col cols="6">
             <div>
-              <gdd-amount :balance="balance" :badge="true" />
+              <gdd-amount :balance="balance" :badge="true" :showStatus="true" />
             </div>
           </b-col>
           <b-col cols="6">
@@ -35,12 +35,34 @@
         <b-row>
           <b-col cols="6">
             <div>
-              <gdd-amount :balance="balance" :badge="true" />
+              <router-link to="transaction">
+                <gdd-amount :balance="balance" :badge="true" :showStatus="true" />
+              </router-link>
             </div>
           </b-col>
           <b-col cols="6">
             <div>
-              <gdt-amount />
+              <router-link to="gdt">
+                <gdt-amount />
+              </router-link>
+            </div>
+          </b-col>
+        </b-row>
+      </b-container>
+      <b-container v-if="path === '/gdt'">
+        <b-row>
+          <b-col cols="6">
+            <div>
+              <router-link to="transactions">
+                <gdd-amount :balance="balance" />
+              </router-link>
+            </div>
+          </b-col>
+          <b-col cols="6">
+            <div>
+              <router-link to="gdt">
+                <gdt-amount :badge="true" />
+              </router-link>
             </div>
           </b-col>
         </b-row>

frontend/src/layouts/templates/RightSide.vue

@@ -69,6 +69,22 @@
         </b-col>
       </b-row>
     </b-container>
+    <b-container v-if="path === '/gdt'">
+      <b-row>
+        <b-col>
+          <div class="p-4">
+            <favourites />
+          </div>
+        </b-col>
+      </b-row>
+      <b-row class="mt-3 mt-lg-5">
+        <b-col>
+          <div class="p-4 h-100">
+            <last-transactions />
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
     <b-container v-if="path === '/profile'">
       <b-row>
         <b-col>

frontend/src/pages/Profile.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="profile break">
-    <b-card class="justify-content-center">
+    <b-card class="justify-content-center bg-white appBoxShadow gradido-border-radius">
       <b-form @submit.prevent="submit">
         <b-row>
           <b-col>

frontend/src/pages/Transactions.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pb-4">
-    <b-tabs v-model="tabIndex" content-class="" justified>
+    <!-- <b-tabs v-model="tabIndex" content-class="" justified>
       <b-tab
         :title="`Gradido  (${$n(balance, 'decimal')} GDD)`"
         class="px-4"
@@ -31,7 +31,29 @@
           :pageSize="pageSize"
         />
       </b-tab>
-    </b-tabs>
+    </b-tabs> -->
+
+    <div v-if="gdt">
+      <div>{{ titleGdt }}</div>
+
+      <gdt-transaction-list
+        v-model="currentPage"
+        :transactionsGdt="transactionsGdt"
+        :transactionGdtCount="transactionGdtCount"
+        :pageSize="pageSize"
+      />
+    </div>
+    <div v-else>
+      <gdd-transaction-list
+        :timestamp="timestamp"
+        :transactionCount="transactionCount"
+        :transactionLinkCount="transactionLinkCount"
+        :transactions="transactions"
+        :showPagination="true"
+        @update-transactions="updateTransactions"
+        v-on="$listeners"
+      />
+    </div>
   </div>
 </template>
 <script>
@@ -95,18 +117,14 @@ export default {
     },
   },
   computed: {
-    titleGdt(boolean) {
-      if (this.tabIndex === 1)
-        return `${this.$t('gdt.gdt')} (${this.$n(this.GdtBalance, 'decimal')} GDT)`
+    titleGdt() {
+      if (this.gdt) return `${this.$t('gdt.gdt')} (${this.$n(this.GdtBalance, 'decimal')} GDT)`
       return this.$t('gdt.gdt')
     },
   },
   created() {
     if (this.gdt) {
-      this.tabIndex = 1
       this.updateGdt()
-    } else {
-      this.tabIndex = 0
     }
   },
   watch: {
@@ -115,10 +133,7 @@ export default {
     },
     gdt() {
       if (this.gdt) {
-        this.tabIndex = 1
         this.updateGdt()
-      } else {
-        this.tabIndex = 0
       }
     },
   },