E2538 Reimplementing Questionnaire Page

src/App.tsx

@@ -23,7 +23,7 @@ import UserEditor from "./pages/Users/UserEditor";
 import Users from "./pages/Users/User";
 import { loadUserDataRolesAndInstitutions } from "./pages/Users/userUtil";
 import Home from "pages/Home";
-import Questionnaire from "pages/EditQuestionnaire/Questionnaire";
+import Questionnaire from "pages/Questionnaires/Questionnaires";
 import Courses from "pages/Courses/Course";
 import CourseEditor from "pages/Courses/CourseEditor";
 import { loadCourseInstructorDataAndInstitutions } from "pages/Courses/CourseUtil";
@@ -40,6 +40,14 @@ import ViewSubmissions from "pages/Assignments/ViewSubmissions";
 import ViewScores from "pages/Assignments/ViewScores";
 import ViewReports from "pages/Assignments/ViewReports";
 import ViewDelayedJobs from "pages/Assignments/ViewDelayedJobs";
+
+
+// E2538 Additions
+import QuestionnaireEditor from "pages/Questionnaires/QuestionnaireEditor";
+import { loadQuestionnaire } from "pages/Questionnaires/QuestionnaireUtils";
+
+
+
 function App() {
   const router = createBrowserRouter([
     {
@@ -285,11 +293,31 @@ function App() {
             {
               path: "questionnaire",
               element: <Questionnaire />,
+              loader: loadQuestionnaire,
             },
           ],
         },
         { path: "*", element: <NotFound /> },
-        { path: "questionnaire", element: <Questionnaire /> }, // Added the Questionnaire route
+
+
+        // FIxME: Project 4 E2538
+        {
+          path: "questionnaires",
+          element: <ProtectedRoute element={<Questionnaire />} leastPrivilegeRole={ROLE.INSTRUCTOR} />,
+          loader: loadQuestionnaire,
+          children: [
+            {
+              path: "new",
+              element: <QuestionnaireEditor mode="create" />,
+              loader: loadQuestionnaire,
+            },
+            {
+              path: "edit/:id",
+              element: <QuestionnaireEditor mode="update" />,
+              loader: loadQuestionnaire,
+            },
+          ],
+        },
       ],
     },
   ]);

src/components/Alert.tsx

@@ -7,7 +7,7 @@ import { alertActions } from "store/slices/alertSlice";
  * @author Ankur Mundra on May, 2023
  */
 
-interface IAlertProps {
+export interface IAlertProps {
   variant: string;
   title?: string;
   message: string;

src/components/Table/Table.tsx

@@ -146,7 +146,6 @@ const Table: React.FC<TableProps> = ({
 
   return (
     <>
-      <Container>
         <Row className="mb-md-2">
           <Col md={{ span: 12 }}>
             {isGlobalFilterVisible && (
@@ -158,11 +157,9 @@ const Table: React.FC<TableProps> = ({
             {isGlobalFilterVisible ? " Hide" : " Show"}
           </span>{" "}
         </Row>
-      </Container>
-      <Container>
         <Row>
           <Col md={tableSize}>
-            <BTable striped hover responsive size="sm">
+            <BTable striped hover responsive size="sm" >
               <thead className="table-secondary">
                 {getHeaderGroups().map((headerGroup) => (
                   <tr key={headerGroup.id}>
@@ -226,7 +223,6 @@ const Table: React.FC<TableProps> = ({
             )}
           </Col>
         </Row>
-      </Container>
     </>
   );
 };

src/layout/Header.tsx

@@ -128,7 +128,7 @@ const Header: React.FC = () => {
                     <NavDropdown.Item as={Link} to="/assignments">
                       Assignments
                     </NavDropdown.Item>
-                    <NavDropdown.Item as={Link} to="/questionnaire">
+                    <NavDropdown.Item as={Link} to="/questionnaires">
                       Questionnaire
                     </NavDropdown.Item>
                     <NavDropdown.Item as={Link} to="/edit-questionnaire">

src/pages/Questionnaire/Questionnaire.css → src/pages/Questionnaires/Questionnaire.css

@@ -4,12 +4,13 @@
     align-items: center;
     text-align: center;
     min-height: 100vh;
-    padding-top: 20px; /* Add padding to the top */
+    padding-top: 20px;
   }
+
   .questionnaire-table {
     border-collapse: collapse;
-    width: 70%; /* Adjust the width as needed */
-    margin-top: 20px; /* Add some spacing from the button and label */
+    width: 70%;
+    margin-top: 20px;
   }
 
   .questionnaire-table th, .questionnaire-table td {
@@ -29,11 +30,11 @@
   .questionnaire-table tr:hover {
     background-color: #ddd;
   }
+
   .centered-table {
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     height: 100%;
-  }
-
+  }