Merge branch 'dev' of https://github.com/uwblueprint/marillac-place i…

…nto daniel/schedule-page-ui
uwblueprint · Jul 14, 2024 · c7ac7f9 · c7ac7f9
2 parents 25c6283 + 8796d6c
commit c7ac7f9
Show file tree

Hide file tree

Showing 14 changed files with 469 additions and 133 deletions.
diff --git a/backend/graphql/types/taskType.ts b/backend/graphql/types/taskType.ts
@@ -51,8 +51,8 @@ const taskType = gql`
     assigneeId: Int
     assignerId: Int
     status: Status
-    startDate: Date
-    endDate: Date
+    startDate: DateTime
+    endDate: DateTime
     recurrenceFrequency: Recurrence_Frequency
     comments: String
   }
@@ -63,8 +63,8 @@ const taskType = gql`
     assigneeId: Int!
     assignerId: Int!
     status: Status!
-    startDate: Date!
-    endDate: Date
+    startDate: DateTime!
+    endDate: DateTime!
     recurrenceFrequency: Recurrence_Frequency
     comments: String
   }
@@ -74,8 +74,8 @@ const taskType = gql`
     getTasksByType(type: TaskType!): [TaskDTO!]
     getTasksByAssigneeId(assigneeId: Int!): [TaskAssignedDTO]
     getTasksByAssignerId(assignerId: Int!): [TaskAssignedDTO]
-    getTasksByStartDate(startDate: Date!): [TaskAssignedDTO]
-    getTasksByEndDate(endDate: Date!): [TaskAssignedDTO]
+    getTasksByStartDate(startDate: DateTime!): [TaskAssignedDTO]
+    getTasksByEndDate(endDate: DateTime!): [TaskAssignedDTO]
     getTasksByStatus(status: Status!): [TaskAssignedDTO]
   }
 

diff --git a/backend/prisma/schema.prisma b/backend/prisma/schema.prisma
@@ -112,8 +112,8 @@ model TaskAssigned {
   assignee            Resident             @relation(fields: [assigneeId], references: [userId], onDelete: Cascade, onUpdate: Cascade)
   assigneeId          Int                  @map("assignee_id")
   status              Status
-  startDate           DateTime             @map("start_date") @db.Date
-  endDate             DateTime?            @map("end_date") @db.Date
+  startDate           DateTime             @map("start_date")
+  endDate             DateTime            @map("end_date")
   recurrenceFrequency RecurrenceFrequency? @map("recurrence_frequency")
   comments            String?
 

diff --git a/backend/services/interfaces/taskService.ts b/backend/services/interfaces/taskService.ts
@@ -29,7 +29,7 @@ export interface InputTaskAssignedDTO {
   assignerId?: number;
   status: Status;
   startDate: Date;
-  endDate?: Date;
+  endDate: Date;
   recurrenceFrequency?: RecurrenceFrequency;
   comments?: string;
 }
@@ -41,7 +41,7 @@ export interface TaskAssignedDTO {
   assigneeId: number;
   status: Status;
   startDate: Date;
-  endDate: Date | null;
+  endDate: Date;
   recurrenceFrequency: RecurrenceFrequency | null;
   comments: string | null;
 }

diff --git a/frontend/package.json b/frontend/package.json
@@ -38,6 +38,7 @@
     "react-bootstrap": "^1.5.2",
     "react-dom": "^18.2.0",
     "react-google-login": "^5.2.2",
+    "react-icons": "^5.2.1",
     "react-json-schema": "^1.2.2",
     "react-jsonschema-form": "^1.8.1",
     "react-router-dom": "^6.4.3",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -91,9 +91,9 @@ const App = (): React.ReactElement => {
                 <Route
                   path={Routes.TASKS_PAGE}
                   element={
-                    // <PrivateRoute>
+                    <PrivateRoute>
                       <TasksPage />
-                    // </PrivateRoute>
+                    </PrivateRoute>
                   }
                 />
                 <Route
@@ -107,17 +107,17 @@ const App = (): React.ReactElement => {
                 <Route
                   path={Routes.SCHEDULE_PAGE}
                   element={
-                    // <PrivateRoute>
+                    <PrivateRoute>
                       <SchedulePage />
-                    // </PrivateRoute>
+                    </PrivateRoute>
                   }
                 />
                 <Route
                   path={Routes.RESIDENTS_PAGE}
                   element={
-                    // <PrivateRoute>
+                    <PrivateRoute>
                       <ResidentsPage />
-                    // </PrivateRoute>
+                    </PrivateRoute>
                   }
                 />
                 <Route

diff --git a/frontend/src/components/common/FormField.tsx b/frontend/src/components/common/FormField.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+import {
+  Button,
+  Input,
+  Select,
+  Flex,
+  FormControl,
+  FormLabel,
+  InputRightElement,
+  InputGroup,
+  InputLeftElement,
+  Checkbox,
+  Container,
+} from "@chakra-ui/react";
+
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+
+const FormField = ({
+  label,
+  value,
+  type = "text",
+  onChange,
+  onBlur,
+  submitPressed,
+  required = false,
+  isPassword = false,
+  showPassword,
+  setShowPassword,
+  leftElement
+}: {
+  label: string;
+  value: string;
+  type?: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: () => void;
+  submitPressed: boolean;
+  required?: boolean;
+  isPassword?: boolean;
+  showPassword?: boolean;
+  setShowPassword?: React.Dispatch<React.SetStateAction<boolean>>;
+  leftElement?: string;
+}) => (
+  <Flex flexDir="column" flex="1">
+    <FormControl isRequired={required}>
+      <FormLabel mb="5px" color="gray.main" fontWeight="700">
+        {label}
+      </FormLabel>
+      <InputGroup>
+        {leftElement && <InputLeftElement height='34px' pointerEvents='none' color='black'>
+          <Flex>{leftElement}</Flex>
+        </InputLeftElement>}
+
+        <Input
+          variant="primary"
+          placeholder='Enter amount'
+          borderColor={submitPressed && !value ? "red.error" : "gray.300"}
+          boxShadow={submitPressed && !value ? "0 0 2px red.error" : "none"}
+          type={
+            isPassword && setShowPassword && !showPassword ? "password" : type
+          }
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+        />
+        {isPassword && setShowPassword && (
+          <InputRightElement h="34px">
+            <Button
+              onClick={() => setShowPassword(!showPassword)}
+              bg="transparent"
+              _hover={{ bg: "transparent" }}
+            >
+              {!showPassword ? (
+                <VisibilityIcon fontSize="small" />
+              ) : (
+                <VisibilityOffIcon fontSize="small" />
+              )}
+            </Button>
+          </InputRightElement>
+        )}
+      </InputGroup>
+    </FormControl>
+  </Flex>
+);
+
+export default FormField;
diff --git a/frontend/src/components/pages/residents/ResidentModal.tsx b/frontend/src/components/pages/residents/ResidentModal.tsx
@@ -13,69 +13,13 @@ import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 
 import ModalContainer from "../../common/ModalContainer";
+import FormField from "../../common/FormField";
 
 type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const FormField = ({
-  label,
-  value,
-  type = "text",
-  onChange,
-  submitPressed,
-  required = false,
-  isPassword = false,
-  showPassword,
-  setShowPassword,
-}: {
-  label: string;
-  value: string;
-  type?: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  submitPressed: boolean;
-  required?: boolean;
-  isPassword?: boolean;
-  showPassword?: boolean;
-  setShowPassword?: React.Dispatch<React.SetStateAction<boolean>>;
-}) => (
-  <Flex flexDir="column" flex="1">
-    <FormControl isRequired={required}>
-      <FormLabel mb="5px" color="gray.main" fontWeight="700">
-        {label}
-      </FormLabel>
-      <InputGroup>
-        <Input
-          variant="primary"
-          borderColor={submitPressed && !value ? "red.error" : "gray.300"}
-          boxShadow={submitPressed && !value ? "0 0 2px red.error" : "none"}
-          type={
-            isPassword && setShowPassword && !showPassword ? "password" : type
-          }
-          value={value}
-          onChange={onChange}
-        />
-        {isPassword && setShowPassword && (
-          <InputRightElement h="34px">
-            <Button
-              onClick={() => setShowPassword(!showPassword)}
-              bg="transparent"
-              _hover={{ bg: "transparent" }}
-            >
-              {!showPassword ? (
-                <VisibilityIcon fontSize="small" />
-              ) : (
-                <VisibilityOffIcon fontSize="small" />
-              )}
-            </Button>
-          </InputRightElement>
-        )}
-      </InputGroup>
-    </FormControl>
-  </Flex>
-);
-
 const ResidentModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");

diff --git a/frontend/src/components/pages/residents/ResidentsPage.tsx b/frontend/src/components/pages/residents/ResidentsPage.tsx
@@ -9,8 +9,6 @@ import {
 } from "@chakra-ui/react";
 import { Add, Search } from "@mui/icons-material";
 
-import SideBar from "../../common/SideBar";
-
 import CommonTable, {
   ColumnInfoTypes,
   TableData,
@@ -19,17 +17,21 @@ import ResidentModal from "./ResidentModal";
 import { residentsMockData } from "../../../mocks/residents";
 
 const columnTypes: ColumnInfoTypes[] = [
+  {
+    header: "ID Number",
+    key: "residentId",
+  },
   {
     header: "Room #",
     key: "roomNumber",
   },
   {
-    header: "Departure Date",
-    key: "departureDate",
+    header: "Arrival Date",
+    key: "arrivalDate",
   },
   {
-    header: "ID Number",
-    key: "residentId",
+    header: "Departure Date",
+    key: "departureDate",
   },
   {
     header: "Email",

diff --git a/frontend/src/components/pages/schedule/SchedulePage.tsx b/frontend/src/components/pages/schedule/SchedulePage.tsx
@@ -21,8 +21,6 @@ import {
   CalendarMonth
 } from '@mui/icons-material';
 
-import SideBar from "../../common/SideBar";
-
 import {
   ScheduleType,
 } from "../../../types/ScheduleTypes";