Intw24 review dashboard data

components/admin/DashboardTableTitle.tsx

@@ -1,12 +1,18 @@
-import React, { FC } from "react";
+import React, { FC, useState, createContext, useContext } from "react";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
+import ExpandableRowTable from "./ExpandableRowTable";
+import { set } from "firebase/database";
 
 interface TitleProps {
   numFirstChoiceEntries?: number;
   numSecondChoiceEntries?: number;
   setWhichChoiceTab: (tab: number) => void;
   whichChoiceTab?: number;
+  edit: boolean;
+  toggleEdit: () => void;
+  saved?: boolean;
+  toggleSaved: () => void;
 }
 interface TabDescriptionProps {
   title: string;
@@ -26,18 +32,65 @@ const TabDescription: FC<TabDescriptionProps> = ({
   </div>
 );
 
+
+
+export const EditButton = ({ edit, toggleEdit, saved, toggleSaved}: { edit: boolean, toggleEdit: () => void, saved: any, toggleSaved: () => void}) => {
+  const editButton =
+  "border-2 border-blue rounded-full text-blue text-center px-8 py-1 m-2 inline-block capitalize bg-white";
+
+
+  // set saveFn to randomFn
+  // saveFn = randomFn;
+
+  const onSave = () => {
+    toggleSaved();
+    toggleEdit();
+  }
+
+  return (
+    ( edit ? (
+      <div className="flex">
+        <button className={`${editButton} flex items-center mr-2`} onClick={toggleEdit}>
+          Cancel
+        </button>
+        <button className={`${editButton} flex items-center`} onClick={onSave}>
+          Save
+        </button>
+      </div>
+    ): (
+      <button className={`${editButton} flex items-center`} onClick={toggleEdit}>
+        <svg
+          width="13"
+          height="12"
+          viewBox="0 0 13 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.67073 12C1.34878 12 1.07307 11.8856 0.843611 11.6568C0.614147 11.428 0.499611 11.1526 0.500001 10.8307V2.64555C0.500001 2.32399 0.614733 2.04862 0.844196 1.81944C1.07366 1.59026 1.34917 1.47586 1.67073 1.47625H6.89512L5.72439 2.64555H1.67073V10.8307H9.86585V6.76736L11.0366 5.59805V10.8307C11.0366 11.1523 10.9219 11.4276 10.6924 11.6568C10.4629 11.886 10.1874 12.0004 9.86585 12H1.67073ZM8.2122 1.81242L9.04634 2.63094L5.18293 6.48965V7.32278H6.00244L9.88049 3.44945L10.7146 4.26797L6.83659 8.14129C6.72927 8.24848 6.60478 8.33384 6.46312 8.39737C6.32146 8.4609 6.17278 8.49247 6.01707 8.49208H4.59756C4.43171 8.49208 4.29259 8.43596 4.1802 8.3237C4.06781 8.21145 4.01181 8.07269 4.0122 7.90743V6.48965C4.0122 6.33374 4.04146 6.18504 4.1 6.04356C4.15854 5.90207 4.24146 5.77793 4.34878 5.67113L8.2122 1.81242ZM10.7146 4.26797L8.2122 1.81242L9.67561 0.350792C9.90976 0.116931 10.1903 0 10.5174 0C10.8444 0 11.1199 0.116931 11.3439 0.350792L12.1634 1.18392C12.3878 1.40804 12.5 1.68088 12.5 2.00244C12.5 2.32399 12.3878 2.59683 12.1634 2.82095L10.7146 4.26797Z"
+            fill="#0073E5"
+          />
+        </svg>
+        Edit
+      </button>
+      )
+    )
+  )
+}
+
 const TableTitle: FC<TitleProps> = ({
   numFirstChoiceEntries,
   numSecondChoiceEntries,
   setWhichChoiceTab,
   whichChoiceTab,
+  edit,
+  toggleEdit,
+  saved,
+  toggleSaved
 }) => {
   const pillStyle =
     "border-2 border-blue-100 text-blue rounded-full px-4 py-2 m-2 font-large inline-block";
 
-  // const editButton =
-  //   "border-2 border-blue rounded-full text-blue text-center px-8 py-1 m-2 inline-block capitalize bg-white";
-
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setWhichChoiceTab(newValue);
   };
@@ -71,21 +124,8 @@ const TableTitle: FC<TitleProps> = ({
           />
         </Tabs>
       </div>
-      {/* <button className={`${editButton} flex items-center`}>
-        <svg
-          width="13"
-          height="12"
-          viewBox="0 0 13 12"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M1.67073 12C1.34878 12 1.07307 11.8856 0.843611 11.6568C0.614147 11.428 0.499611 11.1526 0.500001 10.8307V2.64555C0.500001 2.32399 0.614733 2.04862 0.844196 1.81944C1.07366 1.59026 1.34917 1.47586 1.67073 1.47625H6.89512L5.72439 2.64555H1.67073V10.8307H9.86585V6.76736L11.0366 5.59805V10.8307C11.0366 11.1523 10.9219 11.4276 10.6924 11.6568C10.4629 11.886 10.1874 12.0004 9.86585 12H1.67073ZM8.2122 1.81242L9.04634 2.63094L5.18293 6.48965V7.32278H6.00244L9.88049 3.44945L10.7146 4.26797L6.83659 8.14129C6.72927 8.24848 6.60478 8.33384 6.46312 8.39737C6.32146 8.4609 6.17278 8.49247 6.01707 8.49208H4.59756C4.43171 8.49208 4.29259 8.43596 4.1802 8.3237C4.06781 8.21145 4.01181 8.07269 4.0122 7.90743V6.48965C4.0122 6.33374 4.04146 6.18504 4.1 6.04356C4.15854 5.90207 4.24146 5.77793 4.34878 5.67113L8.2122 1.81242ZM10.7146 4.26797L8.2122 1.81242L9.67561 0.350792C9.90976 0.116931 10.1903 0 10.5174 0C10.8444 0 11.1199 0.116931 11.3439 0.350792L12.1634 1.18392C12.3878 1.40804 12.5 1.68088 12.5 2.00244C12.5 2.32399 12.3878 2.59683 12.1634 2.82095L10.7146 4.26797Z"
-            fill="#0073E5"
-          />
-        </svg>
-        Edit
-      </button> */}
+        <EditButton edit={edit} toggleEdit={toggleEdit} saved={saved} toggleSaved={toggleSaved}/>
+        {/* <ExpandableRowTable edit={edit} /> */}
     </div>
   );
 };

components/admin/ExpandableRowTable.tsx

@@ -1,12 +1,15 @@
 // InnerTableComponent.tsx
-import React from "react";
+import React, {useState, useEffect} from "react";
 import MUIDataTable, {
   MUIDataTableColumn,
   MUIDataTableOptions,
 } from "mui-datatables";
 import { getExpandableRowMuiTheme } from "utils/muidatatable";
 import { MuiThemeProvider } from "@material-ui/core";
 import { SkillCategory } from "@utils/muidatatable";
+import { set } from "firebase/database";
+import { fetchGraphql } from "@utils/makegqlrequest";
+import { mutations } from "graphql/queries";
 
 type ReviewerData = {
   reviewerName: string;
@@ -21,9 +24,112 @@ type ReviewerData = {
 interface InnerTableProps {
   data: ReviewerData[];
   columns: MUIDataTableColumn[];
+  edit?: boolean;
+  toggleEdit?: () => void;
+  saved?: boolean;
+  toggleSaved: any;
 }
 
-const ExpandableRowTable: React.FC<InnerTableProps> = ({ data, columns }) => {
+const ExpandableRowTable: React.FC<InnerTableProps> = ({ data, columns, edit, saved, toggleSaved}) => {
+
+  const initData1 = {"PFSG": data[0]["PFSG"], "team": data[0]["Team Player"], "D2L": data[0]["D2L"], "skill": data[0]["Skill"]}
+  const initData2 = {"PFSG": data[1]["PFSG"], "team": data[1]["Team Player"], "D2L": data[1]["D2L"], "skill": data[1]["Skill"]}
+
+  const reviewerId1 = data[0]["ReviewerId"];
+  const reviewerId2 = data[1]["ReviewerId"];
+
+  const [PFSG1, setPFSG1] = useState(initData1["PFSG"])
+  const [team1, setTeam1] = useState(initData1["team"])
+  const [D2L1, setD2L1] = useState(initData1["D2L"])
+  const [skill1, setSkill1] = useState(initData1["skill"])
+
+  const [PFSG2, setPFSG2] = useState(initData2["PFSG"])
+  const [team2, setTeam2] = useState(initData2["team"])
+  const [D2L2, setD2L2] = useState(initData2["D2L"])
+  const [skill2, setSkill2] = useState(initData2["skill"])
+
+  // Logic: When the state of saved is changed, the useEffect will run only if saved is true
+  useEffect(() => { 
+      if (saved){
+        fetchGraphql(mutations.changeRating, {id: reviewerId1, ratingToBeChanged: "passionFSG", newValue: PFSG1}).then(
+          (result) => {
+            if (result) {
+              console.log(result)
+          }},
+        )
+        fetchGraphql(mutations.changeRating, {id: reviewerId1, ratingToBeChanged: "teamPlayer", newValue: team1}).then(
+          (result) => {
+            if (result) {
+              console.log(result)
+          }},
+        )
+        fetchGraphql(mutations.changeRating, {id: reviewerId1, ratingToBeChanged: "desireToLearn", newValue: D2L1}).then(
+          (result) => {
+            if (result) {
+              console.log(result)
+          }},
+        )
+        fetchGraphql(mutations.changeRating, {id: reviewerId1, ratingToBeChanged: "skill", newValue: skill1}).then(
+          (result) => {
+            if (result) {
+              console.log(result)
+          }},
+        )
+        fetchGraphql(mutations.changeRating, {id: reviewerId2, ratingToBeChanged: "passionFSG", newValue: PFSG2}).then(
+          (result) => {
+            if (result) {
+              console.log(result)
+          }},
+        )
+        fetchGraphql(mutations.changeRating, {id: reviewerId2, ratingToBeChanged: "teamPlayer", newValue: team2}).then(
+          (result) => {
+            if (result) {
+              console.log(result)
+          }},
+        )
+        fetchGraphql(mutations.changeRating, {id: reviewerId2, ratingToBeChanged: "desireToLearn", newValue: D2L2}).then(
+          (result) => {
+            if (result) {
+              console.log(result)
+          }},
+        )
+        fetchGraphql(mutations.changeRating, {id: reviewerId2, ratingToBeChanged: "skill", newValue: skill2}).then(
+          (result) => {
+            if (result) {
+              console.log(result)
+          }},
+        )
+        toggleSaved();
+      }
+  }, [saved]);
+
+  const handleChange = (event: any, row: number) => {
+    const { id, value } = event.target;
+
+    if(edit && row == 0) {
+      if (id == "PFSG"){
+        setPFSG1(parseInt(value))
+      } else if (id == "Team Player") {
+        setTeam1(parseInt(value))
+      } else if (id == "D2L") {
+        setD2L1(parseInt(value))
+      } else if (id == "Skill"){
+        setSkill1(parseInt(value))
+      }
+    }
+    if (edit && row == 1) {
+      if (id == "PFSG"){
+        setPFSG2(parseInt(value))
+      } else if (id == "Team Player") {
+        setTeam2(parseInt(value))
+      } else if (id == "D2L") {
+        setD2L2(parseInt(value))
+      } else if (id == "Skill"){
+        setSkill2(parseInt(value))
+      }
+    }
+  };
+
   const updatedColumns = columns.map((column) => {
     if (column.name === "Skill Category") {
       return {
@@ -36,6 +142,61 @@ const ExpandableRowTable: React.FC<InnerTableProps> = ({ data, columns }) => {
         },
       };
     }
+    const getValue = (value: number, column: MUIDataTableColumn, row: number) => {
+      if (edit && row == 0) {
+        if (column.name == "PFSG"){
+          return PFSG1
+        } else if (column.name == "Team Player") {
+          return team1
+        } else if (column.name == "D2L") {
+          return D2L1
+        } else if (column.name == "Skill"){
+          return skill1
+        }
+      }
+      else if (edit && row == 1) {
+        if (column.name == "PFSG"){
+          return PFSG2
+        } else if (column.name == "Team Player") {
+          return team2
+        } else if (column.name == "D2L") {
+          return D2L2
+        } else if (column.name == "Skill"){
+          return skill2
+        }
+      }
+      else {
+        return value
+      }
+    }
+
+    // Add custom body render for the values when edit is true
+    if (edit) {
+      if (column.name === "PFSG" || column.name === "Team Player" || column.name === "D2L" || column.name === "Skill") {
+        return {
+          ...column,
+          options: {
+            ...column.options,
+            customBodyRender: (value: number, tableMeta: any) => {
+              return (
+                <input 
+                  type="number" 
+                  value={getValue(value, column, tableMeta.rowIndex)} 
+                  onChange={(e) => handleChange(e, tableMeta.rowIndex)}
+                  id={column.name}
+                  style={{ 
+                    width: '40px', 
+                    padding: '5px', 
+                    border: '1px solid #ccc', 
+                    borderRadius: '4px' 
+                  }} 
+                />
+              );
+            },
+          },
+        };
+      }
+    }
     return column;
   });