diff --git a/src/models/TrustRelationShipFilter.js b/src/models/TrustRelationShipFilter.js index 2a25ad3..c6b5b74 100644 --- a/src/models/TrustRelationShipFilter.js +++ b/src/models/TrustRelationShipFilter.js @@ -5,6 +5,7 @@ export default class TrustRelationshipsFilter { state; type; request_type; + search; before; after; @@ -18,6 +19,7 @@ export default class TrustRelationshipsFilter { let where = {}; if (this.state) where.state = this.state.toLowerCase(); + if (this.search) where.search = this.search.toLowerCase(); if (this.type) where.type = this.type.toLowerCase(); if (this.request_type) where.request_type = this.request_type.toLowerCase(); if (this.before) where.before = getDateText(this.before, 'YYYY-MM-DD'); diff --git a/src/pages/TrustRelationship/TrustRelationshipTable.js b/src/pages/TrustRelationship/TrustRelationshipTable.js index b9ceb54..5c0e2a6 100644 --- a/src/pages/TrustRelationship/TrustRelationshipTable.js +++ b/src/pages/TrustRelationship/TrustRelationshipTable.js @@ -34,6 +34,7 @@ import { } from './TrustRelationshipsFilters'; import TrustRelationshipSidePanel from './trustRelationshipSidePanel'; import CreateTrustRelationship from './CreateTrustRelationship/CreateTrustRelationship'; +import TrustRelationshipsFilter from '../../models/TrustRelationShipFilter'; const FilterDialog = ({ @@ -135,11 +136,16 @@ const TrustRelationshipTableHeader = ({ tableTitle, getStatusColor }) => { requestTypeList, typeList, defaultFilter, - setSearchString, } = useTrustRelationshipsContext(); const [anchorEl, setAnchorEl] = useState(null); + const handleSearch = (e) => { + const searchValue = e.target.value; + const newFilter = new TrustRelationshipsFilter({ ...filter, search: searchValue }); + setFilter(newFilter); + }; + const handleFilterClick = (event) => { setAnchorEl((prevAnchorEl) => (prevAnchorEl ? null : event.currentTarget)); }; @@ -176,7 +182,7 @@ const TrustRelationshipTableHeader = ({ tableTitle, getStatusColor }) => { setSearchString(e.target.value)} + onChange={(e) => handleSearch(e)} InputProps={{ style: { fontSize: '14px' }, startAdornment: ( @@ -255,67 +261,55 @@ const OverflownCell = ({ cellValue, cellColor, children }) => { }; const TrustRelationshipTableBody = ({ - tableColumns, - tableRows, - selectedRowIndex, - setSelectedRowIndex, -}) => { - // state to track if side panel is open when you click the row on table - const [isSidePanelOpen, setIsSidePanelOpen] = useState(false); - const [sortedTableRows, setSortedTableRows] = useState([]); - const stateOrder = ['requested', 'trusted', 'cancelled_by_originator', 'cancelled_by_target']; - useEffect(() => { - const sortData = (data) => { - return data.sort((a, b) => stateOrder.indexOf(a.state) - stateOrder.indexOf(b.state)); + tableColumns, + tableRows, + selectedRowIndex, + setSelectedRowIndex, + }) => { + const [isSidePanelOpen, setIsSidePanelOpen] = useState(false); + const [rowInfo, setRowInfo] = useState(null); + + const handleClosePanel = () => { + setIsSidePanelOpen(false); + setSelectedRowIndex(null); }; + + const wallet = JSON.parse(localStorage.getItem('wallet') || '{}'); - setSortedTableRows(sortData([...tableRows])); - }, [tableRows]); - - //function to close side panel - const handleClosePanel = () => { - setIsSidePanelOpen(false); - setSelectedRowIndex(null); - }; - - const [rowInfo, setRowInfo] = useState(null); - // Function to handle row click and open side panel - const handleRowClick = (rowIndex, row) => { - setRowInfo(row); - setSelectedRowIndex(rowIndex); - setIsSidePanelOpen(true); - }; - const { managedWallets } = useTrustRelationshipsContext(); + const handleRowClick = (rowIndex, row) => { + setRowInfo(row); + setSelectedRowIndex(rowIndex); + setIsSidePanelOpen(true); + }; - const wallet = JSON.parse(localStorage.getItem('wallet') || '{}'); - const { isLoading, searchString } = useTrustRelationshipsContext(); - if (isLoading) - return ( - - - - - - - - ); + const { managedWallets, isLoading, searchString } = useTrustRelationshipsContext(); + + if (isLoading) + return ( + + + + + + + + ); + + if (tableRows.length === 0) + return ( + + + + No data available + + + + ); - if (tableRows.length === 0) return ( - - - - No data available - - - - ); - - return ( - <> - - {sortedTableRows && - sortedTableRows + <> + + {tableRows .filter( (row) => row.actor_wallet @@ -334,27 +328,25 @@ const TrustRelationshipTableBody = ({ sx={{ transition: 'all 0.3s ease' }} style={{ backgroundColor: - isSelected && row.state == 'requested' && wallet.name === row.target_wallet + isSelected && row.state === 'requested' && wallet.name === row.target_wallet ? 'rgba(135, 195, 46, .4)' : isSelected ? 'rgba(135, 195, 46, .4)' - : row.state == 'requested' && wallet.name === row.target_wallet + : row.state === 'requested' && wallet.name === row.target_wallet ? 'rgba(135, 195, 46, .1)' - : row.state == 'requested' && managedWallets.wallets.some(wallet => wallet.name === row.target_wallet) + : row.state === 'requested' && managedWallets.wallets.some(wallet => wallet.name === row.target_wallet) ? 'rgba(135, 195, 46, .1)' : null, }} > {tableColumns.map((column, colIndex) => { const cellKey = `${rowIndex}-${colIndex}-${column.description}`; - const cellColor = - column.name === 'state' ? row[column.name] : ''; - const cellValue = - row[column.name] || row[column.name] === 0 - ? column.renderer - ? column.renderer(row[column.name]) - : row[column.name] - : '--'; + const cellColor = column.name === 'state' ? row[column.name] : ''; + const cellValue = row[column.name] || row[column.name] === 0 + ? column.renderer + ? column.renderer(row[column.name]) + : row[column.name] + : '--'; return ( ); })} - - {isSidePanelOpen && ( - - )} - - ); -}; + + {isSidePanelOpen && ( + + )} + + ); + }; function TrustRelationshipTable({ tableTitle, tableRows, totalRowCount }) { const { pagination, setPagination, tableColumns, setSorting } = diff --git a/src/store/TrustRelationshipsContext.js b/src/store/TrustRelationshipsContext.js index 57e222d..05c5520 100644 --- a/src/store/TrustRelationshipsContext.js +++ b/src/store/TrustRelationshipsContext.js @@ -18,6 +18,7 @@ const TrustRelationshipsProvider = ({ children }) => { const defaultFilter = new TrustRelationshipsFilter({ state: '', + search: '', type: '', request_type: '', before: null, @@ -26,7 +27,7 @@ const TrustRelationshipsProvider = ({ children }) => { // sorting const defaultSorting = { - sort_by: 'updated_at', + sort_by: 'state', order: 'desc', };