fix: 🐛 fix ui data type and add card in search and filter

yeukfei02 · Jan 3, 2023 · 1c8f229 · 1c8f229
1 parent 4af6ce5
commit 1c8f229
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 33 deletions.
diff --git a/apps/web/src/components/dashboard/Dashboard.tsx b/apps/web/src/components/dashboard/Dashboard.tsx
@@ -2,6 +2,7 @@ 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 Card from '@mui/material/Card';
 import FormControl from '@mui/material/FormControl';
 import Pagination from '@mui/material/Pagination';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -20,6 +21,7 @@ import CustomAppBar from '../customAppBar/CustomAppBar';
 import { IncidentType, UserRole } from '@prisma/client';
 import * as incidentService from '../../services/incidentService';
 import CustomBreadcrumbs from '../customBreadcrumbs/CustomBreadcrumbs';
+import { Typography } from '@mui/material';
 
 function Dashboard() {
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -196,31 +198,36 @@ function Dashboard() {
           ) : null}
         </div>
 
-        <Pagination
-          className="my-5"
-          count={totalPageCount}
-          page={page}
-          onChange={handlePageChange}
-          variant="outlined"
-          color="primary"
-          showFirstButton
-          showLastButton
-        />
-
-        <div className="flex flex-row items-center">
-          <FormControlLabel
-            control={<Switch onChange={(e) => handleSortByCreatedAt(e)} />}
-            label={`Sort by Created At (${
-              sortByCreatedAt ? 'Ascending' : 'Descending'
-            })`}
-          />
-          <FormControlLabel
-            control={<Switch onChange={(e) => handleSortByUpdatedAt(e)} />}
-            label={`Sort by Updated At (${
-              sortByUpdatedAt ? 'Ascending' : 'Descending'
-            })`}
+        <Card className="p-5 mt-5">
+          <Typography variant="h5">
+            <span className="font-bold">Search and Filter</span>
+          </Typography>
+          <Pagination
+            className="my-5"
+            count={totalPageCount}
+            page={page}
+            onChange={handlePageChange}
+            variant="outlined"
+            color="primary"
+            showFirstButton
+            showLastButton
           />
-        </div>
+
+          <div className="flex flex-row items-center">
+            <FormControlLabel
+              control={<Switch onChange={(e) => handleSortByCreatedAt(e)} />}
+              label={`Sort by Created At (${
+                sortByCreatedAt ? 'Ascending' : 'Descending'
+              })`}
+            />
+            <FormControlLabel
+              control={<Switch onChange={(e) => handleSortByUpdatedAt(e)} />}
+              label={`Sort by Updated At (${
+                sortByUpdatedAt ? 'Ascending' : 'Descending'
+              })`}
+            />
+          </div>
+        </Card>
 
         <IncidentCardList incidents={incidents} getIncidents={getIncidents} />
 

diff --git a/apps/web/src/components/incidentDetail/IncidentDetail.tsx b/apps/web/src/components/incidentDetail/IncidentDetail.tsx
@@ -11,13 +11,14 @@ import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import { useParams } from 'react-router';
 import * as incidentService from '../../services/incidentService';
-import { Incident, IncidentType, Status } from '@prisma/client';
+import { IncidentType, Status } from '@prisma/client';
+import { IncidentRes } from '../../interface/getIncidentById.interface';
 import CustomBreadcrumbs from '../customBreadcrumbs/CustomBreadcrumbs';
 
 function IncidentDetail() {
   const { id } = useParams();
 
-  const [incident, setIncident] = useState<Incident>();
+  const [incident, setIncident] = useState<IncidentRes>();
   const [title, setTitle] = useState('');
   const [description, setDescription] = useState('');
   const [incidentType, setIncidentType] = useState<IncidentType>(
@@ -157,9 +158,7 @@ function IncidentDetail() {
                 type="text"
                 autoComplete="creator"
                 value={
-                  (incident as any) && (incident as any).creator
-                    ? (incident as any).creator.name
-                    : ''
+                  incident && incident.creator ? incident.creator.name : ''
                 }
                 disabled
               />
@@ -173,9 +172,7 @@ function IncidentDetail() {
               type="text"
               autoComplete="assignee"
               value={
-                (incident as any) && (incident as any).assignee
-                  ? (incident as any).assignee.name
-                  : ''
+                incident && incident.assignee ? incident.assignee.name : ''
               }
               disabled
             />
@@ -204,7 +201,7 @@ function IncidentDetail() {
         <CustomBreadcrumbs
           page="Incidents"
           subPage="Incident Detail"
-          incidentId={incident ? (incident as any).id : ''}
+          incidentId={incident ? incident.id : ''}
         />
       </div>
 

diff --git a/apps/web/src/interface/getIncidentById.interface.ts b/apps/web/src/interface/getIncidentById.interface.ts
@@ -0,0 +1,31 @@
+export interface IncidentRes {
+  id: string;
+  title: string;
+  description: string;
+  type: string;
+  creator_id: string;
+  assignee_id: string;
+  status: string;
+  created_at: Date;
+  updated_at: Date;
+  creator: Creator;
+  assignee: Assignee;
+}
+
+export interface Creator {
+  id: string;
+  name: string;
+  email: string;
+  created_at: Date;
+  updated_at: Date;
+  userRoles: string[];
+}
+
+export interface Assignee {
+  id: string;
+  name: string;
+  email: string;
+  created_at: Date;
+  updated_at: Date;
+  userRoles: string[];
+}