Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Demo] Improve Order Edit UI #5407

Merged
merged 6 commits into from
Oct 16, 2020
Merged

[Demo] Improve Order Edit UI #5407

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
05b8551
[Demo] Improve Order Edit UI
fzaninotto Oct 16, 2020
aab0d37
Add number of orders in tab
fzaninotto Oct 16, 2020
89df7eb
fix mobile styles
fzaninotto Oct 16, 2020
fa27469
Make sure that the link buttons take up all the space available in th…
Luwangel Oct 16, 2020
d53e73d
Fix the PendingReviews link to open the reviews instead of the customers
Luwangel Oct 16, 2020
9339116
Fix the color of the Links in OrderEdit
Luwangel Oct 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion examples/data-generator/src/customers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@ export default (db, { serializeDate }) =>
first_name,
last_name,
email,
address: has_ordered ? address.streetName() : null,
address: has_ordered ? address.streetAddress() : null,
zipcode: has_ordered ? address.zipCode() : null,
city: has_ordered ? address.city() : null,
stateAbbr: has_ordered ? address.stateAbbr() : null,
avatar: internet.avatar(),
birthday:
serializeDate && birthday ? birthday.toISOString() : birthday,
Expand Down
2 changes: 2 additions & 0 deletions examples/demo/src/dashboard/CardWithIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ interface Props {
const useStyles = makeStyles(theme => ({
card: {
minHeight: 52,
display: 'flex',
flexDirection: 'column',
flex: '1',
'& a': {
textDecoration: 'none',
Expand Down
38 changes: 33 additions & 5 deletions examples/demo/src/dashboard/NewCustomers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import * as React from 'react';
import { useMemo } from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import ListItemText from '@material-ui/core/ListItemText';
import Avatar from '@material-ui/core/Avatar';
import {
Avatar,
Box,
Button,
List,
ListItem,
ListItemAvatar,
ListItemText,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import CustomerIcon from '@material-ui/icons/PersonAdd';
import { Link } from 'react-router-dom';
import { useTranslate, useQueryWithStore } from 'react-admin';
Expand All @@ -14,6 +19,8 @@ import { Customer } from '../types';

const NewCustomers = () => {
const translate = useTranslate();
const classes = useStyles();

const aMonthAgo = useMemo(() => {
const date = new Date();
date.setDate(date.getDate() - 30);
Expand Down Expand Up @@ -66,8 +73,29 @@ const NewCustomers = () => {
))
: null}
</List>
<Box flexGrow="1">&nbsp;</Box>
<Button
className={classes.link}
component={Link}
to="/customers"
size="small"
color="primary"
>
<Box p={1} className={classes.linkContent}>
{translate('pos.dashboard.all_customers')}
</Box>
</Button>
</CardWithIcon>
);
};

const useStyles = makeStyles(theme => ({
link: {
borderRadius: 0,
},
linkContent: {
color: theme.palette.primary.main,
},
}));

export default NewCustomers;
91 changes: 61 additions & 30 deletions examples/demo/src/dashboard/OrderChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { FC } from 'react';
import { Card, CardHeader, CardContent } from '@material-ui/core';
import {
ResponsiveContainer,
BarChart,
Bar,
AreaChart,
Area,
XAxis,
YAxis,
CartesianGrid,
Expand Down Expand Up @@ -54,34 +54,65 @@ const OrderChart: FC<{ orders?: Order[] }> = ({ orders }) => {
<Card>
<CardHeader title={translate('pos.dashboard.month_history')} />
<CardContent>
<ResponsiveContainer width="100%" height={300}>
<BarChart data={getRevenuePerDay(orders)}>
<XAxis
dataKey="date"
name="Date"
type="number"
scale="time"
domain={[aMonthAgo.getTime(), new Date().getTime()]}
tickFormatter={dateFormatter}
reversed
/>
<YAxis dataKey="total" name="Revenue" unit="€" />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip
cursor={{ strokeDasharray: '3 3' }}
formatter={value =>
new Intl.NumberFormat(undefined, {
style: 'currency',
currency: 'USD',
}).format(value as any)
}
labelFormatter={(label: any) =>
dateFormatter(label)
}
/>
<Bar dataKey="total" fill="#31708f" />
</BarChart>
</ResponsiveContainer>
<div style={{ width: '100%', height: 300 }}>
<ResponsiveContainer>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This new graph looks amazing!

<AreaChart data={getRevenuePerDay(orders)}>
<defs>
<linearGradient
id="colorUv"
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop
offset="5%"
stopColor="#8884d8"
stopOpacity={0.8}
/>
<stop
offset="95%"
stopColor="#8884d8"
stopOpacity={0}
/>
</linearGradient>
</defs>
<XAxis
dataKey="date"
name="Date"
type="number"
scale="time"
domain={[
aMonthAgo.getTime(),
new Date().getTime(),
]}
tickFormatter={dateFormatter}
reversed
/>
<YAxis dataKey="total" name="Revenue" unit="€" />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip
cursor={{ strokeDasharray: '3 3' }}
formatter={value =>
new Intl.NumberFormat(undefined, {
style: 'currency',
currency: 'USD',
}).format(value as any)
}
labelFormatter={(label: any) =>
dateFormatter(label)
}
/>
<Area
type="monotone"
dataKey="total"
stroke="#8884d8"
strokeWidth={2}
fill="url(#colorUv)"
/>
</AreaChart>
</ResponsiveContainer>
</div>
</CardContent>
</Card>
);
Expand Down
48 changes: 34 additions & 14 deletions examples/demo/src/dashboard/PendingReviews.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import * as React from 'react';
import { FC } from 'react';
import {
Avatar,
Box,
Button,
List,
ListItem,
ListItemAvatar,
ListItemText,
Avatar,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import CommentIcon from '@material-ui/icons/Comment';
Expand All @@ -22,19 +24,6 @@ interface Props {
nb?: number;
}

const useStyles = makeStyles(theme => ({
avatar: {
background: theme.palette.background.paper,
},
listItemText: {
overflowY: 'hidden',
height: '4em',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
},
}));

const PendingReviews: FC<Props> = ({ reviews = [], customers = {}, nb }) => {
const classes = useStyles();
const translate = useTranslate();
Expand Down Expand Up @@ -76,8 +65,39 @@ const PendingReviews: FC<Props> = ({ reviews = [], customers = {}, nb }) => {
</ListItem>
))}
</List>
<Box flexGrow="1">&nbsp;</Box>
<Button
className={classes.link}
component={Link}
to="/reviews"
size="small"
color="primary"
>
<Box p={1} className={classes.linkContent}>
{translate('pos.dashboard.all_reviews')}
</Box>
</Button>
</CardWithIcon>
);
};

const useStyles = makeStyles(theme => ({
avatar: {
background: theme.palette.background.paper,
},
listItemText: {
overflowY: 'hidden',
height: '4em',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
},
link: {
borderRadius: 0,
},
linkContent: {
color: theme.palette.primary.main,
},
}));

export default PendingReviews;
13 changes: 13 additions & 0 deletions examples/demo/src/i18n/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ const customEnglishMessages: TranslationMessages = {
month_history: '30 Day Revenue History',
new_orders: 'New Orders',
pending_reviews: 'Pending Reviews',
all_reviews: 'See all reviews',
new_customers: 'New Customers',
all_customers: 'See all customers',
pending_orders: 'Pending Orders',
order: {
items:
Expand Down Expand Up @@ -50,6 +52,7 @@ const customEnglishMessages: TranslationMessages = {
total_spent: 'Total spent',
password: 'Password',
confirm_password: 'Confirm password',
stateAbbr: 'State',
},
filters: {
last_visited: 'Last visited',
Expand Down Expand Up @@ -90,16 +93,26 @@ const customEnglishMessages: TranslationMessages = {
quantity: 'Quantity',
sum: 'Sum',
tax_rate: 'Tax Rate',
taxes: 'Tax',
total: 'Total',
unit_price: 'Unit Price',
},
address: 'Address',
customer_id: 'Customer',
date_gte: 'Passed Since',
date_lte: 'Passed Before',
nb_items: 'Nb Items',
total_gte: 'Min amount',
status: 'Status',
returned: 'Returned',
},
section: {
order: 'Order',
customer: 'Customer',
shipping_address: 'Shipping Address',
items: 'Items',
total: 'Totals',
},
},
invoices: {
name: 'Invoice |||| Invoices',
Expand Down
12 changes: 12 additions & 0 deletions examples/demo/src/i18n/fr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ const customFrenchMessages: TranslationMessages = {
month_history: "Chiffre d'affaire sur 30 jours",
new_orders: 'Nouvelles commandes',
pending_reviews: 'Commentaires à modérer',
all_reviews: 'Voir tous les commentaires',
new_customers: 'Nouveaux clients',
all_customers: 'Voir tous les clients',
pending_orders: 'Commandes à traiter',
order: {
items:
Expand All @@ -44,6 +46,7 @@ const customFrenchMessages: TranslationMessages = {
address: 'Rue',
birthday: 'Anniversaire',
city: 'Ville',
stateAbbr: 'Etat',
commands: 'Commandes',
first_name: 'Prénom',
first_seen: 'Première visite',
Expand Down Expand Up @@ -99,9 +102,11 @@ const customFrenchMessages: TranslationMessages = {
quantity: 'Quantité',
sum: 'Sous-total',
tax_rate: 'TVA',
taxes: 'TVA',
total: 'Total',
unit_price: 'P.U.',
},
address: 'Adresse',
customer_id: 'Client',
date_gte: 'Emises depuis',
date_lte: 'Emises avant',
Expand All @@ -111,6 +116,13 @@ const customFrenchMessages: TranslationMessages = {
status: 'Etat',
total_gte: 'Montant minimum',
},
section: {
order: 'Commande',
customer: 'Client',
shipping_address: 'Adresse de livraison',
items: 'Articles',
total: 'Total',
},
},
invoices: {
name: 'Facture |||| Factures',
Expand Down
7 changes: 6 additions & 1 deletion examples/demo/src/invoices/InvoiceList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,12 @@ const ListFilters = (props: Omit<FilterProps, 'children'>) => (
);

const InvoiceList: FC<ListProps> = props => (
<List {...props} filters={<ListFilters />} perPage={25}>
<List
{...props}
filters={<ListFilters />}
perPage={25}
sort={{ field: 'date', order: 'desc' }}
>
<Datagrid rowClick="expand" expand={<InvoiceShow />}>
<TextField source="id" />
<DateField source="date" />
Expand Down
Loading