From 29b5234b731b8183429ea254227355cc3aea086e Mon Sep 17 00:00:00 2001
From: Emmanuel Raviart <emmanuel@raviart.com>
Date: Tue, 1 Mar 2022 15:36:56 +0100
Subject: [PATCH] Improve layout of ValueChangeCompare.
---
src/app.html | 2 +-
src/hooks.ts | 21 +---
src/lib/components/ValueChangeCompare.svelte | 12 +-
.../test_cases/TestCaseCompareModal.svelte | 25 ++++
.../test_cases/TestCaseCompareView.svelte | 109 ++++++++----------
.../components/test_cases/TestCaseView.svelte | 71 +++++-------
src/lib/server/oauth2.ts | 3 +-
src/lib/sessions.ts | 33 ------
src/lib/users.ts | 12 --
src/routes/__error.svelte | 4 +-
src/routes/parameters/[parameter]/edit.svelte | 11 +-
.../parameters/[parameter]/index.svelte | 4 +-
src/routes/simulations/[simulation].svelte | 7 +-
src/routes/variables/[variable]/index.svelte | 7 +-
.../variables/[variable]/inputs/[date].svelte | 4 +-
svelte.config.js | 3 -
16 files changed, 128 insertions(+), 200 deletions(-)
delete mode 100644 src/lib/sessions.ts
delete mode 100644 src/lib/users.ts
diff --git a/src/app.html b/src/app.html
index aaf59790f..28d68aaee 100644
--- a/src/app.html
+++ b/src/app.html
@@ -7,6 +7,6 @@
%svelte.head%
</head>
<body>
- <div id="svelte">%svelte.body%</div>
+ <div>%svelte.body%</div>
</body>
</html>
diff --git a/src/hooks.ts b/src/hooks.ts
index 25aa8695e..e27db3c3a 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -1,16 +1,13 @@
-import type { GetSession, Handle } from "@sveltejs/kit"
+import type { GetSession } from "@sveltejs/kit"
import config from "$lib/server/config"
import { oauth2Authenticator } from "$lib/server/oauth2"
-import type { Session } from "$lib/sessions"
const { githubPersonalAccessToken, openfiscaRepository } = config
-export const getSession: GetSession = async (request): Promise<Session> => {
- const { user } =
- oauth2Authenticator === undefined
- ? { user: undefined }
- : await oauth2Authenticator.getSession(request)
+export const getSession: GetSession = async (event): Promise<App.Session> => {
+ const oauth2Session = await oauth2Authenticator?.getSession(event)
+ const user = oauth2Session?.user
return {
advanced: config.advanced,
apiBaseUrls: config.apiBaseUrls,
@@ -36,13 +33,3 @@ export const getSession: GetSession = async (request): Promise<Session> => {
user,
}
}
-
-export const handle: Handle = async ({ request, resolve }) => {
- // TODO https://github.com/sveltejs/kit/issues/1046
- const searchParams = request.url.searchParams
- if (searchParams.has("_method")) {
- request.method = searchParams.get("_method").toUpperCase()
- }
-
- return await resolve(request)
-}
diff --git a/src/lib/components/ValueChangeCompare.svelte b/src/lib/components/ValueChangeCompare.svelte
index 7a6928c4a..5171985b7 100644
--- a/src/lib/components/ValueChangeCompare.svelte
+++ b/src/lib/components/ValueChangeCompare.svelte
@@ -87,7 +87,7 @@
<div class="flex flex-col">
{#if showLawValue0 || showLawValue1}
{#if lawValue0Formatted === lawValue1Formatted}
- <div class="flex flex-col justify-center">
+ <div class="flex flex-col items-center">
<div
class={showBillValue0 || showBillValue1
? "line-through-bill text-2xl"
@@ -123,14 +123,14 @@
</div>
</div>
{#if legend}
- <div class="font-normal ml-1 mx-auto text-xs">(loi en vigueur)</div>
+ <div class="font-normal ml-1 self-center text-xs">(loi en vigueur)</div>
{/if}
{/if}
{/if}
{#if showBillValue0 || showBillValue1}
<br />
{#if billValue0Formatted === billValue1Formatted}
- <div class="flex flex-col justify-center">
+ <div class="flex flex-col items-center">
<div
class="text-le-rouge-bill text-2xl"
class:line-through-amendment={showAmendmentValue0 ||
@@ -160,7 +160,7 @@
</div>
</div>
{#if legend}
- <div class="font-normal ml-1 mx-auto text-xs text-le-rouge-bill">
+ <div class="font-normal ml-1 self-center text-xs text-le-rouge-bill">
(PLF/PLFSS)
</div>
{/if}
@@ -169,7 +169,7 @@
{#if showAmendmentValue0 || showAmendmentValue1}
<br />
{#if amendmentValue0Formatted === amendmentValue1Formatted}
- <div class="flex flex-col justify-center">
+ <div class="flex flex-col items-center">
<div class="text-black bg-le-jaune px-1 text-2xl">
{amendmentValue0Formatted}
</div>
@@ -189,7 +189,7 @@
</div>
</div>
{#if legend}
- <div class="font-normal ml-1 mx-auto text-xs text-le-jaune-dark">
+ <div class="font-normal ml-1 self-center text-xs text-le-jaune-dark">
(votre réforme)
</div>
{/if}
diff --git a/src/lib/components/test_cases/TestCaseCompareModal.svelte b/src/lib/components/test_cases/TestCaseCompareModal.svelte
index d88a79d59..0e87e527e 100644
--- a/src/lib/components/test_cases/TestCaseCompareModal.svelte
+++ b/src/lib/components/test_cases/TestCaseCompareModal.svelte
@@ -11,16 +11,24 @@
import { getContext } from "svelte"
import type { Writable } from "svelte/store"
+ import type { EvaluationByName } from "$lib/decompositions"
import type { Situation } from "$lib/situations"
+ import type { ValuesByCalculationNameByVariableName } from "$lib/variables"
export let isOpen = false
+ const evaluationByNameArray = getContext("evaluationByNameArray") as Writable<
+ EvaluationByName[]
+ >
const testCaseIndex = getContext("testCaseIndex") as Writable<number>
const testCaseToCompareIndex = getContext(
"testCaseToCompareIndex",
) as Writable<number | undefined>
let selectedTestCaseIndex = $testCaseToCompareIndex
const testCases = getContext("testCases") as Writable<Situation[]>
+ const valuesByCalculationNameByVariableNameArray = getContext(
+ "valuesByCalculationNameByVariableNameArray",
+ ) as Writable<ValuesByCalculationNameByVariableName[]>
function closeModal() {
isOpen = false
@@ -31,6 +39,23 @@
const duplicatedTestCase = deepCopy($testCases[$testCaseIndex])
duplicatedTestCase.title = `Copie de ${duplicatedTestCase.title}`
$testCases = [...$testCases, duplicatedTestCase]
+
+ const duplicatedEvaluationByName = deepCopy(
+ $evaluationByNameArray[$testCaseIndex],
+ )
+ $evaluationByNameArray = [
+ ...$evaluationByNameArray,
+ duplicatedEvaluationByName,
+ ]
+
+ const duplicatedValuesByCalculationNameByVariableName = deepCopy(
+ $valuesByCalculationNameByVariableNameArray[$testCaseIndex],
+ )
+ $valuesByCalculationNameByVariableNameArray = [
+ ...$valuesByCalculationNameByVariableNameArray,
+ duplicatedValuesByCalculationNameByVariableName,
+ ]
+
isOpen = false
}
diff --git a/src/lib/components/test_cases/TestCaseCompareView.svelte b/src/lib/components/test_cases/TestCaseCompareView.svelte
index b9985813e..1c6cda121 100644
--- a/src/lib/components/test_cases/TestCaseCompareView.svelte
+++ b/src/lib/components/test_cases/TestCaseCompareView.svelte
@@ -602,68 +602,55 @@
</div> -->
</div>
{#if displayMode.parametersVariableName !== undefined && decompositionByName[displayMode.parametersVariableName] !== undefined}
- <div class="flex justify-between gap-4 mt-2">
- <div class="flex-col ">
- <p class="text-lg font-black mb-1">
- {decompositionByName[displayMode.parametersVariableName]
- .ux_name ??
- decompositionByName[displayMode.parametersVariableName]
- .label ??
- displayMode.parametersVariableName} :
- </p>
- <div class="text-2xl font-semibold">
- <ValueChangeCompare
- unit={Unit.CurrencyEUR}
- value0ByCalculationName={{
- amendment:
- Object.keys($parametricReform).length === 0
- ? undefined
- : evaluationByName[
- displayMode.parametersVariableName
- ]?.calculationEvaluationByName["amendment"]
- ?.deltaAtVectorIndex ?? 0,
- bill:
- $billName === undefined
- ? undefined
- : evaluationByName[
- displayMode.parametersVariableName
- ]?.calculationEvaluationByName["bill"]
- ?.deltaAtVectorIndex ?? 0,
- law:
- evaluationByName[displayMode.parametersVariableName]
- ?.calculationEvaluationByName["law"]
- ?.deltaAtVectorIndex ?? 0,
- }}
- value1ByCalculationName={{
- amendment:
- Object.keys($parametricReform).length === 0
- ? undefined
- : evaluationByName[
- displayMode.parametersVariableName
- ]?.calculationEvaluationByName["amendment"]
- ?.deltaAtVectorIndex ?? 0,
- bill:
- $billName === undefined
- ? undefined
- : evaluationByName[
- displayMode.parametersVariableName
- ]?.calculationEvaluationByName["bill"]
- ?.deltaAtVectorIndex ?? 0,
- law:
- evaluationByName[displayMode.parametersVariableName]
- ?.calculationEvaluationByName["law"]
- ?.deltaAtVectorIndex ?? 0,
- }}
- />
- </div>
+ <div class="flex-col mt-2">
+ <p class="text-lg font-black mb-1">
+ {decompositionByName[displayMode.parametersVariableName]
+ .ux_name ??
+ decompositionByName[displayMode.parametersVariableName]
+ .label ??
+ displayMode.parametersVariableName} :
+ </p>
+ <div class="text-2xl font-semibold">
+ <ValueChangeCompare
+ unit={Unit.CurrencyEUR}
+ value0ByCalculationName={{
+ amendment:
+ Object.keys($parametricReform).length === 0
+ ? undefined
+ : evaluationByName[displayMode.parametersVariableName]
+ ?.calculationEvaluationByName["amendment"]
+ ?.deltaAtVectorIndex ?? 0,
+ bill:
+ $billName === undefined
+ ? undefined
+ : evaluationByName[displayMode.parametersVariableName]
+ ?.calculationEvaluationByName["bill"]
+ ?.deltaAtVectorIndex ?? 0,
+ law:
+ evaluationByName[displayMode.parametersVariableName]
+ ?.calculationEvaluationByName["law"]
+ ?.deltaAtVectorIndex ?? 0,
+ }}
+ value1ByCalculationName={{
+ amendment:
+ Object.keys($parametricReform).length === 0
+ ? undefined
+ : evaluationByName[displayMode.parametersVariableName]
+ ?.calculationEvaluationByName["amendment"]
+ ?.deltaAtVectorIndex ?? 0,
+ bill:
+ $billName === undefined
+ ? undefined
+ : evaluationByName[displayMode.parametersVariableName]
+ ?.calculationEvaluationByName["bill"]
+ ?.deltaAtVectorIndex ?? 0,
+ law:
+ evaluationByName[displayMode.parametersVariableName]
+ ?.calculationEvaluationByName["law"]
+ ?.deltaAtVectorIndex ?? 0,
+ }}
+ />
</div>
-
- <!-- <div class="flex-col w-1/2">
- <p class="text-gray-500 font-bold ">Détail dispositif</p>
- <p class="text-base">1000 €</p>
- <p class="text-gray-500 font-bold ">Détail dispositif</p>
- <p class="text-base">1000 €</p>
- </div> -->
</div>
{/if}
</div>
diff --git a/src/lib/components/test_cases/TestCaseView.svelte b/src/lib/components/test_cases/TestCaseView.svelte
index 49ccb5add..aceb5335d 100644
--- a/src/lib/components/test_cases/TestCaseView.svelte
+++ b/src/lib/components/test_cases/TestCaseView.svelte
@@ -469,48 +469,37 @@
</div> -->
</div>
{#if displayMode.parametersVariableName !== undefined && decompositionByName[displayMode.parametersVariableName] !== undefined}
- <div class="flex justify-between gap-4 mt-2">
- <div class="flex-col ">
- <p class="text-lg font-black mb-1">
- {decompositionByName[displayMode.parametersVariableName]
- .ux_name ??
- decompositionByName[displayMode.parametersVariableName]
- .label ??
- displayMode.parametersVariableName} :
- </p>
- <div class="text-2xl font-semibold">
- <ValueChange
- unit={Unit.CurrencyEUR}
- valueByCalculationName={{
- amendment:
- Object.keys($parametricReform).length === 0
- ? undefined
- : evaluationByName[
- displayMode.parametersVariableName
- ]?.calculationEvaluationByName["amendment"]
- ?.deltaAtVectorIndex ?? 0,
- bill:
- $billName === undefined
- ? undefined
- : evaluationByName[
- displayMode.parametersVariableName
- ]?.calculationEvaluationByName["bill"]
- ?.deltaAtVectorIndex ?? 0,
- law:
- evaluationByName[displayMode.parametersVariableName]
- ?.calculationEvaluationByName["law"]
- ?.deltaAtVectorIndex ?? 0,
- }}
- />
- </div>
+ <div class="flex-col mt-2">
+ <p class="text-lg font-black mb-1">
+ {decompositionByName[displayMode.parametersVariableName]
+ .ux_name ??
+ decompositionByName[displayMode.parametersVariableName]
+ .label ??
+ displayMode.parametersVariableName} :
+ </p>
+ <div class="text-2xl font-semibold">
+ <ValueChange
+ unit={Unit.CurrencyEUR}
+ valueByCalculationName={{
+ amendment:
+ Object.keys($parametricReform).length === 0
+ ? undefined
+ : evaluationByName[displayMode.parametersVariableName]
+ ?.calculationEvaluationByName["amendment"]
+ ?.deltaAtVectorIndex ?? 0,
+ bill:
+ $billName === undefined
+ ? undefined
+ : evaluationByName[displayMode.parametersVariableName]
+ ?.calculationEvaluationByName["bill"]
+ ?.deltaAtVectorIndex ?? 0,
+ law:
+ evaluationByName[displayMode.parametersVariableName]
+ ?.calculationEvaluationByName["law"]
+ ?.deltaAtVectorIndex ?? 0,
+ }}
+ />
</div>
-
- <!-- <div class="flex-col w-1/2">
- <p class="text-gray-500 font-bold ">Détail dispositif</p>
- <p class="text-base">1000 €</p>
- <p class="text-gray-500 font-bold ">Détail dispositif</p>
- <p class="text-base">1000 €</p>
- </div> -->
</div>
{/if}
</div>
diff --git a/src/lib/server/oauth2.ts b/src/lib/server/oauth2.ts
index e6ae03671..d7e2d77f2 100644
--- a/src/lib/server/oauth2.ts
+++ b/src/lib/server/oauth2.ts
@@ -2,9 +2,8 @@ import { SvelteKitAuth } from "sk-auth"
import { OAuth2Provider } from "sk-auth/providers"
import config from "$lib/server/config"
-import type { User } from "$lib/users"
-type Profile = User
+type Profile = App.User
interface Tokens {
access_token: string
diff --git a/src/lib/sessions.ts b/src/lib/sessions.ts
deleted file mode 100644
index c28aa6161..000000000
--- a/src/lib/sessions.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { User } from "$lib/users"
-
-export interface Session {
- advanced: boolean
- apiBaseUrls: string[]
- apiWebSocketBaseUrls: string[]
- baseUrl: string
- authenticationEnabled: boolean
- childrenKey: string
- familyEntityKey: string
- hasGithubPersonalAccessToken: boolean
- hiddenEntitiesKeyPlural?: string[]
- matomo?: {
- prependDomain?: boolean
- siteId: number
- subdomains?: string
- url: string
- }
- openfiscaRepository: SessionOpenFiscaRepository
- portalUrl: string
- reformName?: string
- showTutorial?: boolean
- title: string
- user?: User
-}
-
-export interface SessionOpenFiscaRepository {
- branch: string
- group: string
- project: string
- rawUrlTemplate: string
- urlTemplate: string
-}
diff --git a/src/lib/users.ts b/src/lib/users.ts
deleted file mode 100644
index 19b723dc0..000000000
--- a/src/lib/users.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export interface User {
- email: string // "john@doe.com"
- email_verified: boolean
- family_name: string // "Doe"
- given_name: string // "John"
- last_name: string // "Doe"
- locale: string // "fr"
- name: string // "John Doe"
- preferred_username: string // "jdoe",
- roles?: string[] // [ 'offline_access', 'default-roles-leximpact', 'uma_authorization' ],
- sub: string // "12345678-9abc-def0-1234-56789abcdef0"
-}
diff --git a/src/routes/__error.svelte b/src/routes/__error.svelte
index b7c5ca2e5..711384de8 100644
--- a/src/routes/__error.svelte
+++ b/src/routes/__error.svelte
@@ -1,7 +1,7 @@
<script context="module" lang="ts">
- import type { ErrorLoadInput, LoadOutput } from "@sveltejs/kit"
+ import type { ErrorLoad } from "@sveltejs/kit"
- export function load({ error, status }: ErrorLoadInput): LoadOutput {
+ export const load: ErrorLoad = function ({ error, status }) {
return {
props: {
title: `${status}: ${error.message}`,
diff --git a/src/routes/parameters/[parameter]/edit.svelte b/src/routes/parameters/[parameter]/edit.svelte
index 1fc1821f5..77f4393ae 100644
--- a/src/routes/parameters/[parameter]/edit.svelte
+++ b/src/routes/parameters/[parameter]/edit.svelte
@@ -5,7 +5,7 @@
iterParameterAncestors,
ParameterClass,
} from "@openfisca/json-model"
- import type { LoadInput, LoadOutput } from "@sveltejs/kit"
+ import type { Load } from "@sveltejs/kit"
import yaml from "js-yaml"
import {
@@ -13,13 +13,8 @@
labelFromParameterClass,
rootParameter,
} from "$lib/parameters"
- import type { SessionOpenFiscaRepository } from "$lib/sessions"
- export async function load({
- fetch,
- params,
- session,
- }: LoadInput): Promise<LoadOutput> {
+ export const load: Load = async function ({ fetch, params, session }) {
const { parameter: name } = params
const processedParameter = getParameter(rootParameter, name)
if (processedParameter === undefined) {
@@ -77,7 +72,7 @@
}
export function newParameterRepositoryRawUrl(
- { branch, group, project, rawUrlTemplate }: SessionOpenFiscaRepository,
+ { branch, group, project, rawUrlTemplate }: App.SessionOpenFiscaRepository,
parameter: Parameter,
): string | undefined {
const path = parameter.file_path
diff --git a/src/routes/parameters/[parameter]/index.svelte b/src/routes/parameters/[parameter]/index.svelte
index d8f491efc..3f6b28718 100644
--- a/src/routes/parameters/[parameter]/index.svelte
+++ b/src/routes/parameters/[parameter]/index.svelte
@@ -1,9 +1,9 @@
<script context="module" lang="ts">
- import type { LoadInput, LoadOutput } from "@sveltejs/kit"
+ import type { Load } from "@sveltejs/kit"
import { getParameter, rootParameter } from "$lib/parameters"
- export function load({ params }: LoadInput): LoadOutput {
+ export const load: Load = function ({ params }) {
const { parameter: name } = params
const parameter = getParameter(rootParameter, name)
if (parameter === undefined) {
diff --git a/src/routes/simulations/[simulation].svelte b/src/routes/simulations/[simulation].svelte
index 1b2e87c7f..57966e98c 100644
--- a/src/routes/simulations/[simulation].svelte
+++ b/src/routes/simulations/[simulation].svelte
@@ -1,10 +1,7 @@
<script context="module" lang="ts">
- import type { LoadInput, LoadOutput } from "@sveltejs/kit"
+ import type { Load } from "@sveltejs/kit"
- export async function load({
- fetch,
- params,
- }: LoadInput): Promise<LoadOutput> {
+ export const load: Load = async function ({ fetch, params }) {
const { simulation: token } = params
const urlString = `/simulations/${token}.json`
const res = await fetch(urlString)
diff --git a/src/routes/variables/[variable]/index.svelte b/src/routes/variables/[variable]/index.svelte
index 081195b92..1c3ccec2b 100644
--- a/src/routes/variables/[variable]/index.svelte
+++ b/src/routes/variables/[variable]/index.svelte
@@ -1,10 +1,7 @@
<script context="module" lang="ts">
- import type { LoadInput, LoadOutput } from "@sveltejs/kit"
+ import type { Load } from "@sveltejs/kit"
- export async function load({
- fetch,
- params,
- }: LoadInput): Promise<LoadOutput> {
+ export const load: Load = async function ({ fetch, params }) {
const { variable: name } = params
const urlString = `/variables/${name}.json`
const res = await fetch(urlString)
diff --git a/src/routes/variables/[variable]/inputs/[date].svelte b/src/routes/variables/[variable]/inputs/[date].svelte
index 84aee5052..d8fdd8a75 100644
--- a/src/routes/variables/[variable]/inputs/[date].svelte
+++ b/src/routes/variables/[variable]/inputs/[date].svelte
@@ -1,12 +1,12 @@
<script context="module" lang="ts">
- import type { LoadInput, LoadOutput } from "@sveltejs/kit"
+ import type { Load } from "@sveltejs/kit"
import {
iterVariableInputVariables,
variableSummaryByName,
} from "$lib/variables"
- export function load({ params }: LoadInput): LoadOutput {
+ export const load: Load = function ({ params }) {
const { date, variable: name } = params
const variable = variableSummaryByName[name]
if (variable === undefined) {
diff --git a/svelte.config.js b/svelte.config.js
index f0be0c52d..38cf9a819 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -11,9 +11,6 @@ const config = {
precompress: true,
}),
- // hydrate the <div id="svelte"> element in src/app.html
- target: "#svelte",
-
vite: {
build: {
// Increase size of chunks to 5 MB, to be able to import
--
GitLab