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

[1611] Create channel picker for draft order creation

Browse source
This commit is contained in:
Jakub Majorek 2020-11-20 17:09:28 +01:00
parent a175fb9497
commit cf7329ccce
6 changed files with 60 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/channels/components/ChannelSettingsDialog/ChannelSettingsDialog.stories.tsx → src/channels/components/ChannelPickerDialog/ChannelPickerDialog.stories.tsx
View file

@ -3,16 +3,16 @@ import { storiesOf } from "@storybook/react";
import React from "react";
import { channelsList } from "../../fixtures";
import ChannelSettingsDialog, {
ChannelSettingsDialogProps
} from "./ChannelSettingsDialog";
import ChannelPickerDialog, {
ChannelPickerDialogProps
} from "./ChannelPickerDialog";
const channelsChoices = channelsList.map(channel => ({
label: channel.name,
value: channel.id
}));
const props: ChannelSettingsDialogProps = {
const props: ChannelPickerDialogProps = {
channelsChoices,
confirmButtonState: "default",
defaultChoice: channelsChoices[0]?.value,
@ -23,4 +23,4 @@ const props: ChannelSettingsDialogProps = {
storiesOf("Views / Channels / Settings dialog", module)
.addDecorator(Decorator)
.add("default", () => <ChannelSettingsDialog {...props} />);
.add("default", () => <ChannelPickerDialog {...props} />);

21
src/channels/components/ChannelSettingsDialog/ChannelSettingsDialog.tsx → src/channels/components/ChannelPickerDialog/ChannelPickerDialog.tsx
View file

@ -1,4 +1,3 @@
import Typography from "@material-ui/core/Typography";
import ActionDialog from "@saleor/components/ActionDialog";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import {
@ -6,11 +5,11 @@ import {
SingleSelectField
} from "@saleor/components/SingleSelectField";
import React, { useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { useIntl } from "react-intl";
import { useStyles } from "../styles";
export interface ChannelSettingsDialogProps {
export interface ChannelPickerDialogProps {
channelsChoices: Choices;
confirmButtonState: ConfirmButtonTransitionState;
defaultChoice: string;
@ -19,7 +18,7 @@ export interface ChannelSettingsDialogProps {
onConfirm: (choice: string) => void;
}
const ChannelSettingsDialog: React.FC<ChannelSettingsDialogProps> = ({
const ChannelPickerDialog: React.FC<ChannelPickerDialogProps> = ({
channelsChoices = [],
confirmButtonState,
defaultChoice,
@ -40,23 +39,17 @@ const ChannelSettingsDialog: React.FC<ChannelSettingsDialogProps> = ({
onClose={onClose}
onConfirm={() => onConfirm(choice)}
title={intl.formatMessage({
defaultMessage: "Settings",
defaultMessage: "Select a channel",
description: "dialog header"
})}
>
<div>
<Typography>
<FormattedMessage
defaultMessage="Configure the way information are presented in catalog section of Dashboard."
description="channel settings"
/>
</Typography>
<div className={classes.select}>
<SingleSelectField
choices={channelsChoices}
name="channels"
label={intl.formatMessage({
defaultMessage: "Show prices for",
defaultMessage: "Channel name",
description: "select label"
})}
value={choice}
@ -67,5 +60,5 @@ const ChannelSettingsDialog: React.FC<ChannelSettingsDialogProps> = ({
</ActionDialog>
);
};
ChannelSettingsDialog.displayName = "ChannelSettingsDialog";
export default ChannelSettingsDialog;
ChannelPickerDialog.displayName = "ChannelPickerDialog";
export default ChannelPickerDialog;

2
src/channels/components/ChannelPickerDialog/index.ts Normal file
View file

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

2
src/channels/components/ChannelSettingsDialog/index.ts
View file

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

31
src/orders/views/OrderDraftList/OrderDraftList.tsx
View file

@ -1,6 +1,7 @@
import DialogContentText from "@material-ui/core/DialogContentText";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";
import ChannelPickerDialog from "@saleor/channels/components/ChannelPickerDialog";
import ActionDialog from "@saleor/components/ActionDialog";
import useAppChannel from "@saleor/components/AppLayout/AppChannelContext";
import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog";
@ -79,7 +80,10 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
onCompleted: handleCreateOrderCreateSuccess
});
const { channel } = useAppChannel();
const { channel, availableChannels } = useAppChannel();
const [channelPickerDialogOpen, setChannelPickerDialogOpen] = React.useState(
false
);
const tabs = getFilterTabs();
@ -196,13 +200,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
data.draftOrders.edges.map(edge => edge.node)
)}
pageInfo={pageInfo}
onAdd={() =>
createOrder({
variables: {
input: { channel: channel.id }
}
})
}
onAdd={() => setChannelPickerDialogOpen(true)}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onRowClick={id => () => navigate(orderUrl(id))}
@ -263,6 +261,23 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
onSubmit={handleTabDelete}
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
/>
<ChannelPickerDialog
channelsChoices={availableChannels.map(channel => ({
label: channel.name,
value: channel.id
}))}
confirmButtonState="success"
defaultChoice={channel.id}
open={channelPickerDialogOpen}
onClose={() => setChannelPickerDialogOpen(false)}
onConfirm={channel =>
createOrder({
variables: {
input: { channel }
}
})
}
/>
</>
);
}}

31
src/orders/views/OrderList/OrderList.tsx
View file

@ -1,3 +1,4 @@
import ChannelPickerDialog from "@saleor/channels/components/ChannelPickerDialog";
import useAppChannel from "@saleor/components/AppLayout/AppChannelContext";
import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog";
import SaveFilterTabDialog, {
@ -67,7 +68,10 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
onCompleted: handleCreateOrderCreateSuccess
});
const { channel } = useAppChannel();
const { channel, availableChannels } = useAppChannel();
const [channelPickerDialogOpen, setChannelPickerDialogOpen] = React.useState(
false
);
const tabs = getFilterTabs();
@ -145,13 +149,7 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
orders={maybe(() => data.orders.edges.map(edge => edge.node))}
pageInfo={pageInfo}
sort={getSortParams(params)}
onAdd={() =>
createOrder({
variables: {
input: { channel: channel.id }
}
})
}
onAdd={() => setChannelPickerDialogOpen(true)}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onUpdateListSettings={updateListSettings}
@ -179,6 +177,23 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
onSubmit={handleFilterTabDelete}
tabName={getStringOrPlaceholder(tabs[currentTab - 1]?.name)}
/>
<ChannelPickerDialog
channelsChoices={availableChannels.map(channel => ({
label: channel.name,
value: channel.id
}))}
confirmButtonState="success"
defaultChoice={channel.id}
open={channelPickerDialogOpen}
onClose={() => setChannelPickerDialogOpen(false)}
onConfirm={channel =>
createOrder({
variables: {
input: { channel }
}
})
}
/>
</>
);
};