Skip to content

Commit 55117ce

Browse files
LuwangelLuwangel
authored
Merge pull request #5407 from marmelab/demo_orders
[Demo] Improve Order Edit UI
2 parents 36ed4c3 + 9339116 commit 55117ce

17 files changed

+587
-233
lines changed

‎examples/data-generator/src/customers.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@ export default (db, { serializeDate }) =>
1616
first_name,
1717
last_name,
1818
email,
19-
address: has_ordered ? address.streetName() : null,
19+
address: has_ordered ? address.streetAddress() : null,
2020
zipcode: has_ordered ? address.zipCode() : null,
2121
city: has_ordered ? address.city() : null,
22+
stateAbbr: has_ordered ? address.stateAbbr() : null,
2223
avatar: internet.avatar(),
2324
birthday:
2425
serializeDate && birthday ? birthday.toISOString() : birthday,

‎examples/demo/src/dashboard/CardWithIcon.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ interface Props {
1717
const useStyles = makeStyles(theme => ({
1818
card: {
1919
minHeight: 52,
20+
display: 'flex',
21+
flexDirection: 'column',
2022
flex: '1',
2123
'& a': {
2224
textDecoration: 'none',

‎examples/demo/src/dashboard/NewCustomers.tsx

+33-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import * as React from 'react';
22
import { useMemo } from 'react';
3-
import List from '@material-ui/core/List';
4-
import ListItem from '@material-ui/core/ListItem';
5-
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
6-
import ListItemText from '@material-ui/core/ListItemText';
7-
import Avatar from '@material-ui/core/Avatar';
3+
import {
4+
Avatar,
5+
Box,
6+
Button,
7+
List,
8+
ListItem,
9+
ListItemAvatar,
10+
ListItemText,
11+
} from '@material-ui/core';
12+
import { makeStyles } from '@material-ui/core/styles';
813
import CustomerIcon from '@material-ui/icons/PersonAdd';
914
import { Link } from 'react-router-dom';
1015
import { useTranslate, useQueryWithStore } from 'react-admin';
@@ -14,6 +19,8 @@ import { Customer } from '../types';
1419

1520
const NewCustomers = () => {
1621
const translate = useTranslate();
22+
const classes = useStyles();
23+
1724
const aMonthAgo = useMemo(() => {
1825
const date = new Date();
1926
date.setDate(date.getDate() - 30);
@@ -66,8 +73,29 @@ const NewCustomers = () => {
6673
))
6774
: null}
6875
</List>
76+
<Box flexGrow="1">&nbsp;</Box>
77+
<Button
78+
className={classes.link}
79+
component={Link}
80+
to="/customers"
81+
size="small"
82+
color="primary"
83+
>
84+
<Box p={1} className={classes.linkContent}>
85+
{translate('pos.dashboard.all_customers')}
86+
</Box>
87+
</Button>
6988
</CardWithIcon>
7089
);
7190
};
7291

92+
const useStyles = makeStyles(theme => ({
93+
link: {
94+
borderRadius: 0,
95+
},
96+
linkContent: {
97+
color: theme.palette.primary.main,
98+
},
99+
}));
100+
73101
export default NewCustomers;

‎examples/demo/src/dashboard/OrderChart.tsx

+61-30
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { FC } from 'react';
33
import { Card, CardHeader, CardContent } from '@material-ui/core';
44
import {
55
ResponsiveContainer,
6-
BarChart,
7-
Bar,
6+
AreaChart,
7+
Area,
88
XAxis,
99
YAxis,
1010
CartesianGrid,
@@ -54,34 +54,65 @@ const OrderChart: FC<{ orders?: Order[] }> = ({ orders }) => {
5454
<Card>
5555
<CardHeader title={translate('pos.dashboard.month_history')} />
5656
<CardContent>
57-
<ResponsiveContainer width="100%" height={300}>
58-
<BarChart data={getRevenuePerDay(orders)}>
59-
<XAxis
60-
dataKey="date"
61-
name="Date"
62-
type="number"
63-
scale="time"
64-
domain={[aMonthAgo.getTime(), new Date().getTime()]}
65-
tickFormatter={dateFormatter}
66-
reversed
67-
/>
68-
<YAxis dataKey="total" name="Revenue" unit="€" />
69-
<CartesianGrid strokeDasharray="3 3" />
70-
<Tooltip
71-
cursor={{ strokeDasharray: '3 3' }}
72-
formatter={value =>
73-
new Intl.NumberFormat(undefined, {
74-
style: 'currency',
75-
currency: 'USD',
76-
}).format(value as any)
77-
}
78-
labelFormatter={(label: any) =>
79-
dateFormatter(label)
80-
}
81-
/>
82-
<Bar dataKey="total" fill="#31708f" />
83-
</BarChart>
84-
</ResponsiveContainer>
57+
<div style={{ width: '100%', height: 300 }}>
58+
<ResponsiveContainer>
59+
<AreaChart data={getRevenuePerDay(orders)}>
60+
<defs>
61+
<linearGradient
62+
id="colorUv"
63+
x1="0"
64+
y1="0"
65+
x2="0"
66+
y2="1"
67+
>
68+
<stop
69+
offset="5%"
70+
stopColor="#8884d8"
71+
stopOpacity={0.8}
72+
/>
73+
<stop
74+
offset="95%"
75+
stopColor="#8884d8"
76+
stopOpacity={0}
77+
/>
78+
</linearGradient>
79+
</defs>
80+
<XAxis
81+
dataKey="date"
82+
name="Date"
83+
type="number"
84+
scale="time"
85+
domain={[
86+
aMonthAgo.getTime(),
87+
new Date().getTime(),
88+
]}
89+
tickFormatter={dateFormatter}
90+
reversed
91+
/>
92+
<YAxis dataKey="total" name="Revenue" unit="€" />
93+
<CartesianGrid strokeDasharray="3 3" />
94+
<Tooltip
95+
cursor={{ strokeDasharray: '3 3' }}
96+
formatter={value =>
97+
new Intl.NumberFormat(undefined, {
98+
style: 'currency',
99+
currency: 'USD',
100+
}).format(value as any)
101+
}
102+
labelFormatter={(label: any) =>
103+
dateFormatter(label)
104+
}
105+
/>
106+
<Area
107+
type="monotone"
108+
dataKey="total"
109+
stroke="#8884d8"
110+
strokeWidth={2}
111+
fill="url(#colorUv)"
112+
/>
113+
</AreaChart>
114+
</ResponsiveContainer>
115+
</div>
85116
</CardContent>
86117
</Card>
87118
);

‎examples/demo/src/dashboard/PendingReviews.tsx

+34-14
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import * as React from 'react';
22
import { FC } from 'react';
33
import {
4+
Avatar,
5+
Box,
6+
Button,
47
List,
58
ListItem,
69
ListItemAvatar,
710
ListItemText,
8-
Avatar,
911
} from '@material-ui/core';
1012
import { makeStyles } from '@material-ui/core/styles';
1113
import CommentIcon from '@material-ui/icons/Comment';
@@ -22,19 +24,6 @@ interface Props {
2224
nb?: number;
2325
}
2426

25-
const useStyles = makeStyles(theme => ({
26-
avatar: {
27-
background: theme.palette.background.paper,
28-
},
29-
listItemText: {
30-
overflowY: 'hidden',
31-
height: '4em',
32-
display: '-webkit-box',
33-
WebkitLineClamp: 2,
34-
WebkitBoxOrient: 'vertical',
35-
},
36-
}));
37-
3827
const PendingReviews: FC<Props> = ({ reviews = [], customers = {}, nb }) => {
3928
const classes = useStyles();
4029
const translate = useTranslate();
@@ -76,8 +65,39 @@ const PendingReviews: FC<Props> = ({ reviews = [], customers = {}, nb }) => {
7665
</ListItem>
7766
))}
7867
</List>
68+
<Box flexGrow="1">&nbsp;</Box>
69+
<Button
70+
className={classes.link}
71+
component={Link}
72+
to="/reviews"
73+
size="small"
74+
color="primary"
75+
>
76+
<Box p={1} className={classes.linkContent}>
77+
{translate('pos.dashboard.all_reviews')}
78+
</Box>
79+
</Button>
7980
</CardWithIcon>
8081
);
8182
};
8283

84+
const useStyles = makeStyles(theme => ({
85+
avatar: {
86+
background: theme.palette.background.paper,
87+
},
88+
listItemText: {
89+
overflowY: 'hidden',
90+
height: '4em',
91+
display: '-webkit-box',
92+
WebkitLineClamp: 2,
93+
WebkitBoxOrient: 'vertical',
94+
},
95+
link: {
96+
borderRadius: 0,
97+
},
98+
linkContent: {
99+
color: theme.palette.primary.main,
100+
},
101+
}));
102+
83103
export default PendingReviews;

‎examples/demo/src/i18n/en.ts

+13
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ const customEnglishMessages: TranslationMessages = {
1717
month_history: '30 Day Revenue History',
1818
new_orders: 'New Orders',
1919
pending_reviews: 'Pending Reviews',
20+
all_reviews: 'See all reviews',
2021
new_customers: 'New Customers',
22+
all_customers: 'See all customers',
2123
pending_orders: 'Pending Orders',
2224
order: {
2325
items:
@@ -50,6 +52,7 @@ const customEnglishMessages: TranslationMessages = {
5052
total_spent: 'Total spent',
5153
password: 'Password',
5254
confirm_password: 'Confirm password',
55+
stateAbbr: 'State',
5356
},
5457
filters: {
5558
last_visited: 'Last visited',
@@ -90,16 +93,26 @@ const customEnglishMessages: TranslationMessages = {
9093
quantity: 'Quantity',
9194
sum: 'Sum',
9295
tax_rate: 'Tax Rate',
96+
taxes: 'Tax',
9397
total: 'Total',
9498
unit_price: 'Unit Price',
9599
},
100+
address: 'Address',
96101
customer_id: 'Customer',
97102
date_gte: 'Passed Since',
98103
date_lte: 'Passed Before',
104+
nb_items: 'Nb Items',
99105
total_gte: 'Min amount',
100106
status: 'Status',
101107
returned: 'Returned',
102108
},
109+
section: {
110+
order: 'Order',
111+
customer: 'Customer',
112+
shipping_address: 'Shipping Address',
113+
items: 'Items',
114+
total: 'Totals',
115+
},
103116
},
104117
invoices: {
105118
name: 'Invoice |||| Invoices',

‎examples/demo/src/i18n/fr.ts

+12
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ const customFrenchMessages: TranslationMessages = {
1717
month_history: "Chiffre d'affaire sur 30 jours",
1818
new_orders: 'Nouvelles commandes',
1919
pending_reviews: 'Commentaires à modérer',
20+
all_reviews: 'Voir tous les commentaires',
2021
new_customers: 'Nouveaux clients',
22+
all_customers: 'Voir tous les clients',
2123
pending_orders: 'Commandes à traiter',
2224
order: {
2325
items:
@@ -44,6 +46,7 @@ const customFrenchMessages: TranslationMessages = {
4446
address: 'Rue',
4547
birthday: 'Anniversaire',
4648
city: 'Ville',
49+
stateAbbr: 'Etat',
4750
commands: 'Commandes',
4851
first_name: 'Prénom',
4952
first_seen: 'Première visite',
@@ -99,9 +102,11 @@ const customFrenchMessages: TranslationMessages = {
99102
quantity: 'Quantité',
100103
sum: 'Sous-total',
101104
tax_rate: 'TVA',
105+
taxes: 'TVA',
102106
total: 'Total',
103107
unit_price: 'P.U.',
104108
},
109+
address: 'Adresse',
105110
customer_id: 'Client',
106111
date_gte: 'Emises depuis',
107112
date_lte: 'Emises avant',
@@ -111,6 +116,13 @@ const customFrenchMessages: TranslationMessages = {
111116
status: 'Etat',
112117
total_gte: 'Montant minimum',
113118
},
119+
section: {
120+
order: 'Commande',
121+
customer: 'Client',
122+
shipping_address: 'Adresse de livraison',
123+
items: 'Articles',
124+
total: 'Total',
125+
},
114126
},
115127
invoices: {
116128
name: 'Facture |||| Factures',

‎examples/demo/src/invoices/InvoiceList.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,12 @@ const ListFilters = (props: Omit<FilterProps, 'children'>) => (
2525
);
2626

2727
const InvoiceList: FC<ListProps> = props => (
28-
<List {...props} filters={<ListFilters />} perPage={25}>
28+
<List
29+
{...props}
30+
filters={<ListFilters />}
31+
perPage={25}
32+
sort={{ field: 'date', order: 'desc' }}
33+
>
2934
<Datagrid rowClick="expand" expand={<InvoiceShow />}>
3035
<TextField source="id" />
3136
<DateField source="date" />

0 commit comments

Comments
 (0)