Skip to content

Commit

Permalink
Add Outcome indicator
Browse files Browse the repository at this point in the history
Add Indicator AggregatesDisaggregates
  • Loading branch information
felixkithinji committed Jan 26, 2023
1 parent 88a40ae commit 9b3be5e
Show file tree
Hide file tree
Showing 8 changed files with 295 additions and 21 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "AIMS",
"version": "1.0.0",
"description": "AIMS FRONTEND",
"author": "Bootlab <[email protected]>",
"author": "",
"private": true,
"license": "",
"scripts": {
Expand Down
9 changes: 9 additions & 0 deletions src/api/result-chain-aggregate.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { apiRoutes } from "../apiRoutes";
import axios from "axios";

export const saveResultChainAggregate = async (resultChainAggregate) => {
return await axios.post(
`${apiRoutes.resultChainAggregate}`,
resultChainAggregate
);
};
1 change: 1 addition & 0 deletions src/apiRoutes.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export const apiRoutes = {
resultChain: `${path}${process.env.REACT_APP_INDICATOR_PORT}/api/ResultChain`,
processLevelCostCentre: `${path}${process.env.REACT_APP_INDICATOR_PORT}/api/ProcessLevelCostCentre`,
resultChainIndicator: `${path}${process.env.REACT_APP_INDICATOR_PORT}/api/ResultChainIndicator`,
resultChainAggregate: `${path}${process.env.REACT_APP_INDICATOR_PORT}/api/ResultChainAggregate`,
// external
ERPStaffList: `https://stagingapi.amref.org/api/erpStaffList?unit=HQ`,
administrativeRoles: `https://stagingapi.amref.org/api/workflowStepApproverRoles_View`,
Expand Down
8 changes: 0 additions & 8 deletions src/pages/project/design/AddIndicatorModal.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,20 @@
import React from "react";
import { useParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useFormik } from "formik";
import * as Yup from "yup";
import { Guid } from "../../../utils/guid";
import { toast } from "react-toastify";
import {
Box,
Breadcrumbs as MuiBreadcrumbs,
Button as MuiButton,
Card as MuiCard,
CardContent as MuiCardContent,
Checkbox,
CircularProgress,
Divider as MuiDivider,
FormControlLabel,
FormGroup,
Grid,
MenuItem,
Paper as MuiPaper,
Stack,
TextField as MuiTextField,
Typography,
Expand All @@ -30,12 +26,9 @@ import { getLookupMasterItemsByName } from "../../../api/lookup";
import { saveResultChainIndicator } from "../../../api/result-chain-indicator";

const Card = styled(MuiCard)(spacing);
const Divider = styled(MuiDivider)(spacing);
const Breadcrumbs = styled(MuiBreadcrumbs)(spacing);
const CardContent = styled(MuiCardContent)(spacing);
const Button = styled(MuiButton)(spacing);
const TextField = styled(MuiTextField)(spacing);
const Paper = styled(MuiPaper)(spacing);

const initialValuesIndicator = {
indicatorId: "",
Expand Down Expand Up @@ -119,7 +112,6 @@ const AddIndicatorModal = ({ processLevelItemId, outcome, handleClick }) => {
type: "success",
});
} catch (error) {
console.log(error);
toast(error.response.data, {
type: "error",
});
Expand Down
134 changes: 134 additions & 0 deletions src/pages/project/design/DisaggregatesModal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import React, { useState } from "react";
import {
Button,
Checkbox,
FormControlLabel,
FormGroup,
Grid,
} from "@mui/material";
import { Guid } from "../../../utils/guid";
import { useMutation } from "@tanstack/react-query";
import { saveResultChainAggregate } from "../../../api/result-chain-aggregate";
import { toast } from "react-toastify";

const DisaggregatesModal = ({
resultChainIndicatorId,
indicatorAggregates,
processLevelItemId,
processLevelTypeId,
handleClick,
}) => {
const primaries = indicatorAggregates.filter((obj) => obj.isPrimary === true);
const secondaries = indicatorAggregates.filter(
(obj) => obj.isPrimary === false
);
let fields = [];
for (const primary of primaries) {
for (const secondary of secondaries) {
const fieldName =
primary.aggregateDisaggregate.disaggregate.id +
"/" +
secondary.aggregateDisaggregate.disaggregate.id;
const field = { [fieldName]: false };
fields.push(field);
}
}
const [inputFields, setInputFields] = useState(fields);
const handleFormChange = (e) => {
let data = [...inputFields];
let val;
for (let i = 0; i < data.length; i++) {
if (Object.keys(data[i])[0] === e.target.name) {
val = i;
}
}
data[val][e.target.name] = e.target.checked;
setInputFields(data);
};
const mutation = useMutation({ mutationFn: saveResultChainAggregate });
const handleSubmit = async (e) => {
try {
e.preventDefault();
const resultChainAggregate = {
id: new Guid().toString(),
createDate: new Date(),
resultChainIndicatorId,
processLevelItemId: processLevelItemId,
processLevelTypeId: processLevelTypeId,
selectedResultChains: [],
};
for (let i = 0; i < inputFields.length; i++) {
if (Object.values(inputFields[i])[0]) {
const arraySelectedAggregateDisaggregate = Object.keys(
inputFields[i]
)[0].split("/");
resultChainAggregate.selectedResultChains.push({
disaggregateId1: arraySelectedAggregateDisaggregate[0],
disaggregateId2: arraySelectedAggregateDisaggregate[1],
});
}
}
await mutation.mutateAsync(resultChainAggregate);
toast("Successfully Created Disaggregates", {
type: "success",
});
handleClick();
} catch (error) {
toast(error.response.data, {
type: "error",
});
}
};
return (
<>
<form onSubmit={(e) => handleSubmit(e)}>
<Grid
container
spacing={2}
key={Math.random().toString(36)}
sx={{ width: "100%" }}
>
<Grid item md={6}>
Disaggregator1
</Grid>
<Grid item md={6}>
Disaggregator2
</Grid>
</Grid>
{primaries.map((primary) => (
<Grid container spacing={2} key={primary.id} sx={{ width: "100%" }}>
{secondaries.map((secondary) => (
<React.Fragment key={primary.id + secondary.id}>
<Grid item md={6}>
<FormGroup>
<FormControlLabel
control={
<Checkbox
// checked={formik.values.primaryRole}
onChange={(event) => handleFormChange(event)}
name={
primary.aggregateDisaggregate.disaggregate.id +
"/" +
secondary.aggregateDisaggregate.disaggregate.id
}
/>
}
label={primary.aggregateDisaggregate.disaggregate.name}
/>
</FormGroup>
</Grid>
<Grid item md={6} key={Math.random().toString(36)}>
{secondary.aggregateDisaggregate.disaggregate.name}
</Grid>
</React.Fragment>
))}
</Grid>
))}
<Button type="submit" variant="contained" color="primary" mt={3}>
Save changes
</Button>
</form>
</>
);
};
export default DisaggregatesModal;
42 changes: 32 additions & 10 deletions src/pages/project/design/EnterTargetQuantitativeResultsFramework.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import {
} from "../../../api/result-chain";
import { Guid } from "../../../utils/guid";
import AddIndicatorModal from "./AddIndicatorModal";
import ResultChainIndicators from "./ResultChainIndicators";

const Card = styled(MuiCard)(spacing);
const Divider = styled(MuiDivider)(spacing);
Expand Down Expand Up @@ -231,19 +232,24 @@ const GetProjectOutputs = ({ outcomeId, resultLevelOptionId }) => {
return `This Objective does not have Outputs, Please add output`;
}
return (
<Grid container spacing={2}>
<Grid container spacing={0}>
<Grid item md={12}>
{result.map((output) => (
<Grid container spacing={2} key={output.id} sx={{ width: "100%" }}>
<Grid
container
spacing={0}
key={output.id}
sx={{ width: "100%", borderStyle: "dotted" }}
>
<Grid item md={12}>
<Paper elevation={24} square={true}>
<Card mb={2}>
<CardContent>
<Typography variant="h4" gutterBottom display="inline">
<Typography variant="h6" gutterBottom display="inline">
{output.code}
</Typography>
&nbsp;&nbsp;
<Typography variant="h6" gutterBottom display="inline">
<Typography variant="body2" gutterBottom display="inline">
{output.name}
</Typography>
<Grid item md={12} sx={{ marginTop: 2, marginBottom: 2 }}>
Expand Down Expand Up @@ -280,7 +286,9 @@ const GetProjectOutcomes = ({
lookupItemId,
resultLevelOptionId,
processLevelItemId,
processLevelTypeId,
}) => {
const queryClient = useQueryClient();
const [openOutputModal, setOpenOutputModal] = useState(false);
const [openIndicatorModal, setOpenIndicatorModal] = useState(false);
const [outcomeVal, setOutcomeVal] = useState();
Expand Down Expand Up @@ -309,8 +317,11 @@ const GetProjectOutcomes = ({
const handleClick = () => {
setOpenOutputModal(false);
};
const handleClickIndicatorModal = () => {
const handleClickIndicatorModal = async () => {
setOpenIndicatorModal(false);
await queryClient.invalidateQueries([
"getResultChainIndicatorsByResultChainId",
]);
};
return (
<Grid container spacing={2}>
Expand All @@ -319,13 +330,13 @@ const GetProjectOutcomes = ({
<Grid container spacing={2} key={outcome.id} sx={{ width: "100%" }}>
<Grid item md={6}>
<Paper elevation={24} square={true}>
<Card mb={2} sx={{ backgroundColor: "gray" }}>
<Card mb={2} sx={{ borderStyle: "dashed" }}>
<CardContent>
<Typography variant="h4" gutterBottom display="inline">
<Typography variant="h6" gutterBottom display="inline">
{outcome.code}
</Typography>
&nbsp;&nbsp;
<Typography variant="h6" gutterBottom display="inline">
<Typography variant="body2" gutterBottom display="inline">
{outcome.name}
</Typography>
<Grid item md={12} sx={{ marginTop: 2, marginBottom: 2 }}>
Expand Down Expand Up @@ -364,13 +375,21 @@ const GetProjectOutcomes = ({
</Stack>
</ThemeProvider>
</Grid>
<Divider sx={{ backgroundColor: "#000000" }} />
<Grid item md={12}>
<ResultChainIndicators
outcomeId={outcome.id}
processLevelItemId={processLevelItemId}
processLevelTypeId={processLevelTypeId}
/>
</Grid>
</CardContent>
</Card>
</Paper>
</Grid>
<Grid item md={6}>
<Paper elevation={24} square={true}>
<Card mb={2} sx={{ backgroundColor: "gray" }}>
<Card mb={2} sx={{ borderStyle: "dashed" }}>
<CardHeader title={`Output(s)`} />
<Divider />
<CardContent>
Expand Down Expand Up @@ -708,6 +727,7 @@ const EnterTargetByLocationForm = () => {
};
const EnterTargetQuantitativeResultsFrameworkForm = ({
processLevelItemId,
processLevelTypeId,
}) => {
const [open, setOpen] = useState(false);
const [openOutcomeModal, setOpenOutcomeModal] = useState(false);
Expand Down Expand Up @@ -838,6 +858,7 @@ const EnterTargetQuantitativeResultsFrameworkForm = ({
lookupItemId={lookupItemId}
resultLevelOptionId={resultLevelOptionId}
processLevelItemId={processLevelItemId}
processLevelTypeId={processLevelTypeId}
/>
</CardContent>
</Card>
Expand Down Expand Up @@ -875,7 +896,7 @@ const EnterTargetQuantitativeResultsFrameworkForm = ({
);
};
const EnterTargetQuantitativeResultsFramework = () => {
let { processLevelItemId } = useParams();
let { processLevelItemId, processLevelTypeId } = useParams();
return (
<React.Fragment>
<Helmet title="Results Framework" />
Expand All @@ -895,6 +916,7 @@ const EnterTargetQuantitativeResultsFramework = () => {
<Divider my={6} />
<EnterTargetQuantitativeResultsFrameworkForm
processLevelItemId={processLevelItemId}
processLevelTypeId={processLevelTypeId}
/>
</React.Fragment>
);
Expand Down
4 changes: 2 additions & 2 deletions src/pages/project/design/NewProjectForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -489,8 +489,8 @@ const NewProjectForm = ({ id }) => {
longTitle: Yup.string().required("Required"),
description: Yup.string().required("Required"),
goal: Yup.string().required("Required"),
startingDate: Yup.date().min(new Date()).required("Required"),
endingDate: Yup.date().min(new Date()).required("Required"),
startingDate: Yup.date().required("Required"),
endingDate: Yup.date().required("Required"),
currentStatus: Yup.string().required("Required"),
personnelId: Yup.object(),
projectManagerEmail: Yup.string(),
Expand Down
Loading

0 comments on commit 9b3be5e

Please sign in to comment.