djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add search to customers

Browse source
This commit is contained in:
dominik-zeglen 2019-09-11 16:39:52 +02:00
parent 38ca4b2444
commit 96d7358668
10 changed files with 293 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

159
src/customers/components/CustomerList/CustomerList.tsx
View file

@ -1,4 +1,3 @@
import Card from "@material-ui/core/Card";
import {
createStyles,
Theme,
@ -68,89 +67,87 @@ const CustomerList = withStyles(styles, { name: "CustomerList" })(
selected,
isChecked
}: CustomerListProps) => (
<Card>
<Table>
<TableHead
colSpan={numberOfColumns}
selected={selected}
disabled={disabled}
items={customers}
toggleAll={toggleAll}
toolbar={toolbar}
>
<TableCell className={classes.colName}>
<FormattedMessage defaultMessage="Customer Name" />
</TableCell>
<TableCell className={classes.colEmail}>
<FormattedMessage defaultMessage="Customer Email" />
</TableCell>
<TableCell className={classes.colOrders}>
<FormattedMessage defaultMessage="No. of Orders" />
</TableCell>
</TableHead>
<TableFooter>
<TableRow>
<TablePagination
colSpan={numberOfColumns}
settings={settings}
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
onNextPage={onNextPage}
onUpdateListSettings={onUpdateListSettings}
hasPreviousPage={
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
}
onPreviousPage={onPreviousPage}
/>
</TableRow>
</TableFooter>
<TableBody>
{renderCollection(
customers,
customer => {
const isSelected = customer ? isChecked(customer.id) : false;
<Table>
<TableHead
colSpan={numberOfColumns}
selected={selected}
disabled={disabled}
items={customers}
toggleAll={toggleAll}
toolbar={toolbar}
>
<TableCell className={classes.colName}>
<FormattedMessage defaultMessage="Customer Name" />
</TableCell>
<TableCell className={classes.colEmail}>
<FormattedMessage defaultMessage="Customer Email" />
</TableCell>
<TableCell className={classes.colOrders}>
<FormattedMessage defaultMessage="No. of Orders" />
</TableCell>
</TableHead>
<TableFooter>
<TableRow>
<TablePagination
colSpan={numberOfColumns}
settings={settings}
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
onNextPage={onNextPage}
onUpdateListSettings={onUpdateListSettings}
hasPreviousPage={
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
}
onPreviousPage={onPreviousPage}
/>
</TableRow>
</TableFooter>
<TableBody>
{renderCollection(
customers,
customer => {
const isSelected = customer ? isChecked(customer.id) : false;
return (
<TableRow
className={!!customer ? classes.tableRow : undefined}
hover={!!customer}
key={customer ? customer.id : "skeleton"}
selected={isSelected}
onClick={customer ? onRowClick(customer.id) : undefined}
>
<TableCell padding="checkbox">
<Checkbox
checked={isSelected}
disabled={disabled}
disableClickPropagation
onChange={() => toggle(customer.id)}
/>
</TableCell>
<TableCell className={classes.colName}>
{getUserName(customer)}
</TableCell>
<TableCell className={classes.colEmail}>
{maybe<React.ReactNode>(() => customer.email, <Skeleton />)}
</TableCell>
<TableCell className={classes.colOrders}>
{maybe<React.ReactNode>(
() => customer.orders.totalCount,
<Skeleton />
)}
</TableCell>
</TableRow>
);
},
() => (
<TableRow>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage defaultMessage="No customers found" />
return (
<TableRow
className={!!customer ? classes.tableRow : undefined}
hover={!!customer}
key={customer ? customer.id : "skeleton"}
selected={isSelected}
onClick={customer ? onRowClick(customer.id) : undefined}
>
<TableCell padding="checkbox">
<Checkbox
checked={isSelected}
disabled={disabled}
disableClickPropagation
onChange={() => toggle(customer.id)}
/>
</TableCell>
<TableCell className={classes.colName}>
{getUserName(customer)}
</TableCell>
<TableCell className={classes.colEmail}>
{maybe<React.ReactNode>(() => customer.email, <Skeleton />)}
</TableCell>
<TableCell className={classes.colOrders}>
{maybe<React.ReactNode>(
() => customer.orders.totalCount,
<Skeleton />
)}
</TableCell>
</TableRow>
)
)}
</TableBody>
</Table>
</Card>
);
},
() => (
<TableRow>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage defaultMessage="No customers found" />
</TableCell>
</TableRow>
)
)}
</TableBody>
</Table>
)
);
CustomerList.displayName = "CustomerList";

49
src/customers/components/CustomerListPage/CustomerListPage.tsx
View file

@ -1,23 +1,41 @@
import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import React from "react";
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 { ListCustomers_customers_edges_node } from "../../types/ListCustomers";
import CustomerList from "../CustomerList/CustomerList";
export interface CustomerListPageProps extends PageListProps, ListActions {
export interface CustomerListPageProps
extends PageListProps,
ListActions,
SearchPageProps,
TabPageProps {
customers: ListCustomers_customers_edges_node[];
}
const CustomerListPage: React.StatelessComponent<CustomerListPageProps> = ({
currentTab,
customers,
disabled,
initialSearch,
onAdd,
onAll,
onSearchChange,
onTabChange,
onTabDelete,
onTabSave,
tabs,
...customerListProps
}) => {
const intl = useIntl();
@ -37,11 +55,26 @@ const CustomerListPage: React.StatelessComponent<CustomerListPageProps> = ({
/>
</Button>
</PageHeader>
<CustomerList
customers={customers}
disabled={disabled}
{...customerListProps}
/>
<Card>
<SearchBar
currentTab={currentTab}
initialSearch={initialSearch}
searchPlaceholder={intl.formatMessage({
defaultMessage: "Search Customer"
})}
tabs={tabs}
onAll={onAll}
onSearchChange={onSearchChange}
onTabChange={onTabChange}
onTabDelete={onTabDelete}
onTabSave={onTabSave}
/>
<CustomerList
customers={customers}
disabled={disabled}
{...customerListProps}
/>
</Card>
</Container>
);
};

9
src/customers/queries.ts
View file

@ -64,8 +64,15 @@ const customerList = gql`
$before: String
$first: Int
$last: Int
$filter: CustomerFilterInput
) {
customers(after: $after, before: $before, first: $first, last: $last) {
customers(
after: $after
before: $before
first: $first
last: $last
filter: $filter
) {
edges {
node {
...CustomerFragment

3
src/customers/types/ListCustomers.ts
View file

@ -2,6 +2,8 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { CustomerFilterInput } from "./../../types/globalTypes";
// ====================================================
// GraphQL query operation: ListCustomers
// ====================================================
@ -48,4 +50,5 @@ export interface ListCustomersVariables {
before?: string | null;
first?: number | null;
last?: number | null;
filter?: CustomerFilterInput | null;
}

20
src/customers/urls.ts
View file

@ -1,13 +1,27 @@
import { stringify as stringifyQs } from "qs";
import urlJoin from "url-join";
import { BulkAction, Dialog, Pagination, SingleAction } from "../types";
import {
ActiveTab,
BulkAction,
Dialog,
Filters,
Pagination,
SingleAction,
TabActionDialog
} from "../types";
export const customerSection = "/customers/";
export const customerListPath = customerSection;
export type CustomerListUrlDialog = "remove";
export type CustomerListUrlQueryParams = BulkAction &
export enum CustomerListUrlFiltersEnum {
query = "query"
}
export type CustomerListUrlFilters = Filters<CustomerListUrlFiltersEnum>;
export type CustomerListUrlDialog = "remove" | TabActionDialog;
export type CustomerListUrlQueryParams = ActiveTab &
BulkAction &
CustomerListUrlFilters &
Dialog<CustomerListUrlDialog> &
Pagination;
export const customerListUrl = (params?: CustomerListUrlQueryParams) =>

107
src/customers/views/CustomerList.tsx → src/customers/views/CustomerList/CustomerList.tsx
View file

@ -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";
@ -15,16 +19,26 @@ import usePaginator, {
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import CustomerListPage from "../components/CustomerListPage";
import { TypedBulkRemoveCustomers } from "../mutations";
import { TypedCustomerListQuery } from "../queries";
import { BulkRemoveCustomers } from "../types/BulkRemoveCustomers";
import CustomerListPage from "../../components/CustomerListPage";
import { TypedBulkRemoveCustomers } from "../../mutations";
import { TypedCustomerListQuery } from "../../queries";
import { BulkRemoveCustomers } from "../../types/BulkRemoveCustomers";
import {
customerAddUrl,
customerListUrl,
CustomerListUrlDialog,
CustomerListUrlFilters,
CustomerListUrlQueryParams,
customerUrl
} from "../urls";
} from "../../urls";
import {
areFiltersApplied,
deleteFilterTab,
getActiveFilters,
getFilterTabs,
getFilterVariables,
saveFilterTab
} from "./filter";
interface CustomerListProps {
params: CustomerListUrlQueryParams;
@ -44,20 +58,76 @@ export const CustomerList: React.StatelessComponent<CustomerListProps> = ({
);
const intl = useIntl();
const tabs = getFilterTabs();
const currentTab =
params.activeTab === undefined
? areFiltersApplied(params)
? tabs.length + 1
: 0
: parseInt(params.activeTab, 0);
const changeFilterField = (filter: CustomerListUrlFilters) => {
reset();
navigate(
customerListUrl({
...getActiveFilters(params),
...filter,
activeTab: undefined
})
);
};
const closeModal = () =>
navigate(
customerListUrl({
...params,
action: undefined,
ids: undefined
}),
true
})
);
const openModal = (action: CustomerListUrlDialog, ids?: string[]) =>
navigate(
customerListUrl({
...params,
action,
ids
})
);
const handleTabChange = (tab: number) => {
reset();
navigate(
customerListUrl({
activeTab: tab.toString(),
...getFilterTabs()[tab - 1].data
})
);
};
const handleTabDelete = () => {
deleteFilterTab(currentTab);
reset();
navigate(customerListUrl());
};
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 (
<TypedCustomerListQuery displayLoader variables={paginationState}>
<TypedCustomerListQuery displayLoader variables={queryVariables}>
{({ data, loading, refetch }) => {
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
maybe(() => data.customers.pageInfo),
@ -90,6 +160,14 @@ export const CustomerList: React.StatelessComponent<CustomerListProps> = ({
return (
<>
<CustomerListPage
currentTab={currentTab}
initialSearch={params.query || ""}
onSearchChange={query => changeFilterField({ query })}
onAll={() => navigate(customerListUrl())}
onTabChange={handleTabChange}
onTabDelete={() => openModal("delete-search")}
onTabSave={() => openModal("save-search")}
tabs={tabs.map(tab => tab.name)}
customers={maybe(() =>
data.customers.edges.map(edge => edge.node)
)}
@ -156,6 +234,19 @@ export const CustomerList: React.StatelessComponent<CustomerListProps> = ({
/>
</DialogContentText>
</ActionDialog>
<SaveFilterTabDialog
open={params.action === "save-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleTabSave}
/>
<DeleteFilterTabDialog
open={params.action === "delete-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleTabDelete}
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
/>
</>
);
}}

31
src/customers/views/CustomerList/filter.ts Normal file
View file

@ -0,0 +1,31 @@
import { CustomerFilterInput } from "@saleor/types/globalTypes";
import {
createFilterTabUtils,
createFilterUtils
} from "../../../utils/filters";
import {
CustomerListUrlFilters,
CustomerListUrlFiltersEnum,
CustomerListUrlQueryParams
} from "../../urls";
export const CUSTOMER_FILTERS_KEY = "customerFilters";
export function getFilterVariables(
params: CustomerListUrlFilters
): CustomerFilterInput {
return {
search: params.query
};
}
export const {
deleteFilterTab,
getFilterTabs,
saveFilterTab
} = createFilterTabUtils<CustomerListUrlFilters>(CUSTOMER_FILTERS_KEY);
export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
CustomerListUrlQueryParams,
CustomerListUrlFilters
>(CustomerListUrlFiltersEnum);

2
src/customers/views/CustomerList/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { default } from "./CustomerList";
export * from "./CustomerList";

2
src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx
View file

@ -60,7 +60,7 @@ const OrderDraftListPage: React.StatelessComponent<OrderDraftListPageProps> = ({
currentTab={currentTab}
initialSearch={initialSearch}
searchPlaceholder={intl.formatMessage({
defaultMessage: "Search Collection"
defaultMessage: "Search Draft"
})}
tabs={tabs}
onAll={onAll}

13
src/types/globalTypes.ts
View file

@ -370,6 +370,14 @@ export interface ConfigurationItemInput {
value: string;
}
export interface CustomerFilterInput {
dateJoined?: DateRangeInput | null;
moneySpent?: PriceRangeInput | null;
numberOfOrders?: IntRangeInput | null;
placedOrders?: DateRangeInput | null;
search?: string | null;
}
export interface CustomerInput {
defaultBillingAddress?: AddressInput | null;
defaultShippingAddress?: AddressInput | null;
@ -415,6 +423,11 @@ export interface FulfillmentUpdateTrackingInput {
notifyCustomer?: boolean | null;
}
export interface IntRangeInput {
gte?: number | null;
lte?: number | null;
}
export interface MenuCreateInput {
name: string;
items?: (MenuItemInput | null)[] | null;