Skip to content

Commit

Permalink
Merge pull request #144 from samwel141/v2
Browse files Browse the repository at this point in the history 
fix sorting order and search functionality
  • Loading branch information
@pranavkparti
pranavkparti authored Nov 5, 2024
2 parents e29db7c + 84d075a commit bbc2075
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 81 deletions.
2 changes: 2 additions & 0 deletions src/models/TrustRelationShipFilter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export default class TrustRelationshipsFilter {
state;
type;
request_type;
search;
before;
after;

Expand All @@ -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');
Expand Down
152 changes: 72 additions & 80 deletions src/pages/TrustRelationship/TrustRelationshipTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import {
} from './TrustRelationshipsFilters';
import TrustRelationshipSidePanel from './trustRelationshipSidePanel';
import CreateTrustRelationship from './CreateTrustRelationship/CreateTrustRelationship';
import TrustRelationshipsFilter from '../../models/TrustRelationShipFilter';


const FilterDialog = ({
Expand Down Expand Up @@ -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));
};
Expand Down Expand Up @@ -176,7 +182,7 @@ const TrustRelationshipTableHeader = ({ tableTitle, getStatusColor }) => {
<SearchTextField
variant="outlined"
placeholder="Search by Wallet..."
onChange={(e) => setSearchString(e.target.value)}
onChange={(e) => handleSearch(e)}
InputProps={{
style: { fontSize: '14px' },
startAdornment: (
Expand Down Expand Up @@ -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 (
<TableBody>
<TableRow>
<TableCell colSpan={12}>
<Loader />
</TableCell>
</TableRow>
</TableBody>
);
const { managedWallets, isLoading, searchString } = useTrustRelationshipsContext();

if (isLoading)
return (
<TableBody>
<TableRow>
<TableCell colSpan={12}>
<Loader />
</TableCell>
</TableRow>
</TableBody>
);

if (tableRows.length === 0)
return (
<TableBody>
<TableRow>
<TableCell colSpan={12} sx={{ textAlign: 'center' }}>
No data available
</TableCell>
</TableRow>
</TableBody>
);

if (tableRows.length === 0)
return (
<TableBody>
<TableRow>
<TableCell colSpan={12} sx={{ textAlign: 'center' }}>
No data available
</TableCell>
</TableRow>
</TableBody>
);

return (
<>
<TableBody>
{sortedTableRows &&
sortedTableRows
<>
<TableBody>
{tableRows
.filter(
(row) =>
row.actor_wallet
Expand All @@ -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 (
<OverflownCell
key={cellKey}
Expand All @@ -368,17 +360,17 @@ const TrustRelationshipTableBody = ({
</TableRow>
);
})}
</TableBody>
{isSidePanelOpen && (
<TrustRelationshipSidePanel
open={open}
rowInfo={rowInfo}
onClose={handleClosePanel}
/>
)}
</>
);
};
</TableBody>
{isSidePanelOpen && (
<TrustRelationshipSidePanel
open={isSidePanelOpen}
rowInfo={rowInfo}
onClose={handleClosePanel}
/>
)}
</>
);
};

function TrustRelationshipTable({ tableTitle, tableRows, totalRowCount }) {
const { pagination, setPagination, tableColumns, setSorting } =
Expand Down
3 changes: 2 additions & 1 deletion src/store/TrustRelationshipsContext.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const TrustRelationshipsProvider = ({ children }) => {

const defaultFilter = new TrustRelationshipsFilter({
state: '',
search: '',
type: '',
request_type: '',
before: null,
Expand All @@ -26,7 +27,7 @@ const TrustRelationshipsProvider = ({ children }) => {

// sorting
const defaultSorting = {
sort_by: 'updated_at',
sort_by: 'state',
order: 'desc',
};

Expand Down

0 comments on commit bbc2075

Please sign in to comment.