diff --git a/izanami-frontend/src/App.css b/izanami-frontend/src/App.css index dc9896bb6..22b1f6ba9 100644 --- a/izanami-frontend/src/App.css +++ b/izanami-frontend/src/App.css @@ -32,10 +32,10 @@ header .nav-link { } .feature-separator { - text-align: center; + margin-left: 24px; font-weight: bold; - margin-top: 8px; - margin-bottom: 8px; + margin-top: 4px; + margin-bottom: 4px; } .error-message { diff --git a/izanami-frontend/src/components/ConditionInput.tsx b/izanami-frontend/src/components/ConditionInput.tsx index 99fe22957..5264ead3e 100644 --- a/izanami-frontend/src/components/ConditionInput.tsx +++ b/izanami-frontend/src/components/ConditionInput.tsx @@ -1,28 +1,31 @@ import * as React from "react"; import { DAYS, + TClassicalCondition, TClassicalContextOverload, THourPeriod, + TValuedCondition, ValuedFeature, } from "../utils/types"; import Select from "react-select"; import CreatableSelect from "react-select/creatable"; import { customStyles } from "../styles/reactSelect"; -import { Strategy } from "./FeatureTable"; +import { Rule, Strategy, Period as PeriodDetails } from "./FeatureTable"; import { useEffect } from "react"; import { useFieldArray, Controller, useFormContext, FieldErrors, + useWatch, } from "react-hook-form"; import { format, parse, startOfDay } from "date-fns"; import { DEFAULT_TIMEZONE, TimeZoneSelect } from "./TimeZoneSelect"; import { ErrorDisplay } from "./FeatureForm"; import { Tooltip } from "./Tooltip"; -export function ConditionsInput() { - const { control, watch } = useFormContext(); +export function ConditionsInput(props: { folded: boolean }) { + const { control, watch, getValues } = useFormContext(); const { fields, append, remove } = useFieldArray({ control, @@ -30,37 +33,117 @@ export function ConditionsInput() { }); const resultType = watch("resultType"); - + const conditions = watch("conditions"); return ( <> - {fields.map((condition, index) => ( -
-
- {resultType === "boolean" - ? "Activation condition" - : "Alternative value"}{" "} - #{index}{" "} - -
- -
- ))} + {fields.length > 0 ? ( + resultType === "boolean" ? ( +
Activation conditions
+ ) : ( +
Alternative values
+ ) + ) : null} + {fields.map(({ id }, index) => { + const condition = conditions?.[index]; + const emptyCondition = + Object.entries(condition).filter(([key, value]) => value !== "") + .length === 0; + + return ( +
+
+

+ +

+ + +
+
+ +
+
+
+ + ); + })}