diff --git a/src/components/BuildingListTable/index.js b/src/components/BuildingListTable/index.js index dd67a3c6efbdc2eea851638104e25d0716fc32f4..fcd39ef1d1b50974b7c8f1b61afcdc843be7014e 100644 --- a/src/components/BuildingListTable/index.js +++ b/src/components/BuildingListTable/index.js @@ -16,7 +16,7 @@ export default function BuildingListTable({ buildings, error }) { ); const handleRowClick = (building) => { - const newPath = `/buildings/${building.building_id.toString()}`; + const newPath = `/buildings/${building.building_id.toString()}/`; browserHistory.push(newPath); }; diff --git a/src/components/BuildingOverview/index.js b/src/components/BuildingOverview/index.js index 57ecd52a9bfc8c417421e9e7c7eed42e8880e7a6..f457aa971062f59efcf1e69073b3ef654daab0e4 100644 --- a/src/components/BuildingOverview/index.js +++ b/src/components/BuildingOverview/index.js @@ -1,6 +1,7 @@ import React, { Component, PropTypes } from 'react'; import documentsPropType from '../../containers/Documents/propTypes'; import DocumentCardViewer from '../../components/DocumentCardViewer'; +import LinkBarDetail from '../../components/LinkBarDetail'; import ProjectCard from '../ProjectCard'; import { completeProjectPropTypes, @@ -39,6 +40,17 @@ export default class BuildingOverview extends Component { render() { return (
+
diff --git a/src/components/LinkBarDetail/index.js b/src/components/LinkBarDetail/index.js new file mode 100644 index 0000000000000000000000000000000000000000..96f797ae7ae3521f51e834fb20a5fd6ec65ab66d --- /dev/null +++ b/src/components/LinkBarDetail/index.js @@ -0,0 +1,59 @@ +import React, { PropTypes } from 'react'; +import { Link } from 'react-router'; +import './styles.css'; +import buildingDetailPropType from '../../containers/Building/propTypes'; + +const generateBreadcrumbs = (rootURL, breadcrumbs) => { + const breadcrumbList = breadcrumbs.map((val, index) => { + if (index < breadcrumbs.length - 1) { + return ( +
  • + {val.name} +
  • + ); + } + return ( +
  • + {val.name} +
  • + ); + }); + return breadcrumbList; +}; + +const generateLinks = (rootURL, links) => { + const linkList = links.map(val => ( + ( + + {val.name} + + ) + )); + return linkList; +}; + +export default function LinkBarDetail({ building, breadcrumbs, links }) { + const rootURL = `/buildings/${building.building_id}`; + return ( +
    +
      + {generateBreadcrumbs(rootURL, breadcrumbs)} +
    +
    + {generateLinks(rootURL, links)} +
    +
    + ); +} + +const urlObject = PropTypes.shape({ + name: PropTypes.string, + url: PropTypes.string, + tags: PropTypes.string, +}); + +LinkBarDetail.propTypes = { + building: buildingDetailPropType, + breadcrumbs: PropTypes.arrayOf(urlObject), + links: PropTypes.arrayOf(urlObject), +}; diff --git a/src/components/LinkBarDetail/styles.css b/src/components/LinkBarDetail/styles.css new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/components/Project/index.js b/src/components/Project/index.js index 6cad3ff3c2126e9c8349b742bf15d567abdd9221..6f0d9b01b3c3e437069bc3b2f16f7f2afeeb2fd5 100644 --- a/src/components/Project/index.js +++ b/src/components/Project/index.js @@ -1,18 +1,35 @@ import React, { PropTypes } from 'react'; +import LinkBarDetail from '../../components/LinkBarDetail'; +import { completeOverviewPropTypes } from '../../containers/Building/propTypes'; /* eslint-disable */ -const Project = ({ buildingId }) => { +const Project = ({ buildingId, building }) => { return ( -
    - Coming Soon! -
    - {buildingId} -
    +
    + +
    +
    +
    + Coming Soon! +
    + {buildingId} +
    +
    +
    +
    ); }; Project.propTypes = { buildingId: PropTypes.string, + building: completeOverviewPropTypes, }; export default Project; diff --git a/src/components/ProjectCard/index.js b/src/components/ProjectCard/index.js index 317c3e960f35b405a03b43915ac01376be500582..246688929c3d99c3c5b0eeac6853978e393fb7b9 100644 --- a/src/components/ProjectCard/index.js +++ b/src/components/ProjectCard/index.js @@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'; import { Link, browserHistory } from 'react-router'; import { projectPropTypes } from '../../containers/Building/propTypes'; -/* eslint-disable jsx-a11y/href-no-hash */ + const ProjectCard = (props) => { const { project } = props; let date = ''; @@ -12,11 +12,17 @@ const ProjectCard = (props) => { date = `Created on ${new Date(project.created)}`; } + // FIXME: add trailing / to url if none exist without if statement + let rootURL = browserHistory.getCurrentLocation().pathname; + if (rootURL.slice(-1) !== '/') { + rootURL += '/'; + } + return (
    { project.state } { project.name } diff --git a/src/components/SideBarDetail/index.js b/src/components/SideBarDetail/index.js index af5cf3e236af7922b2e70435161b06cdd5b3e115..c0bbef129fa0d56134c632a6a859848cda62c4ec 100644 --- a/src/components/SideBarDetail/index.js +++ b/src/components/SideBarDetail/index.js @@ -4,7 +4,8 @@ import './styles.css'; import buildingDetailPropType from '../../containers/Building/propTypes'; const isActive = (url) => { - if (url === browserHistory.getCurrentLocation().pathname) { + if (url === browserHistory.getCurrentLocation().pathname || + url === `${browserHistory.getCurrentLocation().pathname}/`) { return 'active'; } return ''; @@ -49,8 +50,8 @@ export default function SideBarDetail({ building, children }) {
      -
    • - +
    • + {/* All of this SVGs will need to replaced with InlineSVG, an external library. Then we can link to files */} @@ -65,8 +66,8 @@ export default function SideBarDetail({ building, children }) { Overview
    • -
    • - +
    • + @@ -79,8 +80,8 @@ export default function SideBarDetail({ building, children }) { Dimensions
    • -
    • - +
    • +