#657 Usuwanie instancji listu z modalem potwierdzającym (#749)

* issue/657 remove letter instance from list

Co-authored-by: Bartosz Gryta <gtktsc@gmail.com>

* issue/657 show modal before delete letter instance

Co-authored-by: Bartosz Gryta <gtktsc@gmail.com>

* issue/657 added confirmation modal to tags delete operation

Co-authored-by: Bartosz Gryta <gtktsc@gmail.com>

Co-authored-by: Bartosz Gryta <gtktsc@gmail.com>

frontend-project/src/components/Modals/Confirmation/index.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Button } from 'antd';
+import { localeKeys } from '@/locales/pl-PL';
+import { formatMessage } from 'umi-plugin-react/locale';
+
+type ConfirmationProps<T> = {
+ title?: string;
+ onSuccess?: () => void;
+ onFailure?: (args: T) => void;
+};
+
+type ConfirmationModalProps<T> = ConfirmationProps<T> & {
+ title: string;
+ submitArgs: T;
+ hideModal: () => void;
+ onSubmit: () => void;
+};
+
+const ConfirmationModal = <T extends {}>({
+ onSubmit,
+ title,
+ onSuccess,
+ onFailure,
+ hideModal,
+ submitArgs,
+}: ConfirmationModalProps<T>) => {
+ const [isModalVisible, setIsModalVisible] = useState(true);
+ const [isInProgress, setIsInProgress] = useState(false);
+
+ useEffect(() => {
+ if (!isModalVisible) {
+ hideModal();
+ }
+ }, [isModalVisible]);
+
+ const handleOk = async () => {
+ setIsInProgress(true);
+ try {
+ await onSubmit();
+ setIsModalVisible(false);
+ onSuccess();
+ } catch (error) {
+ if (onFailure) {
+ onFailure(submitArgs);
+ }
+ } finally {
+ setIsInProgress(false);
+ }
+ };
+
+ const handleCancel = () => {
+ setIsModalVisible(false);
+ };
+
+ return (
+ <>
+ <Modal
+ title={title}
+ visible={isModalVisible}
+ onOk={handleOk}
+ onCancel={handleCancel}
+ footer={[
+ <Button key="confirmation-button-cancel" disabled={isInProgress} onClick={handleCancel}>
+ {formatMessage({ id: localeKeys.modal.cancel })}
+ </Button>,
+ <Button
+ key="confirmation-button-confirm"
+ type="primary"
+ disabled={isInProgress}
+ loading={isInProgress}
+ onClick={handleOk}
+ >
+ {formatMessage({ id: localeKeys.modal.confirm })}
+ </Button>,
+ ]}
+ >
+ <p>{formatMessage({ id: localeKeys.modal.description })}</p>
+ </Modal>
+ </>
+ );
+};
+
+export const useConfirmationModal = <T extends {}>(
+ props: ConfirmationProps<T>,
+ onSubmit: (args: T) => void,
+) => {
+ const [modal, setModal] = useState(null);
+
+ const hideModal = () => setModal(null);
+
+ const showModal = (args: T, title?: string) => {
+ setModal(
+ <ConfirmationModal
+ {...props}
+ {...(title ? { title } : undefined)}
+ submitArgs={args}
+ onSubmit={() => onSubmit(args)}
+ hideModal={hideModal}
+ />,
+ );
+ };
+
+ return [modal, showModal];
+};
+
+export default ConfirmationModal;

frontend-project/src/locales/en-US.ts

@@ -1,3 +1,4 @@
+import { tagsLocale } from '@/pages/tags/locales/en-US';
 import component from './en-US/component';
 import globalHeader from './en-US/globalHeader';
 import { menuLocale } from './en-US/menu';
@@ -8,7 +9,6 @@ import BaseLocales from './pl-PL';
 import { structuredLocale } from '../utils/structedLocale';
 import { casesLocale } from '../pages/cases/locales/en-US';
 import { globalsLocale } from './en-US/globals';
-import { tagsLocale } from '@/pages/tags/locales/en-US';
 
 const [labels] = structuredLocale({
  ...menuLocale,

frontend-project/src/locales/en-US/globals.ts

@@ -1,5 +1,5 @@
 export const globalsLocale = {
- error: 'Błąd',
+ error: 'Error',
  lists: {
  edit: 'Edit',
  delete: 'Delete',
@@ -12,4 +12,9 @@ export const globalsLocale = {
  save: 'Save',
  reset: 'Reset',
  },
+ modal: {
+ confirm: 'Confirm',
+ cancel: 'Cancel',
+ description: 'Are you sure you want to proceed?',
+ },
 };

frontend-project/src/locales/pl-PL.ts

@@ -1,3 +1,4 @@
+import { tagsLocale } from '@/pages/tags/locales/pl-PL';
 import component from './pl-PL/component';
 import globalHeader from './pl-PL/globalHeader';
 import pwa from './pl-PL/pwa';
@@ -7,7 +8,6 @@ import { menuLocale } from './pl-PL/menu';
 import { structuredLocale } from '../utils/structedLocale';
 import { casesLocale } from '../pages/cases/locales/pl-PL';
 import { globalsLocale } from './pl-PL/globals';
-import { tagsLocale } from '@/pages/tags/locales/pl-PL';
 
 const [labels, keys] = structuredLocale({
  ...menuLocale,

frontend-project/src/locales/pl-PL/globals.ts

@@ -12,4 +12,9 @@ export const globalsLocale = {
  save: 'Zapisz',
  reset: 'Wyczyść',
  },
+ modal: {
+ confirm: 'Potwierdź',
+ cancel: 'Anuluj',
+ description: 'Czy chcesz kontynuować?',
+ },
 };

frontend-project/src/models/letters.ts

@@ -0,0 +1,8 @@
+import { Letter } from '@/services/definitions';
+import { LettersService } from '@/services/letters';
+import { ReadWriteReduxResource } from '@/utils/reduxModel';
+
+export default ReadWriteReduxResource<Letter>({
+ namespace: 'letters',
+ service: LettersService,
+});

frontend-project/src/pages/cases/CasesDetailView.tsx

@@ -6,11 +6,11 @@ import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import { Institution, User, Tag, Case, Feature } from '@/services/definitions';
 import { ReduxResourceState } from '@/utils/reduxModel';
 import router from 'umi/router';
-import { localeKeys } from '../../locales/pl-PL';
 import { RouterTypes } from 'umi';
 import { ServiceResponse } from '@/services/service';
 import smallEodSDK from '@/utils/sdk';
 import { openNotificationWithIcon } from '@/models/global';
+import { localeKeys } from '../../locales/pl-PL';
 
 interface CasesDetailViewProps {
  cases: ReduxResourceState<Case>;

frontend-project/src/pages/letters/list/index.tsx

@@ -1,16 +1,66 @@
-import { ProColumns } from '@ant-design/pro-table';
-import React, { FC } from 'react';
+import { ActionType, ProColumns } from '@ant-design/pro-table';
+import React, { FC, useRef } from 'react';
 import { formatMessage } from 'umi-plugin-react/locale';
 
-import { fetchLettersPage } from '@/services/letters';
 import { Letter } from '@/services/definitions';
 import Table from '@/components/Table';
 import ChannelName from '@/components/Table/ChannelName';
 import InstitutionName from '@/components/Table/InstitutionName';
 import CaseName from '@/components/Table/CaseName';
 import DocumentTypeName from '@/components/Table/DocumentTypeName';
+import { Button, Space, Tooltip } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
+import { useDispatch } from 'dva';
+import { openNotificationWithIcon } from '@/models/global';
+import { ServiceResponse } from '@/services/service';
+import { PaginationParams, PaginationResponse } from '@/services/common';
+import { LettersService } from '@/services/letters';
+import { localeKeys } from '@/locales/pl-PL';
+import { useConfirmationModal } from '@/components/Modals/Confirmation';
 
 const TableList: FC<{}> = () => {
+ const dispatch = useDispatch();
+ const tableActionRef = useRef<ActionType>();
+
+ function onRemove(id: number): Promise<void> {
+ return new Promise((resolve, reject) => {
+ dispatch({
+ type: 'letters/remove',
+ payload: {
+ id,
+ onResponse: (response: ServiceResponse<number>) =>
+ response.status === 'failed' ? reject() : resolve(),
+ },
+ });
+ });
+ }
+
+ const [modal, showModal] = useConfirmationModal(
+ {
+ onSuccess: () => tableActionRef.current.reload(),
+ onFailure: id =>
+ openNotificationWithIcon(
+ 'error',
+ formatMessage({ id: localeKeys.error }),
+ `${formatMessage({ id: 'letters-list.table.notification.remove' })} ${id}`,
+ ),
+ },
+ onRemove,
+ );
+
+ async function fetchPage(props: PaginationParams): Promise<PaginationResponse<Letter>> {
+ const response = await LettersService.fetchPage(props);
+ if (response.status === 'failed') {
+ openNotificationWithIcon(
+ 'error',
+ formatMessage({ id: localeKeys.error }),
+ formatMessage({ id: localeKeys.lists.failedDownload }),
+ );
+ return { data: [], total: 0 };
+ }
+ return response.data;
+ }
+
  const columns: ProColumns<Letter>[] = [
  {
  title: formatMessage({ id: 'letters-list.table.columns.documentType.title' }),
@@ -70,9 +120,43 @@ const TableList: FC<{}> = () => {
  dataIndex: 'attachments',
  render: (attachments: []) => attachments.length,
  },
+ {
+ title: formatMessage({ id: localeKeys.lists.actions }),
+ dataIndex: 'id',
+ render: (_, { id, referenceNumber }: Letter) => (
+ <Space>
+ <Tooltip title={formatMessage({ id: localeKeys.lists.delete })}>
+ <Button
+ type="default"
+ danger
+ shape="circle"
+ icon={<DeleteOutlined />}
+ onClick={() =>
+ showModal(
+ id,
+ formatMessage(
+ {
+ id: 'letters-list.table.modal.remove.title',
+ },
+ {
+ referenceNumber: referenceNumber || '',
+ },
+ ),
+ )
+ }
+ />
+ </Tooltip>
+ </Space>
+ ),
+ },
  ];
 
- return <Table type="letters" columns={columns} fetchData={fetchLettersPage} />;
+ return (
+ <>
+ <Table type="letters" columns={columns} actionRef={tableActionRef} fetchData={fetchPage} />
+ {modal}
+ </>
+ );
 };
 
 export default TableList;

frontend-project/src/pages/letters/list/locales/en-US.ts

@@ -15,4 +15,6 @@ export default {
  'letters-list.table.total': 'Total',
  'letters-list.table.direction.in': 'received',
  'letters-list.table.direction.out': 'sent',
+ 'letters-list.table.notification.remove': 'Cannot delete list',
+ 'letters-list.table.modal.remove.title': 'Do you want to delete {referenceNumber} letter?',
 };

frontend-project/src/pages/letters/list/locales/pl-PL.ts

@@ -15,4 +15,6 @@ export default {
  'letters-list.table.total': 'Łącznie',
  'letters-list.table.direction.in': 'odebrane',
  'letters-list.table.direction.out': 'wysłane',
+ 'letters-list.table.notification.remove': 'Nie udało się usuąć listu',
+ 'letters-list.table.modal.remove.title': 'Czy chcesz usunąć list {referenceNumber}?',
 };

frontend-project/src/pages/tags/TagsDetailView.tsx

@@ -6,11 +6,11 @@ import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import { Tag } from '@/services/definitions';
 import { ReduxResourceState } from '@/utils/reduxModel';
 import router from 'umi/router';
-import { localeKeys } from '../../locales/pl-PL';
 import { RouterTypes } from 'umi';
 import { ServiceResponse } from '@/services/service';
 import smallEodSDK from '@/utils/sdk';
 import { openNotificationWithIcon } from '@/models/global';
+import { localeKeys } from '../../locales/pl-PL';
 
 interface TagsDetailViewProps {
  tags: ReduxResourceState<Tag>;