Skip to content

Commit 9ac6842

Browse files
EthM370EthM370
committed
New SigView page
1 parent 2d9ceda commit 9ac6842

File tree

2 files changed

+209
-0
lines changed

2 files changed

+209
-0
lines changed

‎src/ui/Router.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { ManageIamPage } from './pages/iam/ManageIam.page';
2121
import { ManageProfilePage } from './pages/profile/ManageProfile.page';
2222
import { ManageStripeLinksPage } from './pages/stripe/ViewLinks.page';
2323
import { ManageSigLeadsPage } from './pages/siglead/ManageSigLeads.page';
24+
import { ViewSigLeadPage } from './pages/siglead/ViewSigLead.page';
2425
import { ManageRoomRequestsPage } from './pages/roomRequest/RoomRequestLanding.page';
2526
import { ViewRoomRequest } from './pages/roomRequest/ViewRoomRequest.page';
2627

@@ -182,6 +183,10 @@ const authenticatedRouter = createBrowserRouter([
182183
path: '/siglead-management',
183184
element: <ManageSigLeadsPage />,
184185
},
186+
{
187+
path: '/siglead-management/:sigId',
188+
element: <ViewSigLeadPage />,
189+
},
185190
{
186191
path: '/roomRequests',
187192
element: <ManageRoomRequestsPage />,

‎src/ui/pages/siglead/ViewSigLead.page.tsx

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
import {
2+
Title,
3+
Box,
4+
TextInput,
5+
Textarea,
6+
Switch,
7+
Select,
8+
Button,
9+
Loader,
10+
Container,
11+
Transition,
12+
useMantineColorScheme,
13+
Table,
14+
Group,
15+
Stack,
16+
} from '@mantine/core';
17+
import { DateTimePicker } from '@mantine/dates';
18+
import { useForm, zodResolver } from '@mantine/form';
19+
import { notifications } from '@mantine/notifications';
20+
import dayjs from 'dayjs';
21+
import React, { useEffect, useState } from 'react';
22+
import { useNavigate, useParams } from 'react-router-dom';
23+
import { z } from 'zod';
24+
import { AuthGuard } from '@ui/components/AuthGuard';
25+
import { getRunEnvironmentConfig } from '@ui/config';
26+
import { useApi } from '@ui/util/api';
27+
import { AppRoles } from '@common/roles';
28+
29+
const baseSigSchema = z.object({
30+
sigid: z.string().min(1),
31+
signame: z.string().min(1),
32+
description: z.string().optional(),
33+
});
34+
35+
const baseSigMemberSchema = z.object({
36+
sigGroupId: z.string().min(1),
37+
email: z.string().email('Invalid email'),
38+
designation: z.enum(['L', 'M']),
39+
id: z.string().optional(),
40+
memberName: z.string(),
41+
});
42+
43+
type sigDetails = z.infer<typeof baseSigSchema>;
44+
type sigMemberDetails = z.infer<typeof baseSigMemberSchema>;
45+
46+
export const ViewSigLeadPage: React.FC = () => {
47+
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
48+
const navigate = useNavigate();
49+
const api = useApi('core');
50+
const { colorScheme } = useMantineColorScheme();
51+
const { sigId } = useParams();
52+
const [sigMembers, setSigMembers] = useState<sigMemberDetails[]>([
53+
{
54+
sigGroupId: sigId || '',
55+
email: 'alice1@illinois.edu',
56+
designation: 'L',
57+
memberName: 'Alice',
58+
},
59+
{
60+
sigGroupId: sigId || '',
61+
email: 'bob2@illinois.edu',
62+
designation: 'M',
63+
memberName: 'Bob',
64+
},
65+
]);
66+
const [sigDetails, setSigDetails] = useState<sigDetails>({
67+
sigid: sigId || '',
68+
signame: 'Default Sig',
69+
description:
70+
'A cool Sig with a lot of money and members. Founded in 1999 by Sir Charlie of Edinburgh. Focuses on making money and helping others earn more money via education.',
71+
});
72+
73+
useEffect(() => {
74+
// Fetch sig data and populate form / for now dummy data...
75+
const getSig = async () => {
76+
try {
77+
/*const formValues = {
78+
};
79+
form.setValues(formValues);*/
80+
} catch (error) {
81+
console.error('Error fetching sig data:', error);
82+
notifications.show({
83+
message: 'Failed to fetch sig data, please try again.',
84+
});
85+
}
86+
};
87+
getSig();
88+
}, [sigId]);
89+
90+
const renderSigMember = (members: sigMemberDetails, index: number) => {
91+
const shouldShow = true;
92+
return (
93+
<Transition mounted={shouldShow} transition="fade" duration={10000} timingFunction="ease">
94+
{(styles) => (
95+
<tr
96+
style={{
97+
...styles,
98+
display: shouldShow ? 'table-row' : 'none',
99+
backgroundColor:
100+
colorScheme === 'dark'
101+
? index % 2 === 0
102+
? '#333333'
103+
: '#444444'
104+
: index % 2 === 0
105+
? '#f0f8ff'
106+
: '#ffffff',
107+
}}
108+
>
109+
<Table.Td>{members.memberName}</Table.Td>
110+
<Table.Td>{members.email}</Table.Td>
111+
<Table.Td>{members.designation}</Table.Td>
112+
</tr>
113+
)}
114+
</Transition>
115+
);
116+
};
117+
118+
/*
119+
const form = useForm<EventPostRequest>({
120+
validate: zodResolver(requestBodySchema),
121+
initialValues: {
122+
title: '',
123+
description: '',
124+
start: new Date(),
125+
end: new Date(new Date().valueOf() + 3.6e6), // 1 hr later
126+
location: 'ACM Room (Siebel CS 1104)',
127+
locationLink: 'https://maps.app.goo.gl/dwbBBBkfjkgj8gvA8',
128+
host: 'ACM',
129+
featured: false,
130+
repeats: undefined,
131+
repeatEnds: undefined,
132+
paidEventId: undefined,
133+
},
134+
});
135+
/*
136+
const handleSubmit = async (values: EventPostRequest) => {
137+
try {
138+
setIsSubmitting(true);
139+
const realValues = {
140+
...values,
141+
start: dayjs(values.start).format('YYYY-MM-DD[T]HH:mm:00'),
142+
end: values.end ? dayjs(values.end).format('YYYY-MM-DD[T]HH:mm:00') : undefined,
143+
repeatEnds:
144+
values.repeatEnds && values.repeats
145+
? dayjs(values.repeatEnds).format('YYYY-MM-DD[T]HH:mm:00')
146+
: undefined,
147+
repeats: values.repeats ? values.repeats : undefined,
148+
};
149+
150+
const eventURL = isEditing ? `/api/v1/events/${eventId}` : '/api/v1/events';
151+
const response = await api.post(eventURL, realValues);
152+
notifications.show({
153+
title: isEditing ? 'Event updated!' : 'Event created!',
154+
message: isEditing ? undefined : `The event ID is "${response.data.id}".`,
155+
});
156+
navigate('/events/manage');
157+
} catch (error) {
158+
setIsSubmitting(false);
159+
console.error('Error creating/editing event:', error);
160+
notifications.show({
161+
message: 'Failed to create/edit event, please try again.',
162+
});
163+
}
164+
};*/
165+
166+
return (
167+
<AuthGuard resourceDef={{ service: 'core', validRoles: [AppRoles.IAM_ADMIN] }}>
168+
<Container>
169+
<Group align="flex-start">
170+
<Box style={{ flex: 8 }}>
171+
<Title order={1}>{sigDetails.sigid}</Title>
172+
{sigDetails.description || ''}
173+
</Box>
174+
<Box style={{ flex: 1, textAlign: 'right', alignItems: 'right' }}>
175+
<Stack>
176+
<Button variant="white">Member Count: {sigMembers.length}</Button>
177+
178+
<Button>Add Member</Button>
179+
<Button
180+
onClick={() => navigate('../siglead-management')}
181+
variant="outline"
182+
color="gray"
183+
>
184+
Back
185+
</Button>
186+
</Stack>
187+
</Box>
188+
</Group>
189+
<div style={{ width: '100%', overflowX: 'auto' }}>
190+
<Table style={{ tableLayout: 'fixed', width: '100%' }}>
191+
<Table.Thead>
192+
<Table.Tr>
193+
<Table.Th>Name</Table.Th>
194+
<Table.Th>Email</Table.Th>
195+
<Table.Th>Roles</Table.Th>
196+
</Table.Tr>
197+
</Table.Thead>
198+
<Table.Tbody>{sigMembers.map(renderSigMember)}</Table.Tbody>
199+
</Table>
200+
</div>
201+
</Container>
202+
</AuthGuard>
203+
);
204+
};

0 commit comments

Comments
 (0)