-
Notifications
You must be signed in to change notification settings - Fork 12
/
SourceHomeHeader.jsx
154 lines (151 loc) · 6.27 KB
/
SourceHomeHeader.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
import React from 'react';
import {
List as ListIcon,
FileCopy as CopyIcon,
} from '@material-ui/icons';
import { Tooltip, IconButton } from '@material-ui/core';
import { includes, isEmpty, keys, map, startCase, get } from 'lodash';
import { toFullAPIURL, copyURL, nonEmptyCount } from '../../common/utils';
import { GREEN } from '../../common/constants';
import APIService from '../../services/APIService';
import OwnerButton from '../common/OwnerButton';
import SourceButton from '../common/SourceButton';
import VersionButton from '../common/VersionButton';
import LastUpdatedOnLabel from '../common/LastUpdatedOnLabel';
import ExternalIdLabel from '../common/ExternalIdLabel';
import LinkLabel from '../common/LinkLabel';
import PublicAccessChip from '../common/PublicAccessChip';
import CustomAttributesPopup from '../common/CustomAttributesPopup';
import CollapsibleAttributes from '../common/CollapsibleAttributes';
import HeaderAttribute from '../common/HeaderAttribute';
import HeaderLogo from '../common/HeaderLogo';
const HIDDEN_ATTRIBUTES = {
canonical_url: 'url',
publisher: 'text',
purpose: 'text',
copyright: 'text',
content_type: 'text',
revision_date: 'date',
identifier: 'json',
contact: 'json',
jurisdiction: 'json'
}
const SourceHomeHeader = ({
source, isVersionedObject, versionedObjectURL, currentURL
}) => {
const [logoURL, setLogoURL] = React.useState(source.logo_url)
const isRetired = source.isRetired;
const onIconClick = () => copyURL(toFullAPIURL(currentURL))
const hasManyHiddenAttributes = nonEmptyCount(source, keys(HIDDEN_ATTRIBUTES)) >= 4;
const onLogoUpload = (base64, name) => {
APIService.new().overrideURL(versionedObjectURL).appendToUrl('logo/')
.post({base64: base64, name: name})
.then(response => {
if(get(response, 'status') === 200)
setLogoURL(get(response, 'data.logo_url', logoURL))
})
}
return (
<header className='home-header col-md-12'>
<div className='col-md-12 container' style={{paddingTop: '10px'}}>
<div className='no-side-padding col-md-1 home-icon'>
<HeaderLogo
logoURL={logoURL}
onUpload={onLogoUpload}
defaultIcon={<ListIcon className='default-svg' />}
/>
</div>
<div className='col-md-11'>
<div className='col-md-12 no-side-padding flex-vertical-center'>
<OwnerButton {...source} href={versionedObjectURL} />
<span className='separator'>/</span>
<SourceButton label={source.short_code} href={`#${versionedObjectURL}`} />
{
!isVersionedObject &&
<React.Fragment>
<span className='separator'>/</span>
<VersionButton
label={source.version} retired={isRetired} href={`#${currentURL}`}
bgColor={GREEN}
/>
</React.Fragment>
}
<span style={{marginLeft: '10px'}}>
<Tooltip title="Copy URL" placement="right">
<IconButton onClick={onIconClick} color="primary">
<CopyIcon fontSize="small" />
</IconButton>
</Tooltip>
</span>
</div>
<div className='col-md-12 no-side-padding flex-vertical-center home-resource-full-name'>
<span style={{marginRight: '10px'}} className={isRetired ? 'retired': ''}>
{source.full_name}
</span>
{
includes(['view', 'edit'], source.public_access.toLowerCase()) &&
<PublicAccessChip publicAccess={source.public_access} />
}
</div>
<HeaderAttribute label="Description" value={source.description} gridClass="col-md-12" />
<HeaderAttribute label="Source Type" value={source.source_type} gridClass="col-md-12" />
<HeaderAttribute label="Default Locale" value={source.default_locale} gridClass="col-md-12" />
<HeaderAttribute label="Supported Locale" value={source.supported_locales.join(', ')} gridClass="col-md-12" />
<HeaderAttribute label="Custom Validation Schema" value={source.custom_validation_schema} 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']}
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={source.updated_on}
by={source.updated_by}
iconSize='medium'
noContainerClass
/>
</span>
<span style={{marginLeft: '10px'}}>
<LastUpdatedOnLabel
label='Created'
date={source.created_on}
by={source.created_by}
iconSize='medium'
noContainerClass
/>
</span>
{
source.external_id &&
<span style={{marginLeft: '10px', marginTop: '-8px'}}>
<ExternalIdLabel externalId={source.external_id} iconSize='medium' />
</span>
}
</div>
</div>
</div>
</header>
)
}
export default SourceHomeHeader;