This repository has been archived by the owner on Nov 23, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 27
/
RemoteGridList.tsx
101 lines (95 loc) · 3.37 KB
/
RemoteGridList.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import LinearProgress from '@material-ui/core/LinearProgress';
import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableFooter from '@material-ui/core/TableFooter';
import TableRow from '@material-ui/core/TableRow';
import Typography from '@material-ui/core/Typography';
import * as React from 'react';
import { formatDate, LocalStorage } from 'tubular-common';
import { Paginator, SearchTextInput } from '../../src';
import { useTbTable } from '../../src/Hooks/useTbTable';
import CustomHttpClient from './CustomHttpClient';
import columns from './data/columns';
const styles: any = {
progress: {
height: '20px',
},
search: {
margin: '15px 10px 10px 10px',
textAlign: 'right',
},
};
const httpClient = new CustomHttpClient(
'https://tubular.azurewebsites.net/api/orders/paged',
);
const RemoteGridList: React.FunctionComponent = () => {
const [getErrorMessage, setErrorMessage] = React.useState(null as string);
const tbTableInstance = useTbTable(
columns,
httpClient,
{ storage: new LocalStorage(), componentName: 'RemoteGridList' },
);
return (
<Paper>
<div style={styles.search}>
<SearchTextInput
searchText={tbTableInstance.state.searchText}
updateSearchText={tbTableInstance.api.updateSearchText}
/>
</div>
<div style={styles.progress}>
{tbTableInstance.state.isLoading && <LinearProgress />}
</div>
<Table>
<TableBody>
<TableRow>
<TableCell>
<GridList cellHeight={180} cols={5}>
{tbTableInstance.state.data && tbTableInstance.state.data.map((row) => (
<GridListTile key={row.OrderID}>
<Card>
<CardContent>
<Typography
gutterBottom={true}
variant='h5'
component='h2'
>
{row.OrderID} - {row.CustomerName}
</Typography>
<Typography component='p'>
{row.ShipperCity}
</Typography>
<Typography component='p'>
{formatDate(row.ShippedDate, 'M/d/yyyy h:mm a')}
</Typography>
</CardContent>
<CardActions>
<Button size='small' color='primary'>
Learn More
</Button>
</CardActions>
</Card>
</GridListTile>
))}
</GridList>
</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<Paginator tbTableInstance={tbTableInstance} />
</TableRow>
</TableFooter>
</Table>
</Paper>
);
};
export default RemoteGridList;