Prepared search column filter

assets/js/src/core/modules/quantity-value/quantity-value-container.tsx

@@ -18,9 +18,9 @@ import { useFormModal } from '@Pimcore/components/modal/form-modal/hooks/use-for
 import { ModalTitle } from '@Pimcore/components/modal/modal-title/modal-title'
 import { Title } from '@Pimcore/components/title/title'
 import { Toolbar } from '@Pimcore/components/toolbar/toolbar'
-import { Box, IconTextButton, Pagination, Split } from '@sdk/components'
+import { Box, IconTextButton, Pagination, SearchInput, Split } from '@sdk/components'
 import { uuid } from '@sdk/utils'
-import { isUndefined } from 'lodash'
+import { isNil, isUndefined } from 'lodash'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import trackError, { ApiError, GeneralError } from '../app/error-handler'
@@ -36,8 +36,14 @@ export const QuantityValueContainer = (): React.JSX.Element => {
 
   const [currentPage, setCurrentPage] = useState<number>(1)
   const [pageSize, setPageSize] = useState<number>(20)
+  const [filter, setFilter] = useState<string>('')
 
-  const { data, isLoading, isFetching, error, refetch } = useUnitQuantityValueUnitsCollectionQuery({ body: { filters: { page: currentPage, pageSize } } })
+  const handleSearch = (value: string): void => {
+    setFilter(value)
+    setCurrentPage(1)
+  }
+
+  const { data, isLoading, isFetching, error, refetch } = useUnitQuantityValueUnitsCollectionQuery({ body: { filters: { page: currentPage, pageSize, columnFilters: isNil(filter) ? [] : [{ type: 'search', filterValue: filter }] } } })
 
   const handleRefetch = (): void => {
     void refetch().catch(() => {
@@ -175,7 +181,7 @@ export const QuantityValueContainer = (): React.JSX.Element => {
         <Toolbar
           justify='space-between'
           margin={ {
-            x: 'mini',
+            x: 'extra-small',
             y: 'none'
           } }
           theme='secondary'
@@ -189,6 +195,13 @@ export const QuantityValueContainer = (): React.JSX.Element => {
               onClick={ openCreateModal }
             >{t('quantity-values.new')}</IconTextButton>
           </Flex>
+          <SearchInput
+            loading={ isFetching }
+            onSearch={ handleSearch }
+            placeholder={ t('quantity-values.search') }
+            withPrefix={ false }
+            withoutAddon={ false }
+          />
         </Toolbar>
       }
     >