agiledev-students-fall2023 · Tauke190 · Nov 5, 2023 · Nov 5, 2023 · Nov 5, 2023 · Nov 5, 2023
diff --git a/back-end/app.js b/back-end/app.js
@@ -7,7 +7,7 @@ import path from "path";
 import login from "./src/routes/login.js";
 import studentIssues from "./src/routes/studentIssues.js";
 import adminIssues from "./src/routes/adminIssues.js";
-
+import adminIssuesView from "./src/routes/adminIssueViewDetails.js";
 // import multer from "multer"; - configure when required
 
 const app = express(); // instantiate an Express object
@@ -47,8 +47,9 @@ app.use("/api/login", login);
 // Student Side Issue Retrieval
 app.use("/api/issues/student", studentIssues);
 
-// Admin side issue retrieval
 app.use("/api/issues/admin", adminIssues);
 
+app.use("/api/issues/admin/:dashboard", adminIssuesView);
+
 // export the express app we created to make it available to other modules
 export default app;
diff --git a/back-end/src/controllers/adminIssueViewDetailsHandler.js b/back-end/src/controllers/adminIssueViewDetailsHandler.js
@@ -0,0 +1,23 @@
+import axios from "axios";
+
+// The function retrieves all the issues related to this departmen
+export async function adminIssueViewDetailsHandler(req, res) {
+  const { paramName } = req.params;
+  try {
+    // Assuming the data you want is at the response.data property
+    const response = await axios.get(
+      `${process.env.BACKEND_URL}/json/mockapi.json` // will be replaced with db call
+    );
+
+    // Assuming response.data is an array of items and each item has a index
+    const filteredData = response.data.filter(
+      (item) => String(item.index) === String(paramName)
+    );
+
+    res.json(filteredData); // Send only the data that matches the specific issue index
+  } catch (error) {
+    // Log the error and send an appropriate response
+    console.error("Error retrieving data:", error.message);
+    res.status(500).send("An error occurred while retrieving the data.");
+  }
+}
diff --git a/back-end/src/controllers/adminIssuesHandler.js b/back-end/src/controllers/adminIssuesHandler.js
@@ -1,18 +1,23 @@
 import axios from "axios";
 
-export async function issueRetrievalHandler(req, res) {
-    const { paramName } = req.params;
+export async function adminIssuesHandler(req, res) {
+  const { paramName } = req.params;
+  try {
+    // Assuming the data you want is at the response.data property
+    const response = await axios.get(
+      `${process.env.BACKEND_URL}/json/mockapi.json` // will be replaced with db call
+    );
+    console.log(response);
 
-    try {
-        const response = await axios.get(
-            `${process.env.BACKEND_URL}/json/mockapi.json`
-        );
+    // Assuming response.data is an array of items and each item has a index
+    const filteredData = response.data.filter(
+      (item) => item.departments.includes(paramName)
+    );
 
-        const filteredData = response.data.filter((item) => item.departments.includes(paramName));
-
-        res.json(filteredData);
-    } catch (error) {
-        console.error("Error retrieving data:", error.message);
-        res.status(500).send("An error occurred while retrieving the data.");
-    }
+    res.json(filteredData); // Send only the data that matches the specific issue index
+  } catch (error) {
+    // Log the error and send an appropriate response
+    console.error("Error retrieving data:", error.message);
+    res.status(500).send("An error occurred while retrieving the data.");
+  }
 }
diff --git a/back-end/src/routes/adminIssueViewDetails.js b/back-end/src/routes/adminIssueViewDetails.js
@@ -0,0 +1,8 @@
+import express from "express";
+import { adminIssueViewDetailsHandler } from "../controllers/adminIssueViewDetailsHandler.js";
+
+const router = express.Router();
+
+router.get("/:paramName", adminIssueViewDetailsHandler);
+
+export default router;
diff --git a/back-end/src/routes/adminIssues.js b/back-end/src/routes/adminIssues.js
@@ -1,8 +1,8 @@
 import express from "express";
-import { issueRetrievalHandler } from "../controllers/adminIssuesHandler.js";
+import { adminIssuesHandler } from "../controllers/adminIssuesHandler.js";
 
 const router = express.Router();
 
-router.get("/:paramName", issueRetrievalHandler);
+router.get("/:paramName", adminIssuesHandler);
 
 export default router;
diff --git a/front-end/src/components/admin/AdminIssueDetails/AdminIssueDetails.css b/front-end/src/components/admin/AdminIssueDetails/AdminIssueDetails.css
@@ -6,11 +6,8 @@
     background-color: var(--background);
     color: var(--text);
     display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
     margin: 0;
     padding-left: 30px;
-    position: relative;
     text-align: start;
 }
 
@@ -29,15 +26,17 @@
 .admin-issue .left-bar{
   display: flex;
   flex-direction: column;
-  justify-content: space-evenly;
+  width: 100%;
+  height: 100%;
 }
 
 .admin-issue .right-bar{
   display: flex;
   flex-direction: column;
   margin-top: 20px;
   margin-left: 20px;
-  justify-content: space-between;
+  width: 100%;
+  height: 100%;
 }
 
 

diff --git a/front-end/src/components/admin/AdminIssueDetails/AdminIssueDetails.js b/front-end/src/components/admin/AdminIssueDetails/AdminIssueDetails.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
 import UpdatesBox from '../UpdateBox/UpdatesBox.js';
 import CommentBox from '../CommentBox/CommentBox.js';
 import TagSidebar from '../TagSideBar/TagSidebar.js';
@@ -15,7 +16,7 @@ import axios from 'axios';
 const AdminIssueDetails = () => {
   const { index } = useParams();
   const [updateBoxes, setUpdateBoxes] = useState([]);
-  const [specificIssue, setSpecificIssue] = useState([]);
+  const [specificIssue, setSpecificIssue] = useState();
   // const [commentBoxValue, setcommentBoxValue] = useState('');
   const [loading, setLoading] = useState(false);
   const BASE_URL = process.env.REACT_APP_BACKEND_URL;
@@ -50,9 +51,12 @@ const AdminIssueDetails = () => {
 
     async function fetchData() {
       try {
-        const response = await fetch('https://hasiburratul.github.io/mock-api/MOCK_DATA_ADMIN.json');
+        const response = await fetch(`${BASE_URL}/api/issues/admin/IT/${index}`);
+        // const response = await fetch('https://hasiburratul.github.io/mock-api/MOCK_DATA_ADMIN.json');
         const result = await response.json();
-        setSpecificIssue(result);
+        setSpecificIssue(result[0]);
+        setUpdateBoxes(result[0].comments);
+
         setLoading(true);
       } catch (error) {
         console.error(error);
@@ -65,31 +69,31 @@ const AdminIssueDetails = () => {
 
     <div>
       { loading
-? (
+      ? (
         <div className="admin-issue">
             <div className="left-bar">
-              <h1>{specificIssue[index].title}</h1>
+              <h1>{specificIssue.title}</h1>
               {/* Passses the issue fetched from the API */}
-              <PriorityDropdown currentState={specificIssue[index]}/>
+              <PriorityDropdown currentState={specificIssue}/>
               <div className="issue-history-text">
                 <h2> Issue History </h2>
-                <ProgressionDropdown currentState={specificIssue[index]}/>
+                <ProgressionDropdown currentState={specificIssue}/>
               </div>
 
               <div className="all-updates">
                 {
                     updateBoxes.map((item, index) => {
-                      return <UpdatesBox key={index} index ={updateBoxes.length - index + 1}description={item} />;
+                      return <UpdatesBox key={index} name={"Update"} index ={updateBoxes.length - (index)}description={item} />;
                     })
                 }
-                  <UpdatesBox description={specificIssue[index].description} />
+                <UpdatesBox name={"Issue Details"} description={specificIssue.description} />
               </div>
               <CommentBox onAdd={postUpdateCommentAdd}/>
             </div>
             <div className="right-bar">
-                <StudentDetails props={specificIssue[index]}/>
-                <TagSidebar name="Departments" tags = {specificIssue[index].departments} />
-                <TagSidebar name="Attachments" tags = {["Attachtment1", "Attachment2"]} />
+                <StudentDetails props={specificIssue}/>
+                <TagSidebar name="Departments" tags = {specificIssue.departments} />
+                <TagSidebar name="Attachments" tags = {specificIssue.attachments} />
                 <div className="marked-as-solve-btn">
                   <button onClick={postMarkAsResolved} type="submit">Mark as Resolved</button>
                 </div>

diff --git a/front-end/src/components/admin/AdminNavbar/AdminNavbar.js b/front-end/src/components/admin/AdminNavbar/AdminNavbar.js
@@ -3,7 +3,7 @@ import logoutImage from "../../../assets/images/logout-icon.png";
 import "./AdminNavbar.css";
 
 export default function AdminNavbar({ adminName, unresolvedIssues }) {
-    // const [showNotification, setShowNotification] = useState(false);
+  //    const [showNotification, setShowNotification] = useState(false);
     const navigate = useNavigate();
 
     const handleLogout = () => {
@@ -16,7 +16,6 @@ export default function AdminNavbar({ adminName, unresolvedIssues }) {
             <div className="admin-info">
                 <span className="admin-name">Hello, {adminName}</span>
                 <span className="unresolved-issues">{unresolvedIssues}</span>
-
                 <img
                     src={logoutImage}
                     alt="Logout"

diff --git a/front-end/src/components/admin/IssueCard/IssueCard.js b/front-end/src/components/admin/IssueCard/IssueCard.js
@@ -8,7 +8,7 @@ function IssueCard({ issue }) {
    useEffect(() => {
    }, []);
    const onClickIssueCard = async (event) => {
-      navigate('/admin/dashboard/' + (issue.index - 1));
+      navigate('/admin/dashboard/' + (issue.index));
    };
    return (
       <div onClick = {onClickIssueCard} key={issue.index} className="issue-card-admin">

diff --git a/front-end/src/components/admin/PriorityDropDown/PriorityDropdown.js b/front-end/src/components/admin/PriorityDropDown/PriorityDropdown.js
@@ -1,4 +1,3 @@
-/* eslint-disable */
 import { useState, useEffect } from 'react';
 import axios from 'axios';
 import Select from 'react-select';
@@ -13,7 +12,6 @@ const PriorityDropdown = ({ currentState }) => {
     { value: 'Reopened', label: 'Reopened', color: '#9d690235', textColor: '#9d6a02', isBold: 'true' }
   ];
   const [selectedOption, setSelectedOption] = useState(options[0]);
-
 
   const postPriorityUpdated = async (param) => {
     try {
@@ -33,17 +31,18 @@ const PriorityDropdown = ({ currentState }) => {
     control: (base) => ({
       ...base,
       backgroundColor: selectedOption.color,
-      color:'blue'
+      color: 'blue'
     }),
     option: (provided, state) => ({
       ...provided,
       backgroundColor: state.data.color,
       color: state.data.textColor,
       fontWeight: state.data.isBold ? 'bold' : 'normal'
-    }), singleValue: provided => ({
+    }),
+singleValue: provided => ({
       ...provided,
       color: selectedOption.textColor,
-      fontWeight : 'bold'
+      fontWeight: 'bold'
     })
   };
   const setDefaultValue = () => {

diff --git a/front-end/src/components/admin/ProgressionDropdown/ProgressionDropdown.js b/front-end/src/components/admin/ProgressionDropdown/ProgressionDropdown.js
@@ -1,21 +1,19 @@
-/* eslint-disable */
 import { useState, useEffect } from 'react';
 import './ProgressionDropdown.css';
 import axios from 'axios';
 import Select from 'react-select';
 
 const ProgressionDropdown = ({ currentState }) => {
-
   const options = [
-    { value: 'Open', label: 'Not Started',color: '#b82c1c37',textColor: '#b82c1c',isBold: 'true'},
-    { value: 'In Progress', label: 'In Progress',color: '#1f6deb37',textColor: '#1f6eeb',isBold: 'true'},
-    { value: 'Action Required', label: 'Awaiting Response',color:'#9d690235',textColor: '#9d6a02',isBold: 'true'},
-    { value: 'Resolved', label: 'Resolved',color: '#2386373a',textColor: '#238636',isBold: 'true'},
+    { value: 'Open', label: 'Not Started', color: '#b82c1c37', textColor: '#b82c1c', isBold: 'true' },
+    { value: 'In Progress', label: 'In Progress', color: '#1f6deb37', textColor: '#1f6eeb', isBold: 'true' },
+    { value: 'Action Required', label: 'Awaiting Response', color: '#9d690235', textColor: '#9d6a02', isBold: 'true' },
+    { value: 'Resolved', label: 'Resolved', color: '#2386373a', textColor: '#238636', isBold: 'true' }
   ];
 
   const [selectedOption, setSelectedOption] = useState(options[0]);
   const BASE_URL = process.env.REACT_APP_BACKEND_URL;
-  
+
   const dummyPostProgressionUpdated = async (param) => {
     try {
         await axios.post(`${BASE_URL}/dummyPostPriorityUpdated`, null);
@@ -25,7 +23,7 @@ const ProgressionDropdown = ({ currentState }) => {
 };
 
 const handleOptionChange = (newselectedOption) => {
-  setDefaultValue()
+  setDefaultValue();
   setSelectedOption(newselectedOption);
   dummyPostProgressionUpdated(newselectedOption);
 };
@@ -34,41 +32,40 @@ const customStyles = {
   control: (base) => ({
     ...base,
     backgroundColor: selectedOption.color,
-    color:'blue'
+    color: 'blue'
   }),
   option: (provided, state) => ({
     ...provided,
     backgroundColor: state.data.color,
     color: state.data.textColor,
     fontWeight: state.data.isBold ? 'bold' : 'normal'
-  }), singleValue: provided => ({
+  }),
+singleValue: provided => ({
     ...provided,
     color: selectedOption.textColor,
-    fontWeight : 'bold'
+    fontWeight: 'bold'
   })
 };
 
 const setDefaultValue = () => {
-  switch(currentState.currentStatus)
-  {
+  switch (currentState.currentStatus) {
       case "Open":
-        setSelectedOption(options[0])
+        setSelectedOption(options[0]);
         break;
       case "In Progress":
-        setSelectedOption(options[1])
+        setSelectedOption(options[1]);
         break;
       case "Action Required":
-        setSelectedOption(options[2])
+        setSelectedOption(options[2]);
         break;
       case "Resolved":
-        setSelectedOption(options[3])
+        setSelectedOption(options[3]);
         break;
   }
-}
-
+};
 
   useEffect(() => {
-    setDefaultValue()
+    setDefaultValue();
   }, []);
 
   return (

diff --git a/front-end/src/components/admin/TagSideBar/TagSidebar.js b/front-end/src/components/admin/TagSideBar/TagSidebar.js
@@ -56,11 +56,11 @@ function TagSidebar({ name, tags }) {
         <button className="plus-button" onClick={toggleInput}>+</button>
       </div>
       <ul>
-        <l1>
+        <li>
             {inputVisible && <input type="text" onKeyDown={handleAddDepartment} placeholder="Enter new Department" value={inputValue} onChange={handleInputChange} />}
 
-        </l1>
-        {departmentTags.map((tag, index) => (
+        </li>
+        {departmentTags.filter(item => item != null).map((tag, index) => (
           <li key={index}>
             <div className="round-tag ">
                 <span>{tag}</span>

diff --git a/front-end/src/components/admin/UpdateBox/UpdatesBox.js b/front-end/src/components/admin/UpdateBox/UpdatesBox.js
@@ -1,8 +1,8 @@
 import './UpdatesBox.css';
-function UpdatesBox({ index, description }) {
+function UpdatesBox({ name, index, description }) {
   return (
       <div className="admin-update-box">
-      <h3>Update 1{index}</h3>
+      <h3>{name} {index}</h3>
         <p>{description}</p>
       </div>
   );

diff --git a/front-end/src/layouts/AdminDashboard/AdminDashboard.js b/front-end/src/layouts/AdminDashboard/AdminDashboard.js
@@ -33,6 +33,7 @@ function AdminDashboard() {
                     `${BASE_URL}/api/issues/admin/${currentDepartment}`
                 );
                 setIssues(response.data);
+                console.log(response.data);
             } catch (error) {
                 if (isMounted) {
                     console.error('Error fetching data:', error);