diff options
| author | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2022-09-15 15:38:06 +0200 |
|---|---|---|
| committer | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2022-09-20 16:07:06 +0200 |
| commit | 7199e2c15838d78fedd3c6127beddf1656dbeae2 (patch) | |
| tree | 8ded3dcd92a8d8c571c0f5c80e635ae4e527d1af /opendc-web/opendc-web-ui/src/pages | |
| parent | 24b857ae580fcbea441e7cb91bc7aba681fc6c8b (diff) | |
feat(web/ui): Redesign projects page
This change updates the design of the projects page to use a gallery
overview.
Diffstat (limited to 'opendc-web/opendc-web-ui/src/pages')
| -rw-r--r-- | opendc-web/opendc-web-ui/src/pages/projects/index.js | 74 |
1 files changed, 57 insertions, 17 deletions
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 ( <AppPage> <Head> <title>My Projects - OpenDC</title> </Head> - <PageSection variant={PageSectionVariants.light}> - <TextContent> - <Text component="h1">My Projects</Text> - </TextContent> - </PageSection> <PageSection variant={PageSectionVariants.light} isFilled> - <ProjectFilterPanel onSelect={setFilter} activeFilter={filter} /> - <ProjectTable - status={status} - isFiltering={filter !== 'SHOW_ALL'} - projects={visibleProjects} - onDelete={(project) => deleteProject(project.id)} - /> - <NewProject /> + <div className="pf-u-mx-auto pf-u-max-width" style={{ '--pf-u-max-width--MaxWidth': '100ch' }}> + <Title className="pf-u-mt-xl-on-md" headingLevel="h1" size="4xl"> + Welcome + </Title> + <TextContent> + <Text component="p">Find all your personal and shared projects</Text> + </TextContent> + <Toolbar inset={{ default: 'insetNone' }}> + <ToolbarContent> + <ToolbarItem> + <ProjectFilterPanel onSelect={setFilter} activeFilter={filter} /> + </ToolbarItem> + <ToolbarItem alignment={{ default: 'alignRight' }}> + <Button icon={<PlusIcon />} onClick={() => setProjectCreationModalVisible(true)}> + Create Project + </Button> + </ToolbarItem> + </ToolbarContent> + </Toolbar> + <ProjectCollection + status={status} + isFiltering={filter !== 'SHOW_ALL'} + projects={visibleProjects} + onDelete={(project) => deleteProject(project.id)} + onCreate={() => setProjectCreationModalVisible(true)} + /> + <TextInputModal + title="New Project" + label="Project name" + isOpen={isProjectCreationModalVisible} + callback={onProjectCreation} + /> + </div> </PageSection> </AppPage> ) |