Added framework for CSI questions & viewing. Schema changes to allow anon viewing of survey BOD-98

client/src/components/config-form-components/config-form-components.component.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import CheckboxFormItem from "./checkbox/checkbox.component";
+import Slider from "./slider/slider.component";
+import Text from "./text/text.component";
+import Textarea from "./textarea/textarea.component";
+import Rate from "./rate/rate.component";
+
+export default function ConfirmFormComponents({ componentList }) {
+  return (
+    <div>
+      {componentList.map((f, idx) => {
+        switch (f.type) {
+          case "checkbox":
+            return <CheckboxFormItem key={idx} formItem={f} />;
+          case "slider":
+            return <Slider key={idx} formItem={f} />;
+          case "text":
+            return <Text key={idx} formItem={f} />;
+          case "textarea":
+            return <Textarea key={idx} formItem={f} />;
+          case "rate":
+            return <Rate key={idx} formItem={f} />;
+          default:
+            return <div key={idx}>Error</div>;
+        }
+      })}
+    </div>
+  );
+}

client/src/components/config-form-components/rate/rate.component.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Form, Rate } from "antd";
+import { useTranslation } from "react-i18next";
+
+export default function JobIntakeFormCheckboxComponent({ formItem }) {
+  const { name, label, required } = formItem;
+  const { t } = useTranslation();
+  return (
+    <Form.Item
+      name={name}
+      label={label}
+      rules={[
+        {
+          required: required,
+          message: t("general.validation.required"),
+        },
+      ]}>
+      <Rate allowHalf />
+    </Form.Item>
+  );
+}

client/src/components/config-form-components/slider/slider.component.jsx

@@ -0,0 +1,21 @@
+import { Form, Slider } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export default function JobIntakeFormCheckboxComponent({ formItem }) {
+  const { name, label, required, min, max } = formItem;
+  const { t } = useTranslation();
+  return (
+    <Form.Item
+      name={name}
+      label={label}
+      rules={[
+        {
+          required: required,
+          message: t("general.validation.required"),
+        },
+      ]}>
+      <Slider min={min || 0} max={max || 10} />
+    </Form.Item>
+  );
+}

client/src/components/config-form-components/text/text.component.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Form, Input } from "antd";
+import { useTranslation } from "react-i18next";
+
+export default function JobIntakeFormCheckboxComponent({ formItem }) {
+  const { name, label, required } = formItem;
+  const { t } = useTranslation();
+  return (
+    <Form.Item
+      name={name}
+      label={label}
+      rules={[
+        {
+          required: required,
+          message: t("general.validation.required"),
+        },
+      ]}>
+      <Input />
+    </Form.Item>
+  );
+}

client/src/components/config-form-components/textarea/textarea.component.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Form, Input } from "antd";
+import { useTranslation } from "react-i18next";
+
+export default function JobIntakeFormCheckboxComponent({ formItem }) {
+  const { name, label, required, rows } = formItem;
+  const { t } = useTranslation();
+  return (
+    <Form.Item
+      name={name}
+      label={label}
+      rules={[
+        {
+          required: required,
+          message: t("general.validation.required"),
+        },
+      ]}>
+      <Input.TextArea rows={rows || 4} />
+    </Form.Item>
+  );
+}

client/src/components/job-intake/components/job-intake-form/job-intake-form.component.jsx

@@ -1,18 +1,16 @@
-import React from "react";
-import { Form, Button, Switch, DatePicker, notification } from "antd";
-import CheckboxFormItem from "../job-intake-form-checkbox/job-itnake-form-checkbox.component";
-import { useTranslation } from "react-i18next";
 import { useMutation } from "@apollo/react-hooks";
-import { UPDATE_JOB } from "../../../../graphql/jobs.queries";
-import { MARK_LATEST_APPOINTMENT_AS_ARRIVED } from "../../../../graphql/appointments.queries";
-import { useParams } from "react-router-dom";
-import { selectBodyshop } from "../../../../redux/user/user.selectors";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { useHistory } from "react-router-dom";
+import { Button, Form, notification, Switch } from "antd";
 import queryString from "query-string";
-import { useLocation } from "react-router-dom";
-import DateTimePicker from '../../../form-date-time-picker/form-date-time-picker.component'
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useHistory, useLocation, useParams } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import { MARK_LATEST_APPOINTMENT_AS_ARRIVED } from "../../../../graphql/appointments.queries";
+import { UPDATE_JOB } from "../../../../graphql/jobs.queries";
+import { selectBodyshop } from "../../../../redux/user/user.selectors";
+import DateTimePicker from "../../../form-date-time-picker/form-date-time-picker.component";
+import ConfigFormComponents from "../../../config-form-components/config-form-components.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -80,14 +78,9 @@ export function JobIntakeForm({ formItems, bodyshop }) {
       onFinish={handleFinish}
       initialValues={{ addToProduction: true }}>
       {t("intake.labels.checklist")}
-      {formItems.map((f, idx) => {
-        switch (f.type) {
-          case "checkbox":
-            return <CheckboxFormItem key={idx} formItem={f} />;
-          default:
-            return <div key={idx}>Error</div>;
-        }
-      })}
+
+      <ConfigFormComponents componentList={formItems} />
+
       <Form.Item
         name='addToProduction'
         valuePropName='checked'

client/src/components/schedule-job-modal/schedule-job-modal.component.jsx

@@ -1,9 +1,9 @@
-import { Checkbox, Col, DatePicker, Row, Tabs, TimePicker } from "antd";
+import { Checkbox, Col, Row, Tabs } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
 import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 
 export default function ScheduleJobModalComponent({
   existingAppointments,