From 2fab6506869db6798480f8481e023a4d81fc447b Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jan.tuomi@eficode.com>
Date: Sat, 9 Nov 2019 17:38:35 +0200
Subject: [PATCH] Add checkbox signup form widget

---
 .../SignupQuestionsWidget/OptionsWidget.tsx   | 19 ++++++++++++++++++-
 src/components/SignupQuestionsWidget/index.ts |  1 +
 .../AdminSignupPage/AdminSignupPage.scss      |  7 +++++++
 src/pages/SignUpPage/SignUpPage.tsx           | 11 +++++++++++
 .../SignupCreatePage/SignupCreatePage.tsx     |  4 ++++
 5 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/components/SignupQuestionsWidget/OptionsWidget.tsx b/src/components/SignupQuestionsWidget/OptionsWidget.tsx
index 8acf430..e90e17a 100644
--- a/src/components/SignupQuestionsWidget/OptionsWidget.tsx
+++ b/src/components/SignupQuestionsWidget/OptionsWidget.tsx
@@ -17,11 +17,19 @@ class OptionsWidget extends React.Component<OptionsWidgetProps, OptionsWidgetSta
     onChange(questions);
   }
 
+  handleCheckboxOptionsChange = (questions: Question[], index: number) => (event) => {
+    const { onChange } = this.props;
+    const val = event.target.value;
+    const lst = val.split(",").map(p => p.trimLeft());
+    questions[index].options = lst;
+    onChange(questions);
+  }
+
   render() {
     const { inputProps } = this.props;
     const { type, value, questions, index } = inputProps;
     if (!optionTypes.includes(type)) {
-      throw new SignupQuestionError(`Qquestion widget type "${type}" not in types array.`);
+      throw new SignupQuestionError(`Question widget type "${type}" not in types array.`);
     }
 
     if (type === "text") {
@@ -38,6 +46,15 @@ class OptionsWidget extends React.Component<OptionsWidgetProps, OptionsWidgetSta
         onChange={this.handleRadiobuttonOptionsChange(questions, index)} />;
     }
 
+    if (type === "checkbox") {
+      const lst = value as string[];
+      const joinedValue = lst.join(",");
+      return <input
+        type="text"
+        placeholder="A,B,C"
+        value={joinedValue}
+        onChange={this.handleCheckboxOptionsChange(questions, index)} />;
+    }
 
     throw new SignupQuestionError(`Unrecognized question widget type "${type}"`);
   }
diff --git a/src/components/SignupQuestionsWidget/index.ts b/src/components/SignupQuestionsWidget/index.ts
index 5e75f65..6922400 100644
--- a/src/components/SignupQuestionsWidget/index.ts
+++ b/src/components/SignupQuestionsWidget/index.ts
@@ -17,6 +17,7 @@ export interface InputProps {
 export const optionTypes = [
   "text",
   "radiobutton",
+  "checkbox",
 ];
 
 export class SignupQuestionError extends Error { }
diff --git a/src/pages/AdminSignupPage/AdminSignupPage.scss b/src/pages/AdminSignupPage/AdminSignupPage.scss
index 146425a..0624933 100644
--- a/src/pages/AdminSignupPage/AdminSignupPage.scss
+++ b/src/pages/AdminSignupPage/AdminSignupPage.scss
@@ -18,3 +18,10 @@
     }
   }
 }
+
+.signup-create-page {
+  a {
+      color: color(orange1);
+      text-decoration: underline;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/SignUpPage/SignUpPage.tsx b/src/pages/SignUpPage/SignUpPage.tsx
index b17f1f7..16f9f92 100644
--- a/src/pages/SignUpPage/SignUpPage.tsx
+++ b/src/pages/SignUpPage/SignUpPage.tsx
@@ -77,6 +77,17 @@ class SignUpPage extends React.Component<SignUpPageProps, SignUpPageState> {
         </span>
       ));
     }
+    if (question.type === "checkbox") {
+      const { options } = question;
+      return options.map((opt, index) => {
+        const optSlug = opt.replace(/\s/g, "_").toLocaleLowerCase();
+        return (
+          <span key={index}>
+            <input type="checkbox" name={`${question.id}-${optSlug}`} value={opt} /> {opt}<br />
+          </span>
+        )
+      });
+    }
   }
 
   renderQuestion = (question: Question) => {
diff --git a/src/pages/SignupCreatePage/SignupCreatePage.tsx b/src/pages/SignupCreatePage/SignupCreatePage.tsx
index c893a0d..5a56db6 100644
--- a/src/pages/SignupCreatePage/SignupCreatePage.tsx
+++ b/src/pages/SignupCreatePage/SignupCreatePage.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import Helmet from "react-helmet";
+import { Link } from "react-router-dom";
 import "./SignupCreatePage.scss";
 import Form from "react-jsonschema-form";
 import { createForm, getForm, updateForm } from "../../models/SignupForm";
@@ -176,6 +177,9 @@ class SignupCreatePage extends React.Component<SignupCreatePageProps, SignupCrea
         </Helmet>
         <h1>{title}</h1>
         {statusMessage && <div className="success">{statusMessage}</div>}
+        {formData.id && <p>
+          Check out the signup form here: <Link to={`/signup/${formData.id}`}>{formData.title}</Link>
+        </p>}
         <Form schema={schema}
           uiSchema={uiSchema}
           formData={formData}