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,7 +38,9 @@ const mocks = {
 
 const defaultData = () => {
   return {
-    listUnconfirmedContributions: [
+    listAllContributions: {
+      contributionCount: 2,
+      contributionList: [
         {
           id: 1,
           firstName: 'Bibi',
@@ -51,7 +53,15 @@ const defaultData = () => {
           moderator: 1,
           state: 'PENDING',
           creation: [500, 500, 500],
-        messageCount: 0,
+          messagesCount: 0,
+          deniedBy: null,
+          deniedAt: null,
+          confirmedBy: null,
+          confirmedAt: null,
+          contributionDate: new Date(),
+          deletedBy: null,
+          deletedAt: null,
+          createdAt: new Date(),
         },
         {
           id: 2,
@@ -65,23 +75,31 @@ const defaultData = () => {
           moderator: 1,
           state: 'PENDING',
           creation: [500, 500, 500],
-        messageCount: 0,
+          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
-            class="mt-4"
-            :items="allCreations"
-            :fields="fieldsAllContributions"
         />
-        </b-tab>
+        <b-tab
+          :title="$t('contributions.denied')"
+          @click="listContributions('denied')"
+          data-test="denied"
+        />
+        <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,12 +172,13 @@ 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() {
+      if (this.filterTab === 'open') {
         return [
           { key: 'bookmark', label: this.$t('delete') },
           { key: 'email', label: this.$t('e_mail') },
@@ -204,8 +193,8 @@ export default {
           },
           { key: 'memo', label: this.$t('text'), class: 'text-break' },
           {
-          key: 'date',
+            key: 'contributionDate',
-          label: this.$t('date'),
+            label: this.$t('created'),
             formatter: (value) => {
               return this.$d(new Date(value), 'short')
             },
@@ -215,8 +204,8 @@ export default {
           { key: 'deny', label: this.$t('deny') },
           { key: 'confirm', label: this.$t('save') },
         ]
-    },
+      }
-    fieldsAllContributions() {
+      if (this.filterTab === 'all') {
         return [
           { key: 'state', label: 'state' },
           { key: 'firstName', label: this.$t('firstname') },
@@ -245,8 +234,8 @@ export default {
           },
           { key: 'chatCreation', label: this.$t('chat') },
         ]
-    },
+      }
-    fieldsDeniedContributions() {
+      if (this.filterTab === 'denied') {
         return [
           { key: 'reActive', label: 'reActive' },
           { key: 'firstName', label: this.$t('firstname') },
@@ -283,8 +272,8 @@ export default {
           { key: 'deniedBy', label: this.$t('mod') },
           { key: 'chatCreation', label: this.$t('chat') },
         ]
-    },
+      }
-    fieldsConfirmContributions() {
+      if (this.filterTab === 'confirmed') {
         return [
           { key: 'firstName', label: this.$t('firstname') },
           { key: 'lastName', label: this.$t('lastname') },
@@ -320,6 +309,26 @@ export default {
           { key: 'confirmedBy', label: this.$t('mod') },
           { key: 'chatCreation', label: this.$t('chat') },
         ]
+      }
+      return []
+    },
+    contributionFilter() {
+      if (this.filterTab === 'open') {
+        return ['IN_PROGRESS', 'PENDING']
+      }
+      if (this.filterTab === 'all') {
+        return ['IN_PROGRESS', 'PENDING', 'CONFIRMED', 'DENIED']
+      }
+      if (this.filterTab === 'denied') {
+        return ['DENIED']
+      }
+      if (this.filterTab === 'confirmed') {
+        return ['CONFIRMED']
+      }
+      if (this.filterTab === 'deleted') {
+        return ['DELETED']
+      }
+      return ['IN_PROGRESS', 'PENDING']
     },
     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)