Skip to content

Commit 4e4e85e

Browse files
sdisalvo-crdsdisalvo-crd
committed
wip: delete connection modal
1 parent 2f32415 commit 4e4e85e

File tree

8 files changed

+189
-79
lines changed

8 files changed

+189
-79
lines changed

‎services/credential-server-ui/src/pages/Connections/components/ConnectionsTable/ConnectionsTable.tsx

Lines changed: 6 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,7 @@ import {
1212
IconButton,
1313
Tooltip,
1414
} from "@mui/material";
15-
import {
16-
AddCircleOutlineOutlined,
17-
DeleteOutline,
18-
MoreVert,
19-
VisibilityOutlined,
20-
} from "@mui/icons-material";
15+
import { MoreVert } from "@mui/icons-material";
2116
import { EnhancedTableHead } from "./EnhancedTableHead";
2217
import { EnhancedTableToolbar } from "./EnhancedTableToolbar";
2318
import { useTable } from "./useTable";
@@ -31,7 +26,9 @@ import {
3126
fetchContactCredentials,
3227
} from "../../../../store/reducers/connectionsSlice";
3328
import { RootState, AppDispatch } from "../../../../store";
34-
import { Contact, Data } from "../ConnectionsTable/ConnectionsTable.types";
29+
import { Contact, Data } from "../../../../types";
30+
import { menuItems } from "./menuItems";
31+
import { generateRows } from "./helpers";
3532

3633
const ConnectionsTable: React.FC = () => {
3734
const dispatch = useDispatch<AppDispatch>();
@@ -65,25 +62,10 @@ const ConnectionsTable: React.FC = () => {
6562
setFilteredContacts(filteredContacts);
6663
}, [connectionsFilterBySearch, contacts]);
6764

68-
const generateRows = () => {
69-
const rows = filteredContacts.map((contact) => {
70-
const contactCredentials = credentials.filter(
71-
(cred) => cred.contactId === contact.id
72-
);
73-
return {
74-
id: contact.id,
75-
name: contact.alias,
76-
date: "2020-03-15T12:34:56Z", // TODO: Temporary hardcoded date
77-
credentials: contactCredentials.length,
78-
};
79-
});
80-
return rows;
81-
};
82-
8365
const [rows, setRows] = useState<Data[]>([]);
8466

8567
useEffect(() => {
86-
const generatedRows = generateRows();
68+
const generatedRows = generateRows(filteredContacts, credentials);
8769
setRows(generatedRows);
8870
}, [filteredContacts, credentials]);
8971

@@ -113,30 +95,6 @@ const ConnectionsTable: React.FC = () => {
11395
</Tooltip>
11496
);
11597

116-
const menuItems = [
117-
{
118-
label: i18n.t("pages.connections.viewDetails"),
119-
action: () => console.log(i18n.t("pages.connections.viewDetails")),
120-
icon: <VisibilityOutlined />,
121-
className: "icon-left",
122-
},
123-
{
124-
label: i18n.t("pages.connections.issueCredential"),
125-
action: () => console.log(i18n.t("pages.connections.issueCredential")),
126-
icon: <AddCircleOutlineOutlined />,
127-
className: "icon-left",
128-
},
129-
{
130-
className: "divider",
131-
},
132-
{
133-
label: i18n.t("pages.connections.delete"),
134-
action: () => console.log(i18n.t("pages.connections.delete")),
135-
icon: <DeleteOutline />,
136-
className: "icon-left action-delete",
137-
},
138-
];
139-
14098
return (
14199
<Box sx={{ width: "100%" }}>
142100
<Paper className="connections-table">
@@ -174,9 +132,7 @@ const ConnectionsTable: React.FC = () => {
174132
<Checkbox
175133
color="primary"
176134
checked={isItemSelected}
177-
inputProps={{
178-
"aria-labelledby": labelId,
179-
}}
135+
inputProps={{ "aria-labelledby": labelId }}
180136
/>
181137
</TableCell>
182138
<TableCell

‎services/credential-server-ui/src/pages/Connections/components/ConnectionsTable/EnhancedTableToolbar.tsx

Lines changed: 40 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,42 +9,53 @@ interface EnhancedTableToolbarProps {
99

1010
const EnhancedTableToolbar: React.FC<EnhancedTableToolbarProps> = (props) => {
1111
const { numSelected } = props;
12+
const handleOpenModal = () =>
13+
setState((prevState) => ({ ...prevState, openModal: true }));
1214
return (
13-
<Toolbar className="connection-table-toolbar">
14-
<div className="table-left">
15-
<IconButton>
16-
<FilterList />
17-
<Typography
18-
color="inherit"
19-
variant="subtitle1"
20-
component="div"
21-
>
22-
{i18n.t("pages.connections.filter")}
23-
</Typography>
24-
</IconButton>
25-
</div>
26-
<div className="table-right">
27-
{numSelected > 0 && (
28-
<>
15+
<>
16+
<Toolbar className="connection-table-toolbar">
17+
<div className="table-left">
18+
<IconButton>
19+
<FilterList />
2920
<Typography
3021
color="inherit"
3122
variant="subtitle1"
3223
component="div"
3324
>
34-
{numSelected} {i18n.t("pages.connections.selected")}
25+
{i18n.t("pages.connections.filter")}
3526
</Typography>
36-
<Button
37-
variant="contained"
38-
aria-label="delete connections"
39-
startIcon={<DeleteOutline />}
40-
className="delete-connections-button"
41-
>
42-
{i18n.t("pages.connections.delete")}
43-
</Button>
44-
</>
45-
)}
46-
</div>
47-
</Toolbar>
27+
</IconButton>
28+
</div>
29+
<div className="table-right">
30+
{numSelected > 0 && (
31+
<>
32+
<Typography
33+
color="inherit"
34+
variant="subtitle1"
35+
component="div"
36+
>
37+
{numSelected} {i18n.t("pages.connections.selected")}
38+
</Typography>
39+
<Button
40+
variant="contained"
41+
aria-label="delete connections"
42+
startIcon={<DeleteOutline />}
43+
className="delete-connections-button"
44+
onClick={handleOpenModal}
45+
>
46+
{i18n.t("pages.connections.delete")}
47+
</Button>
48+
</>
49+
)}
50+
</div>
51+
</Toolbar>
52+
{/* <DeleteConnectionModal
53+
openModal={state.openModal}
54+
setOpenModal={(open) =>
55+
setState((prevState) => ({ ...prevState, openModal: open }))
56+
}
57+
/> */}
58+
</>
4859
);
4960
};
5061

‎services/credential-server-ui/src/pages/Connections/components/ConnectionsTable/helpers.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Contact, Credential, Data } from "../../../../types";
2+
import axios from "axios";
3+
import { config } from "../../../../config";
4+
import { fetchContacts } from "../../../../store/reducers/connectionsSlice";
5+
import { AppDispatch } from "../../../../store";
6+
7+
const generateRows = (
8+
filteredContacts: Contact[],
9+
credentials: Credential[]
10+
): Data[] => {
11+
return filteredContacts.map((contact) => {
12+
const contactCredentials = credentials.filter(
13+
(cred) => cred.contactId === contact.id
14+
);
15+
return {
16+
id: contact.id,
17+
name: contact.alias,
18+
date: "2020-03-15T12:34:56Z", // Temporary hardcoded date
19+
credentials: contactCredentials.length,
20+
};
21+
});
22+
};
23+
24+
const handleDeleteContact = async (id: string, dispatch: AppDispatch) => {
25+
await axios.delete(`${config.endpoint}${config.path.deleteContact}?id=${id}`);
26+
await dispatch(fetchContacts());
27+
};
28+
29+
export { generateRows, handleDeleteContact };

‎services/credential-server-ui/src/pages/Connections/components/ConnectionsTable/menuItems.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from "react";
2+
import {
3+
VisibilityOutlined,
4+
AddCircleOutlineOutlined,
5+
DeleteOutline,
6+
} from "@mui/icons-material";
7+
import { i18n } from "../../../../i18n";
8+
9+
export const menuItems = [
10+
{
11+
label: i18n.t("pages.connections.viewDetails"),
12+
action: () => console.log(i18n.t("pages.connections.viewDetails")),
13+
icon: React.createElement(VisibilityOutlined),
14+
className: "icon-left",
15+
},
16+
{
17+
label: i18n.t("pages.connections.issueCredential"),
18+
action: () => console.log(i18n.t("pages.connections.issueCredential")),
19+
icon: React.createElement(AddCircleOutlineOutlined),
20+
className: "icon-left",
21+
},
22+
{
23+
className: "divider",
24+
},
25+
{
26+
label: i18n.t("pages.connections.delete"),
27+
action: () => console.log(i18n.t("pages.connections.delete")),
28+
icon: React.createElement(DeleteOutline),
29+
className: "icon-left action-delete",
30+
},
31+
];

‎services/credential-server-ui/src/pages/Connections/components/DeleteConnectionModal/DeleteConnectionModal.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.delete-connection-modal-container {
2+
position: "absolute";
3+
top: 0;
4+
left: 0;
5+
width: 29.25rem;
6+
height: 13.25rem;
7+
padding: 1.25rem;
8+
9+
button {
10+
border-radius: 1rem;
11+
text-transform: none;
12+
color: var(--text-color);
13+
14+
&:hover,
15+
&:active {
16+
background-color: var(--color-primary-200);
17+
}
18+
}
19+
}

‎services/credential-server-ui/src/pages/Connections/components/DeleteConnectionModal/DeleteConnectionModal.tsx

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { DeleteConnectionModalProps } from "./DeleteConnectionModal.types";
2+
import "./HolderModal.scss";
3+
import Grid from "@mui/material/Grid2";
4+
import { ChevronLeft } from "@mui/icons-material";
5+
import { Modal, Fade, Box, IconButton, Typography } from "@mui/material";
6+
7+
const DeleteConnectionModal = ({
8+
openModal,
9+
setOpenModal,
10+
}: DeleteConnectionModalProps) => {
11+
const handleCloseModal = () => setOpenModal(false);
12+
13+
return (
14+
<Modal
15+
open={openModal}
16+
onClose={handleCloseModal}
17+
aria-labelledby="delete-connection-modal-title"
18+
aria-describedby="delete-connection-modal-description"
19+
>
20+
<Fade in={openModal}>
21+
<Box
22+
color="text.primary"
23+
bgcolor="background.default"
24+
className="delete-connection-modal-container"
25+
>
26+
<Grid
27+
container
28+
spacing={1}
29+
>
30+
<Grid size={1}>
31+
<IconButton
32+
size="large"
33+
aria-label="close modal"
34+
disableRipple
35+
onClick={handleCloseModal}
36+
>
37+
<ChevronLeft />
38+
</IconButton>
39+
</Grid>
40+
<Grid size={10}>
41+
<Typography
42+
id="delete-connection-modal-title"
43+
variant="h6"
44+
component="h2"
45+
>
46+
Text in a modal
47+
</Typography>
48+
</Grid>
49+
<Grid size={1} />
50+
</Grid>
51+
</Box>
52+
</Fade>
53+
</Modal>
54+
);
55+
};
56+
57+
export { DeleteConnectionModal };

‎services/credential-server-ui/src/pages/Connections/components/DeleteConnectionModal/DeleteConnectionModal.types.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
interface DeleteConnectionModalProps {
2+
openModal: boolean;
3+
setOpenModal: (openModal: boolean) => void;
4+
}
5+
6+
export type { DeleteConnectionModalProps };

‎services/credential-server-ui/src/pages/Connections/components/DeleteConnectionModal/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./DeleteConnectionModal";

0 commit comments

Comments
 (0)