Add warehouse search
This commit is contained in:
parent
93d1d74230
commit
fbc809879f
5 changed files with 39 additions and 22 deletions
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
})}
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue