Skip to content

Header customization added #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
akhilkala wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Header customization added #10

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
91fbc4f
Header customisation added
Sep 21, 2021
3e39af1
Updated default options behaviour
Sep 21, 2021
54f3a28
Merge branch 'master' into header_customisation
snyaggarwal Sep 23, 2021
e42ef90
updated attributes to default
snyaggarwal Sep 23, 2021
9254913
json timer removed
Sep 23, 2021
ba026ba
Default configs refactored
Sep 23, 2021
3dbb1aa
more customisation added to header attribute config
Sep 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 101 additions & 0 deletions src/components/collections/CollectionHome.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,107 @@ const DEFAULT_CONFIG = {
web_default: true,
is_default: false,
config: {
header:{
shrink: false,
visibleAttributes: [
{
label: "Short Code",
value: "short_code",
type: "text"
},
{
label: "Name",
value: "name",
type: "text"
},
{
label: "Collection Type",
value: "collection_type",
type: "text"
},
{
label: "Custom Validation Schema",
value: "custom_validation_schema",
type: "text"
},
{
label: "Supported Locales",
value: "supported_locales",
}
],
invisibleAttributes: [
{
label: "Canonical Url",
value: "canonical_url",
type: "url"
},
{
label: "Publisher",
value: "publisher",
type: "text"
},
{
label: "Purpose",
value: "purpose",
type: "text"
},
{
label: "Copyright",
value: "copyright",
type: "text"
},
{
label: "Preferred Source",
value: "preferred_source",
type: "text"
},
{
label: "Custom Resources Linked Source",
value: "custom_resources_linked_source",
type: "text"
},
{
label: "Revision Date",
value: "revision_date",
type: "date"
},
{
label: "Identifier",
value: "identifier",
type: "json"
},
{
label: "Contact",
value: "contact",
type: "json"
},
{
label: "Jurisdiction",
value: "jurisdiction",
type: "json"
},
{
label: "Meta",
value: "meta",
type: "json"
},
{
label: "Immutable",
value: "immutable",
type: "boolean"
},
{
label: "Locked Date",
value: "locked_date",
type: "date"
},
{
label: "Experimental",
value: "experimental",
type: "boolean"
},
]
},
tabs: [
{type: "concepts", label: "Concepts", page_size: 25, "default": true, layout: 'table'},
{type: "mappings", label: "Mappings", page_size: 25, layout: 'table'},
Expand Down
84 changes: 51 additions & 33 deletions src/components/collections/CollectionHomeHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
Delete as DeleteIcon,
} from '@material-ui/icons';
import { Tooltip, Button, ButtonGroup, Collapse } from '@material-ui/core';
import { keys, map, startCase, get } from 'lodash';
import { filter, map, get } from 'lodash';
import { toFullAPIURL, copyURL, nonEmptyCount, currentUserHasAccess } from '../../common/utils';
import { GREEN } from '../../common/constants';
import APIService from '../../services/APIService';
Expand All @@ -32,33 +32,43 @@ import ProcessingChip from '../common/ProcessingChip';
import ConceptContainerDelete from '../common/ConceptContainerDelete';
import CollapsibleDivider from '../common/CollapsibleDivider';

const HIDDEN_ATTRIBUTES = {
canonical_url: 'url',
publisher: 'text',
purpose: 'text',
copyright: 'text',
preferred_source: 'text',
custom_resources_linked_source: 'text',
revision_date: 'date',
identifier: 'json',
contact: 'json',
jurisdiction: 'json',
meta: 'json',
immutable: 'boolean',
locked_date: 'date',
experimental: 'boolean'
}
const DEFAULT_VISIBLE_ATTRIBUTES = [
Copy link
Copy Markdown
Contributor

@snyaggarwal snyaggarwal Sep 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn't this come from DEFAULT_CONFIG? why redefine here?

{
label: "Short Code",
value: "short_code",
type: "text"
},
{
label: "Name",
value: "name",
type: "text"
},
{
label: "Collection Type",
value: "collection_type",
type: "text"
},
{
label: "Custom Validation Schema",
value: "custom_validation_schema",
type: "text"
},
{
label: "Supported Locales",
value: "supported_locales",
}
]

const CollectionHomeHeader = ({
collection, isVersionedObject, versionedObjectURL, currentURL, config
}) => {
const downloadFileName = isVersionedObject ? `${collection.type}-${collection.short_code}` : `${collection.type}-${collection.short_code}-${collection.id}`;
const hasAccess = currentUserHasAccess();
const [openHeader, setOpenHeader] = React.useState(!get(config, 'config.shrinkHeader', false));
const [openHeader, setOpenHeader] = React.useState(!get(config, 'config.header.shrink', false));
const [deleteDialog, setDeleteDialog] = React.useState(false);
const [logoURL, setLogoURL] = React.useState(collection.logo_url)
const [collectionForm, setCollectionForm] = React.useState(false);
const onIconClick = () => copyURL(toFullAPIURL(currentURL))
const hasManyHiddenAttributes = nonEmptyCount(collection, keys(HIDDEN_ATTRIBUTES)) >= 4;
const onLogoUpload = (base64, name) => {
APIService.new().overrideURL(versionedObjectURL).appendToUrl('logo/')
.post({base64: base64, name: name})
Expand All @@ -67,10 +77,21 @@ const CollectionHomeHeader = ({
setLogoURL(get(response, 'data.logo_url', logoURL))
})
}
const getDefaultHiddenAttributes = () => {
Copy link
Copy Markdown
Contributor

@snyaggarwal snyaggarwal Sep 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for single line methods you dont need {} and return:

return filter(DEFAULT_VISIBLE_ATTRIBUTES, (attr) => {
Copy link
Copy Markdown
Contributor

@snyaggarwal snyaggarwal Sep 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for single argument you dont ().

return !map(get(config, 'config.header.visibleAttributes'),(attr) => attr.value).includes(attr.value)
}
)
}
const getHiddenAttributes = () => {
Copy link
Copy Markdown
Contributor

@snyaggarwal snyaggarwal Sep 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for single line methods you dont need {} and return:

const getHiddenAttribute = () => ({...get(config, 'config.header.invisibleAttributes'), ...getDefaultHiddenAttributes()})

return {...get(config, 'config.header.invisibleAttributes'), ...getDefaultHiddenAttributes()}
}
const hasManyHiddenAttributes = nonEmptyCount(collection, map(getHiddenAttributes(),(attr) => attr.value)) >= 4;


React.useEffect(
() => setOpenHeader(!get(config, 'config.shrinkHeader', false)),
[get(config, 'config.shrinkHeader')]
() => setOpenHeader(!get(config, 'config.header.shrink', false)),
[get(config, 'config.header.shrink')]
)

const deleteCollection = () => {
Expand Down Expand Up @@ -163,28 +184,25 @@ const CollectionHomeHeader = ({
{collection.description}
</div>
}
<HeaderAttribute label="Short Code" value={collection.short_code} gridClass="col-md-12" />
<HeaderAttribute label="Name" value={collection.name} gridClass="col-md-12" />
<HeaderAttribute label="Collection Type" value={collection.collection_type} gridClass="col-md-12" />
<HeaderAttribute label="Supported Locales" value={<SupportedLocales {...collection} />} gridClass="col-md-12" type="component" />
<HeaderAttribute label="Custom Validation Schema" value={collection.custom_validation_schema} gridClass="col-md-12" />
{map(get(config, 'config.header.visibleAttributes'), (attr) => {
Copy link
Copy Markdown
Contributor

@snyaggarwal snyaggarwal Sep 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for single argument you dont ().

if (attr.value === "supported_locales" || attr.value === "default_locale"){
return <HeaderAttribute key={attr.label} label="Supported Locales" value={<SupportedLocales {...collection} />} gridClass="col-md-12" type="component" />
}
return <HeaderAttribute key={attr.label} label={attr.label} value={collection[attr.value]} type={attr.type} gridClass="col-md-12"/>
})}
<HeaderAttribute label="Custom Attributes" value={<CustomAttributesPopup attributes={collection.extras} />} gridClass="col-md-12" />
{
hasManyHiddenAttributes ?
<div className='col-md-12 no-side-padding'>
<CollapsibleAttributes
hiddenAttributes={getHiddenAttributes()}
object={collection}
urlAttrs={['canonical_url']}
textAttrs={['publisher', 'purpose', 'copyright', 'preferred_source', 'custom_resources_linked_source']}
dateAttrs={['revision_date', 'locked_date']}
jsonAttrs={['identifier', 'contact', 'jurisdiction']}
booleanAttrs={['immutable', 'experimental']}
/>
</div> :
<React.Fragment>
{
map(HIDDEN_ATTRIBUTES, (type, attr) => (
<HeaderAttribute key={attr} label={`${startCase(attr)}`} value={get(collection, attr)} gridClass="col-md-12" type={type} />
map(getHiddenAttributes(), (attr) => (
<HeaderAttribute key={attr.label} label={attr.label} value={get(collection, attr.value)} gridClass="col-md-12" type={attr.type} />
))
}
</React.Fragment>
Expand Down
37 changes: 12 additions & 25 deletions src/components/common/CollapsibleAttributes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import {
ArrowDropDown as ArrowDownIcon, ArrowDropUp as ArrowUpIcon
} from '@material-ui/icons';
import { Collapse, Chip } from '@material-ui/core';
import { map, get, startCase, isArray } from 'lodash';
import { map, get } from 'lodash';
import HeaderAttribute from './HeaderAttribute';
import SupportedLocales from '../common/SupportedLocales';

const CollapsibleAttributes = ({
object, urlAttrs, jsonAttrs, textAttrs, dateAttrs, booleanAttrs
object, hiddenAttributes
}) => {
const [expand, setExpand] = React.useState(false);
const onExpand = () => setExpand(!expand);
Expand All @@ -16,29 +17,15 @@ const CollapsibleAttributes = ({
<React.Fragment>
<Collapse in={expand} className="col-md-8" style={{padding: '0px', display: `${expand ? 'block' : 'none'}`}}>
{
isArray(urlAttrs) && map(urlAttrs, attr => (
<HeaderAttribute key={attr} label={`${startCase(attr)}`} value={get(object, attr)} gridClass='col-md-10' type='url' />
))
}
{
isArray(textAttrs) && map(textAttrs, attr => (
<HeaderAttribute key={attr} label={`${startCase(attr)}`} value={get(object, attr)} gridClass='col-md-10' />
))
}
{
isArray(booleanAttrs) && map(booleanAttrs, attr => (
<HeaderAttribute key={attr} label={`${startCase(attr)}`} value={get(object, attr)} gridClass='col-md-10' type='boolean' />
))
}
{
isArray(dateAttrs) && map(dateAttrs, attr => (
<HeaderAttribute key={attr} label={`${startCase(attr)}`} value={get(object, attr)} gridClass='col-md-10' type='date' />
))
}
{
isArray(jsonAttrs) && map(jsonAttrs, attr => (
<HeaderAttribute key={attr} label={`${startCase(attr)}`} value={get(object, attr)} gridClass='col-md-10' type='json' />
))
map(hiddenAttributes, (attr) => {
const value = get(object, attr.value)
if (!value) return null

if (attr.value === "supported_locales" || attr.value === "default_locale"){
return <HeaderAttribute key={attr.label} label="Supported Locales" value={<SupportedLocales {...object} />} gridClass="col-md-12" type="component" />
}
return <HeaderAttribute key={attr.label} label={attr.label} value={value} gridClass='col-md-10' type={attr.type} />
})
}
</Collapse>
<div className='col-md-12 no-side-padding' style={{marginLeft: '-8px', marginTop: '2px'}}>
Expand Down
3 changes: 2 additions & 1 deletion src/components/common/JSONEditor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import JSONInput from 'react-json-editor-ajrm';
import locale from 'react-json-editor-ajrm/locale/en';

const JSONEditor = props => {

return (
<JSONInput locale={ locale } height='auto' width='100%' {...props} />
<JSONInput waitAfterKeyPress={2500} locale={locale} height='auto' width='100%' {...props} />
)
}

Expand Down
20 changes: 18 additions & 2 deletions src/components/orgs/OrgHome.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,25 @@ const DEFAULT_CONFIG = {
config: {
header: {
...BACKGROUND_CONFIG,
height: '',
attributes: [
{
label: "Company",
value: "company",
type:"text"
Copy link
Copy Markdown
Contributor

@snyaggarwal snyaggarwal Sep 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

space after :

},
{
label: "Location",
value: "location",
type:"text"
Copy link
Copy Markdown
Contributor

@snyaggarwal snyaggarwal Sep 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

space after :

},
{
label: "Website",
value: "website",
type:"url"
Copy link
Copy Markdown
Contributor

@snyaggarwal snyaggarwal Sep 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

space after :

},
],
height: null,
controls: true,
attributes: true,
signatures: true,
logo: true,
shrink: false,
Expand Down
12 changes: 7 additions & 5 deletions src/components/orgs/OrgHomeHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
Edit as EditIcon,
} from '@material-ui/icons';
import { Tooltip, ButtonGroup, Button, Collapse } from '@material-ui/core';
import { isEmpty, get } from 'lodash';
import { isEmpty, get, map } from 'lodash';
import { toFullAPIURL, copyURL, currentUserHasAccess } from '../../common/utils';
import APIService from '../../services/APIService';
import OwnerButton from '../common/OwnerButton';
Expand All @@ -24,15 +24,15 @@ import OrgForm from './OrgForm';

const OrgHomeHeader = ({ org, url, fhir, extraComponents, config }) => {
const downloadFileName = `Org-${get(org, 'id')}`;
const [openHeader, setOpenHeader] = React.useState(!get(config, 'config.shrinkHeader', false));
const [openHeader, setOpenHeader] = React.useState(!get(config, 'config.header.shrink', false));
const [logoURL, setLogoURL] = React.useState(org.logo_url)
const [orgForm, setOrgForm] = React.useState(false);
const hasAccess = currentUserHasAccess();
const onIconClick = () => copyURL(toFullAPIURL(url));

React.useEffect(
() => setOpenHeader(!get(config, 'config.shrinkHeader', false)),
[get(config, 'config.shrinkHeader')]
() => setOpenHeader(!get(config, 'config.header.shrink', false)),
[get(config, 'config.header.shrink')]
)

const onLogoUpload = (base64, name) => {
Expand Down Expand Up @@ -96,7 +96,9 @@ const OrgHomeHeader = ({ org, url, fhir, extraComponents, config }) => {
{org.description}
</div>
}
<HeaderAttribute label="Company" value={org.company} gridClass="col-md-12" />
{map(get(config, 'config.header.attributes'), (attr) => {
Copy link
Copy Markdown
Contributor

@snyaggarwal snyaggarwal Sep 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for single argument you dont ().

return <HeaderAttribute key={attr.label} label={attr.label} value={org[attr.value]} type={attr.type} gridClass="col-md-12" />
})}
<HeaderAttribute label="Custom Attributes" value={!isEmpty(org.extras) && <CustomAttributesPopup attributes={org.extras} />} gridClass="col-md-12" />
<div className='col-md-12 no-side-padding flex-vertical-center' style={{paddingTop: '10px'}}>
{
Expand Down
Loading