Urgent component

frontend/src/components/CostEstimate/index.js

@@ -23,13 +23,22 @@ export const CostEstimateCollapsed = () => {
 };
 
 export const CostEstimateFull = () => {
+  var isUrgent = false;
+  var urgentMultiplier = 1.5;
   const dispatch = useDispatch();
   const costEstimateMap = useSelector(
     (state) => state.costEstimateReducer.costEstimateList
   );
   const formResponses = useSelector((state) => state.formReducer.formResponses);
   let costSum = 0;
 
+  formResponses.some((response) => {
+    if (response.question.question_type === "urgent") {
+      isUrgent = response.question.answer === "Yes" ? true : false;
+    }
+    return null;
+  });
+
   return (
     <div className="CostEstimateContainer" style={{ background: "#F5F5F5" }}>
       <img
@@ -49,7 +58,7 @@ export const CostEstimateFull = () => {
 
       <div className="CostEstimates">
         {formResponses.map((response) => {
-          const cost = costEstimateMap.get(response.question.answer_id);
+          const cost = isUrgent ? urgentMultiplier * costEstimateMap.get(response.question.answer_id) : costEstimateMap.get(response.question.answer_id);
           let quantity = response.quantity ?? 1;
           costSum += cost * quantity;
           return (

frontend/src/components/DragAndDrop/component-sideview-dnd-data.js

@@ -105,6 +105,15 @@ export const ProjectSelectorCard = () => {
   );
 };
 
+export const UrgentCard = () => {
+  return (
+    <DraggableCard>
+      <img className="iconImage" src={SCIcon} alt="Contact Information" />
+      Urgent Request
+    </DraggableCard>
+  );
+};
+
 export const componentsSideViewData = {
   components: {
     multi: {
@@ -147,12 +156,16 @@ export const componentsSideViewData = {
       id: "project",
       component: ProjectSelectorCard,
     },
+    urgent: {
+      id: "urgent",
+      component: UrgentCard,
+    },
   },
   sections: {
     "question-elements": {
       id: "question-elements",
       title: "Question Elements",
-      componentIds: ["multi", "single", "text", "dropdown"],
+      componentIds: ["multi", "single", "text", "dropdown", "urgent"],
     },
     "layout-elements": {
       id: "layout-elements",

frontend/src/components/FormBuilder/index.js

@@ -1,12 +1,13 @@
 import "./index.css";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { appColor } from "../../constants";
 import DropdownEditor from "../Dropdown/DropdownEditor";
 import FileInputEditor from "../FileInput/FileInputEditor";
 import TextAnswerEditor from "../TextAnswer/TextAnswerEditor";
 import MultiSelectEditor from "../MultiSelect/MultiSelectEditor";
 import ContactInfoEditor from "../ContactInfo/ContactInfoEditor";
 import SingleSelectEditor from "../SingleSelect/SingleSelectEditor";
+import UrgentEditor from "../Urgent/UrgentEditor";
 import FormTitle from "./FormTitle";
 import HeadingEditor from "../Heading/HeadingEditor";
 import FileDownloadEditor from "../FileDownload/FileDownloadEditor";
@@ -58,15 +59,20 @@ function renderQuestion(question) {
       return <ContactInfoEditor question={question} />;
     case "project":
       return <ProjectSelectorEditor question={question} />;
+    case "urgent":
+      return <UrgentEditor question={question} />;
     default:
       return null;
   }
 }
 
 function FormBuilder() {
+  const dispatch = useDispatch();
+
   const questionList = useSelector(
     (state) => state.questionReducer.questionList
   );
+
   const selectedQuestion = useSelector(
     (state) => state.logicReducer.currentLogicQuestion
   );
@@ -160,6 +166,7 @@ function FormBuilder() {
                 </div>
               )}
               {provided.placeholder}
+
             </QuestionContainer>
           )}
         </StrictModeDroppable>

frontend/src/components/SingleSelect/index.js

@@ -63,6 +63,7 @@ function SingleSelect({ question }) {
                                 question: option,
                               },
                             });
+                            console.log(option)
                             dispatch({
                               type: ADD_RESPONSE,
                               payload: {

frontend/src/components/Urgent/UrgentEditor/index.css

@@ -0,0 +1,49 @@
+.question-cancel-button{
+    font-size: 18px;     
+    /* text-align: center;  */
+    background: transparent;
+    border: none; 
+    align-self: right;
+}
+
+.single-select-option{
+    display: flex; 
+    align-items: center; 
+    justify-content: space-between;
+    width: 100%;
+}
+.single-select-option-delete{
+    height: 50%;
+}
+
+.single-select-options-container{
+    display: flex; 
+    margin-top: 2%;
+    margin-bottom: 2%;
+    width: 100%;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.new-question-input-container {
+    display: flex; 
+    margin:none;
+    padding:none;
+    justify-content: left;
+    align-items: center;
+    width: 100%;
+}
+
+.new-question-input  {
+    display: flex; 
+    border: none;
+    width: 100%;
+}
+
+.new-question-input:focus{
+    outline: none;
+}
+
+.new-question-checkbox{
+    width: 30px;
+}

frontend/src/components/Urgent/UrgentEditor/index.js

@@ -0,0 +1,176 @@
+import "./index.css";
+import "../../index.css";
+import { useEffect, useState } from "react";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControl from "@mui/material/FormControl";
+import X from "../../../assets/X.png";
+import DragDots from "../../../assets/DragDots.png";
+import { useDispatch, useSelector } from "react-redux";
+import uuid from "react-uuid";
+import {
+  DELETE_ANSWER,
+  DELETE_QUESTION,
+  LOAD_QUESTION,
+  SAVE_ANSWER,
+  SAVE_QUESTION,
+} from "../../../redux/actions/questionActions";
+import { SET_LOGIC_QUESTION } from "../../../redux/actions/logicActions";
+import EditComponentFooter from "../../EditComponentFooter";
+
+function UrgentEditor({ question }) {
+  const dispatch = useDispatch();
+  const questionList = useSelector(
+    (state) => state.questionReducer.questionList
+  );
+
+  const [options, setOptions] = useState([]);
+  const answerList = useSelector((state) => state.questionReducer.answerList);
+
+  const [questionNum, setQuestionNum] = useState("");
+  const [title, setTitle] = useState("");
+
+  useEffect(() => {
+    setQuestionNum(`Q${question.position_index}`);
+    setTitle("Is this request urgent?");
+  }, [question]);
+
+  useEffect(() => {
+    var optionList = answerList[question.question_id ?? ""] ?? [];
+    optionList = optionList.sort((a, b) => {
+      let fa = a.answer;
+      let fb = b.answer;
+
+      if (fa < fb) {
+        return -1;
+      }
+      if (fa > fb) {
+        return 1;
+      }
+      return 0;
+    });
+    optionList = optionList.filter((option) => option !== "");
+    optionList.push("");
+    optionList.unshift({answer_id: uuid(), answer: "No"});
+    optionList.unshift({answer_id: uuid(), answer: "Yes"});
+    setOptions(optionList);
+  }, [answerList, question]);
+
+  return (
+    <div className="GlobalEditorComponent">
+      <div className="GlobalEditorComponentHeader">
+        <div
+          className="GlobalEditorQuestionNumber"
+          onClick={() => {
+            dispatch({
+              type: SET_LOGIC_QUESTION,
+              payload: question,
+            });
+          }}
+        >
+          {questionNum}
+        </div>
+        <input
+          className="GlobalEditorQuestionTitleInput"
+          defaultValue={title}
+          placeholder="Type your form name here..."
+          onChange={(event) => setTitle(event.target.value)}
+          onBlur={() => {
+            dispatch({
+              type: SAVE_QUESTION,
+              payload: {
+                ...question,
+                form_id: question.fk_form_id,
+                question_title: title, //text.target.value,
+                question_index: question.position_index,
+              },
+            });
+            dispatch({ type: LOAD_QUESTION, payload: question.fk_form_id });
+          }}
+        />
+        <img
+          className="GlobalEditorDelete"
+          src={X}
+          alt="Delete"
+          onClick={() => {
+            questionList.forEach((questionObj) => {
+              if (questionObj.position_index >= question.position_index) {
+                questionObj.question_index = questionObj.position_index - 1;
+                questionObj.question_title = questionObj.question;
+                questionObj.form_id = questionObj.fk_form_id;
+                dispatch({ type: SAVE_QUESTION, payload: questionObj });
+              }
+            });
+            dispatch({
+              type: DELETE_QUESTION,
+              payload: {
+                question_id: question.question_id,
+              },
+            });
+            dispatch({ type: LOAD_QUESTION, payload: question.fk_form_id });
+          }}
+        />
+      </div>
+      {/* Copy Everything Except Content Below For Reusability */}
+      <div className="single-select-options-container">
+        <img className="GlobalDragDot" src={DragDots} alt="DragDots" />
+        <FormControl style={{ width: "100%" }}>
+          <RadioGroup
+            aria-labelledby="demo-radio-buttons-group-label"
+            defaultValue="female"
+            name="radio-buttons-group"
+          >
+            {options.map((option, index) => {
+              return (
+                <div className="single-select-option" key={index}>
+                  <FormControlLabel control={<Radio />} />
+                  <input
+                    type="text"
+                    className="new-question-input"
+                    defaultValue={option.answer}
+                    placeholder="Click to add new option"
+                    onBlur={(e) => {
+                      const answerVal = e.target.value;
+                      if (answerVal.trim() !== "") {
+                        dispatch({
+                          type: SAVE_ANSWER,
+                          payload: {
+                            answer_id: option.answer_id ?? uuid(),
+                            fk_question_id: question.question_id,
+                            question_type: question.question_type,
+                            answer: answerVal,
+                            form_id: question.fk_form_id,
+                          },
+                        });
+                      } else {
+                        dispatch({
+                          type: DELETE_ANSWER,
+                          payload: {
+                            answer_id: option.answer_id,
+                            form_id: question.fk_form_id,
+                          },
+                        });
+                      }
+                      setOptions([]);
+                    }}
+                    //   If we want to have key down functionality as well:
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        e.target.blur();
+                      }
+                    }}
+                  />
+                </div>
+              );
+            })}
+          </RadioGroup>
+        </FormControl>
+      </div>
+      {/* Copy Everything Except Content Above For Reusability */}
+      <EditComponentFooter question={question} />
+    </div>
+  );
+}
+
+export default UrgentEditor;

frontend/src/components/Urgent/index.css

@@ -0,0 +1,49 @@
+.question-cancel-button{
+    font-size: 18px;     
+    /* text-align: center;  */
+    background: transparent;
+    border: none; 
+    align-self: right;
+}
+
+.single-select-option{
+    display: flex; 
+    align-items: center; 
+    justify-content: space-between;
+    width: 100%;
+}
+.single-select-option-delete{
+    height: 50%;
+}
+
+.single-select-options-container{
+    display: flex; 
+    margin-top: 2%;
+    margin-bottom: 2%;
+    width: 100%;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.new-question-input-container {
+    display: flex; 
+    margin:none;
+    padding:none;
+    justify-content: left;
+    align-items: center;
+    width: 100%;
+}
+
+.new-question-input  {
+    display: flex; 
+    border: none;
+    width: 100%;
+}
+
+.new-question-input:focus{
+    outline: none;
+}
+
+.new-question-checkbox{
+    width: 30px;
+}