djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add fulfillment view

Browse source
This commit is contained in:
dominik-zeglen 2020-04-20 19:18:20 +02:00
parent a5c1c9d544
commit dca0208173
6 changed files with 87 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
View file

@ -25,6 +25,8 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
import makeStyles from "@material-ui/core/styles/makeStyles";
import { update } from "@saleor/utils/lists";
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import { renderCollection } from "@saleor/misc";
import Skeleton from "@saleor/components/Skeleton";
const useStyles = makeStyles(
theme => ({
@ -86,7 +88,7 @@ export interface OrderFulfillPageProps {
order: OrderFulfillData_order;
saveButtonBar: ConfirmButtonTransitionState;
warehouses: WarehouseFragment[];
onBack: () => undefined;
onBack: () => void;
onSubmit: (data: OrderFulfillSubmitData) => void;
}
@ -167,7 +169,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
description="product's sku"
/>
</TableCell>
{warehouses.map(warehouse => (
{warehouses?.map(warehouse => (
<TableCell
key={warehouse.id}
className={classes.colQuantity}
@ -184,7 +186,29 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
</TableRow>
</TableHead>
<TableBody>
{order?.lines.map((line, lineIndex) => {
{renderCollection(order?.lines, (line, lineIndex) => {
if (!line) {
return (
<TableRow>
<TableCellAvatar className={classes.colName}>
<Skeleton />
</TableCellAvatar>
<TableCell className={classes.colSku}>
<Skeleton />
</TableCell>
{warehouses?.map(() => (
<TableCell className={classes.colQuantity}>
<Skeleton />
</TableCell>
))}
<TableCell className={classes.colQuantityTotal}>
{" "}
<Skeleton />
</TableCell>
</TableRow>
);
}
const remainingQuantity =
line.quantity - line.quantityFulfilled;
const quantityToFulfill = formsetData[
@ -216,7 +240,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
<TableCell className={classes.colSku}>
{line.variant.sku}
</TableCell>
{warehouses.map(warehouse => {
{warehouses?.map(warehouse => {
const warehouseStock = line.variant.stocks.find(
stock => stock.warehouse.id === warehouse.id
);

9
src/orders/index.tsx
View file

@ -14,9 +14,11 @@ import {
orderPath,
OrderUrlQueryParams,
OrderDraftListUrlSortField,
OrderListUrlSortField
OrderListUrlSortField,
orderFulfillPath
} from "./urls";
import OrderDetailsComponent from "./views/OrderDetails";
import OrderFulfillComponent from "./views/OrderFulfill";
import OrderDraftListComponent from "./views/OrderDraftList";
import OrderListComponent from "./views/OrderList";
@ -57,6 +59,10 @@ const OrderDetails: React.FC<RouteComponentProps<any>> = ({
);
};
const OrderFulfill: React.FC<RouteComponentProps<any>> = ({ match }) => (
<OrderFulfillComponent orderId={decodeURIComponent(match.params.id)} />
);
const Component = () => {
const intl = useIntl();
@ -66,6 +72,7 @@ const Component = () => {
<Switch>
<Route exact path={orderDraftListPath} component={OrderDraftList} />
<Route exact path={orderListPath} component={OrderList} />
<Route path={orderFulfillPath(":id")} component={OrderFulfill} />
<Route path={orderPath(":id")} component={OrderDetails} />
</Switch>
</>

6
src/orders/urls.ts
View file

@ -97,10 +97,14 @@ export type OrderUrlDialog =
| "edit-shipping"
| "edit-shipping-address"
| "finalize"
| "fulfill"
| "mark-paid"
| "refund"
| "void";
export type OrderUrlQueryParams = Dialog<OrderUrlDialog> & SingleAction;
export const orderUrl = (id: string, params?: OrderUrlQueryParams) =>
orderPath(encodeURIComponent(id)) + "?" + stringifyQs(params);
export const orderFulfillPath = (id: string) =>
urlJoin(orderPath(id), "fulfill");
export const orderFulfillUrl = (id: string) =>
orderFulfillPath(encodeURIComponent(id));

39
src/orders/views/OrderDetails/index.tsx
View file

@ -26,7 +26,6 @@ import OrderDraftFinalizeDialog, {
} from "../../components/OrderDraftFinalizeDialog";
import OrderDraftPage from "../../components/OrderDraftPage";
import OrderFulfillmentCancelDialog from "../../components/OrderFulfillmentCancelDialog";
import OrderFulfillmentDialog from "../../components/OrderFulfillmentDialog";
import OrderFulfillmentTrackingDialog from "../../components/OrderFulfillmentTrackingDialog";
import OrderMarkAsPaidDialog from "../../components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog";
import OrderPaymentDialog from "../../components/OrderPaymentDialog";
@ -40,7 +39,8 @@ import {
orderListUrl,
orderUrl,
OrderUrlQueryParams,
OrderUrlDialog
OrderUrlDialog,
orderFulfillUrl
} from "../../urls";
import { OrderDetailsMessages } from "./OrderDetailsMessages";
@ -154,7 +154,6 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
{({
orderAddNote,
orderCancel,
orderCreateFulfillment,
orderDraftUpdate,
orderLinesAdd,
orderLineDelete,
@ -201,7 +200,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
)}
userPermissions={user?.userPermissions || []}
onOrderCancel={() => openModal("cancel")}
onOrderFulfill={() => openModal("fulfill")}
onOrderFulfill={() => navigate(orderFulfillUrl(id))}
onFulfillmentCancel={fulfillmentId =>
navigate(
orderUrl(id, {
@ -305,38 +304,6 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
})
}
/>
<OrderFulfillmentDialog
confirmButtonState={
orderCreateFulfillment.opts.status
}
errors={
orderCreateFulfillment.opts.data
?.orderFulfillmentCreate.errors || []
}
open={params.action === "fulfill"}
lines={maybe(() => order.lines, []).filter(
line => line.quantityFulfilled < line.quantity
)}
onClose={closeModal}
onSubmit={variables =>
orderCreateFulfillment.mutate({
input: {
...variables,
lines: maybe(() => order.lines, [])
.filter(
line =>
line.quantityFulfilled < line.quantity
)
.map((line, lineIndex) => ({
orderLineId: line.id,
quantity: variables.lines[lineIndex]
}))
.filter(line => line.quantity > 0)
},
order: order.id
})
}
/>
<OrderFulfillmentCancelDialog
confirmButtonState={
orderFulfillmentCancel.opts.status

41
src/orders/views/OrderFulfill/OrderFulfill.tsx
View file

@ -0,0 +1,41 @@
import React from "react";
import { useOrderFulfillData } from "@saleor/orders/queries";
import OrderFulfillPage from "@saleor/orders/components/OrderFulfillPage";
import useNavigator from "@saleor/hooks/useNavigator";
import { orderUrl } from "@saleor/orders/urls";
import { useWarehouseList } from "@saleor/warehouses/queries";
export interface OrderFulfillProps {
orderId: string;
}
const OrderFulfill: React.FC<OrderFulfillProps> = ({ orderId }) => {
const navigate = useNavigator();
const { data, loading } = useOrderFulfillData({
displayLoader: true,
variables: {
orderId
}
});
const { data: warehouseData, loading: warehousesLoading } = useWarehouseList({
displayLoader: true,
variables: {
first: 20
}
});
return (
<OrderFulfillPage
disabled={loading || warehousesLoading}
onBack={() => navigate(orderUrl(orderId))}
onSubmit={() => undefined}
order={data?.order}
saveButtonBar="default"
warehouses={warehouseData?.warehouses.edges.map(edge => edge.node)}
/>
);
};
OrderFulfill.displayName = "OrderFulfill";
export default OrderFulfill;

2
src/orders/views/OrderFulfill/index.ts
View file

@ -0,0 +1,2 @@
export * from "./OrderFulfill";
export { default } from "./OrderFulfill";