[#46] Merge branch 'main' into feature/46-question-group-list

akvo · Jul 24, 2023 · fd55389 · fd55389
2 parents c57c78f + 1b8b3c7
commit fd55389
Show file tree

Hide file tree

Showing 23 changed files with 615 additions and 22 deletions.
diff --git a/app/src/form/fields/TypeDate.js b/app/src/form/fields/TypeDate.js
@@ -5,13 +5,13 @@ import { styles } from '../styles';
 import { Input } from '@rneui/themed';
 import DateTimePicker from '@react-native-community/datetimepicker';
 
-const TypeDate = ({ onChange, values, keyform, id, name }) => {
+const TypeDate = ({ onChange, values, keyform, id, name, required, requiredSign }) => {
   const now = new Date();
   const [showDatepicker, setShowDatePicker] = React.useState(false);
 
   return (
     <View>
-      <FieldLabel keyform={keyform} name={name} />
+      <FieldLabel keyform={keyform} name={name} requiredSign={required ? requiredSign : null} />
       <Input
         inputContainerStyle={styles.inputFieldContainer}
         onPressIn={() => setShowDatePicker(true)}

diff --git a/app/src/form/fields/TypeGeo.js b/app/src/form/fields/TypeGeo.js
@@ -8,7 +8,7 @@ import { FieldLabel } from '../support';
 import { styles } from '../styles';
 import { loc } from '../../lib';
 
-const TypeGeo = ({ onChange, values, keyform, id, name }) => {
+const TypeGeo = ({ onChange, values, keyform, id, name, required, requiredSign }) => {
   const [location, setLocation] = useState(null);
   const [errorMsg, setErrorMsg] = useState(null);
   const { latitude, longitude } = MapState.useState((s) => s);
@@ -56,6 +56,9 @@ const TypeGeo = ({ onChange, values, keyform, id, name }) => {
   }, [errorMsg, location, latitude, longitude]);
 
   useEffect(() => {
+    if (!onChange) {
+      return;
+    }
     if ((text && !values?.[id]) || (values?.[id] && values[id] !== text)) {
       onChange(id, text);
     }
@@ -64,7 +67,7 @@ const TypeGeo = ({ onChange, values, keyform, id, name }) => {
   const [latText, lngText] = text?.split('|');
   return (
     <View>
-      <FieldLabel keyform={keyform} name={name} />
+      <FieldLabel keyform={keyform} name={name} requiredSign={required ? requiredSign : null} />
       <View style={styles.inputGeoContainer}>
         {latText && lngText ? (
           <View>

diff --git a/app/src/form/fields/TypeImage.js b/app/src/form/fields/TypeImage.js
@@ -8,7 +8,7 @@ import { FieldLabel } from '../support';
 // TODO: getImageBase64 (ARF)
 // TODO: convertImageToBase64 (ARF)
 
-const TypeImage = ({ onChange, keyform, id, name }) => {
+const TypeImage = ({ onChange, keyform, id, name, required, requiredSign }) => {
   const [showDialog, setShowDialog] = React.useState(false);
   const [selectedImage, setSelectedImage] = React.useState(null);
 
@@ -101,7 +101,7 @@ const TypeImage = ({ onChange, keyform, id, name }) => {
 
   return (
     <View>
-      <FieldLabel keyform={keyform} name={name} />
+      <FieldLabel keyform={keyform} name={name} requiredSign={required ? requiredSign : null} />
       <View style={styles.fieldImageContainer}>
         {selectedImage != null ? (
           <Image

diff --git a/app/src/form/fields/TypeInput.js b/app/src/form/fields/TypeInput.js
@@ -66,10 +66,20 @@ export const addSuffix = (addonAfter) => {
   };
 };
 
-const TypeInput = ({ onChange, values, keyform, id, name, addonAfter, addonBefore }) => {
+const TypeInput = ({
+  onChange,
+  values,
+  keyform,
+  id,
+  name,
+  addonAfter,
+  addonBefore,
+  required,
+  requiredSign,
+}) => {
   return (
     <View>
-      <FieldLabel keyform={keyform} name={name} />
+      <FieldLabel keyform={keyform} name={name} requiredSign={required ? requiredSign : null} />
       <Input
         inputContainerStyle={styles.inputFieldContainer}
         onChangeText={(val) => {

diff --git a/app/src/form/fields/TypeMultipleOption.js b/app/src/form/fields/TypeMultipleOption.js
@@ -5,14 +5,23 @@ import { styles } from '../styles';
 import { CheckBox } from '@rneui/themed';
 import { MultiSelect } from 'react-native-element-dropdown';
 
-const TypeMultipleOption = ({ onChange, values, keyform, id, name, option = [] }) => {
+const TypeMultipleOption = ({
+  onChange,
+  values,
+  keyform,
+  id,
+  name,
+  option = [],
+  required,
+  requiredSign,
+}) => {
   const isCheckBox = React.useMemo(() => {
     return option.length <= 3;
   }, [option]);
 
   return (
     <View style={styles.multipleOptionContainer}>
-      <FieldLabel keyform={keyform} name={name} />
+      <FieldLabel keyform={keyform} name={name} requiredSign={required ? requiredSign : null} />
       {isCheckBox ? (
         option.map((opt, opti) => (
           <CheckBox

diff --git a/app/src/form/fields/TypeNumber.js b/app/src/form/fields/TypeNumber.js
@@ -5,10 +5,20 @@ import { styles } from '../styles';
 import { Input } from '@rneui/themed';
 import { addPreffix, addSuffix } from './TypeInput';
 
-const TypeNumber = ({ onChange, values, keyform, id, name, addonAfter, addonBefore }) => {
+const TypeNumber = ({
+  onChange,
+  values,
+  keyform,
+  id,
+  name,
+  addonAfter,
+  addonBefore,
+  required,
+  requiredSign,
+}) => {
   return (
     <View>
-      <FieldLabel keyform={keyform} name={name} />
+      <FieldLabel keyform={keyform} name={name} requiredSign={required ? requiredSign : null} />
       <Input
         inputContainerStyle={styles.inputFieldContainer}
         keyboardType="numeric"

diff --git a/app/src/form/fields/TypeOption.js b/app/src/form/fields/TypeOption.js
@@ -5,14 +5,23 @@ import { styles } from '../styles';
 import { CheckBox } from '@rneui/themed';
 import { Dropdown } from 'react-native-element-dropdown';
 
-const TypeOption = ({ onChange, values, keyform, id, name, option = [] }) => {
+const TypeOption = ({
+  onChange,
+  values,
+  keyform,
+  id,
+  name,
+  option = [],
+  required,
+  requiredSign,
+}) => {
   const isRadioGroup = React.useMemo(() => {
     return option.length <= 3;
   }, [option]);
 
   return (
     <View style={styles.optionContainer}>
-      <FieldLabel keyform={keyform} name={name} />
+      <FieldLabel keyform={keyform} name={name} requiredSign={required ? requiredSign : null} />
       {isRadioGroup ? (
         option.map((opt, opti) => (
           <CheckBox

diff --git a/app/src/form/fields/TypeText.js b/app/src/form/fields/TypeText.js
@@ -4,10 +4,10 @@ import { FieldLabel } from '../support';
 import { styles } from '../styles';
 import { Input } from '@rneui/themed';
 
-const TypeText = ({ onChange, values, keyform, id, name }) => {
+const TypeText = ({ onChange, values, keyform, id, name, required, requiredSign }) => {
   return (
     <View>
-      <FieldLabel keyform={keyform} name={name} />
+      <FieldLabel keyform={keyform} name={name} requiredSign={required ? requiredSign : null} />
       <Input
         inputContainerStyle={styles.inputFieldContainer}
         multiline={true}

diff --git a/app/src/form/fields/__test__/TypeDate.test.js b/app/src/form/fields/__test__/TypeDate.test.js
@@ -59,4 +59,34 @@ describe('TypeDate component', () => {
     const dateField = getByTestId('type-date');
     expect(dateField.props.value).toBe(initialValue.toLocaleDateString());
   });
+
+  it('should not show required sign if required param is false and requiredSign is not defined', () => {
+    const wrapper = render(<TypeDate id="dateField" name="Date Field" required={false} />);
+    const requiredIcon = wrapper.queryByTestId('field-required-icon');
+    expect(requiredIcon).toBeFalsy();
+  });
+
+  it('should not show required sign if required param is false but requiredSign is defined', () => {
+    const wrapper = render(
+      <TypeDate id="dateField" name="Date Field" required={false} requiredSign="*" />,
+    );
+    const requiredIcon = wrapper.queryByTestId('field-required-icon');
+    expect(requiredIcon).toBeFalsy();
+  });
+
+  it('should not show required sign if required param is true and requiredSign defined', () => {
+    const wrapper = render(
+      <TypeDate id="dateField" name="Date Field" required={true} requiredSign="*" />,
+    );
+    const requiredIcon = wrapper.queryByTestId('field-required-icon');
+    expect(requiredIcon).toBeTruthy();
+  });
+
+  it('should show required sign with custom requiredSign', () => {
+    const wrapper = render(
+      <TypeDate id="dateField" name="Date Field" required={true} requiredSign="**" />,
+    );
+    const requiredIcon = wrapper.getByText('**');
+    expect(requiredIcon).toBeTruthy();
+  });
 });
diff --git a/app/src/form/fields/__test__/TypeGeo.test.js b/app/src/form/fields/__test__/TypeGeo.test.js
@@ -53,4 +53,34 @@ describe('TypeGeo', () => {
       expect(navigation.navigate).toHaveBeenCalledWith('MapView', { latitude, longitude });
     });
   });
+
+  it('should not show required sign if required param is false and requiredSign is not defined', () => {
+    const wrapper = render(<TypeGeo id="geoField" name="Geolocation" required={false} />);
+    const requiredIcon = wrapper.queryByTestId('field-required-icon');
+    expect(requiredIcon).toBeFalsy();
+  });
+
+  it('should not show required sign if required param is false but requiredSign is defined', () => {
+    const wrapper = render(
+      <TypeGeo id="geoField" name="Geolocation" required={false} requiredSign="*" />,
+    );
+    const requiredIcon = wrapper.queryByTestId('field-required-icon');
+    expect(requiredIcon).toBeFalsy();
+  });
+
+  it('should not show required sign if required param is true and requiredSign defined', () => {
+    const wrapper = render(
+      <TypeGeo id="geoField" name="Geolocation" required={true} requiredSign="*" />,
+    );
+    const requiredIcon = wrapper.queryByTestId('field-required-icon');
+    expect(requiredIcon).toBeTruthy();
+  });
+
+  it('should show required sign with custom requiredSign', () => {
+    const wrapper = render(
+      <TypeGeo id="geoField" name="Geolocation" required={true} requiredSign="**" />,
+    );
+    const requiredIcon = wrapper.getByText('**');
+    expect(requiredIcon).toBeTruthy();
+  });
 });
diff --git a/app/src/form/fields/__test__/TypeImage.test.js b/app/src/form/fields/__test__/TypeImage.test.js
@@ -93,6 +93,36 @@ describe('TypeImage component', () => {
       fireEvent.press(getByTestId('btn-remove'));
       expect(setSelectedImage).toHaveBeenCalledTimes(1);
     });
+
+    it('should not show required sign if required param is false and requiredSign is not defined', () => {
+      const wrapper = render(<TypeImage id="imageField" name="Image" required={false} />);
+      const requiredIcon = wrapper.queryByTestId('field-required-icon');
+      expect(requiredIcon).toBeFalsy();
+    });
+
+    it('should not show required sign if required param is false but requiredSign is defined', () => {
+      const wrapper = render(
+        <TypeImage id="imageField" name="Image" required={false} requiredSign="*" />,
+      );
+      const requiredIcon = wrapper.queryByTestId('field-required-icon');
+      expect(requiredIcon).toBeFalsy();
+    });
+
+    it('should not show required sign if required param is true and requiredSign defined', () => {
+      const wrapper = render(
+        <TypeImage id="imageField" name="Image" required={true} requiredSign="*" />,
+      );
+      const requiredIcon = wrapper.queryByTestId('field-required-icon');
+      expect(requiredIcon).toBeTruthy();
+    });
+
+    it('should show required sign with custom requiredSign', () => {
+      const wrapper = render(
+        <TypeImage id="imageField" name="Image" required={true} requiredSign="**" />,
+      );
+      const requiredIcon = wrapper.getByText('**');
+      expect(requiredIcon).toBeTruthy();
+    });
   });
 
   describe('Request access external storage', () => {

diff --git a/app/src/form/fields/__test__/TypeInput.test.js b/app/src/form/fields/__test__/TypeInput.test.js
@@ -44,6 +44,36 @@ describe('TypeInput component', () => {
     expect(inputElement.props.value).toBe(initialValue);
   });
 
+  it('should not show required sign if required param is false and requiredSign is not defined', () => {
+    const wrapper = render(<TypeInput id="inputField" name="Field Name" required={false} />);
+    const requiredIcon = wrapper.queryByTestId('field-required-icon');
+    expect(requiredIcon).toBeFalsy();
+  });
+
+  it('should not show required sign if required param is false but requiredSign is defined', () => {
+    const wrapper = render(
+      <TypeInput id="inputField" name="Field Name" required={false} requiredSign="*" />,
+    );
+    const requiredIcon = wrapper.queryByTestId('field-required-icon');
+    expect(requiredIcon).toBeFalsy();
+  });
+
+  it('should not show required sign if required param is true and requiredSign defined', () => {
+    const wrapper = render(
+      <TypeInput id="inputField" name="Field Name" required={true} requiredSign="*" />,
+    );
+    const requiredIcon = wrapper.queryByTestId('field-required-icon');
+    expect(requiredIcon).toBeTruthy();
+  });
+
+  it('should show required sign with custom requiredSign', () => {
+    const wrapper = render(
+      <TypeInput id="inputField" name="Field Name" required={true} requiredSign="**" />,
+    );
+    const requiredIcon = wrapper.getByText('**');
+    expect(requiredIcon).toBeTruthy();
+  });
+
   test.failing('should not show input preffix if addonBefore not defined', () => {
     const wrapper = render(<TypeInput id="inputField" name="Field Label" />);
 

diff --git a/app/src/form/fields/__test__/TypeMultipleOption.test.js b/app/src/form/fields/__test__/TypeMultipleOption.test.js
@@ -51,4 +51,55 @@ describe('TypeMultipleOption', () => {
     const multipleDropdown = getByTestId('type-multiple-option-dropdown');
     expect(multipleDropdown).toBeDefined();
   });
+
+  it('should not show required sign if required param is false and requiredSign is not defined', () => {
+    const wrapper = render(
+      <TypeMultipleOption
+        id="multipleOptionField"
+        name="Multiple Option Field Name"
+        required={false}
+      />,
+    );
+    const requiredIcon = wrapper.queryByTestId('field-required-icon');
+    expect(requiredIcon).toBeFalsy();
+  });
+
+  it('should not show required sign if required param is false but requiredSign is defined', () => {
+    const wrapper = render(
+      <TypeMultipleOption
+        id="multipleOptionField"
+        name="Multiple Option Field Name"
+        required={false}
+        requiredSign="*"
+      />,
+    );
+    const requiredIcon = wrapper.queryByTestId('field-required-icon');
+    expect(requiredIcon).toBeFalsy();
+  });
+
+  it('should not show required sign if required param is true and requiredSign defined', () => {
+    const wrapper = render(
+      <TypeMultipleOption
+        id="multipleOptionField"
+        name="Multiple Option Field Name"
+        required={true}
+        requiredSign="*"
+      />,
+    );
+    const requiredIcon = wrapper.queryByTestId('field-required-icon');
+    expect(requiredIcon).toBeTruthy();
+  });
+
+  it('should show required sign with custom requiredSign', () => {
+    const wrapper = render(
+      <TypeMultipleOption
+        id="multipleOptionField"
+        name="Multiple Option Field Name"
+        required={true}
+        requiredSign="**"
+      />,
+    );
+    const requiredIcon = wrapper.getByText('**');
+    expect(requiredIcon).toBeTruthy();
+  });
 });