From a4a9703abd327d57a5ede65ab3afd0266148f081 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Fri, 10 Jan 2020 16:05:32 +0100 Subject: [PATCH] Add filters to service list --- src/orders/views/OrderList/OrderList.tsx | 2 +- .../ServiceListPage/ServiceListPage.tsx | 23 ++++-- .../components/ServiceListPage/filters.ts | 47 ++++++++++++ src/services/urls.ts | 1 + .../views/ServiceList/ServiceList.tsx | 36 ++++++---- src/services/views/ServiceList/filter.ts | 31 -------- src/services/views/ServiceList/filters.ts | 71 +++++++++++++++++++ 7 files changed, 161 insertions(+), 50 deletions(-) create mode 100644 src/services/components/ServiceListPage/filters.ts delete mode 100644 src/services/views/ServiceList/filter.ts create mode 100644 src/services/views/ServiceList/filters.ts diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx index f078616e9..c17d82d6c 100644 --- a/src/orders/views/OrderList/OrderList.tsx +++ b/src/orders/views/OrderList/OrderList.tsx @@ -209,7 +209,7 @@ export const OrderList: React.FC = ({ params }) => { } onSearchChange={handleSearchChange} - onFilterChange={filter => changeFilters(filter)} + onFilterChange={changeFilters} onTabSave={() => openModal("save-search")} onTabDelete={() => openModal("delete-search")} onTabChange={handleTabChange} diff --git a/src/services/components/ServiceListPage/ServiceListPage.tsx b/src/services/components/ServiceListPage/ServiceListPage.tsx index 93ee114bf..e3c6c2dc7 100644 --- a/src/services/components/ServiceListPage/ServiceListPage.tsx +++ b/src/services/components/ServiceListPage/ServiceListPage.tsx @@ -6,21 +6,26 @@ import { FormattedMessage, useIntl } from "react-intl"; import AppHeader from "@saleor/components/AppHeader"; import Container from "@saleor/components/Container"; import PageHeader from "@saleor/components/PageHeader"; -import SearchBar from "@saleor/components/SearchBar"; +import FilterBar from "@saleor/components/FilterBar"; import { sectionNames } from "@saleor/intl"; import { PageListProps, - SearchPageProps, TabPageProps, - SortPage + SortPage, + FilterPageProps } from "@saleor/types"; import { ServiceListUrlSortField } from "@saleor/services/urls"; import { ServiceList_serviceAccounts_edges_node } from "../../types/ServiceList"; import ServiceList from "../ServiceList"; +import { + ServiceFilterKeys, + ServiceListFilterOpts, + createFilterStructure +} from "./filters"; export interface ServiceListPageProps extends PageListProps, - SearchPageProps, + FilterPageProps, SortPage, TabPageProps { services: ServiceList_serviceAccounts_edges_node[]; @@ -29,11 +34,14 @@ export interface ServiceListPageProps } const ServiceListPage: React.FC = ({ + currencySymbol, currentTab, + filterOpts, initialSearch, onAdd, onAll, onBack, + onFilterChange, onSearchChange, onTabChange, onTabDelete, @@ -43,6 +51,8 @@ const ServiceListPage: React.FC = ({ }) => { const intl = useIntl(); + const structure = createFilterStructure(intl, filterOpts); + return ( @@ -57,11 +67,13 @@ const ServiceListPage: React.FC = ({ - = ({ })} tabs={tabs} onAll={onAll} + onFilterChange={onFilterChange} onSearchChange={onSearchChange} onTabChange={onTabChange} onTabDelete={onTabDelete} diff --git a/src/services/components/ServiceListPage/filters.ts b/src/services/components/ServiceListPage/filters.ts new file mode 100644 index 000000000..cf864cf54 --- /dev/null +++ b/src/services/components/ServiceListPage/filters.ts @@ -0,0 +1,47 @@ +import { defineMessages, IntlShape } from "react-intl"; + +import { FilterOpts } from "@saleor/types"; +import { IFilter } from "@saleor/components/Filter"; +import { createBooleanField } from "@saleor/utils/filters/fields"; +import { commonMessages } from "@saleor/intl"; + +export enum ServiceFilterKeys { + active = "active" +} + +export interface ServiceListFilterOpts { + isActive: FilterOpts; +} + +const messages = defineMessages({ + active: { + defaultMessage: "Active", + description: "service account" + }, + deactivated: { + defaultMessage: "Inactive", + description: "service account" + } +}); + +export function createFilterStructure( + intl: IntlShape, + opts: ServiceListFilterOpts +): IFilter { + return [ + { + ...createBooleanField( + ServiceFilterKeys.active, + intl.formatMessage(commonMessages.status), + opts.isActive.value, + { + negative: intl.formatMessage(messages.deactivated), + positive: intl.formatMessage(messages.active) + } + ), + active: opts.isActive.active + } + ]; +} + +export default messages; diff --git a/src/services/urls.ts b/src/services/urls.ts index d14e8e2f0..4f5a29d1d 100644 --- a/src/services/urls.ts +++ b/src/services/urls.ts @@ -15,6 +15,7 @@ export const serviceSection = "/services/"; export const serviceListPath = serviceSection; export enum ServiceListUrlFiltersEnum { + active = "active", query = "query" } export type ServiceListUrlFilters = Filters; diff --git a/src/services/views/ServiceList/ServiceList.tsx b/src/services/views/ServiceList/ServiceList.tsx index fe29a1826..6c06fde1b 100644 --- a/src/services/views/ServiceList/ServiceList.tsx +++ b/src/services/views/ServiceList/ServiceList.tsx @@ -20,6 +20,8 @@ import { ListViews } from "@saleor/types"; import { getSortParams } from "@saleor/utils/sort"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; +import useShop from "@saleor/hooks/useShop"; +import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; import ServiceDeleteDialog from "../../components/ServiceDeleteDialog"; import ServiceListPage from "../../components/ServiceListPage"; import { useServiceListQuery } from "../../queries"; @@ -27,7 +29,6 @@ import { serviceAddUrl, serviceListUrl, ServiceListUrlDialog, - ServiceListUrlFilters, ServiceListUrlQueryParams, serviceUrl } from "../../urls"; @@ -36,9 +37,11 @@ import { deleteFilterTab, getActiveFilters, getFilterTabs, + getFilterQueryParam, getFilterVariables, - saveFilterTab -} from "./filter"; + saveFilterTab, + getFilterOpts +} from "./filters"; import { getSortQueryVariables } from "./sort"; interface ServiceListProps { @@ -49,6 +52,7 @@ export const ServiceList: React.FC = ({ params }) => { const navigate = useNavigator(); const notify = useNotifier(); const paginate = usePaginator(); + const shop = useShop(); const { updateListSettings, settings } = useListSettings( ListViews.STAFF_MEMBERS_LIST ); @@ -77,14 +81,16 @@ export const ServiceList: React.FC = ({ params }) => { : 0 : parseInt(params.activeTab, 0); - const changeFilterField = (filter: ServiceListUrlFilters) => - navigate( - serviceListUrl({ - ...getActiveFilters(params), - ...filter, - activeTab: undefined - }) - ); + const [ + changeFilters, + resetFilters, + handleSearchChange + ] = createFilterHandlers({ + createUrl: serviceListUrl, + getFilterQueryParam, + navigate, + params + }); const [openModal, closeModal] = createDialogActionHandlers< ServiceListUrlDialog, @@ -129,6 +135,7 @@ export const ServiceList: React.FC = ({ params }) => { }; const handleSort = createSortHandler(navigate, serviceListUrl, params); + const currencySymbol = maybe(() => shop.defaultCurrency, "USD"); return ( @@ -143,10 +150,13 @@ export const ServiceList: React.FC = ({ params }) => { return ( <> changeFilterField({ query })} - onAll={() => navigate(serviceListUrl())} + onSearchChange={handleSearchChange} + onFilterChange={changeFilters} + onAll={resetFilters} onTabChange={handleTabChange} onTabDelete={() => openModal("delete-search")} onTabSave={() => openModal("save-search")} diff --git a/src/services/views/ServiceList/filter.ts b/src/services/views/ServiceList/filter.ts deleted file mode 100644 index a1d2b7724..000000000 --- a/src/services/views/ServiceList/filter.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { ServiceAccountFilterInput } from "@saleor/types/globalTypes"; -import { - createFilterTabUtils, - createFilterUtils -} from "../../../utils/filters"; -import { - ServiceListUrlFilters, - ServiceListUrlFiltersEnum, - ServiceListUrlQueryParams -} from "../../urls"; - -export const STAFF_FILTERS_KEY = "staffFilters"; - -export function getFilterVariables( - params: ServiceListUrlFilters -): ServiceAccountFilterInput { - return { - search: params.query - }; -} - -export const { - deleteFilterTab, - getFilterTabs, - saveFilterTab -} = createFilterTabUtils(STAFF_FILTERS_KEY); - -export const { areFiltersApplied, getActiveFilters } = createFilterUtils< - ServiceListUrlQueryParams, - ServiceListUrlFilters ->(ServiceListUrlFiltersEnum); diff --git a/src/services/views/ServiceList/filters.ts b/src/services/views/ServiceList/filters.ts new file mode 100644 index 000000000..36fe240a2 --- /dev/null +++ b/src/services/views/ServiceList/filters.ts @@ -0,0 +1,71 @@ +import { ServiceAccountFilterInput } from "@saleor/types/globalTypes"; +import { + ServiceListFilterOpts, + ServiceFilterKeys +} from "@saleor/services/components/ServiceListPage/filters"; +import { maybe, parseBoolean } from "@saleor/misc"; +import { IFilterElement } from "@saleor/components/Filter"; +import { + ServiceListUrlFilters, + ServiceListUrlFiltersEnum, + ServiceListUrlQueryParams +} from "../../urls"; +import { + createFilterTabUtils, + createFilterUtils +} from "../../../utils/filters"; + +export const STAFF_FILTERS_KEY = "staffFilters"; + +export function getFilterOpts( + params: ServiceListUrlFilters +): ServiceListFilterOpts { + return { + isActive: { + active: maybe(() => params.active !== undefined, false), + value: + params.active !== undefined ? parseBoolean(params.active, true) : true + } + }; +} + +export function getFilterVariables( + params: ServiceListUrlFilters +): ServiceAccountFilterInput { + return { + isActive: + params.active !== undefined + ? parseBoolean(params.active, true) + : undefined, + search: params.query + }; +} + +export function getFilterQueryParam( + filter: IFilterElement +): ServiceListUrlFilters { + const { active, name, value } = filter; + + switch (name) { + case ServiceFilterKeys.active: + if (!active) { + return { + active: undefined + }; + } + return { + active: value[0] + }; + } +} + +export const { + deleteFilterTab, + getFilterTabs, + saveFilterTab +} = createFilterTabUtils(STAFF_FILTERS_KEY); + +export const { areFiltersApplied, getActiveFilters } = createFilterUtils< + ServiceListUrlQueryParams, + ServiceListUrlFilters +>(ServiceListUrlFiltersEnum);