From 4de71f30b4c71771432a0843c52f41b0ca25a33a Mon Sep 17 00:00:00 2001 From: gilles-arnout Date: Mon, 6 May 2024 10:41:32 +0200 Subject: [PATCH 1/8] commit before pull --- frontend/app/[locale]/layout.tsx | 2 +- .../[project_id]/submit/SubmitDetailsPage.tsx | 126 ++++++++++++++++++ .../[project_id]/submit/SubmitPage.tsx | 106 --------------- .../project/[project_id]/submit/page.tsx | 6 +- 4 files changed, 130 insertions(+), 110 deletions(-) create mode 100644 frontend/app/[locale]/project/[project_id]/submit/SubmitDetailsPage.tsx delete mode 100644 frontend/app/[locale]/project/[project_id]/submit/SubmitPage.tsx diff --git a/frontend/app/[locale]/layout.tsx b/frontend/app/[locale]/layout.tsx index 18414e88..b4e84055 100644 --- a/frontend/app/[locale]/layout.tsx +++ b/frontend/app/[locale]/layout.tsx @@ -18,7 +18,7 @@ export default function RootLayout(props: React.PropsWithChildren<{}>) { -
+
{children}
diff --git a/frontend/app/[locale]/project/[project_id]/submit/SubmitDetailsPage.tsx b/frontend/app/[locale]/project/[project_id]/submit/SubmitDetailsPage.tsx new file mode 100644 index 00000000..51516ec0 --- /dev/null +++ b/frontend/app/[locale]/project/[project_id]/submit/SubmitDetailsPage.tsx @@ -0,0 +1,126 @@ +"use client" + +import React, {useEffect, useState} from 'react'; +import {useTranslation} from "react-i18next"; +import {Grid, LinearProgress, ThemeProvider, Typography} from "@mui/material"; +import {getProject, Project, uploadSubmissionFile} from '@lib/api'; +import baseTheme from "@styles/theme"; + +interface SubmitDetailsPageProps { + project_id: number; +} + +const SubmitDetailsPage: React.FC = ({project_id}) => { + const {t} = useTranslation(); + + const [projectData, setProjectData] = useState() + const [paths, setPaths] = useState([]); + const [submitted, setSubmitted] = useState("no"); + const [loadingProject, setLoadingProject] = useState(true); + + function folderAdded(event: any) { + let newpaths: string[] = [] + for (const file of event.target.files) { + let text: string = file.webkitRelativePath; + if (text.includes("/")) { + text = text.substring((text.indexOf("/") ?? 0) + 1, text.length); + } + newpaths.push(text); + } + setPaths(newpaths); + } + + useEffect(() => { + const fetchProject = async () => { + try { + const project: Project = await getProject(+project_id); + setProjectData(project) + } catch (e) { + console.error(e) + } + } + fetchProject().then(() => setLoadingProject(false)); + }, [project_id]); + + if (loadingProject) { + return ; + } + + return ( + + + + + + {t('submit_project')}: {projectData?.name} + + + {projectData?.description} + + + {t('files')} + + + +
{ + setSubmitted(await uploadSubmissionFile(e, project_id)); + }} encType="multipart/form-data"> + + + + + +
    + +
      + {paths.map(path => ( +
    • {path}
      • + ))} +
    + {submitted === "yes" && {t('submitted')}} + {submitted === "error" && {t('submission_error')}} + {submitted !== "yes" && + + } +
    + +
    +     + ); +} + +export default SubmitDetailsPage; diff --git a/frontend/app/[locale]/project/[project_id]/submit/SubmitPage.tsx b/frontend/app/[locale]/project/[project_id]/submit/SubmitPage.tsx deleted file mode 100644 index 959843a9..00000000 --- a/frontend/app/[locale]/project/[project_id]/submit/SubmitPage.tsx +++ /dev/null @@ -1,106 +0,0 @@ -"use client" - -import {useState, useEffect, useRef} from 'react'; -import {useTranslation} from "react-i18next"; -import {Box, Typography} from "@mui/material"; -import AddButton from "@app/[locale]/components/AddButton"; -import { Project, getProject } from '@lib/api'; -import { uploadSubmissionFile } from "@lib/api"; - -import { use } from 'chai'; - -export default function SubmitPage({project_id}: { project_id: string }){ - const { t } = useTranslation(); - - const [projectData, setProjectData] = useState() - const [paths, setPaths] = useState([]); - const [submitted, setSubmitted] = useState("no"); - - - function folderAdded(event : any){ - let newpaths : string[] = [] - for (const file of event.target.files) { - let text : string = file.webkitRelativePath; - if (text.includes("/")) { - text = text.substring((text.indexOf("/")??0)+1, text.length); - } - newpaths.push(text); - } - setPaths(newpaths); - } - - useEffect(() => { - const fetchProject = async () => { - try { - const project: Project = await getProject(+project_id); - setProjectData(project) - } catch (e) { - console.error(e) - } - } - fetchProject(); - }, [project_id]); - - - return ( - - - {t('submit_project')}: {projectData?.name} - - - {projectData?.description} - - - {t('files')} - - - -
    {setSubmitted(await uploadSubmissionFile(e, project_id));}} encType="multipart/form-data"> - - - - - -
      - -
        - {paths.map(path => ( -
      • {path}
        • - ))} -
      - {submitted === "yes" && {t('submitted')}} - {submitted === "error" && {t('submission_error')}} - {submitted !== "yes" && - - } -
      - -       - ); -} \ No newline at end of file diff --git a/frontend/app/[locale]/project/[project_id]/submit/page.tsx b/frontend/app/[locale]/project/[project_id]/submit/page.tsx index c68507e5..a55c9955 100644 --- a/frontend/app/[locale]/project/[project_id]/submit/page.tsx +++ b/frontend/app/[locale]/project/[project_id]/submit/page.tsx @@ -3,7 +3,7 @@ import initTranslations from "@app/i18n"; import TranslationsProvider from "@app/[locale]/components/TranslationsProvider"; import NavBar from "@app/[locale]/components/NavBar"; import Footer from "@app/[locale]/components/Footer"; -import SubmitPage from './SubmitPage'; +import SubmitDetailsPage from './SubmitDetailsPage'; const i18nNamespaces = ['common'] export default async function Course({params: {locale, project_id}, searchParams: {token}}: @@ -21,9 +21,9 @@ export default async function Course({params: {locale, project_id}, searchParams > - + - + ) From 81f5a5f470a3f5c8139c04134e51f1a52a8597b1 Mon Sep 17 00:00:00 2001 From: gilles-arnout Date: Mon, 6 May 2024 11:15:31 +0200 Subject: [PATCH 2/8] beginning refactor project-submit-page --- .../[project_id]/submit/SubmitDetailsPage.tsx | 191 ++++++++++-------- 1 file changed, 107 insertions(+), 84 deletions(-) diff --git a/frontend/app/[locale]/project/[project_id]/submit/SubmitDetailsPage.tsx b/frontend/app/[locale]/project/[project_id]/submit/SubmitDetailsPage.tsx index 51516ec0..7627d710 100644 --- a/frontend/app/[locale]/project/[project_id]/submit/SubmitDetailsPage.tsx +++ b/frontend/app/[locale]/project/[project_id]/submit/SubmitDetailsPage.tsx @@ -2,9 +2,13 @@ import React, {useEffect, useState} from 'react'; import {useTranslation} from "react-i18next"; -import {Grid, LinearProgress, ThemeProvider, Typography} from "@mui/material"; +import {Grid, Button, Divider, Card, IconButton, CardContent, LinearProgress, ThemeProvider, Typography} from "@mui/material"; import {getProject, Project, uploadSubmissionFile} from '@lib/api'; import baseTheme from "@styles/theme"; +import ProjectReturnButton from "@app/[locale]/components/ProjectReturnButton"; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import ExpandLessIcon from '@mui/icons-material/ExpandLess'; +import PublishIcon from '@mui/icons-material/Publish'; interface SubmitDetailsPageProps { project_id: number; @@ -17,18 +21,8 @@ const SubmitDetailsPage: React.FC = ({project_id}) => { const [paths, setPaths] = useState([]); const [submitted, setSubmitted] = useState("no"); const [loadingProject, setLoadingProject] = useState(true); - - function folderAdded(event: any) { - let newpaths: string[] = [] - for (const file of event.target.files) { - let text: string = file.webkitRelativePath; - if (text.includes("/")) { - text = text.substring((text.indexOf("/") ?? 0) + 1, text.length); - } - newpaths.push(text); - } - setPaths(newpaths); - } + const [isExpanded, setIsExpanded] = useState(false); + const previewLength = 300; useEffect(() => { const fetchProject = async () => { @@ -42,83 +36,112 @@ const SubmitDetailsPage: React.FC = ({project_id}) => { fetchProject().then(() => setLoadingProject(false)); }, [project_id]); + function folderAdded(event: any) { + let newpaths: string[] = [] + for (const file of event.target.files) { + let text: string = file.webkitRelativePath; + if (text.includes("/")) { + text = text.substring((text.indexOf("/") ?? 0) + 1, text.length); + } + newpaths.push(text); + } + setPaths(newpaths); + } + if (loadingProject) { return ; } + const toggleDescription = () => { + setIsExpanded(!isExpanded); + } + return ( - - - - - {t('submit_project')}: {projectData?.name} - - - {projectData?.description} - - - {t('files')} - - - -
      { - setSubmitted(await uploadSubmissionFile(e, project_id)); - }} encType="multipart/form-data"> - - - - - -
        - -
          - {paths.map(path => ( -
        • {path}
          • - ))} -
        - {submitted === "yes" && {t('submitted')}} - {submitted === "error" && {t('submission_error')}} - {submitted !== "yes" && - - } -
        - - + + + + + + + + + {t('submit_project')}: {projectData?.name} + + + + {projectData?.description && projectData?.description.length > previewLength && !isExpanded + ? `${projectData?.description.substring(0, previewLength)}...` + : projectData?.description + } + + {projectData?.description && projectData?.description.length > previewLength && ( + + {isExpanded ? : } + + )} + + {t('files')} + + + +
        { + setSubmitted(await uploadSubmissionFile(e, project_id)); + }} encType="multipart/form-data"> + + + + + +
          + +
            + {paths.map(path => ( +
          • {path}
            • + ))} +
          + {submitted === "yes" && {t('submitted')}} + {submitted === "error" && {t('submission_error')}} + {submitted !== "yes" && + + } +
          +           +           +           +           ); } From 9534889af7cf8db306afa21d19fe8747ff6f91fd Mon Sep 17 00:00:00 2001 From: gilles-arnout Date: Mon, 6 May 2024 14:54:42 +0200 Subject: [PATCH 3/8] small fixes --- .../app/[locale]/project/[project_id]/submit/page.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/frontend/app/[locale]/project/[project_id]/submit/page.tsx b/frontend/app/[locale]/project/[project_id]/submit/page.tsx index a55c9955..70f6ea8e 100644 --- a/frontend/app/[locale]/project/[project_id]/submit/page.tsx +++ b/frontend/app/[locale]/project/[project_id]/submit/page.tsx @@ -2,17 +2,13 @@ import React from 'react'; import initTranslations from "@app/i18n"; import TranslationsProvider from "@app/[locale]/components/TranslationsProvider"; import NavBar from "@app/[locale]/components/NavBar"; -import Footer from "@app/[locale]/components/Footer"; -import SubmitDetailsPage from './SubmitDetailsPage'; +import SubmitDetailsPage from '@app/[locale]/components/SubmitDetailsPage'; const i18nNamespaces = ['common'] export default async function Course({params: {locale, project_id}, searchParams: {token}}: { params: { locale: any, project_id: string }, searchParams: { token: string } }) { const {t, resources} = await initTranslations(locale, i18nNamespaces) - const project_selected = false - - const desc_mock = "TODO: zet hier indieninstructies van het project, en misschien ook nog groepnummer, ook vorige indieningen een samenvatting ofzo" return ( - + From 6311c047f02b76147747c408084ae99170822d3d Mon Sep 17 00:00:00 2001 From: gilles-arnout Date: Thu, 9 May 2024 10:49:24 +0200 Subject: [PATCH 4/8] creating tree for file structure --- .../[locale]/components/SubmitDetailsPage.tsx | 141 +++++ frontend/app/[locale]/components/Tree.tsx | 68 +++ frontend/app/[locale]/components/TreeNode.tsx | 48 ++ package-lock.json | 510 +++++++++++++++++- package.json | 2 + 5 files changed, 762 insertions(+), 7 deletions(-) create mode 100644 frontend/app/[locale]/components/SubmitDetailsPage.tsx create mode 100644 frontend/app/[locale]/components/Tree.tsx create mode 100644 frontend/app/[locale]/components/TreeNode.tsx diff --git a/frontend/app/[locale]/components/SubmitDetailsPage.tsx b/frontend/app/[locale]/components/SubmitDetailsPage.tsx new file mode 100644 index 00000000..6e39cd8a --- /dev/null +++ b/frontend/app/[locale]/components/SubmitDetailsPage.tsx @@ -0,0 +1,141 @@ +"use client" + +import React, {useEffect, useState} from 'react'; +import {useTranslation} from "react-i18next"; +import {Grid, Button, Divider, Box, Input, Card, IconButton, CardContent, LinearProgress, ThemeProvider, Typography} from "@mui/material"; +import {getProject, Project, uploadSubmissionFile} from '@lib/api'; +import baseTheme from "@styles/theme"; +import ProjectReturnButton from "@app/[locale]/components/ProjectReturnButton"; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import ExpandLessIcon from '@mui/icons-material/ExpandLess'; +import PublishIcon from '@mui/icons-material/Publish'; +import Tree from "@app/[locale]/components/Tree"; + +interface SubmitDetailsPageProps { + locale: any; + project_id: number; +} + +const SubmitDetailsPage: React.FC = ({locale, project_id}) => { + const {t} = useTranslation(); + + const [projectData, setProjectData] = useState() + const [paths, setPaths] = useState([]); + const [submitted, setSubmitted] = useState("no"); + const [loadingProject, setLoadingProject] = useState(true); + const [isExpanded, setIsExpanded] = useState(false); + const previewLength = 300; + + const toggleDescription = () => { + setIsExpanded(!isExpanded); + } + + const handleSubmit = async (e) => { + setSubmitted(await uploadSubmissionFile(e, project_id)); + } + + useEffect(() => { + const fetchProject = async () => { + try { + const project: Project = await getProject(+project_id); + setProjectData(project) + } catch (e) { + console.error(e) + } + } + fetchProject().then(() => setLoadingProject(false)); + }, [project_id]); + + function folderAdded(event: any) { + let newpaths: string[] = [] + for (const file of event.target.files) { + let text: string = file.webkitRelativePath; + if (text.includes("/")) { + text = text.substring((text.indexOf("/") ?? 0) + 1, text.length); + } + newpaths.push(text); + } + setPaths(newpaths); + } + + if (loadingProject) { + return ; + } + + return ( + + + + + + + + + + {t('submit_project')}: {projectData?.name} + + + + {projectData?.description && projectData?.description.length > previewLength && !isExpanded + ? `${projectData?.description.substring(0, previewLength)}...` + : projectData?.description + } + + {projectData?.description && projectData?.description.length > previewLength && ( + + {isExpanded ? : } + + )} + + + + + + + + + {submitted === 'yes' && {t('submitted')}} + {submitted === 'error' && {t('submission_error')}} + {submitted !== 'yes' && ( + + )} + + + + + + + ); +} + +export default SubmitDetailsPage; diff --git a/frontend/app/[locale]/components/Tree.tsx b/frontend/app/[locale]/components/Tree.tsx new file mode 100644 index 00000000..86e72846 --- /dev/null +++ b/frontend/app/[locale]/components/Tree.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { List } from '@mui/material'; +import TreeNode from '@app/[locale]/components/TreeNode'; + +interface TreeNodeData { + name: string; + level?: number; + isLeaf?: boolean; + children?: TreeNodeData[]; +} + +interface TreeNodeDataMap { + [key: string]: TreeNodeData; +} + +function createTreeStructure(paths: string[]): TreeNodeDataMap { + const tree: TreeNodeDataMap = {}; + + paths.forEach((path) => { + const parts = path.split('/'); + let currentLevel = tree; + + parts.forEach((part, index) => { + if (!currentLevel[part]) { + currentLevel[part] = { + name: part, + children: {}, + } as TreeNodeData; + } + if (index === parts.length - 1) { + currentLevel[part].isLeaf = true; + } else { + currentLevel = currentLevel[part].children as TreeNodeDataMap; + } + }); + }); + + return tree; +} + +function convertToNodes(tree: TreeNodeDataMap, level: number = 0): TreeNodeData[] { + return Object.values(tree).map((node) => ({ + name: node.name, + level: level, + isLeaf: node.isLeaf ?? false, + children: node.children ? convertToNodes(node.children as TreeNodeDataMap, level + 1) : [], + })); +} + +// Tree component +interface TreeProps { + paths: string[]; +} + +const Tree: React.FC = ({ paths }) => { + const treeData = createTreeStructure(paths); + const nodes = convertToNodes(treeData); + + return ( + + {nodes.map((node) => ( + + ))} + + ); +}; + +export default Tree; diff --git a/frontend/app/[locale]/components/TreeNode.tsx b/frontend/app/[locale]/components/TreeNode.tsx new file mode 100644 index 00000000..f0ce4c1e --- /dev/null +++ b/frontend/app/[locale]/components/TreeNode.tsx @@ -0,0 +1,48 @@ +import React, {useEffect, useState} from 'react'; +import {Collapse, IconButton, List, ListItem, ListItemText} from '@mui/material'; +import ExpandLess from '@mui/icons-material/ExpandLess'; +import ExpandMore from '@mui/icons-material/ExpandMore'; + +interface TreeNodeProps { + node: { + name: string; + level: number; + isLeaf: boolean; + children: TreeNodeProps['node'][]; + }; + initiallyOpen?: boolean; +} + +const TreeNode: React.FC = ({node, initiallyOpen = false}) => { + const [open, setOpen] = useState(initiallyOpen); + + const handleClick = () => setOpen(!open); + + useEffect(() => { + setOpen(initiallyOpen); + }, [initiallyOpen]); + + return ( + <> + + + {!node.isLeaf && ( + + {open ? : } + + )} + + {!node.isLeaf && ( + + + {node.children.map((child) => ( + + ))} + + + )} + + ); +}; + +export default TreeNode; diff --git a/package-lock.json b/package-lock.json index 452abe47..197a2cdf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,8 @@ "packages": { "": { "dependencies": { + "@mui/icons-material": "^5.15.17", + "@mui/lab": "^5.0.0-alpha.170", "jszip": "^3.10.1" }, "devDependencies": { @@ -556,7 +558,6 @@ "version": "7.24.4", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz", "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==", - "dev": true, "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -681,6 +682,72 @@ "ms": "^2.1.1" } }, + "node_modules/@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "dependencies": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, + "node_modules/@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + }, + "node_modules/@floating-ui/core": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz", + "integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==", + "dependencies": { + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz", + "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==", + "dependencies": { + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz", + "integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==", + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz", + "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==" + }, "node_modules/@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -1050,6 +1117,302 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@mui/base": { + "version": "5.0.0-beta.40", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz", + "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@floating-ui/react-dom": "^2.0.8", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@popperjs/core": "^2.11.8", + "clsx": "^2.1.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/core-downloads-tracker": { + "version": "5.15.17", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.17.tgz", + "integrity": "sha512-DVAejDQkjNnIac7MfP8sLzuo7fyrBPxNdXe+6bYqOqg1z2OPTlfFAejSNzWe7UenRMuFu9/AyFXj/X2vN2w6dA==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + } + }, + "node_modules/@mui/icons-material": { + "version": "5.15.17", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.17.tgz", + "integrity": "sha512-xVzl2De7IY36s/keHX45YMiCpsIx3mNv2xwDgtBkRSnZQtVk+Gqufwj1ktUxEyjzEhBl0+PiNJqYC31C+n1n6A==", + "dependencies": { + "@babel/runtime": "^7.23.9" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@mui/material": "^5.0.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/lab": { + "version": "5.0.0-alpha.170", + "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.170.tgz", + "integrity": "sha512-0bDVECGmrNjd3+bLdcLiwYZ0O4HP5j5WSQm5DV6iA/Z9kr8O6AnvZ1bv9ImQbbX7Gj3pX4o43EKwCutj3EQxQg==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/base": "5.0.0-beta.40", + "@mui/system": "^5.15.15", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "clsx": "^2.1.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@mui/material": ">=5.15.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material": { + "version": "5.15.17", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.17.tgz", + "integrity": "sha512-ru/MLvTkCh0AZXmqwIpqGTOoVBS/sX48zArXq/DvktxXZx4fskiRA2PEc7Rk5ZlFiZhKh4moL4an+l8zZwq49Q==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/base": "5.0.0-beta.40", + "@mui/core-downloads-tracker": "^5.15.17", + "@mui/system": "^5.15.15", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1", + "react-is": "^18.2.0", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/private-theming": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz", + "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/utils": "^5.15.14", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/styled-engine": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz", + "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@emotion/cache": "^11.11.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/system": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz", + "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/private-theming": "^5.15.14", + "@mui/styled-engine": "^5.15.14", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/types": { + "version": "7.2.14", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz", + "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==", + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz", + "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@types/prop-types": "^15.7.11", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@sinclair/typebox": { "version": "0.27.8", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", @@ -1254,6 +1617,30 @@ "undici-types": "~5.26.4" } }, + "node_modules/@types/prop-types": { + "version": "15.7.12", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", + "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==" + }, + "node_modules/@types/react": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz", + "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==", + "peer": true, + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-transition-group": { + "version": "4.4.10", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", + "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==", + "peer": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/sinonjs__fake-timers": { "version": "8.1.1", "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz", @@ -1964,6 +2351,14 @@ "node": ">=12" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -2088,6 +2483,11 @@ "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==", "dev": true }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + }, "node_modules/cypress": { "version": "13.7.2", "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.7.2.tgz", @@ -2307,6 +2707,16 @@ "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==", "dev": true }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/ecc-jsbn": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", @@ -3888,8 +4298,7 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "node_modules/js-yaml": { "version": "3.14.1", @@ -4160,6 +4569,17 @@ "node": ">=8" } }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -4367,6 +4787,14 @@ "node": ">=8" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-inspect": { "version": "1.13.1", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz", @@ -4664,6 +5092,21 @@ "node": ">= 6" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/prop-types/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/proxy-from-env": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz", @@ -4733,11 +5176,51 @@ "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==", "dev": true }, + "node_modules/react": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" + }, + "peerDependencies": { + "react": "^18.3.1" + } + }, "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", - "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", - "dev": true + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } }, "node_modules/readable-stream": { "version": "2.3.8", @@ -4769,8 +5252,7 @@ "node_modules/regenerator-runtime": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", - "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", - "dev": true + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" }, "node_modules/request-progress": { "version": "3.0.0", @@ -4887,6 +5369,15 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "node_modules/scheduler": { + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + } + }, "node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", @@ -5160,6 +5651,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, "node_modules/supports-color": { "version": "8.1.1", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", diff --git a/package.json b/package.json index 84e1b0a5..44d771ec 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,8 @@ "ts-jest": "^29.1.2" }, "dependencies": { + "@mui/icons-material": "^5.15.17", + "@mui/lab": "^5.0.0-alpha.170", "jszip": "^3.10.1" } } From d5be299ca6770d8c99a95e891dd1b7923bf20cf9 Mon Sep 17 00:00:00 2001 From: gilles-arnout Date: Thu, 9 May 2024 11:41:03 +0200 Subject: [PATCH 5/8] finish refactor submit-page --- .../[locale]/components/SubmitDetailsPage.tsx | 80 +++++++++++++++---- frontend/locales/en/common.json | 2 +- frontend/locales/nl/common.json | 2 +- 3 files changed, 67 insertions(+), 17 deletions(-) diff --git a/frontend/app/[locale]/components/SubmitDetailsPage.tsx b/frontend/app/[locale]/components/SubmitDetailsPage.tsx index 6e39cd8a..380f0730 100644 --- a/frontend/app/[locale]/components/SubmitDetailsPage.tsx +++ b/frontend/app/[locale]/components/SubmitDetailsPage.tsx @@ -2,13 +2,27 @@ import React, {useEffect, useState} from 'react'; import {useTranslation} from "react-i18next"; -import {Grid, Button, Divider, Box, Input, Card, IconButton, CardContent, LinearProgress, ThemeProvider, Typography} from "@mui/material"; +import { + Box, + Button, + Card, + CardContent, + Divider, + Grid, + IconButton, + Input, + LinearProgress, + ThemeProvider, + Typography +} from "@mui/material"; import {getProject, Project, uploadSubmissionFile} from '@lib/api'; import baseTheme from "@styles/theme"; import ProjectReturnButton from "@app/[locale]/components/ProjectReturnButton"; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandLessIcon from '@mui/icons-material/ExpandLess'; import PublishIcon from '@mui/icons-material/Publish'; +import CheckCircleIcon from '@mui/icons-material/CheckCircle'; +import ErrorIcon from '@mui/icons-material/Error'; import Tree from "@app/[locale]/components/Tree"; interface SubmitDetailsPageProps { @@ -91,39 +105,75 @@ const SubmitDetailsPage: React.FC = ({locale, project_id - {isExpanded ? : } + {isExpanded ? : } )} + + {t('files')} + - - - + - {submitted === 'yes' && {t('submitted')}} - {submitted === 'error' && {t('submission_error')}} + {submitted === 'yes' && ( + + + + {t('submitted')} + + + )} + {submitted === 'error' && ( + + + + {t('submission_error')} + + + )} {submitted !== 'yes' && ( - } - - - - - - - ); -} - -export default SubmitDetailsPage; From 56f8d70404d661055a195fb05eddf4cbc08e0ac5 Mon Sep 17 00:00:00 2001 From: gilles-arnout Date: Thu, 9 May 2024 12:30:52 +0200 Subject: [PATCH 8/8] small fix --- frontend/app/[locale]/components/SubmitDetailsPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/app/[locale]/components/SubmitDetailsPage.tsx b/frontend/app/[locale]/components/SubmitDetailsPage.tsx index 380f0730..1bb1a4d1 100644 --- a/frontend/app/[locale]/components/SubmitDetailsPage.tsx +++ b/frontend/app/[locale]/components/SubmitDetailsPage.tsx @@ -84,7 +84,7 @@ const SubmitDetailsPage: React.FC = ({locale, project_id - + = ({locale, project_id fontWeight: 'medium' }} > - {t('submit_project')}: {projectData?.name} + {projectData?.name}