summaryrefslogtreecommitdiff
path: root/opendc-web/opendc-web-ui/src/components/projects
diff options
context:
space:
mode:
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/projects')
-rw-r--r--opendc-web/opendc-web-ui/src/components/projects/FilterButton.js24
-rw-r--r--opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js33
-rw-r--r--opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss7
-rw-r--r--opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass5
-rw-r--r--opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js17
-rw-r--r--opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js29
-rw-r--r--opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js24
-rw-r--r--opendc-web/opendc-web-ui/src/components/projects/ProjectList.js (renamed from opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js)22
-rw-r--r--opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js29
9 files changed, 91 insertions, 99 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterButton.js b/opendc-web/opendc-web-ui/src/components/projects/FilterButton.js
deleted file mode 100644
index 664f9b46..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterButton.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import classNames from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-const FilterButton = ({ active, children, onClick }) => (
- <button
- className={classNames('btn btn-secondary', { active: active })}
- onClick={() => {
- if (!active) {
- onClick()
- }
- }}
- >
- {children}
- </button>
-)
-
-FilterButton.propTypes = {
- active: PropTypes.bool.isRequired,
- children: PropTypes.node.isRequired,
- onClick: PropTypes.func.isRequired,
-}
-
-export default FilterButton
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
index 2b9795d0..5129c013 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
@@ -1,13 +1,28 @@
import React from 'react'
-import FilterLink from '../../containers/projects/FilterLink'
-import './FilterPanel.sass'
-
-const FilterPanel = () => (
- <div className="btn-group filter-panel mb-2">
- <FilterLink filter="SHOW_ALL">All Projects</FilterLink>
- <FilterLink filter="SHOW_OWN">My Projects</FilterLink>
- <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink>
- </div>
+import PropTypes from 'prop-types'
+import { Button, ButtonGroup } from 'reactstrap'
+import { filterPanel } from './FilterPanel.module.scss'
+
+export const FILTERS = { SHOW_ALL: 'All Projects', SHOW_OWN: 'My Projects', SHOW_SHARED: 'Shared with me' }
+
+const FilterPanel = ({ onSelect, activeFilter = 'SHOW_ALL' }) => (
+ <ButtonGroup className={`${filterPanel} mb-2`}>
+ {Object.keys(FILTERS).map((filter) => (
+ <Button
+ color="secondary"
+ key={filter}
+ onClick={() => activeFilter === filter || onSelect(filter)}
+ active={activeFilter === filter}
+ >
+ {FILTERS[filter]}
+ </Button>
+ ))}
+ </ButtonGroup>
)
+FilterPanel.propTypes = {
+ onSelect: PropTypes.func.isRequired,
+ activeFilter: PropTypes.string,
+}
+
export default FilterPanel
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss
new file mode 100644
index 00000000..79cdf81a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss
@@ -0,0 +1,7 @@
+.filterPanel {
+ display: flex;
+
+ button {
+ flex: 1 !important;
+ }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass
deleted file mode 100644
index f71cf6c8..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass
+++ /dev/null
@@ -1,5 +0,0 @@
-.filter-panel
- display: flex
-
- button
- flex: 1 !important
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js b/opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js
deleted file mode 100644
index 312671c6..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-const NewProjectButtonComponent = ({ onClick }) => (
- <div className="bottom-btn-container">
- <div className="btn btn-primary float-right" onClick={onClick}>
- <span className="fa fa-plus mr-2" />
- New Project
- </div>
- </div>
-)
-
-NewProjectButtonComponent.propTypes = {
- onClick: PropTypes.func.isRequired,
-}
-
-export default NewProjectButtonComponent
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
index 1c76cc7f..0725e42b 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
@@ -1,22 +1,31 @@
import PropTypes from 'prop-types'
import React from 'react'
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
+import { Button } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlay, faUsers, faTrash } from '@fortawesome/free-solid-svg-icons'
const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => (
<td className="text-right">
- <Link to={'/projects/' + projectId} className="btn btn-outline-primary btn-sm mr-2" title="Open this project">
- <span className="fa fa-play" />
+ <Link href={`/projects/${projectId}`}>
+ <Button color="primary" outline size="sm" className="mr-2" title="Open this project">
+ <FontAwesomeIcon icon={faPlay} />
+ </Button>
</Link>
- <div
- className="btn btn-outline-success btn-sm disabled mr-2"
+ <Button
+ color="success"
+ outline
+ size="sm"
+ disabled
+ className="mr-2"
title="View and edit collaborators (not supported currently)"
onClick={() => onViewUsers(projectId)}
>
- <span className="fa fa-users" />
- </div>
- <div className="btn btn-outline-danger btn-sm" title="Delete this project" onClick={() => onDelete(projectId)}>
- <span className="fa fa-trash" />
- </div>
+ <FontAwesomeIcon icon={faUsers} />
+ </Button>
+ <Button color="danger" outline size="sm" title="Delete this project" onClick={() => onDelete(projectId)}>
+ <FontAwesomeIcon icon={faTrash} />
+ </Button>
</td>
)
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js
deleted file mode 100644
index 3f904061..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import classNames from 'classnames'
-import React from 'react'
-import ProjectActions from '../../containers/projects/ProjectActions'
-import Shapes from '../../shapes/index'
-import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
-import { parseAndFormatDateTime } from '../../util/date-time'
-
-const ProjectAuthRow = ({ projectAuth }) => (
- <tr>
- <td className="pt-3">{projectAuth.project.name}</td>
- <td className="pt-3">{parseAndFormatDateTime(projectAuth.project.datetimeLastEdited)}</td>
- <td className="pt-3">
- <span className={classNames('fa', 'fa-' + AUTH_ICON_MAP[projectAuth.authorizationLevel], 'mr-2')} />
- {AUTH_DESCRIPTION_MAP[projectAuth.authorizationLevel]}
- </td>
- <ProjectActions projectId={projectAuth.project._id} />
- </tr>
-)
-
-ProjectAuthRow.propTypes = {
- projectAuth: Shapes.Authorization.isRequired,
-}
-
-export default ProjectAuthRow
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
index 8eb4f93b..dc3f85ec 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
@@ -1,14 +1,16 @@
import PropTypes from 'prop-types'
import React from 'react'
-import Shapes from '../../shapes/index'
-import ProjectAuthRow from './ProjectAuthRow'
+import { Project } from '../../shapes'
+import ProjectRow from './ProjectRow'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
-const ProjectAuthList = ({ authorizations }) => {
+const ProjectList = ({ projects }) => {
return (
<div className="vertically-expanding-container">
- {authorizations.length === 0 ? (
+ {projects.length === 0 ? (
<div className="alert alert-info">
- <span className="info-icon fa fa-question-circle mr-2" />
+ <FontAwesomeIcon icon={faQuestionCircle} className="info-icon mr-2" />
<strong>No projects here yet...</strong> Add some with the 'New Project' button!
</div>
) : (
@@ -22,8 +24,8 @@ const ProjectAuthList = ({ authorizations }) => {
</tr>
</thead>
<tbody>
- {authorizations.map((authorization) => (
- <ProjectAuthRow projectAuth={authorization} key={authorization.project._id} />
+ {projects.map((project) => (
+ <ProjectRow project={project} key={project._id} />
))}
</tbody>
</table>
@@ -32,8 +34,8 @@ const ProjectAuthList = ({ authorizations }) => {
)
}
-ProjectAuthList.propTypes = {
- authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired,
+ProjectList.propTypes = {
+ projects: PropTypes.arrayOf(Project).isRequired,
}
-export default ProjectAuthList
+export default ProjectList
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
new file mode 100644
index 00000000..91368de8
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import ProjectActions from '../../containers/projects/ProjectActions'
+import { Project } from '../../shapes'
+import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
+import { parseAndFormatDateTime } from '../../util/date-time'
+import { useAuth } from '../../auth'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+const ProjectRow = ({ project }) => {
+ const { user } = useAuth()
+ const { level } = project.authorizations.find((auth) => auth.userId === user.sub)
+ return (
+ <tr>
+ <td className="pt-3">{project.name}</td>
+ <td className="pt-3">{parseAndFormatDateTime(project.datetimeLastEdited)}</td>
+ <td className="pt-3">
+ <FontAwesomeIcon icon={AUTH_ICON_MAP[level]} className="mr-2" />
+ {AUTH_DESCRIPTION_MAP[level]}
+ </td>
+ <ProjectActions projectId={project._id} />
+ </tr>
+ )
+}
+
+ProjectRow.propTypes = {
+ project: Project.isRequired,
+}
+
+export default ProjectRow
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 16:56:41 +0000