Skip to content

Commit

Permalink
Develop (#401)
Browse files Browse the repository at this point in the history 
* New User Journey (#388)

* Feature/user journey step 1

* [#383] Move current case page into old-cases

* [#383] Init new case page

* [#383] Load cases data in new case page

* [#383] New cases page

* [#383] Implement new case filter

* [#383] Implement new case settings modal visual

* [#383] Handle case settings behaviour with new state management

* [#383] Handle save new case settings without segments value

* [#383] Support add segments when create case settings

* [#383] Support segments payload on update case endpoint

* [#383] Handle new case setting with segments correctly

* [#383] Breakdown case settings into components

* [#383] Initial new case detail page with sidebar

* [#383] Handle load case detail in edit case page

* [#383] Set step sidebar as fixed sidebar

* [#383] Render case title and case settings form in CaseWrapper

* [#383] Refactor the export function, static, & lib to correct place

* [#383] Load current case settings value correctly

* [#385] Refine step path and load related page

* [#385] Handle close case setting modal after saved success

* [#385] Init set income target page layout

* [#385] Refine segment tabs as a wrapper to be reused in another page

* [#385] Load region options in set an income target page

* [#385] Load income target value and source when select region

* [#385] Add segment id into form name for SetIncomeTarget

* [#385] Fix yarn lint

* [#385] Finalize set income target state update

* [#385] Load initial value for SetIncomeTarget

* [#385] Add Back/Next button on parent and send the props into children

* [#385] Handle change hh adult/child value

* [#385] Handle save SetIncomeTarget

* [#383] Handle number of farmers field on segment

* Feature/389 user journey breakdown step pages into different url (#390)

* [#389] Handle EnterIncomeData page button function

* [#389] Handle case button on UnderstandIncomeGap

* [#389] Handle case button on AssessImpactMitigationStrategies

* [#389] Handle case button on ClosingGap

* [#389] Handle EnterIncomeData right element (visuals) position in SegmentTabsWrapper

* [#389] Get commodity questions

* [#389] Add Total Income section

* [#389] Fetch and regroup driver questions to follow new design layout

* [#389] Move renderPercentageTag fn into lib file

* [#389] Initial render driver questions

* [#389] Render unit name and current/feasible value field

* [#389] Handle disable input/lock when questions breakdown

* [#389] Handle onValuesChange of income drivers

* [#389] Handle total value in section, parent, and general total income

* [#389] Handle income percentage value

* [#389] Init handle save EnterIncomeData

* [#389] Handle save EnterIncomeData value properly

* Feature/391 user journey segment page lib per page (#392)

* [#391] Move enableEditCase state into general CaseUIState

* [#391] Initial layout for EnterIncomeData visual

* [#391] Add income target card on EnterIncomeData page

* [#391] Create VisualCardWrapper component

* [#391] Render household income bar chart

* [#391] Init UnderstandIncomeGap page

* [#391] Create visuals component

* [#391] Fetch questions on wrapper

* [#391] Create dashboardData state

* [#391] Render ChartIncomeGap

* [#391] Create CompareIncomeGap visualization

* [#391] Handle new user journey when prev case doesn't have any segments yet

* [#391] Debugging with test full case data for current complete new user journey

* [#391] Fix EnterIncomeData page onLoad & onValuesChange

* [#391] Refine EnterIncomeData calculation

* [#391] Handle enableEditCase state

* [#391] Fix EnterIncomeData value & dashboardData calculation

* [#391] Add answers & benchmark into segment put endpoint obj

* [#391] Create ChartExploreIncomeDriversBreakdown

* [#393] Initial AssessImpactMitigationStrategies page

* [#391] Create biggest impact on income & monetary contribution chart

* [#393] Initial binning driver form

* [#393] Set sensitivity analysis value into state

* Feature/395 user journey update state management (#396)

* [#395] Create line chart for sensitivity analysis page

* [#395] Create sensitivity analysis heatmap chart

* [#395] Create adjust income target section

* [#395] Handle save sensitivity analysis config

* [#395] Handle initial load sensitivity analysis data

* [#395] Fix onLoad sensitivity analysis bugs

* [#395] Initial adjut income target modal

* [#395] Add style into adjust income target modal

* [#395] Handle save adjusted income target

* [#395] Move segment tabs wrapper into a layout component

* [#395] Initial scenario modeling page

* [#395] Initial render driver question for scenario modeling

* [#395] Add segment selector into scenario modeling page

* [#395] Refactor scenario modeling input

* [#395] Create tree select dropdown for scenario modeling

* [#395] Manage scenario form detail value & scenario driver

* [#395] Manage scenario income driver initial and on change value

* [#398] Fix react duplicate keys warning

* [#398] Update segment answer when scenario driver changed

* [#398] Create new dashboard data value

* [#398] Try to recalculate the income drivers on ScenarioModelingForm

* [#399] Update step1 wording

* [#399] Enable show label in ChartCalculatedHhIncome

* [#399] Enable export functionality

* [#399] Create ExploreDataFromOtherStudies table

* [#399] Rotate chart xAxis label

* [#399] Enable show label and export btn in Understand income gap page

* [#399] Create ExploreIncomeLevelsForDifferentCommodities chart

* [#399] Update assess impact page

* [#399] Update adjust income target modal step

* [#399] Fix case loading & default segment selected
  • Loading branch information
@wayangalihpratama
wayangalihpratama authored Jan 27, 2025
1 parent d12b96a commit 12dae08
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 14 deletions.
24 changes: 13 additions & 11 deletions frontend/src/pages/cases/Case.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { useState, useEffect } from "react";
import { Spin } from "antd";
import { CaseWrapper, SegmentTabsWrapper } from "./layout";
import { useParams, useNavigate } from "react-router-dom";
import { api, flatten, getFunctionDefaultValue } from "../../lib";
Expand Down Expand Up @@ -33,12 +32,6 @@ const commodityNames = masterCommodityCategories.reduce((acc, curr) => {
return { ...acc, ...commodities };
}, {});

const Loading = () => (
<div className="loading-container">
<Spin />
</div>
);

const addLevelIntoQuestions = ({ questions, level = 0 }) => {
return questions.map((q) => {
if (q.childrens.length) {
Expand Down Expand Up @@ -90,7 +83,7 @@ const Case = () => {
const navigate = useNavigate();
const { caseId, step } = useParams();

const [loading, setLoading] = useState(false);
const [loading, setLoading] = useState(true);
const currentCase = CurrentCaseState.useState((s) => s);
const { questionGroups, totalIncomeQuestions } = CaseVisualState.useState(
(s) => s
Expand Down Expand Up @@ -157,12 +150,16 @@ const Case = () => {
// Fetch case details
useEffect(() => {
if (caseId && currentCase.id !== parseInt(caseId)) {
setLoading(true);
// setLoading(true);
// prevent fetch the data when it's already defined
api
.get(`case/${caseId}`)
.then((res) => {
const { data } = res;
if (data?.segments?.length) {
// order the segments by it's ID
data["segments"] = orderBy(data.segments, ["id"]);
}
CurrentCaseState.update((s) => ({ ...s, ...data }));
PrevCaseState.update((s) => ({ ...s, ...data }));
// set default active segmentId
Expand Down Expand Up @@ -502,8 +499,13 @@ const Case = () => {
}, [currentCase.id]);

return (
<CaseWrapper caseId={caseId} step={step} currentCase={currentCase}>
{loading ? <Loading /> : renderPage(step, navigate)}
<CaseWrapper
caseId={caseId}
step={step}
currentCase={currentCase}
loading={loading}
>
{renderPage(step, navigate)}
</CaseWrapper>
);
};
Expand Down
21 changes: 18 additions & 3 deletions frontend/src/pages/cases/layout/CaseWrapper.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,17 @@
import React, { useState, useRef } from "react";
import "./case-wrapper.scss";
import { useNavigate } from "react-router-dom";
import { Row, Col, Steps, Layout, Affix, Button, Space, Alert } from "antd";
import {
Row,
Col,
Steps,
Layout,
Affix,
Button,
Space,
Alert,
Spin,
} from "antd";
import { ContentLayout } from "../../../components/layout";
import {
ArrowLeftOutlined,
Expand Down Expand Up @@ -60,7 +70,8 @@ const CaseSidebar = ({ step, caseId }) => {
);
};

const CaseWrapper = ({ children, step, caseId, currentCase }) => {
// TODO :: add loading here before fetch the case details so we not use the Unable page
const CaseWrapper = ({ children, step, caseId, currentCase, loading }) => {
const caseButtonState = CaseUIState.useState((s) => s.caseButton);
const [caseSettingModalVisible, setCaseSettingModalVisible] = useState(false);

Expand Down Expand Up @@ -105,7 +116,11 @@ const CaseWrapper = ({ children, step, caseId, currentCase }) => {
</Button>
}
>
{currentCase.segments.filter((s) => s.id).length ? (
{loading ? (
<div className="loading-container">
<Spin />
</div>
) : currentCase.segments.filter((s) => s.id).length ? (
React.isValidElement(children) ? (
React.cloneElement(children, {
setbackfunction: (fn) => (backFunctionRef.current = fn),
Expand Down

0 comments on commit 12dae08

Please sign in to comment.