diff --git a/src/orders/components/OrderList/OrderList.tsx b/src/orders/components/OrderList/OrderList.tsx index 45a9f7cc9..b119bf771 100644 --- a/src/orders/components/OrderList/OrderList.tsx +++ b/src/orders/components/OrderList/OrderList.tsx @@ -3,16 +3,15 @@ import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableFooter from "@material-ui/core/TableFooter"; import TableRow from "@material-ui/core/TableRow"; +import TableHead from "@material-ui/core/TableHead"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; -import Checkbox from "@saleor/components/Checkbox"; import { DateTime } from "@saleor/components/Date"; import Money from "@saleor/components/Money"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import StatusLabel from "@saleor/components/StatusLabel"; -import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { maybe, @@ -20,7 +19,7 @@ import { transformOrderStatus, transformPaymentStatus } from "@saleor/misc"; -import { ListActions, ListProps, SortPage } from "@saleor/types"; +import { ListProps, SortPage } from "@saleor/types"; import { OrderListUrlSortField } from "@saleor/orders/urls"; import TableCellHeader from "@saleor/components/TableCellHeader"; import { getArrowDirection } from "@saleor/utils/sort"; @@ -59,14 +58,11 @@ const useStyles = makeStyles( { name: "OrderList" } ); -interface OrderListProps - extends ListProps, - ListActions, - SortPage { +interface OrderListProps extends ListProps, SortPage { orders: OrderList_orders_edges_node[]; } -const numberOfColumns = 7; +const numberOfColumns = 6; export const OrderList: React.FC = props => { const { @@ -79,12 +75,7 @@ export const OrderList: React.FC = props => { onUpdateListSettings, onRowClick, onSort, - isChecked, - selected, - sort, - toggle, - toggleAll, - toolbar + sort } = props; const classes = useStyles(props); @@ -99,14 +90,7 @@ export const OrderList: React.FC = props => { : undefined; return ( - + = props => { {renderCollection( orderList, - order => { - const isSelected = order ? isChecked(order.id) : false; - - return ( - - - toggle(order.id)} - /> - - - {maybe(() => order.number) ? ( - "#" + order.number - ) : ( - - )} - - - {maybe(() => order.created) ? ( - - ) : ( - - )} - - - {maybe(() => order.billingAddress) ? ( - <> - {order.billingAddress.firstName} -   - {order.billingAddress.lastName} - - ) : maybe(() => order.userEmail) !== undefined ? ( - order.userEmail - ) : ( - - )} - - - {maybe(() => order.paymentStatus.status) !== undefined ? ( - order.paymentStatus.status === null ? null : ( - - ) - ) : ( - - )} - - - {maybe(() => order.status) ? ( + order => ( + + + {maybe(() => order.number) ? "#" + order.number : } + + + {maybe(() => order.created) ? ( + + ) : ( + + )} + + + {maybe(() => order.billingAddress) ? ( + <> + {order.billingAddress.firstName} +   + {order.billingAddress.lastName} + + ) : maybe(() => order.userEmail) !== undefined ? ( + order.userEmail + ) : ( + + )} + + + {maybe(() => order.paymentStatus.status) !== undefined ? ( + order.paymentStatus.status === null ? null : ( - ) : ( - - )} - - - {maybe(() => order.total.gross) ? ( - - ) : ( - - )} - - - ); - }, + ) + ) : ( + + )} + + + {maybe(() => order.status) ? ( + + ) : ( + + )} + + + {maybe(() => order.total.gross) ? ( + + ) : ( + + )} + + + ), () => ( diff --git a/src/orders/components/OrderListPage/OrderListPage.tsx b/src/orders/components/OrderListPage/OrderListPage.tsx index 525380a0d..aaf2e7141 100644 --- a/src/orders/components/OrderListPage/OrderListPage.tsx +++ b/src/orders/components/OrderListPage/OrderListPage.tsx @@ -7,12 +7,7 @@ import { FormattedMessage, useIntl } from "react-intl"; import Container from "@saleor/components/Container"; import PageHeader from "@saleor/components/PageHeader"; import { sectionNames } from "@saleor/intl"; -import { - FilterPageProps, - ListActions, - PageListProps, - SortPage -} from "@saleor/types"; +import { FilterPageProps, PageListProps, SortPage } from "@saleor/types"; import { OrderListUrlSortField } from "@saleor/orders/urls"; import FilterBar from "@saleor/components/FilterBar"; import { OrderList_orders_edges_node } from "../../types/OrderList"; @@ -25,7 +20,6 @@ import { export interface OrderListPageProps extends PageListProps, - ListActions, FilterPageProps, SortPage { orders: OrderList_orders_edges_node[]; diff --git a/src/orders/mutations.ts b/src/orders/mutations.ts index 9bd64447b..d94c3f8ff 100644 --- a/src/orders/mutations.ts +++ b/src/orders/mutations.ts @@ -8,10 +8,6 @@ import { fragmentOrderEvent } from "./queries"; import { OrderAddNote, OrderAddNoteVariables } from "./types/OrderAddNote"; -import { - OrderBulkCancel, - OrderBulkCancelVariables -} from "./types/OrderBulkCancel"; import { OrderCancel, OrderCancelVariables } from "./types/OrderCancel"; import { OrderCapture, OrderCaptureVariables } from "./types/OrderCapture"; import { @@ -87,21 +83,6 @@ export const TypedOrderCancelMutation = TypedMutation< OrderCancelVariables >(orderCancelMutation); -const orderBulkCancelMutation = gql` - ${orderErrorFragment} - mutation OrderBulkCancel($ids: [ID]!) { - orderBulkCancel(ids: $ids) { - errors: orderErrors { - ...OrderErrorFragment - } - } - } -`; -export const TypedOrderBulkCancelMutation = TypedMutation< - OrderBulkCancel, - OrderBulkCancelVariables ->(orderBulkCancelMutation); - const orderDraftCancelMutation = gql` ${fragmentOrderDetails} ${orderErrorFragment} diff --git a/src/orders/types/OrderBulkCancel.ts b/src/orders/types/OrderBulkCancel.ts deleted file mode 100644 index 1a838b957..000000000 --- a/src/orders/types/OrderBulkCancel.ts +++ /dev/null @@ -1,28 +0,0 @@ -/* tslint:disable */ -/* eslint-disable */ -// This file was automatically generated and should not be edited. - -import { OrderErrorCode } from "./../../types/globalTypes"; - -// ==================================================== -// GraphQL mutation operation: OrderBulkCancel -// ==================================================== - -export interface OrderBulkCancel_orderBulkCancel_errors { - __typename: "OrderError"; - code: OrderErrorCode; - field: string | null; -} - -export interface OrderBulkCancel_orderBulkCancel { - __typename: "OrderBulkCancel"; - errors: OrderBulkCancel_orderBulkCancel_errors[]; -} - -export interface OrderBulkCancel { - orderBulkCancel: OrderBulkCancel_orderBulkCancel | null; -} - -export interface OrderBulkCancelVariables { - ids: (string | null)[]; -} diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx index 672539522..d08881d2b 100644 --- a/src/orders/views/OrderList/OrderList.tsx +++ b/src/orders/views/OrderList/OrderList.tsx @@ -1,12 +1,10 @@ -import Button from "@material-ui/core/Button"; import React from "react"; -import { FormattedMessage, useIntl } from "react-intl"; +import { useIntl } from "react-intl"; 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"; import useNotifier from "@saleor/hooks/useNotifier"; @@ -14,20 +12,15 @@ import usePaginator, { createPaginationState } from "@saleor/hooks/usePaginator"; import useShop from "@saleor/hooks/useShop"; -import { maybe } from "@saleor/misc"; +import { maybe, getStringOrPlaceholder } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; import { getSortParams } from "@saleor/utils/sort"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; -import OrderBulkCancelDialog from "../../components/OrderBulkCancelDialog"; import OrderListPage from "../../components/OrderListPage/OrderListPage"; -import { - TypedOrderBulkCancelMutation, - useOrderDraftCreateMutation -} from "../../mutations"; +import { useOrderDraftCreateMutation } from "../../mutations"; import { useOrderListQuery } from "../../queries"; -import { OrderBulkCancel } from "../../types/OrderBulkCancel"; import { OrderDraftCreate } from "../../types/OrderDraftCreate"; import { orderListUrl, @@ -56,9 +49,6 @@ export const OrderList: React.FC = ({ params }) => { const notify = useNotifier(); const paginate = usePaginator(); const shop = useShop(); - const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions( - params.ids - ); const { updateListSettings, settings } = useListSettings( ListViews.ORDER_LIST ); @@ -91,7 +81,6 @@ export const OrderList: React.FC = ({ params }) => { resetFilters, handleSearchChange ] = createFilterHandlers({ - cleanupFn: reset, createUrl: orderListUrl, getFilterQueryParam, navigate, @@ -103,19 +92,16 @@ export const OrderList: React.FC = ({ params }) => { OrderListUrlQueryParams >(navigate, orderListUrl, params); - const handleTabChange = (tab: number) => { - reset(); + const handleTabChange = (tab: number) => navigate( orderListUrl({ activeTab: tab.toString(), ...getFilterTabs()[tab - 1].data }) ); - }; const handleFilterTabDelete = () => { deleteFilterTab(currentTab); - reset(); navigate(orderListUrl()); }; @@ -135,7 +121,7 @@ export const OrderList: React.FC = ({ params }) => { }), [params, settings.rowNumber] ); - const { data, loading, refetch } = useOrderListQuery({ + const { data, loading } = useOrderListQuery({ displayLoader: true, variables: queryVariables }); @@ -146,100 +132,48 @@ export const OrderList: React.FC = ({ params }) => { params ); - const handleOrderBulkCancel = (data: OrderBulkCancel) => { - if (data.orderBulkCancel.errors.length === 0) { - notify({ - text: intl.formatMessage({ - defaultMessage: "Orders cancelled" - }) - }); - reset(); - refetch(); - closeModal(); - } - }; - const handleSort = createSortHandler(navigate, orderListUrl, params); return ( - - {(orderBulkCancel, orderBulkCancelOpts) => { - const onOrderBulkCancel = () => - orderBulkCancel({ - variables: { - ids: params.ids - } - }); - - return ( - <> - data.orders.edges.map(edge => edge.node))} - pageInfo={pageInfo} - sort={getSortParams(params)} - onAdd={createOrder} - onNextPage={loadNextPage} - onPreviousPage={loadPreviousPage} - onUpdateListSettings={updateListSettings} - onRowClick={id => () => navigate(orderUrl(id))} - onSort={handleSort} - isChecked={isSelected} - selected={listElements.length} - toggle={toggle} - toggleAll={toggleAll} - toolbar={ - - } - onSearchChange={handleSearchChange} - onFilterChange={changeFilters} - onTabSave={() => openModal("save-search")} - onTabDelete={() => openModal("delete-search")} - onTabChange={handleTabChange} - initialSearch={params.query || ""} - tabs={getFilterTabs().map(tab => tab.name)} - onAll={resetFilters} - /> - params.ids.length.toString(), "...")} - onClose={closeModal} - onConfirm={onOrderBulkCancel} - open={params.action === "cancel"} - /> - - tabs[currentTab - 1].name, "...")} - /> - - ); - }} - + <> + data.orders.edges.map(edge => edge.node))} + pageInfo={pageInfo} + sort={getSortParams(params)} + onAdd={createOrder} + onNextPage={loadNextPage} + onPreviousPage={loadPreviousPage} + onUpdateListSettings={updateListSettings} + onRowClick={id => () => navigate(orderUrl(id))} + onSort={handleSort} + onSearchChange={handleSearchChange} + onFilterChange={changeFilters} + onTabSave={() => openModal("save-search")} + onTabDelete={() => openModal("delete-search")} + onTabChange={handleTabChange} + initialSearch={params.query || ""} + tabs={getFilterTabs().map(tab => tab.name)} + onAll={resetFilters} + /> + + + ); };