Merge pull request #1102 from akvo/feature/1099-add-select-all-in-vil…

…lage-dropdown

[#1099] select all village added for mobile user adding

frontend/src/components/filters/AdministrationDropdown.js

@@ -1,6 +1,6 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import "./style.scss";
-import { Select, Space } from "antd";
+import { Select, Space, Checkbox, Row, Col } from "antd";
 import PropTypes from "prop-types";
 import { store, api } from "../../lib";
 import { useCallback } from "react";
@@ -16,9 +16,12 @@ const AdministrationDropdown = ({
   currentId = null,
   onChange,
   limitLevel = false,
+  isSelectAllVillage = false,
+  selectedAdministrations = [],
   ...props
 }) => {
   const { user, administration, levels } = store.useState((state) => state);
+  const [checked, setChecked] = useState(false);
   /**
    * Get lowest level administrator from maxLevel.
    * otherwise, sort asc by level and get the last item from levels global state
@@ -49,6 +52,15 @@ const AdministrationDropdown = ({
     fetchUserAdmin();
   }, [fetchUserAdmin, persist]);
 
+  useEffect(() => {
+    const multiadministration = administration?.find(
+      (admLevel) => admLevel.level === lowestLevel.level - 1
+    )?.children;
+    if (multiadministration?.length === selectedAdministrations?.length) {
+      setChecked(true);
+    }
+  }, [administration, selectedAdministrations, lowestLevel.level]);
+
   const handleChange = async (e, index) => {
     if (!e) {
       return;
@@ -73,6 +85,39 @@ const AdministrationDropdown = ({
     }
   };
 
+  const handleSelectAllVillage = (e) => {
+    if (e.target.checked) {
+      setChecked(true);
+      let admItems = null;
+      const multiadministration = administration?.find(
+        (admLevel) => admLevel.level === lowestLevel.level - 1
+      )?.children;
+      admItems = multiadministration;
+      if (selectedAdministrations.length === admItems.length) {
+        return;
+      }
+      store.update((s) => {
+        s.administration = s.administration.concat(admItems);
+      });
+      if (onChange) {
+        const _values = admItems.map((item) => item.id);
+        onChange(_values);
+      }
+    } else {
+      setChecked(false);
+      store.update((s) => {
+        s.administration = s.administration.filter(
+          (data) => data.level <= lowestLevel.level - 1
+        );
+      });
+      if (onChange) {
+        onChange(
+          administration.filter((data) => data.level <= lowestLevel.level - 1)
+        );
+      }
+    }
+  };
+
   const handleClear = (index) => {
     store.update((s) => {
       s.administration.length = index + 1;
@@ -151,6 +196,15 @@ const AdministrationDropdown = ({
               );
             }
           })}
+        {isSelectAllVillage && maxLevel === 5 && (
+          <Row className="form-row">
+            <Col span={24}>
+              <Checkbox onChange={handleSelectAllVillage} checked={checked}>
+                Select all village
+              </Checkbox>
+            </Col>
+          </Row>
+        )}
       </Space>
     );
   }

frontend/src/pages/mobile-assignment/AddAssignment.jsx

@@ -284,6 +284,8 @@ const AddAssignment = () => {
                     }}
                     persist={id ? true : false}
                     allowMultiple
+                    isSelectAllVillage={true}
+                    selectedAdministrations={selectedAdministrations}
                   />
                 </Form.Item>
               </div>