refactor code, one table

admin/src/components/Tables/OpenCreationsTable.vue

@@ -142,6 +142,10 @@ export default {
       type: Array,
       required: true,
     },
+    filterTab: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -170,7 +174,7 @@ export default {
       rowItem.creation = newCreation
     },
     updateState(id) {
-      this.$emit('update-state', id)
+      if (this.filterTab === 'open') this.$emit('update-state', id)
     },
     reActive() {
       alert('reActive Contribution')

admin/src/pages/CreationConfirm.spec.js

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'
 import CreationConfirm from './CreationConfirm.vue'
 import { adminDeleteContribution } from '../graphql/adminDeleteContribution'
 import { denyContribution } from '../graphql/denyContribution'
-import { listUnconfirmedContributions } from '../graphql/listUnconfirmedContributions'
+import { listAllContributions } from '../graphql/listAllContributions'
 import { confirmContribution } from '../graphql/confirmContribution'
 import { toastErrorSpy, toastSuccessSpy } from '../../test/testSetup'
 import VueApollo from 'vue-apollo'
@@ -38,50 +38,68 @@ const mocks = {
 
 const defaultData = () => {
   return {
-    listUnconfirmedContributions: [
+    listAllContributions: {
-      {
+      contributionCount: 2,
-        id: 1,
+      contributionList: [
-        firstName: 'Bibi',
+        {
-        lastName: 'Bloxberg',
+          id: 1,
-        userId: 99,
+          firstName: 'Bibi',
-        email: 'bibi@bloxberg.de',
+          lastName: 'Bloxberg',
-        amount: 500,
+          userId: 99,
-        memo: 'Danke für alles',
+          email: 'bibi@bloxberg.de',
-        date: new Date(),
+          amount: 500,
-        moderator: 1,
+          memo: 'Danke für alles',
-        state: 'PENDING',
+          date: new Date(),
-        creation: [500, 500, 500],
+          moderator: 1,
-        messageCount: 0,
+          state: 'PENDING',
-      },
+          creation: [500, 500, 500],
-      {
+          messagesCount: 0,
-        id: 2,
+          deniedBy: null,
-        firstName: 'Räuber',
+          deniedAt: null,
-        lastName: 'Hotzenplotz',
+          confirmedBy: null,
-        userId: 100,
+          confirmedAt: null,
-        email: 'raeuber@hotzenplotz.de',
+          contributionDate: new Date(),
-        amount: 1000000,
+          deletedBy: null,
-        memo: 'Gut Ergattert',
+          deletedAt: null,
-        date: new Date(),
+          createdAt: new Date(),
-        moderator: 1,
+        },
-        state: 'PENDING',
+        {
-        creation: [500, 500, 500],
+          id: 2,
-        messageCount: 0,
+          firstName: 'Räuber',
-      },
+          lastName: 'Hotzenplotz',
-    ],
+          userId: 100,
+          email: 'raeuber@hotzenplotz.de',
+          amount: 1000000,
+          memo: 'Gut Ergattert',
+          date: new Date(),
+          moderator: 1,
+          state: 'PENDING',
+          creation: [500, 500, 500],
+          messagesCount: 0,
+          deniedBy: null,
+          deniedAt: null,
+          confirmedBy: null,
+          confirmedAt: null,
+          contributionDate: new Date(),
+          deletedBy: null,
+          deletedAt: null,
+          createdAt: new Date(),
+        },
+      ],
+    },
   }
 }
 
 describe('CreationConfirm', () => {
   let wrapper
-
-  const listUnconfirmedContributionsMock = jest.fn()
   const adminDeleteContributionMock = jest.fn()
   const adminDenyContributionMock = jest.fn()
   const confirmContributionMock = jest.fn()
 
   mockClient.setRequestHandler(
-    listUnconfirmedContributions,
+    listAllContributions,
-    listUnconfirmedContributionsMock
+    jest
+      .fn()
       .mockRejectedValueOnce({ message: 'Ouch!' })
       .mockResolvedValue({ data: defaultData() }),
   )
@@ -125,11 +143,11 @@ describe('CreationConfirm', () => {
       })
 
       it('has two pending creations', () => {
-        expect(wrapper.vm.pendingCreations).toHaveLength(2)
+        expect(wrapper.find('[data-test="tab-1"]').find('tbody').findAll('tr')).toHaveLength(2)
       })
     })
 
-    describe('store', () => {
+    describe.skip('store', () => {
       it('commits resetOpenCreations to store', () => {
         expect(storeCommitMock).toBeCalledWith('resetOpenCreations')
       })

admin/src/pages/CreationConfirm.vue

@@ -3,56 +3,43 @@
   <div class="creation-confirm">
     <div>
       <b-tabs content-class="mt-3" fill>
-        <b-tab active @click="listContributions(['IN_PROGRESS', 'PENDING'])">
+        <b-tab active @click="listContributions('open')" data-test="open">
           <template #title>
             {{ $t('contributions.open') }}
             <b-badge v-if="$store.state.openCreations > 0" variant="danger">
               {{ $store.state.openCreations }}
             </b-badge>
           </template>
-          <open-creations-table
-            class="mt-4"
-            :items="allCreations"
-            :fields="fields"
-            @show-overlay="showOverlay"
-            @update-state="updateState"
-            @update-contributions="listContributions(['IN_PROGRESS', 'PENDING'])"
-          />
-        </b-tab>
-        <b-tab :title="$t('contributions.confirms')" @click="listContributions(['CONFIRMED'])">
-          <p>{{ $t('contributions.confirms') }}</p>
-          <open-creations-table
-            class="mt-4"
-            :items="allCreations"
-            :fields="fieldsConfirmContributions"
-            @update-contributions="listContributions(['CONFIRMED'])"
-          />
-        </b-tab>
-        <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.deleted')" @click="listContributions(['DELETED'])">
-          <p>{{ $t('contributions.deleted') }}</p>
         </b-tab>
         <b-tab
-          :title="$t('contributions.all')"
+          :title="$t('contributions.confirms')"
-          @click="listContributions(['IN_PROGRESS', 'PENDING', 'CONFIRMED', 'DENIED'])"
+          @click="listContributions('confirmed')"
-        >
+          data-test="confirmed"
-          <p>{{ $t('contributions.all') }}</p>
+        />
-          <open-creations-table
+        <b-tab
-            class="mt-4"
+          :title="$t('contributions.denied')"
-            :items="allCreations"
+          @click="listContributions('denied')"
-            :fields="fieldsAllContributions"
+          data-test="denied"
-          />
+        />
-        </b-tab>
+        <b-tab
+          :title="$t('contributions.deleted')"
+          @click="listContributions('deleted')"
+          data-test="deleted"
+        />
+        <b-tab :title="$t('contributions.all')" @click="listContributions('all')" data-test="all" />
       </b-tabs>
     </div>
+    {{ contributionFilter }}
+    <open-creations-table
+      class="mt-4"
+      :items="items"
+      :fields="fields"
+      :filterTab="filterTab"
+      @show-overlay="showOverlay"
+      @update-state="updateState"
+      @update-contributions="$apollo.queries.AllContributions.refetch()"
+    />
+
     <b-pagination
       pills
       size="lg"
@@ -104,8 +91,8 @@ export default {
   },
   data() {
     return {
-      pendingCreations: [],
+      items: [],
-      allCreations: [],
+      filterTab: 'open',
       statusFilter: ['IN_PROGRESS', 'PENDING'],
       overlay: false,
       item: {},
@@ -116,8 +103,9 @@ export default {
     }
   },
   methods: {
-    listContributions(arr) {
+    listContributions(filter) {
-      this.statusFilter = arr
+      this.filterTab = filter
+      this.statusFilter = this.contributionFilter
       this.$apollo.queries.AllContributions.refetch()
     },
     deleteCreation() {
@@ -175,7 +163,7 @@ export default {
         })
     },
     updatePendingCreations(id) {
-      this.pendingCreations = this.pendingCreations.filter((obj) => obj.id !== id)
+      this.items = this.items.filter((obj) => obj.id !== id)
       this.$store.commit('openCreationsMinus', 1)
     },
     showOverlay(item, variant) {
@@ -184,142 +172,163 @@ export default {
       this.variant = variant
     },
     updateState(id) {
-      this.pendingCreations.find((obj) => obj.id === id).messagesCount++
+      this.items.find((obj) => obj.id === id).messagesCount++
-      this.pendingCreations.find((obj) => obj.id === id).state = 'IN_PROGRESS'
+      this.items.find((obj) => obj.id === id).state = 'IN_PROGRESS'
     },
   },
   computed: {
     fields() {
-      return [
+      if (this.filterTab === 'open') {
-        { key: 'bookmark', label: this.$t('delete') },
+        return [
-        { key: 'email', label: this.$t('e_mail') },
+          { key: 'bookmark', label: this.$t('delete') },
-        { key: 'firstName', label: this.$t('firstname') },
+          { key: 'email', label: this.$t('e_mail') },
-        { key: 'lastName', label: this.$t('lastname') },
+          { key: 'firstName', label: this.$t('firstname') },
-        {
+          { key: 'lastName', label: this.$t('lastname') },
-          key: 'amount',
+          {
-          label: this.$t('creation'),
+            key: 'amount',
-          formatter: (value) => {
+            label: this.$t('creation'),
-            return value + ' GDD'
+            formatter: (value) => {
+              return value + ' GDD'
+            },
           },
-        },
+          { key: 'memo', label: this.$t('text'), class: 'text-break' },
-        { key: 'memo', label: this.$t('text'), class: 'text-break' },
+          {
-        {
+            key: 'contributionDate',
-          key: 'date',
+            label: this.$t('created'),
-          label: this.$t('date'),
+            formatter: (value) => {
-          formatter: (value) => {
+              return this.$d(new Date(value), 'short')
-            return this.$d(new Date(value), 'short')
+            },
           },
-        },
+          { key: 'moderator', label: this.$t('moderator') },
-        { key: 'moderator', label: this.$t('moderator') },
+          { key: 'editCreation', label: this.$t('edit') },
-        { key: 'editCreation', label: this.$t('edit') },
+          { key: 'deny', label: this.$t('deny') },
-        { key: 'deny', label: this.$t('deny') },
+          { key: 'confirm', label: this.$t('save') },
-        { key: 'confirm', label: this.$t('save') },
+        ]
-      ]
+      }
+      if (this.filterTab === 'all') {
+        return [
+          { key: 'state', label: 'state' },
+          { 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: 'chatCreation', label: this.$t('chat') },
+        ]
+      }
+      if (this.filterTab === 'denied') {
+        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') },
+        ]
+      }
+      if (this.filterTab === 'confirmed') {
+        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') },
+        ]
+      }
+      return []
     },
-    fieldsAllContributions() {
+    contributionFilter() {
-      return [
+      if (this.filterTab === 'open') {
-        { key: 'state', label: 'state' },
+        return ['IN_PROGRESS', 'PENDING']
-        { key: 'firstName', label: this.$t('firstname') },
+      }
-        { key: 'lastName', label: this.$t('lastname') },
+      if (this.filterTab === 'all') {
-        {
+        return ['IN_PROGRESS', 'PENDING', 'CONFIRMED', 'DENIED']
-          key: 'amount',
+      }
-          label: this.$t('creation'),
+      if (this.filterTab === 'denied') {
-          formatter: (value) => {
+        return ['DENIED']
-            return value + ' GDD'
+      }
-          },
+      if (this.filterTab === 'confirmed') {
-        },
+        return ['CONFIRMED']
-        { key: 'memo', label: this.$t('text'), class: 'text-break' },
+      }
-        {
+      if (this.filterTab === 'deleted') {
-          key: 'contributionDate',
+        return ['DELETED']
-          label: this.$t('created'),
+      }
-          formatter: (value) => {
+      return ['IN_PROGRESS', 'PENDING']
-            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') },
-      ]
     },
     overlayTitle() {
       return `overlay.${this.variant}.title`
@@ -364,7 +373,7 @@ export default {
       },
       update({ listAllContributions }) {
         this.rows = listAllContributions.contributionCount
-        this.allCreations = listAllContributions.contributionList
+        this.items = listAllContributions.contributionList
       },
       error({ message }) {
         this.toastError(message)