diff --git a/src/collections/views/CollectionList/CollectionList.tsx b/src/collections/views/CollectionList/CollectionList.tsx index 04eed042a..c36809f8a 100644 --- a/src/collections/views/CollectionList/CollectionList.tsx +++ b/src/collections/views/CollectionList/CollectionList.tsx @@ -5,7 +5,6 @@ import DeleteIcon from "@material-ui/icons/Delete"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; -import { CategoryListUrlFilters } from "@saleor/categories/urls"; import ActionDialog from "@saleor/components/ActionDialog"; import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog"; import SaveFilterTabDialog, { @@ -33,6 +32,7 @@ import { collectionAddUrl, collectionListUrl, CollectionListUrlDialog, + CollectionListUrlFilters, CollectionListUrlQueryParams, collectionUrl } from "../../urls"; @@ -72,7 +72,7 @@ export const CollectionList: React.StatelessComponent = ({ : 0 : parseInt(params.activeTab, 0); - const changeFilterField = (filter: CategoryListUrlFilters) => { + const changeFilterField = (filter: CollectionListUrlFilters) => { reset(); navigate( collectionListUrl({ diff --git a/src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx b/src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx index 47c5383f7..389cb275a 100644 --- a/src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx +++ b/src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx @@ -6,18 +6,36 @@ import { FormattedMessage, useIntl } from "react-intl"; import Container from "@saleor/components/Container"; import PageHeader from "@saleor/components/PageHeader"; +import SearchBar from "@saleor/components/SearchBar"; import { sectionNames } from "@saleor/intl"; -import { ListActions, PageListProps } from "@saleor/types"; +import { + ListActions, + PageListProps, + SearchPageProps, + TabPageProps +} from "@saleor/types"; import { OrderDraftList_draftOrders_edges_node } from "../../types/OrderDraftList"; import OrderDraftList from "../OrderDraftList"; -export interface OrderDraftListPageProps extends PageListProps, ListActions { +export interface OrderDraftListPageProps + extends PageListProps, + ListActions, + SearchPageProps, + TabPageProps { orders: OrderDraftList_draftOrders_edges_node[]; } const OrderDraftListPage: React.StatelessComponent = ({ + currentTab, disabled, + initialSearch, onAdd, + onAll, + onSearchChange, + onTabChange, + onTabDelete, + onTabSave, + tabs, ...listProps }) => { const intl = useIntl(); @@ -38,6 +56,19 @@ const OrderDraftListPage: React.StatelessComponent = ({ + diff --git a/src/orders/queries.ts b/src/orders/queries.ts index 87a006b28..3888f7c5a 100644 --- a/src/orders/queries.ts +++ b/src/orders/queries.ts @@ -221,8 +221,15 @@ export const orderDraftListQuery = gql` $after: String $last: Int $before: String + $filter: OrderDraftFilterInput ) { - draftOrders(before: $before, after: $after, first: $first, last: $last) { + draftOrders( + before: $before + after: $after + first: $first + last: $last + filter: $filter + ) { edges { node { __typename diff --git a/src/orders/types/OrderDraftList.ts b/src/orders/types/OrderDraftList.ts index c3567edca..ee2f0ff82 100644 --- a/src/orders/types/OrderDraftList.ts +++ b/src/orders/types/OrderDraftList.ts @@ -2,7 +2,7 @@ /* eslint-disable */ // This file was automatically generated and should not be edited. -import { PaymentChargeStatusEnum, OrderStatus } from "./../../types/globalTypes"; +import { OrderDraftFilterInput, PaymentChargeStatusEnum, OrderStatus } from "./../../types/globalTypes"; // ==================================================== // GraphQL query operation: OrderDraftList @@ -81,4 +81,5 @@ export interface OrderDraftListVariables { after?: string | null; last?: number | null; before?: string | null; + filter?: OrderDraftFilterInput | null; } diff --git a/src/orders/urls.ts b/src/orders/urls.ts index b76f2ac8d..b3a5d46d6 100644 --- a/src/orders/urls.ts +++ b/src/orders/urls.ts @@ -42,9 +42,15 @@ export const orderListUrl = (params?: OrderListUrlQueryParams): string => { }; export const orderDraftListPath = urlJoin(orderSectionUrl, "drafts"); -export type OrderDraftListUrlDialog = "remove"; -export type OrderDraftListUrlQueryParams = BulkAction & +export enum OrderDraftListUrlFiltersEnum { + query = "query" +} +export type OrderDraftListUrlFilters = Filters; +export type OrderDraftListUrlDialog = "remove" | TabActionDialog; +export type OrderDraftListUrlQueryParams = ActiveTab & + BulkAction & Dialog & + OrderDraftListUrlFilters & Pagination; export const orderDraftListUrl = ( params?: OrderDraftListUrlQueryParams diff --git a/src/orders/views/OrderDraftList.tsx b/src/orders/views/OrderDraftList/OrderDraftList.tsx similarity index 67% rename from src/orders/views/OrderDraftList.tsx rename to src/orders/views/OrderDraftList/OrderDraftList.tsx index bd5eaa168..64bcf19ef 100644 --- a/src/orders/views/OrderDraftList.tsx +++ b/src/orders/views/OrderDraftList/OrderDraftList.tsx @@ -5,6 +5,10 @@ import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; import ActionDialog from "@saleor/components/ActionDialog"; +import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog"; +import SaveFilterTabDialog, { + SaveFilterTabDialogFormData +} from "@saleor/components/SaveFilterTabDialog"; import useBulkActions from "@saleor/hooks/useBulkActions"; import useListSettings from "@saleor/hooks/useListSettings"; import useNavigator from "@saleor/hooks/useNavigator"; @@ -14,19 +18,29 @@ import usePaginator, { } from "@saleor/hooks/usePaginator"; import { getMutationState, maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; -import OrderDraftListPage from "../components/OrderDraftListPage"; +import OrderDraftListPage from "../../components/OrderDraftListPage"; import { TypedOrderDraftBulkCancelMutation, TypedOrderDraftCreateMutation -} from "../mutations"; -import { TypedOrderDraftListQuery } from "../queries"; -import { OrderDraftBulkCancel } from "../types/OrderDraftBulkCancel"; -import { OrderDraftCreate } from "../types/OrderDraftCreate"; +} from "../../mutations"; +import { TypedOrderDraftListQuery } from "../../queries"; +import { OrderDraftBulkCancel } from "../../types/OrderDraftBulkCancel"; +import { OrderDraftCreate } from "../../types/OrderDraftCreate"; import { orderDraftListUrl, + OrderDraftListUrlDialog, + OrderDraftListUrlFilters, OrderDraftListUrlQueryParams, orderUrl -} from "../urls"; +} from "../../urls"; +import { + areFiltersApplied, + deleteFilterTab, + getActiveFilters, + getFilterTabs, + getFilterVariables, + saveFilterTab +} from "./filter"; interface OrderDraftListProps { params: OrderDraftListUrlQueryParams; @@ -46,6 +60,26 @@ export const OrderDraftList: React.StatelessComponent = ({ ); const intl = useIntl(); + const tabs = getFilterTabs(); + + const currentTab = + params.activeTab === undefined + ? areFiltersApplied(params) + ? tabs.length + 1 + : 0 + : parseInt(params.activeTab, 0); + + const changeFilterField = (filter: OrderDraftListUrlFilters) => { + reset(); + navigate( + orderDraftListUrl({ + ...getActiveFilters(params), + ...filter, + activeTab: undefined + }) + ); + }; + const closeModal = () => navigate( orderDraftListUrl({ @@ -64,12 +98,49 @@ export const OrderDraftList: React.StatelessComponent = ({ navigate(orderUrl(data.draftOrderCreate.order.id)); }; + const openModal = (action: OrderDraftListUrlDialog, ids?: string[]) => + navigate( + orderDraftListUrl({ + ...params, + action, + ids + }) + ); + + const handleTabChange = (tab: number) => { + reset(); + navigate( + orderDraftListUrl({ + activeTab: tab.toString(), + ...getFilterTabs()[tab - 1].data + }) + ); + }; + + const handleTabDelete = () => { + deleteFilterTab(currentTab); + reset(); + navigate(orderDraftListUrl()); + }; + + const handleTabSave = (data: SaveFilterTabDialogFormData) => { + saveFilterTab(data.name, getActiveFilters(params)); + handleTabChange(tabs.length + 1); + }; + const paginationState = createPaginationState(settings.rowNumber, params); + const queryVariables = React.useMemo( + () => ({ + ...paginationState, + filter: getFilterVariables(params) + }), + [params] + ); return ( {createOrder => ( - + {({ data, loading, refetch }) => { const { loadNextPage, loadPreviousPage, pageInfo } = paginate( maybe(() => data.draftOrders.pageInfo), @@ -114,6 +185,14 @@ export const OrderDraftList: React.StatelessComponent = ({ return ( <> changeFilterField({ query })} + onAll={() => navigate(orderDraftListUrl())} + onTabChange={handleTabChange} + onTabDelete={() => openModal("delete-search")} + onTabSave={() => openModal("save-search")} + tabs={tabs.map(tab => tab.name)} disabled={loading} settings={settings} orders={maybe(() => @@ -174,6 +253,19 @@ export const OrderDraftList: React.StatelessComponent = ({ /> + + tabs[currentTab - 1].name, "...")} + /> ); }} diff --git a/src/orders/views/OrderDraftList/filter.ts b/src/orders/views/OrderDraftList/filter.ts new file mode 100644 index 000000000..76e72e29e --- /dev/null +++ b/src/orders/views/OrderDraftList/filter.ts @@ -0,0 +1,31 @@ +import { OrderDraftFilterInput } from "@saleor/types/globalTypes"; +import { + createFilterTabUtils, + createFilterUtils +} from "../../../utils/filters"; +import { + OrderDraftListUrlFilters, + OrderDraftListUrlFiltersEnum, + OrderDraftListUrlQueryParams +} from "../../urls"; + +export const ORDER_DRAFT_FILTERS_KEY = "orderDraftFilters"; + +export function getFilterVariables( + params: OrderDraftListUrlFilters +): OrderDraftFilterInput { + return { + search: params.query + }; +} + +export const { + deleteFilterTab, + getFilterTabs, + saveFilterTab +} = createFilterTabUtils(ORDER_DRAFT_FILTERS_KEY); + +export const { areFiltersApplied, getActiveFilters } = createFilterUtils< + OrderDraftListUrlQueryParams, + OrderDraftListUrlFilters +>(OrderDraftListUrlFiltersEnum); diff --git a/src/orders/views/OrderDraftList/index.ts b/src/orders/views/OrderDraftList/index.ts new file mode 100644 index 000000000..5733dc916 --- /dev/null +++ b/src/orders/views/OrderDraftList/index.ts @@ -0,0 +1,2 @@ +export { default } from "./OrderDraftList"; +export * from "./OrderDraftList"; diff --git a/src/types/globalTypes.ts b/src/types/globalTypes.ts index d23152cac..d085099f7 100644 --- a/src/types/globalTypes.ts +++ b/src/types/globalTypes.ts @@ -452,6 +452,12 @@ export interface OrderAddNoteInput { message?: string | null; } +export interface OrderDraftFilterInput { + customer?: string | null; + created?: DateRangeInput | null; + search?: string | null; +} + export interface OrderFilterInput { paymentStatus?: (PaymentChargeStatusEnum | null)[] | null; status?: (OrderStatusFilter | null)[] | null;