Remove order bulk cancel

2020-04-28 10:59:40 +02:00 · 2020-04-28 10:59:40 +02:00 · 3a81eaaf3d
commit 3a81eaaf3d
parent 5a3afa84a5
5 changed files with 110 additions and 262 deletions
--- 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<OrderListUrlSortField> {
+interface OrderListProps extends ListProps, SortPage<OrderListUrlSortField> {
  orders: OrderList_orders_edges_node[];
 }

-const numberOfColumns = 7;
+const numberOfColumns = 6;

 export const OrderList: React.FC<OrderListProps> = props => {
  const {
@ -79,12 +75,7 @@ export const OrderList: React.FC<OrderListProps> = 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<OrderListProps> = props => {
    : undefined;
  return (
    <ResponsiveTable>
-      <TableHead
-        colSpan={numberOfColumns}
-        selected={selected}
-        disabled={disabled}
-        items={orders}
-        toggleAll={toggleAll}
-        toolbar={toolbar}
-      >
+      <TableHead>
        <TableCellHeader
          direction={
            sort.sort === OrderListUrlSortField.number
@ -206,84 +190,67 @@ export const OrderList: React.FC<OrderListProps> = props => {
      <TableBody>
        {renderCollection(
          orderList,
-          order => {
-            const isSelected = order ? isChecked(order.id) : false;
-
-            return (
-              <TableRow
-                hover={!!order}
-                className={!!order ? classes.link : undefined}
-                onClick={order ? onRowClick(order.id) : undefined}
-                key={order ? order.id : "skeleton"}
-                selected={isSelected}
-              >
-                <TableCell padding="checkbox">
-                  <Checkbox
-                    checked={isSelected}
-                    disabled={disabled}
-                    disableClickPropagation
-                    onChange={() => toggle(order.id)}
-                  />
-                </TableCell>
-                <TableCell className={classes.colNumber}>
-                  {maybe(() => order.number) ? (
-                    "#" + order.number
-                  ) : (
-                    <Skeleton />
-                  )}
-                </TableCell>
-                <TableCell className={classes.colDate}>
-                  {maybe(() => order.created) ? (
-                    <DateTime date={order.created} />
-                  ) : (
-                    <Skeleton />
-                  )}
-                </TableCell>
-                <TableCell className={classes.colCustomer}>
-                  {maybe(() => order.billingAddress) ? (
-                    <>
-                      {order.billingAddress.firstName}
-                      &nbsp;
-                      {order.billingAddress.lastName}
-                    </>
-                  ) : maybe(() => order.userEmail) !== undefined ? (
-                    order.userEmail
-                  ) : (
-                    <Skeleton />
-                  )}
-                </TableCell>
-                <TableCell className={classes.colPayment}>
-                  {maybe(() => order.paymentStatus.status) !== undefined ? (
-                    order.paymentStatus.status === null ? null : (
-                      <StatusLabel
-                        status={order.paymentStatus.status}
-                        label={order.paymentStatus.localized}
-                      />
-                    )
-                  ) : (
-                    <Skeleton />
-                  )}
-                </TableCell>
-                <TableCell className={classes.colFulfillment}>
-                  {maybe(() => order.status) ? (
+          order => (
+            <TableRow
+              hover={!!order}
+              className={!!order ? classes.link : undefined}
+              onClick={order ? onRowClick(order.id) : undefined}
+              key={order ? order.id : "skeleton"}
+            >
+              <TableCell className={classes.colNumber}>
+                {maybe(() => order.number) ? "#" + order.number : <Skeleton />}
+              </TableCell>
+              <TableCell className={classes.colDate}>
+                {maybe(() => order.created) ? (
+                  <DateTime date={order.created} />
+                ) : (
+                  <Skeleton />
+                )}
+              </TableCell>
+              <TableCell className={classes.colCustomer}>
+                {maybe(() => order.billingAddress) ? (
+                  <>
+                    {order.billingAddress.firstName}
+                    &nbsp;
+                    {order.billingAddress.lastName}
+                  </>
+                ) : maybe(() => order.userEmail) !== undefined ? (
+                  order.userEmail
+                ) : (
+                  <Skeleton />
+                )}
+              </TableCell>
+              <TableCell className={classes.colPayment}>
+                {maybe(() => order.paymentStatus.status) !== undefined ? (
+                  order.paymentStatus.status === null ? null : (
                    <StatusLabel
-                      status={order.status.status}
-                      label={order.status.localized}
+                      status={order.paymentStatus.status}
+                      label={order.paymentStatus.localized}
                    />
-                  ) : (
-                    <Skeleton />
-                  )}
-                </TableCell>
-                <TableCell className={classes.colTotal}>
-                  {maybe(() => order.total.gross) ? (
-                    <Money money={order.total.gross} />
-                  ) : (
-                    <Skeleton />
-                  )}
-                </TableCell>
-              </TableRow>
-            );
-          },
+                  )
+                ) : (
+                  <Skeleton />
+                )}
+              </TableCell>
+              <TableCell className={classes.colFulfillment}>
+                {maybe(() => order.status) ? (
+                  <StatusLabel
+                    status={order.status.status}
+                    label={order.status.localized}
+                  />
+                ) : (
+                  <Skeleton />
+                )}
+              </TableCell>
+              <TableCell className={classes.colTotal}>
+                {maybe(() => order.total.gross) ? (
+                  <Money money={order.total.gross} />
+                ) : (
+                  <Skeleton />
+                )}
+              </TableCell>
+            </TableRow>
+          ),
          () => (
            <TableRow>
              <TableCell colSpan={numberOfColumns}>
--- 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<OrderFilterKeys, OrderListFilterOpts>,
    SortPage<OrderListUrlSortField> {
  orders: OrderList_orders_edges_node[];
--- 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}
--- a/src/orders/types/OrderBulkCancel.ts
+++ b/src/orders/types/OrderBulkCancel.ts
@ -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)[];
-}
--- 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<OrderListProps> = ({ 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<OrderListProps> = ({ params }) => {
    resetFilters,
    handleSearchChange
  ] = createFilterHandlers({
-    cleanupFn: reset,
    createUrl: orderListUrl,
    getFilterQueryParam,
    navigate,
@ -103,19 +92,16 @@ export const OrderList: React.FC<OrderListProps> = ({ 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<OrderListProps> = ({ 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<OrderListProps> = ({ 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 (
-    <TypedOrderBulkCancelMutation onCompleted={handleOrderBulkCancel}>
-      {(orderBulkCancel, orderBulkCancelOpts) => {
-        const onOrderBulkCancel = () =>
-          orderBulkCancel({
-            variables: {
-              ids: params.ids
-            }
-          });
-
-        return (
-          <>
-            <OrderListPage
-              currencySymbol={currencySymbol}
-              settings={settings}
-              currentTab={currentTab}
-              disabled={loading}
-              filterOpts={getFilterOpts(params)}
-              orders={maybe(() => 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={
-                <Button
-                  color="primary"
-                  onClick={() =>
-                    openModal("cancel", {
-                      ids: listElements
-                    })
-                  }
-                >
-                  <FormattedMessage
-                    defaultMessage="Cancel"
-                    description="cancel orders, button"
-                  />
-                </Button>
-              }
-              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}
-            />
-            <OrderBulkCancelDialog
-              confirmButtonState={orderBulkCancelOpts.status}
-              numberOfOrders={maybe(() => params.ids.length.toString(), "...")}
-              onClose={closeModal}
-              onConfirm={onOrderBulkCancel}
-              open={params.action === "cancel"}
-            />
-            <SaveFilterTabDialog
-              open={params.action === "save-search"}
-              confirmButtonState="default"
-              onClose={closeModal}
-              onSubmit={handleFilterTabSave}
-            />
-            <DeleteFilterTabDialog
-              open={params.action === "delete-search"}
-              confirmButtonState="default"
-              onClose={closeModal}
-              onSubmit={handleFilterTabDelete}
-              tabName={maybe(() => tabs[currentTab - 1].name, "...")}
-            />
-          </>
-        );
-      }}
-    </TypedOrderBulkCancelMutation>
+    <>
+      <OrderListPage
+        currencySymbol={currencySymbol}
+        settings={settings}
+        currentTab={currentTab}
+        disabled={loading}
+        filterOpts={getFilterOpts(params)}
+        orders={maybe(() => 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}
+      />
+      <SaveFilterTabDialog
+        open={params.action === "save-search"}
+        confirmButtonState="default"
+        onClose={closeModal}
+        onSubmit={handleFilterTabSave}
+      />
+      <DeleteFilterTabDialog
+        open={params.action === "delete-search"}
+        confirmButtonState="default"
+        onClose={closeModal}
+        onSubmit={handleFilterTabDelete}
+        tabName={getStringOrPlaceholder(tabs[currentTab - 1]?.name)}
+      />
+    </>
  );
 };