diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/projects')
7 files changed, 151 insertions, 0 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 new file mode 100644 index 00000000..664f9b46 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/projects/FilterButton.js @@ -0,0 +1,24 @@ +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 new file mode 100644 index 00000000..2b9795d0 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js @@ -0,0 +1,13 @@ +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> +) + +export default FilterPanel diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass new file mode 100644 index 00000000..f71cf6c8 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass @@ -0,0 +1,5 @@ +.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 new file mode 100644 index 00000000..312671c6 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js @@ -0,0 +1,17 @@ +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 new file mode 100644 index 00000000..1c76cc7f --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js @@ -0,0 +1,29 @@ +import PropTypes from 'prop-types' +import React from 'react' +import { Link } from 'react-router-dom' + +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> + <div + className="btn btn-outline-success btn-sm disabled 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> + </td> +) + +ProjectActionButtons.propTypes = { + projectId: PropTypes.string.isRequired, + onViewUsers: PropTypes.func, + onDelete: PropTypes.func, +} + +export default ProjectActionButtons diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js new file mode 100644 index 00000000..8eb4f93b --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js @@ -0,0 +1,39 @@ +import PropTypes from 'prop-types' +import React from 'react' +import Shapes from '../../shapes/index' +import ProjectAuthRow from './ProjectAuthRow' + +const ProjectAuthList = ({ authorizations }) => { + return ( + <div className="vertically-expanding-container"> + {authorizations.length === 0 ? ( + <div className="alert alert-info"> + <span className="info-icon fa fa-question-circle mr-2" /> + <strong>No projects here yet...</strong> Add some with the 'New Project' button! + </div> + ) : ( + <table className="table table-striped"> + <thead> + <tr> + <th>Project name</th> + <th>Last edited</th> + <th>Access rights</th> + <th /> + </tr> + </thead> + <tbody> + {authorizations.map((authorization) => ( + <ProjectAuthRow projectAuth={authorization} key={authorization.project._id} /> + ))} + </tbody> + </table> + )} + </div> + ) +} + +ProjectAuthList.propTypes = { + authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired, +} + +export default ProjectAuthList diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js new file mode 100644 index 00000000..3f904061 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js @@ -0,0 +1,24 @@ +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 |