clean up the status

Author: devksingh4

src/common/types/roomRequest.ts

@@ -52,6 +52,7 @@ export const spaceTypeOptions = [
 
 export enum RoomRequestStatus {
   CREATED = "created",
+  MORE_INFORMATION_NEEDED = "more_information_needed",
   REJECTED_BY_ACM = "rejected_by_acm",
   SUBMITTED = "submitted",
   APPROVED = "approved",

src/ui/pages/roomRequest/NewRoomRequest.tsx

@@ -131,13 +131,13 @@ const YesNoField: React.FC<YesNoFieldProps> = ({
 interface NewRoomRequestProps {
   createRoomRequest?: (payload: RoomRequestFormValues) => Promise<RoomRequestPostResponse>;
   initialValues?: RoomRequestFormValues;
-  disabled?: boolean;
+  viewOnly?: boolean;
 }
 
 const NewRoomRequest: React.FC<NewRoomRequestProps> = ({
   createRoomRequest,
   initialValues,
-  disabled,
+  viewOnly,
 }) => {
   const [active, setActive] = useState(0);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -147,7 +147,7 @@ const NewRoomRequest: React.FC<NewRoomRequestProps> = ({
   const semesterValues = semesterOptions.map((x) => x.value);
 
   const form = useForm<RoomRequestFormValues>({
-    enhanceGetInputProps: () => ({ readOnly: disabled }),
+    enhanceGetInputProps: () => ({ readOnly: viewOnly }),
     initialValues: initialValues || {
       host: '',
       title: '',
@@ -171,7 +171,7 @@ const NewRoomRequest: React.FC<NewRoomRequestProps> = ({
     },
 
     validate: (values) => {
-      if (disabled) {
+      if (viewOnly) {
         return {};
       }
       if (active === 0) {
@@ -279,7 +279,7 @@ const NewRoomRequest: React.FC<NewRoomRequestProps> = ({
   }, [form.values.locationType]);
 
   const handleSubmit = async () => {
-    if (disabled) {
+    if (viewOnly) {
       return;
     }
     const apiFormValues = { ...form.values };
@@ -563,7 +563,7 @@ const NewRoomRequest: React.FC<NewRoomRequestProps> = ({
             {...form.getInputProps('comments')}
           />
         </Stepper.Step>
-        {!disabled && (
+        {!viewOnly && (
           <Stepper.Completed>
             Click the Submit button to submit the following room request:
             <Code block mt="xl">
@@ -579,10 +579,10 @@ const NewRoomRequest: React.FC<NewRoomRequestProps> = ({
           </Button>
         )}
         {active !== numSteps &&
-          (disabled && active === numSteps - 1 ? null : (
+          (viewOnly && active === numSteps - 1 ? null : (
             <Button onClick={nextStep}>{active === numSteps - 1 ? 'Review' : 'Next'}</Button>
           ))}
-        {active === numSteps && !disabled && (
+        {active === numSteps && !viewOnly && (
           <Button onClick={handleSubmit} color="green">
             {isSubmitting ? (
               <>

src/ui/pages/roomRequest/ViewRoomRequest.page.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Container, Title, Tabs, GridCol, Grid, Timeline, Text } from '@mantine/core';
+import { Container, Title, Tabs, GridCol, Grid, Timeline, Text, Tooltip } from '@mantine/core';
 import { AuthGuard } from '@ui/components/AuthGuard';
 import { AppRoles } from '@common/roles';
 import { useApi } from '@ui/util/api';
@@ -14,6 +14,7 @@ import { useParams } from 'react-router-dom';
 import { IconGitBranch } from '@tabler/icons-react';
 import { capitalizeFirstLetter } from '../events/ManageEvent.page';
 import { formatStatus, getStatusIcon } from './roomRequestUtils';
+import moment from 'moment-timezone';
 
 export const ViewRoomRequest: React.FC = () => {
   const { semesterId, requestId } = useParams();
@@ -39,27 +40,40 @@ export const ViewRoomRequest: React.FC = () => {
       </Container>
       <Grid ml={'xl'}>
         <Grid.Col span={8}>
-          {data && <NewRoomRequest disabled initialValues={data?.data} />}
+          {data && <NewRoomRequest viewOnly initialValues={data?.data} />}
         </Grid.Col>
         <Grid.Col span={3} ml={'lg'}>
           {data && (
-            <Timeline active={data.updates.length} bulletSize={28} lineWidth={4}>
-              {data.updates.map((x) => (
-                <Timeline.Item bullet={getStatusIcon(x.status)} title={formatStatus(x.status)}>
-                  {x.createdBy && <Text size="xs">{x.createdBy}</Text>}
-                  {x.notes && (
-                    <Text c="dimmed" size="sm">
-                      {x.notes}
-                    </Text>
-                  )}
-                  {x.createdAt && (
-                    <Text c="dimmed" size="sm">
-                      {x.createdAt}
-                    </Text>
-                  )}
-                </Timeline.Item>
-              ))}
-            </Timeline>
+            <>
+              <Timeline active={data.updates.length} bulletSize={28} lineWidth={4}>
+                {data.updates.map((x) => (
+                  <Timeline.Item bullet={getStatusIcon(x.status)} title={formatStatus(x.status)}>
+                    {x.createdBy && <Text size="xs">{x.createdBy}</Text>}
+                    {x.notes && (
+                      <Text c="dimmed" size="sm">
+                        {x.notes}
+                      </Text>
+                    )}
+                    {x.createdAt && (
+                      <Tooltip
+                        label={moment
+                          .tz(x.createdAt, 'America/Chicago')
+                          .format('MMMM Do YYYY, h:mm:ss a')}
+                        position="top"
+                        withArrow
+                      >
+                        <Text c="dimmed" size="xs">
+                          {moment.tz(x.createdAt, 'America/Chicago').fromNow()}
+                        </Text>
+                      </Tooltip>
+                    )}
+                  </Timeline.Item>
+                ))}
+              </Timeline>
+              <Text mt="md" size="sm" c="dimmed">
+                All times in the America/Chicago timezone.
+              </Text>
+            </>
           )}
           <AuthGuard
             resourceDef={{

src/ui/pages/roomRequest/roomRequestUtils.tsx

@@ -1,11 +1,33 @@
 import { RoomRequestStatus } from '@common/types/roomRequest';
 import { capitalizeFirstLetter } from '../events/ManageEvent.page';
-import { IconGitBranch } from '@tabler/icons-react';
+import {
+  IconCircleCheck,
+  IconCircleDashedCheck,
+  IconExclamationCircle,
+  IconProgressCheck,
+  IconQuestionMark,
+} from '@tabler/icons-react';
 
 export const getStatusIcon = (status: RoomRequestStatus) => {
-  return <IconGitBranch size={12} />;
+  const commonProps = { size: 20 };
+  switch (status) {
+    case RoomRequestStatus.APPROVED:
+      return <IconCircleCheck {...commonProps} />;
+    case RoomRequestStatus.REJECTED_BY_UIUC:
+    case RoomRequestStatus.REJECTED_BY_ACM:
+      return <IconExclamationCircle {...commonProps} />;
+    case RoomRequestStatus.SUBMITTED:
+      return <IconProgressCheck {...commonProps} />;
+    case RoomRequestStatus.MORE_INFORMATION_NEEDED:
+      return <IconQuestionMark {...commonProps} />;
+    default:
+      return <IconCircleDashedCheck {...commonProps} />;
+  }
 };
 
 export const formatStatus = (status: RoomRequestStatus) => {
+  if (status === RoomRequestStatus.SUBMITTED) {
+    return 'Submitted to UIUC';
+  }
   return capitalizeFirstLetter(status).replaceAll('_', ' ').replaceAll('uiuc', 'UIUC');
 };