Skip to content

Commit

Permalink
fix(bc): TS matrix was not sync with the constraint state
Browse files Browse the repository at this point in the history
  • Loading branch information
@hdinia
hdinia committed Mar 27, 2024
1 parent 266f2d0 commit 8ce35d2
Show file tree
Hide file tree
Showing 7 changed files with 197 additions and 178 deletions.
4 changes: 2 additions & 2 deletions ...xplore/Modelization/BindingConstraints/BindingConstView/AddConstraintTermDialog/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { BaseSyntheticEvent } from "react";
interface Props extends Omit<FormDialogProps, "children" | "handleSubmit"> {
studyId: string;
constraintId: string;
append: UseFieldArrayAppend<BindingConstraint, "constraints">;
append: UseFieldArrayAppend<BindingConstraint, "terms">;
constraintTerms: ConstraintTerm[];
options: AllClustersAndLinks;
}
Expand Down Expand Up @@ -56,7 +56,7 @@ function AddConstraintTermDialog({
////////////////////////////////////////////////////////////////

const handleSubmit = async (
{ values }: SubmitHandlerPlus<Record<string, unknown>>,
{ values }: SubmitHandlerPlus<Record<string, unknown>>, // TODO fix type
_event?: BaseSyntheticEvent,
) => {
try {
Expand Down
132 changes: 22 additions & 110 deletions ...Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/BindingConstForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,14 @@ import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { Box, Button } from "@mui/material";
import AddCircleOutlineRoundedIcon from "@mui/icons-material/AddCircleOutlineRounded";
import DatasetIcon from "@mui/icons-material/Dataset";
import { useFieldArray } from "react-hook-form";
import DeleteIcon from "@mui/icons-material/Delete";
import { useFieldArray } from "react-hook-form";
import { useSnackbar } from "notistack";
import { useNavigate } from "react-router-dom";
import useEnqueueErrorSnackbar from "../../../../../../../hooks/useEnqueueErrorSnackbar";
import {
type ConstraintTerm,
generateTermId,
BindingConstraint,
ACTIVE_WINDOWS_DOC_PATH,
} from "./utils";
import {
AllClustersAndLinks,
Expand All @@ -26,16 +23,9 @@ import {
updateConstraintTerm,
} from "../../../../../../../services/api/studydata";
import TextSeparator from "../../../../../../common/TextSeparator";
import { TermsHeader, TermsList } from "./style";
import AddConstraintTermDialog from "./AddConstraintTermDialog";
import ConfirmationDialog from "../../../../../../common/dialogs/ConfirmationDialog";
import useDebounce from "../../../../../../../hooks/useDebounce";
import { appendCommands } from "../../../../../../../services/api/variant";
import { CommandEnum } from "../../../../Commands/Edition/commandTypes";
import useAppDispatch from "../../../../../../../redux/hooks/useAppDispatch";
import { setCurrentBindingConst } from "../../../../../../../redux/ducks/studySyntheses";
import Matrix from "./Matrix";
import DocLink from "../../../../../../common/DocLink";
import Fieldset from "../../../../../../common/Fieldset";

interface Props {
Expand All @@ -46,32 +36,25 @@ interface Props {

// TODO rename ConstraintTermsFields
function BindingConstForm({ study, options, constraintId }: Props) {
const { id: studyId } = study; // TODO remove and refactor ids
const [t] = useTranslation();
const navigate = useNavigate();
const dispatch = useAppDispatch();
const { enqueueSnackbar } = useSnackbar();
const enqueueErrorSnackbar = useEnqueueErrorSnackbar();
const [matrixDialogOpen, setMatrixDialogOpen] = useState(false);
const [termToDelete, setTermToDelete] = useState<number>();
const [constraintToDelete, setConstraintToDelete] = useState(false);
const [openConstraintTermDialog, setOpenConstraintTermDialog] =
useState(false);

const { control, getValues } = useFormContextPlus<BindingConstraint>();
const { control } = useFormContextPlus<BindingConstraint>();

const { fields, update, append, remove } = useFieldArray({
control,
name: "constraints",
name: "terms",
});

const constraintTerms = useMemo(
() => fields.map((term) => ({ ...term, id: generateTermId(term.data) })),
[fields],
);

const currentOperator = getValues("operator");

////////////////////////////////////////////////////////////////
// Event Handlers
////////////////////////////////////////////////////////////////
Expand Down Expand Up @@ -123,32 +106,6 @@ function BindingConstForm({ study, options, constraintId }: Props) {
}
};

const handleDeleteConstraint = async () => {
try {
await appendCommands(study.id, [
{
action: CommandEnum.REMOVE_BINDING_CONSTRAINT,
args: {
id: constraintId,
},
},
]);

dispatch(setCurrentBindingConst(""));

navigate(`/studies/${study.id}/explore/modelization/bindingcontraint`);

enqueueSnackbar(t("study.success.deleteConstraint"), {
variant: "success",
autoHideDuration: 1500,
});
} catch (e) {
enqueueErrorSnackbar(t("study.error.deleteConstraint"), e as AxiosError);
} finally {
setConstraintToDelete(false);
}
};

////////////////////////////////////////////////////////////////
// JSX
////////////////////////////////////////////////////////////////
Expand All @@ -157,45 +114,24 @@ function BindingConstForm({ study, options, constraintId }: Props) {
<>
<Fieldset
legend={t("study.modelization.bindingConst.constraintTerm")}
sx={{ pb: 1 }}
sx={{ py: 2 }}
>
<TermsList>
<TermsHeader>
<Box>
<Button
variant="contained"
size="small"
color="secondary"
startIcon={<DatasetIcon />}
onClick={() => setMatrixDialogOpen(true)}
sx={{ mr: 2 }}
>
{t("study.modelization.bindingConst.timeSeries")}
</Button>
<Button
variant="contained"
size="small"
color="primary"
startIcon={<AddCircleOutlineRoundedIcon />}
onClick={() => setOpenConstraintTermDialog(true)}
>
{t("study.modelization.bindingConst.createConstraintTerm")}
</Button>
</Box>
<Box>
<Button
variant="outlined"
size="small"
startIcon={<DeleteIcon />}
color="error"
onClick={() => setConstraintToDelete(true)}
>
{t("global.delete.all")}
</Button>
<DocLink to={`${ACTIVE_WINDOWS_DOC_PATH}#binding-constraints`} />
</Box>
</TermsHeader>

<Box sx={{ display: "flex", width: 1, flexDirection: "column" }}>
<Box
sx={{
mb: 2,
}}
>
<Button
variant="contained"
size="small"
color="primary"
startIcon={<AddCircleOutlineRoundedIcon />}
onClick={() => setOpenConstraintTermDialog(true)}
>
{t("study.modelization.bindingConst.createConstraintTerm")}
</Button>
</Box>
{constraintTerms.map((term: ConstraintTerm, index: number) => (
<Box key={term.id}>
{index > 0 && (
Expand All @@ -210,23 +146,13 @@ function BindingConstForm({ study, options, constraintId }: Props) {
/>
</Box>
))}
</TermsList>
</Box>
</Fieldset>

{matrixDialogOpen && (
<Matrix
study={study}
constraintId={constraintId}
operator={currentOperator}
open={matrixDialogOpen}
onClose={() => setMatrixDialogOpen(false)}
/>
)}

{openConstraintTermDialog && (
<AddConstraintTermDialog
open={openConstraintTermDialog}
studyId={studyId}
studyId={study.id}
constraintId={constraintId}
title={t("study.modelization.bindingConst.createConstraintTerm")}
onCancel={() => setOpenConstraintTermDialog(false)}
Expand All @@ -247,20 +173,6 @@ function BindingConstForm({ study, options, constraintId }: Props) {
{t("study.modelization.bindingConst.question.deleteConstraintTerm")}
</ConfirmationDialog>
)}

{constraintToDelete && (
<ConfirmationDialog
titleIcon={DeleteIcon}
onCancel={() => setConstraintToDelete(false)}
onConfirm={() => handleDeleteConstraint()}
alert="warning"
open
>
{t(
"study.modelization.bindingConst.question.deleteBindingConstraint",
)}
</ConfirmationDialog>
)}
</>
);
}
Expand Down
81 changes: 51 additions & 30 deletions ...Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/ConstraintFields.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,33 @@
import Fieldset from "../../../../../../common/Fieldset";
import SelectFE from "../../../../../../common/fieldEditors/SelectFE";
import StringFE from "../../../../../../common/fieldEditors/StringFE";
import { useTranslation } from "react-i18next";
import {
BindingConstraint,
OPERATORS,
OUTPUT_FILTERS,
TIME_STEPS,
} from "./utils";
import { useFormContextPlus } from "../../../../../../common/Form";
import { useMemo } from "react";

import Fieldset from "../../../../../../common/Fieldset";
import SelectFE from "../../../../../../common/fieldEditors/SelectFE";
import StringFE from "../../../../../../common/fieldEditors/StringFE";
import { StudyMetadata } from "../../../../../../../common/types";
import SwitchFE from "../../../../../../common/fieldEditors/SwitchFE";
import { useFormContextPlus } from "../../../../../../common/Form";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { validateString } from "../../../../../../../utils/validationUtils";
import Matrix from "./Matrix";
import { Box } from "@mui/material";

interface Props {
study: StudyMetadata;
constraintId: string;
isMatrixOpen: boolean;
onCloseMatrix: VoidFunction;
}

function Fields({ study }: Props) {
function Fields({ study, constraintId, isMatrixOpen, onCloseMatrix }: Props) {
const { t } = useTranslation();
const { control } = useFormContextPlus<BindingConstraint>();
const { control, getValues } = useFormContextPlus<BindingConstraint>();
const currentOperator = getValues("operator");

const outputFilterOptions = useMemo(
() =>
Expand Down Expand Up @@ -55,7 +62,10 @@ function Fields({ study }: Props) {

return (
<>
<Fieldset legend={t("global.general")} fieldWidth={200} sx={{ pb: 2 }}>
<Fieldset
fieldWidth={200}
sx={{ py: 1, display: "flex", flexWrap: "wrap" }}
>
<StringFE
disabled
name="name"
Expand Down Expand Up @@ -100,29 +110,40 @@ function Fields({ study }: Props) {
label={t("study.modelization.bindingConst.enabled")}
control={control}
/>

{study.version >= "840" && (
<Box sx={{ width: 1 }}>
<SelectFE
name="filterYearByYear"
label={t("study.outputFilters.filterByYear")}
size="small"
variant="outlined"
options={outputFilterOptions}
multiple
control={control}
sx={{ mr: 2 }}
/>
<SelectFE
name="filterSynthesis"
label={t("study.outputFilters.filterSynthesis")}
size="small"
variant="outlined"
options={outputFilterOptions}
multiple
control={control}
/>
</Box>
)}
</Fieldset>

{study.version >= "840" && (
<Fieldset legend={t("study.outputFilters")} sx={{ pb: 2 }}>
<SelectFE
name="filterYearByYear"
label={t("study.outputFilters.filterByYear")}
size="small"
variant="outlined"
options={outputFilterOptions}
multiple
control={control}
/>
<SelectFE
name="filterSynthesis"
label={t("study.outputFilters.filterSynthesis")}
size="small"
variant="outlined"
options={outputFilterOptions}
multiple
control={control}
/>
</Fieldset>
{isMatrixOpen && (
<Matrix
study={study}
constraintId={constraintId}
operator={currentOperator}
open={isMatrixOpen}
onClose={onCloseMatrix}
/>
)}
</>
);
Expand Down
Loading

0 comments on commit 8ce35d2

Please sign in to comment.