Skip to content

Commit

Permalink
concept home | WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
snyaggarwal committed Nov 10, 2020
1 parent e24090a commit 85a47da
Show file tree
Hide file tree
Showing 11 changed files with 419 additions and 3 deletions.
44 changes: 44 additions & 0 deletions src/components/app/App.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import { AppBar, Toolbar, Typography } from '@material-ui/core';
import { WHITE, BLACK } from '../../common/constants';
import './App.scss';
import SearchInput from '../search/SearchInput';
import Search from '../search/Search';
import ConceptHome from '../concepts/ConceptHome';
import { Link } from 'react-router-dom';
import { isAtGlobalSearch } from '../../common/utils';

Expand Down Expand Up @@ -35,6 +37,48 @@ class App extends Component {
isAtGlobalSearch() &&
<Search {...this.props} />
}
<Switch>
<Route
exact
path="/users/:user([a-zA-Z0-9\-\.\_]+)/sources/:source([a-zA-Z0-9\-\.\_]+)/concepts/:concept([a-zA-Z0-9\-\.\_]+)"
component={ConceptHome}
/>
<Route
exact
path="/orgs/:org([a-zA-Z0-9\-\.\_]+)/sources/:source([a-zA-Z0-9\-\.\_]+)/concepts/:concept([a-zA-Z0-9\-\.\_]+)"
component={ConceptHome}
/>
<Route
exact
path="/users/:user([a-zA-Z0-9\-\.\_]+)/sources/:source([a-zA-Z0-9\-\.\_]+)/concepts/:concept([a-zA-Z0-9\-\.\_]+)/:conceptVersion([a-zA-Z0-9\-\.\_]+)"
component={ConceptHome}
/>
<Route
exact
path="/orgs/:org([a-zA-Z0-9\-\.\_]+)/sources/:source([a-zA-Z0-9\-\.\_]+)/concepts/:concept([a-zA-Z0-9\-\.\_]+)/:conceptVersion([a-zA-Z0-9\-\.\_]+)"
component={ConceptHome}
/>
<Route
exact
path="/users/:user([a-zA-Z0-9\-\.\_]+)/sources/:source([a-zA-Z0-9\-\.\_]+)/:version([a-zA-Z0-9\-\.\_]+)/concepts/:concept([a-zA-Z0-9\-\.\_]+)"
component={ConceptHome}
/>
<Route
exact
path="/orgs/:org([a-zA-Z0-9\-\.\_]+)/sources/:source([a-zA-Z0-9\-\.\_]+)/:version([a-zA-Z0-9\-\.\_]+)/concepts/:concept([a-zA-Z0-9\-\.\_]+)"
component={ConceptHome}
/>
<Route
exact
path="/users/:user([a-zA-Z0-9\-\.\_]+)/sources/:source([a-zA-Z0-9\-\.\_]+)/:version([a-zA-Z0-9\-\.\_]+)/concepts/:concept([a-zA-Z0-9\-\.\_]+)/:conceptVersion([a-zA-Z0-9\-\.\_]+)"
component={ConceptHome}
/>
<Route
exact
path="/orgs/:org([a-zA-Z0-9\-\.\_]+)/sources/:source([a-zA-Z0-9\-\.\_]+)/:version([a-zA-Z0-9\-\.\_]+)/concepts/:concept([a-zA-Z0-9\-\.\_]+)/:conceptVersion([a-zA-Z0-9\-\.\_]+)"
component={ConceptHome}
/>
</Switch>
</div>

</div>
Expand Down
72 changes: 72 additions & 0 deletions src/components/app/App.scss
Original file line number Diff line number Diff line change
Expand Up @@ -130,3 +130,75 @@ td.pagination-center {
margin-right: 5px;
font-size: 12px;
}
.italic {
font-style: italic;
}
.home-icon {
width: 48px;
color: #e5e5e5;
svg {
font-size: 32pt;
width: 48px;
height: 48px;
}
}
.home-header {
background-color: rgb(252,252,252);
padding-top: 3px;
padding-bottom: 3px;
border-bottom: 1px solid #e5e5e5;
margin-bottom: 15px;
span.separator {
font-size: 18pt;
padding: 0 10px
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

.sub-tab {

span[class^="TabIndicator-root"] {
display: none;
}

&-header {
margin-left: -1px;

button,a {
background: #fff;
opacity: 1;
margin-right: 8px;
border-radius: 6px 6px 0 0;
text-transform: capitalize;
border: 1px solid #e0e0e0;
span {
font-size: 1.150rem;
}
}

a[aria-selected="true"],button[aria-selected="true"]{
border-bottom: 1px solid #fff;

& span {
font-weight: bold;
}
}
a:hover,a:focus {
text-decoration: none !important;
color: inherit !important;
}
}

&-container {
background: #fff;
padding: 10px;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
border-radius: 0 0 4px 4px;
}
}
18 changes: 18 additions & 0 deletions src/components/common/ConceptButton.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import { Button } from '@material-ui/core';
import { LocalOffer as LocalOfferIcon } from '@material-ui/icons';
import { BLUE, WHITE } from '../../common/constants';

const ConceptButton = ({label, onClick}) => {
return (
<Button
variant='contained'
startIcon={<LocalOfferIcon />}
onClick={onClick}
style={{background: BLUE, color: WHITE, boxShadow: 'none'}}>
{label}
</Button>
)
}

export default ConceptButton;
34 changes: 34 additions & 0 deletions src/components/common/ExternalIdLabel.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from 'react';
import { ArrowForward as ForwardIcon } from '@material-ui/icons';

const STYLES = {
medium: {
icon: {width: '9pt', marginTop: '2px', marginRight: '4px', height: '9pt'},
fontSize: '9pt',
},
small: {
icon: {width: '8pt', marginTop: '2px', marginRight: '4px', height: '8pt'},
fontSize: '8pt',
}
}

const ExternalIdLabel = props => {
const styles = STYLES[props.iconSize || 'small']
return (
<div className='resource-metadata' style={{fontSize: styles.fontSize}}>
<span>
<ForwardIcon style={{
...styles.icon,
background: 'gray',
color: 'white',
border: '1px solid',
borderRadius: '10px',
}}
/>
</span>
<span>External ID: {props.externalId}</span>
</div>
)
}

export default ExternalIdLabel;
26 changes: 23 additions & 3 deletions src/components/common/LastUpdatedOnLabel.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,31 @@ import React from 'react';
import moment from 'moment';
import {Event as EventIcon} from '@material-ui/icons'

const STYLES = {
medium: {
icon: {width: '9pt', marginTop: '-4px', marginRight: '4px'},
fontSize: '9pt',
},
small: {
icon: {width: '8pt', marginTop: '-4px', marginRight: '4px'},
fontSize: '8pt',
}
}

const LastUpdatedOnLabel = props => {
const byLabel = props.by ? `by ${props.by}` : '';
const mainLabel = props.label || 'Last updated';
const containerClass = props.noContainerClass ? '' : 'col-sm-12 no-side-padding';
const styles = STYLES[props.iconSize || 'small']

return (
<div className='col-sm-12 no-side-padding resource-metadata'>
<span><EventIcon style={{width: '8pt', marginTop: '-4px', marginRight: '4px'}} /></span>
<span>Last updated on {moment(props.date).format('MM/DD/YYYY')}</span>
<div className={`${containerClass} resource-metadata`} style={{fontSize: styles.fontSize}}>
<span>
<EventIcon style={styles.icon} />
</span>
<span>
{mainLabel} on {moment(props.date).format('MM/DD/YYYY')} {byLabel}
</span>
</div>
)
}
Expand Down
18 changes: 18 additions & 0 deletions src/components/common/OrgButton.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import { Button } from '@material-ui/core';
import { Home as HomeIcon } from '@material-ui/icons';
import { ORANGE, WHITE } from '../../common/constants';

const OrgButton = ({label, onClick}) => {
return (
<Button
variant='contained'
startIcon={<HomeIcon />}
onClick={onClick}
style={{background: ORANGE, color: WHITE, boxShadow: 'none'}}>
{label}
</Button>
)
}

export default OrgButton;
23 changes: 23 additions & 0 deletions src/components/common/OwnerButton.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react';
import OrgButton from './OrgButton';
import UserButton from './UserButton';
import { get } from 'lodash';

const OwnerButton = props => {
const ownerType = (
get(props, 'ownerType', '') ||
get(props, 'owner_type', '')
).toLowerCase();

return (
<span>
{
ownerType === 'user' ?
<UserButton label={props.owner} onClick={props.onClick} /> :
<OrgButton label={props.owner} onClick={props.onClick} />
}
</span>
);
}

export default OwnerButton;
18 changes: 18 additions & 0 deletions src/components/common/SourceButton.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import { Button } from '@material-ui/core';
import { List as ListIcon } from '@material-ui/icons';
import { GREEN, WHITE } from '../../common/constants';

const SourceButton = ({label, onClick}) => {
return (
<Button
variant='contained'
startIcon={<ListIcon />}
onClick={onClick}
style={{background: GREEN, color: WHITE, boxShadow: 'none'}}>
{label}
</Button>
)
}

export default SourceButton;
18 changes: 18 additions & 0 deletions src/components/common/UserButton.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import { Button } from '@material-ui/core';
import { Person as PersonIcon } from '@material-ui/icons';
import { ORANGE, WHITE } from '../../common/constants';

const UserButton = ({label, onClick}) => {
return (
<Button
variant='contained'
startIcon={<PersonIcon />}
onClick={onClick}
style={{background: ORANGE, color: WHITE, boxShadow: 'none'}}>
{label}
</Button>
)
}

export default UserButton;
69 changes: 69 additions & 0 deletions src/components/concepts/ConceptHome.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import React from 'react';
import { CircularProgress, Tabs, Tab } from '@material-ui/core';
import APIService from '../../services/APIService';
import ConceptHomeHeader from './ConceptHomeHeader';

class ConceptHome extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
concept: {},
tab: 0,
}
}

componentDidMount() {
this.refreshDataByURL()
}

componentDidUpdate(prevProps) {
if(prevProps.location.pathname !== this.props.location.pathname)
this.refreshDataByURL()
}

refreshDataByURL() {
this.setState({isLoading: true}, () => {
APIService.new()
.overrideURL(this.props.location.pathname)
.get()
.then(response => {
this.setState({isLoading: false, concept: response.data})
})

})
}

onTabChange = (event, value) => {
this.setState({tab: value})
}

render() {
const { concept, isLoading, tab } = this.state;
return (
<div style={isLoading ? {textAlign: 'center', marginTop: '40px'} : {}}>
{
isLoading ?
<CircularProgress color='primary' /> :
<div className='col-md-12 home-container no-side-padding'>
<ConceptHomeHeader concept={concept} />
<div className='col-md-12 sub-tab'>
<Tabs indicatorColor='none' className='sub-tab-header' value={tab} onChange={this.onTabChange} aria-label="concept-home-tabs">
<Tab label="Details" />
<Tab label="Mappings" />
<Tab label="History" />
</Tabs>
<div className='sub-tab-container'>
{tab === 0 && <span>Details</span>}
{tab === 1 && <span>Mappings</span>}
{tab === 2 && <span>History</span>}
</div>
</div>
</div>
}
</div>
)
}
}

export default ConceptHome;

0 comments on commit 85a47da

Please sign in to comment.