Create a user interface for Questionnaire #10 (#18)

* Initial commit * added rotes * Making the base for questionnaire page * added css for questionnaire page * Sorting using the name of questionnaire item * UI Changes * replaced icons --------- Co-authored-by: kmalick <[email protected]> Co-authored-by: Riya <[email protected]> Co-authored-by: kalyan-karnati <[email protected]>
expertiza · Feb 5, 2024 · 2c7a58c · 2c7a58c
1 parent c4fca1a
commit 2c7a58c
Show file tree

Hide file tree

Showing 6 changed files with 261 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -65,7 +65,6 @@ Implemented the UI according to requirements given under task 2:
 ![image](https://github.com/subhang51011/reimplementation-front-end/assets/56782318/d1bafff1-9c73-4e6c-8847-7230f9e15e54)
 ![image](https://github.com/subhang51011/reimplementation-front-end/assets/56782318/c7dc72f5-5b2b-44de-919d-f672a2355abb)
 
-
 Implemented import modal:
 ![image](https://github.com/subhang51011/reimplementation-front-end/assets/56782318/b6070758-3a91-4445-8708-6d3d59566808)
 
@@ -86,3 +85,5 @@ Kartiki Bhandakkar
 - Shreya Vaidya <[email protected]>
 - Shonil Bhide <[email protected]>
 - Subhang Boorlagadda <[email protected]>
+
+To learn React, check out the [React documentation](https://reactjs.org/).
diff --git a/src/App.tsx b/src/App.tsx
@@ -12,9 +12,9 @@ import Assignment from './pages/Assignments/Assignment'
 import AssignmentEditor from "./pages/Assignments/AssignmentEditor";
 import { loadAssignment } from "pages/Assignments/AssignmentUtil";
 import ErrorPage from "./router/ErrorPage";
-import NotFound from "./router/NotFound";
 import ProtectedRoute from "./router/ProtectedRoute";
 import { ROLE } from "./utils/interfaces";
+import NotFound from "./router/NotFound";
 import Participants from "pages/Participants/Participant";
 import ParticipantEditor from "pages/Participants/ParticipantEditor";
 import { loadParticipantDataRolesAndInstitutions } from "pages/Participants/participantUtil";
@@ -31,6 +31,7 @@ import TA from "pages/TA/TA";
 import TAEditor from "pages/TA/TAEditor";
 import { loadTAs } from "pages/TA/TAUtil";
 
+
 function App() {
   const router = createBrowserRouter([
     {
@@ -189,13 +190,20 @@ function App() {
                 },
               ],
             },
+            // Add the "Questionnaire" route here
+            {
+              path: "questionnaire",
+              element: <Questionnaire />,
+            },
           ],
         },
         { path: "*", element: <NotFound /> },
+        // Add the "Questionnaire" route here if it's not under the administrator section
+        { path: "questionnaire", element: <Questionnaire /> },
       ],
     },
   ]);
-
+  
   return <RouterProvider router={router} />;
 }
 

diff --git a/src/pages/Questionnaire/Questionnaire.css b/src/pages/Questionnaire/Questionnaire.css
@@ -0,0 +1,39 @@
+.questionnaire-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    min-height: 100vh;
+    padding-top: 20px; /* Add padding to the top */
+  }
+  .questionnaire-table {
+    border-collapse: collapse;
+    width: 70%; /* Adjust the width as needed */
+    margin-top: 20px; /* Add some spacing from the button and label */
+  }
+
+  .questionnaire-table th, .questionnaire-table td {
+    border: 1px solid #ccc;
+    padding: 8px;
+    text-align: left;
+  }
+
+  .questionnaire-table th {
+    background-color: #f2f2f2;
+  }
+
+  .questionnaire-table tr:nth-child(even) {
+    background-color: #f2f2f2;
+  }
+
+  .questionnaire-table tr:hover {
+    background-color: #ddd;
+  }
+  .centered-table {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    height: 100%;
+  }
+
diff --git a/src/pages/Questionnaire/dummyData.json b/src/pages/Questionnaire/dummyData.json
@@ -0,0 +1,43 @@
+[
+    {
+      "name": "Review",
+      "creationDate": "2023-01-10",
+      "updatedDate": "2023-01-15"
+    },
+    {
+      "name": "Metareview",
+      "creationDate": "2023-02-05",
+      "updatedDate": "2023-02-10"
+    },
+    {
+      "name": "Author Feedback",
+      "creationDate": "2023-03-20",
+      "updatedDate": "2023-03-25"
+    },
+    {
+      "name": "Teammate Review",
+      "creationDate": "2023-04-15",
+      "updatedDate": "2023-04-20"
+    },
+    {
+      "name": "Assignment Survey",
+      "creationDate": "2023-05-01",
+      "updatedDate": "2023-05-06"
+    },
+    {
+      "name": "Global Survey",
+      "creationDate": "2023-06-10",
+      "updatedDate": "2023-06-15"
+    },
+    {
+      "name": "Course Survey",
+      "creationDate": "2023-07-20",
+      "updatedDate": "2023-07-25"
+    },
+    {
+      "name": "Bookmark Rating",
+      "creationDate": "2023-08-05",
+      "updatedDate": "2023-08-10"
+    }
+  ]
+
diff --git a/src/pages/Questionnaire/questionnaire.tsx b/src/pages/Questionnaire/questionnaire.tsx
@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import './Questionnaire.css';
+import {Button} from "react-bootstrap";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrash, faPencilAlt, faEye } from '@fortawesome/free-solid-svg-icons';
+import dummyData from './dummyData.json';
+import {BsPencilFill, BsPersonXFill} from "react-icons/bs";
+import {BiCopy}from "react-icons/bi";
+import { BsPlusSquareFill } from "react-icons/bs";
+
+
+function Questionnaire() {
+  const [showOnlyMyItems, setShowOnlyMyItems] = useState(true);
+  const [expandedItem, setExpandedItem] = useState<number | null>(null);
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | 'default' | null>(null);
+
+  const questionnaireItems = dummyData; // Use dummy data for items
+
+  const handleAddButtonClick = () => {
+    console.log('Add button clicked');
+    // Add your logic for adding questionnaire items here
+  };
+  type QuestionnaireItem = {
+    name: string;
+    creationDate: string;
+    updatedDate: string;
+    };
+
+
+  const handleItemClick = (index: number) => {
+    if (expandedItem === index) {
+      setExpandedItem(null);
+    } else {
+      setExpandedItem(index);
+    }
+  };
+
+  const handleDelete = (item: QuestionnaireItem) => {
+    console.log(`Delete button clicked for item:`, item);
+    // Add your logic for deleting the item here
+  };
+
+  const handleEdit = (item: QuestionnaireItem) => {
+    console.log(`Edit button clicked for item:`, item);
+    // Add your logic for editing the item here
+  };
+
+  const handleShow = (item: QuestionnaireItem) => {
+    console.log(`Show button clicked for item:`, item);
+    // Add your logic for showing the item here
+  };
+
+  const handleSortByName = () => {
+    if (sortOrder === 'asc') {
+      setSortOrder('desc');
+    } else {
+      setSortOrder('asc');
+    }
+  };
+
+  const sortedQuestionnaireItems = [...questionnaireItems];
+
+  if (sortOrder === 'asc') {
+    sortedQuestionnaireItems.sort();
+  } else if (sortOrder === 'desc') {
+    sortedQuestionnaireItems.sort().reverse();
+  }
+
+  return (
+    <div className="questionnaire-container">
+      <h1>Questionnaire List</h1>
+      <button onClick={handleAddButtonClick}>Add</button>
+
+      <br />
+
+      <label>
+        <input
+          type="checkbox"
+          checked={showOnlyMyItems}
+          onChange={() => setShowOnlyMyItems(!showOnlyMyItems)}
+        />
+        Display my items only
+      </label>
+
+      <table className="questionnaire-table">
+        <thead>
+          <tr>
+            <th onClick={handleSortByName}>
+              Name {sortOrder === 'asc' && '↑'} {sortOrder === 'desc' && '↓'} {sortOrder === null && '↑↓'}
+            </th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {sortedQuestionnaireItems.map((item, index) => (
+            <React.Fragment key={index}>
+              <tr>
+                <td onClick={() => handleItemClick(index)}>{item.name}</td>
+                <td>
+
+                <Button variant="outline-success" onClick={() => handleAddButtonClick}>
+                <BsPlusSquareFill />
+              </Button>
+
+                </td>
+              </tr>
+              {expandedItem === index && (
+  <tr className="expanded-row">
+    <td colSpan={4}>
+      <table className='expanded-row centered-table'>
+        <tbody>
+          <tr>
+            <th><strong>Name:</strong></th>
+
+
+
+            <th><strong>Creation Date:</strong></th>
+
+
+            <th><strong>Updated Date:</strong></th>
+
+
+            <th><strong>Actions:</strong></th>
+
+
+          </tr>
+          <tr> <td>{item.name}</td>
+            <td>{item.creationDate}</td>
+            <td>{item.updatedDate}</td>
+            <td>
+
+            <Button
+          variant="outline-danger"
+          size="sm"
+          className="ms-sm-2"
+          onClick={() => handleDelete(item)}
+        >
+          <BsPersonXFill />
+        </Button>
+              <span className="icon-space"></span>
+              <Button variant="outline-warning" size="sm" onClick={() => handleEdit(item)}>
+          <BsPencilFill />
+        </Button>
+
+              <span className="icon-space"></span>
+
+              <Button variant="outline-warning" size="sm" onClick={() => handleShow(item)}>
+          <BiCopy />
+        </Button>
+
+            </td>
+
+          </tr>
+        </tbody>
+      </table>
+    </td>
+  </tr>
+)}
+            </React.Fragment>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Questionnaire;
diff --git a/src/pages/Users/userColumns.tsx b/src/pages/Users/userColumns.tsx
@@ -2,7 +2,6 @@ import {createColumnHelper, Row} from "@tanstack/react-table";
 import {Button} from "react-bootstrap";
 import {BsPencilFill, BsPersonXFill} from "react-icons/bs";
 import {IUserResponse as IUser} from "../../utils/interfaces";
-
 /**
  * @author Ankur Mundra on April, 2023
  */