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,31 +190,15 @@ export const OrderList: React.FC<OrderListProps> = props => {
      <TableBody>
        {renderCollection(
          orderList,
-          order => {
-            const isSelected = order ? isChecked(order.id) : false;
-
-            return (
+          order => (
            <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 />
-                  )}
+                {maybe(() => order.number) ? "#" + order.number : <Skeleton />}
              </TableCell>
              <TableCell className={classes.colDate}>
                {maybe(() => order.created) ? (
@ -282,8 +250,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
                )}
              </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,31 +132,8 @@ 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
@ -188,25 +151,6 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
        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")}
@ -216,13 +160,6 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
        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"
@ -234,13 +171,10 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
        confirmButtonState="default"
        onClose={closeModal}
        onSubmit={handleFilterTabDelete}
-              tabName={maybe(() => tabs[currentTab - 1].name, "...")}
+        tabName={getStringOrPlaceholder(tabs[currentTab - 1]?.name)}
      />
    </>
  );
-      }}
-    </TypedOrderBulkCancelMutation>
-  );
 };

 export default OrderList;