- Le fichier n'est pas compatible avec le convertisseur, utilisez le type{' '} - {selectedWrapper?.fileType}. -
- ) : null} -
+ {/* File input */}
+
+ );
+};
+
+export default memo(ProcessingFormConfiguration);
diff --git a/tdm-fe/src/app/components/form/ProcessingFormConfirmation.tsx b/tdm-fe/src/app/components/form/ProcessingFormConfirmation.tsx
new file mode 100644
index 0000000..3e6b88d
--- /dev/null
+++ b/tdm-fe/src/app/components/form/ProcessingFormConfirmation.tsx
@@ -0,0 +1,61 @@
+import Alert from '@mui/material/Alert';
+import Link from '@mui/material/Link';
+import { useHref } from 'react-router-dom';
+import CircularWaiting from '~/app/components/progress/CircularWaiting';
+import { RouteProcessingStatus } from '~/app/shared/routes';
+
+export type ProcessingFormConfirmationProps = {
+ processingId: string;
+ state: {
+ status: 200 | 400 | 428 | 500 | null | undefined;
+ pending: boolean;
+ };
+};
+
+const ProcessingFormConfirmation = ({ processingId, state }: ProcessingFormConfirmationProps) => {
+ const href = useHref(`${RouteProcessingStatus}/${processingId}`);
+
+ /**
+ * Show a loading box will wait for the start to be fetched
+ */
+ if (state.pending) {
+ return
+
+ {/* Wrapper input */}
+
+ {!file ? (
+ <>Fichier manquant
+ ) : (
+ <>
+ Le fichier n'est pas compatible avec le convertisseur, utilisez le type{' '}
+ {selectedWrapper?.fileType.join(', ')}.
+
+ )}
+
+ ) : null}
+
+ {/* Wrapper selection */}
+
+ {/* Enrichment input */}
+
+
+ {/* Wrapper param */}
+ {selectedWrapper ? (
+
+
+
+ ) : null}
+
+
+
+ ) : null}
+
+
+
+
+ );
+};
+
+export default ProcessingFormConfirmation;
diff --git a/tdm-fe/src/app/components/form/ProcessingFormEmail.tsx b/tdm-fe/src/app/components/form/ProcessingFormEmail.tsx
new file mode 100644
index 0000000..3808ca2
--- /dev/null
+++ b/tdm-fe/src/app/components/form/ProcessingFormEmail.tsx
@@ -0,0 +1,53 @@
+import '~/app/components/form/scss/ProcessingFormCommon.scss';
+import TextField from '@mui/material/TextField';
+import { useState } from 'react';
+import type { ChangeEvent } from 'react';
+
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export type ChangeEmail = {
+ email: string | null;
+ invalidState: boolean;
+};
+
+export type ProcessingFormEmailProps = {
+ email: string | null;
+ onChange: (email: ChangeEmail) => void;
+};
+
+const ProcessingFormEmail = ({ email: emailIn, onChange }: ProcessingFormEmailProps) => {
+ const [email, setEmail] = useState(emailIn);
+ const [error, setError] = useStateLe traitement a commencé. Vous allez recevoir un mail contenant un résumé.
++ Vous pouvez voir l'avancement du traitement via la page de statut des traitements :{' '} + {processingId} +
+
+
+ );
+};
+
+export default ProcessingFormEmail;
diff --git a/tdm-fe/src/app/components/form/ProcessingFormStepper.tsx b/tdm-fe/src/app/components/form/ProcessingFormStepper.tsx
new file mode 100644
index 0000000..3fc743a
--- /dev/null
+++ b/tdm-fe/src/app/components/form/ProcessingFormStepper.tsx
@@ -0,0 +1,116 @@
+import '~/app/components/form/scss/ProcessingFormStepper.scss';
+import CheckIcon from '@mui/icons-material/Check';
+import Step from '@mui/material/Step';
+import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector';
+import StepLabel, { stepLabelClasses } from '@mui/material/StepLabel';
+import Stepper from '@mui/material/Stepper';
+import { styled } from '@mui/material/styles';
+import { useMemo } from 'react';
+import type { StepIconProps } from '@mui/material/StepIcon';
+import { colors } from '~/app/shared/theme';
+
+export type ProcessingFormStepperProps = {
+ step?: number;
+};
+
+export const PROCESSING_CONFIGURATION_STEP = 0;
+export const PROCESSING_UPLOAD_STEP = 1;
+export const PROCESSING_VALIDATION_STEP = 2;
+export const PROCESSING_CONFIRMATION_STEP = 3;
+
+/**
+ * List of all step available
+ */
+const steps = [
+ { id: 'processing-configuration-step', title: 'Configuration' },
+ { id: 'processing-upload-step', title: 'Téléversement' },
+ { id: 'processing-validation-step', title: 'Vérification' },
+ { id: 'processing-confirmation-step', title: 'Confirmation' },
+];
+
+/**
+ * Istex themed step connector
+ */
+const IstexStepConnector = styled(StepConnector)(({ theme }) => ({
+ [`&.${stepConnectorClasses.alternativeLabel}`]: {
+ top: 16,
+ left: 'calc(-50% + 18px)',
+ right: 'calc(50% + 18px)',
+ },
+ [`&.${stepConnectorClasses.active}`]: {
+ [`& .${stepConnectorClasses.line}`]: {
+ borderColor: theme.palette.colors.blue,
+ },
+ },
+ [`&.${stepConnectorClasses.completed}`]: {
+ [`& .${stepConnectorClasses.line}`]: {
+ borderColor: theme.palette.colors.blue,
+ },
+ },
+ [`& .${stepConnectorClasses.line}`]: {
+ borderColor: theme.palette.colors.grey,
+ borderTopWidth: 2,
+ },
+}));
+
+/**
+ * Istex themed step label
+ */
+const IstexStepLabel = styled(StepLabel)(() => ({
+ [`& .${stepLabelClasses.label}`]: {
+ [`&.${stepLabelClasses.completed}`]: {
+ color: colors.blue,
+ },
+ [`&.${stepLabelClasses.active}`]: {
+ color: colors.blue,
+ },
+ },
+}));
+
+/**
+ * Step Icon with Istex theme
+ * @param icon Default icon use
+ * @param completed Boolean indicating if we have completed the current step
+ * @param active Boolean indicating if we have currently on the current step
+ */
+const StepLabelIcon = ({ icon, completed, active }: StepIconProps) => {
+ const className = useMemo(() => {
+ if (completed || active) {
+ return 'processing-form-stepper-icon processing-form-stepper-icon-active';
+ }
+ return 'processing-form-stepper-icon';
+ }, [completed, active]);
+
+ if (completed) {
+ return (
+
+ L'adresse électronique n'est pas valide
+
+ ) : null}
+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+/**
+ * Mui Stepper with the Istex theme
+ */
+const ProcessingFormStepper = ({ step = 0 }: ProcessingFormStepperProps) => {
+ return (
+ {icon}
+
+
+ {stepEntry.title}
+
+ ))}
+
+
+ );
+};
+
+export default ProcessingFormStepper;
diff --git a/tdm-fe/src/app/components/form/scss/ProcessingFormCommon.scss b/tdm-fe/src/app/components/form/scss/ProcessingFormCommon.scss
new file mode 100644
index 0000000..dee3c31
--- /dev/null
+++ b/tdm-fe/src/app/components/form/scss/ProcessingFormCommon.scss
@@ -0,0 +1,14 @@
+.processing-form-field {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.processing-form-field-with-label {
+ display: flex;
+ flex-direction: column;
+
+ .processing-form-field-label {
+ min-height: 22px;
+ margin: 2px 8px 0;
+ }
+}
diff --git a/tdm-fe/src/app/components/form/scss/ProcessingFormConfiguration.scss b/tdm-fe/src/app/components/form/scss/ProcessingFormConfiguration.scss
new file mode 100644
index 0000000..9872d60
--- /dev/null
+++ b/tdm-fe/src/app/components/form/scss/ProcessingFormConfiguration.scss
@@ -0,0 +1,33 @@
+@import "../../../scss/colors";
+
+.processing-form-field-group {
+ margin-bottom: 16px !important;
+}
+
+#processing-form-wrapper-param,
+#processing-form-wrapper-label {
+ display: flex;
+ flex-direction: row;
+
+ #processing-form-wrapper-param-style,
+ #processing-form-wrapper-label-style {
+ width: 24px;
+ margin-left: 12px;
+ user-select: none;
+ border-left: solid #bdbdbd 1px;
+ }
+}
+
+#processing-form-wrapper-param {
+ margin-top: 8px;
+ margin-bottom: 8px;
+
+ #processing-form-wrapper-param-style {
+ height: 36px; // Base 28 px
+ margin-top: -8px;
+ margin-left: 12px;
+ border-bottom: solid #bdbdbd 1px;
+ border-bottom-left-radius: 8px;
+ }
+}
+
diff --git a/tdm-fe/src/app/components/form/scss/ProcessingFormStepper.scss b/tdm-fe/src/app/components/form/scss/ProcessingFormStepper.scss
new file mode 100644
index 0000000..294896c
--- /dev/null
+++ b/tdm-fe/src/app/components/form/scss/ProcessingFormStepper.scss
@@ -0,0 +1,17 @@
+@import "../../../scss/colors";
+
+.processing-form-stepper-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border: solid $grey 2px;
+ border-radius: 32px;
+
+ &.processing-form-stepper-icon-active {
+ color: $white;
+ background-color: $blue;
+ border-color: $blue;
+ }
+}
diff --git a/tdm-fe/src/app/components/layout/Header.scss b/tdm-fe/src/app/components/layout/Header.scss
new file mode 100644
index 0000000..9af9369
--- /dev/null
+++ b/tdm-fe/src/app/components/layout/Header.scss
@@ -0,0 +1,41 @@
+@import "../../scss/colors";
+
+#header {
+ background-image: url("/header-background.jpg");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+
+ #header-container {
+ box-sizing: border-box;
+ display: block;
+ width: 100%;
+ padding: 32px 16px 16px;
+ margin-right: auto;
+ margin-left: auto;
+ }
+
+ @media (min-width: 600px) {
+ #header-container {
+ padding-right: 24px;
+ padding-left: 24px;
+ }
+ }
+
+ #header-title {
+ display: inline-block;
+ margin: 0 0 0 16px;
+ font-size: 3.25rem;
+ font-weight: 400;
+ line-height: 6rem;
+ color: $white;
+ }
+
+ #header-subtitle {
+ margin: 0;
+ font-size: .875rem;
+ font-weight: 400;
+ line-height: 1.25;
+ color: $white;
+ }
+}
diff --git a/tdm-fe/src/app/components/layout/Header.tsx b/tdm-fe/src/app/components/layout/Header.tsx
new file mode 100644
index 0000000..d1070c6
--- /dev/null
+++ b/tdm-fe/src/app/components/layout/Header.tsx
@@ -0,0 +1,22 @@
+import '~/app/components/layout/Header.scss';
+import Link from '@mui/material/Link';
+import istexLogo from '/istex.png';
+
+const Header = () => {
+ return (
+
+
+ 
+
+ IA Factory
+ ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla non elit sit amet interdum. + Sed placerat ex nec eleifend tempor. Nunc porta non nulla id vehicula. Nulla diam nunc. +
+
+
+ );
+};
+
+export default CircularWaiting;
diff --git a/tdm-fe/src/app/components/progress/FileUpload.tsx b/tdm-fe/src/app/components/progress/FileUpload.tsx
new file mode 100644
index 0000000..bcb1acc
--- /dev/null
+++ b/tdm-fe/src/app/components/progress/FileUpload.tsx
@@ -0,0 +1,16 @@
+import Alert from '@mui/material/Alert';
+import CircularWaiting from '~/app/components/progress/CircularWaiting';
+
+export type FileUploadProps = {
+ showError?: boolean;
+};
+
+const FileUpload = ({ showError }: FileUploadProps) => {
+ if (!showError) {
+ return
+ {/* Markdown are set via innerHTML*/}
+
+ );
+};
+
+export default Markdown;
diff --git a/tdm-fe/src/app/components/traitment.tsx b/tdm-fe/src/app/components/traitment.tsx
deleted file mode 100644
index 2d4d1f5..0000000
--- a/tdm-fe/src/app/components/traitment.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-'use client';
-import Status from '@/app/shared/Status';
-import { DefaultApiFactory } from '@/generated';
-import EmailIcon from '@mui/icons-material/Email';
-import Factory from '@mui/icons-material/Factory';
-import FindReplaceIcon from '@mui/icons-material/FindReplace';
-import TroubleshootIcon from '@mui/icons-material/Troubleshoot';
-import { useEffect, useState } from 'react';
-import type { TraitmentStatusGet200Response } from '@/generated';
-import type React from 'react';
-
-const TraitmentComponent: React.FC<{ id: string }> = ({ id }) => {
- const [result, setResult] = useState
- {result?.message}
-
-= Status.WRAPPER_RUNNING ? 'primary' : 'disabled'}
- />
-
- En cours de conversion -
- {result.errorType === Status.WRAPPER_ERROR ? ( -
- )}
-
- );
-};
-
-export default TraitmentComponent;
diff --git a/tdm-fe/src/app/favicon.ico b/tdm-fe/src/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/tdm-fe/src/app/favicon.ico and /dev/null differ
diff --git a/tdm-fe/src/app/globals.css b/tdm-fe/src/app/globals.css
deleted file mode 100644
index 3491fa9..0000000
--- a/tdm-fe/src/app/globals.css
+++ /dev/null
@@ -1,33 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
- --foreground-rgb: 0, 0, 0;
- --background-start-rgb: 214, 219, 220;
- --background-end-rgb: 255, 255, 255;
-}
-
-
-body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(to bottom,
- transparent,
- rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
- height: 100vh;
-}
-
-.error {
- color: #d32f2f;
- font-size: small;
-}
-
-a {
- color: revert;
- text-decoration: revert;
-}
-
-.traitment {
- width: 100%;
- text-align: center;
-}
diff --git a/tdm-fe/src/app/layout.tsx b/tdm-fe/src/app/layout.tsx
deleted file mode 100644
index 2afa3e9..0000000
--- a/tdm-fe/src/app/layout.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Inter } from 'next/font/google';
-import type { Metadata } from 'next';
-import './globals.css';
-
-const inter = Inter({ subsets: ['latin'] });
-
-export const metadata: Metadata = {
- title: 'TDM',
- description: 'TDM CNRS INIST',
-};
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
- return (
-
- {children}
-
- );
-}
diff --git a/tdm-fe/src/app/page.tsx b/tdm-fe/src/app/page.tsx
deleted file mode 100644
index d1dc1f4..0000000
--- a/tdm-fe/src/app/page.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-'use client';
-import Enrichment from './components/enrichment';
-import TraitmentComponent from './components/traitment';
-import { DefaultApiFactory } from '@/generated/api';
-import { Alert, Button, TextField, LinearProgress } from '@mui/material';
-import Box from '@mui/material/Box';
-import Step from '@mui/material/Step';
-import StepLabel from '@mui/material/StepLabel';
-import Stepper from '@mui/material/Stepper';
-import mimeTypes from 'mime';
-import React from 'react';
-import type { Request, Traitment } from '@/generated/api';
-
-export type Props = {
- searchParams: {
- id: number;
- };
-};
-
-const Home: React.FC = () => {
- const [activeStep, setActiveStep] = React.useState(0);
- const [selectedWrapper, setWrapper] = React.useState-
- En cours de conversion -
- {result.errorType === Status.WRAPPER_ERROR ? ( -
-
- Erreur à l'appel du convertisseur -
- ) : (
- - Erreur à l'appel du convertisseur -
- = Status.ENRICHMENT_RUNNING
- ? 'primary'
- : 'disabled'
- }
- />
-
- En cours d'appel au traitement -
- {result.errorType === Status.ENRICHMENT_ERROR ? ( -
- )}
- - En cours d'appel au traitement -
- {result.errorType === Status.ENRICHMENT_ERROR ? ( -
-
- Erreur à l'appel du traitement -
- ) : (
- - Erreur à l'appel du traitement -
- = Status.WAITING_WEBHOOK
- ? 'primary'
- : 'disabled'
- }
- />
-
- En attente de la fin du traitement -
- {result.errorType === Status.FINISHED ? ( -
- )}
- - En attente de la fin du traitement -
- {result.errorType === Status.FINISHED ? ( -
-
- Terminé vous avez reçu un mail -
- ) : result.errorType === Status.FINISHED_ERROR ? (
- - Terminé vous avez reçu un mail -
-
- Une erreur est retournée par le webhook vérifiez vos mails -
- ) : null}
- - Une erreur est retournée par le webhook vérifiez vos mails -
+ {/* Visual stepper use to indicate the current step of the form */}
+
+ );
+};
+
+export default ProcessingCreationForm;
diff --git a/tdm-fe/src/app/pages/ProcessingStatus.tsx b/tdm-fe/src/app/pages/ProcessingStatus.tsx
new file mode 100644
index 0000000..4aca4ef
--- /dev/null
+++ b/tdm-fe/src/app/pages/ProcessingStatus.tsx
@@ -0,0 +1,109 @@
+import '~/app/pages/scss/ProcessingStatus.scss';
+import Timeline from '@mui/lab/Timeline';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import StatusTimeline from '~/app/components/progress/StatusTimeline';
+import { status } from '~/app/services/status/status';
+import Status from '~/app/shared/Status';
+
+const ProcessingStatus = () => {
+ const params = useParams();
+
+ const id = useMemo(() => {
+ // Check if not nullish, if id exist this one is a md5
+ if (params.id) {
+ return params.id;
+ }
+ return null;
+ }, [params.id]);
+
+ const { data } = useQuery({
+ queryKey: ['status', id],
+ queryFn: () => {
+ if (!id) {
+ return;
+ }
+
+ return status(id);
+ },
+ // Do pulling to update the page
+ refetchInterval: (query) => {
+ const stateData = query.state.data;
+ if (
+ stateData === undefined ||
+ stateData === Status.WRAPPER_ERROR ||
+ stateData === Status.ENRICHMENT_ERROR ||
+ stateData === Status.FINISHED_ERROR ||
+ stateData === Status.FINISHED
+ ) {
+ return undefined;
+ }
+
+ if (stateData === Status.WRAPPER_RUNNING || stateData === Status.WAITING_WEBHOOK) {
+ return 1000 * 30; // 30 Secs
+ }
+
+ return 1000 * 4; // 4 Secs
+ },
+ });
+
+ if (data === undefined) {
+ return
+ {/* Configuration step */}
+ {currentStep === PROCESSING_CONFIGURATION_STEP ? (
+
+ Not found
; // Todo faire un page 404 + } + + return ( +
+
+ Status.UNKNOWN}
+ text="Initialisé"
+ />
+
+ Status.STARTING}
+ text="Démarrage"
+ />
+
+ Status.WRAPPER_ERROR}
+ isOnError={data === Status.WRAPPER_ERROR}
+ text="Conversion"
+ />
+
+ Status.ENRICHMENT_ERROR}
+ isOnError={data === Status.ENRICHMENT_ERROR}
+ text="Lancement de l'enrichissement"
+ />
+
+ Status.WAITING_WEBHOOK}
+ text="En attente du résultat"
+ />
+
+ Status.PROCESSING_WEBHOOK}
+ text="Récupération du résultat"
+ />
+
+
+
+ );
+};
+
+export default ProcessingStatus;
diff --git a/tdm-fe/src/app/pages/Root.tsx b/tdm-fe/src/app/pages/Root.tsx
new file mode 100644
index 0000000..d23866e
--- /dev/null
+++ b/tdm-fe/src/app/pages/Root.tsx
@@ -0,0 +1,5 @@
+const Root = () => {
+ return + Statut du traitement : {id} +
+Root page
; +}; + +export default Root; diff --git a/tdm-fe/src/app/pages/scss/ProcessingCreationForm.scss b/tdm-fe/src/app/pages/scss/ProcessingCreationForm.scss new file mode 100644 index 0000000..84c9844 --- /dev/null +++ b/tdm-fe/src/app/pages/scss/ProcessingCreationForm.scss @@ -0,0 +1,18 @@ +#processing-form { + margin-top: 40px; + #processing-form-content { + margin-top: 40px; + margin-right: 10%; + margin-left: 10%; + + #processing-form-navigation { + display: flex; + flex-direction: row; + margin-top: 40px; + } + + #processing-form-navigation > button:first-child { + margin-right: auto; + } + } +} diff --git a/tdm-fe/src/app/pages/scss/ProcessingStatus.scss b/tdm-fe/src/app/pages/scss/ProcessingStatus.scss new file mode 100644 index 0000000..649455d --- /dev/null +++ b/tdm-fe/src/app/pages/scss/ProcessingStatus.scss @@ -0,0 +1,3 @@ +#processing-status-title { + text-align: center; +} diff --git a/tdm-fe/src/app/provider/ThemeProvider.tsx b/tdm-fe/src/app/provider/ThemeProvider.tsx new file mode 100644 index 0000000..0218ce8 --- /dev/null +++ b/tdm-fe/src/app/provider/ThemeProvider.tsx @@ -0,0 +1,34 @@ +import { default as MuiThemeProvider } from '@mui/material/styles/ThemeProvider'; +import { useEffect } from 'react'; +import type { PropsWithChildren } from 'react'; +import theme, { colors } from '~/app/shared/theme'; + +export type ThemeProviderType = PropsWithChildren; + +const injectCssVariable = () => { + const style = document.documentElement.style; + style.setProperty('--very-dark-green', colors.veryDarkGreen); + style.setProperty('--dark-green', colors.darkGreen); + style.setProperty('--light-green', colors.lightGreen); + style.setProperty('--very-light-green', colors.veryLightGreen); + style.setProperty('--blue', colors.blue); + style.setProperty('--variant-blue', colors.variantBlue); + style.setProperty('--light-blue', colors.lightBlue); + style.setProperty('--very-light-blue', colors.veryLightBlue); + style.setProperty('--light-red', colors.lightRed); + style.setProperty('--grey', colors.grey); + style.setProperty('--light-grey', colors.lightGrey); + style.setProperty('--dark-black', colors.darkBlack); + style.setProperty('--light-black', colors.lightBlack); + style.setProperty('--very-light-black', colors.veryLightBlack); + style.setProperty('--red', colors.red); + style.setProperty('--white', colors.white); +}; + +const ThemeProvider = ({ children }: ThemeProviderType) => { + useEffect(injectCssVariable, []); + + return