Finish feature/OP-842

OP-842: Adding user districts through region picker

src/actions.js

@@ -7,6 +7,7 @@ import {
   prepareMutation,
   graphqlWithVariables,
   fetchMutation,
+  useGraphqlQuery
 } from "@openimis/fe-core";
 import _ from "lodash";
 import { mapUserValuesToInput } from "./utils";
@@ -234,3 +235,30 @@ export function fetchUserMutation(mm, clientMutationId) {
   );
   return graphql(payload, "ADMIN_USER");
 }
+
+
+export function fetchRegionDistricts(parent) {
+  let filters = [`type: "D"`];
+  if (!!parent) {
+    filters.push(`parent_Uuid: "${parent.uuid}"`);
+  }
+  let payload = formatPageQuery("locations", filters, [
+    "id",
+    "uuid",
+    "type",
+    "code",
+    "name",
+    "malePopulation",
+    "femalePopulation",
+    "otherPopulation",
+    "families",
+    "clientMutationId",
+  ]);
+  return graphql(payload, `LOCATION_REGION_DISTRICTS`);
+}
+
+export function clearRegionDistricts() {
+  return (dispatch) => {
+    dispatch({ type: `LOCATION_REGION_DISTRICTS_CLEAR` });
+  };
+}

src/components/ClaimAdministratorFormPanel.js

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useState, useEffect }  from "react";
 import { Grid, Typography, Paper, Switch } from "@material-ui/core";
 import { withTheme, withStyles } from "@material-ui/core/styles";
-import { useTranslations, withModulesManager, combine, PublishedComponent } from "@openimis/fe-core";
+import { useTranslations, withModulesManager, combine, PublishedComponent, useGraphqlQuery } from "@openimis/fe-core";
 import { CLAIM_ADMIN_USER_TYPE } from "../constants";
 import { toggleUserType } from "../utils";
 
@@ -15,6 +15,35 @@ const ClaimAdministratorFormPanel = (props) => {
   const { edited, classes, modulesManager, onEditedChanged, readOnly } = props;
   const { formatMessage } = useTranslations("admin.ClaimAdministratorFormPanel", modulesManager);
   const isEnabled = edited.userTypes?.includes(CLAIM_ADMIN_USER_TYPE);
+
+  const has_role = !!edited.roles ? (edited.roles.filter((x) => x.isSystem == 256).length != 0) : false
+  if (isEnabled) {
+    const {isLoading, data, error: graphqlError} = useGraphqlQuery(
+      `
+      query UserRolesPicker ($system_id: Int) {
+        role(systemRoleId: $system_id) {
+          edges {
+            node {
+              id name isSystem
+            }
+          }
+        }
+      }
+    `,
+      { system_id: 256 }, // Claim Admin System Role is 256
+    );
+    const isValid = !isLoading
+    useEffect(() => {
+      if (isValid & isEnabled & !has_role) {
+        const role = data.role.edges[0].node
+        const roles  = !!edited.roles ? edited.roles : [];
+        roles.push(role)
+        edited.roles = roles
+        onEditedChanged(edited)
+      }
+    }, [isValid]);
+  }
+
   return (
     <Paper className={classes.paper}>
       <Grid item xs={12} className={classes.title}>

src/components/EnrolmentOfficerFormPanel.js

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useState, useEffect }  from "react";
 import { Grid, Typography, Paper, Switch } from "@material-ui/core";
 import { withTheme, withStyles } from "@material-ui/core/styles";
-import { useTranslations, withModulesManager, combine, PublishedComponent, TextInput } from "@openimis/fe-core";
+import { useTranslations, withModulesManager, combine, PublishedComponent, TextInput, useGraphqlQuery } from "@openimis/fe-core";
 import { ENROLMENT_OFFICER_USER_TYPE } from "../constants";
 import { toggleUserType } from "../utils";
 import EnrolmentVillagesPicker from "./EnrolmentVillagesPicker";
@@ -17,6 +17,33 @@ const EnrolmentOfficerFormPanel = (props) => {
   const { formatMessage } = useTranslations("admin.EnrolmentOfficerFormPanel", modulesManager);
 
   const isEnabled = edited.userTypes?.includes(ENROLMENT_OFFICER_USER_TYPE);
+  const has_role = !!edited.roles ? (edited.roles.filter((x) => x.isSystem == 1).length != 0) : false
+  if (isEnabled) {
+    const {isLoading, data, error: graphqlError} = useGraphqlQuery(
+      `
+      query UserRolesPicker ($system_id: Int) {
+        role(systemRoleId: $system_id) {
+          edges {
+            node {
+              id name isSystem
+            }
+          }
+        }
+      }
+    `,
+      { system_id: 1 }, // EO System Role is 1
+    );
+    const isValid = !isLoading
+    useEffect(() => {
+      if (isValid & isEnabled & !has_role) {
+        const role = data.role.edges[0].node
+        const roles  = !!edited.roles ? edited.roles : [];
+        roles.push(role)
+        edited.roles = roles
+        onEditedChanged(edited)
+      }
+    }, [isValid]);
+  }
 
   return (
     <Paper className={classes.paper}>

src/components/UserForm.js

@@ -19,7 +19,7 @@ import {
 import { CLAIM_ADMIN_USER_TYPE, ENROLMENT_OFFICER_USER_TYPE, INTERACTIVE_USER_TYPE, RIGHT_USERS } from "../constants";
 import EnrolmentOfficerFormPanel from "./EnrolmentOfficerFormPanel";
 import ClaimAdministratorFormPanel from "./ClaimAdministratorFormPanel";
-import { fetchUser, createUser, fetchUserMutation } from "../actions";
+import { fetchUser, createUser, fetchUserMutation, fetchRegionDistricts, clearRegionDistricts } from "../actions";
 import UserMasterPanel from "./UserMasterPanel";
 
 const styles = (theme) => ({
@@ -37,6 +37,8 @@ const setupState = (props) => ({
     : props.user,
 });
 
+
+
 class UserForm extends Component {
   constructor(props) {
     super(props);
@@ -48,8 +50,30 @@ class UserForm extends Component {
       this.props.fetchUser(this.props.modulesManager, this.props.userId);
     }
   }
+
 
   componentDidUpdate(prevProps) {
+    if (prevProps.region_districts != this.props.region_districts) {
+      if (!!this.props.region_districts) {
+        const combined = [
+            ...(!!this.state.user.districts? this.state.user.districts : []) ,
+            ...this.props.region_districts
+        ]
+        const no_duplicates = [
+            ...new Map(
+              combined.map(x => [x.uuid, x])
+            ).values()
+        ]
+        this.state.user.districts = no_duplicates
+        this.state.user.region = []
+        this.setState((state, props) => ({
+          user: {
+            ...state.user
+          },
+        }));
+      }
+    }
+
     if (!prevProps.fetchedUser && this.props.fetchedUser) {
       this.setState(setupState(this.props));
     } else if (prevProps.userId && !this.props.userId) {
@@ -116,6 +140,13 @@ class UserForm extends Component {
   };
 
   onEditedChanged = (user) => {
+    if (!!user.region){
+      user.region.forEach((region) => {
+        this.props.fetchRegionDistricts(region)
+      });
+    } else {
+      this.props.clearRegionDistricts()
+    }
     this.setState({ user });
   };
 
@@ -136,6 +167,7 @@ class UserForm extends Component {
       add,
       save,
       back,
+      region_districts
     } = this.props;
     const { user } = this.state;
 
@@ -188,15 +220,19 @@ const mapStateToProps = (state) => ({
   submittingMutation: state.admin.submittingMutation,
   mutation: state.admin.mutation,
   user: state.admin.user,
+  region_districts: state.admin.reg_dst,
   confirmed: state.core.confirmed,
 });
 
+
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators(
     {
       fetchUser,
       createUser,
       fetchUserMutation,
+      fetchRegionDistricts,
+      clearRegionDistricts,
       journalize,
       coreConfirm,
     },

src/components/UserMasterPanel.js

@@ -3,6 +3,8 @@ import { withTheme, withStyles } from "@material-ui/core/styles";
 import { Grid, Divider, Typography } from "@material-ui/core";
 import { withModulesManager, useTranslations, TextInput, PublishedComponent, combine } from "@openimis/fe-core";
 import { CLAIM_ADMIN_USER_TYPE } from "../constants";
+// import { fetchRegionDistricts } from "../actions";
+
 
 const styles = (theme) => ({
   tableTitle: theme.table.title,
@@ -21,6 +23,7 @@ const UserMasterPanel = (props) => {
   const { classes, edited, readOnly, onEditedChanged, modulesManager } = props;
   const { formatMessage } = useTranslations("admin", modulesManager);
 
+
   return (
     <Grid container direction="row">
       <Grid item xs={4} className={classes.item}>
@@ -98,7 +101,20 @@ const UserMasterPanel = (props) => {
           onChange={(roles) => onEditedChanged({ ...edited, roles })}
         />
       </Grid>
-      <Grid item xs={6} className={classes.item}>
+        <Grid item xs={2} className={classes.item}>
+        <PublishedComponent
+          pubRef="location.LocationPicker"
+          locationLevel={0}
+          value={edited.region}
+          onChange={(region) => onEditedChanged({ ...edited, region })}
+          readOnly={readOnly}
+          required
+          multiple
+          withLabel
+          label={formatMessage("user.regions")}
+        />
+        </Grid>
+        <Grid item xs={4} className={classes.item}>
         <PublishedComponent
           pubRef="location.LocationPicker"
           locationLevel={1}

src/reducer.js

@@ -45,6 +45,7 @@ function reducer(
     user: null,
     submittingMutation: false,
     mutation: {},
+    reg_dst: []
   },
   action,
 ) {
@@ -178,6 +179,33 @@ function reducer(
         usersPageInfo: { totalCount: 0 },
         user: null,
       };
+    case "LOCATION_REGION_DISTRICTS_REQ":
+      return {
+        ...state,
+        fetching_reg_dst: true,
+        fetched_reg_dst: false,
+        reg_dst: [],
+        errorL1s: null,
+      };
+    case "LOCATION_REGION_DISTRICTS_RESP":
+      return {
+        ...state,
+        fetching_reg_dst: false,
+        fetfetched_reg_dstchedL1s: true,
+        reg_dst: parseData(action.payload.data.locations || action.payload.data.locationsStr),
+        errorL1s: formatGraphQLError(action.payload),
+      };
+    case "LOCATION_REGION_DISTRICTS_ERR":
+      return {
+        ...state,
+        fetching_reg_dst: false,
+        errorL1s: formatServerError(action.payload),
+      };
+    case "LOCATION_REGION_DISTRICTS_CLEAR":
+      return {
+        ...state,
+        reg_dst: []
+      };
     case "ADMIN_USER_MUTATION_REQ":
       return dispatchMutationReq(state, action);
     case "ADMIN_USER_MUTATION_ERR":