Skip to content

Commit

Permalink
wip: delete connection modal
Browse files Browse the repository at this point in the history
  • Loading branch information
sdisalvo-crd committed Mar 5, 2025
1 parent 2f32415 commit 4e4e85e
Show file tree
Hide file tree
Showing 8 changed files with 189 additions and 79 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,7 @@ import {
IconButton,
Tooltip,
} from "@mui/material";
import {
AddCircleOutlineOutlined,
DeleteOutline,
MoreVert,
VisibilityOutlined,
} from "@mui/icons-material";
import { MoreVert } from "@mui/icons-material";
import { EnhancedTableHead } from "./EnhancedTableHead";
import { EnhancedTableToolbar } from "./EnhancedTableToolbar";
import { useTable } from "./useTable";
Expand All @@ -31,7 +26,9 @@ import {
fetchContactCredentials,
} from "../../../../store/reducers/connectionsSlice";
import { RootState, AppDispatch } from "../../../../store";
import { Contact, Data } from "../ConnectionsTable/ConnectionsTable.types";
import { Contact, Data } from "../../../../types";
import { menuItems } from "./menuItems";
import { generateRows } from "./helpers";

const ConnectionsTable: React.FC = () => {
const dispatch = useDispatch<AppDispatch>();
Expand Down Expand Up @@ -65,25 +62,10 @@ const ConnectionsTable: React.FC = () => {
setFilteredContacts(filteredContacts);
}, [connectionsFilterBySearch, contacts]);

const generateRows = () => {
const rows = filteredContacts.map((contact) => {
const contactCredentials = credentials.filter(
(cred) => cred.contactId === contact.id
);
return {
id: contact.id,
name: contact.alias,
date: "2020-03-15T12:34:56Z", // TODO: Temporary hardcoded date
credentials: contactCredentials.length,
};
});
return rows;
};

const [rows, setRows] = useState<Data[]>([]);

useEffect(() => {
const generatedRows = generateRows();
const generatedRows = generateRows(filteredContacts, credentials);
setRows(generatedRows);
}, [filteredContacts, credentials]);

Expand Down Expand Up @@ -113,30 +95,6 @@ const ConnectionsTable: React.FC = () => {
</Tooltip>
);

const menuItems = [
{
label: i18n.t("pages.connections.viewDetails"),
action: () => console.log(i18n.t("pages.connections.viewDetails")),
icon: <VisibilityOutlined />,
className: "icon-left",
},
{
label: i18n.t("pages.connections.issueCredential"),
action: () => console.log(i18n.t("pages.connections.issueCredential")),
icon: <AddCircleOutlineOutlined />,
className: "icon-left",
},
{
className: "divider",
},
{
label: i18n.t("pages.connections.delete"),
action: () => console.log(i18n.t("pages.connections.delete")),
icon: <DeleteOutline />,
className: "icon-left action-delete",
},
];

return (
<Box sx={{ width: "100%" }}>
<Paper className="connections-table">
Expand Down Expand Up @@ -174,9 +132,7 @@ const ConnectionsTable: React.FC = () => {
<Checkbox
color="primary"
checked={isItemSelected}
inputProps={{
"aria-labelledby": labelId,
}}
inputProps={{ "aria-labelledby": labelId }}
/>
</TableCell>
<TableCell
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,42 +9,53 @@ interface EnhancedTableToolbarProps {

const EnhancedTableToolbar: React.FC<EnhancedTableToolbarProps> = (props) => {
const { numSelected } = props;
const handleOpenModal = () =>
setState((prevState) => ({ ...prevState, openModal: true }));
return (
<Toolbar className="connection-table-toolbar">
<div className="table-left">
<IconButton>
<FilterList />
<Typography
color="inherit"
variant="subtitle1"
component="div"
>
{i18n.t("pages.connections.filter")}
</Typography>
</IconButton>
</div>
<div className="table-right">
{numSelected > 0 && (
<>
<>
<Toolbar className="connection-table-toolbar">
<div className="table-left">
<IconButton>
<FilterList />
<Typography
color="inherit"
variant="subtitle1"
component="div"
>
{numSelected} {i18n.t("pages.connections.selected")}
{i18n.t("pages.connections.filter")}
</Typography>
<Button
variant="contained"
aria-label="delete connections"
startIcon={<DeleteOutline />}
className="delete-connections-button"
>
{i18n.t("pages.connections.delete")}
</Button>
</>
)}
</div>
</Toolbar>
</IconButton>
</div>
<div className="table-right">
{numSelected > 0 && (
<>
<Typography
color="inherit"
variant="subtitle1"
component="div"
>
{numSelected} {i18n.t("pages.connections.selected")}
</Typography>
<Button
variant="contained"
aria-label="delete connections"
startIcon={<DeleteOutline />}
className="delete-connections-button"
onClick={handleOpenModal}
>
{i18n.t("pages.connections.delete")}
</Button>
</>
)}
</div>
</Toolbar>
{/* <DeleteConnectionModal
openModal={state.openModal}
setOpenModal={(open) =>
setState((prevState) => ({ ...prevState, openModal: open }))
}
/> */}
</>
);
};

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { Contact, Credential, Data } from "../../../../types";
import axios from "axios";
import { config } from "../../../../config";
import { fetchContacts } from "../../../../store/reducers/connectionsSlice";
import { AppDispatch } from "../../../../store";

const generateRows = (
filteredContacts: Contact[],
credentials: Credential[]
): Data[] => {
return filteredContacts.map((contact) => {
const contactCredentials = credentials.filter(
(cred) => cred.contactId === contact.id
);
return {
id: contact.id,
name: contact.alias,
date: "2020-03-15T12:34:56Z", // Temporary hardcoded date
credentials: contactCredentials.length,
};
});
};

const handleDeleteContact = async (id: string, dispatch: AppDispatch) => {
await axios.delete(`${config.endpoint}${config.path.deleteContact}?id=${id}`);
await dispatch(fetchContacts());
};

export { generateRows, handleDeleteContact };
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from "react";
import {
VisibilityOutlined,
AddCircleOutlineOutlined,
DeleteOutline,
} from "@mui/icons-material";
import { i18n } from "../../../../i18n";

export const menuItems = [
{
label: i18n.t("pages.connections.viewDetails"),
action: () => console.log(i18n.t("pages.connections.viewDetails")),
icon: React.createElement(VisibilityOutlined),
className: "icon-left",
},
{
label: i18n.t("pages.connections.issueCredential"),
action: () => console.log(i18n.t("pages.connections.issueCredential")),
icon: React.createElement(AddCircleOutlineOutlined),
className: "icon-left",
},
{
className: "divider",
},
{
label: i18n.t("pages.connections.delete"),
action: () => console.log(i18n.t("pages.connections.delete")),
icon: React.createElement(DeleteOutline),
className: "icon-left action-delete",
},
];
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.delete-connection-modal-container {
position: "absolute";
top: 0;
left: 0;
width: 29.25rem;
height: 13.25rem;
padding: 1.25rem;

button {
border-radius: 1rem;
text-transform: none;
color: var(--text-color);

&:hover,
&:active {
background-color: var(--color-primary-200);
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { DeleteConnectionModalProps } from "./DeleteConnectionModal.types";
import "./HolderModal.scss";
import Grid from "@mui/material/Grid2";
import { ChevronLeft } from "@mui/icons-material";
import { Modal, Fade, Box, IconButton, Typography } from "@mui/material";

const DeleteConnectionModal = ({
openModal,
setOpenModal,
}: DeleteConnectionModalProps) => {
const handleCloseModal = () => setOpenModal(false);

return (
<Modal
open={openModal}
onClose={handleCloseModal}
aria-labelledby="delete-connection-modal-title"
aria-describedby="delete-connection-modal-description"
>
<Fade in={openModal}>
<Box
color="text.primary"
bgcolor="background.default"
className="delete-connection-modal-container"
>
<Grid
container
spacing={1}
>
<Grid size={1}>
<IconButton
size="large"
aria-label="close modal"
disableRipple
onClick={handleCloseModal}
>
<ChevronLeft />
</IconButton>
</Grid>
<Grid size={10}>
<Typography
id="delete-connection-modal-title"
variant="h6"
component="h2"
>
Text in a modal
</Typography>
</Grid>
<Grid size={1} />
</Grid>
</Box>
</Fade>
</Modal>
);
};

export { DeleteConnectionModal };
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
interface DeleteConnectionModalProps {
openModal: boolean;
setOpenModal: (openModal: boolean) => void;
}

export type { DeleteConnectionModalProps };
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./DeleteConnectionModal";

0 comments on commit 4e4e85e

Please sign in to comment.