From 331bbee3898f5aecfa1fab578833c5c9ce4e4587 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Wed, 29 Jan 2025 16:59:19 +0100 Subject: [PATCH 1/4] Introduce filers to draft orders --- .../API/DraftOrderFilterAPIProvider.tsx | 15 ++++++ .../ValueProvider/useUrlValueProvider.ts | 2 +- src/components/ConditionalFilter/constants.ts | 16 ++++++ .../ConditionalFilter/context/provider.tsx | 27 ++++++++++ .../ConditionalFilter/queryVariables.ts | 43 +++++++++++++++- .../OrderDraftListPage/OrderDraftListPage.tsx | 22 ++++---- .../components/OrderDraftListPage/filters.ts | 51 ------------------- .../components/OrderDraftListPage/index.ts | 1 - src/orders/index.tsx | 11 +++- .../views/OrderDraftList/OrderDraftList.tsx | 14 ++--- src/orders/views/OrderDraftList/filters.ts | 47 ++++++----------- 11 files changed, 144 insertions(+), 105 deletions(-) create mode 100644 src/components/ConditionalFilter/API/DraftOrderFilterAPIProvider.tsx delete mode 100644 src/orders/components/OrderDraftListPage/filters.ts diff --git a/src/components/ConditionalFilter/API/DraftOrderFilterAPIProvider.tsx b/src/components/ConditionalFilter/API/DraftOrderFilterAPIProvider.tsx new file mode 100644 index 00000000000..70d14c9d653 --- /dev/null +++ b/src/components/ConditionalFilter/API/DraftOrderFilterAPIProvider.tsx @@ -0,0 +1,15 @@ +import { FilterAPIProvider } from "@dashboard/components/ConditionalFilter/API/FilterAPIProvider"; + +export const useDraftOrderFilterAPIProvider = (): FilterAPIProvider => { + const fetchRightOptions = async () => { + return []; + }; + const fetchLeftOptions = async () => { + return []; + }; + + return { + fetchRightOptions, + fetchLeftOptions, + }; +}; diff --git a/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts b/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts index 16037fcffc0..29c07213824 100644 --- a/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts +++ b/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts @@ -18,7 +18,7 @@ import { prepareStructure } from "./utils"; export const useUrlValueProvider = ( locationSearch: string, - type: "product" | "order" | "discount", + type: "product" | "draft-order" | "order" | "discount", initialState?: InitialAPIState | InitialOrderAPIState, ): FilterValueProvider => { const router = useRouter(); diff --git a/src/components/ConditionalFilter/constants.ts b/src/components/ConditionalFilter/constants.ts index b3084e64327..262317ae7a4 100644 --- a/src/components/ConditionalFilter/constants.ts +++ b/src/components/ConditionalFilter/constants.ts @@ -273,10 +273,26 @@ export const STATIC_ORDER_OPTIONS: LeftOperand[] = [ }, ]; +export const STATIC_DRAFT_ORDER_OPTIONS: LeftOperand[] = [ + { + value: "customer", + label: "Customer", + type: "customer", + slug: "customer", + }, + { + value: "created", + label: "Created", + type: "created", + slug: "created", + }, +]; + export const STATIC_OPTIONS = [ ...STATIC_PRODUCT_OPTIONS, ...STATIC_DISCOUNT_OPTIONS, ...STATIC_ORDER_OPTIONS, + ...STATIC_DRAFT_ORDER_OPTIONS, ]; export const ATTRIBUTE_INPUT_TYPE_CONDITIONS = { diff --git a/src/components/ConditionalFilter/context/provider.tsx b/src/components/ConditionalFilter/context/provider.tsx index eaccbcd0001..b9cc6096baf 100644 --- a/src/components/ConditionalFilter/context/provider.tsx +++ b/src/components/ConditionalFilter/context/provider.tsx @@ -1,3 +1,4 @@ +import { useDraftOrderFilterAPIProvider } from "@dashboard/components/ConditionalFilter/API/DraftOrderFilterAPIProvider"; import React, { FC } from "react"; import { useDiscountFilterAPIProvider } from "../API/DiscountFiltersAPIProvider"; @@ -7,6 +8,7 @@ import { useOrderFilterAPIProvider } from "../API/OrderFilterAPIProvider"; import { useProductFilterAPIProvider } from "../API/ProductFilterAPIProvider"; import { STATIC_DISCOUNT_OPTIONS, + STATIC_DRAFT_ORDER_OPTIONS, STATIC_ORDER_OPTIONS, STATIC_PRODUCT_OPTIONS, } from "../constants"; @@ -90,3 +92,28 @@ export const ConditionalOrderFilterProvider: FC<{ ); }; + +export const ConditionalDraftOrderFilterProvider: FC<{ + locationSearch: string; +}> = ({ children, locationSearch }) => { + const apiProvider = useDraftOrderFilterAPIProvider(); + + const valueProvider = useUrlValueProvider(locationSearch, "draft-order"); + const leftOperandsProvider = useFilterLeftOperandsProvider(STATIC_DRAFT_ORDER_OPTIONS); + const containerState = useContainerState(valueProvider); + const filterWindow = useFilterWindow(); + + return ( + + {children} + + ); +}; diff --git a/src/components/ConditionalFilter/queryVariables.ts b/src/components/ConditionalFilter/queryVariables.ts index 5cdbf379187..93f1c927edb 100644 --- a/src/components/ConditionalFilter/queryVariables.ts +++ b/src/components/ConditionalFilter/queryVariables.ts @@ -13,7 +13,7 @@ import { FilterContainer } from "./FilterElement"; import { ConditionSelected } from "./FilterElement/ConditionSelected"; import { isItemOption, isItemOptionArray, isTuple } from "./FilterElement/ConditionValue"; -type StaticQueryPart = string | GlobalIdFilterInput | boolean | DecimalFilterInput; +type StaticQueryPart = string | GlobalIdFilterInput | boolean | DecimalFilterInput | DateRangeInput; const createStaticQueryPart = (selected: ConditionSelected): StaticQueryPart => { if (!selected.conditionValue) return ""; @@ -199,3 +199,44 @@ export const createOrderQueryVariables = (value: FilterContainer) => { return p; }, {} as OrderQueryVars); }; + +export type DraftOrderQueryVars = { + customer: string; + created: DateRangeInput; +}; + +export const creatDraftOrderQueryVariables = (value: FilterContainer): DraftOrderQueryVars => { + return value.reduce((p, c) => { + if (typeof c === "string" || Array.isArray(c)) return p; + + if (c.isStatic()) { + const label = c.condition.selected.conditionValue?.label; + const value = c.condition.selected.value; + + if (c.value.value === "customer") { + p.customer = value as string; + } + + if (c.value.value === "created") { + if (isTuple(value) && label === "between") { + const [gte, lte] = value; + + p.created = { + gte, + lte, + }; + } + + if (label === "greater") { + p.created = { gte: value as string }; + } + + if (label == "lower") { + p.created = { lte: value as string }; + } + } + } + + return p; + }, {} as DraftOrderQueryVars); +}; diff --git a/src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx b/src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx index 535fca25951..b28e5f59a72 100644 --- a/src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx +++ b/src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx @@ -4,7 +4,13 @@ import { BulkDeleteButton } from "@dashboard/components/BulkDeleteButton"; import { DashboardCard } from "@dashboard/components/Card"; import { OrderDraftListQuery, RefreshLimitsQuery } from "@dashboard/graphql"; import { OrderDraftListUrlSortField } from "@dashboard/orders/urls"; -import { FilterPagePropsWithPresets, PageListProps, RelayToFlat, SortPage } from "@dashboard/types"; +import { + FilterPresetsProps, + PageListProps, + RelayToFlat, + SearchPageProps, + SortPage, +} from "@dashboard/types"; import { isLimitReached } from "@dashboard/utils/limits"; import { Box } from "@saleor/macaw-ui-next"; import React, { useState } from "react"; @@ -13,11 +19,11 @@ import { useIntl } from "react-intl"; import { OrderDraftListDatagrid } from "../OrderDraftListDatagrid"; import { OrderDraftListHeader } from "../OrderDraftListHeader/OrderDraftListHeader"; import OrderLimitReached from "../OrderLimitReached"; -import { createFilterStructure, OrderDraftFilterKeys, OrderDraftListFilterOpts } from "./filters"; export interface OrderDraftListPageProps extends PageListProps, - FilterPagePropsWithPresets, + SearchPageProps, + FilterPresetsProps, SortPage { limits: RefreshLimitsQuery["shop"]["limits"]; orders: RelayToFlat; @@ -31,12 +37,10 @@ export interface OrderDraftListPageProps const OrderDraftListPage: React.FC = ({ selectedFilterPreset, disabled, - filterOpts, initialSearch, limits, onAdd, onFilterPresetsAll, - onFilterChange, onSearchChange, onFilterPresetChange, onFilterPresetDelete, @@ -45,14 +49,11 @@ const OrderDraftListPage: React.FC = ({ filterPresets, hasPresetsChanged, onDraftOrdersDelete, - onFilterAttributeFocus, - currencySymbol, selectedOrderDraftIds, ...listProps }) => { const intl = useIntl(); const [isFilterPresetOpen, setFilterPresetOpen] = useState(false); - const filterStructure = createFilterStructure(intl, filterOpts); const limitsReached = isLimitReached(limits, "orders"); return ( @@ -84,12 +85,9 @@ const OrderDraftListPage: React.FC = ({ justifyContent="space-between" > ; - customer: FilterOpts; -} - -const messages = defineMessages({ - created: { - id: "vwMO04", - defaultMessage: "Created", - description: "draft order", - }, - customer: { - id: "iEeIhY", - defaultMessage: "Customer", - description: "draft order", - }, -}); - -export function createFilterStructure( - intl: IntlShape, - opts: OrderDraftListFilterOpts, -): IFilter { - return [ - { - ...createDateField( - OrderDraftFilterKeys.created, - intl.formatMessage(messages.created), - opts.created.value, - ), - active: opts.created.active, - }, - { - ...createTextField( - OrderDraftFilterKeys.customer, - intl.formatMessage(messages.customer), - opts.customer.value, - ), - active: opts.customer.active, - }, - ]; -} diff --git a/src/orders/components/OrderDraftListPage/index.ts b/src/orders/components/OrderDraftListPage/index.ts index 3fc3859a5a6..de5e8daab09 100644 --- a/src/orders/components/OrderDraftListPage/index.ts +++ b/src/orders/components/OrderDraftListPage/index.ts @@ -1,3 +1,2 @@ -export * from "./filters"; export { default } from "./OrderDraftListPage"; export * from "./OrderDraftListPage"; diff --git a/src/orders/index.tsx b/src/orders/index.tsx index 4eb6f85dd31..a5d23bea487 100644 --- a/src/orders/index.tsx +++ b/src/orders/index.tsx @@ -1,4 +1,7 @@ -import { ConditionalOrderFilterProvider } from "@dashboard/components/ConditionalFilter"; +import { + ConditionalDraftOrderFilterProvider, + ConditionalOrderFilterProvider, +} from "@dashboard/components/ConditionalFilter"; import { Route } from "@dashboard/components/Router"; import { sectionNames } from "@dashboard/intl"; import { asSortParams } from "@dashboard/utils/sort"; @@ -71,7 +74,11 @@ const OrderDraftList: React.FC> = ({ location }) => { false, ); - return ; + return ( + + + + ); }; const OrderDetails: React.FC> = ({ location, match }) => { const qs = parseQs(location.search.substr(1)) as any; diff --git a/src/orders/views/OrderDraftList/OrderDraftList.tsx b/src/orders/views/OrderDraftList/OrderDraftList.tsx index a5df5590dcd..f6cd11d3e08 100644 --- a/src/orders/views/OrderDraftList/OrderDraftList.tsx +++ b/src/orders/views/OrderDraftList/OrderDraftList.tsx @@ -3,6 +3,7 @@ import { useUser } from "@dashboard/auth"; import ChannelPickerDialog from "@dashboard/channels/components/ChannelPickerDialog"; import ActionDialog from "@dashboard/components/ActionDialog"; import useAppChannel from "@dashboard/components/AppLayout/AppChannelContext"; +import { useConditionalFilterContext } from "@dashboard/components/ConditionalFilter"; import DeleteFilterTabDialog from "@dashboard/components/DeleteFilterTabDialog"; import SaveFilterTabDialog from "@dashboard/components/SaveFilterTabDialog"; import { useShopLimitsQuery } from "@dashboard/components/Shop/queries"; @@ -35,7 +36,7 @@ import { OrderDraftListUrlQueryParams, orderUrl, } from "../../urls"; -import { getFilterOpts, getFilterQueryParam, getFilterVariables, storageUtils } from "./filters"; +import { getFilterQueryParam, getFilterVariables, storageUtils } from "./filters"; import { getSortQueryVariables } from "./sort"; import { useBulkDeletion } from "./useBulkDeletion"; @@ -48,6 +49,7 @@ export const OrderDraftList: React.FC = ({ params }) => { const notify = useNotifier(); const intl = useIntl(); const { updateListSettings, settings } = useListSettings(ListViews.DRAFT_LIST); + const { valueProvider } = useConditionalFilterContext(); usePaginationReset(orderDraftListUrl, params, settings.rowNumber); @@ -82,7 +84,7 @@ export const OrderDraftList: React.FC = ({ params }) => { orders: true, }, }); - const [changeFilters, resetFilters, handleSearchChange] = createFilterHandlers({ + const [_, resetFilters, handleSearchChange] = createFilterHandlers({ cleanupFn: clearRowSelection, createUrl: orderDraftListUrl, getFilterQueryParam, @@ -114,7 +116,10 @@ export const OrderDraftList: React.FC = ({ params }) => { const queryVariables = React.useMemo( () => ({ ...paginationState, - filter: getFilterVariables(params), + filter: getFilterVariables({ + params, + filterContainer: valueProvider.value, + }), sort: getSortQueryVariables(params), }), [paginationState, params], @@ -152,11 +157,9 @@ export const OrderDraftList: React.FC = ({ params }) => { { @@ -172,7 +175,6 @@ export const OrderDraftList: React.FC = ({ params }) => { onAdd={() => openModal("create-order")} onSort={handleSort} sort={getSortParams(params)} - currencySymbol={channel?.currencyCode} hasPresetsChanged={hasPresetsChanged} onDraftOrdersDelete={() => openModal("remove", { diff --git a/src/orders/views/OrderDraftList/filters.ts b/src/orders/views/OrderDraftList/filters.ts index cc76072d6a8..d2a7ad115ed 100644 --- a/src/orders/views/OrderDraftList/filters.ts +++ b/src/orders/views/OrderDraftList/filters.ts @@ -1,16 +1,11 @@ // @ts-strict-ignore +import { FilterContainer } from "@dashboard/components/ConditionalFilter/FilterElement"; +import { creatDraftOrderQueryVariables } from "@dashboard/components/ConditionalFilter/queryVariables"; import { FilterElement } from "@dashboard/components/Filter"; -import { OrderDraftFilterInput } from "@dashboard/graphql"; -import { maybe } from "@dashboard/misc"; -import { - OrderDraftFilterKeys, - OrderDraftListFilterOpts, -} from "@dashboard/orders/components/OrderDraftListPage"; import { createFilterTabUtils, createFilterUtils, - getGteLteVariables, getMinMaxQueryParam, getSingleValueQueryParam, } from "../../../utils/filters"; @@ -22,34 +17,24 @@ import { export const ORDER_DRAFT_FILTERS_KEY = "orderDraftFilters"; -export function getFilterOpts(params: OrderDraftListUrlFilters): OrderDraftListFilterOpts { - return { - created: { - active: maybe( - () => [params.createdFrom, params.createdTo].some(field => field !== undefined), - false, - ), - value: { - max: maybe(() => params.createdTo), - min: maybe(() => params.createdFrom), - }, - }, - customer: { - active: !!maybe(() => params.customer), - value: params.customer, - }, - }; -} +export const getFilterVariables = ({ + filterContainer, + params, +}: { + filterContainer: FilterContainer; + params: OrderDraftListUrlFilters; +}) => { + const queryVars = creatDraftOrderQueryVariables(filterContainer); -export function getFilterVariables(params: OrderDraftListUrlFilters): OrderDraftFilterInput { return { - created: getGteLteVariables({ - gte: params.createdFrom, - lte: params.createdTo, - }), - customer: params.customer, + ...queryVars, search: params.query, }; +}; + +export enum OrderDraftFilterKeys { + created = "created", + customer = "customer", } export function getFilterQueryParam( From 08b1e0c2484c807af1168361139e262a37e2d73f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Thu, 30 Jan 2025 02:03:38 +0100 Subject: [PATCH 2/4] Add method to old filters query params --- .../ConditionalFilter/queryVariables.ts | 87 ++++++++++++------- 1 file changed, 54 insertions(+), 33 deletions(-) diff --git a/src/components/ConditionalFilter/queryVariables.ts b/src/components/ConditionalFilter/queryVariables.ts index 93f1c927edb..4a5c9dcb411 100644 --- a/src/components/ConditionalFilter/queryVariables.ts +++ b/src/components/ConditionalFilter/queryVariables.ts @@ -5,6 +5,7 @@ import { DateTimeRangeInput, DecimalFilterInput, GlobalIdFilterInput, + OrderDraftFilterInput, ProductWhereInput, PromotionWhereInput, } from "@dashboard/graphql"; @@ -13,7 +14,8 @@ import { FilterContainer } from "./FilterElement"; import { ConditionSelected } from "./FilterElement/ConditionSelected"; import { isItemOption, isItemOptionArray, isTuple } from "./FilterElement/ConditionValue"; -type StaticQueryPart = string | GlobalIdFilterInput | boolean | DecimalFilterInput | DateRangeInput; +type StaticQueryPart = string | GlobalIdFilterInput | boolean | DecimalFilterInput; +type StaticQueryPartForOldAPIFilters = string | DateRangeInput | string[] | boolean; const createStaticQueryPart = (selected: ConditionSelected): StaticQueryPart => { if (!selected.conditionValue) return ""; @@ -57,6 +59,50 @@ const createStaticQueryPart = (selected: ConditionSelected): StaticQueryPart => return value; }; +const createStaticQueryPartForOldAPIFilters = ( + selected: ConditionSelected, +): StaticQueryPartForOldAPIFilters => { + if (!selected.conditionValue) return ""; + + const { label } = selected.conditionValue; + const { value } = selected; + + if (label === "lower") { + return { lte: value }; + } + + if (label === "greater") { + return { gte: value }; + } + + if (isTuple(value) && label === "between") { + const [gte, lte] = value; + + return { lte, gte }; + } + + if (isItemOption(value) && ["true", "false"].includes(value.value)) { + return value.value === "true"; + } + + if (isItemOption(value)) { + return value.value; + } + + if (isItemOptionArray(value)) { + return value.map(x => x.value); + } + + if (typeof value === "string") { + return value; + } + + if (Array.isArray(value)) { + return value; + } + + return value; +}; const getRangeQueryPartByType = (value: [string, string], type: string) => { const [gte, lte] = value; @@ -200,43 +246,18 @@ export const createOrderQueryVariables = (value: FilterContainer) => { }, {} as OrderQueryVars); }; -export type DraftOrderQueryVars = { - customer: string; - created: DateRangeInput; -}; - -export const creatDraftOrderQueryVariables = (value: FilterContainer): DraftOrderQueryVars => { +export const creatDraftOrderQueryVariables = (value: FilterContainer): OrderDraftFilterInput => { return value.reduce((p, c) => { if (typeof c === "string" || Array.isArray(c)) return p; if (c.isStatic()) { - const label = c.condition.selected.conditionValue?.label; - const value = c.condition.selected.value; - - if (c.value.value === "customer") { - p.customer = value as string; - } - - if (c.value.value === "created") { - if (isTuple(value) && label === "between") { - const [gte, lte] = value; - - p.created = { - gte, - lte, - }; - } - - if (label === "greater") { - p.created = { gte: value as string }; - } - - if (label == "lower") { - p.created = { lte: value as string }; - } - } + p[c.value.value as keyof OrderDraftFilterInput] = createStaticQueryPartForOldAPIFilters( + c.condition.selected, + ) as any; + + return p; } return p; - }, {} as DraftOrderQueryVars); + }, {} as OrderDraftFilterInput); }; From b1a1bc53abb6a883b28b650a7fea114539256ed0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Thu, 30 Jan 2025 02:46:33 +0100 Subject: [PATCH 3/4] Remove not used handlers --- .../ConditionalFilter/queryVariables.ts | 3 +- .../views/OrderDraftList/OrderDraftList.tsx | 7 ++-- src/orders/views/OrderDraftList/filters.ts | 31 +---------------- src/utils/handlers/filterHandlers.ts | 34 +++---------------- 4 files changed, 11 insertions(+), 64 deletions(-) diff --git a/src/components/ConditionalFilter/queryVariables.ts b/src/components/ConditionalFilter/queryVariables.ts index 4a5c9dcb411..204e10ec8d3 100644 --- a/src/components/ConditionalFilter/queryVariables.ts +++ b/src/components/ConditionalFilter/queryVariables.ts @@ -65,7 +65,8 @@ const createStaticQueryPartForOldAPIFilters = ( if (!selected.conditionValue) return ""; const { label } = selected.conditionValue; - const { value } = selected; + const { value: selectedValue } = selected; + const value = Array.isArray(selectedValue) ? selectedValue[0] : selectedValue; if (label === "lower") { return { lte: value }; diff --git a/src/orders/views/OrderDraftList/OrderDraftList.tsx b/src/orders/views/OrderDraftList/OrderDraftList.tsx index f6cd11d3e08..f1ab6b21f33 100644 --- a/src/orders/views/OrderDraftList/OrderDraftList.tsx +++ b/src/orders/views/OrderDraftList/OrderDraftList.tsx @@ -36,7 +36,7 @@ import { OrderDraftListUrlQueryParams, orderUrl, } from "../../urls"; -import { getFilterQueryParam, getFilterVariables, storageUtils } from "./filters"; +import { getFilterVariables, storageUtils } from "./filters"; import { getSortQueryVariables } from "./sort"; import { useBulkDeletion } from "./useBulkDeletion"; @@ -84,10 +84,9 @@ export const OrderDraftList: React.FC = ({ params }) => { orders: true, }, }); - const [_, resetFilters, handleSearchChange] = createFilterHandlers({ + const [resetFilters, handleSearchChange] = createFilterHandlers({ cleanupFn: clearRowSelection, createUrl: orderDraftListUrl, - getFilterQueryParam, navigate, params, keepActiveTab: true, @@ -122,7 +121,7 @@ export const OrderDraftList: React.FC = ({ params }) => { }), sort: getSortQueryVariables(params), }), - [paginationState, params], + [paginationState, params, valueProvider.value], ); const { data, refetch } = useOrderDraftListQuery({ displayLoader: true, diff --git a/src/orders/views/OrderDraftList/filters.ts b/src/orders/views/OrderDraftList/filters.ts index d2a7ad115ed..6af0347a446 100644 --- a/src/orders/views/OrderDraftList/filters.ts +++ b/src/orders/views/OrderDraftList/filters.ts @@ -1,14 +1,8 @@ // @ts-strict-ignore import { FilterContainer } from "@dashboard/components/ConditionalFilter/FilterElement"; import { creatDraftOrderQueryVariables } from "@dashboard/components/ConditionalFilter/queryVariables"; -import { FilterElement } from "@dashboard/components/Filter"; -import { - createFilterTabUtils, - createFilterUtils, - getMinMaxQueryParam, - getSingleValueQueryParam, -} from "../../../utils/filters"; +import { createFilterTabUtils, createFilterUtils } from "../../../utils/filters"; import { OrderDraftListUrlFilters, OrderDraftListUrlFiltersEnum, @@ -32,29 +26,6 @@ export const getFilterVariables = ({ }; }; -export enum OrderDraftFilterKeys { - created = "created", - customer = "customer", -} - -export function getFilterQueryParam( - filter: FilterElement, -): OrderDraftListUrlFilters { - const { name } = filter; - - switch (name) { - case OrderDraftFilterKeys.created: - return getMinMaxQueryParam( - filter, - OrderDraftListUrlFiltersEnum.createdFrom, - OrderDraftListUrlFiltersEnum.createdTo, - ); - - case OrderDraftFilterKeys.customer: - return getSingleValueQueryParam(filter, OrderDraftListUrlFiltersEnum.customer); - } -} - export const storageUtils = createFilterTabUtils(ORDER_DRAFT_FILTERS_KEY); export const { areFiltersApplied, getActiveFilters, getFiltersCurrentTab } = createFilterUtils< diff --git a/src/utils/handlers/filterHandlers.ts b/src/utils/handlers/filterHandlers.ts index 3a7afc7f82f..b66cf39a356 100644 --- a/src/utils/handlers/filterHandlers.ts +++ b/src/utils/handlers/filterHandlers.ts @@ -1,26 +1,18 @@ -import { IFilter } from "@dashboard/components/Filter"; import { UseNavigatorResult } from "@dashboard/hooks/useNavigator"; import { ActiveTab, Pagination, Search, Sort } from "@dashboard/types"; -import { GetFilterQueryParam, getFilterQueryParams } from "../filters"; - type RequiredParams = ActiveTab & Search & Sort & Pagination & { presestesChanged?: string }; type CreateUrl = (params: RequiredParams) => string; -type CreateFilterHandlers = [ - (filter: IFilter) => void, - () => void, - (query: string) => void, -]; +type CreateFilterHandlers = [() => void, (query: string) => void]; -function createFilterHandlers(opts: { - getFilterQueryParam: GetFilterQueryParam; +function createFilterHandlers(opts: { navigate: UseNavigatorResult; createUrl: CreateUrl; params: RequiredParams; cleanupFn?: () => void; keepActiveTab?: boolean; -}): CreateFilterHandlers { - const { getFilterQueryParam, navigate, createUrl, params, cleanupFn, keepActiveTab } = opts; +}): CreateFilterHandlers { + const { navigate, createUrl, params, cleanupFn, keepActiveTab } = opts; const getActiveTabValue = (removeActiveTab: boolean) => { if (!keepActiveTab || removeActiveTab) { return undefined; @@ -28,23 +20,7 @@ function createFilterHandlers(o return params.activeTab; }; - const changeFilters = (filters: IFilter) => { - if (cleanupFn) { - cleanupFn(); - } - - const filtersQueryParams = getFilterQueryParams(filters, getFilterQueryParam); - navigate( - createUrl({ - ...params, - ...filtersQueryParams, - activeTab: getActiveTabValue( - checkIfParamsEmpty(filtersQueryParams) && !params.query?.length, - ), - }), - ); - }; const resetFilters = () => { if (cleanupFn) { cleanupFn(); @@ -75,7 +51,7 @@ function createFilterHandlers(o ); }; - return [changeFilters, resetFilters, handleSearchChange]; + return [resetFilters, handleSearchChange]; } function checkIfParamsEmpty(params: RequiredParams): boolean { From 4fd4239382c3efc85ec64f2b576345e17cb2466d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Thu, 30 Jan 2025 11:42:59 +0100 Subject: [PATCH 4/4] Fix lint --- locale/defaultMessages.json | 8 --- .../views/OrderDraftList/OrderDraftList.tsx | 5 +- .../views/OrderDraftList/filters.test.ts | 61 +++++-------------- src/orders/views/OrderDraftList/filters.ts | 31 +++++++++- src/utils/handlers/filterHandlers.ts | 34 +++++++++-- 5 files changed, 78 insertions(+), 61 deletions(-) diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 1f9035102e6..d38e59d05a6 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -7151,10 +7151,6 @@ "context": "button", "string": "Apply" }, - "iEeIhY": { - "context": "draft order", - "string": "Customer" - }, "iFM716": { "context": "grant refund, refund card subtitle", "string": "How much money do you want to return to the customer for the order?" @@ -9182,10 +9178,6 @@ "vuKrlW": { "string": "Stock" }, - "vwMO04": { - "context": "draft order", - "string": "Created" - }, "vz3yxp": { "string": "Channels permissions" }, diff --git a/src/orders/views/OrderDraftList/OrderDraftList.tsx b/src/orders/views/OrderDraftList/OrderDraftList.tsx index f1ab6b21f33..6087972cce7 100644 --- a/src/orders/views/OrderDraftList/OrderDraftList.tsx +++ b/src/orders/views/OrderDraftList/OrderDraftList.tsx @@ -36,7 +36,7 @@ import { OrderDraftListUrlQueryParams, orderUrl, } from "../../urls"; -import { getFilterVariables, storageUtils } from "./filters"; +import { getFilterQueryParam, getFilterVariables, storageUtils } from "./filters"; import { getSortQueryVariables } from "./sort"; import { useBulkDeletion } from "./useBulkDeletion"; @@ -84,9 +84,10 @@ export const OrderDraftList: React.FC = ({ params }) => { orders: true, }, }); - const [resetFilters, handleSearchChange] = createFilterHandlers({ + const [_, resetFilters, handleSearchChange] = createFilterHandlers({ cleanupFn: clearRowSelection, createUrl: orderDraftListUrl, + getFilterQueryParam, navigate, params, keepActiveTab: true, diff --git a/src/orders/views/OrderDraftList/filters.test.ts b/src/orders/views/OrderDraftList/filters.test.ts index 25f07ec5330..bc41fe0241a 100644 --- a/src/orders/views/OrderDraftList/filters.test.ts +++ b/src/orders/views/OrderDraftList/filters.test.ts @@ -1,60 +1,31 @@ -import { date } from "@dashboard/fixtures"; -import { createFilterStructure } from "@dashboard/orders/components/OrderDraftListPage"; +import { FilterElement } from "@dashboard/components/ConditionalFilter/FilterElement"; import { OrderDraftListUrlFilters } from "@dashboard/orders/urls"; -import { getFilterQueryParams } from "@dashboard/utils/filters"; -import { stringifyQs } from "@dashboard/utils/urls"; -import { getExistingKeys, setFilterOptsStatus } from "@test/filters"; -import { config } from "@test/intl"; -import { createIntl } from "react-intl"; +import { getExistingKeys } from "@test/filters"; -import { getFilterQueryParam, getFilterVariables } from "./filters"; +import { getFilterVariables } from "./filters"; describe("Filtering query params", () => { it("should be empty object if no params given", () => { const params: OrderDraftListUrlFilters = {}; - const filterVariables = getFilterVariables(params); + const filterVariables = getFilterVariables({ + params, + filterContainer: [FilterElement.createEmpty()], + }); expect(getExistingKeys(filterVariables)).toHaveLength(0); }); it("should not be empty object if params given", () => { const params: OrderDraftListUrlFilters = { - createdFrom: date.from, - createdTo: date.to, - customer: "admin@example.com", + query: "test", }; - const filterVariables = getFilterVariables(params); + const filterVariables = getFilterVariables({ + params, + filterContainer: [ + FilterElement.createStaticBySlug("created"), + FilterElement.createStaticBySlug("customer"), + ], + }); - expect(getExistingKeys(filterVariables)).toHaveLength(2); - }); -}); -describe("Filtering URL params", () => { - const intl = createIntl(config); - const filters = createFilterStructure(intl, { - created: { - active: false, - value: { - max: date.to, - min: date.from, - }, - }, - customer: { - active: false, - value: "admin@example.com", - }, - }); - - it("should be empty if no active filters", () => { - const filterQueryParams = getFilterQueryParams(filters, getFilterQueryParam); - - expect(getExistingKeys(filterQueryParams)).toHaveLength(0); - }); - it("should not be empty if active filters are present", () => { - const filterQueryParams = getFilterQueryParams( - setFilterOptsStatus(filters, true), - getFilterQueryParam, - ); - - expect(filterQueryParams).toMatchSnapshot(); - expect(stringifyQs(filterQueryParams)).toMatchSnapshot(); + expect(getExistingKeys(filterVariables)).toHaveLength(3); }); }); diff --git a/src/orders/views/OrderDraftList/filters.ts b/src/orders/views/OrderDraftList/filters.ts index 6af0347a446..d2a7ad115ed 100644 --- a/src/orders/views/OrderDraftList/filters.ts +++ b/src/orders/views/OrderDraftList/filters.ts @@ -1,8 +1,14 @@ // @ts-strict-ignore import { FilterContainer } from "@dashboard/components/ConditionalFilter/FilterElement"; import { creatDraftOrderQueryVariables } from "@dashboard/components/ConditionalFilter/queryVariables"; +import { FilterElement } from "@dashboard/components/Filter"; -import { createFilterTabUtils, createFilterUtils } from "../../../utils/filters"; +import { + createFilterTabUtils, + createFilterUtils, + getMinMaxQueryParam, + getSingleValueQueryParam, +} from "../../../utils/filters"; import { OrderDraftListUrlFilters, OrderDraftListUrlFiltersEnum, @@ -26,6 +32,29 @@ export const getFilterVariables = ({ }; }; +export enum OrderDraftFilterKeys { + created = "created", + customer = "customer", +} + +export function getFilterQueryParam( + filter: FilterElement, +): OrderDraftListUrlFilters { + const { name } = filter; + + switch (name) { + case OrderDraftFilterKeys.created: + return getMinMaxQueryParam( + filter, + OrderDraftListUrlFiltersEnum.createdFrom, + OrderDraftListUrlFiltersEnum.createdTo, + ); + + case OrderDraftFilterKeys.customer: + return getSingleValueQueryParam(filter, OrderDraftListUrlFiltersEnum.customer); + } +} + export const storageUtils = createFilterTabUtils(ORDER_DRAFT_FILTERS_KEY); export const { areFiltersApplied, getActiveFilters, getFiltersCurrentTab } = createFilterUtils< diff --git a/src/utils/handlers/filterHandlers.ts b/src/utils/handlers/filterHandlers.ts index b66cf39a356..3a7afc7f82f 100644 --- a/src/utils/handlers/filterHandlers.ts +++ b/src/utils/handlers/filterHandlers.ts @@ -1,18 +1,26 @@ +import { IFilter } from "@dashboard/components/Filter"; import { UseNavigatorResult } from "@dashboard/hooks/useNavigator"; import { ActiveTab, Pagination, Search, Sort } from "@dashboard/types"; +import { GetFilterQueryParam, getFilterQueryParams } from "../filters"; + type RequiredParams = ActiveTab & Search & Sort & Pagination & { presestesChanged?: string }; type CreateUrl = (params: RequiredParams) => string; -type CreateFilterHandlers = [() => void, (query: string) => void]; +type CreateFilterHandlers = [ + (filter: IFilter) => void, + () => void, + (query: string) => void, +]; -function createFilterHandlers(opts: { +function createFilterHandlers(opts: { + getFilterQueryParam: GetFilterQueryParam; navigate: UseNavigatorResult; createUrl: CreateUrl; params: RequiredParams; cleanupFn?: () => void; keepActiveTab?: boolean; -}): CreateFilterHandlers { - const { navigate, createUrl, params, cleanupFn, keepActiveTab } = opts; +}): CreateFilterHandlers { + const { getFilterQueryParam, navigate, createUrl, params, cleanupFn, keepActiveTab } = opts; const getActiveTabValue = (removeActiveTab: boolean) => { if (!keepActiveTab || removeActiveTab) { return undefined; @@ -20,7 +28,23 @@ function createFilterHandlers(opts: { return params.activeTab; }; + const changeFilters = (filters: IFilter) => { + if (cleanupFn) { + cleanupFn(); + } + + const filtersQueryParams = getFilterQueryParams(filters, getFilterQueryParam); + navigate( + createUrl({ + ...params, + ...filtersQueryParams, + activeTab: getActiveTabValue( + checkIfParamsEmpty(filtersQueryParams) && !params.query?.length, + ), + }), + ); + }; const resetFilters = () => { if (cleanupFn) { cleanupFn(); @@ -51,7 +75,7 @@ function createFilterHandlers(opts: { ); }; - return [resetFilters, handleSearchChange]; + return [changeFilters, resetFilters, handleSearchChange]; } function checkIfParamsEmpty(params: RequiredParams): boolean {