diff --git a/src/warehouses/components/WarehouseDeleteDialog/WarehouseDeleteDialog.tsx b/src/warehouses/components/WarehouseDeleteDialog/WarehouseDeleteDialog.tsx new file mode 100644 index 000000000..224a2c36e --- /dev/null +++ b/src/warehouses/components/WarehouseDeleteDialog/WarehouseDeleteDialog.tsx @@ -0,0 +1,51 @@ +import DialogContentText from "@material-ui/core/DialogContentText"; +import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; + +import ActionDialog from "@saleor/components/ActionDialog"; +import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; + +export interface WarehouseDeleteDialogProps { + confirmButtonState: ConfirmButtonTransitionState; + open: boolean; + onConfirm: () => void; + onClose: () => void; + name: string; +} + +const WarehouseDeleteDialog: React.FC = ({ + name, + confirmButtonState, + onClose, + onConfirm, + open +}) => { + const intl = useIntl(); + + return ( + + + {name} + }} + /> + + + ); +}; + +WarehouseDeleteDialog.displayName = "WarehouseDeleteDialog"; +export default WarehouseDeleteDialog; diff --git a/src/warehouses/components/WarehouseDeleteDialog/index.ts b/src/warehouses/components/WarehouseDeleteDialog/index.ts new file mode 100644 index 000000000..f8f68537d --- /dev/null +++ b/src/warehouses/components/WarehouseDeleteDialog/index.ts @@ -0,0 +1,2 @@ +export { default } from "./WarehouseDeleteDialog"; +export * from "./WarehouseDeleteDialog"; diff --git a/src/warehouses/components/WarehouseList/WarehouseList.tsx b/src/warehouses/components/WarehouseList/WarehouseList.tsx index 6220a8951..c8e7c4e3a 100644 --- a/src/warehouses/components/WarehouseList/WarehouseList.tsx +++ b/src/warehouses/components/WarehouseList/WarehouseList.tsx @@ -14,7 +14,7 @@ import { WarehouseFragment } from "@saleor/warehouses/types/WarehouseFragment"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import TablePagination from "@saleor/components/TablePagination"; -import { maybe, renderCollection } from "@saleor/misc"; +import { maybe, renderCollection, stopPropagation } from "@saleor/misc"; import { ListProps, SortPage } from "@saleor/types"; import { WarehouseListUrlSortField } from "@saleor/warehouses/urls"; import TableCellHeader from "@saleor/components/TableCellHeader"; @@ -153,7 +153,7 @@ const WarehouseList: React.FC = props => { onRemove(warehouse.id)} + onClick={stopPropagation(() => onRemove(warehouse.id))} > diff --git a/src/warehouses/mutations.ts b/src/warehouses/mutations.ts new file mode 100644 index 000000000..fa1da647b --- /dev/null +++ b/src/warehouses/mutations.ts @@ -0,0 +1,22 @@ +import gql from "graphql-tag"; + +import makeMutation from "@saleor/hooks/makeMutation"; +import { + WarehouseDelete, + WarehouseDeleteVariables +} from "./types/WarehouseDelete"; + +const deleteWarehouse = gql` + mutation WarehouseDelete($id: ID!) { + deleteWarehouse(id: $id) { + errors { + field + message + } + } + } +`; +export const useWarehouseDelete = makeMutation< + WarehouseDelete, + WarehouseDeleteVariables +>(deleteWarehouse); diff --git a/src/warehouses/types/WarehouseDelete.ts b/src/warehouses/types/WarehouseDelete.ts new file mode 100644 index 000000000..0e2aa5efa --- /dev/null +++ b/src/warehouses/types/WarehouseDelete.ts @@ -0,0 +1,26 @@ +/* tslint:disable */ +/* eslint-disable */ +// This file was automatically generated and should not be edited. + +// ==================================================== +// GraphQL mutation operation: WarehouseDelete +// ==================================================== + +export interface WarehouseDelete_deleteWarehouse_errors { + __typename: "Error"; + field: string | null; + message: string | null; +} + +export interface WarehouseDelete_deleteWarehouse { + __typename: "WarehouseDelete"; + errors: WarehouseDelete_deleteWarehouse_errors[] | null; +} + +export interface WarehouseDelete { + deleteWarehouse: WarehouseDelete_deleteWarehouse | null; +} + +export interface WarehouseDeleteVariables { + id: string; +} diff --git a/src/warehouses/urls.ts b/src/warehouses/urls.ts index 9864e5077..d84d2266a 100644 --- a/src/warehouses/urls.ts +++ b/src/warehouses/urls.ts @@ -18,7 +18,7 @@ export enum WarehouseListUrlFiltersEnum { query = "query" } export type WarehouseListUrlFilters = Filters; -export type WarehouseListUrlDialog = "remove" | TabActionDialog; +export type WarehouseListUrlDialog = "delete" | TabActionDialog; export enum WarehouseListUrlSortField { name = "name" } @@ -33,7 +33,7 @@ export const warehouseListUrl = (params?: WarehouseListUrlQueryParams) => warehouseListPath + "?" + stringifyQs(params); export const warehousePath = (id: string) => urlJoin(warehouseSection, id); -export type WarehouseUrlDialog = "remove"; +export type WarehouseUrlDialog = "delete"; export type WarehouseUrlQueryParams = Dialog & SingleAction; export const warehouseUrl = (id: string, params?: WarehouseUrlQueryParams) => warehousePath(encodeURIComponent(id)) + "?" + stringifyQs(params); diff --git a/src/warehouses/views/WarehouseList/WarehouseList.tsx b/src/warehouses/views/WarehouseList/WarehouseList.tsx index bc119d669..4609456a6 100644 --- a/src/warehouses/views/WarehouseList/WarehouseList.tsx +++ b/src/warehouses/views/WarehouseList/WarehouseList.tsx @@ -17,18 +17,20 @@ import useNotifier from "@saleor/hooks/useNotifier"; import useListSettings from "@saleor/hooks/useListSettings"; import { ListViews } from "@saleor/types"; import { WindowTitle } from "@saleor/components/WindowTitle"; -import { sectionNames } from "@saleor/intl"; +import { sectionNames, commonMessages } from "@saleor/intl"; import WarehouseListPage from "@saleor/warehouses/components/WarehouseListPage"; import SaveFilterTabDialog, { SaveFilterTabDialogFormData } from "@saleor/components/SaveFilterTabDialog"; import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog"; -import { maybe } from "@saleor/misc"; +import { maybe, getMutationStatus } from "@saleor/misc"; import { getSortParams } from "@saleor/utils/sort"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import { configurationMenuUrl } from "@saleor/configuration"; +import WarehouseDeleteDialog from "@saleor/warehouses/components/WarehouseDeleteDialog"; +import { useWarehouseDelete } from "@saleor/warehouses/mutations"; import { getSortQueryVariables } from "./sort"; import { getFilterVariables, @@ -65,6 +67,17 @@ const WarehouseList: React.FC = ({ params }) => { displayLoader: true, variables: queryVariables }); + const [deleteWarehouse, deleteWarehouseOpts] = useWarehouseDelete({ + onCompleted: data => { + if (data.deleteWarehouse.errors.length === 0) { + notify({ + text: intl.formatMessage(commonMessages.savedChanges) + }); + refetch(); + closeModal(); + } + } + }); const tabs = getFilterTabs(); @@ -113,6 +126,8 @@ const WarehouseList: React.FC = ({ params }) => { const handleSort = createSortHandler(navigate, warehouseListUrl, params); + const deleteTransitionState = getMutationStatus(deleteWarehouseOpts); + return ( <> @@ -133,12 +148,29 @@ const WarehouseList: React.FC = ({ params }) => { onAdd={() => navigate(warehouseAddUrl)} onNextPage={loadNextPage} onPreviousPage={loadPreviousPage} - onRemove={() => undefined} + onRemove={id => openModal("delete", { id })} onSort={handleSort} onUpdateListSettings={updateListSettings} onRowClick={id => () => navigate(warehouseUrl(id))} sort={getSortParams(params)} /> + + data.warehouses.edges.find(edge => edge.node.id === params.id).node + .name + )} + open={params.action === "delete"} + onClose={closeModal} + onConfirm={() => + deleteWarehouse({ + variables: { + id: params.id + } + }) + } + />