E2343. Questionnaire UI

README.md

@@ -6,6 +6,8 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 In the project directory, you can run:
 
+### `npm install`
+To install necessary packages.
 ### `npm start`
 
 Runs the app in the development mode.\
@@ -14,6 +16,11 @@ Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
 The page will reload when you make changes.\
 You may also see any lint errors in the console.
 
+### `npm install -g json-server`
+Installs the JSON server.
+### `json-server --watch db.json --port 3030`
+Runs the JSON server.
+
 ### `npm test`
 
 Launches the test runner in the interactive watch mode.\

db.json

@@ -0,0 +1,83 @@
+{
+  "instructors": [
+    {
+      "id": 1,
+      "name": "Fedrick Barbarosa"
+    },
+    {
+      "id": 2,
+      "name": "Ada Lovelace"
+    }
+  ],
+  "questionnaires": [
+    {
+      "id": 6,
+      "name": "Generic Reveiw",
+      "min_item_score": 0,
+      "max_item_score": 5,
+      "instructor_id": 1,
+      "updated_at": "4/25/2023",
+      "type": "ReviewQuestionnaire",
+      "is_private": true
+    },
+    {
+      "id": 2,
+      "name": "Generic Survey",
+      "min_item_score": 0,
+      "max_item_score": 5,
+      "instructor_id": 1,
+      "updated_at": "4/25/2023",
+      "type": "ReviewQuestionnaire",
+      "is_private": true
+    },
+    {
+      "id": 3,
+      "name": "Program 1 Questionaire",
+      "min_item_score": 0,
+      "max_item_score": 5,
+      "instructor_id": 1,
+      "updated_at": "10/10/2022",
+      "type": "ReviewQuestionnaire",
+      "is_private": true
+    },
+    {
+      "id": 4,
+      "name": "Test",
+      "min_item_score": 0,
+      "max_item_score": 5,
+      "instructor_id": "2",
+      "updated_at": "4/25/2023",
+      "type": "Author FeedbackQuestionnaire",
+      "is_private": true
+    },
+    {
+      "name": "test1",
+      "instructor_id": "1",
+      "min_item_score": 0,
+      "max_item_score": 10,
+      "is_private": false,
+      "type": "",
+      "id": 7,
+      "updated_at": "4/25/2023"
+    },
+    {
+      "name": "test2",
+      "instructor_id": 1,
+      "min_item_score": 0,
+      "max_item_score": 10,
+      "is_private": false,
+      "type": "CourseSurveyQuestionnaire",
+      "id": 8
+    },
+    {
+      "name": "test3",
+      "instructor_id": 1,
+      "min_item_score": 0,
+      "max_item_score": 10,
+      "is_private": false,
+      "type": "AuthorFeedbackQuestionnaire",
+      "id": 9,
+      "updated_at": "4/25/2023"
+    }
+  ]
+}

src/App.js

@@ -3,6 +3,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Home from "./components/Layout/Home";
 import RootLayout from "./components/Layout/Root";
 import Users from "./components/Users/Users";
+import Questionnaires from "./components/Questionnaires/Questionnaires";
 
 function App() {
   const router = createBrowserRouter([
@@ -12,6 +13,7 @@ function App() {
       children: [
         { index: true, element: <Home /> },
         { path: "users", element: <Users /> },
+        { path: "questionnaires", element: <Questionnaires /> },
       ],
     },
   ]);

src/components/Layout/Header.js

@@ -60,7 +60,7 @@ const Header = () => {
                 <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.Divider/>

src/components/Questionnaires/CreateQuestionnaire.js

@@ -0,0 +1,168 @@
+import {Form, Formik} from "formik";
+import {useEffect, useState} from "react";
+import {Button, Col, InputGroup, Modal, Row} from "react-bootstrap";
+import {useDispatch} from "react-redux";
+import * as Yup from "yup";
+import useAPI from "../../hooks/use-api";
+import {alertActions} from "../../store/alert";
+import FormInput from "../UI/Form/FormInput";
+import FormSelect from "../UI/Form/FormSelect";
+import FormCheckbox from "../UI/Form/FormCheckbox";
+import {questionnaireTypesOptions,transformQuestionnaireRequest} from "./util";
+
+
+// Get the logged-in user from the session
+const loggedInUser = 1; // set to 1 as logged-in user not implemented
+
+const initialValues = {
+  name: "",
+  instructor_id: loggedInUser,
+  is_private: false,
+  min_item_score: 0,
+  max_item_score: 10,
+  type: "",
+};
+
+// Name, Minimum Item Score, and Maximum Item Score are Required.
+// Minimum Item Score must be >= 0 and Maximum Item Score must be > Minimimum Item Score.
+const validationSchema = Yup.object({
+  name: Yup.string()
+    .required("Required")
+    .max(64, "Questionnaire name must be at most 64 characters"),
+  min_item_score: Yup.number()
+    .required("Required")
+    .moreThan(-1, "Must be 0 or greater.")
+    .integer("Must be integer."),
+  max_item_score: Yup.number()
+    .required("Required")
+    .moreThan(-1, "Must be 0 or greater.")
+    .moreThan(Yup.ref('min_item_score'), "Must be greater than the Minimum Item Score.")
+    .integer("Must be integer.")
+});
+
+const CreateQuestionnaire = ({onClose}) => {
+  const dispatch = useDispatch();
+  const [show, setShow] = useState(true);
+  const {
+    data: createdQuestionnaire,
+    error: questionnaireError,
+    sendRequest: createQuestionnaire,
+  } = useAPI();
+
+
+  useEffect(() => {
+    if (questionnaireError) {
+      dispatch(alertActions.showAlert({
+        variant: "danger",
+        message: questionnaireError
+      }));
+    }
+  }, [questionnaireError, dispatch]);
+
+  useEffect(() => {
+    console.log(createdQuestionnaire)
+    if (createdQuestionnaire.length > 0) {
+      setShow(false);
+      onClose(createdQuestionnaire[0]);
+    }
+  }, [questionnaireError, createdQuestionnaire, onClose]);
+
+  // method to create the questionnaire record using HTTP method and URI on submit
+  const onSubmit = (values, submitProps) => {
+    createQuestionnaire({
+      url: "/questionnaires",
+      method: "post",
+      data: {...values, instructor: loggedInUser},
+      transformRequest: transformQuestionnaireRequest,
+    });
+    submitProps.resetForm();
+    submitProps.setSubmitting(false);
+  };
+
+  const handleClose = () => {
+    setShow(false);
+    onClose();
+  };
+
+  return (
+    <Modal
+      size="lg"
+      centered
+      show={show}
+      onHide={handleClose}
+      backdrop="static"
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>Create Questionnaire</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Formik
+          initialValues={initialValues}
+          onSubmit={onSubmit}
+          validationSchema={validationSchema}
+          validateOnChange={false}
+        >
+          {(formik) => {
+            return (
+              <Form>
+
+                <FormInput
+                  controlId="questionnaire-name"
+                  label="Name"
+                  name="name"
+
+                />
+
+                <FormCheckbox
+                  controlId="questionnaire-is-private"
+                  label="Private"
+                  name="is_private"
+                 /><br></br>
+
+                <Row>
+                  <FormInput
+                    as={Col}
+                    controlId="questionnaire-min-item-score"
+                    label="Minimum Item Score"
+                    name="min_item_score"
+                    md="1" 
+                  />
+                  <FormInput
+                    as={Col}
+                    controlId="questionnaire-max-item-score"
+                    label="Maximum Item Score"
+                    name="max_item_score"
+                    md="1"
+                  />
+                </Row>
+                  <FormSelect
+                   controlId="questionnaire-type"
+                   name="type"
+                   options={questionnaireTypesOptions}
+                  inputGroupPrepend={<InputGroup.Text id="type">Questionnaire Type</InputGroup.Text>}
+                   />
+
+                <Modal.Footer>
+                  <Button variant="outline-secondary" onClick={handleClose}>
+                    Close
+                  </Button>
+                  <Button
+                    variant="outline-success"
+                    type="submit"
+                    disabled={
+                      !(formik.isValid && formik.dirty) || formik.isSubmitting
+                    }
+                  >
+                    Create Questionnaire
+                  </Button>
+                </Modal.Footer>
+              </Form>
+            );
+          }}
+        </Formik>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default CreateQuestionnaire;

src/components/Questionnaires/DeleteQuestionnaire.js

@@ -0,0 +1,63 @@
+import {useEffect, useState} from "react";
+import {Button, Modal} from "react-bootstrap";
+import {useDispatch} from "react-redux";
+import useAPI from "../../hooks/use-api";
+import {alertActions} from "../../store/alert";
+
+const DeleteQuestionnaire = ({questionnaireData, onClose}) => {
+  const dispatch = useDispatch();
+  const {
+    data: deletedQuestionnaire,
+    error: questionnaireError,
+    sendRequest: deleteQuestionnaire,
+  } = useAPI();
+  const [show, setShow] = useState(true);
+
+  // methods to delete the questionnaire record using HTTP method and URI
+  const deleteHandler = () =>
+    deleteQuestionnaire({url: `/questionnaires/${questionnaireData.id}`, method: "DELETE"});
+
+  useEffect(() => {
+    if (questionnaireError) {
+      dispatch(alertActions.showAlert({
+        variant: "danger",
+        message: questionnaireError,
+      }));
+    }
+  }, [questionnaireError, dispatch]);
+
+  useEffect(() => {
+    if (deletedQuestionnaire.length > 0) {
+      setShow(false);
+      onClose(deletedQuestionnaire[0]);
+    }
+  }, [deletedQuestionnaire, onClose]);
+
+  const closeHandler = () => {
+    setShow(false);
+    onClose();
+  };
+
+  return (
+    <Modal show={show} onHide={closeHandler}>
+      <Modal.Header closeButton>
+        <Modal.Title>Delete Questionnaire</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <p>
+          Are you sure you want to delete questionnaire <b>{questionnaireData.name}?</b>
+        </p>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="outline-secondary" onClick={closeHandler}>
+          Cancel
+        </Button>
+        <Button variant="outline-danger" onClick={deleteHandler}>
+          Delete
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default DeleteQuestionnaire;