From 99690c15d67307b79aa82e1df9aa9fb3af14f61d Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 29 Jun 2023 16:23:38 +0200
Subject: [PATCH] user search uses user query component

---
 admin/src/pages/UserSearch.spec.js |  2 +-
 admin/src/pages/UserSearch.vue     | 18 +++---------------
 2 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/admin/src/pages/UserSearch.spec.js b/admin/src/pages/UserSearch.spec.js
index 1f9b0ce6e..7979ed6d0 100644
--- a/admin/src/pages/UserSearch.spec.js
+++ b/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: {
diff --git a/admin/src/pages/UserSearch.vue b/admin/src/pages/UserSearch.vue
index d4e4083c2..95b9a6833 100644
--- a/admin/src/pages/UserSearch.vue
+++ b/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 {