From 7199e2c15838d78fedd3c6127beddf1656dbeae2 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Thu, 15 Sep 2022 15:38:06 +0200 Subject: feat(web/ui): Redesign projects page This change updates the design of the projects page to use a gallery overview. --- .../opendc-web-ui/src/pages/projects/index.js | 74 +++++++++++++++++----- 1 file changed, 57 insertions(+), 17 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/pages/projects') diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js index 40792275..97ff105c 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/index.js +++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js @@ -20,14 +20,25 @@ * SOFTWARE. */ +import { PlusIcon } from '@patternfly/react-icons' import React, { useMemo, useState } from 'react' import Head from 'next/head' import ProjectFilterPanel from '../../components/projects/FilterPanel' import { AppPage } from '../../components/AppPage' -import { PageSection, PageSectionVariants, Text, TextContent } from '@patternfly/react-core' -import { useProjects, useDeleteProject } from '../../data/project' -import ProjectTable from '../../components/projects/ProjectTable' -import NewProject from '../../components/projects/NewProject' +import { + PageSection, + PageSectionVariants, + Title, + Toolbar, + ToolbarItem, + ToolbarContent, + Button, + TextContent, + Text, +} from '@patternfly/react-core' +import ProjectCollection from '../../components/projects/ProjectCollection' +import TextInputModal from '../../components/util/modals/TextInputModal' +import { useProjects, useDeleteProject, useNewProject } from '../../data/project' const getVisibleProjects = (projects, filter) => { switch (filter) { @@ -48,26 +59,55 @@ function Projects() { const visibleProjects = useMemo(() => getVisibleProjects(projects ?? [], filter), [projects, filter]) const { mutate: deleteProject } = useDeleteProject() + const { mutate: addProject } = useNewProject() + + const [isProjectCreationModalVisible, setProjectCreationModalVisible] = useState(false) + const onProjectCreation = (name) => { + if (name) { + addProject({ name }) + } + setProjectCreationModalVisible(false) + } return ( My Projects - OpenDC - - - My Projects - - - - deleteProject(project.id)} - /> - +
+ + Welcome + + + Find all your personal and shared projects + + + + + + + + + + + + deleteProject(project.id)} + onCreate={() => setProjectCreationModalVisible(true)} + /> + +
) -- cgit v1.2.3