new design past participants implementation

Author: applepie7864

backend/graphql/resolvers/participantResolver.ts

@@ -5,8 +5,8 @@ import IParticipantService from "../../services/interface/participantInterface";
 const participantService: IParticipantService = new ParticipantService();
 const participantResolvers = {
   Query: {
-    getAllParticipants: async (): Promise<Participant[]> => {
-      return participantService.getAllParticipants();
+    getPastParticipants: async (): Promise<Participant[]> => {
+      return participantService.getPastParticipants();
     },
     getParticipantById: async (
       _parent: undefined,
@@ -47,10 +47,10 @@ const participantResolvers = {
         password,
       }: {
         participantId: string;
-        roomNumber: number;
-        arrival: string;
-        departure: string;
-        password: string;
+        roomNumber?: number;
+        arrival?: string;
+        departure?: string;
+        password?: string;
       },
     ): Promise<boolean> => {
       return participantService.updateParticipantById(

backend/graphql/types/resolvers.ts

@@ -2,7 +2,7 @@ import { gql } from "apollo-server-express";
 
 const resolverTypes = gql`
   type Query {
-    getAllParticipants: [Participant]
+    getPastParticipants: [Participant]
     getParticipantById(participantId: String!): Participant
     getAvailableRooms: [Int]
   }
@@ -16,10 +16,10 @@ const resolverTypes = gql`
     ): Boolean
     updateParticipantById(
       participantId: String!
-      roomNumber: Int!
-      arrival: String!
-      departure: String!
-      password: String!
+      roomNumber: Int
+      arrival: String
+      departure: String
+      password: String
     ): Boolean
   }
 `;

backend/services/implementation/participantImplementation.ts

@@ -3,10 +3,11 @@ import prisma from "../../prisma";
 import IParticipantService from "../interface/participantInterface";
 
 class ParticipantService implements IParticipantService {
-  async getAllParticipants(): Promise<Participant[]> {
+  async getPastParticipants(): Promise<Participant[]> {
     try {
       const participants = await prisma.participant.findMany({
-        orderBy: [{ departure: "asc" }, { arrival: "asc" }],
+        where: {departure: { not: "" }},
+        orderBy: [{ departure: "desc" }],
       });
       return participants;
     } catch (err) {
@@ -56,20 +57,21 @@ class ParticipantService implements IParticipantService {
 
   async updateParticipantById(
     participantId: string,
-    roomNumber: number,
-    arrival: string,
-    departure: string,
-    password: string,
+    roomNumber?: number,
+    arrival?: string,
+    departure?: string,
+    password?: string,
   ): Promise<boolean> {
+    const updatedData: Record<string, any> = {};
+    if (roomNumber) updatedData.roomNumber = roomNumber;
+    if (arrival) updatedData.arrival = arrival;
+    if (departure) updatedData.departure = departure;
+    if (password) updatedData.password = password;
+
     try {
       await prisma.participant.update({
         where: { participantId },
-        data: {
-          roomNumber,
-          arrival,
-          departure,
-          password,
-        },
+        data: updatedData,
       });
       return true;
     } catch (err) {

backend/services/interface/participantInterface.ts

@@ -1,7 +1,7 @@
 import { Participant } from "@prisma/client";
 
 interface IParticipantService {
-  getAllParticipants(): Promise<Participant[]>;
+  getPastParticipants(): Promise<Participant[]>;
   getParticipantById(participantId: string): Promise<Participant | null>;
   createParticipant(
     participantId: string,
@@ -11,10 +11,10 @@ interface IParticipantService {
   ): Promise<boolean>;
   updateParticipantById(
     participantId: string,
-    roomNumber: number,
-    arrival: string,
-    departure: string,
-    password: string,
+    roomNumber?: number,
+    arrival?: string,
+    departure?: string,
+    password?: string,
   ): Promise<boolean>;
 }
 

frontend/src/components/common/CommonTable.tsx

@@ -170,17 +170,15 @@ const CommonTable = ({
       flexDir="column"
       alignContent="space-between"
       justifyContent="space-between"
-      h="100%"
     >
       <TableContainer
-        m="10px"
         border="2px solid"
-        borderColor="#E3ECEB"
+        borderColor="#E2E8F0"
         borderRadius="6px"
       >
         <Table>
           <Thead>
-            <Tr backgroundColor="#E3ECEB" w="100%">
+            <Tr backgroundColor="#EDF2F7" w="100%">
               {isSelectable ? (
                 <Th p="0px 0px 0px 20px" w="16px">
                   <Checkbox
@@ -253,7 +251,7 @@ const CommonTable = ({
               .slice((page - 1) * maxResults, page * maxResults)
               .map((row, index) => {
                 return (
-                  <Tr key={index}>
+                  <Tr key={index} borderTop="2px solid" borderColor="#E2E8F0">
                     {isSelectable ? (
                       <Td p="0px 0px 0px 20px" w="16px">
                         <Checkbox
@@ -318,8 +316,8 @@ const CommonTable = ({
         </ModalContainer>
       )}
 
-      <Box h="50px" position="relative">
-        <Box position="absolute" w="250px" h="50px" ml="10px">
+      <Box h="50px" position="relative" mt="20px">
+        <Box position="absolute" w="250px" h="50px">
           {`Showing ${(page - 1) * maxResults + 1} to ${Math.min(
             page * maxResults,
             data.length,
@@ -338,7 +336,7 @@ const CommonTable = ({
               _hover={{
                 cursor: "pointer",
               }}
-              color="#0E373B"
+              color="#15646E"
               backgroundColor="white"
               aria-label="Previous Page"
               icon={<ChevronLeftOutlinedIcon />}
@@ -347,15 +345,15 @@ const CommonTable = ({
             {pageArray.map((item, index) => {
               return (
                 <Center
-                  backgroundColor={item === page ? "#0E373B" : "white"}
+                  backgroundColor={item === page ? "#15646E" : "white"}
                   h="35px"
                   p="10px"
                   flexBasis="35px"
                   borderRadius="7px"
                   _hover={{
                     cursor: "pointer",
                     color: "white",
-                    backgroundColor: "#0E373B",
+                    backgroundColor: "#15646E",
                   }}
                   textColor={item === page ? "white" : "gray.main"}
                   onClick={() => numberPaginate(item)}
@@ -371,7 +369,7 @@ const CommonTable = ({
               _hover={{
                 cursor: "pointer",
               }}
-              color="#0E373B"
+              color="#15646E"
               backgroundColor="white"
               aria-label="Next Page"
               icon={<ChevronRightOutlinedIcon />}

frontend/src/components/pages/participants/EditPastParticipantCard.tsx

@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import { Button, Flex, Spinner } from "@chakra-ui/react";
+
+import { useMutation, useQuery } from "@apollo/client";
+
+import { GET_AVAILABLE_ROOMS } from "../../../gql/queries";
+import { UPDATE_PARTICIPANT_BY_ID } from "../../../gql/mutations";
+
+import ModalContainer from "../../common/ModalContainer";
+import FormInputField from "../../common/FormInputField";
+import FormSelectField from "../../common/FormSelectField";
+import { TableData } from "../../common/CommonTable";
+
+type EditParticipantCardProps = {
+  selected: TableData;
+  close: () => void;
+};
+
+const EditPastParticipantCard = ({
+  selected,
+  close,
+}: EditParticipantCardProps): React.ReactElement => {
+  const [arrivalDate, setArrivalDate] = useState(selected.arrival);
+  const [departureDate, setDepartureDate] = useState(selected.departure);
+  const [error, setError] = useState("");
+
+  const [updateParticipantById] = useMutation(UPDATE_PARTICIPANT_BY_ID);
+
+  const reset = () => {
+    setArrivalDate(selected.arrival);
+    setDepartureDate(selected.departure);
+    setError("");
+  };
+
+  const validate = () => {
+    if (!arrivalDate || !departureDate) {
+      setError("Missing fields.");
+      return false;
+    }
+    if (arrivalDate === selected.arrival && departureDate === selected.departure) {
+      setError("No changes made.");
+      return false;
+    }
+    const start = new Date(arrivalDate);
+    const end = new Date(departureDate);
+    if (start > end) {
+        setError("Invalid update.")
+        return false;
+    }
+    return true;
+  };
+
+  const handleSubmit = async () => {
+    setError("");
+    try {
+      const valid: boolean = validate();
+      if (valid) {
+        await updateParticipantById({
+          variables: {
+            participantId: selected.participantId,
+            arrival: arrivalDate,
+            departure: departureDate
+          },
+        });
+        reset();
+        close();
+        window.location.reload();
+      }
+    } catch (err) {
+      setError("Unable to update participant.");
+      console.log(err);
+    }
+  };
+
+  return (
+    <ModalContainer title="Edit Past Participant">
+      <Flex flexDir="column" gap="10px">
+        {error && <Flex textColor="red.500">{error}</Flex>}
+
+        <Flex flexDir="column">
+          <Flex mb="5px" color="gray.main" fontWeight="700">
+            ID Number
+          </Flex>
+          <Flex>{selected.participantId}</Flex>
+        </Flex>
+
+        <FormInputField
+            label="Arrival Date"
+            value={arrivalDate}
+            type="date"
+            onChange={(e) => {
+                setArrivalDate(e.target.value);
+            }}
+        />
+
+        <FormInputField
+            label="Departure Date"
+            value={departureDate}
+            type="date"
+            onChange={(e) => {
+                setDepartureDate(e.target.value);
+            }}
+        />
+
+        <Flex justifyContent="flex-end" mt="10px">
+          <Button
+            variant="cancel"
+            mr="10px"
+            onClick={() => {
+              reset();
+              close();
+            }}
+          >
+            Cancel
+          </Button>
+          <Button variant="primary" onClick={handleSubmit}>
+            Save
+          </Button>
+        </Flex>
+      </Flex>
+    </ModalContainer>
+  );
+};
+
+export default EditPastParticipantCard;