diff --git a/admin/src/components/ConfigList/index.jsx b/admin/src/components/ConfigList/index.jsx index 7b0202a..4c19359 100644 --- a/admin/src/components/ConfigList/index.jsx +++ b/admin/src/components/ConfigList/index.jsx @@ -1,7 +1,8 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useMemo } from 'react'; import { useIntl } from 'react-intl'; import { isEmpty } from 'lodash'; import { useDispatch } from 'react-redux'; +import styled from 'styled-components'; import { Table, @@ -12,7 +13,12 @@ import { Typography, Checkbox, Loader, + Flex, + Box, + TextInput, + IconButton, } from '@strapi/design-system'; +import { CaretDown, CaretUp, Search, Cross } from '@strapi/icons'; import ConfigDiff from '../ConfigDiff'; import FirstExport from '../FirstExport'; @@ -20,6 +26,13 @@ import NoChanges from '../NoChanges'; import ConfigListRow from './ConfigListRow'; import { setConfigPartialDiffInState } from '../../state/actions/Config'; +const SearchBox = styled(Box)` + width: 100%; + + @media (min-width: 768px) { + width: 40%; + } +`; const ConfigList = ({ diff, isLoading }) => { const [originalConfig, setOriginalConfig] = useState({}); @@ -27,9 +40,21 @@ const ConfigList = ({ diff, isLoading }) => { const [cName, setCname] = useState(''); const [rows, setRows] = useState([]); const [checkedItems, setCheckedItems] = useState([]); + const [sortBy, setSortBy] = useState('configName'); + const [sortOrder, setSortOrder] = useState('asc'); + const [searchQuery, setSearchQuery] = useState(''); const dispatch = useDispatch(); const { formatMessage } = useIntl(); + const handleSort = (field) => { + if (sortBy === field) { + setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc'); + } else { + setSortBy(field); + setSortOrder('asc'); + } + }; + const getConfigState = (configName) => { if ( diff.fileConfig[configName] @@ -87,6 +112,25 @@ const ConfigList = ({ diff, isLoading }) => { dispatch(setConfigPartialDiffInState(newPartialDiff)); }, [checkedItems]); + const sortedRows = useMemo(() => { + const rowsWithIndex = rows.map((row, originalIndex) => ({ ...row, originalIndex })); + + const filteredRows = searchQuery + ? rowsWithIndex.filter((row) => ( + `${row.configType}.${row.configName}`.toLowerCase().includes(searchQuery.toLowerCase()) + )) + : rowsWithIndex; + + return filteredRows.sort((a, b) => { + const aValue = (a[sortBy] || '').toLowerCase(); + const bValue = (b[sortBy] || '').toLowerCase(); + + if (aValue < bValue) return sortOrder === 'asc' ? -1 : 1; + if (aValue > bValue) return sortOrder === 'asc' ? 1 : -1; + return 0; + }); + }, [rows, sortBy, sortOrder, searchQuery]); + if (isLoading) { return (
| @@ -118,19 +185,28 @@ const ConfigList = ({ diff, isLoading }) => { onCheckedChange={(value) => setCheckedItems(checkedItems.map(() => value))} /> | -
- | handleSort('configName')} style={{ cursor: 'pointer' }}>
+ |
-
- | handleSort('configType')} style={{ cursor: 'pointer' }}>
+ |
-
- | handleSort('state')} style={{ cursor: 'pointer' }}>
+ |
|---|