added skills question as checkbox

ubc-biztech · Aug 3, 2023 · 48cc614 · 48cc614
1 parent 6542dac
commit 48cc614
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git a/src/pages/admin/DynamicForm/FormCreate.js b/src/pages/admin/DynamicForm/FormCreate.js
@@ -801,7 +801,8 @@ const FormCreate = (props) => {
     type: Yup.mixed().oneOf(["TEXT", "SELECT", "CHECKBOX", "UPLOAD"]).required(),
     label: Yup.string().required("Question is a required field"),
     choices: Yup.string(),
-    required: Yup.boolean().required()
+    required: Yup.boolean().required(),
+    isSkillsQuestion: Yup.boolean()
   });
 
   const validationSchema = Yup.object({

diff --git a/src/pages/admin/DynamicForm/components/CustomQuestion.js b/src/pages/admin/DynamicForm/components/CustomQuestion.js
@@ -57,7 +57,7 @@ const CustomQuestion = (props) => {
   } = props;
 
   const {
-    type, label, choices, questionImageUrl, charLimit, required
+    type, label, choices, questionImageUrl, charLimit, required, isSkillsQuestion
   } = props.data;
   const questionStyles = {
     // -------- QUESTION COMPONENT STYLES ----------
@@ -100,11 +100,16 @@ const CustomQuestion = (props) => {
       flexDirection: "column",
       justifyContent: "center"
     },
-    requiredContainer: {
+    checkboxContainer: {
       display: "flex",
       justifyContent: "flex-end",
       alignItems: "center",
       color: "rgba(255,255,255,0.8)"
+    },
+    checkboxWrapper: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "flex-end"
     }
   };
 
@@ -240,18 +245,31 @@ const CustomQuestion = (props) => {
             value={choices}
           />
         )}
-
-        <div style={questionStyles.requiredContainer}>
+        <div style={questionStyles.checkboxWrapper}>
+          <div style={questionStyles.checkboxContainer}>
+          Skills Question?
+            <Checkbox
+              id={`${id}.isSkillsQuestion`}
+              name={`${name}.isSkillsQuestion`}
+              color="primary"
+              aria-label="Skills question?"
+              checked={isSkillsQuestion}
+              onChange={handleChange}
+              onBlur={handleBlur}
+            />
+          </div>
+          <div style={questionStyles.checkboxContainer}>
           Required?
-          <Checkbox
-            id={`${id}.required`}
-            name={`${name}.required`}
-            color="primary"
-            aria-label="Required question?"
-            checked={required}
-            onChange={handleChange}
-            onBlur={handleBlur}
-          />
+            <Checkbox
+              id={`${id}.required`}
+              name={`${name}.required`}
+              color="primary"
+              aria-label="Required question?"
+              checked={required}
+              onChange={handleChange}
+              onBlur={handleBlur}
+            />
+          </div>
         </div>
       </div>
     </div>