Skip to content

Commit

Permalink
Update Bootstrap: Metadata (#2079)
Browse files Browse the repository at this point in the history
  • Loading branch information
@maiwald
maiwald committed Aug 26, 2024
1 parent 291829c commit b5d066a
Show file tree
Hide file tree
Showing 16 changed files with 745 additions and 740 deletions.
87 changes: 41 additions & 46 deletions app/packs/src/components/metadata/MetadataAlternateIdentifier.js
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,51 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Col, FormControl, FormGroup, Row } from 'react-bootstrap';
import {
Button, Col, Form, Row
} from 'react-bootstrap';
import Select from 'react-select3';
import ControlLabel from 'src/components/legacyBootstrap/ControlLabel'

import { alternateIdentifierTypes } from 'src/components/staticDropdownOptions/radar/alternateIdentifierTypes'
import { alternateIdentifierTypes } from 'src/components/staticDropdownOptions/radar/alternateIdentifierTypes';

const MetadataAlternateIdentifier = ({ alternateIdentifier, index, onChange, onRemove }) => {
const alternateIdentifierType = alternateIdentifierTypes.find(el => el.value == alternateIdentifier.alternateIdentifierType)
const MetadataAlternateIdentifier = ({
alternateIdentifier, index, onChange, onRemove
}) => {
const alternateIdentifierType = alternateIdentifierTypes
.find((el) => el.value === alternateIdentifier.alternateIdentifierType);

return (
<div>
<Row>
<Col sm={8}>
<FormGroup>
<ControlLabel>
Identifier
</ControlLabel>
<FormControl
type="text"
value={alternateIdentifier.value}
onChange={event => onChange(event.target.value, 'alternateIdentifiers', index, 'value')}
/>
</FormGroup>
</Col>
<Col sm={3}>
<FormGroup>
<ControlLabel>
Identifier type
</ControlLabel>
<Select
name="alternateIdentifierType"
options={alternateIdentifierTypes}
onChange={option => onChange(option.value, 'alternateIdentifiers', index, 'alternateIdentifierType')}
value={alternateIdentifierType}
menuPortalTarget={document.body}
styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
/>
</FormGroup>
</Col>
<Col sm={1}>
<ControlLabel>
&nbsp;
</ControlLabel>
<Button variant="danger" onClick={() => onRemove('alternateIdentifiers', index)}>
<i className="fa fa-trash-o" />
</Button>
</Col>
</Row>
</div>
)
}
<Row className="mb-3">
<Form.Group as={Col} xs={8}>
<Form.Label>
Identifier
</Form.Label>
<Form.Control
type="text"
value={alternateIdentifier.value}
onChange={(event) => onChange(event.target.value, 'alternateIdentifiers', index, 'value')}
/>
</Form.Group>
<Form.Group as={Col} xs={3}>
<Form.Label>
Identifier type
</Form.Label>
<Select
name="alternateIdentifierType"
options={alternateIdentifierTypes}
onChange={(option) => onChange(option.value, 'alternateIdentifiers', index, 'alternateIdentifierType')}
value={alternateIdentifierType}
menuPortalTarget={document.body}
styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
/>
</Form.Group>
<Col xs={1} className="d-flex align-items-center">
<Button variant="danger" onClick={() => onRemove('alternateIdentifiers', index)}>
<i className="fa fa-trash-o" />
</Button>
</Col>
</Row>
);
};

MetadataAlternateIdentifier.propTypes = {
alternateIdentifier: PropTypes.object.isRequired,
Expand Down
50 changes: 26 additions & 24 deletions app/packs/src/components/metadata/MetadataAlternateIdentifiers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,33 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Button } from 'react-bootstrap';

import MetadataAlternateIdentifier from './MetadataAlternateIdentifier'
import MetadataAlternateIdentifier from 'src/components/metadata/MetadataAlternateIdentifier';

const MetadataAlternateIdentifiers = ({ metadata, onAdd, onChange, onRemove }) => {
return (
<div>
<h4>Alternate identifiers</h4>
<p>
An identifier other than the DOI applied to the collection. The alternate identifier
should be an additional identifier for the same instance of the resource (i.e., same location, same file).
For other places where the same content can be found, please use a related identifier.
</p>
{
metadata.alternateIdentifiers && metadata.alternateIdentifiers.map((alternateIdentifier, index) => (
<MetadataAlternateIdentifier
alternateIdentifier={alternateIdentifier} index={index} key={index}
onChange={onChange} onRemove={onRemove}
/>
))
}
<Button variant="success" size="sm" onClick={event => onAdd('alternateIdentifiers')}>
Add new alternate identifier
</Button>
</div>
)
}
const MetadataAlternateIdentifiers = ({
metadata, onAdd, onChange, onRemove
}) => (
<div>
<h4>Alternate identifiers</h4>
<p>
An identifier other than the DOI applied to the collection. The alternate identifier
should be an additional identifier for the same instance of the resource (i.e., same
location, same file). For other places where the same content can be found, please
use a related identifier.
</p>
{metadata.alternateIdentifiers && metadata.alternateIdentifiers.map((alternateIdentifier, index) => (
<MetadataAlternateIdentifier
alternateIdentifier={alternateIdentifier}
index={index}
key={index}
onChange={onChange}
onRemove={onRemove}
/>
))}
<Button variant="success" size="sm" onClick={() => onAdd('alternateIdentifiers')}>
Add new alternate identifier
</Button>
</div>
);

MetadataAlternateIdentifiers.propTypes = {
metadata: PropTypes.object.isRequired,
Expand Down
108 changes: 58 additions & 50 deletions app/packs/src/components/metadata/MetadataContainer.js
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,36 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Tabs, Tab } from 'react-bootstrap';
import { Card, Tabs, Tab } from 'react-bootstrap';
import UIActions from 'src/stores/alt/actions/UIActions';
import Metadata from 'src/models/Metadata';
import UIStore from 'src/stores/alt/stores/UIStore';
import DetailActions from 'src/stores/alt/actions/DetailActions'
import ElementActions from 'src/stores/alt/actions/ElementActions'
import DetailActions from 'src/stores/alt/actions/DetailActions';
import ElementActions from 'src/stores/alt/actions/ElementActions';
import LoadingActions from 'src/stores/alt/actions/LoadingActions';

import MetadataHeader from './MetadataHeader'
import MetadataGeneral from './MetadataGeneral'
import MetadataCreators from './MetadataCreators'
import MetadataContributors from './MetadataContributors'
import MetadataAlternateIdentifiers from './MetadataAlternateIdentifiers'
import MetadataRelatedIdentifiers from './MetadataRelatedIdentifiers'
import MetadataRightsList from './MetadataRightsList'
import MetadataFundingReferences from './MetadataFundingReferences'
import Panel from 'src/components/legacyBootstrap/Panel'
import MetadataHeader from 'src/components/metadata/MetadataHeader';
import MetadataGeneral from 'src/components/metadata/MetadataGeneral';
import MetadataCreators from 'src/components/metadata/MetadataCreators';
import MetadataContributors from 'src/components/metadata/MetadataContributors';
import MetadataAlternateIdentifiers from 'src/components/metadata/MetadataAlternateIdentifiers';
import MetadataRelatedIdentifiers from 'src/components/metadata/MetadataRelatedIdentifiers';
import MetadataRightsList from 'src/components/metadata/MetadataRightsList';
import MetadataFundingReferences from 'src/components/metadata/MetadataFundingReferences';

export default class MetadataContainer extends Component {
constructor(props) {
super(props);
const { metadata } = props;
this.state = {
activeTab: 'general',
metadata: metadata
metadata
};

this.handleAdd = this.handleAdd.bind(this)
this.handleChange = this.handleChange.bind(this)
this.handleRemove = this.handleRemove.bind(this)
this.handleSave = this.handleSave.bind(this)
this.handleClose = this.handleClose.bind(this)
this.handleAdd = this.handleAdd.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleRemove = this.handleRemove.bind(this);
this.handleSave = this.handleSave.bind(this);
this.handleClose = this.handleClose.bind(this);
}

componentWillReceiveProps(nextProps) {
Expand All @@ -40,21 +39,21 @@ export default class MetadataContainer extends Component {
}

handleAdd(field, index, subfield) {
const { metadata } = this.state
metadata.add(field, index, subfield)
this.setState({ metadata })
const { metadata } = this.state;
metadata.add(field, index, subfield);
this.setState({ metadata });
}

handleChange(value, field, index, subfield, subindex, subsubfield) {
const { metadata } = this.state
metadata.change(value, field, index, subfield, subindex, subsubfield)
this.setState({ metadata })
const { metadata } = this.state;
metadata.change(value, field, index, subfield, subindex, subsubfield);
this.setState({ metadata });
}

handleRemove(field, index, subfield, subindex) {
const { metadata } = this.state
metadata.remove(field, index, subfield, subindex)
this.setState({ metadata })
const { metadata } = this.state;
metadata.remove(field, index, subfield, subindex);
this.setState({ metadata });
}

handleSelect(eventKey) {
Expand All @@ -65,57 +64,66 @@ export default class MetadataContainer extends Component {
}

handleSave() {
const { metadata } = this.state
const { metadata } = this.state;
LoadingActions.start();
ElementActions.storeMetadata(metadata)
ElementActions.storeMetadata(metadata);
metadata.updateChecksum();
this.setState({ metadata })
this.setState({ metadata });
}

handleClose() {
const { metadata } = this.state
DetailActions.close(metadata, true)
const { metadata } = this.state;
DetailActions.close(metadata, true);
}

render() {
const { metadata } = this.state;
const { currentCollection } = UIStore.getState()
const title = currentCollection && `DataCite/RADAR Metadata for collection "${currentCollection.label}"`
const saveBtnDisplay = metadata.isEdited ? true : false;
const { currentCollection } = UIStore.getState();
const title = currentCollection && `DataCite/RADAR Metadata for collection "${currentCollection.label}"`;
const saveBtnDisplay = !!metadata.isEdited;

return (
<Panel variant="light" className="eln-panel-detail">
<Panel.Heading>
<MetadataHeader title={title} saveBtnDisplay={saveBtnDisplay} onSave={this.handleSave} onClose={this.handleClose} />
</Panel.Heading>
<Panel.Body>
<Tabs activeKey={this.state.activeTab} onSelect={key => this.handleSelect(key)}
className="metadata-tabs" id="metadata-tabs">
<Tab eventKey="general" title="General" key="general">
<Card className="eln-panel-detail">
<Card.Header>
<MetadataHeader
title={title}
saveBtnDisplay={saveBtnDisplay}
onSave={this.handleSave}
onClose={this.handleClose}
/>
</Card.Header>
<Card.Body className="tabs-container--with-borders">
<Tabs
id="metadata-tabs"
activeKey={this.state.activeTab}
onSelect={key => this.handleSelect(key)}
className="metadata-tabs"
>
<Tab eventKey="general" title="General">
<MetadataGeneral
metadata={metadata.metadata}
onAdd={this.handleAdd}
onChange={this.handleChange}
onRemove={this.handleRemove}
/>
</Tab>
<Tab eventKey="creators" title="Creators" key="creators">
<Tab eventKey="creators" title="Creators">
<MetadataCreators
metadata={metadata.metadata}
onAdd={this.handleAdd}
onChange={this.handleChange}
onRemove={this.handleRemove}
/>
</Tab>
<Tab eventKey="contributors" title="Contributors" key="contributors">
<Tab eventKey="contributors" title="Contributors">
<MetadataContributors
metadata={metadata.metadata}
onAdd={this.handleAdd}
onChange={this.handleChange}
onRemove={this.handleRemove}
/>
</Tab>
<Tab eventKey="identifiers" title="Identifiers" key="identifiers">
<Tab eventKey="identifiers" title="Identifiers">
<MetadataRelatedIdentifiers
metadata={metadata.metadata}
onAdd={this.handleAdd}
Expand All @@ -130,15 +138,15 @@ export default class MetadataContainer extends Component {
onRemove={this.handleRemove}
/>
</Tab>
<Tab eventKey="rights" title="Rights" key="rights">
<Tab eventKey="rights" title="Rights">
<MetadataRightsList
metadata={metadata.metadata}
onAdd={this.handleAdd}
onChange={this.handleChange}
onRemove={this.handleRemove}
/>
</Tab>
<Tab eventKey="funding" title="Funding" key="funding">
<Tab eventKey="funding" title="Funding">
<MetadataFundingReferences
metadata={metadata.metadata}
onAdd={this.handleAdd}
Expand All @@ -147,8 +155,8 @@ export default class MetadataContainer extends Component {
/>
</Tab>
</Tabs>
</Panel.Body>
</Panel>
</Card.Body>
</Card>
);
}
}
Expand Down
Loading

0 comments on commit b5d066a

Please sign in to comment.