wip vizu

.gitignore

@@ -11,7 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
-
+public/workers/*
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

package.json

@@ -13,7 +13,7 @@
     "format:check": "npm run _format -- --list-different",
     "postinstall": "copy-dsfr-to-public",
     "predev": "only-include-used-icons",
-    "prebuild": "only-include-used-icons"
+    "prebuild": "only-include-used-icons && npx @inseefr/lunatic workers"
   },
   "dependencies": {
     "@codegouvfr/react-dsfr": "^1.2.1",
@@ -32,7 +32,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@types/node": "^20.11.10",
+    "@types/node": "^20.11.13",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.20.0",

src/components/Orchestrator/Orchestrator.tsx

@@ -7,25 +7,30 @@ import {
 import * as custom from '@inseefr/lunatic-dsfr'
 import { useStyles } from 'tss-react/dsfr'
 import Button from '@codegouvfr/react-dsfr/Button'
+import ButtonsGroup from '@codegouvfr/react-dsfr/ButtonsGroup'
 import { fr } from '@codegouvfr/react-dsfr'
 import { Grid } from 'components/Grid'
 import { useMemo, type PropsWithChildren } from 'react'
+import { downloadAsJson } from 'utils/downloadAsJson'
 
 export function Orchestrator(props: {
   source: LunaticSource
-  data?: LunaticData
+  data?: LunaticData | null
 }) {
   const { source, data } = props
   const {
     getComponents,
     Provider,
     goPreviousPage,
     goNextPage,
+    getData,
     isFirstPage,
     isLastPage,
-  } = useLunatic(source, data, {
+  } = useLunatic(source, data ?? undefined, {
     // @ts-expect-error need some work on lunatic-dsfr to remove this
     custom,
+    activeControls: true
+
   })
 
   return (
@@ -35,6 +40,7 @@ export function Orchestrator(props: {
           <Navigation
             handleNextClick={goNextPage}
             handlePreviousClick={goPreviousPage}
+            getData={() => getData(true)}
             isFirstPage={isFirstPage}
             isLastPage={isLastPage}
           >
@@ -46,8 +52,8 @@ export function Orchestrator(props: {
             />
           </Navigation>
         </div>
-      </Provider>
-    </div>
+      </Provider >
+    </div >
   )
 }
 
@@ -57,13 +63,16 @@ function Navigation(
     isLastPage: boolean
     handlePreviousClick: () => void
     handleNextClick: () => void
+    getData: () => LunaticData
+
   }>
 ) {
   const {
     isFirstPage,
     isLastPage,
     handleNextClick,
     handlePreviousClick,
+    getData,
     children,
   } = props
   const { css } = useStyles()
@@ -102,6 +111,20 @@ function Navigation(
           {nextLabel}
         </Button>
       </Grid>
+      <ButtonsGroup
+        buttons={[{
+          children: "Télécharger les données",
+          priority: "tertiary no outline",
+          id: "button-saveData",
+          iconId: "ri-download-2-line",
+          onClick: () => downloadAsJson({ data: getData() })
+        }]
+        }
+        alignment='right'
+        buttonsEquisized={true}
+      />
+
+
     </>
   )
 }

src/pages/Visualize/Form/encodeParams.ts

@@ -17,7 +17,7 @@ export const decodeParams = (params: {
   source?: string
   metadata?: string
   data?: string
-}): FormInputs => {
+}) => {
   const { source, data, metadata, nomenclature } = params
 
   const decodedNomenclature = nomenclature
@@ -28,9 +28,9 @@ export const decodeParams = (params: {
     : []
 
   return {
-    source: source ? decodeURIComponent(source) : '',
-    metadata: metadata ? decodeURIComponent(metadata) : '',
-    data: data ? decodeURIComponent(data) : '',
+    sourceUrl: source ? decodeURIComponent(source) : undefined,
+    metadataUrl: metadata ? decodeURIComponent(metadata) : undefined,
+    dataUrl: data ? decodeURIComponent(data) : undefined,
     nomenclature: decodedNomenclature,
   }
 }

src/pages/Visualize/visualizeRoute.ts

@@ -18,51 +18,39 @@ export const visualizeRoute = createRoute({
     nomenclature: z.record(z.string()).optional(),
   }),
   loaderDeps: ({ search }) => decodeParams(search),
-  loader: ({
+  loader: async ({
     context: { queryClient },
-    deps: { source, data, metadata, nomenclature },
+    deps: { sourceUrl, dataUrl, metadataUrl, nomenclature },
   }) => {
-    if (!source) {
+    if (!sourceUrl) {
       return
     }
 
-    return queryClient.ensureQueryData(
-      visualizeQueryOptions({
-        sourceUrl: source,
-        dataUrl: data,
-        metadataUrl: metadata,
-        nomenclature,
-      })
-    )
-  },
-})
-const visualizeQueryOptions = (params: {
-  sourceUrl: string
-  dataUrl: string
-  metadataUrl: string
-  nomenclature: {
-    name: string
-    uri: string
-  }[]
-}) => {
-  const { sourceUrl, dataUrl, metadataUrl, nomenclature } = params
-  return queryOptions({
-    queryKey: [sourceUrl, dataUrl, metadataUrl, nomenclature],
-    queryFn: async () => {
-      const sourcePromise = axiosGet<LunaticSource>(sourceUrl)
-      const dataPromise =
-        dataUrl === '' ? undefined : axiosGet<LunaticData>(dataUrl)
-      //TODO TYPE THIS
-      const metadataPromise =
-        metadataUrl === '' ? undefined : axiosGet<unknown>(metadataUrl)
+    const sourceQueryOption = queryOptions({
+      queryKey: [sourceUrl],
+      queryFn: () => axiosGet<LunaticSource>(sourceUrl),
+    })
+
+    const dataQueryOption = queryOptions({
+      queryKey: [dataUrl],
+      queryFn: () => (dataUrl ? axiosGet<LunaticData>(dataUrl) : null),
+    })
 
-      const [source, data, metadata] = await Promise.all([
-        sourcePromise,
-        dataPromise,
-        metadataPromise,
-      ])
+    //TODO Type metadata
+    const metadataQueryOption = queryOptions({
+      queryKey: [metadataUrl],
+      queryFn: () => (metadataUrl ? axiosGet<unknown>(metadataUrl) : null),
+    })
 
-      return { source, data, metadata, nomenclature }
-    },
-  })
-}
+    const sourcePr = queryClient.ensureQueryData(sourceQueryOption)
+    const dataPr = queryClient.ensureQueryData(dataQueryOption)
+    const metadataPr = queryClient.ensureQueryData(metadataQueryOption)
+
+    const [source, data, metadata] = await Promise.all([
+      sourcePr,
+      dataPr,
+      metadataPr,
+    ])
+    return { source, data, metadata, nomenclature }
+  },
+})

src/utils/downloadAsJson.ts

@@ -0,0 +1,21 @@
+export const downloadAsJson = (params: { data: object; filename?: string }) => {
+  const { data, filename = 'data.json' } = params
+  if (!data) {
+    console.error('No data to download.')
+    return
+  }
+
+  const jsonData = JSON.stringify(data, null, 2)
+  const blob = new Blob([jsonData], { type: 'application/json' })
+
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+
+  document.body.appendChild(a)
+  a.click()
+
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}

yarn.lock

@@ -938,10 +938,10 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.34.tgz#10964ba0dee6ac4cd462e2795b6bebd407303433"
   integrity sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==
 
-"@types/node@^20.11.10":
-  version "20.11.10"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.10.tgz#6c3de8974d65c362f82ee29db6b5adf4205462f9"
-  integrity sha512-rZEfe/hJSGYmdfX9tvcPMYeYPW2sNl50nsw4jZmRcaG0HIAb0WYEpsB05GOb53vjqpyE9GUhlDQ4jLSoB5q9kg==
+"@types/node@^20.11.13":
+  version "20.11.13"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.13.tgz#188263ee2c8d590e181d3f5bfa7e485a932957cb"
+  integrity sha512-5G4zQwdiQBSWYTDAH1ctw2eidqdhMJaNsiIDKHFr55ihz5Trl2qqR8fdrT732yPBho5gkNxXm67OxWFBqX9aPg==
   dependencies:
     undici-types "~5.26.4"