add pagination on contributions lists

admin/src/components/Tables/OpenCreationsTable.vue

@@ -1,11 +1,20 @@
 <template>
   <div class="open-creations-table">
-    <b-table-lite :items="items" :fields="fields" caption-top striped hover stacked="md">
+    <b-table-lite
+      :items="items"
+      :fields="fields"
+      caption-top
+      striped
+      hover
+      stacked="md"
+      :tbody-tr-class="rowClass"
+    >
       <template #cell(state)="row">
-        <b-icon v-if="row.item.state === 'IN_PROGRESS'" icon="bell-fill"></b-icon>
+        <b-icon v-if="row.item.state === 'IN_PROGRESS'" icon="question-square"></b-icon>
         <b-icon v-if="row.item.state === 'PENDING'" icon="bell-fill"></b-icon>
         <b-icon v-if="row.item.state === 'CONFIRMED'" icon="check"></b-icon>
         <b-icon v-if="row.item.state === 'DELETED'" icon="trash"></b-icon>
+        <b-icon v-if="row.item.state === 'DENIED'" icon="x-circle"></b-icon>
       </template>
       <template #cell(bookmark)="row">
         <b-button
@@ -43,8 +52,15 @@
           </b-button>
         </div>
       </template>
+      <template #cell(reActive)>
+        <b-button variant="warning" size="md" @click="reActive" class="mr-2">
+          <b-icon icon="arrow-up" variant="light"></b-icon>
+        </b-button>
+      </template>
       <template #cell(chatCreation)="row">
-        {{ row.item.messagesCount }}
+        <b-button v-if="row.item.messagesCount > 0" @click="rowToggleDetails(row, 0)">
+          <b-icon icon="chat-dots"></b-icon>
+        </b-button>
       </template>
       <template #cell(deny)="row">
         <div v-if="$store.state.moderator.id !== row.item.userId">
@@ -138,6 +154,11 @@ export default {
     }
   },
   methods: {
+    rowClass(item, type) {
+      if (!item || type !== 'row') return
+      if (item.state === 'CONFIRMED') return 'table-success'
+      if (item.state === 'DENIED') return 'table-info'
+    },
     updateCreationData(data) {
       const row = data.row
       this.$emit('update-contributions', data)
@@ -151,6 +172,9 @@ export default {
     updateState(id) {
       this.$emit('update-state', id)
     },
+    reActive() {
+      alert('reActive Contribution')
+    },
   },
 }
 </script>

admin/src/graphql/listAllContributions.js

@@ -3,7 +3,7 @@ import gql from 'graphql-tag'
 export const listAllContributions = gql`
   query (
     $currentPage: Int = 1
-    $pageSize: Int = 5
+    $pageSize: Int = 25
     $order: Order = DESC
     $statusFilter: [ContributionStatus!]
   ) {

admin/src/locales/de.json

@@ -1,6 +1,8 @@
 {
   "all_emails": "Alle Nutzer",
   "back": "zurück",
+  "create":"Schöpfen",
+  "created":"Geschöpft",
   "contributionLink": {
     "amount": "Betrag",
     "changeSaved": "Änderungen gespeichert",
@@ -31,6 +33,7 @@
   },
   "contributions": {
     "all": "Alle",
+    "confirms":"Bestätigt",
     "confirmed": "Bestätigte",
     "deleted": "Gelöscht",
     "denied": "Abgelehnt",
@@ -55,6 +58,7 @@
     "toasted_update": "`Offene Schöpfung {value} GDD) für {email} wurde geändert und liegt zur Bestätigung bereit",
     "update_creation": "Schöpfung aktualisieren"
   },
+  "createdAt":"Angelegt",
   "creation_for_month": "Schöpfung für Monat",
   "date": "Datum",
   "delete": "Löschen",
@@ -102,6 +106,7 @@
     "request": "Die Anfrage wurde gesendet."
   },
   "moderator": "Moderator",
+  "mod": "Mod",
   "multiple_creation_text": "Bitte wähle ein oder mehrere Mitglieder aus für die du Schöpfen möchtest.",
   "name": "Name",
   "navbar": {

admin/src/locales/en.json

@@ -1,6 +1,7 @@
 {
   "all_emails": "All users",
   "back": "back",
+  "create":"Create",
   "contributionLink": {
     "amount": "Amount",
     "changeSaved": "Changes saved",
@@ -31,11 +32,13 @@
   },
   "contributions": {
     "all": "All",
+    "confirms":"Bestätigt",
     "confirmed": "Confirmed",
     "deleted": "Deleted",
     "denied": "Denied",
     "open": "Open"
   },
+  "created":"Created",
   "creation": "Creation",
   "creationList": "Creation list",
   "creation_form": {
@@ -102,6 +105,7 @@
     "request": "Request has been sent."
   },
   "moderator": "Moderator",
+  "mod": "Mod",
   "multiple_creation_text": "Please select one or more members for which you would like to perform creations.",
   "name": "Name",
   "navbar": {

admin/src/pages/CreationConfirm.vue

@@ -3,7 +3,7 @@
   <div class="creation-confirm">
     <div>
       <b-tabs content-class="mt-3" fill>
-        <b-tab active>
+        <b-tab active @click="listContributions(['IN_PROGRESS', 'PENDING'])">
           <template #title>
             {{ $t('contributions.open') }}
             <b-badge v-if="$store.state.openCreations > 0" variant="danger">
@@ -12,23 +12,38 @@
           </template>
           <open-creations-table
             class="mt-4"
-            :items="pendingCreations"
+            :items="allCreations"
             :fields="fields"
             @show-overlay="showOverlay"
             @update-state="updateState"
-            @update-contributions="$apollo.queries.PendingContributions.refetch()"
+            @update-contributions="listContributions(['IN_PROGRESS', 'PENDING'])"
           />
         </b-tab>
-        <b-tab :title="$t('contributions.deleted')">
+        <b-tab :title="$t('contributions.denied')" @click="listContributions(['DENIED'])">
+          <p>{{ $t('contributions.denied') }}</p>
+          <open-creations-table
+            class="mt-4"
+            :items="allCreations"
+            :fields="fieldsDeniedContributions"
+            @update-contributions="listContributions(['DENIED'])"
+          />
+        </b-tab>
+        <b-tab :title="$t('contributions.confirmed')" @click="listContributions(['CONFIRMED'])">
+          <p>{{ $t('contributions.confirmed') }}</p>
+          <open-creations-table
+            class="mt-4"
+            :items="allCreations"
+            :fields="fieldsConfirmContributions"
+            @update-contributions="listContributions(['CONFIRMED'])"
+          />
+        </b-tab>
+        <b-tab :title="$t('contributions.deleted')" @click="listContributions(['DELETED'])">
           <p>{{ $t('contributions.deleted') }}</p>
         </b-tab>
-        <b-tab :title="$t('contributions.confirmed')">
-          <p>{{ $t('contributions.confirmed') }}</p>
-        </b-tab>
-        <b-tab :title="$t('contributions.denied')">
-          <p>{{ $t('contributions.denied') }}</p>
-        </b-tab>
-        <b-tab :title="$t('contributions.all')" @click="$apollo.queries.AllContributions.refetch()">
+        <b-tab
+          :title="$t('contributions.all')"
+          @click="listContributions(['IN_PROGRESS', 'PENDING', 'CONFIRMED', 'DENIED'])"
+        >
           <p>{{ $t('contributions.all') }}</p>
           <open-creations-table
             class="mt-4"
@@ -38,6 +53,16 @@
         </b-tab>
       </b-tabs>
     </div>
+    {{ rows }}
+    <b-pagination
+      pills
+      size="lg"
+      v-model="currentPage"
+      :per-page="pageSize"
+      :total-rows="rows"
+      align="center"
+      :hide-ellipsis="true"
+    ></b-pagination>
 
     <div v-if="overlay" id="overlay" @dblclick="overlay = false">
       <overlay :item="item" @overlay-cancel="overlay = false">
@@ -67,7 +92,6 @@
 <script>
 import Overlay from '../components/Overlay.vue'
 import OpenCreationsTable from '../components/Tables/OpenCreationsTable.vue'
-import { listUnconfirmedContributions } from '../graphql/listUnconfirmedContributions'
 import { listAllContributions } from '../graphql/listAllContributions'
 import { adminDeleteContribution } from '../graphql/adminDeleteContribution'
 import { confirmContribution } from '../graphql/confirmContribution'
@@ -83,12 +107,20 @@ export default {
     return {
       pendingCreations: [],
       allCreations: [],
+      statusFilter: ['IN_PROGRESS', 'PENDING'],
       overlay: false,
       item: {},
       variant: 'confirm',
+      rows: 0,
+      currentPage: 1,
+      pageSize: 25,
     }
   },
   methods: {
+    listContributions(arr) {
+      this.statusFilter = arr
+      this.$apollo.queries.AllContributions.refetch()
+    },
     deleteCreation() {
       this.$apollo
         .mutate({
@@ -188,7 +220,6 @@ export default {
     fieldsAllContributions() {
       return [
         { key: 'state', label: 'state' },
-        { key: 'messagesCount', label: 'mc' },
         { key: 'firstName', label: this.$t('firstname') },
         { key: 'lastName', label: this.$t('lastname') },
         {
@@ -200,12 +231,94 @@ export default {
         },
         { key: 'memo', label: this.$t('text'), class: 'text-break' },
         {
-          key: 'date',
-          label: this.$t('date'),
+          key: 'contributionDate',
+          label: this.$t('created'),
           formatter: (value) => {
             return this.$d(new Date(value), 'short')
           },
         },
+        {
+          key: 'createdAt',
+          label: this.$t('createdAt'),
+          formatter: (value) => {
+            return this.$d(new Date(value), 'short')
+          },
+        },
+        { key: 'chatCreation', label: this.$t('chat') },
+      ]
+    },
+    fieldsDeniedContributions() {
+      return [
+        { key: 'reActive', label: 'reActive' },
+        { key: 'firstName', label: this.$t('firstname') },
+        { key: 'lastName', label: this.$t('lastname') },
+        {
+          key: 'amount',
+          label: this.$t('creation'),
+          formatter: (value) => {
+            return value + ' GDD'
+          },
+        },
+        { key: 'memo', label: this.$t('text'), class: 'text-break' },
+        {
+          key: 'contributionDate',
+          label: this.$t('created'),
+          formatter: (value) => {
+            return this.$d(new Date(value), 'short')
+          },
+        },
+        {
+          key: 'createdAt',
+          label: this.$t('createdAt'),
+          formatter: (value) => {
+            return this.$d(new Date(value), 'short')
+          },
+        },
+        {
+          key: 'deniedAt',
+          label: this.$t('contributions.denied'),
+          formatter: (value) => {
+            return this.$d(new Date(value), 'short')
+          },
+        },
+        { key: 'deniedBy', label: this.$t('mod') },
+        { key: 'chatCreation', label: this.$t('chat') },
+      ]
+    },
+    fieldsConfirmContributions() {
+      return [
+        { key: 'firstName', label: this.$t('firstname') },
+        { key: 'lastName', label: this.$t('lastname') },
+        {
+          key: 'amount',
+          label: this.$t('creation'),
+          formatter: (value) => {
+            return value + ' GDD'
+          },
+        },
+        { key: 'memo', label: this.$t('text'), class: 'text-break' },
+        {
+          key: 'contributionDate',
+          label: this.$t('created'),
+          formatter: (value) => {
+            return this.$d(new Date(value), 'short')
+          },
+        },
+        {
+          key: 'createdAt',
+          label: this.$t('createdAt'),
+          formatter: (value) => {
+            return this.$d(new Date(value), 'short')
+          },
+        },
+        {
+          key: 'confirmedAt',
+          label: this.$t('contributions.confirms'),
+          formatter: (value) => {
+            return this.$d(new Date(value), 'short')
+          },
+        },
+        { key: 'confirmedBy', label: this.$t('mod') },
         { key: 'chatCreation', label: this.$t('chat') },
       ]
     },
@@ -238,32 +351,20 @@ export default {
     },
   },
   apollo: {
-    PendingContributions: {
-      query() {
-        return listUnconfirmedContributions
-      },
-      variables() {
-        // may be at some point we need a pagination here
-        return {}
-      },
-      update({ listUnconfirmedContributions }) {
-        this.$store.commit('resetOpenCreations')
-        this.pendingCreations = listUnconfirmedContributions
-        this.$store.commit('setOpenCreations', listUnconfirmedContributions.length)
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
     AllContributions: {
       query() {
         return listAllContributions
       },
       variables() {
         // may be at some point we need a pagination here
-        return {}
+        return {
+          currentPage: this.currentPage,
+          pageSize: this.pageSize,
+          statusFilter: this.statusFilter,
+        }
       },
       update({ listAllContributions }) {
+        this.rows = listAllContributions.contributionCount
         this.allCreations = listAllContributions.contributionList
       },
       error({ message }) {

admin/src/pages/Overview.vue

@@ -31,24 +31,33 @@
   </div>
 </template>
 <script>
-import { listUnconfirmedContributions } from '@/graphql/listUnconfirmedContributions.js'
+import { listAllContributions } from '../graphql/listAllContributions'
 
 export default {
   name: 'overview',
-  methods: {
-    getPendingCreations() {
-      this.$apollo
-        .query({
-          query: listUnconfirmedContributions,
-          fetchPolicy: 'network-only',
-        })
-        .then((result) => {
-          this.$store.commit('setOpenCreations', result.data.listUnconfirmedContributions.length)
-        })
-    },
+  data() {
+    return {
+      statusFilter: ['IN_PROGRESS', 'PENDING'],
+    }
   },
-  created() {
-    this.getPendingCreations()
+  apollo: {
+    AllContributions: {
+      query() {
+        return listAllContributions
+      },
+      variables() {
+        // may be at some point we need a pagination here
+        return {
+          statusFilter: this.statusFilter,
+        }
+      },
+      update({ listAllContributions }) {
+        this.$store.commit('setOpenCreations', listAllContributions.contributionCount)
+      },
+      error({ message }) {
+        this.toastError(message)
+      },
+    },
   },
 }
 </script>

backend/src/graphql/resolver/ContributionResolver.ts

@@ -195,6 +195,7 @@ export class ContributionResolver {
       .select('c')
       .from(DbContribution, 'c')
       .innerJoinAndSelect('c.user', 'u')
+      .leftJoinAndSelect('c.messages', 'm')
       .where(where)
       .orderBy('c.createdAt', order)
       .limit(pageSize)