Skip to content

Commit

Permalink
refactor: extract Toolbar component
Browse files Browse the repository at this point in the history
  • Loading branch information
@Summer-luna
Summer-luna committed Jul 31, 2023
1 parent 4d6bebc commit e14b3ec
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 86 deletions.
98 changes: 12 additions & 86 deletions packages/client/src/pages/Invoice/Invoice.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { SearchBar } from '@components/SearchBar';
import { SortedBasicTable } from '@components/table/SortedBasicTable';
import { StyledDatePicker } from '@components/StyledDatePicker';
import { useSnackBar } from '@context/snackbar.context';
import { Toolbar } from '@pages/Invoice/components/table/Toolbar';

const CustomIDCellRender = (props: { id: string; value: string; startDate: Date; endDate: Date }) => {
const { id, value, startDate, endDate } = props;
Expand Down Expand Up @@ -133,86 +134,6 @@ export const Invoice = () => {
renderCell: (row: any) => <DeleteIcon color="secondary" sx={{ cursor: 'pointer' }} onClick={() => handleOpenFormDialog(row.projectId, row.startDate, row.endDate)} />
}
];
const ToolBar = (
<>
<Stack direction="row" gap={2} mb={3}>
<Box sx={{ display: 'flex', gap: 5 }}>
<StyledDatePicker
label="Start Date"
value={dateRange.startDate}
onChange={(newValue: Date | null) => {
setDateRange((prevState: any) => ({
...prevState,
startDate: newValue
}));
}}
/>
<StyledDatePicker
label="End Date"
value={dateRange.endDate}
onChange={(newValue: Date | null) => {
setDateRange((prevState: any) => ({
...prevState,
endDate: newValue
}));
}}
/>
</Box>
<SearchBar id="search invoices" value={searchText} setValue={setSearchText} />
</Stack>
<Stack marginBottom="1.5rem">
{(searchText !== '' || (dateRange.startDate && dateRange.endDate)) && (
<Box sx={{ marginBottom: 2 }}>
<strong>{filteredRows.length}</strong>{' '}
<Box component="span" sx={{ color: 'grey.600' }}>
results found
</Box>
</Box>
)}
<Stack direction="row" alignItems="center">
{dateRange.startDate && dateRange.endDate && (
<Paper
variant="outlined"
sx={{
border: '1px dashed',
borderColor: 'grey.300',
borderRadius: '8px',
display: 'flex',
gap: '8px',
justifyContent: 'center',
alignItems: 'center',
height: '50px',
width: '250px',
padding: '0 8px',
backgroundColor: 'inherit'
}}
>
<Box component="span" sx={{ fontWeight: 'medium' }}>
Date:
</Box>
<Stack direction="row" gap="8px">
<Chip
label={dateRange.startDate && dateRange.endDate && `${format(dateRange.startDate, 'dd MMM yy')} - ${format(dateRange.endDate, 'dd MMM yy')}`}
sx={{
borderRadius: '8px',
backgroundColor: (theme) => (theme.palette.mode === 'light' ? 'grey.900' : theme.palette.common.white),
color: (theme) => (theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[900]),
'& .MuiSvgIcon-root': { color: 'grey.500' }
}}
onDelete={handleReset}
/>
</Stack>
</Paper>
)}
{(searchText !== '' || (dateRange.startDate && dateRange.endDate)) && (
<Button onClick={handleClearButtonClick} sx={{ color: 'error.main', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<DeleteIcon /> Clear
</Button>
)}
</Stack>
</Stack>
</>
);

return (
<Stack gap={8}>
Expand All @@ -226,15 +147,20 @@ export const Invoice = () => {
</Stack>
<SortedBasicTable
rows={filteredRows}
toolbar={ToolBar}
toolbar={
<Toolbar
dateRange={dateRange}
setDateRange={setDateRange}
searchText={searchText}
setSearchText={setSearchText}
filteredRows={filteredRows}
handleClearButtonClick={handleClearButtonClick}
handleReset={handleReset}
/>
}
columns={columns}
keyFun={keyFun}
defaultOrderBy="startDate"
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 10 }
}
}}
/>
<FormDialog open={openDialog} onClose={handleCloseFormDialog}>
<Stack gap={4}>
Expand Down
99 changes: 99 additions & 0 deletions packages/client/src/pages/Invoice/components/table/Toolbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import { Box, Button, Chip, Paper, Stack } from '@mui/material';
import { StyledDatePicker } from '@components/StyledDatePicker';
import { SearchBar } from '@components/SearchBar';
import { format } from 'date-fns';
import DeleteIcon from '@mui/icons-material/Delete';
import React, { FC } from 'react';

interface ToolbarProps {
searchText: string;
dateRange: { startDate: Date | null; endDate: Date | null };
setDateRange: (prevState: any) => void;
setSearchText: (searchText: string) => void;
filteredRows: any[];
handleReset: () => void;
handleClearButtonClick: () => void;
}

export const Toolbar: FC<ToolbarProps> = ({ setSearchText, searchText, dateRange, setDateRange, filteredRows, handleReset, handleClearButtonClick }) => {
return (
<Stack gap={5}>
<Stack direction="row" gap={2}>
<Stack direction="row" gap={5}>
<StyledDatePicker
label="Start Date"
value={dateRange.startDate}
onChange={(newValue: Date | null) => {
setDateRange((prevState: any) => ({
...prevState,
startDate: newValue
}));
}}
/>
<StyledDatePicker
label="End Date"
value={dateRange.endDate}
onChange={(newValue: Date | null) => {
setDateRange((prevState: any) => ({
...prevState,
endDate: newValue
}));
}}
/>
</Stack>
<SearchBar id="search invoices" value={searchText} setValue={setSearchText} />
</Stack>
<Stack>
{(searchText !== '' || (dateRange.startDate && dateRange.endDate)) && (
<Box sx={{ marginBottom: 2 }}>
<strong>{filteredRows.length}</strong>{' '}
<Box component="span" sx={{ color: 'grey.600' }}>
results found
</Box>
</Box>
)}
<Stack direction="row" alignItems="center">
{dateRange.startDate && dateRange.endDate && (
<Paper
variant="outlined"
sx={{
border: '1px dashed',
borderColor: 'grey.300',
borderRadius: '8px',
display: 'flex',
gap: '8px',
justifyContent: 'center',
alignItems: 'center',
height: '50px',
width: '250px',
padding: '0 8px',
backgroundColor: 'inherit'
}}
>
<Box component="span" sx={{ fontWeight: 'medium' }}>
Date:
</Box>
<Stack direction="row" gap="8px">
<Chip
label={dateRange.startDate && dateRange.endDate && `${format(dateRange.startDate, 'dd MMM yy')} - ${format(dateRange.endDate, 'dd MMM yy')}`}
sx={{
borderRadius: '8px',
backgroundColor: (theme) => (theme.palette.mode === 'light' ? 'grey.900' : theme.palette.common.white),
color: (theme) => (theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[900]),
'& .MuiSvgIcon-root': { color: 'grey.500' }
}}
onDelete={handleReset}
/>
</Stack>
</Paper>
)}
{(searchText !== '' || (dateRange.startDate && dateRange.endDate)) && (
<Button onClick={handleClearButtonClick} sx={{ color: 'error.main', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<DeleteIcon /> Clear
</Button>
)}
</Stack>
</Stack>
</Stack>
);
};

0 comments on commit e14b3ec

Please sign in to comment.