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

Merge pull request #849 from mirumee/SALEOR-1611-channel-choose-for-draft-orders

Browse source 
Create channel picker for draft order creation
This commit is contained in:
Jakub Majorek 2020-11-23 12:31:58 +01:00 committed by GitHub
commit acdec39489
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 65 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
locale/defaultMessages.json
View file

@ -1209,17 +1209,13 @@
"context": "channel currency",
"string": "Currency"
},
"src_dot_channels_dot_components_dot_ChannelSettingsDialog_dot_1391686013": {
"src_dot_channels_dot_components_dot_ChannelPickerDialog_dot_2423186459": {
"context": "dialog header",
"string": "Settings"
"string": "Select a channel"
},
"src_dot_channels_dot_components_dot_ChannelSettingsDialog_dot_2721512922": {
"context": "channel settings",
"string": "Configure the way information are presented in catalog section of Dashboard."
},
"src_dot_channels_dot_components_dot_ChannelSettingsDialog_dot_645871430": {
"src_dot_channels_dot_components_dot_ChannelPickerDialog_dot_507892781": {
"context": "select label",
"string": "Show prices for"
"string": "Channel name"
},
"src_dot_channels_dot_components_dot_ChannelStatus_dot_1004218338": {
"context": "inactive",

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";

9
src/orders/urls.ts
View file

@ -15,6 +15,8 @@ import {
const orderSectionUrl = "/orders";
type CreateOrderDialog = "create-order";
export const orderListPath = orderSectionUrl;
export enum OrderListUrlFiltersEnum {
createdFrom = "createdFrom",
@ -28,7 +30,7 @@ export enum OrderListUrlFiltersWithMultipleValuesEnum {
}
export type OrderListUrlFilters = Filters<OrderListUrlFiltersEnum> &
FiltersWithMultipleValues<OrderListUrlFiltersWithMultipleValuesEnum>;
export type OrderListUrlDialog = "cancel" | TabActionDialog;
export type OrderListUrlDialog = "cancel" | CreateOrderDialog | TabActionDialog;
export enum OrderListUrlSortField {
number = "number",
customer = "customer",
@ -61,7 +63,10 @@ export enum OrderDraftListUrlFiltersEnum {
query = "query"
}
export type OrderDraftListUrlFilters = Filters<OrderDraftListUrlFiltersEnum>;
export type OrderDraftListUrlDialog = "remove" | TabActionDialog;
export type OrderDraftListUrlDialog =
| "remove"
| CreateOrderDialog
| TabActionDialog;
export enum OrderDraftListUrlSortField {
number = "number",
customer = "customer",

28
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,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
onCompleted: handleCreateOrderCreateSuccess
});
const { channel } = useAppChannel();
const { channel, availableChannels } = useAppChannel();
const tabs = getFilterTabs();
@ -196,13 +197,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={() => openModal("create-order")}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onRowClick={id => () => navigate(orderUrl(id))}
@ -263,6 +258,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={params.action === "create-order"}
onClose={closeModal}
onConfirm={channel =>
createOrder({
variables: {
input: { channel }
}
})
}
/>
</>
);
}}

28
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,7 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
onCompleted: handleCreateOrderCreateSuccess
});
const { channel } = useAppChannel();
const { channel, availableChannels } = useAppChannel();
const tabs = getFilterTabs();
@ -145,13 +146,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={() => openModal("create-order")}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onUpdateListSettings={updateListSettings}
@ -179,6 +174,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={params.action === "create-order"}
onClose={closeModal}
onConfirm={channel =>
createOrder({
variables: {
input: { channel }
}
})
}
/>
</>
);
};