Merge pull request #48 from akvo/feature/46-support-autofield-questio…

…n-type

Feature/46 support autofield question type

example/src/example-initial-value.json

@@ -298,6 +298,26 @@
             }
           ]
         },
+        {
+          "id": 29,
+          "name": "Average spent for meal",
+          "order": 3,
+          "type": "autofield",
+          "required": true,
+          "fn": {
+            "multiline": false,
+            "fnString": "function () { return #8 / #9 || 0 }",
+            "fnColor": {
+              "50000": "#ef6548"
+            }
+          },
+          "translations": [
+            {
+              "name": "Rata-rata biaya makan",
+              "language": "id"
+            }
+          ]
+        },
         {
           "id": 11,
           "name": "Favorite Food",

src/components/QuestionSetting.jsx

@@ -11,6 +11,7 @@ import {
   SettingDate,
   SettingTable,
   SettingImage,
+  SettingAutofield,
 } from './question-type';
 import QuestionHint from './QuestionHint';
 import { map, groupBy, orderBy, isEmpty } from 'lodash';
@@ -309,6 +310,7 @@ const QuestionSetting = ({ question, dependant }) => {
       {qType === questionType.date && <SettingDate {...question} />}
       {qType === questionType.table && <SettingTable {...question} />}
       {qType === questionType.image && <SettingImage {...question} />}
+      {qType === questionType.autofield && <SettingAutofield {...question} />}
     </div>
   );
 };

src/components/question-type/SettingAutofield.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Form, Checkbox, Space, Input } from 'antd';
+import styles from '../../styles.module.css';
+import { UIStore, questionGroupFn } from '../../lib/store';
+import isEmpty from 'lodash/isEmpty';
+
+const fnStringExample =
+  "function () { return #question_id / #question_id } OR () => { return #1.includes('Test') ? #question_id / #question_id : 0 }";
+
+const fnColorExample = "{ 'answer_value': '#CCFFC4' }";
+
+const SettingAutofield = ({
+  id,
+  questionGroupId,
+  fn = { multiline: false, fnString: null, fnColor: {} },
+}) => {
+  const namePreffix = `question-${id}`;
+  const UIText = UIStore.useState((s) => s.UIText);
+
+  const updateState = (name, value) => {
+    questionGroupFn.store.update((s) => {
+      s.questionGroups = s.questionGroups.map((qg) => {
+        if (qg.id === questionGroupId) {
+          const questions = qg.questions.map((q) => {
+            if (q.id === id) {
+              return {
+                ...q,
+                [name]: value,
+              };
+            }
+            return q;
+          });
+          return {
+            ...qg,
+            questions: questions,
+          };
+        }
+        return qg;
+      });
+    });
+  };
+
+  const handleChangeMultiline = (e) => {
+    const value = e?.target?.checked;
+    updateState('fn', { ...fn, multiline: value });
+  };
+
+  const handleChangeFnString = (e) => {
+    const value = e?.target?.value;
+    updateState('fn', { ...fn, fnString: value });
+  };
+
+  const handleChangeFnColor = (e) => {
+    let value = e?.target?.value;
+    try {
+      value = JSON.parse(value);
+      updateState('fn', { ...fn, fnColor: value });
+      return true;
+    } catch (error) {
+      return false;
+    }
+  };
+
+  return (
+    <div>
+      <p className={styles['more-question-setting-text']}>
+        {UIText.questionMoreAutofieldTypeSettingText}
+      </p>
+      <Space className={styles['space-align-left']}>
+        <Form.Item name={`${namePreffix}-autofield_multiline`}>
+          <Checkbox
+            onChange={handleChangeMultiline}
+            checked={fn?.multiline || false}
+          >
+            {' '}
+            {UIText.inputQuestionAutofieldMultiline}
+          </Checkbox>
+        </Form.Item>
+      </Space>
+      <Form.Item
+        label={UIText.inputQuestionAutofieldFnString}
+        name={`${namePreffix}-autofield_fnString`}
+        initialValue={fn?.fnString || null}
+        required
+      >
+        <Input.TextArea
+          rows={5}
+          allowClear
+          onChange={handleChangeFnString}
+          placeholder={fnStringExample}
+        />
+      </Form.Item>
+      <Form.Item
+        label={UIText.inputQuestionAutofieldFnColor}
+        name={`${namePreffix}-autofield_fnColor`}
+        initialValue={isEmpty(fn?.fnColor) ? null : JSON.stringify(fn?.fnColor)}
+      >
+        <Input.TextArea
+          rows={5}
+          allowClear
+          onChange={handleChangeFnColor}
+          placeholder={fnColorExample}
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+export default SettingAutofield;

src/components/question-type/index.js

@@ -6,3 +6,4 @@ export { default as SettingCascade } from './SettingCascade';
 export { default as SettingDate } from './SettingDate';
 export { default as SettingTable } from './SettingTable';
 export { default as SettingImage } from './SettingImage';
+export { default as SettingAutofield } from './SettingAutofield';

src/lib/i18n.js

@@ -90,6 +90,10 @@ const UIStaticText = {
     inputQuestionHintButtonTextLabel: 'Hint Button Text',
     questionMoreImageTypeSettingText: 'More Image Question Setting',
     inputQuestionImageLimitValidationText: 'Limit / Max file size',
+    questionMoreAutofieldTypeSettingText: 'More Autofield Question Setting',
+    inputQuestionAutofieldMultiline: 'Support Multiline Function',
+    inputQuestionAutofieldFnString: 'Add Function (String) Here',
+    inputQuestionAutofieldFnColor: 'Add Function Color Here',
   },
 };
 

src/lib/store.js

@@ -25,8 +25,8 @@ const questionType = {
   multiple_option: 'multiple_option',
   tree: 'tree',
   table: 'table',
-  // autofield: 'autofield',
   image: 'image',
+  autofield: 'autofield',
 };
 
 const defaultForm = () => {