Skip to content

Commit

Permalink
orgs | details links tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
snyaggarwal committed Nov 30, 2020
1 parent 3ec1eda commit e0c928f
Show file tree
Hide file tree
Showing 21 changed files with 375 additions and 22 deletions.
4 changes: 4 additions & 0 deletions src/common/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,10 @@ export const toParentURI = uri => {
return uri.split('/').splice(0, 5).join('/');
};

export const toOwnerURI = uri => {
return uri.split('/').splice(0, 3).join('/');
};

export const headFirst = versions => {
return compact([
find(versions, {version: 'HEAD'}), ...reject(versions, {version: 'HEAD'})
Expand Down
7 changes: 7 additions & 0 deletions src/components/app/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import ConceptHome from '../concepts/ConceptHome';
import MappingHome from '../mappings/MappingHome';
import SourceHome from '../sources/SourceHome';
import CollectionHome from '../collections/CollectionHome';
import OrgHome from '../orgs/OrgHome';
import { Link } from 'react-router-dom';
import { isAtGlobalSearch } from '../../common/utils';

Expand Down Expand Up @@ -144,6 +145,12 @@ class App extends Component {
path="/users/:user([a-zA-Z0-9\-\.\_]+)/collections/:collection([a-zA-Z0-9\-\.\_]+)"
component={CollectionHome}
/>

{/* Organization Details */}
<Route
path="/orgs/:org([a-zA-Z0-9\-\.\_]+)"
component={OrgHome}
/>
</Switch>
</div>

Expand Down
6 changes: 6 additions & 0 deletions src/components/app/App.scss
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,12 @@ td.pagination-center {
&.source {
color: rgb(92, 184, 92);
}
&.org {
color: rgb(253, 164, 41);
}
&.user {
color: rgb(253, 164, 41);
}
svg {
font-size: 32pt;
width: 48px;
Expand Down
2 changes: 1 addition & 1 deletion src/components/collections/CollectionHomeHeader.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const CollectionHomeHeader = ({
</div>
<div className='col-md-11'>
<div className='col-md-12 no-side-padding flex-vertical-center'>
<OwnerButton {...collection} onClick={() => {}} />
<OwnerButton {...collection} href={versionedObjectURL} />
<span className='separator'>/</span>
<CollectionButton label={collection.short_code} href={`#${versionedObjectURL}`} />
{
Expand Down
4 changes: 2 additions & 2 deletions src/components/common/ConceptButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import { BLUE, WHITE, RED, BLACK } from '../../common/constants';

const ConceptButton = ({label, onClick, retired, href}) => {
const style = retired ?
{background: 'lightgray', color: RED, boxShadow: 'none', textDecoration: 'line-through', textDecorationColor: BLACK} :
{background: BLUE, color: WHITE, boxShadow: 'none'};
{background: 'lightgray', color: RED, boxShadow: 'none', textDecoration: 'line-through', textDecorationColor: BLACK, textTransform: 'none'} :
{background: BLUE, color: WHITE, boxShadow: 'none', textTransform: 'none'};
return (
<Button
href={href}
Expand Down
4 changes: 2 additions & 2 deletions src/components/common/MappingButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import { BLUE, WHITE, RED, BLACK } from '../../common/constants';

const MappingButton = ({label, mapType, onClick, retired, href}) => {
const style = retired ?
{background: 'lightgray', color: RED, boxShadow: 'none', textDecoration: 'line-through', textDecorationColor: BLACK} :
{background: BLUE, color: WHITE, boxShadow: 'none'};
{background: 'lightgray', color: RED, boxShadow: 'none', textDecoration: 'line-through', textDecorationColor: BLACK, textTransform: 'none'} :
{background: BLUE, color: WHITE, boxShadow: 'none', textTransform: 'none'};
return (
<ButtonGroup variant='contained' style={{boxShadow: 'none'}}>
<Button
Expand Down
5 changes: 3 additions & 2 deletions src/components/common/OrgButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@ import { Button } from '@material-ui/core';
import { Home as HomeIcon } from '@material-ui/icons';
import { ORANGE, WHITE } from '../../common/constants';

const OrgButton = ({label, onClick}) => {
const OrgButton = ({label, onClick, href}) => {
return (
<Button
variant='contained'
startIcon={<HomeIcon />}
onClick={onClick}
style={{background: ORANGE, color: WHITE, boxShadow: 'none'}}>
href={href}
style={{background: ORANGE, color: WHITE, boxShadow: 'none', textTransform: 'none'}}>
{label}
</Button>
)
Expand Down
6 changes: 4 additions & 2 deletions src/components/common/OwnerButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,21 @@ import React from 'react';
import OrgButton from './OrgButton';
import UserButton from './UserButton';
import { get } from 'lodash';
import { toOwnerURI } from '../../common/utils';

const OwnerButton = props => {
const ownerType = (
get(props, 'ownerType', '') ||
get(props, 'owner_type', '')
).toLowerCase();
const uri = '#' + toOwnerURI(props.href || '')

return (
<span>
{
ownerType === 'user' ?
<UserButton label={props.owner} onClick={props.onClick} /> :
<OrgButton label={props.owner} onClick={props.onClick} />
<UserButton href={uri} label={props.owner} onClick={props.onClick} /> :
<OrgButton href={uri} label={props.owner} onClick={props.onClick} />
}
</span>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/common/SourceButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const SourceButton = ({label, onClick, href, childURI}) => {
startIcon={<ListIcon />}
onClick={onClick}
href={uri}
style={{background: GREEN, color: WHITE, boxShadow: 'none'}}>
style={{background: GREEN, color: WHITE, boxShadow: 'none', textTransform: 'none'}}>
{label}
</Button>
)
Expand Down
5 changes: 3 additions & 2 deletions src/components/common/UserButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@ import { Button } from '@material-ui/core';
import { Person as PersonIcon } from '@material-ui/icons';
import { ORANGE, WHITE } from '../../common/constants';

const UserButton = ({label, onClick}) => {
const UserButton = ({label, onClick, href}) => {
return (
<Button
variant='contained'
startIcon={<PersonIcon />}
onClick={onClick}
style={{background: ORANGE, color: WHITE, boxShadow: 'none'}}>
href={href}
style={{background: ORANGE, color: WHITE, boxShadow: 'none', textTransform: 'none'}}>
{label}
</Button>
)
Expand Down
4 changes: 2 additions & 2 deletions src/components/common/VersionButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ const VersionButton = ({label, onClick, retired, href, bgColor, textColor}) => {
let backgroundColor = bgColor || BLUE;
let txtColor = textColor || WHITE;
const style = retired ?
{background: 'lightgray', color: RED, boxShadow: 'none', textDecoration: 'line-through', textDecorationColor: BLACK} :
{background: backgroundColor, color: txtColor, boxShadow: 'none'};
{background: 'lightgray', color: RED, boxShadow: 'none', textDecoration: 'line-through', textDecorationColor: BLACK, textTransform: 'none'} :
{background: backgroundColor, color: txtColor, boxShadow: 'none', textTransform: 'none'};
return (
<Button
href={href}
Expand Down
2 changes: 1 addition & 1 deletion src/components/concepts/ConceptHomeHeader.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const ConceptHomeHeader = ({
<ConceptIcon url={currentURL} />
<div className='col-md-11'>
<div className='col-md-12 no-side-padding flex-vertical-center'>
<OwnerButton {...concept} onClick={() => {}} />
<OwnerButton {...concept} href={versionedObjectURL} />
<span className='separator'>/</span>
<SourceButton label={concept.source} childURI={versionedObjectURL} />
<span className='separator'>/</span>
Expand Down
2 changes: 1 addition & 1 deletion src/components/mappings/MappingHomeHeader.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const MappingHomeHeader = ({
<MappingIcon url={currentURL} />
<div className='col-md-11'>
<div className='col-md-12 no-side-padding flex-vertical-center'>
<OwnerButton {...mapping} onClick={() => {}} />
<OwnerButton {...mapping} href={versionedObjectURL} />
<span className='separator'>/</span>
<SourceButton label={mapping.source} childURI={versionedObjectURL} />
<span className='separator'>/</span>
Expand Down
95 changes: 95 additions & 0 deletions src/components/orgs/OrgHome.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import React from 'react';
import { CircularProgress } from '@material-ui/core';
import APIService from '../../services/APIService';
import OrgHomeHeader from './OrgHomeHeader';
import OrgHomeTabs from './OrgHomeTabs';

class OrgHome extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
org: {},
members: [],
tab: this.getDefaultTabIndex()
}
}

getDefaultTabIndex() {
const { location } = this.props;

if(location.pathname.indexOf('/about') > -1)
return 3;
if(location.pathname.indexOf('/collections') > -1)
return 2;
if(location.pathname.indexOf('/sources') > -1)
return 1;

return 0;
}

componentDidMount() {
this.refreshDataByURL()
this.getMembers()
}

componentDidUpdate(prevProps) {
if(prevProps.location.pathname !== this.props.location.pathname) {
this.refreshDataByURL()
this.getMembers()
this.onTabChange(null, this.getDefaultTabIndex())
}
}

getURLFromPath() {
const { location } = this.props;

return location.pathname.split('/').slice(0, 3).join('/') + '/';
}

refreshDataByURL() {
this.setState(
{isLoading: true},
() => APIService.new()
.overrideURL(this.getURLFromPath())
.get()
.then(response => this.setState({isLoading: false, org: response.data})))
}

getMembers() {
APIService.new()
.overrideURL(this.getURLFromPath() + 'members/')
.get()
.then(response => this.setState({members: response.data}))
}

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

render() {
const { org, isLoading, tab, members } = this.state;
const url = this.getURLFromPath()
return (
<div style={isLoading ? {textAlign: 'center', marginTop: '40px'} : {}}>
{
isLoading ?
<CircularProgress color='primary' /> :
<div className='col-md-12 home-container no-side-padding'>
<OrgHomeHeader org={org} url={url} />
<OrgHomeTabs
tab={tab}
onChange={this.onTabChange}
org={org}
location={this.props.location}
url={url}
members={members}
/>
</div>
}
</div>
)
}
}

export default OrgHome;
23 changes: 23 additions & 0 deletions src/components/orgs/OrgHomeChildrenList.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react';
import Search from '../search/Search';

class OrgHomeChildrenList extends React.Component {
getURL() {
const { url, resource } = this.props;

return `${url}${resource}/`;
}

render() {
return (
<Search
{...this.props}
nested={true}
baseURL={this.getURL()}
fixedFilters={{isTable: true, limit: 25}}
/>
)
}
}

export default OrgHomeChildrenList;
95 changes: 95 additions & 0 deletions src/components/orgs/OrgHomeDetails.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import React from 'react';
import {
Accordion, AccordionSummary, AccordionDetails, Typography,
} from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { get, map, isEmpty } from 'lodash';
import CustomAttributesAccordian from '../common/CustomAttributesAccordian';
import UserButton from '../common/UserButton';

const ACCORDIAN_HEADING_STYLES = {
fontWeight: 'bold',
}
const ACCORDIAN_DETAILS_STYLES = {
display: 'inline-block', width: '100%', textAlign: 'left',
}

const OrgHomeDetails = ({ org, members }) => {
return (
<div className='col-md-12'>
<div className='col-md-8 no-left-padding'>
<Accordion defaultExpanded>
<AccordionSummary
className='light-gray-bg'
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
>
<Typography style={ACCORDIAN_HEADING_STYLES}>Organization Details</Typography>
</AccordionSummary>
<AccordionDetails style={ACCORDIAN_DETAILS_STYLES}>
<div className='col-md-12' style={{marginBottom: '5px', marginTop: '15px'}}>
<div style={{fontWeight: '300'}} className='col-md-4 no-left-padding'>
Company
</div>
<div className='col-md-8 no-right-padding'>
{org.company}
</div>
</div>
<div className='col-md-12' style={{marginBottom: '5px'}}>
<div style={{fontWeight: '300'}} className='col-md-4 no-left-padding'>
Website
</div>
<div className='col-md-8 no-right-padding'>
{
org.website &&
<a href={org.website} target="_blank" rel="noopener noreferrer">
{org.website}
</a>
}
</div>
</div>
<div className='col-md-12' style={{marginBottom: '15px'}}>
<div style={{fontWeight: '300'}} className='col-md-4 no-left-padding'>
Public Access
</div>
<div className='col-md-8 no-right-padding'>
{org.public_access}
</div>
</div>
</AccordionDetails>
</Accordion>
<CustomAttributesAccordian
attributes={get(org, 'extras', {})}
headingStyles={ACCORDIAN_HEADING_STYLES}
detailStyles={ACCORDIAN_DETAILS_STYLES}
/>
</div>
<div className='col-md-4 no-right-padding'>
<Accordion defaultExpanded>
<AccordionSummary
className='light-gray-bg'
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
>
<Typography style={ACCORDIAN_HEADING_STYLES}>Members</Typography>
</AccordionSummary>
<AccordionDetails style={ACCORDIAN_DETAILS_STYLES}>
{
isEmpty(members) ?
<div> No Members </div> :
map(members, member => {
let label = member.name;
if(label === '- -')
label = member.username
return <UserButton label={label} href={`#${member.url}`} />;
})

}
</AccordionDetails>
</Accordion>
</div>
</div>
);
}

export default OrgHomeDetails;

0 comments on commit e0c928f

Please sign in to comment.