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

Make warehouse and shipping work

Browse source
This commit is contained in:
dominik-zeglen 2020-03-18 18:24:55 +01:00
parent 61db9d1476
commit 97ffc07738
9 changed files with 52 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
View file

@ -72,7 +72,7 @@ const useStyles = makeStyles(
export interface MultiAutocompleteSelectFieldProps
extends Partial<FetchMoreProps> {
add: MultiAutocompleteActionType;
add?: MultiAutocompleteActionType;
allowCustomValues?: boolean;
displayValues: MultiAutocompleteChoiceType[];
error?: boolean;
@ -93,6 +93,7 @@ const DebounceAutocomplete: React.ComponentType<DebounceProps<
const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFieldProps> = props => {
const {
add,
allowCustomValues,
choices,
displayValues,
@ -131,6 +132,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
itemToString={() => ""}
>
{({
closeMenu,
getInputProps,
getItemProps,
isOpen,

19
src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx
View file

@ -34,7 +34,7 @@ export interface MultiAutocompleteChoiceType {
}
export interface MultiAutocompleteSelectFieldContentProps
extends Partial<FetchMoreProps> {
add: MultiAutocompleteActionType;
add?: MultiAutocompleteActionType;
choices: MultiAutocompleteChoiceType[];
displayCustomValue: boolean;
displayValues: MultiAutocompleteChoiceType[];
@ -45,6 +45,14 @@ export interface MultiAutocompleteSelectFieldContentProps
const useStyles = makeStyles(
theme => ({
add: {
background: theme.palette.background.default,
border: `1px solid ${theme.palette.divider}`,
borderRadius: "100%",
height: 24,
marginRight: theme.spacing(),
width: 24
},
addIcon: {
height: 24,
margin: 9,
@ -106,6 +114,7 @@ const useStyles = makeStyles(
gridColumnGap: theme.spacing(1),
gridTemplateColumns: "30px 1fr",
height: "auto",
marginBottom: theme.spacing(0.5),
padding: 0,
whiteSpace: "normal"
},
@ -136,10 +145,11 @@ const useStyles = makeStyles(
function getChoiceIndex(
index: number,
displayValues: MultiAutocompleteChoiceType[],
displayCustomValue: boolean
displayCustomValue: boolean,
add: boolean
) {
let choiceIndex = index;
if (displayCustomValue) {
if (add || displayCustomValue) {
choiceIndex += 2;
}
if (displayValues.length > 0) {
@ -258,7 +268,8 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
const choiceIndex = getChoiceIndex(
index,
displayValues,
displayCustomValue
displayCustomValue,
!!add
);
return (

2
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
View file

@ -31,7 +31,7 @@ export interface SingleAutocompleteActionType {
}
export interface SingleAutocompleteSelectFieldContentProps
extends Partial<FetchMoreProps> {
add: SingleAutocompleteActionType;
add?: SingleAutocompleteActionType;
choices: SingleAutocompleteChoiceType[];
displayCustomValue: boolean;
emptyOption: boolean;

6
src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx
View file

@ -104,8 +104,8 @@ const ShippingZoneAddWarehouseDialog: React.FC<ShippingZoneAddWarehouseDialogPro
description="header, dialog"
/>
</DialogTitle>
<Form errors={errors} initial={initialForm} onSubmit={handleSubmit}>
{({ change, data, errors: formErrors }) => {
<Form initial={initialForm} onSubmit={handleSubmit}>
{({ change, data }) => {
const handleCountrySelect = createSingleAutocompleteSelectHandler(
change,
setCountryDisplayName,
@ -132,7 +132,7 @@ const ShippingZoneAddWarehouseDialog: React.FC<ShippingZoneAddWarehouseDialogPro
data={data}
disabled={disabled}
displayCountry={countryDisplayName}
errors={formErrors}
errors={errors}
onChange={change}
onCountryChange={handleCountrySelect}
/>

2
src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx
View file

@ -89,7 +89,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
warehouses: shippingZone?.warehouses.map(warehouse => warehouse.id) || []
};
const [warehouseDisplayValues, setWarehouseDisplayValues] = useStateFromProps(
shippingZone?.warehouses.map(warehouseToChoice)
shippingZone?.warehouses.map(warehouseToChoice) || []
);
const warehouseChoices = warehouses.map(warehouseToChoice);

12
src/warehouses/components/WarehouseCreatePage/WarehouseCreatePage.tsx
View file

@ -47,7 +47,7 @@ const initialForm: WarehouseCreatePageFormData = {
const WarehouseCreatePage: React.FC<WarehouseCreatePageProps> = ({
countries,
disabled,
errors: apiErrors,
errors,
saveButtonBarState,
onBack,
onSubmit
@ -61,12 +61,8 @@ const WarehouseCreatePage: React.FC<WarehouseCreatePageProps> = ({
} = useAddressValidation<WarehouseCreatePageFormData>(onSubmit);
return (
<Form
initial={initialForm}
errors={[...apiErrors, ...validationErrors]}
onSubmit={handleSubmit}
>
{({ change, data, errors, submit }) => {
<Form initial={initialForm} onSubmit={handleSubmit}>
{({ change, data, submit }) => {
const countryChoices = mapCountriesToChoices(countries);
const handleCountryChange = createSingleAutocompleteSelectHandler(
change,
@ -99,7 +95,7 @@ const WarehouseCreatePage: React.FC<WarehouseCreatePageProps> = ({
data={data}
disabled={disabled}
displayCountry={displayCountry}
errors={errors}
errors={[...errors, ...validationErrors]}
header={intl.formatMessage({
defaultMessage: "Address Information",
description: "warehouse"

16
src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx
View file

@ -42,7 +42,7 @@ export interface WarehouseDetailsPageProps {
const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
countries,
disabled,
errors: apiErrors,
errors,
saveButtonBarState,
warehouse,
onBack,
@ -73,12 +73,8 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
};
return (
<Form
initial={initialForm}
errors={[...apiErrors, ...validationErrors]}
onSubmit={handleSubmit}
>
{({ change, data, errors, submit }) => {
<Form initial={initialForm} onSubmit={handleSubmit}>
{({ change, data, submit }) => {
const countryChoices = mapCountriesToChoices(countries);
const handleCountryChange = createSingleAutocompleteSelectHandler(
change,
@ -106,7 +102,7 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
data={data}
disabled={disabled}
displayCountry={displayCountry}
errors={errors}
errors={[...errors, ...validationErrors]}
header={intl.formatMessage({
defaultMessage: "Address Information",
description: "warehouse"
@ -117,9 +113,7 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
</div>
<div>
<WarehouseZones
zones={maybe(() =>
warehouse.shippingZones.edges.map(edge => edge.node)
)}
zones={warehouse?.shippingZones?.edges.map(edge => edge.node)}
onShippingZoneClick={onShippingZoneClick}
/>
</div>

9
src/warehouses/components/WarehouseInfo/WarehouseInfo.tsx
View file

@ -7,12 +7,13 @@ import { useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import { commonMessages } from "@saleor/intl";
import { FormChange } from "@saleor/hooks/useForm";
import { FormErrors } from "@saleor/types";
import { UserError } from "@saleor/types";
import { getFieldError } from "@saleor/utils/errors";
export interface WarehouseInfoProps {
data: Record<"name", string>;
disabled: boolean;
errors: FormErrors<"name">;
errors: UserError[];
onChange: FormChange;
}
@ -32,9 +33,9 @@ const WarehouseInfo: React.FC<WarehouseInfoProps> = ({
<CardContent>
<TextField
disabled={disabled}
error={!!errors.name}
error={!!getFieldError(errors, "name")}
fullWidth
helperText={errors.name}
helperText={getFieldError(errors, "name")?.message}
label={intl.formatMessage({
defaultMessage: "Warehouse Name"
})}

25
src/warehouses/views/WarehouseDetails/WarehouseDetails.tsx
View file

@ -11,7 +11,11 @@ import {
import { useWarehouseDetails } from "@saleor/warehouses/queries";
import { commonMessages } from "@saleor/intl";
import useNotifier from "@saleor/hooks/useNotifier";
import { maybe, findValueInEnum, getMutationStatus } from "@saleor/misc";
import {
findValueInEnum,
getMutationStatus,
getStringOrPlaceholder
} from "@saleor/misc";
import { CountryCode } from "@saleor/types/globalTypes";
import useShop from "@saleor/hooks/useShop";
import { WindowTitle } from "@saleor/components/WindowTitle";
@ -22,6 +26,7 @@ import {
import { shippingZoneUrl } from "@saleor/shipping/urls";
import WarehouseDeleteDialog from "@saleor/warehouses/components/WarehouseDeleteDialog";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
import NotFoundPage from "@saleor/components/NotFoundPage";
export interface WarehouseDetailsProps {
id: string;
@ -35,7 +40,6 @@ const WarehouseDetails: React.FC<WarehouseDetailsProps> = ({ id, params }) => {
const shop = useShop();
const { data, loading } = useWarehouseDetails({
displayLoader: true,
require: ["warehouse"],
variables: { id }
});
const [updateWarehouse, updateWarehouseOpts] = useWarehouseUpdate({
@ -65,18 +69,19 @@ const WarehouseDetails: React.FC<WarehouseDetailsProps> = ({ id, params }) => {
params
);
if (data?.warehouse === null) {
return <NotFoundPage onBack={() => navigate(warehouseListUrl())} />;
}
return (
<>
<WindowTitle title={maybe(() => data.warehouse.name)} />
<WindowTitle title={data?.warehouse?.name} />
<WarehouseDetailsPage
countries={maybe(() => shop.countries, [])}
countries={shop?.countries || []}
disabled={loading || updateWarehouseOpts.loading}
errors={maybe(
() => updateWarehouseOpts.data.updateWarehouse.errors,
[]
)}
errors={updateWarehouseOpts.data?.updateWarehouse.errors || []}
saveButtonBarState={updateWarehouseTransitionState}
warehouse={maybe(() => data.warehouse)}
warehouse={data?.warehouse}
onBack={() => navigate(warehouseListUrl())}
onDelete={() => openModal("delete")}
onShippingZoneClick={id => navigate(shippingZoneUrl(id))}
@ -103,7 +108,7 @@ const WarehouseDetails: React.FC<WarehouseDetailsProps> = ({ id, params }) => {
/>
<WarehouseDeleteDialog
confirmButtonState={deleteWarehouseTransitionState}
name={maybe(() => data.warehouse.name)}
name={getStringOrPlaceholder(data?.warehouse?.name)}
onClose={closeModal}
onConfirm={() =>
deleteWarehouse({