Skip to content

Commit

Permalink
wip vizu
Browse files Browse the repository at this point in the history
  • Loading branch information
ddecrulle committed Jan 9, 2024
1 parent c5c3991 commit ec33a14
Show file tree
Hide file tree
Showing 13 changed files with 212 additions and 53 deletions.
4 changes: 2 additions & 2 deletions drama-queen/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@
"jwt-decode": "^3.1.2",
"keycloak-js": "^21.1.2",
"memoizee": "^0.4.15",
"oidc-spa": "^2.0.3",
"oidc-spa": "^3.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.1",
"redux-clean-architecture": "^4.1.1",
"redux-clean-architecture": "^4.3.1",
"tsafe": "^1.6.4",
"tss-react": "^4.9.0",
"zod": "^3.21.4"
Expand Down
4 changes: 2 additions & 2 deletions drama-queen/src/bootstrap.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import CircularProgress from "@mui/material/CircularProgress"
import { createCoreProvider } from "core";
import { RouterProvider } from "react-router-dom";

const { CoreProvider } = createCoreProvider({
const { CoreProvider, prCore } = createCoreProvider({
"apiUrl": import.meta.env.VITE_QUEEN_API_URL,
"publicUrl": import.meta.env.BASE_URL,
"oidcParams": {
Expand Down Expand Up @@ -39,4 +39,4 @@ const mount = ({



export { mount };
export { mount, prCore };
12 changes: 12 additions & 0 deletions drama-queen/src/hooks/useTranslate.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,18 @@ const texts = {
"sync.download.questionnaires": "Questionnaires",
"sync.upload": "Envoi des données",
vizu: "Page de visualisation de questionnaire",
"vizu.input.survey.label": "Questionnaire",
"vizu.input.survey.helper":
"L'url d'un json de questionnaire au format Lunatic-model",
"vizu.input.data.label": "Données",
"vizu.input.data.helper": "L'url d'un json de données (de réponse)",
"vizu.input.nomenclatures.label": "Dictionnaire de nomenclatures",
"vizu.input.nomenclatures.helper":
"Dictionnaire avec en clé le nom de la nomenclature et en valeur l'url",
"vizu.button.label": "Visualiser",
"vizu.queen.label": "Version de Queen",
"vizu.examples.label": "Ou choisir un exemple :",
"vizu.examples.select.label": "Exemples",
} as const;

const getTranslation = (s: keyof typeof texts) => texts[s] ?? s;
Expand Down
17 changes: 0 additions & 17 deletions drama-queen/src/ui/auth.tsx

This file was deleted.

30 changes: 30 additions & 0 deletions drama-queen/src/ui/components/appVersion.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import Typography from "@mui/material/Typography"
import { tss } from "tss-react/mui"

export const AppVersion = () => {
const { classes } = useStyles()
return (
<div className={classes.footer}>
<Typography variant="body1" color="textSecondary">
Drama Queen version {APP_VERSION}
</Typography>
</div>
)
}



const useStyles = tss
.create(({ theme }) => ({
footer: {
backgroundColor: '#f5f5f5',
borderTop: '1px solid black',
position: 'fixed',
left: 0,
bottom: 0,
width: '100%',
textAlign: 'center',
padding: '2px 0 2px 0',
},
})
)
3 changes: 3 additions & 0 deletions drama-queen/src/ui/components/orchestrator/Orchestrator.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export function Orchestrator() {
return <>Orchestrator</>
}
3 changes: 1 addition & 2 deletions drama-queen/src/ui/pages/env/DisplayEnvValues.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,8 @@ import './env.css'
export function DisplayEnvValues() {
return (
<div className="App">
<h1>Drama Queen v{APP_VERSION}</h1>
<h1>Les variables d'environnements</h1>
<div className="card">
<p>Les variables d'environnements</p>
<p className="read-the-docs">
{Object.entries(import.meta.env).filter(([k,]) => k.startsWith("VITE")).map(([k, v]) => (
<React.Fragment key={k}>
Expand Down
34 changes: 24 additions & 10 deletions drama-queen/src/ui/pages/visualize/Visualize.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,35 @@
import { Container, Typography } from "@mui/material"
import { useTranslate } from "hooks/useTranslate"
import { tss } from "tss-react/mui";
import { useSearchParams } from "react-router-dom";
import { z } from "zod";
import { makeSearchParamsObjSchema } from "ui/tools/makeSearchParamsObjectSchema";
import { VisualizeForm } from "./VisualizeForm";

const searchParamsSchema = z.object({
questionnaire: z.string().optional(),
data: z.string().optional(),
nomenclature: z.record(z.string()).optional(),
readonly: z.boolean().optional()
})


export function Visualize() {
const { t } = useTranslate()
const { classes } = useStyles()

//const { classes } = useStyles();

const [searchParams] = useSearchParams()

const params = makeSearchParamsObjSchema(searchParamsSchema).safeParse(searchParams)

console.log(params.success ? params.data : params.error);

return (
<Container>
<Typography variant="h3" className={classes.title}>{t("vizu")}</Typography>
</Container>
<VisualizeForm />
)
}


const useStyles = tss.create(
() => ({
title: {
textAlign: 'center',
}

})
)
40 changes: 40 additions & 0 deletions drama-queen/src/ui/pages/visualize/VisualizeForm.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { Button, FormControl, FormControlLabel, FormGroup, InputLabel, MenuItem, Radio, RadioGroup, Select, Stack, Switch, TextField, Typography } from "@mui/material"
import { useTranslate } from "hooks/useTranslate"
import { tss } from "tss-react/mui";


export function VisualizeForm() {
const { t } = useTranslate()
const { classes } = useStyles()
return (
<Stack spacing={3} alignItems="center">
<Stack spacing={2}>
<Typography variant="h3" className={classes.title}>{t("vizu")}</Typography>
<TextField id="questionnaire-url-form"
label={t("vizu.input.survey.label")} helperText={t('vizu.input.survey.helper')} />
<TextField id="data-url-form"
label={t("vizu.input.data.label")} helperText={t('vizu.input.data.helper')} />
<TextField id="nomenclature-url-form"
label={t("vizu.input.nomenclatures.label")} helperText={t('vizu.input.nomenclatures.helper')} />
</Stack>
<Stack direction={"row"} alignItems="center">
<FormGroup>
<FormControlLabel control={<Switch />} label="Lecture Seul" />
</FormGroup>
</Stack>
<Button variant="contained" type="submit">{t('vizu.button.label')}</Button>
</Stack>
)
}


const useStyles = tss.create(
() => ({
title: {
textAlign: 'center',
},
selectExample: {
minWidth: 120
}
})
)
11 changes: 11 additions & 0 deletions drama-queen/src/ui/routing/Layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { Outlet } from "react-router-dom";
import { AppVersion } from "ui/components/appVersion";

export function Layout() {
return (
<>
<Outlet />
<AppVersion />
</>
);
}
61 changes: 49 additions & 12 deletions drama-queen/src/ui/routing/routes.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { DisplayEnvValues } from "ui/pages/env";
import { SurveyUnitMapping, VisualisationMapping } from "ui/pages/queenMapping";
import { READ_ONLY } from "ui/constants";
import type { RouteObject } from "react-router-dom";
import type { LoaderFunctionArgs, RouteObject } from "react-router-dom";
import { SurveyMapping } from "ui/pages/queenMapping/SuryveyMapping";
import { RequiresAuthentication } from "ui/auth";
import { SynchronizeData } from "ui/pages/synchronize/SynchronizeData";

import { Layout } from "./Layout";
import { prCore } from "bootstrap";
import { Visualize } from "ui/pages/visualize/Visualize";
import { Orchestrator } from "ui/components/orchestrator/Orchestrator";

//ReadOnly path is a bad pattern must be change (affects pearl,moog,queen)
export const routes: RouteObject[] = [
{
path: "/env",
element: <RequiresAuthentication><DisplayEnvValues /></RequiresAuthentication>
},

{
path: `/:${READ_ONLY}?/survey-unit/:id`,
element: <SurveyUnitMapping />
Expand All @@ -21,12 +21,49 @@ export const routes: RouteObject[] = [
path: `/:${READ_ONLY}?/questionnaire/:questionnaireId/survey-unit/:surveyUnitId`,
element: <SurveyMapping />
},

{
path: "/visualize/*",
element: <Visualize />
path: '/',
Component: Layout,
children: [
{
path: "/env",
Component: DisplayEnvValues,
loader: protectedRouteLoader,
},
{
path: "/visualize",
Component: Visualize
},
{
path: "/synchronize",
Component: SynchronizeData,
loader: protectedRouteLoader,
},
{
path: '/orchestrator',
Component: Orchestrator
}
]
},
{
path: "/synchronize",
element: <RequiresAuthentication><SynchronizeData /></RequiresAuthentication>

]


async function protectedRouteLoader({ request }: LoaderFunctionArgs) {

const { functions: { userAuthentication } } = await prCore;

if (!userAuthentication.getIsUserLoggedIn()) {
// Replace the href without reloading the page.
// This is a way to make oidc-spa know where to redirect the user
// if the authentication process is successful.
history.pushState({}, "", request.url);

await userAuthentication.login();

// Never here, the login method redirects the user to the identity provider.
}
]

return null;
}
30 changes: 30 additions & 0 deletions drama-queen/src/ui/tools/makeSearchParamsObjectSchema.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { z } from 'zod'

function safeParseJSON ( string: string ): any {
try { return JSON.parse( string ) }
catch { return string }
}

function searchParamsToValues ( searchParams: URLSearchParams ): Record<string, any> {
return Array.from( searchParams.keys() ).reduce( ( record, key ) => {
const values = searchParams.getAll( key ).map( safeParseJSON )
return { ...record, [ key ]: values.length > 1 ? values : values[ 0 ] }
}, {} as Record<string, any> )
}

export function makeSearchParamsObjSchema<
Schema extends z.ZodObject<z.ZodRawShape>
> ( schema: Schema ) {
return z.instanceof( URLSearchParams )
.transform( searchParamsToValues )
.pipe( schema )
}

function coerceToArray<
Schema extends z.ZodArray<z.ZodTypeAny>
> ( schema: Schema ) {
return z.union( [
z.any().array(),
z.any().transform( x => [ x ] ),
] ).pipe( schema )
}
16 changes: 8 additions & 8 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -12170,10 +12170,10 @@ oidc-client@^1.11.5:
crypto-js "^4.0.0"
serialize-javascript "^4.0.0"

oidc-spa@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/oidc-spa/-/oidc-spa-2.0.3.tgz#387a6c92b2fbd097d75ca9f3fa4b10f7f5213cdc"
integrity sha512-pZJgjpdVr2CRGKhqQGj6z7qu1INo9/xP6HkkqIata3zXEmFrIK/zv6SCpDdFMfeIVfqQWV946FVbccUqBrUlcA==
oidc-spa@^3.0.3:
version "3.0.3"
resolved "https://registry.yarnpkg.com/oidc-spa/-/oidc-spa-3.0.3.tgz#01e524064e91615e3f2c6d6c906234fc13351787"
integrity sha512-yoAQHaTPw0Eb3AYLQ1ODuCfO0iboUv3agnz45QSm0LWG9o6+9mtN6g71XljrSIPR/G5g4rLria4Ke+Rq/LoJZg==
dependencies:
jwt-decode "^3.1.2"
oidc-client-ts "^2.3.0"
Expand Down Expand Up @@ -14223,10 +14223,10 @@ redent@^3.0.0:
indent-string "^4.0.0"
strip-indent "^3.0.0"

redux-clean-architecture@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/redux-clean-architecture/-/redux-clean-architecture-4.1.1.tgz#1914cee90525765648e9a52ac64e25e7c8dc6f1a"
integrity sha512-ZdaIM4mHoWdjkC6GNf1P3Hb/yY9n4oplxhnOZ7o2WvB2OoaV5GmBjhZsIj7llAnEh0Y92gOGPxrO9kgUO9Evuw==
redux-clean-architecture@^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/redux-clean-architecture/-/redux-clean-architecture-4.3.1.tgz#b3c0f661d3813a39f66bd0713d711974f83e1a33"
integrity sha512-WXbvO47tdoh4heJ26ZbfdLOKsXAz6SPCCig99ufTa5zEcm0R44+Xn/h7GYo3wBFTacHlcuv9KEbSap7TdDW1nA==
dependencies:
"@reduxjs/toolkit" "^1.9.6"
minimal-polyfills "^2.2.3"
Expand Down

0 comments on commit ec33a14

Please sign in to comment.