Merge pull request #65 from akvo/feature/64-add-autofield-validatatio…

…n-button Feature/64 add autofield validatation button
akvo · Jun 11, 2024 · a11f7d3 · a11f7d3
2 parents 0b4fe37 + 075b7f4
commit a11f7d3
Show file tree

Hide file tree

Showing 8 changed files with 273 additions and 70 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/index.modern.js b/dist/index.modern.js
diff --git a/dist/index.modern.js.map b/dist/index.modern.js.map
diff --git a/src/components/question-type/SettingAutofield.jsx b/src/components/question-type/SettingAutofield.jsx
@@ -1,5 +1,18 @@
 import React, { useState, useMemo } from 'react';
-import { Form, Checkbox, Space, Input, AutoComplete, Typography } from 'antd';
+import {
+  Form,
+  Checkbox,
+  Space,
+  Input,
+  AutoComplete,
+  Typography,
+  Button,
+} from 'antd';
+import {
+  CheckCircleTwoTone,
+  CloseCircleTwoTone,
+  BugOutlined,
+} from '@ant-design/icons';
 import styles from '../../styles.module.css';
 import {
   UIStore,
@@ -36,6 +49,7 @@ const SettingAutofield = ({
     (s) => s.questionGroups
   );
   const [search, setSearch] = useState(null);
+  const [isCorrect, setIsCorrect] = useState(false);
   const questionErrors = ErrorStore.useState((s) => s.questionErrors);
 
   const currentAutofieldFnStringError = useMemo(() => {
@@ -124,14 +138,16 @@ const SettingAutofield = ({
           (e) => e.id !== id && e.field !== 'autofield_fnString'
         );
       });
+      setIsCorrect(true);
     } catch (error) {
+      setIsCorrect(false);
       ErrorStore.update((s) => {
         s.questionErrors = [
           ...s.questionErrors,
           {
             id: id,
             field: 'autofield_fnString',
-            message: `Error evaluating function string${
+            message: `${UIText.evaluatefnStringError}${
               error?.message ? `: ${error.message}` : ''
             }`,
           },
@@ -183,7 +199,6 @@ const SettingAutofield = ({
     // Extracted content from the function body (remove function)
     const extractedContent = match ? match[1].trim() : val?.trim();
     setSearch(null);
-    validateAndExecute(extractedContent);
     updateState('fn', { ...fn, fnString: extractedContent });
   };
 
@@ -232,6 +247,14 @@ const SettingAutofield = ({
         label={UIText.inputQuestionAutofieldFnString}
         name={`${namePreffix}-autofield_fnString`}
         initialValue={fn?.fnString || null}
+        validateStatus={
+          isCorrect
+            ? 'success'
+            : currentAutofieldFnStringError?.id
+            ? 'error'
+            : null
+        }
+        hasFeedback
         required
       >
         <AutoComplete
@@ -253,13 +276,32 @@ const SettingAutofield = ({
           />
         </AutoComplete>
       </Form.Item>
-      {currentAutofieldFnStringError?.id ? (
-        <div className={styles['field-error-wrapper']}>
-          <Text type="danger">{currentAutofieldFnStringError.message}</Text>
-        </div>
-      ) : (
-        ''
-      )}
+      <Space
+        className={styles['field-error-wrapper']}
+        align="center"
+      >
+        <Button
+          icon={<BugOutlined />}
+          onClick={() => validateAndExecute(fn.fnString)}
+          type="primary"
+          size="middle"
+          ghost
+        >
+          {UIText.evaluatefnStringButton}
+        </Button>
+        {currentAutofieldFnStringError?.id && (
+          <Space>
+            <CloseCircleTwoTone twoToneColor="#ff4d4f" />
+            <Text type="danger">{currentAutofieldFnStringError.message}</Text>
+          </Space>
+        )}
+        {isCorrect && (
+          <Space>
+            <CheckCircleTwoTone twoToneColor={'#52c41a'} />
+            <Text type="success">{UIText.evaluatefnStringSuccess}</Text>
+          </Space>
+        )}
+      </Space>
       <Form.Item
         label={UIText.inputQuestionAutofieldFnColor}
         name={`${namePreffix}-autofield_fnColor`}

diff --git a/src/components/question-type/SettingOption.jsx b/src/components/question-type/SettingOption.jsx
@@ -8,9 +8,13 @@ import {
   MdOutlineArrowCircleDown,
   MdOutlineArrowCircleUp,
 } from 'react-icons/md';
-import { orderBy, takeRight, snakeCase } from 'lodash';
+import { orderBy, takeRight } from 'lodash';
 import { SketchPicker } from 'react-color';
 
+const snakeCase = (txt = '') => {
+  return txt?.toLowerCase()?.replace(/\s+/g, '_');
+};
+
 const defaultOptions = ({ init = false, order = 0 }) => {
   const optTextTemp = 'New Option';
   const option = {

diff --git a/src/lib/i18n.js b/src/lib/i18n.js
@@ -111,6 +111,9 @@ const UIStaticText = {
     inputQuestionDisplayOnlyCheckbox: 'Display Only',
     inputQuestionDisplayOnlyCheckboxTooltip:
       'If you check "Display Only", the answer value for this question will not be submitted.',
+    evaluatefnStringButton: 'Evaluate Function',
+    evaluatefnStringError: 'Error evaluating function string',
+    evaluatefnStringSuccess: 'Function string evaluated correctly!',
   },
 };
 

diff --git a/yarn.lock b/yarn.lock
@@ -2593,10 +2593,10 @@ ajv@^8.0.0, ajv@^8.6.0, ajv@^8.8.0:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
-akvo-react-form@^2.2.7:
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/akvo-react-form/-/akvo-react-form-2.2.7.tgz#542392cd0c076d88035b7927ddb1bab2322a99d4"
-  integrity sha512-2FJmS0LxH7LwmBjVArtoxBx5YmGR5cd9sGpUgu2IwpJfOhjQa2Irc0fAEi+qyFMUcvRoFyPta0VbjfILmkEM+g==
+akvo-react-form@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/akvo-react-form/-/akvo-react-form-2.5.2.tgz#eb7c9ec1a231fca5530e425694a5e9e2ac23e3b2"
+  integrity sha512-6BdY6Rp34FTL1vRrnb69Vq7XXihxSmtz5U8ENuj1g5+vbrdvSGHVQKiPSKA4kXNR9lBDj271VFauqdHgmfy0zg==
   dependencies:
     "@react-leaflet/core" ">=1.0.0 <1.1.0 || ^1.1.1"
     antd "^4.20.0"
@@ -2611,6 +2611,7 @@ akvo-react-form@^2.2.7:
     react-html-parser "^2.0.2"
     react-icons "^4.3.1"
     react-leaflet "^4.0.2"
+    uuid "^9.0.1"
 
 alphanum-sort@^1.0.0:
   version "1.0.2"
@@ -10966,6 +10967,11 @@ uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 v8-to-istanbul@^8.1.0:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz#77b752fd3975e31bbcef938f85e9bd1c7a8d60ed"