-
Notifications
You must be signed in to change notification settings - Fork 12
/
ContainerHomeHeader.jsx
157 lines (152 loc) · 5.87 KB
/
ContainerHomeHeader.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
import React from 'react';
import { ButtonGroup, Tooltip, Button } from '@mui/material'
import {
FileCopy as CopyIcon,
List as ListIcon,
Loyalty as LoyaltyIcon,
Link as LinkIcon
} from '@mui/icons-material';
import { isEmpty, keys, map, startCase, get } from 'lodash';
import { nonEmptyCount, copyURL, toFullAPIURL } from '../../common/utils';
import OwnerButton from '../common/OwnerButton';
import SourceButton from '../common/SourceButton';
import CollectionButton from '../common/CollectionButton';
import ConceptMapButton from '../common/ConceptMapButton';
import LastUpdatedOnLabel from '../common/LastUpdatedOnLabel';
import LinkLabel from '../common/LinkLabel';
import CustomAttributesPopup from '../common/CustomAttributesPopup';
import CollapsibleAttributes from '../common/CollapsibleAttributes';
import HeaderAttribute from '../common/HeaderAttribute';
import HeaderLogo from '../common/HeaderLogo';
import RetiredChip from '../common/RetiredChip';
import DownloadButton from '../common/DownloadButton';
const HIDDEN_ATTRIBUTES = {
canonical_url: 'url',
publisher: 'text',
purpose: 'text',
copyright: 'text',
content_type: 'text',
revision_date: 'date',
identifier: 'json',
contact: 'json',
jurisdiction: 'json',
release_date: 'date',
}
const ContainerHomeHeader = ({source, url, parentURL, resource, serverURL, isHAPI}) => {
const hasManyHiddenAttributes = nonEmptyCount(source, keys(HIDDEN_ATTRIBUTES)) >= 1;
const status = get(source, 'status', '').toLowerCase()
const isRetired = status === 'retired';
const shortCode = source.id
const lastUpdated = get(source, 'meta.lastUpdated')
const isCodeSystem = resource === 'CodeSystem'
const isValueSet = resource === 'ValueSet'
const isConceptMap = resource === 'ConceptMap'
const getIcon = () => {
if(isCodeSystem)
return <ListIcon className='default-svg' />;
if(isValueSet)
return <LoyaltyIcon className='default-svg' />;
if(isConceptMap)
return <LinkIcon className='default-svg' />;
}
const getResourceButton = () => {
if(isCodeSystem)
return <SourceButton label={shortCode} href={url} />;
if(isValueSet)
return <CollectionButton label={shortCode} href={url} />;
if(isConceptMap)
return <ConceptMapButton label={shortCode} href={url} />;
}
const onCopyClick = () => copyURL(toFullAPIURL(serverURL))
return (
<header className='home-header col-md-12'>
<div className='col-md-12 no-side-padding container' style={{paddingTop: '10px'}}>
<div className='no-side-padding col-md-1 home-icon'>
<HeaderLogo
logoURL={source.logo_url}
defaultIcon={getIcon()}
/>
</div>
<div className='col-md-11'>
<div className='col-md-12 no-side-padding flex-vertical-center'>
<OwnerButton owner='FHIR' uri={`#${parentURL}`} />
<span className='separator'>/</span>
{
!isHAPI &&
<React.Fragment>
<OwnerButton owner={source.owner} uri={`#/fhir${source.ownerURL}${resource}`} />
<span className='separator'>/</span>
</React.Fragment>
}
{ getResourceButton() }
{
isRetired &&
<span style={{marginLeft: '10px'}}>
<RetiredChip size='small' />
</span>
}
<span style={{marginLeft: '15px'}}>
<ButtonGroup variant='text' size='large'>
<Tooltip arrow title="Copy URL">
<Button onClick={onCopyClick}>
<CopyIcon fontSize="inherit" />
</Button>
</Tooltip>
<DownloadButton resource={source} formats={['json']} tooltip='Download' />
</ButtonGroup>
</span>
</div>
<div className='col-md-12 no-side-padding flex-vertical-center home-resource-full-name'>
<span style={{marginRight: '10px'}}>
{source.full_name}
</span>
</div>
{
source.description &&
<div className='col-md-12 no-side-padding flex-vertical-center resource-description'>
{source.description}
</div>
}
<HeaderAttribute label="Source Type" value={source.source_type} gridClass="col-md-12" />
<HeaderAttribute label="Custom Attributes" value={!isEmpty(source.extras) && <CustomAttributesPopup attributes={source.extras} />} gridClass="col-md-12" />
{
hasManyHiddenAttributes ?
<div className='col-md-12 no-side-padding'>
<CollapsibleAttributes
object={source}
urlAttrs={['canonical_url']}
textAttrs={['publisher', 'purpose', 'copyright', 'content_type']}
dateAttrs={['revision_date', 'release_date']}
jsonAttrs={['identifier', 'contact', 'jurisdiction']}
/>
</div> :
<React.Fragment>
{
map(HIDDEN_ATTRIBUTES, (type, attr) => (
<HeaderAttribute key={attr} label={`${startCase(attr)}`} value={get(source, attr)} gridClass="col-md-12" type={type} />
))
}
</React.Fragment>
}
<div className='col-md-12 no-side-padding flex-vertical-center' style={{paddingTop: '10px'}}>
{
source.website &&
<span style={{marginRight: '10px'}}>
<LinkLabel link={source.website} iconSize='medium' noContainerClass />
</span>
}
<span>
<LastUpdatedOnLabel
date={lastUpdated}
by={source.updated_by}
iconSize='medium'
noContainerClass
/>
</span>
</div>
</div>
</div>
</header>
)
}
export default ContainerHomeHeader;