Added api filter to table (#3324)

* added api filter to table

* Automatic frontend build

* added sonar fixes

* Apply eslint-fixer changes

* Automatic frontend build

---------

Co-authored-by: Corepex <16717695+Corepex@users.noreply.github.com>

Author: Corepex

assets/js/src/core/modules/data-object/unit-slice-enhanced.ts

@@ -20,19 +20,19 @@ const api = baseApi.enhanceEndpoints({
     },
 
     unitQuantityValueUnitsUpdate: {
-      invalidatesTags: () => []
+      invalidatesTags: () => [tagNames.QUANTITY_VALUE_UNITS]
     },
 
     unitQuantityValueUnitsDelete: {
-      invalidatesTags: () => []
+      invalidatesTags: () => [tagNames.QUANTITY_VALUE_UNITS]
     },
 
     unitQuantityValueUnitsCreate: {
       invalidatesTags: () => [tagNames.QUANTITY_VALUE_UNITS]
     },
 
     unitQuantityValueList: {
-      providesTags: () => []
+      providesTags: () => providingTags.QUANTITY_VALUE_UNITS()
     },
 
     unitQuantityValueUnitsExport: {

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

@@ -18,26 +18,58 @@ 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 React, { useEffect, useState } from 'react'
+import { isNil, isUndefined } from 'lodash'
+import React, { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { type SortingState } from '@tanstack/react-table'
 import trackError, { ApiError, GeneralError } from '../app/error-handler'
 import { downloadFile } from '../app/utils/download'
 import { useLazyUnitQuantityValueUnitsExportQuery, useUnitQuantityValueUnitsCollectionQuery } from '../data-object/unit-slice-enhanced'
 import { type QuantityValueUnitRow, useQuantityValueUnit } from './hooks/use-quantity-value-unit'
 import { Table } from './table/table'
 
+/**
+ * Maps camelCase column IDs from the TypeScript QuantityValueUnit type
+ * to the actual database column names expected by the backend sort filter.
+ */
+const SORT_KEY_MAP: Record<string, string> = {
+  longName: 'longname',
+  baseUnit: 'baseunit'
+}
+
+function toSortKey (columnId: string): string {
+  return SORT_KEY_MAP[columnId] ?? columnId
+}
+
 export const QuantityValueContainer = (): React.JSX.Element => {
   const { t } = useTranslation()
   const { createUnit, createLoading } = useQuantityValueUnit()
   const modal = useFormModal()
 
   const [currentPage, setCurrentPage] = useState<number>(1)
   const [pageSize, setPageSize] = useState<number>(20)
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [filter, setFilter] = useState<string>('')
 
-  const { data, isLoading, isFetching, error, refetch } = useUnitQuantityValueUnitsCollectionQuery({ body: { filters: { page: currentPage, pageSize } } })
+  const queryArgs = useMemo(() => ({
+    body: {
+      filters: {
+        page: currentPage,
+        pageSize,
+        columnFilters: isNil(filter) ? [] : [{ type: 'search', filterValue: filter }],
+        sortFilter: sorting.length > 0
+          ? {
+              key: toSortKey(sorting[0].id),
+              direction: sorting[0].desc ? 'DESC' : 'ASC'
+            }
+          : {}
+      }
+    }
+  }), [currentPage, pageSize, filter, sorting])
+
+  const { data, isLoading, isFetching, error, refetch } = useUnitQuantityValueUnitsCollectionQuery(queryArgs)
 
   const handleRefetch = (): void => {
     void refetch().catch(() => {
@@ -94,6 +126,11 @@ export const QuantityValueContainer = (): React.JSX.Element => {
     return { success }
   }
 
+  const handleSortingChange = (newSorting: SortingState): void => {
+    setSorting(newSorting)
+    setCurrentPage(1)
+  }
+
   const handleImportSuccess = (): void => {
     setIsImportModalOpen(false)
     handleRefetch()
@@ -189,16 +226,26 @@ export const QuantityValueContainer = (): React.JSX.Element => {
               onClick={ openCreateModal }
             >{t('quantity-values.new')}</IconTextButton>
           </Flex>
+          <SearchInput
+            loading={ isFetching }
+            onSearch={ (value) => {
+              setFilter(value)
+              setCurrentPage(1)
+            } }
+            placeholder="Search"
+            withPrefix={ false }
+            withoutAddon={ false }
+          />
         </Toolbar>
       }
     >
       <Content
-        loading={ isLoading || isFetching }
+        loading={ isLoading }
         margin={ {
           x: 'extra-small',
           y: 'none'
         } }
-        none={ isUndefined(items) || items.length === 0 }
+        none={ !isLoading && (isUndefined(items) || items.length === 0) }
       >
         <Box
           margin={ {
@@ -207,8 +254,10 @@ export const QuantityValueContainer = (): React.JSX.Element => {
           } }
         >
           <Table
+            onSortingChange={ handleSortingChange }
             quantityValueUnitRows={ quantityValueUnitRows }
             setQuantityValueUnitRows={ setQuantityValueUnitRows }
+            sorting={ sorting }
           />
         </Box>
       </Content>

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

@@ -10,7 +10,7 @@
 
 import React, { useMemo, useState } from 'react'
 import { Grid } from '@Pimcore/components/grid/grid'
-import { createColumnHelper } from '@tanstack/react-table'
+import { createColumnHelper, type SortingState } from '@tanstack/react-table'
 import { useTranslation } from 'react-i18next'
 import { type QuantityValueUnit } from '@Pimcore/modules/data-object/unit-slice-enhanced'
 import { type QuantityValueUnitRow, useQuantityValueUnit } from '../hooks/use-quantity-value-unit'
@@ -23,9 +23,11 @@ type QuantityValueUnitWithActions = QuantityValueUnit & { actions: React.ReactNo
 interface TableProps {
   quantityValueUnitRows: QuantityValueUnitRow[]
   setQuantityValueUnitRows: React.Dispatch<React.SetStateAction<QuantityValueUnitRow[]>>
+  sorting?: SortingState
+  onSortingChange?: (sorting: SortingState) => void
 }
 
-export const Table = ({ quantityValueUnitRows, setQuantityValueUnitRows }: TableProps): React.JSX.Element => {
+export const Table = ({ quantityValueUnitRows, setQuantityValueUnitRows, sorting, onSortingChange }: TableProps): React.JSX.Element => {
   const { t } = useTranslation()
   const { updateUnitById } = useQuantityValueUnit()
   const [modifiedCells, setModifiedCells] = useState<ModifiedCells>([])
@@ -68,11 +70,13 @@ export const Table = ({ quantityValueUnitRows, setQuantityValueUnitRows }: Table
     columnHelper.accessor('conversionOffset', {
       header: t('quantity-values.columns.conversion-offset'),
       meta: { type: 'number', editable: true },
+      enableSorting: false,
       size: 150
     }),
     columnHelper.accessor('converter', {
       header: t('quantity-values.columns.converter'),
       meta: { editable: true },
+      enableSorting: false,
       size: 150
     }),
     columnHelper.accessor('actions', {
@@ -127,10 +131,13 @@ export const Table = ({ quantityValueUnitRows, setQuantityValueUnitRows }: Table
       columns={ tableColumns }
       data={ quantityValueUnitRows }
       enableSorting
+      manualSorting
       modifiedCells={ modifiedCells }
+      onSortingChange={ onSortingChange }
       onUpdateCellData={ onUpdateCellData }
       resizable
       setRowId={ (row: QuantityValueUnitRow) => row.rowId }
+      sorting={ sorting }
     />
   )
 }