From 57a40175ebb5124c9c12d9b2f563a05582e5627c Mon Sep 17 00:00:00 2001
From: Mel <80449420+melpsh@users.noreply.github.com>
Date: Wed, 1 Jan 2025 19:28:18 -0800
Subject: [PATCH 1/2] added a modal for sending invitation
---
.../components/Modals/InviteUser/index.tsx | 164 ++++++++++++++++++
.../pages/SettingsPage/Team/index.tsx | 21 ++-
2 files changed, 183 insertions(+), 2 deletions(-)
create mode 100644 Clients/src/presentation/components/Modals/InviteUser/index.tsx
diff --git a/Clients/src/presentation/components/Modals/InviteUser/index.tsx b/Clients/src/presentation/components/Modals/InviteUser/index.tsx
new file mode 100644
index 00000000..286abeac
--- /dev/null
+++ b/Clients/src/presentation/components/Modals/InviteUser/index.tsx
@@ -0,0 +1,164 @@
+/**
+ * A modal component that displays a form for inviting a user.
+ *
+ * @component
+ * @param {InviteUserModalProps} props - The properties for the InviteUserModal component.
+ * @param {boolean} props.isOpen - A boolean indicating whether the modal is open.
+ * @param {function} props.setIsOpen - A function to set the modal's open state.
+ * @param {function} props.onSendInvite - A function to handle sending the invite.
+ *
+ * @returns {JSX.Element} The rendered modal component.
+ *
+ * @example
+ *
+ */
+
+import {
+ Button,
+ MenuItem,
+ Modal,
+ Select,
+ Stack,
+ TextField,
+ Typography,
+ useTheme,
+ } from "@mui/material";
+ import React, { useState } from "react";
+
+ interface InviteUserModalProps {
+ isOpen: boolean;
+ setIsOpen: (isOpen: boolean) => void;
+ onSendInvite: (email: string, role: string) => void;
+ }
+
+ const InviteUserModal: React.FC = ({
+ isOpen,
+ setIsOpen,
+ onSendInvite,
+ }) => {
+ const theme = useTheme();
+
+ const [email, setEmail] = useState("");
+ const [role, setRole] = useState("");
+
+ const handleSendInvite = () => {
+ onSendInvite(email, role);
+ setIsOpen(false);
+ };
+
+ return (
+ setIsOpen(false)}>
+
+
+ Invite new team member
+
+
+ When you add a new team member, they will get access to all monitors.
+
+ setEmail(e.target.value)}
+ required
+ sx={{
+ marginBottom: theme.spacing(4),
+ }}
+ />
+
+
+
+
+
+
+
+ );
+ };
+
+ export default InviteUserModal;
+
\ No newline at end of file
diff --git a/Clients/src/presentation/pages/SettingsPage/Team/index.tsx b/Clients/src/presentation/pages/SettingsPage/Team/index.tsx
index 35e73b74..9de08b75 100644
--- a/Clients/src/presentation/pages/SettingsPage/Team/index.tsx
+++ b/Clients/src/presentation/pages/SettingsPage/Team/index.tsx
@@ -23,6 +23,7 @@ import Field from "../../../components/Inputs/Field";
import { ReactComponent as SelectorVertical } from "../../../assets/icons/selector-vertical.svg";
import TablePaginationActions from "../../../components/TablePagination";
import { VerifyWiseContext } from "../../../../application/contexts/VerifyWise.context";
+import InviteUserModal from "../../../components/Modals/InviteUser";
// Enum for roles
enum Role {
@@ -77,8 +78,9 @@ const TeamManagement: React.FC = (): JSX.Element => {
]);
const [page, setPage] = useState(0); // Current page
- const { dashboardValues, setDashboardValues } = useContext(VerifyWiseContext);
+ const { dashboardValues} = useContext(VerifyWiseContext);
const [rowsPerPage, setRowsPerPage] = useState(5); // Rows per page
+ const [inviteUserModalOpen, setInviteUserModalOpen] = useState(false);
// Handle saving organization name
const handleSaveOrgName = useCallback(() => {
@@ -143,6 +145,11 @@ const TeamManagement: React.FC = (): JSX.Element => {
// return filteredMembers.slice(startIndex, startIndex + rowsPerPage);
// }, [filteredMembers, page, rowsPerPage]);
+ const inviteTeamMember = () => {
+ console.log("Inviting team member");
+ setInviteUserModalOpen(true);
+ };
+
return (
@@ -237,7 +244,7 @@ const TeamManagement: React.FC = (): JSX.Element => {
-
@@ -353,6 +360,16 @@ const TeamManagement: React.FC = (): JSX.Element => {
+ {inviteUserModalOpen && (
+ {
+ console.log('Invite sent:', data);
+ setInviteUserModalOpen(false);
+ }}
+ />
+ )}
);
};
From 84ca7f8e832ad7cbc3d2cea3fd38925f6751ec8e Mon Sep 17 00:00:00 2001
From: Mel <80449420+melpsh@users.noreply.github.com>
Date: Sun, 5 Jan 2025 18:35:14 -0800
Subject: [PATCH 2/2] updated the UI
---
.../components/Modals/InviteUser/index.tsx | 274 +++++++++---------
1 file changed, 134 insertions(+), 140 deletions(-)
diff --git a/Clients/src/presentation/components/Modals/InviteUser/index.tsx b/Clients/src/presentation/components/Modals/InviteUser/index.tsx
index 286abeac..f7713a7c 100644
--- a/Clients/src/presentation/components/Modals/InviteUser/index.tsx
+++ b/Clients/src/presentation/components/Modals/InviteUser/index.tsx
@@ -14,151 +14,145 @@
*/
import {
- Button,
- MenuItem,
- Modal,
- Select,
- Stack,
- TextField,
- Typography,
- useTheme,
- } from "@mui/material";
- import React, { useState } from "react";
-
- interface InviteUserModalProps {
- isOpen: boolean;
- setIsOpen: (isOpen: boolean) => void;
- onSendInvite: (email: string, role: string) => void;
- }
-
- const InviteUserModal: React.FC = ({
- isOpen,
- setIsOpen,
- onSendInvite,
- }) => {
- const theme = useTheme();
-
- const [email, setEmail] = useState("");
- const [role, setRole] = useState("");
-
- const handleSendInvite = () => {
- onSendInvite(email, role);
- setIsOpen(false);
- };
-
- return (
- setIsOpen(false)}>
- void;
+ onSendInvite: (email: string, role: string) => void;
+}
+
+const InviteUserModal: React.FC = ({
+ isOpen,
+ setIsOpen,
+ onSendInvite,
+}) => {
+ const theme = useTheme();
+
+ const [email, setEmail] = useState("");
+ const [role, setRole] = useState("");
+
+ const handleSendInvite = () => {
+ onSendInvite(email, role);
+ setIsOpen(false);
+ };
+
+ return (
+ setIsOpen(false)}>
+
+
+ Invite new team member
+
+
+ When you add a new team member, they will get access to all monitors.
+
+ setEmail(e.target.value)}
+ isRequired
sx={{
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)",
- width: 450,
- bgcolor: theme.palette.background.paper,
- border: 1,
- borderColor: theme.palette.border.dark,
- borderRadius: theme.shape.borderRadius,
- boxShadow: 24,
- p: theme.spacing(4),
- padding: theme.spacing(12),
- "&:focus": {
- outline: "none",
- },
+ marginBottom: theme.spacing(4),
}}
+ />
+
- );
- };
-
- export default InviteUserModal;
-
\ No newline at end of file
+
+
+ );
+};
+
+export default InviteUserModal;