[1611] Create channel picker for draft order creation
This commit is contained in:
parent
a175fb9497
commit
cf7329ccce
6 changed files with 60 additions and 37 deletions
|
@ -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} />);
|
|
@ -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
2
src/channels/components/ChannelPickerDialog/index.ts
Normal file
|
@ -0,0 +1,2 @@
|
|||
export * from "./ChannelPickerDialog";
|
||||
export { default } from "./ChannelPickerDialog";
|
|
@ -1,2 +0,0 @@
|
|||
export * from "./ChannelSettingsDialog";
|
||||
export { default } from "./ChannelSettingsDialog";
|
|
@ -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 }
|
||||
}
|
||||
})
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
|
|
|
@ -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 }
|
||||
}
|
||||
})
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue