add slot ContributionListItem.vue, add verifyLogin, update store for creation

frontend/src/components/Contributions/ContributionForm.vue

@@ -57,6 +57,7 @@
         <b-button class="test-submit" type="submit" variant="primary" :disabled="disable">
           {{ $t('contribution.submit') }}
         </b-button>
+        {{ $store.state }}
       </div>
     </b-form>
   </div>

frontend/src/components/Contributions/ContributionList.vue

@@ -1,17 +1,65 @@
 <template>
   <div class="contribution-list container">
-    <div v-for="item in items" :key="item.id" class="pb-3">
-      {{ item }}
+    {{ items.length }}
+    <div class="list-group" v-for="item in items" :key="item.id">
+      <contribution-list-item v-bind="item" />
     </div>
+    <b-pagination
+      v-if="isPaginationVisible"
+      class="mt-3"
+      pills
+      size="lg"
+      v-model="currentPage"
+      :per-page="pageSize"
+      :total-rows="contributionCount"
+      align="center"
+    ></b-pagination>
   </div>
 </template>
 <script>
+import ContributionListItem from '@/components/Contributions/ContributionListItem.vue'
 export default {
+  components: {
+    ContributionListItem,
+  },
   props: {
     items: {
       type: Array,
       required: true,
     },
+    contributionCount: {
+      type: Number,
+      required: true,
+    },
+    showPagination: {
+      type: Boolean,
+      required: true,
+    },
+    pageSize: { type: Number, default: 25 },
+  },
+  data() {
+    return {
+      currentPage: 1,
+    }
+  },
+  methods: {
+    updateListContributions() {
+      this.$emit('update-list-contributions', {
+        currentPage: this.currentPage,
+        pageSize: this.pageSize,
+      })
+      window.scrollTo(0, 0)
+    },
+  },
+  computed: {
+    isPaginationVisible() {
+      return this.showPagination && this.pageSize < this.contributionCount
+    },
+  },
+  watch: {
+    currentPage() {
+      this.updateListContributions()
+    },
   },
 }
 </script>

frontend/src/components/Contributions/ContributionListItem.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <slot>
+      <div class="border p-3 w-100 mb-1" :class="`border-${variant}`">
+        <div class="d-inline-flex">
+          <div class="mr-2"><b-icon :icon="icon" :variant="variant" class="h2"></b-icon></div>
+          <div class="mr-2" :class="type != 'deleted' ? 'font-weight-bold' : ''">
+            {{ amount | GDD }}
+          </div>
+          {{ $t('math.minus') }}
+          <div class="mx-2">{{ $d(new Date(date), 'short') }}</div>
+        </div>
+        <div class="mr-2">{{ memo }}</div>
+        <div v-if="type === 'pending'" class="text-right pointer">
+          <b-icon icon="pencil" class="h2"></b-icon>
+        </div>
+        <div v-if="type === 'deleted'" class="text-right pointer">
+          <b-icon icon="trash-fill" class="h2"></b-icon>
+        </div>
+      </div>
+    </slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ContributionListItem',
+  props: {
+    id: {
+      type: Number,
+    },
+    amount: {
+      type: String,
+    },
+    memo: {
+      type: String,
+    },
+    createdAt: {
+      type: String,
+    },
+    deletedAt: {
+      type: String,
+    },
+    confirmedBy: {
+      type: Number,
+    },
+    confirmedAt: {
+      type: String,
+    },
+  },
+  computed: {
+    type() {
+      if (this.deletedAt !== null) return 'deleted'
+      if (this.confirmedAt !== null) return 'confirmed'
+      return 'pending'
+    },
+    icon() {
+      if (this.deletedAt !== null) return 'x-circle'
+      if (this.confirmedAt !== null) return 'check'
+      return 'bell-fill'
+    },
+    variant() {
+      if (this.deletedAt !== null) return 'danger'
+      if (this.confirmedAt !== null) return 'success'
+      return 'primary'
+    },
+    date() {
+      if (this.deletedAt !== null) return this.deletedAt
+      if (this.confirmedAt !== null) return this.confirmedAt
+      return this.createdAt
+    },
+  },
+}
+</script>

frontend/src/pages/Community.vue

@@ -6,12 +6,15 @@
           <contribution-form @set-contribution="setContribution" />
         </b-tab>
         <b-tab :title="$t('community.myContributions')">
-          <contribution-list :items="items" />
-        </b-tab>
-        <b-tab :title="$t('navigation.community')">
-          <contribution-list :items="items" />
-          <contribution-list :items="items" />
+          <contribution-list
+            :items="items"
+            @update-list-contributions="updateListContributions"
+            :contributionCount="contributionCount"
+            :showPagination="true"
+            :pageSize="pageSize"
+          />
         </b-tab>
+        <b-tab :title="$t('navigation.community')"></b-tab>
       </b-tabs>
     </div>
   </div>
@@ -20,7 +23,7 @@
 import ContributionForm from '@/components/Contributions/ContributionForm.vue'
 import ContributionList from '@/components/Contributions/ContributionList.vue'
 import { createContribution } from '@/graphql/mutations'
-import { listContributions } from '@/graphql/queries'
+import { listContributions, verifyLogin } from '@/graphql/queries'
 
 export default {
   name: 'Community',
@@ -30,9 +33,10 @@ export default {
   },
   data() {
     return {
+      items: [],
       currentPage: 1,
       pageSize: 25,
-      items: [],
+      contributionCount: 0,
     }
   },
   methods: {
@@ -51,19 +55,24 @@ export default {
         .then((result) => {
           // console.log('result', result.data)
           this.toastSuccess(result.data)
+          this.updateListContributions({
+            currentPage: this.currentPage,
+            pageSize: this.pageSize,
+          })
+          this.verifyLogin()
         })
         .catch((err) => {
           this.toastError(err.message)
         })
     },
-    getListContributions(data) {
+    async updateListContributions(pagination) {
       this.$apollo
         .query({
           fetchPolicy: 'no-cache',
           query: listContributions,
           variables: {
-            currentPage: this.currentPage,
-            pageSize: this.pageSize,
+            currentPage: pagination.currentPage,
+            pageSize: pagination.pageSize,
           },
         })
         .then((result) => {
@@ -71,6 +80,7 @@ export default {
           const {
             data: { listContributions },
           } = result
+          this.contributionCount = listContributions.length
           this.items = listContributions
           // this.toastSuccess(result.data)
         })
@@ -78,9 +88,28 @@ export default {
           this.toastError(err.message)
         })
     },
+    verifyLogin() {
+      this.$apollo
+        .query({
+          query: verifyLogin,
+          fetchPolicy: 'network-only',
+        })
+        .then((result) => {
+          const {
+            data: { verifyLogin },
+          } = result
+          this.$store.dispatch('login', verifyLogin)
+        })
+        .catch(() => {
+          this.$emit('logout')
+        })
+    },
   },
   created() {
-    this.getListContributions()
+    this.updateListContributions({
+      currentPage: this.currentPage,
+      pageSize: this.pageSize,
+    })
   },
 }
 </script>