diff --git a/src/web/components/ParticipantRequests/AllParticipantsTable.tsx b/src/web/components/ParticipantRequests/AllParticipantsTable.tsx new file mode 100644 index 000000000..548fb4866 --- /dev/null +++ b/src/web/components/ParticipantRequests/AllParticipantsTable.tsx @@ -0,0 +1,59 @@ +import { ParticipantTypeDTO } from '../../../api/entities/ParticipantType'; +import { ParticipantRequestDTO } from '../../../api/routers/participantsRouter'; +import { ParticipantApprovalFormDetails } from '../../services/participant'; +import { TableNoDataPlaceholder } from '../Core/TableNoDataPlaceholder'; +import { ParticipantRequestItem } from './ParticipantRequestItem'; + +import './ParticipantRequestsTable.scss'; + +type ParticipantRequestsTableProps = { + participantRequests: ParticipantRequestDTO[]; + participantTypes: ParticipantTypeDTO[]; + onApprove: (participantId: number, formData: ParticipantApprovalFormDetails) => Promise; +}; + +function NoParticipantRequests() { + return ( + } + title='No Participant Requests' + > + There are no participants that are awaiting approval. + + ); +} + +export function AllParticipantsTable({ + participantRequests, + participantTypes, + onApprove, +}: ParticipantRequestsTableProps) { + return ( +
+ + + + + + + + + + + + + + {participantRequests.map((participantRequest) => ( + + ))} + +
Participant NameParticipant TypeAllowed API RolesName of ApproverDate of ApprovalActions
+ {!participantRequests.length && } +
+ ); +} diff --git a/src/web/components/ParticipantRequests/ParticipantRequestItem.tsx b/src/web/components/ParticipantRequests/ParticipantRequestItem.tsx index 2cd6a7226..b7bafdcec 100644 --- a/src/web/components/ParticipantRequests/ParticipantRequestItem.tsx +++ b/src/web/components/ParticipantRequests/ParticipantRequestItem.tsx @@ -47,16 +47,22 @@ export function ParticipantRequestItem({ <> -
- {participant.name} - {participant.name} -
+
{participant.name}
{getParticipantTypes(participant.types)}
-
{participant.status}
+
{participant.requestingUser.fullName}
+ + +
{participant.requestingUser.email}
+ + +
{participant.requestingUser.role}
+ + +
{participant.status}
diff --git a/src/web/components/ParticipantRequests/ParticipantRequestsTable.scss b/src/web/components/ParticipantRequests/ParticipantRequestsTable.scss index 883568ffc..777dc5052 100644 --- a/src/web/components/ParticipantRequests/ParticipantRequestsTable.scss +++ b/src/web/components/ParticipantRequests/ParticipantRequestsTable.scss @@ -8,10 +8,6 @@ line-height: 1.5; } - th:first-of-type { - padding-left: 106px; - } - th.action { text-align: end; padding-left: 140px; diff --git a/src/web/components/ParticipantRequests/ParticipantRequestsTable.stories.tsx b/src/web/components/ParticipantRequests/ParticipantRequestsTable.stories.tsx index 0c3a4ca42..a126fa8e1 100644 --- a/src/web/components/ParticipantRequests/ParticipantRequestsTable.stories.tsx +++ b/src/web/components/ParticipantRequests/ParticipantRequestsTable.stories.tsx @@ -16,19 +16,19 @@ const Template: ComponentStory = (args) => ( export const ParticipantRequests = Template.bind({}); -const requestingUser: ParticipantRequestDTO['requestingUser'] = { - email: 'text@example.com', - fullName: 'Test User', - role: UserRole.Engineering, -}; ParticipantRequests.args = { participantRequests: [ { id: 1, name: 'Participant 1', + types: [{ id: 1, typeName: 'Type 1' }], status: ParticipantStatus.AwaitingApproval, - requestingUser, + requestingUser: { + email: 'test1@example.com', + fullName: 'Test User 1', + role: UserRole.Engineering, + }, }, { id: 1, @@ -38,7 +38,11 @@ ParticipantRequests.args = { { id: 2, typeName: 'Type 2' }, ], status: ParticipantStatus.AwaitingApproval, - requestingUser, + requestingUser: { + email: 'test2@example.com', + fullName: 'Test User 2', + role: UserRole.BusinessDevelopment, + }, }, { id: 1, @@ -49,7 +53,11 @@ ParticipantRequests.args = { { id: 3, typeName: 'Type 3' }, ], status: ParticipantStatus.AwaitingApproval, - requestingUser, + requestingUser: { + email: 'test3@example.com', + fullName: 'Test User 3', + role: UserRole.Marketing, + }, }, { id: 1, @@ -61,7 +69,11 @@ ParticipantRequests.args = { { id: 4, typeName: 'Type 4' }, ], status: ParticipantStatus.AwaitingApproval, - requestingUser, + requestingUser: { + email: 'test4@example.com', + fullName: 'Test User 4', + role: UserRole.MediaBuyer, + }, }, ], participantTypes: [ diff --git a/src/web/components/ParticipantRequests/ParticipantRequestsTable.tsx b/src/web/components/ParticipantRequests/ParticipantRequestsTable.tsx index 20860a084..fb6e856a9 100644 --- a/src/web/components/ParticipantRequests/ParticipantRequestsTable.tsx +++ b/src/web/components/ParticipantRequests/ParticipantRequestsTable.tsx @@ -35,7 +35,10 @@ export function ParticipantRequestsTable({ Participant Name Participant Type - Participant Status + Name + Email + Job Function + Allowed API Roles Actions