Skip to content

Commit

Permalink
[IMP] Refresh after adding cotisations and depenses, imp right sdb
Browse files Browse the repository at this point in the history
  • Loading branch information
@Landris18
Landris18 committed Jun 27, 2024
1 parent 3cbfa6c commit b8776c3
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 14 deletions.
13 changes: 8 additions & 5 deletions src/components/TabMenu/TabMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ interface TabPanelProps {
data?: any;
valueSwitch?: boolean;
changeSwitch?: Function;
refreshData?: Function;
isLoading?: boolean
}

Expand Down Expand Up @@ -59,7 +60,7 @@ const DIALOG_ADD_DEPENSE = "DIALOG_ADD_DEPENSE";
const TabPanel = (props: TabPanelProps) => {
const { user } = React.useContext(UserContext);

const { value, index, data, valueSwitch, changeSwitch, isLoading } = props;
const { value, index, data, valueSwitch, changeSwitch, refreshData, isLoading } = props;
const cols = columns[index];

const [openDialogCommon, setOpenDialogCommon] = React.useState(false);
Expand Down Expand Up @@ -99,6 +100,7 @@ const TabPanel = (props: TabPanelProps) => {
await Service.addCotisations(updatedCotisationsData).then((res: any) => {
toast.success(`Cotisations enregistrées ${res["success"]["saved"]}, ignorées ${res["success"]["ignored"]}`);
setOpenDialogCommon(false);
if (refreshData) refreshData();
}).catch((_error: any) => {
toast.error(_error?.response?.data?.error ?? "Impossible d'ajouter ces cotisations");
setOpenDialogCommon(false);
Expand All @@ -109,6 +111,7 @@ const TabPanel = (props: TabPanelProps) => {
await Service.addDepense(depenseData).then(() => {
toast.success(`Dépense enregistrée`);
setOpenDialogCommon(false);
if (refreshData) refreshData();
}).catch((_error: any) => {
toast.error(_error?.response?.data?.error ?? "Impossible d'ajouter la dépense");
setOpenDialogCommon(false);
Expand Down Expand Up @@ -424,9 +427,9 @@ const a11yProps = (index: number) => {

export default function TabMenu(props: any) {
const { cotisations, revenus, depenses, dettes } = props;
const { dataCotisations, valueSwitchCotisations, changeOnlyPaid, isLoadingCotisations } = cotisations;
const { dataCotisations, valueSwitchCotisations, changeOnlyPaid, refreshFromCotisation, isLoadingCotisations } = cotisations;
const { dataRevenus, isLoadingRevenus } = revenus;
const { dataDepenses, valueSwitchDepenses, changeForDette, isLoadingDepenses } = depenses;
const { dataDepenses, valueSwitchDepenses, changeForDette, refreshFromDepense, isLoadingDepenses } = depenses;
const { dataDettes } = dettes;

const [value, setValue] = React.useState(0);
Expand All @@ -451,9 +454,9 @@ export default function TabMenu(props: any) {
<StyledTab label="Dettes" {...a11yProps(3)} className="tab-label" />
</Tabs>
</Stack>
<TabPanel value={value} index={0} data={dataCotisations} valueSwitch={valueSwitchCotisations} changeSwitch={changeOnlyPaid} isLoading={isLoadingCotisations} />
<TabPanel value={value} index={0} data={dataCotisations} valueSwitch={valueSwitchCotisations} changeSwitch={changeOnlyPaid} refreshData={refreshFromCotisation} isLoading={isLoadingCotisations} />
<TabPanel value={value} index={1} data={dataRevenus} isLoading={isLoadingRevenus} />
<TabPanel value={value} index={2} data={dataDepenses} valueSwitch={valueSwitchDepenses} changeSwitch={changeForDette} isLoading={isLoadingDepenses} />
<TabPanel value={value} index={2} data={dataDepenses} valueSwitch={valueSwitchDepenses} changeSwitch={changeForDette} refreshData={refreshFromDepense} isLoading={isLoadingDepenses} />
<TabPanel value={value} index={3} data={dataDettes} />
</Box>
);
Expand Down
46 changes: 37 additions & 9 deletions src/pages/Dashboard/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ import LoadingGlobal from '../../components/LoadingGlobal/LoadingGlobal';
import TabMenu from '../../components/TabMenu/TabMenu';
import CommonDialog from '../../components/CommonDialog/CommonDialog';
import { TbDatabaseExport } from "react-icons/tb";
import { TfiPieChart } from "react-icons/tfi";
import { IoBookmarkOutline } from "react-icons/io5";
import { RiDonutChartLine } from 'react-icons/ri';
import './Dashboard.scss';


Expand Down Expand Up @@ -309,7 +312,6 @@ export default function Dashboard() {
navigate("/", { replace: true });
}, 1500);
}).catch((_error: any) => {
console.log(_error);
toast.error(_error?.response?.data?.error ?? "Impossible de vous déconnecter");
});
};
Expand All @@ -324,7 +326,6 @@ export default function Dashboard() {
navigate("/", { replace: true });
}, 1500);
}).catch((_error: any) => {
console.log(_error);
toast.error(_error?.response?.data?.error ?? "Impossible de mettre à jour votre mot de passe");
});
};
Expand Down Expand Up @@ -404,6 +405,12 @@ export default function Dashboard() {
}
};

const refreshData = async () => {
queryResults.forEach((queryResult) => {
queryResult.refetch();
});
};

/**
* Charts
*/
Expand Down Expand Up @@ -577,13 +584,25 @@ export default function Dashboard() {
</Stack>
<TabMenu
cotisations={
{ dataCotisations: cotisations, valueSwitchCotisations: onlyPaid, changeOnlyPaid: handleOnlyPaidChange, isLoadingCotisations: loadingRefetch || loadingRefetchTab || loadingRefetchCotisations }
{
dataCotisations: cotisations,
valueSwitchCotisations: onlyPaid,
changeOnlyPaid: handleOnlyPaidChange,
refreshFromCotisation: refreshData,
isLoadingCotisations: loadingRefetch || loadingRefetchTab || loadingRefetchCotisations
}
}
revenus={
{ dataRevenus: revenus, isLoadingRevenus: loadingRefetch || loadingRefetchTab }
}
depenses={
{ dataDepenses: depenses, valueSwitchDepenses: forDette, changeForDette: handleForDetteChange, isLoadingDepenses: loadingRefetch || loadingRefetchTab || loadingRefetchDepenses }
{
dataDepenses: depenses,
valueSwitchDepenses: forDette,
changeForDette: handleForDetteChange,
refreshFromDepense: refreshData,
isLoadingDepenses: loadingRefetch || loadingRefetchTab || loadingRefetchDepenses
}
}
dettes={
{ dataDettes: dettes }
Expand Down Expand Up @@ -724,15 +743,21 @@ export default function Dashboard() {
</Stack>
</Menu>
</Stack>
<Stack mt={2} bgcolor={`${colors.teal}09`} py={2} px={2.5} borderRadius={5} gap={3}>
<Stack mt={2} bgcolor={`${colors.teal}09`} py={4} px={4} borderRadius={10} gap={3}>
<Stack gap={1} alignItems={"start"}>
<h4 className='m-0' style={{ fontSize: 16 }}>Situation</h4>
<Stack direction={"row"} gap={1} alignItems={"center"}>
<RiDonutChartLine size={18} color={colors.teal} />
<h4 className='m-0' style={{ fontSize: 15.6 }}>Situation</h4>
</Stack>
<Stack py={0.8} px={1.5} bgcolor={`${getStatus()?.colors}20`} borderRadius={50}>
<small style={{ color: `${getStatus()?.colors}`, letterSpacing: 0.5, fontSize: 12.5 }}>{getStatus()?.status}</small>
</Stack>
</Stack>
<Stack gap={1.8}>
<h4 className='m-0' style={{ fontSize: 16 }}>Budget</h4>
<Stack direction={"row"} gap={1} alignItems={"center"}>
<IoBookmarkOutline size={18} color={colors.teal} />
<h4 className='m-0' style={{ fontSize: 15.6 }}>Budget</h4>
</Stack>
<Stack direction={"row"} bgcolor={colors.green} borderRadius={3} p={2} justifyContent={"space-between"} alignItems={"center"}>
<Stack direction={"row"} alignItems={"center"} gap={1.5}>
<TbMoneybag size={30} color='white' />
Expand Down Expand Up @@ -777,7 +802,10 @@ export default function Dashboard() {
</Stack>
</Stack>
<Stack gap={1.5}>
<h4 className='m-0' style={{ fontSize: 16 }}>Répartition</h4>
<Stack direction={"row"} gap={1} alignItems={"center"}>
<TfiPieChart size={18} color={colors.teal} />
<h4 className='m-0' style={{ fontSize: 15.6 }}>Répartition</h4>
</Stack>
<Doughnut data={totalsChartData} options={{
plugins: {
tooltip: {
Expand Down Expand Up @@ -814,4 +842,4 @@ export default function Dashboard() {
<Toastr />
</>
);
}
};

0 comments on commit b8776c3

Please sign in to comment.