Merge pull request #3094 from gradido/query-users-on-contributions

feat(admin): query users on contributions

admin/src/components/UserQuery.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <b-input-group>
+      <b-form-input
+        type="text"
+        class="test-input-criteria"
+        v-model="currentValue"
+        :placeholder="$t('user_search')"
+      ></b-form-input>
+      <b-input-group-append class="test-click-clear-criteria" @click="currentValue = ''">
+        <b-input-group-text class="pointer">
+          <b-icon icon="x" />
+        </b-input-group-text>
+      </b-input-group-append>
+    </b-input-group>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UserQuery',
+  props: {
+    value: { type: String, default: '' },
+  },
+  data() {
+    return {
+      currentValue: this.value,
+    }
+  },
+  watch: {
+    currentValue() {
+      if (this.value !== this.currentValue) {
+        this.$emit('input', this.currentValue)
+      }
+    },
+  },
+}
+</script>

admin/src/graphql/adminListContributions.js

@@ -7,6 +7,7 @@ export const adminListContributions = gql`
     $order: Order = DESC
     $statusFilter: [ContributionStatus!]
     $userId: Int
+    $query: String
   ) {
     adminListContributions(
       currentPage: $currentPage
@@ -14,6 +15,7 @@ export const adminListContributions = gql`
       order: $order
       statusFilter: $statusFilter
       userId: $userId
+      query: $query
     ) {
       contributionCount
       contributionList {

admin/src/pages/CreationConfirm.spec.js

@@ -341,6 +341,7 @@ describe('CreationConfirm', () => {
             currentPage: 1,
             order: 'DESC',
             pageSize: 25,
+            query: '',
             statusFilter: ['CONFIRMED'],
           })
         })
@@ -356,6 +357,7 @@ describe('CreationConfirm', () => {
               currentPage: 1,
               order: 'DESC',
               pageSize: 25,
+              query: '',
               statusFilter: ['IN_PROGRESS', 'PENDING'],
             })
           })
@@ -372,6 +374,7 @@ describe('CreationConfirm', () => {
               currentPage: 1,
               order: 'DESC',
               pageSize: 25,
+              query: '',
               statusFilter: ['DENIED'],
             })
           })
@@ -388,6 +391,7 @@ describe('CreationConfirm', () => {
               currentPage: 1,
               order: 'DESC',
               pageSize: 25,
+              query: '',
               statusFilter: ['DELETED'],
             })
           })
@@ -404,6 +408,7 @@ describe('CreationConfirm', () => {
               currentPage: 1,
               order: 'DESC',
               pageSize: 25,
+              query: '',
               statusFilter: ['IN_PROGRESS', 'PENDING', 'CONFIRMED', 'DENIED', 'DELETED'],
             })
           })
@@ -424,6 +429,7 @@ describe('CreationConfirm', () => {
                   currentPage: 2,
                   order: 'DESC',
                   pageSize: 25,
+                  query: '',
                   statusFilter: ['IN_PROGRESS', 'PENDING', 'CONFIRMED', 'DENIED', 'DELETED'],
                 })
               })
@@ -439,6 +445,7 @@ describe('CreationConfirm', () => {
                     currentPage: 1,
                     order: 'DESC',
                     pageSize: 25,
+                    query: '',
                     statusFilter: ['IN_PROGRESS', 'PENDING'],
                   })
                 })
@@ -449,6 +456,40 @@ describe('CreationConfirm', () => {
       })
     })
 
+    describe('user query', () => {
+      describe('with user query', () => {
+        beforeEach(() => {
+          wrapper.findComponent({ name: 'UserQuery' }).vm.$emit('input', 'query')
+        })
+
+        it('calls the API with query', () => {
+          expect(adminListContributionsMock).toBeCalledWith({
+            currentPage: 1,
+            order: 'DESC',
+            pageSize: 25,
+            query: 'query',
+            statusFilter: ['IN_PROGRESS', 'PENDING'],
+          })
+        })
+
+        describe('reset query', () => {
+          beforeEach(() => {
+            wrapper.findComponent({ name: 'UserQuery' }).vm.$emit('input', '')
+          })
+
+          it('calls the API with empty query', () => {
+            expect(adminListContributionsMock).toBeCalledWith({
+              currentPage: 1,
+              order: 'DESC',
+              pageSize: 25,
+              query: '',
+              statusFilter: ['IN_PROGRESS', 'PENDING'],
+            })
+          })
+        })
+      })
+    })
+
     describe('update status', () => {
       beforeEach(async () => {
         await wrapper.findComponent({ name: 'OpenCreationsTable' }).vm.$emit('update-status', 2)

admin/src/pages/CreationConfirm.vue

@@ -1,6 +1,7 @@
 <!-- eslint-disable @intlify/vue-i18n/no-dynamic-keys -->
 <template>
   <div class="creation-confirm">
+    <user-query class="mb-4 mt-2" v-model="query" />
     <div>
       <b-tabs v-model="tabIndex" content-class="mt-3" fill>
         <b-tab active :title-link-attributes="{ 'data-test': 'open' }">
@@ -85,6 +86,7 @@
 <script>
 import Overlay from '../components/Overlay'
 import OpenCreationsTable from '../components/Tables/OpenCreationsTable'
+import UserQuery from '../components/UserQuery'
 import { adminListContributions } from '../graphql/adminListContributions'
 import { adminDeleteContribution } from '../graphql/adminDeleteContribution'
 import { confirmContribution } from '../graphql/confirmContribution'
@@ -103,6 +105,7 @@ export default {
   components: {
     OpenCreationsTable,
     Overlay,
+    UserQuery,
   },
   data() {
     return {
@@ -114,6 +117,7 @@ export default {
       rows: 0,
       currentPage: 1,
       pageSize: 25,
+      query: '',
     }
   },
   watch: {
@@ -409,6 +413,7 @@ export default {
           currentPage: this.currentPage,
           pageSize: this.pageSize,
           statusFilter: this.statusFilter,
+          query: this.query,
         }
       },
       fetchPolicy: 'no-cache',

admin/src/pages/UserSearch.spec.js

@@ -186,7 +186,7 @@ describe('UserSearch', () => {
       describe('reset the search field', () => {
         it('calls the API with empty criteria', async () => {
           jest.clearAllMocks()
-          await wrapper.find('.test-click-clear-criteria').trigger('click')
+          await wrapper.findComponent({ name: 'UserQuery' }).vm.$emit('input', '')
           expect(apolloQueryMock).toBeCalledWith(
             expect.objectContaining({
               variables: {

admin/src/pages/UserSearch.vue

@@ -23,21 +23,7 @@
       </b-button>
     </div>
     <label>{{ $t('user_search') }}</label>
-    <div>
-      <b-input-group>
-        <b-form-input
-          type="text"
-          class="test-input-criteria"
-          v-model="criteria"
-          :placeholder="$t('user_search')"
-        ></b-form-input>
-        <b-input-group-append class="test-click-clear-criteria" @click="criteria = ''">
-          <b-input-group-text class="pointer">
-            <b-icon icon="x" />
-          </b-input-group-text>
-        </b-input-group-append>
-      </b-input-group>
-    </div>
+    <user-query class="mb-4 mt-2" v-model="criteria" />
     <search-user-table
       type="PageUserSearch"
       :items="searchResult"
@@ -61,12 +47,14 @@
 import SearchUserTable from '../components/Tables/SearchUserTable'
 import { searchUsers } from '../graphql/searchUsers'
 import { creationMonths } from '../mixins/creationMonths'
+import UserQuery from '../components/UserQuery'
 
 export default {
   name: 'UserSearch',
   mixins: [creationMonths],
   components: {
     SearchUserTable,
+    UserQuery,
   },
   data() {
     return {