diff --git a/src/lib/components/variables/VariableReferredNodeParameter.svelte b/src/lib/components/variables/VariableReferredNodeParameter.svelte index b93c60f04cd87184cab66586073a269a76c75200..153f50cbf00825d43db3677e4e374bf21f5f8ea0 100644 --- a/src/lib/components/variables/VariableReferredNodeParameter.svelte +++ b/src/lib/components/variables/VariableReferredNodeParameter.svelte @@ -11,10 +11,10 @@ import VariableReferredScaleParameter from "./VariableReferredScaleParameter.svelte" import VariableReferredValueParameter from "./VariableReferredValueParameter.svelte" + export let billParameter: NodeParameter export let date: string export let depth: number - export let parameter: NodeParameter | undefined - export let reformParameter: NodeParameter + export let lawParameter: NodeParameter | undefined function asScaleParameter( parameter: Parameter | undefined, @@ -29,55 +29,55 @@ } function* iterChildren( - parameter: NodeParameter | undefined, - reformParameter: NodeParameter, + lawParameter: NodeParameter | undefined, + billParameter: NodeParameter, ): Generator<[Parameter | undefined, Parameter], void, unknown> { // Notes: - // A reformParameter is always more complete than a parameter before reform. + // A reform parameter is always more complete than a parameter before reform. // A reform never changes the class of a parameter - for (const reformChild of Object.values(reformParameter.children).sort( - (reformChild1, reformChild2) => - reformChild1.class === reformChild2.class || - (reformChild1.class !== ParameterClass.Node && - reformChild2.class !== ParameterClass.Node) - ? reformChild1.title.localeCompare(reformChild2.title) - : reformChild1.class === ParameterClass.Node + for (const billChild of Object.values(billParameter.children).sort( + (billChild1, billChild2) => + billChild1.class === billChild2.class || + (billChild1.class !== ParameterClass.Node && + billChild2.class !== ParameterClass.Node) + ? billChild1.title.localeCompare(billChild2.title) + : billChild1.class === ParameterClass.Node ? 1 : -1, )) { - const child = parameter?.children[reformChild.id] - yield [child, reformChild] + const lawChild = lawParameter?.children[billChild.id] + yield [lawChild, billChild] } } </script> <section> - <VariableReferredParameterHeader {depth} parameter={reformParameter} /> + <VariableReferredParameterHeader {depth} parameter={billParameter} /> - {#if reformParameter.children !== undefined} + {#if billParameter.children !== undefined} <ul> - {#each [...iterChildren(parameter, reformParameter)] as [child, reformChild]} + {#each [...iterChildren(lawParameter, billParameter)] as [lawChild, billChild]} <li> - {#if reformChild.class === ParameterClass.Node} + {#if billChild.class === ParameterClass.Node} <svelte:self + billParameter={billChild} {date} depth={depth + 1} - parameter={child} - reformParameter={reformChild} + lawParameter={lawChild} /> - {:else if reformChild.class === ParameterClass.Value} + {:else if billChild.class === ParameterClass.Value} <VariableReferredValueParameter + billParameter={billChild} {date} depth={depth + 1} - parameter={asValueParameter(child)} - reformParameter={reformChild} + lawParameter={asValueParameter(lawChild)} /> - {:else if reformChild.class === ParameterClass.Scale} + {:else if billChild.class === ParameterClass.Scale} <VariableReferredScaleParameter + billParameter={billChild} {date} depth={depth + 1} - parameter={asScaleParameter(child)} - reformParameter={reformChild} + lawParameter={asScaleParameter(lawChild)} /> {/if} </li> diff --git a/src/lib/components/variables/VariableReferredParameters.svelte b/src/lib/components/variables/VariableReferredParameters.svelte index 397a7b8210628fa75e1cb60a3593885ca9abcb92..248064716204d6d67915efab0991cc4a62f5c36d 100644 --- a/src/lib/components/variables/VariableReferredParameters.svelte +++ b/src/lib/components/variables/VariableReferredParameters.svelte @@ -43,60 +43,60 @@ // And the children of a reform decomposition always contain the children of the decomposition // before reform. // => Non reform decomposition is not needed. - $: reformDecompositionCoreByName = + $: billDecompositionCoreByName = decompositionCoreByNameByReformName[$billName] ?? decompositionCoreByName - $: reformDecompositionCore = reformDecompositionCoreByName[name] - $: reformDecomposition = - reformDecompositionCore === undefined + $: billDecompositionCore = billDecompositionCoreByName[name] + $: billDecomposition = + billDecompositionCore === undefined ? undefined : { - ...reformDecompositionCore, + ...billDecompositionCore, name, } // Note: A reform variable is always more complete than a variable before reform. // But it may contain different formulas, with different parameters & variables. - $: reformVariableSummaryByName = + $: billVariableSummaryByName = variableSummaryByNameByReformName[$billName] ?? variableSummaryByName - $: reformVariable = reformVariableSummaryByName[name] - $: variable = variableSummaryByName[name] + $: billVariable = billVariableSummaryByName[name] + $: lawVariable = variableSummaryByName[name] - $: if (reformDecomposition === undefined && reformVariable === undefined) { + $: if (billDecomposition === undefined && billVariable === undefined) { console.error(`Variable "${name}" not found`) } // Note: A reform parameters tree is always more complete than a parameters tree before reform. // And the children of a reform node parameter always contain the children of the node parameter // before reform (albeit with some different value parameters). - $: reformRootParameter = rootParameterByReformName[$billName] ?? rootParameter + $: billRootParameter = rootParameterByReformName[$billName] ?? rootParameter $: bothParametersName = new Set([ - ...(variable === undefined + ...(lawVariable === undefined ? [] - : iterVariableParametersName(variable, date)), - ...(reformVariable === undefined + : iterVariableParametersName(lawVariable, date)), + ...(billVariable === undefined ? [] - : iterVariableParametersName(reformVariable, date)), + : iterVariableParametersName(billVariable, date)), ]) $: bothDirectParametersName = new Set([ - ...(variable === undefined + ...(lawVariable === undefined ? [] - : getVariableFormula(variable, date)?.parameters ?? []), - ...(reformVariable === undefined + : getVariableFormula(lawVariable, date)?.parameters ?? []), + ...(billVariable === undefined ? [] - : getVariableFormula(reformVariable, date)?.parameters ?? []), + : getVariableFormula(billVariable, date)?.parameters ?? []), ]) $: bothRootParameterById = mergeParameters( [...bothParametersName].map((name) => - getParameter(reformRootParameter, name), + getParameter(billRootParameter, name), ), ) $: bothRootDirectParameterById = mergeParameters( [...bothDirectParametersName].map((name) => - getParameter(reformRootParameter, name), + getParameter(billRootParameter, name), ), ) @@ -122,8 +122,8 @@ function* iterVariableRootParameters( bothRootParameterById: { [id: string]: Parameter }, - rootParameter: NodeParameter, - reformRootParameter: NodeParameter, + lawRootParameter: NodeParameter, + billRootParameter: NodeParameter, ): Generator<[Parameter | undefined, Parameter], void, unknown> { for (const bothChild of Object.values(bothRootParameterById).sort( (bothChild1, bothChild2) => @@ -135,20 +135,17 @@ ? 1 : -1, )) { - const child = rootParameter.children[bothChild.id] // Sometimes undefined - const reformChild = reformRootParameter.children[bothChild.id] // Never undefined - yield [child, reformChild] + const lawChild = lawRootParameter.children[bothChild.id] // Sometimes undefined + const billChild = billRootParameter.children[bothChild.id] // Never undefined + yield [lawChild, billChild] } } </script> -{#if reformDecomposition !== undefined || reformVariable !== undefined} - <VariableHeader - decomposition={reformDecomposition} - variable={reformVariable} - /> +{#if billDecomposition !== undefined || billVariable !== undefined} + <VariableHeader decomposition={billDecomposition} variable={billVariable} /> - {#if reformDecomposition?.children === undefined} + {#if billDecomposition?.children === undefined} {#if Object.keys(bothRootDirectParameterById).length > 0} <h2 class="bg-le-gris-dispositif-ultralight text-black flex justify-between py-2 text-lg px-5 rounded-r shadow-inner" @@ -182,28 +179,28 @@ {#if openDirectParameters} <section class="pl-5 mb-3"> <ul> - {#each [...iterVariableRootParameters(bothRootDirectParameterById, rootParameter, reformRootParameter)] as [parameter, reformParameter]} + {#each [...iterVariableRootParameters(bothRootDirectParameterById, rootParameter, billRootParameter)] as [lawParameter, billParameter]} <li> - {#if parameter.class === ParameterClass.Node} + {#if billParameter.class === ParameterClass.Node} <VariableReferredNodeParameter + billParameter={asNodeParameter(billParameter)} {date} depth={0} - {parameter} - reformParameter={asNodeParameter(reformParameter)} + lawParameter={asNodeParameter(lawParameter)} /> - {:else if parameter.class === ParameterClass.Value} + {:else if billParameter.class === ParameterClass.Value} <VariableReferredValueParameter + billParameter={asValueParameter(billParameter)} {date} depth={0} - {parameter} - reformParameter={asValueParameter(reformParameter)} + lawParameter={asValueParameter(lawParameter)} /> - {:else if parameter.class === ParameterClass.Scale} + {:else if billParameter.class === ParameterClass.Scale} <VariableReferredScaleParameter + billParameter={asScaleParameter(billParameter)} {date} depth={0} - {parameter} - reformParameter={asScaleParameter(reformParameter)} + lawParameter={asScaleParameter(lawParameter)} /> {/if} </li> @@ -244,28 +241,28 @@ {#if openAllParameters} <section class="pb-3 mb-3 px-5"> <ul> - {#each [...iterVariableRootParameters(bothRootParameterById, rootParameter, reformRootParameter)] as [parameter, reformParameter]} + {#each [...iterVariableRootParameters(bothRootParameterById, rootParameter, billRootParameter)] as [lawParameter, billParameter]} <li> - {#if parameter.class === ParameterClass.Node} + {#if billParameter.class === ParameterClass.Node} <VariableReferredNodeParameter + billParameter={asNodeParameter(billParameter)} {date} depth={0} - {parameter} - reformParameter={asNodeParameter(reformParameter)} + lawParameter={asNodeParameter(lawParameter)} /> - {:else if parameter.class === ParameterClass.Value} + {:else if billParameter.class === ParameterClass.Value} <VariableReferredValueParameter + billParameter={asValueParameter(billParameter)} {date} depth={0} - {parameter} - reformParameter={asValueParameter(reformParameter)} + lawParameter={asValueParameter(lawParameter)} /> - {:else if parameter.class === ParameterClass.Scale} + {:else if billParameter.class === ParameterClass.Scale} <VariableReferredScaleParameter + billParameter={asScaleParameter(billParameter)} {date} depth={0} - {parameter} - reformParameter={asScaleParameter(reformParameter)} + lawParameter={asScaleParameter(lawParameter)} /> {/if} </li> diff --git a/src/lib/components/variables/VariableReferredScaleAtInstant.svelte b/src/lib/components/variables/VariableReferredScaleAtInstant.svelte index 09505d2dba4f62e3464fb3af6ed401a7c8e966f1..369ffc8026427371fa0af116141805eb05cd996c 100644 --- a/src/lib/components/variables/VariableReferredScaleAtInstant.svelte +++ b/src/lib/components/variables/VariableReferredScaleAtInstant.svelte @@ -18,25 +18,28 @@ import { errorAsKeyValueDictionary, iterArrayWithErrors } from "$lib/errors" + import VariableReferredValueEdit from "./VariableReferredValueEdit.svelte" + + export let billParameter: ScaleParameter + export let billScaleAtInstant: ScaleAtInstant | null let globalErrors: { [key: string]: unknown } export { globalErrors as errors } - export let parameter: ScaleParameter | undefined - export let reformParameter: ScaleParameter | undefined + export let lawScaleAtInstant: ScaleAtInstant | undefined | null export let scaleAtInstant: ScaleAtInstant | undefined | null export let showErrors: boolean const dispatch = createEventDispatcher() let errors = globalErrors - $: isAmountScale = isAmountScaleParameter(reformParameter) + $: isAmountScale = isAmountScaleParameter(billParameter) - $: usesBase = scaleParameterUsesBase(reformParameter) + $: usesBase = scaleParameterUsesBase(billParameter) function appendBracket() { const bracket: BracketAtInstant = [ ScaleType.MarginalAmount, ScaleType.SingleAmount, - ].includes(reformParameter.type) + ].includes(billParameter.type) ? { amount: { value: null } as NumberValue, threshold: { value: null } as MaybeNumberValue, @@ -50,9 +53,9 @@ } function asAmountBracketAtInstant( - bracket: BracketAtInstant, + bracket: BracketAtInstant | undefined, ): AmountBracketAtInstant { - return bracket as AmountBracketAtInstant + return bracket as AmountBracketAtInstant | undefined } function asMaybeNumberValue( @@ -66,17 +69,16 @@ } function asRateBracketAtInstant( - bracket: BracketAtInstant, + bracket: BracketAtInstant | undefined, ): RateBracketAtInstant { - return bracket as RateBracketAtInstant + return bracket as RateBracketAtInstant | undefined } function changeValue( index: number, key: keyof AmountBracketAtInstant | keyof RateBracketAtInstant, - { target }: Event, + { detail: value }: CustomEvent, ) { - const { value } = target as HTMLInputElement const [validValue, error] = auditStringToNumber(laxAudit, value) let errorsAtIndex = errors[index] as { [key: string]: unknown } | undefined if (error === null) { @@ -159,7 +161,16 @@ </td> <td class="p-1"> <div class="flex items-center"> - <input + <VariableReferredValueEdit + billValue={billScaleAtInstant?.[index]?.threshold} + lawValue={lawScaleAtInstant?.[index]?.threshold} + on:changeValue={(event) => + changeValue(index, "threshold", event)} + value={bracketAtInstant.threshold === "expected" + ? null + : bracketAtInstant.threshold?.value ?? null} + /> + <!-- <input class="bg-white text-black hover:bg-le-gris-dispositif-light font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24" step="any" type="number" @@ -167,7 +178,7 @@ value={bracketAtInstant.threshold === "expected" ? null : bracketAtInstant.threshold?.value ?? null} - /> + /> --> {#if showErrors && errorAsKeyValueDictionary(errorAsKeyValueDictionary(errorsAtIndex).threshold).value !== undefined} <p> {errorAsKeyValueDictionary( @@ -175,7 +186,7 @@ ).value} </p> {/if} - <!--UNITE A CHANGER + <!--TODO: UNITE A CHANGER <p class="font-serif text-base">€</p> --> </div> @@ -183,7 +194,23 @@ {#if isAmountScale} <td class="border-l-2 p-1"> <div class="flex items-center"> - <input + <VariableReferredValueEdit + billValue={asAmountBracketAtInstant( + billScaleAtInstant?.[index], + )?.amount} + lawValue={asAmountBracketAtInstant( + lawScaleAtInstant?.[index], + )?.amount} + on:changeValue={(event) => + changeValue(index, "amount", event)} + value={asAmountBracketAtInstant(bracketAtInstant).amount === + "expected" + ? null + : asNumberValue( + asAmountBracketAtInstant(bracketAtInstant).amount, + ).value ?? null} + /> + <!-- <input class="bg-white text-black hover:bg-le-gris-dispositif-light font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24" step="any" type="number" @@ -194,7 +221,7 @@ : asNumberValue( asAmountBracketAtInstant(bracketAtInstant).amount, ).value ?? null} - /> + /> --> {#if showErrors && errorAsKeyValueDictionary(errorAsKeyValueDictionary(errorsAtIndex).amount).value !== undefined} <p> {errorAsKeyValueDictionary( @@ -211,7 +238,23 @@ {#if usesBase} <td class="border-l-2 p-1"> <div class="flex items-center"> - <input + <VariableReferredValueEdit + billValue={asRateBracketAtInstant( + billScaleAtInstant?.[index], + )?.base} + lawValue={asRateBracketAtInstant( + lawScaleAtInstant?.[index], + )?.base} + on:changeValue={(event) => + changeValue(index, "base", event)} + value={asRateBracketAtInstant(bracketAtInstant).base === + "expected" + ? null + : asNumberValue( + asRateBracketAtInstant(bracketAtInstant).base, + )?.value ?? null} + /> + <!-- <input class="bg-white text-black font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24" step="any" type="number" @@ -222,7 +265,7 @@ : asNumberValue( asRateBracketAtInstant(bracketAtInstant).base, )?.value ?? null} - /> + /> --> {#if showErrors && errorAsKeyValueDictionary(errorAsKeyValueDictionary(errorsAtIndex).base).value !== undefined} <p> {errorAsKeyValueDictionary( @@ -238,7 +281,22 @@ {/if} <td class="border-l-2 p-1"> <div class="flex items-center"> - <input + <VariableReferredValueEdit + billValue={asRateBracketAtInstant( + billScaleAtInstant?.[index], + )?.rate} + lawValue={asRateBracketAtInstant(lawScaleAtInstant?.[index]) + ?.rate} + on:changeValue={(event) => + changeValue(index, "rate", event)} + value={asRateBracketAtInstant(bracketAtInstant).rate === + "expected" + ? null + : asMaybeNumberValue( + asRateBracketAtInstant(bracketAtInstant).rate, + )?.value ?? null} + /> + <!-- <input class="bg-white text-black font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24 hover:bg-le-gris-dispositif-light" step="any" type="number" @@ -249,7 +307,7 @@ : asMaybeNumberValue( asRateBracketAtInstant(bracketAtInstant).rate, ).value ?? null} - /> + /> --> {#if showErrors && errorAsKeyValueDictionary(errorAsKeyValueDictionary(errorsAtIndex).rate).value !== undefined} <p> {errorAsKeyValueDictionary( diff --git a/src/lib/components/variables/VariableReferredScaleParameter.svelte b/src/lib/components/variables/VariableReferredScaleParameter.svelte index c103a7d2d17700d4badc448bf0b5e1869516859a..8abba3e6b3079c3d29a51c463e82c07594c5b634 100644 --- a/src/lib/components/variables/VariableReferredScaleParameter.svelte +++ b/src/lib/components/variables/VariableReferredScaleParameter.svelte @@ -5,16 +5,16 @@ import type { Writable } from "svelte/store" import type { CalculationName } from "$lib/decompositions" - import type { ParametricReform } from "$lib/reforms" + import type { ParametricReform, ScaleParameterReform } from "$lib/reforms" import { ParameterReformChangeType } from "$lib/reforms" import VariableReferredParameterHeader from "./VariableReferredParameterHeader.svelte" import VariableReferredScaleAtInstant from "./VariableReferredScaleAtInstant.svelte" + export let billParameter: ScaleParameter export let date: string export let depth: number - export let parameter: ScaleParameter | undefined - export let reformParameter: ScaleParameter + export let lawParameter: ScaleParameter | undefined const parametricReform = getContext( "parametricReform", @@ -23,19 +23,34 @@ "requestedCalculationsName", ) as Writable<Set<CalculationName>> - $: scaleByInstant = scaleByInstantFromBrackets(reformParameter.brackets) + $: change = $parametricReform[billParameter.name] as + | ScaleParameterReform + | undefined - $: instantScaleCouplesArray = Object.entries(scaleByInstant).sort( + $: billScaleByInstant = scaleByInstantFromBrackets(billParameter.brackets) + $: lawScaleByInstant = + lawParameter === undefined + ? undefined + : scaleByInstantFromBrackets(lawParameter.brackets) + + $: billInstantScaleCouplesArray = Object.entries(billScaleByInstant).sort( + ([instant1], [instant2]) => instant2.localeCompare(instant1), + ) + $: lawInstantScaleCouplesArray = Object.entries(lawScaleByInstant ?? []).sort( ([instant1], [instant2]) => instant2.localeCompare(instant1), ) - $: latestInstantScaleCouple = instantScaleCouplesArray[0] + $: billLatestInstantScaleCouple = billInstantScaleCouplesArray[0] + $: lawLatestInstantScaleCouple = lawInstantScaleCouplesArray[0] + + $: billLatestInstant = billLatestInstantScaleCouple[0] - $: latestInstant = latestInstantScaleCouple[0] + $: billLatestInstantSplit = billLatestInstant.split("-") - $: latestInstantSplit = latestInstant.split("-") + $: billScaleAtInstant = billLatestInstantScaleCouple[1] + $: lawScaleAtInstant = lawLatestInstantScaleCouple?.[1] - $: latestScaleAtInstant = latestInstantScaleCouple[1] + $: scaleAtInstant = change?.scale ?? billScaleAtInstant function changeScale({ detail: scale }: { detail: ScaleAtInstant }) { updateReform(`${date.split("-")[0]}-01-01`, scale) @@ -49,7 +64,7 @@ ) { $parametricReform = { ...$parametricReform, - [reformParameter.name]: { + [billParameter.name]: { scale, start, type: ParameterReformChangeType.Scale, @@ -67,28 +82,29 @@ </script> <section class="ml-14 pl-4 pb-4 border-l-2 border-le-gris-dispositif-light"> - <VariableReferredParameterHeader {depth} parameter={reformParameter} /> + <VariableReferredParameterHeader {depth} parameter={billParameter} /> <div class="flex bg-gray-100 rounded-t pl-1 py-2 mt-1"> <VariableReferredScaleAtInstant + {billParameter} + {billScaleAtInstant} errors={{}} - {parameter} + {lawScaleAtInstant} on:change={changeScale} - {reformParameter} - scaleAtInstant={latestScaleAtInstant} + {scaleAtInstant} showErrors={true} /> </div> <div class="bg-gray-100 rounded-b p-2"> <p class=" text-sm mb-3"> - Barème depuis {latestInstantSplit[1]}/{latestInstantSplit[0]} + Barème depuis {billLatestInstantSplit[1]}/{billLatestInstantSplit[0]} </p> <div class="flex items-baseline text-gray-600 text-xs"> <div class="flex items-center"> <div class="flex text-gray-600 text-sm"> <div class="bg-gray-400 rounded-sm flex px-1 text-white"> <div class="flex pr-1"> - {#if latestInstant < "2020" || latestInstant === "0001-01-01"} + {#if billLatestInstant < "2020" || billLatestInstant === "0001-01-01"} <!-- Inspired from Material Icons name: Warning / with white symbol inside --> <div class="flex pr-1"> <svg @@ -110,7 +126,7 @@ </svg> </div> <span - title="La dernière relecture date de {latestInstantSplit[1]}/{latestInstantSplit[0]}" + title="La dernière relecture date de {billLatestInstantSplit[1]}/{billLatestInstantSplit[0]}" >À vérifier</span > {:else} @@ -133,7 +149,7 @@ </svg> </div> <span - title="La dernière relecture date de {latestInstantSplit[1]}/{latestInstantSplit[0]}" + title="La dernière relecture date de {billLatestInstantSplit[1]}/{billLatestInstantSplit[0]}" >Vérifié</span > {/if} @@ -143,7 +159,7 @@ <div> <a class="text-sm ml-1 underline text-gray-600 hover:text-gray-700" - href="/parameters/{reformParameter.name}" + href="/parameters/{billParameter.name}" target="_blank" > <svg diff --git a/src/lib/components/variables/VariableReferredValueEdit.svelte b/src/lib/components/variables/VariableReferredValueEdit.svelte new file mode 100644 index 0000000000000000000000000000000000000000..70f5be9dded7a264fdc57ea0918aacc018bb1685 --- /dev/null +++ b/src/lib/components/variables/VariableReferredValueEdit.svelte @@ -0,0 +1,89 @@ +<script lang="ts"> + import type { ValueAtInstant } from "@openfisca/json-model" + import { createEventDispatcher } from "svelte" + + export let billValue: ValueAtInstant | undefined | null + export let lawValue: ValueAtInstant | undefined | null + export let value: + | boolean + | number + | string + | string[] + | { [key: string]: string } + | "expected" + | undefined + | null + + const dispatch = createEventDispatcher() + const numberFormatter = new Intl.NumberFormat("fr-FR", { + style: "decimal", + }) + + $: billValueFormatted = + billValue === undefined || + billValue === "expected" || + billValue.value === null + ? "absent" + : typeof billValue.value === "number" + ? numberFormatter.format(billValue.value) + : "TODO" + $: lawValueFormatted = + lawValue === undefined || lawValue === "expected" || lawValue.value === null + ? "absent" + : typeof lawValue.value === "number" + ? numberFormatter.format(lawValue.value) + : "TODO" + $: valueFormatted = + value == null || value === "expected" + ? "absent" + : typeof value === "number" + ? numberFormatter.format(value) + : "TODO" + + $: showBillValue = + billValueFormatted !== lawValueFormatted && + valueFormatted !== billValueFormatted + $: showLawValue = + billValueFormatted !== lawValueFormatted || + valueFormatted !== lawValueFormatted + + function changeValue({ target }: Event) { + const { value } = target as HTMLInputElement + dispatch("changeValue", value) + } +</script> + +{#if typeof value === "number" || value === "expected" || value === null} + {#if showLawValue} + <span + class="{showBillValue + ? 'line-through-bill' + : 'line-through-amendment'} mx-1">{lawValueFormatted}</span + > + {/if} + {#if showBillValue} + <span class="line-through-amendment mx-1 text-le-rouge-bill" + >{billValueFormatted}</span + > + {/if} + <input + class="bg-white rounded-sm text-black font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24 {showBillValue + ? 'bg-le-jaune hover:text-le-gris-dispositif-dark' + : 'hover:text-le-gris-dispositif-dark'}" + type="number" + on:change={changeValue} + placeholder={value === "expected" ? "attendu" : null} + step="any" + value={typeof value === "number" ? value : null} + /> +{:else if Array.isArray(value)} + <span + class="bg-white rounded-sm text-[#FF4133] font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24" + >TODO array</span + > +{:else} + <span + class="bg-white rounded-sm text-[#FF4133] font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24" + >TODO dict</span + > +{/if} diff --git a/src/lib/components/variables/VariableReferredValueParameter.svelte b/src/lib/components/variables/VariableReferredValueParameter.svelte index 51400870beb517248147bc5aa9902484eb396c04..1eda3e07910a6a9b1bb70cef1e967cd842d94342 100644 --- a/src/lib/components/variables/VariableReferredValueParameter.svelte +++ b/src/lib/components/variables/VariableReferredValueParameter.svelte @@ -8,13 +8,15 @@ import { ParameterReformChangeType } from "$lib/reforms" import VariableReferredParameterHeader from "./VariableReferredParameterHeader.svelte" + import VariableReferredValueEdit from "./VariableReferredValueEdit.svelte" + export let billParameter: ValueParameter export let date: string export let depth: number - export let parameter: ValueParameter | undefined - export let reformParameter: ValueParameter + export let lawParameter: ValueParameter | undefined - let instantValueCouplesArray: [string, ValueAtInstant][] + let billLatestInstantValueCouplesArray: [string, ValueAtInstant][] + let lawInstantValueCouplesArray: [string, ValueAtInstant][] const parametricReform = getContext( "parametricReform", ) as Writable<ParametricReform> @@ -24,28 +26,31 @@ let validValue = undefined let valueError = null - $: change = $parametricReform[reformParameter.name] as + $: change = $parametricReform[billParameter.name] as | ValueParameterReform | undefined - $: instantValueCouplesArray = Object.entries(reformParameter.values).sort( - ([instant1], [instant2]) => instant2.localeCompare(instant1), - ) + $: billLatestInstantValueCouplesArray = Object.entries( + billParameter.values, + ).sort(([instant1], [instant2]) => instant2.localeCompare(instant1)) + $: lawInstantValueCouplesArray = Object.entries( + lawParameter?.values ?? [], + ).sort(([instant1], [instant2]) => instant2.localeCompare(instant1)) - $: latestInstantValueCouple = instantValueCouplesArray[0] + $: billLatestInstantValueCouple = billLatestInstantValueCouplesArray[0] + $: lawLatestInstantValueCouple = lawInstantValueCouplesArray[0] - $: latestInstant = latestInstantValueCouple[0] + $: billLatestInstant = billLatestInstantValueCouple[0] - $: latestInstantSplit = latestInstant.split("-") + $: billLatestInstantSplit = billLatestInstant.split("-") - $: latestValue = latestInstantValueCouple[1] + $: billValue = billLatestInstantValueCouple[1] + $: lawValue = lawLatestInstantValueCouple?.[1] $: value = - change?.value ?? - (latestValue === "expected" ? "expected" : latestValue.value) + change?.value ?? (billValue === "expected" ? "expected" : billValue.value) - function changeValue({ target }: Event) { - const { value } = target as HTMLInputElement + function changeValue({ detail: value }: CustomEvent) { validValue = parseFloat(value) if (validValue == null || Number.isNaN(validValue)) { validValue = undefined @@ -60,7 +65,7 @@ if (start !== undefined && value !== undefined) { $parametricReform = { ...$parametricReform, - [reformParameter.name]: { + [billParameter.name]: { start, type: ParameterReformChangeType.Parameter, value, @@ -77,41 +82,27 @@ </script> <section class="ml-14 pl-4 pb-4 border-l-2 border-le-gris-dispositif-light"> - <VariableReferredParameterHeader {depth} parameter={reformParameter} /> + <VariableReferredParameterHeader {depth} parameter={billParameter} /> <div class="bg-gray-100 p-2 pb-2 items-center flex justify-start rounded"> <div> - {#if typeof value === "number" || value === "expected" || value === null} - <input - class="bg-white rounded-sm text-black font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24" - type="number" - on:change={changeValue} - placeholder={value === "expected" ? "attendu" : null} - step="any" - value={typeof value === "number" ? value : null} - /> - {#if valueError !== null}<span class="text-red-500">{valueError}</span - >{/if} - {:else if Array.isArray(value)} - <span - class="bg-white rounded-sm text-[#FF4133] font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24" - >TODO array</span - > - {:else} - <span - class="bg-white rounded-sm text-[#FF4133] font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24" - >TODO dict</span - > - {/if} + <VariableReferredValueEdit + {billValue} + {lawValue} + on:changeValue={changeValue} + {value} + /> + {#if valueError !== null}<span class="text-red-500">{valueError}</span + >{/if} </div> - <!--Unité à "connecter" avec Openfisca--> + <!-- TODO: Unité à "connecter" avec Openfisca--> <div> <p class="text-lg font-serif">€</p> </div> <!--Date du paramètre--> <div class="text-sm mx-2"> <p> - depuis {latestInstantSplit[1]}/{latestInstantSplit[0]} + depuis {billLatestInstantSplit[1]}/{billLatestInstantSplit[0]} </p> </div> </div> @@ -121,7 +112,7 @@ <div class="flex text-gray-600 text-sm"> <div class="bg-gray-400 rounded-sm flex px-1 text-white "> <div class="flex pr-1"> - {#if latestInstant < "2020" || latestInstant === "0001-01-01"} + {#if billLatestInstant < "2020" || billLatestInstant === "0001-01-01"} <!-- Inspired from Material Icons name: Warning / with white symbol inside --> <div class="flex pr-1"> <svg @@ -143,7 +134,7 @@ </svg> </div> <span - title="La dernière relecture date de {latestInstantSplit[1]}/{latestInstantSplit[0]}" + title="La dernière relecture date de {billLatestInstantSplit[1]}/{billLatestInstantSplit[0]}" >À vérifier</span > {:else} @@ -167,7 +158,7 @@ </div> <span - title="La dernière relecture date de {latestInstantSplit[1]}/{latestInstantSplit[0]}" + title="La dernière relecture date de {billLatestInstantSplit[1]}/{billLatestInstantSplit[0]}" >Vérifié</span > {/if} @@ -177,7 +168,7 @@ <div> <a class="text-sm ml-1 underline text-gray-600 hover:text-gray-700" - href="/parameters/{reformParameter.name}" + href="/parameters/{billParameter.name}" target="_blank" > <svg diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 8d72c11a9685a61381d6af5ccd2589694b4efa1b..421d827fa3652ea612e0f5aa3d02753204f7f47d 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -40,12 +40,12 @@ const config = { const extendLineThrough = { ".line-through-amendment": { textDecoration: "line-through", - "text-decoration-color": "rgba(222, 213, 0,0.7)", + "text-decoration-color": "rgba(222, 213, 0, 0.7)", "text-decoration-thickness": "2px", }, ".line-through-bill": { textDecoration: "line-through", - "text-decoration-color": "rgba(255, 107, 107,0.7)", + "text-decoration-color": "rgba(255, 107, 107, 0.7)", "text-decoration-thickness": "2px", }, }