From 4a8e5f8f8df32bcb534e7ad9be6302f9fb96d3b5 Mon Sep 17 00:00:00 2001 From: "@nishad.shirsat" Date: Thu, 3 Aug 2023 16:08:36 +0530 Subject: [PATCH 1/2] fix: Worked on the send invitation modal Signed-off-by: @nishad.shirsat --- src/app/NavBarStacked.astro | 2 +- src/components/AlertComponent/index.tsx | 19 ++++-- src/components/UserDashBoard.tsx | 16 +++-- src/components/organization/OrgDropDown.tsx | 27 +++++---- .../organization/OrganizationsList.tsx | 2 +- .../invitations/SendInvitationModal.tsx | 59 +++++++++--------- .../organization/users/EditUserRolesModal.tsx | 60 ++++++++++++++----- src/components/organization/users/Members.tsx | 2 +- 8 files changed, 114 insertions(+), 73 deletions(-) diff --git a/src/app/NavBarStacked.astro b/src/app/NavBarStacked.astro index 3eac74f88..a14e0bd53 100644 --- a/src/app/NavBarStacked.astro +++ b/src/app/NavBarStacked.astro @@ -8,7 +8,7 @@ import { asset, url } from '../lib/data.js';
- + void }) => { -export const AlertComponent = ({ message, type, onAlertClose }: { message: string | null, type: string, onAlertClose: () => void }) => { - return message !== null ? onAlertClose()} > - +

{message}

+ + { + viewButton + &&

+ View more... +

+ } + + - : <> + : <> } \ No newline at end of file diff --git a/src/components/UserDashBoard.tsx b/src/components/UserDashBoard.tsx index 41283923c..de375c623 100644 --- a/src/components/UserDashBoard.tsx +++ b/src/components/UserDashBoard.tsx @@ -1,12 +1,13 @@ -import type { AxiosResponse } from "axios"; import { useEffect, useState } from "react"; -import { getUserInvitations } from "../api/invitations"; -import { getOrganizations } from "../api/organization"; -import { apiStatusCodes } from "../config/CommonConstant"; -import { pathRoutes } from "../config/pathRoutes"; + import { AlertComponent } from "./AlertComponent"; -import type { Organisation } from "./organization/interfaces"; +import type { AxiosResponse } from "axios"; import CustomAvatar from '../components/Avatar' +import type { Organisation } from "./organization/interfaces"; +import { apiStatusCodes } from "../config/CommonConstant"; +import { getOrganizations } from "../api/organization"; +import { getUserInvitations } from "../api/invitations"; +import { pathRoutes } from "../config/pathRoutes"; const initialPageState = { pageNumber: 1, @@ -17,6 +18,7 @@ const initialPageState = { const UserDashBoard = () => { const [message, setMessage] = useState(null) + const [viewButton, setViewButton] = useState(false) const [error, setError] = useState(null) const [currentPage, setCurrentPage] = useState(initialPageState); const [loading, setLoading] = useState(false) @@ -37,6 +39,7 @@ const UserDashBoard = () => { if (invitationList.length > 0) { setMessage('You have some pending received invitations') + setViewButton(true) } setCurrentPage({ @@ -91,6 +94,7 @@ const UserDashBoard = () => { { setMessage(null) setError(null) diff --git a/src/components/organization/OrgDropDown.tsx b/src/components/organization/OrgDropDown.tsx index fef10f797..ffa793fd9 100644 --- a/src/components/organization/OrgDropDown.tsx +++ b/src/components/organization/OrgDropDown.tsx @@ -12,8 +12,6 @@ import { pathRoutes } from '../../config/pathRoutes'; const OrgDropDown = () => { const [orgList, setOrgList] = useState([]); const [activeOrg, setactiveOrg] = useState(null) - - useEffect(() => { getAllorgs() @@ -36,31 +34,34 @@ const OrgDropDown = () => { }; const setActiveOrg = async (organizations: Organisation[]) => { - + let activeOrg: Organisation | null = null const orgId = await getFromLocalStorage(storageKeys.ORG_ID) if (orgId) { activeOrg = organizations?.find(org => org.id === Number(orgId)) as Organisation setactiveOrg(activeOrg || null) - await setToLocalStorage(storageKeys.ORG_ID, orgId.toString()); } else { activeOrg = organizations && organizations[0] setactiveOrg(activeOrg || null) - await setToLocalStorage(storageKeys.ORG_ID, activeOrg.id.toString()); } - const roles: string[] = activeOrg?.userOrgRoles.map(role => role.orgRole.name) - activeOrg.roles = roles + if (activeOrg) { + + await setToLocalStorage(storageKeys.ORG_ID, activeOrg.id.toString()); + const roles: string[] = activeOrg?.userOrgRoles.map(role => role.orgRole.name) + activeOrg.roles = roles + + await setToLocalStorage(storageKeys.ORG_ROLES, roles.toString()); + } - await setToLocalStorage(storageKeys.ORG_ROLES, roles.toString()); } const redirectToCreateOrgModal = () => { window.location.href = '/organizations?orgModal=true'; - + } return ( @@ -75,8 +76,8 @@ const OrgDropDown = () => { <> { - activeOrg ? - <> + activeOrg + ? <> {activeOrg.logoUrl ? ( ) : ( @@ -136,8 +137,8 @@ const OrgDropDown = () => { onClick={redirectToCreateOrgModal} > - - + + Create Organization diff --git a/src/components/organization/OrganizationsList.tsx b/src/components/organization/OrganizationsList.tsx index f2750cbdc..a625e8dc0 100644 --- a/src/components/organization/OrganizationsList.tsx +++ b/src/components/organization/OrganizationsList.tsx @@ -193,7 +193,7 @@ const OrganizationsList = () => { return ( {role.charAt(0).toUpperCase() + role.slice(1)} diff --git a/src/components/organization/invitations/SendInvitationModal.tsx b/src/components/organization/invitations/SendInvitationModal.tsx index 658ae0405..06bc94be0 100644 --- a/src/components/organization/invitations/SendInvitationModal.tsx +++ b/src/components/organization/invitations/SendInvitationModal.tsx @@ -22,12 +22,12 @@ interface Invitations { interface RoleI { - id: number - name: string + id: number + name: string } -const SendInvitationModal = (props: { openModal: boolean; setMessage: (message: string)=> void ; setOpenModal: (flag: boolean)=> void }) => { +const SendInvitationModal = (props: { openModal: boolean; setMessage: (message: string) => void; setOpenModal: (flag: boolean) => void }) => { const [loading, setLoading] = useState(false) @@ -47,7 +47,7 @@ const SendInvitationModal = (props: { openModal: boolean; setMessage: (message: const { data } = resRoles as AxiosResponse if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { - + const roles: Array = data?.data.response const memberRole = roles.find(role => role.name === 'member') @@ -89,7 +89,7 @@ const SendInvitationModal = (props: { openModal: boolean; setMessage: (message: const sendInvitations = async () => { - setLoading(true) + setLoading(true) const invitationPayload = invitations.map(invitation => { return { @@ -124,13 +124,13 @@ const SendInvitationModal = (props: { openModal: boolean; setMessage: (message: }> Send Invitations - { + onAlertClose={() => { setErrMsg(null) }} - /> + />
@@ -197,10 +196,10 @@ const SendInvitationModal = (props: { openModal: boolean; setMessage: (message: )} - { - invitations.length > 0 && -
-
+ { + invitations.length > 0 &&
    @@ -248,19 +247,19 @@ const SendInvitationModal = (props: { openModal: boolean; setMessage: (message: }
-
- -
+ } + +
+
- - } - +
diff --git a/src/components/organization/users/EditUserRolesModal.tsx b/src/components/organization/users/EditUserRolesModal.tsx index 703803aab..31a6ce71a 100644 --- a/src/components/organization/users/EditUserRolesModal.tsx +++ b/src/components/organization/users/EditUserRolesModal.tsx @@ -11,6 +11,7 @@ interface RoleI { id: number name: string, checked: boolean + disabled: boolean } @@ -34,8 +35,13 @@ const EditUserRoleModal = (props: { openModal: boolean; user: User; setMessage: const filterRole = roles.filter(role => { if (props?.user?.roles.includes(role.name)) { role.checked = true + role.disabled = false + } else if (role.name === 'member') { + role.checked = true + role.disabled = true } else { role.checked = false + role.disabled = false } return !role.name.includes("owner") && !role.name.includes("holder"); }) @@ -54,9 +60,9 @@ const EditUserRoleModal = (props: { openModal: boolean; user: User; setMessage: const editUserRole = async () => { - setLoading(true) + setLoading(true) - const roleIds = roles?.filter(role => role.checked).map(role => role.id) + const roleIds = roles?.filter(role => role.checked).map(role => role.id) const response = await editOrganizationUserRole(props.user.id, roleIds as number[]) @@ -75,25 +81,47 @@ const EditUserRoleModal = (props: { openModal: boolean; user: User; setMessage: const onRoleChanged = (event: any, id: number) => { - if ( - (event?.target?.name === 'admin' && event?.target?.checked === true) - || (event?.target?.name === 'member' && event?.target?.checked === true) + if ( + (event?.target?.name === 'issuer' && event?.target?.checked === true) || (event?.target?.name === 'verifier' && event?.target?.checked === true) + ) { const updatesRoles: RoleI[] | null = roles && roles?.map(role => { if (role.id === id) { role.checked = event?.target?.checked - } else { + + } else if (role.name === 'verifier' && role.checked) { + role.checked = true + }else if (role.name === 'issuer' && role.checked) { + role.checked = true + }else if (role.name === 'member' && role.checked) { + role.checked = true + } + else { role.checked = false + } + return role + }) + setRoles(updatesRoles) + } else if ( + (event?.target?.name === 'admin' && event?.target?.checked === true) + ) { + const updatesRoles: RoleI[] | null = roles && roles?.map(role => { + if (role.id === id) { + role.checked = event?.target?.checked } + else if (role.name === 'member' && role.checked) { + role.checked = true + } + else { + role.checked = false + } return role }) setRoles(updatesRoles) } else { const updatesRoles: RoleI[] | null = roles && roles?.map(role => { - if(role.name === 'member' || role.name === 'admin'){ - role.checked = false - } else if (role.id === id) { + if (role.id === id) { role.checked = event?.target?.checked } return role @@ -106,8 +134,7 @@ const EditUserRoleModal = (props: { openModal: boolean; user: User; setMessage: return ( { + onClose={() => { props.setOpenModal(false); }} > @@ -117,10 +144,10 @@ const EditUserRoleModal = (props: { openModal: boolean; user: User; setMessage:
- +
-
+

onRoleChanged(event, role.id)} /> - {TextTittlecase(role.name)} + {TextTittlecase(role.name)}

)) @@ -164,11 +192,11 @@ const EditUserRoleModal = (props: { openModal: boolean; user: User; setMessage: } -
+
-
+
diff --git a/src/components/organization/users/Members.tsx b/src/components/organization/users/Members.tsx index 04e5decc6..8f9156e86 100644 --- a/src/components/organization/users/Members.tsx +++ b/src/components/organization/users/Members.tsx @@ -186,7 +186,7 @@ const Members = () => {
- + { user.email } From 87478b0a0352ce60435fc1b4e610b5919645a066 Mon Sep 17 00:00:00 2001 From: "@nishad.shirsat" Date: Thu, 3 Aug 2023 16:24:27 +0530 Subject: [PATCH 2/2] fix: dark theme text color change in empty state component Signed-off-by: @nishad.shirsat --- src/components/EmptyListComponent/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/EmptyListComponent/index.tsx b/src/components/EmptyListComponent/index.tsx index 77aa4e16a..037c5fb1f 100644 --- a/src/components/EmptyListComponent/index.tsx +++ b/src/components/EmptyListComponent/index.tsx @@ -1,4 +1,4 @@ -import { ReactElement } from "react"; +import type { ReactElement } from "react"; export const EmptyListMessage = ({ message, description, buttonContent, svgComponent, onClick } : { @@ -11,12 +11,12 @@ export const EmptyListMessage = ({ message, description, buttonContent, svgCompo }) => { return (
-

{message}

-

{description}

+

{message}

+

{description}

{ buttonContent &&