Add warehouse search

This commit is contained in:
dominik-zeglen 2020-02-11 16:05:09 +01:00
parent 93d1d74230
commit fbc809879f
5 changed files with 39 additions and 22 deletions

View file

@ -105,7 +105,7 @@ const ShippingZoneAddWarehouseDialog: React.FC<ShippingZoneAddWarehouseDialogPro
/>
</DialogTitle>
<Form errors={errors} initial={initialForm} onSubmit={handleSubmit}>
{({ change, data, errors: formErrors, submit }) => {
{({ change, data, errors: formErrors }) => {
const handleCountrySelect = createSingleAutocompleteSelectHandler(
change,
setCountryDisplayName,

View file

@ -15,6 +15,7 @@ import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAu
import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { maybe } from "../../../misc";
import { FetchMoreProps, SearchProps } from "../../../types";
import { ShippingMethodTypeEnum } from "../../../types/globalTypes";
import {
ShippingZoneDetailsFragment,
@ -29,7 +30,9 @@ export interface FormData {
warehouses: string[];
}
export interface ShippingZoneDetailsPageProps {
export interface ShippingZoneDetailsPageProps
extends FetchMoreProps,
SearchProps {
disabled: boolean;
errors: ShippingErrorFragment[];
saveButtonBarState: ConfirmButtonTransitionState;
@ -60,13 +63,17 @@ function warehouseToChoice(
const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
disabled,
errors,
hasMore,
loading,
onBack,
onCountryAdd,
onCountryRemove,
onDelete,
onFetchMore,
onPriceRateAdd,
onPriceRateEdit,
onRateRemove,
onSearchChange,
onSubmit,
onWarehouseAdd,
onWeightRateAdd,
@ -140,10 +147,8 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
onRateAdd={onPriceRateAdd}
onRateEdit={onPriceRateEdit}
onRateRemove={onRateRemove}
rates={maybe(() =>
shippingZone.shippingMethods.filter(
rates={shippingZone?.shippingMethods?.filter(
method => method.type === ShippingMethodTypeEnum.PRICE
)
)}
variant="price"
/>
@ -153,10 +158,8 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
onRateAdd={onWeightRateAdd}
onRateEdit={onWeightRateEdit}
onRateRemove={onRateRemove}
rates={maybe(() =>
shippingZone.shippingMethods.filter(
rates={shippingZone?.shippingMethods?.filter(
method => method.type === ShippingMethodTypeEnum.WEIGHT
)
)}
variant="weight"
/>
@ -165,12 +168,13 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
<ShippingZoneWarehouses
data={data}
displayValue={warehouseDisplayValues}
hasMore={false}
loading={false}
warehouses={warehouseChoices}
hasMore={hasMore}
loading={loading}
onChange={handleWarehouseChange}
onFetchMore={() => undefined}
onFetchMore={onFetchMore}
onSearchChange={onSearchChange}
onWarehouseAdd={onWarehouseAdd}
warehouses={warehouseChoices}
/>
</div>
</Grid>

View file

@ -4,7 +4,7 @@ import React from "react";
import { useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import { FetchMoreProps } from "@saleor/types";
import { FetchMoreProps, SearchProps } from "@saleor/types";
import { FormChange } from "@saleor/hooks/useForm";
import MultiAutocompleteSelectField, {
MultiAutocompleteChoiceType
@ -13,7 +13,7 @@ import MultiAutocompleteSelectField, {
interface ShippingZoneWarehousesFormData {
warehouses: string[];
}
interface ShippingZonewWarehousesProps extends FetchMoreProps {
interface ShippingZonewWarehousesProps extends FetchMoreProps, SearchProps {
data: ShippingZoneWarehousesFormData;
displayValue: MultiAutocompleteChoiceType[];
warehouses: MultiAutocompleteChoiceType[];
@ -30,6 +30,7 @@ export const ShippingZoneWarehouses: React.FC<ShippingZonewWarehousesProps> = pr
warehouses,
onChange,
onFetchMore,
onSearchChange,
onWarehouseAdd
} = props;
const intl = useIntl();
@ -53,8 +54,12 @@ export const ShippingZoneWarehouses: React.FC<ShippingZonewWarehousesProps> = pr
}}
choices={warehouses}
displayValues={displayValue}
fetchChoices={() => undefined}
fetchChoices={onSearchChange}
hasMore={hasMore}
helperText={intl.formatMessage({
defaultMessage:
"Select warehouse from which you will ship products for this shipping zone. This warehouse address will also be used to calculate taxes."
})}
label={intl.formatMessage({
defaultMessage: "Warehouse"
})}

View file

@ -57,9 +57,11 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
const intl = useIntl();
const shop = useShop();
const { result: searchWarehousesOpts } = useWarehouseSearch({
const { result: searchWarehousesOpts, loadMore, search } = useWarehouseSearch(
{
variables: DEFAULT_INITIAL_SEARCH_DATA
});
}
);
const [assignToWarehouse] = useAassignShippingZoneToWarehouse({});
@ -208,6 +210,10 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
warehouses={
searchWarehousesOpts.data?.search.edges.map(edge => edge.node) || []
}
hasMore={searchWarehousesOpts.data?.search.pageInfo.hasNextPage}
loading={searchWarehousesOpts.loading}
onFetchMore={loadMore}
onSearchChange={search}
/>
<ShippingZoneRateDialog
action="edit"

View file

@ -88,10 +88,12 @@ export interface PageListProps<TColumns extends string = string>
onAdd: () => void;
}
export interface SearchPageProps {
initialSearch: string;
export interface SearchProps {
onSearchChange: (value: string) => void;
}
export interface SearchPageProps extends SearchProps {
initialSearch: string;
}
export interface FilterPageProps<TKeys extends string, TOpts extends object>
extends FilterProps<TKeys>,
SearchPageProps,