Merge pull request #7 from yeukfei02/development

Development

apps/api/prisma/migrations/20230107075246_add_incident_ref/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Incident" ADD COLUMN     "incidentRef" TEXT NOT NULL DEFAULT '';

apps/api/prisma/schema.prisma

@@ -33,6 +33,7 @@ model Incident {
   creator_id  String       @db.Uuid
   assignee_id String?      @db.Uuid
   status      Status       @default(UNASSIGNED)
+  incidentRef String       @default("")
   created_at  DateTime     @default(now()) @db.Timestamptz(6)
   updated_at  DateTime     @default(now()) @db.Timestamptz(6)
   assignee    User?        @relation("assignee", fields: [assignee_id], references: [id])

apps/api/prisma/seed.ts

@@ -67,6 +67,7 @@ async function createIncidents() {
         creator_id: adminUser.id,
         assignee_id: normalUser.id,
         status: Status.ASSIGNED,
+        incidentRef: `I${uuidv4().substring(0, 8).toUpperCase()}`,
         created_at: new Date(),
         updated_at: new Date(),
       };

apps/api/src/incident/dto/getIncidents.dto.ts

@@ -1,10 +1,11 @@
-import { UserRole, IncidentType } from '@prisma/client';
+import { UserRole, IncidentType, Status } from '@prisma/client';
 
 export class GetIncidentsDto {
   userRole: UserRole;
   userId: string;
   searchText?: string;
   incidentType?: IncidentType;
+  status?: Status;
   page?: number;
   perPage?: number;
   sortByCreatedAt?: boolean;

apps/api/src/incident/incident.repository.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@nestjs/common';
 import { Incident, UserRole, Status } from '@prisma/client';
 import { PrismaService } from '../prisma.service';
+import { v4 as uuidv4 } from 'uuid';
 import { AssignIncidentStatusDto } from './dto/assignIncidentStatus.dto';
 import { CreateIncidentDto } from './dto/createIncident.dto';
 import { GetIncidentsDto } from './dto/getIncidents.dto';
@@ -26,6 +27,7 @@ export class IncidentRepository {
           title: title,
           description: description,
           type: type,
+          incidentRef: `I${uuidv4().substring(0, 8).toUpperCase()}`,
           creator_id: creatorId,
         },
       });
@@ -39,6 +41,7 @@ export class IncidentRepository {
     const userId = getIncidentsDto.userId;
     const searchText = getIncidentsDto.searchText;
     const incidentType = getIncidentsDto.incidentType;
+    const status = getIncidentsDto.status;
     const page = getIncidentsDto.page ? getIncidentsDto.page : 1;
     const perPage = getIncidentsDto.perPage ? getIncidentsDto.perPage : 10;
     const sortByCreatedAt = getIncidentsDto.sortByCreatedAt ? 'true' : 'false';
@@ -95,13 +98,24 @@ export class IncidentRepository {
                 mode: 'insensitive',
               },
             },
+            {
+              incidentRef: {
+                contains: searchText,
+                mode: 'insensitive',
+              },
+            },
           ],
         }),
         ...(incidentType && {
           type: {
             in: [incidentType],
           },
         }),
+        ...(status && {
+          status: {
+            in: [status],
+          },
+        }),
       },
       orderBy: orderBy,
       skip: pageInt > 1 ? pageInt * perPageInt - perPageInt : 0,

apps/api/src/incident/interface/getIncidentById.interface.ts

@@ -11,6 +11,7 @@ export interface Incident {
   creator_id: string;
   assignee_id: string;
   status: string;
+  incidentRef: string;
   created_at: Date;
   updated_at: Date;
   creator: Creator;

apps/web/src/components/cardView/CardView.tsx

@@ -262,6 +262,11 @@ function CardView({ incident, normalUsers, getIncidents }: Props) {
           </div>
         ) : null}
         <CardContent>
+          <div className="my-3">
+            <Typography variant="subtitle1" component="div" color="gray">
+              #{incident.incidentRef}
+            </Typography>
+          </div>
           <Typography variant="h5" component="div">
             {incident.title}
           </Typography>

apps/web/src/components/customBreadcrumbs/CustomBreadcrumbs.tsx

@@ -9,9 +9,10 @@ interface Props {
   page: string;
   subPage?: string;
   incidentId?: string;
+  incidentRef?: string;
 }
 
-function CustomBreadcrumbs({ page, subPage, incidentId }: Props) {
+function CustomBreadcrumbs({ page, subPage, incidentId, incidentRef }: Props) {
   const navigate = useNavigate();
 
   const handlePageClick = (page: string) => {
@@ -73,7 +74,7 @@ function CustomBreadcrumbs({ page, subPage, incidentId }: Props) {
           >
             {page}
           </div>
-          <Typography color="text.primary">{subPage}</Typography>
+          <Typography color="text.primary">{subPage} (#{incidentRef})</Typography>
         </Breadcrumbs>
       );
     }

apps/web/src/components/dashboard/Dashboard.tsx

@@ -2,6 +2,11 @@ import React, { useState, useEffect } from 'react';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import { Typography } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
@@ -14,7 +19,7 @@ import DialogTitle from '@mui/material/DialogTitle';
 import CustomSnackBar from '../customSnackBar/CustomSnackBar';
 import IncidentCardList from '../incidentCardList/IncidentCardList';
 import CustomAppBar from '../customAppBar/CustomAppBar';
-import { IncidentType, UserRole } from '@prisma/client';
+import { IncidentType, Status, UserRole } from '@prisma/client';
 import * as incidentService from '../../services/incidentService';
 import CustomBreadcrumbs from '../customBreadcrumbs/CustomBreadcrumbs';
 import SearchAndFilter from '../searchAndFilter/SearchAndFilter';
@@ -29,6 +34,7 @@ function Dashboard() {
   const [createIncidentIncidentType, setCreateIncidentIncidentType] =
     useState<IncidentType>();
   const [incidentType, setIncidentType] = useState<IncidentType>();
+  const [status, setStatus] = useState<Status>();
 
   const [incidents, setIncidents] = useState([]);
   const [totalPageCount, setTotalPageCount] = useState(0);
@@ -38,6 +44,8 @@ function Dashboard() {
   const [sortByCreatedAt, setSortByCreatedAt] = useState(false);
   const [sortByUpdatedAt, setSortByUpdatedAt] = useState(false);
 
+  const [expanded, setExpanded] = useState(true);
+
   const token = localStorage.getItem('token');
   const userRole = localStorage.getItem('userRole');
   const userId = localStorage.getItem('userId');
@@ -46,15 +54,24 @@ function Dashboard() {
     getIncidents(
       searchText,
       incidentType,
+      status,
       page,
       sortByCreatedAt,
       sortByUpdatedAt
     );
-  }, [searchText, incidentType, page, sortByCreatedAt, sortByUpdatedAt]);
+  }, [
+    searchText,
+    incidentType,
+    status,
+    page,
+    sortByCreatedAt,
+    sortByUpdatedAt,
+  ]);
 
   const getIncidents = async (
     searchText?: string,
     incidentType?: IncidentType,
+    status?: Status,
     page?: number,
     sortByCreatedAt?: boolean,
     sortByUpdatedAt?: boolean
@@ -69,6 +86,7 @@ function Dashboard() {
         userId,
         searchText,
         incidentType,
+        status,
         pageInt,
         perPage,
         sortByCreatedAt,
@@ -108,6 +126,10 @@ function Dashboard() {
     setIncidentType(event.target.value as IncidentType);
   };
 
+  const handleStatusChange = (event: SelectChangeEvent) => {
+    setStatus(event.target.value as Status);
+  };
+
   const handleCreateIncidentButtonClick = () => {
     setDialogOpen(true);
   };
@@ -129,6 +151,7 @@ function Dashboard() {
   const handleClearFilterClick = () => {
     setSearchText('');
     setIncidentType(undefined);
+    setStatus(undefined);
     setPage(1);
     setSortByCreatedAt(false);
     setSortByUpdatedAt(false);
@@ -183,6 +206,17 @@ function Dashboard() {
     setSortByUpdatedAt(e.target.checked);
   };
 
+  const handleAccordionChange = (
+    event: React.SyntheticEvent,
+    isExpanded: boolean
+  ) => {
+    if (expanded) {
+      setExpanded(false);
+    } else {
+      setExpanded(true);
+    }
+  };
+
   return (
     <>
       <CustomAppBar />
@@ -204,20 +238,37 @@ function Dashboard() {
           ) : null}
         </div>
 
-        <SearchAndFilter
-          searchText={searchText}
-          incidentType={incidentType}
-          page={page}
-          sortByCreatedAt={sortByCreatedAt}
-          sortByUpdatedAt={sortByUpdatedAt}
-          totalPageCount={totalPageCount}
-          handlePageChange={handlePageChange}
-          handleSortByCreatedAt={handleSortByCreatedAt}
-          handleSortByUpdatedAt={handleSortByUpdatedAt}
-          handleIncidentTypeChange={handleIncidentTypeChange}
-          handleSearchTextChange={handleSearchTextChange}
-          handleClearFilterClick={handleClearFilterClick}
-        />
+        <Accordion
+          className="my-5"
+          expanded={expanded}
+          onChange={handleAccordionChange}
+        >
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel1a-content"
+            id="panel1a-header"
+          >
+            <Typography variant="h6">Search and Filter</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <SearchAndFilter
+              searchText={searchText}
+              incidentType={incidentType}
+              status={status}
+              page={page}
+              sortByCreatedAt={sortByCreatedAt}
+              sortByUpdatedAt={sortByUpdatedAt}
+              totalPageCount={totalPageCount}
+              handlePageChange={handlePageChange}
+              handleSortByCreatedAt={handleSortByCreatedAt}
+              handleSortByUpdatedAt={handleSortByUpdatedAt}
+              handleIncidentTypeChange={handleIncidentTypeChange}
+              handleStatusChange={handleStatusChange}
+              handleSearchTextChange={handleSearchTextChange}
+              handleClearFilterClick={handleClearFilterClick}
+            />
+          </AccordionDetails>
+        </Accordion>
 
         <IncidentCardList incidents={incidents} getIncidents={getIncidents} />
 

apps/web/src/components/incidentDetail/IncidentDetail.tsx

@@ -28,6 +28,7 @@ function IncidentDetail() {
     IncidentType.MEDIUM
   );
   const [status, setStatus] = useState<Status>(Status.UNASSIGNED);
+  const [incidentRef, setIncidentRef] = useState('');
 
   const [snackbarText, setSnackbarText] = useState('');
   const [snackbarOpen, setSnackbarOpen] = useState(false);
@@ -52,6 +53,7 @@ function IncidentDetail() {
           setDescription(responseData.incident.description);
           setIncidentType(responseData.incident.type);
           setStatus(responseData.incident.status);
+          setIncidentRef(responseData.incident.incidentRef);
         }
       }
     }
@@ -105,9 +107,22 @@ function IncidentDetail() {
           <Card className="p-5">
             <div className="my-3">
               <Typography variant="h5" component="div">
-                Incident Details
+                Incident Details (#{incidentRef})
               </Typography>
             </div>
+            <div className="mt-1">
+              <TextField
+                margin="normal"
+                fullWidth
+                id="incidentRef"
+                label="Incident Ref"
+                name="incidentRef"
+                type="text"
+                autoComplete="incidentRef"
+                value={incidentRef}
+                disabled
+              />
+            </div>
             <TextField
               margin="normal"
               required
@@ -219,6 +234,7 @@ function IncidentDetail() {
           page="Incidents"
           subPage="Incident Detail"
           incidentId={incident ? incident.id : ''}
+          incidentRef={incidentRef}
         />
       </div>