add delete collection ui

client/src/components/customDialog/DeleteDialogTemplate.tsx

@@ -0,0 +1,116 @@
+import {
+  DialogActions,
+  DialogContent,
+  makeStyles,
+  TextField,
+  Theme,
+  Typography,
+} from '@material-ui/core';
+import { ChangeEvent, FC, useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import CustomButton from '../../components/customButton/CustomButton';
+import CustomDialogTitle from '../../components/customDialog/CustomDialogTitle';
+import { DeleteDialogContentType } from '../../components/customDialog/Types';
+import { rootContext } from '../../context/Root';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    maxWidth: '480px',
+  },
+  mb: {
+    marginBottom: theme.spacing(2.5),
+  },
+  btnWrapper: {
+    display: 'flex',
+  },
+  label: {
+    display: 'none',
+  },
+  btnLabel: {
+    fontWeight: 'bold',
+  },
+  input: {
+    padding: '10px 12px',
+  },
+  cancelBtn: {
+    color: '#dc0e0e',
+  },
+}));
+
+const DeleteTemplate: FC<DeleteDialogContentType> = props => {
+  const { title, text, label, handleDelete, handleCancel = () => {} } = props;
+  const { handleCloseDialog } = useContext(rootContext);
+  const classes = useStyles();
+  const { t: dialogTrans } = useTranslation('dialog');
+  const { t: btnTrans } = useTranslation('btn');
+
+  const [value, setValue] = useState<string>('');
+  const [deleteReady, setDeleteReady] = useState<boolean>(false);
+
+  const onCancelClick = () => {
+    handleCloseDialog();
+    handleCancel();
+  };
+
+  const onDeleteClick = () => {
+    handleDelete();
+  };
+
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setValue(value);
+
+    setDeleteReady(value.toLowerCase() === label.toLowerCase());
+  };
+
+  return (
+    <div className={classes.root}>
+      <CustomDialogTitle classes={{ root: classes.mb }} onClose={onCancelClick}>
+        {title}
+      </CustomDialogTitle>
+
+      <DialogContent>
+        <Typography variant="body1">{text}</Typography>
+        <Typography variant="body1" className={classes.mb}>
+          {dialogTrans('deleteTipAction')}
+          <strong
+            className={classes.btnLabel}
+          >{` ${label.toLowerCase()} `}</strong>
+          {dialogTrans('deleteTipPurpose')}
+        </Typography>
+        <TextField
+          value={value}
+          onChange={onChange}
+          InputLabelProps={{
+            classes: {
+              root: classes.label,
+            },
+          }}
+          InputProps={{
+            classes: {
+              input: classes.input,
+            },
+          }}
+          variant="filled"
+          fullWidth={true}
+        />
+      </DialogContent>
+
+      <DialogActions className={classes.btnWrapper}>
+        <CustomButton onClick={onCancelClick} className={classes.cancelBtn}>
+          {btnTrans('cancel')}
+        </CustomButton>
+        <CustomButton
+          variant="contained"
+          onClick={onDeleteClick}
+          color="secondary"
+          disabled={!deleteReady}
+        >
+          {label}
+        </CustomButton>
+      </DialogActions>
+    </div>
+  );
+};
+
+export default DeleteTemplate;

client/src/i18n/cn/collection.ts

@@ -8,6 +8,8 @@ const collectionTrans = {
   create: 'Create Collection',
   delete: 'delete',
 
+  collection: 'Collection',
+
   // table
   id: 'ID',
   name: 'Name',
@@ -37,6 +39,10 @@ const collectionTrans = {
   releaseContent:
     'You are trying to release a collection with data. Please be aware that the data will no longer be available for search.',
   releaseConfirmLabel: 'Release',
+
+  // delete dialog
+  deleteWarning:
+    'You are trying to delete a collection with data. This action cannot be undone.',
 };
 
 export default collectionTrans;

client/src/i18n/cn/dialog.ts

@@ -0,0 +1,7 @@
+const dialogTrans = {
+  deleteTipAction: 'Type',
+  deleteTipPurpose: 'to confirm.',
+  deleteTitle: `Delete {{type}}`,
+};
+
+export default dialogTrans;

client/src/i18n/en/collection.ts

@@ -8,6 +8,8 @@ const collectionTrans = {
   create: 'Create Collection',
   delete: 'delete',
 
+  collection: 'Collection',
+
   // table
   id: 'ID',
   name: 'Name',
@@ -37,6 +39,10 @@ const collectionTrans = {
   releaseContent:
     'You are trying to release a collection with data. Please be aware that the data will no longer be available for search.',
   releaseConfirmLabel: 'Release',
+
+  // delete dialog
+  deleteWarning:
+    'You are trying to delete a collection with data. This action cannot be undone.',
 };
 
 export default collectionTrans;

client/src/i18n/en/dialog.ts

@@ -0,0 +1,7 @@
+const dialogTrans = {
+  deleteTipAction: 'Type',
+  deleteTipPurpose: 'to confirm.',
+  deleteTitle: `Delete {{type}}`,
+};
+
+export default dialogTrans;

client/src/i18n/index.ts

@@ -13,6 +13,8 @@ import overviewCn from './cn/overview';
 import overviewEn from './en/overview';
 import collectionCn from './cn/collection';
 import collectionEn from './en/collection';
+import dialogCn from './cn/dialog';
+import dialogEn from './en/dialog';
 
 export const resources = {
   cn: {
@@ -22,6 +24,7 @@ export const resources = {
     nav: navCn,
     overview: overviewCn,
     collection: collectionCn,
+    dialog: dialogCn,
   },
   en: {
     translation: commonEn,
@@ -30,6 +33,7 @@ export const resources = {
     nav: navEn,
     overview: overviewEn,
     collection: collectionEn,
+    dialog: dialogEn,
   },
 };
 

client/src/pages/collections/Collections.tsx

@@ -16,6 +16,7 @@ import StatusIcon from '../../components/status/StatusIcon';
 import CustomToolTip from '../../components/customToolTip/CustomToolTip';
 import { rootContext } from '../../context/Root';
 import CreateCollection from './Create';
+import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
 
 const useStyles = makeStyles((theme: Theme) => ({
   emptyWrapper: {
@@ -51,6 +52,8 @@ const Collections = () => {
 
   const { setDialog, handleCloseDialog } = useContext(rootContext);
   const { t } = useTranslation('collection');
+  const { t: btnTrans } = useTranslation('btn');
+  const { t: dialogTrans } = useTranslation('dialog');
 
   const classes = useStyles();
 
@@ -102,6 +105,10 @@ const Collections = () => {
 
   const handleLoad = async (data: CollectionView) => {};
 
+  const handleDelete = async () => {
+    console.log('selected', selectedCollections);
+  };
+
   const handleAction = (data: CollectionView) => {
     const actionType: 'release' | 'load' =
       data.status === StatusEnum.loaded ? 'release' : 'load';
@@ -162,7 +169,20 @@ const Collections = () => {
     {
       type: 'iconBtn',
       onClick: () => {
-        console.log('delete collections');
+        setDialog({
+          open: true,
+          type: 'custom',
+          params: {
+            component: (
+              <DeleteTemplate
+                label={btnTrans('delete')}
+                title={dialogTrans('deleteTitle', { type: t('collection') })}
+                text={t('deleteWarning')}
+                handleDelete={handleDelete}
+              />
+            ),
+          },
+        });
       },
       label: t('delete'),
       icon: 'delete',