Skip to content

Commit

Permalink
Merge pull request #467 from prabalsingh24/addEntityToCollection-Enti…
Browse files Browse the repository at this point in the history
…tyPage

Add entity to collection entity page
  • Loading branch information
MonkeyDo committed Jul 2, 2020
2 parents 8ee8412 + 2b83c46 commit 63e6a53
Show file tree
Hide file tree
Showing 13 changed files with 525 additions and 72 deletions.
7 changes: 1 addition & 6 deletions src/client/components/pages/collections.js
Expand Up @@ -39,13 +39,8 @@ class CollectionsPage extends React.Component {
}

handleTypeChange(type) {
if (typeof type !== 'string') {
return;
}

const query = type ? `&type=${type}` : '';

this.setState({from: 0, query});
this.setState({query});
}

render() {
Expand Down
8 changes: 6 additions & 2 deletions src/client/components/pages/entities/author.js
Expand Up @@ -104,7 +104,7 @@ AuthorAttributes.propTypes = {
};


function AuthorDisplayPage({entity, identifierTypes}) {
function AuthorDisplayPage({entity, identifierTypes, user}) {
const urlPrefix = getEntityUrl(entity);
return (
<div>
Expand Down Expand Up @@ -140,16 +140,20 @@ function AuthorDisplayPage({entity, identifierTypes}) {
<EntityFooter
bbid={entity.bbid}
deleted={entity.deleted}
entityType={entity.type}
entityUrl={urlPrefix}
lastModified={entity.revision.revision.createdAt}
user={user}
/>
</div>
);
}
AuthorDisplayPage.displayName = 'AuthorDisplayPage';
AuthorDisplayPage.propTypes = {
entity: PropTypes.object.isRequired,
identifierTypes: PropTypes.array
identifierTypes: PropTypes.array,
user: PropTypes.object.isRequired

};
AuthorDisplayPage.defaultProps = {
identifierTypes: []
Expand Down
8 changes: 5 additions & 3 deletions src/client/components/pages/entities/edition-group.js
Expand Up @@ -18,7 +18,6 @@

import * as bootstrap from 'react-bootstrap';
import * as entityHelper from '../../../helpers/entity';

import EditionTable from './edition-table';
import EntityFooter from './footer';
import EntityImage from './image';
Expand Down Expand Up @@ -62,7 +61,7 @@ EditionGroupAttributes.propTypes = {
};


function EditionGroupDisplayPage({entity, identifierTypes}) {
function EditionGroupDisplayPage({entity, identifierTypes, user}) {
const urlPrefix = getEntityUrl(entity);
return (
<div>
Expand Down Expand Up @@ -92,16 +91,19 @@ function EditionGroupDisplayPage({entity, identifierTypes}) {
<EntityFooter
bbid={entity.bbid}
deleted={entity.deleted}
entityType={entity.type}
entityUrl={urlPrefix}
lastModified={entity.revision.revision.createdAt}
user={user}
/>
</div>
);
}
EditionGroupDisplayPage.displayName = 'EditionGroupDisplayPage';
EditionGroupDisplayPage.propTypes = {
entity: PropTypes.object.isRequired,
identifierTypes: PropTypes.array
identifierTypes: PropTypes.array,
user: PropTypes.object.isRequired
};
EditionGroupDisplayPage.defaultProps = {
identifierTypes: []
Expand Down
8 changes: 5 additions & 3 deletions src/client/components/pages/entities/edition.js
Expand Up @@ -18,7 +18,6 @@

import * as bootstrap from 'react-bootstrap';
import * as entityHelper from '../../../helpers/entity';

import EntityFooter from './footer';
import EntityImage from './image';
import EntityLinks from './links';
Expand Down Expand Up @@ -100,7 +99,7 @@ EditionAttributes.propTypes = {
};


function EditionDisplayPage({entity, identifierTypes}) {
function EditionDisplayPage({entity, identifierTypes, user}) {
// relationshipTypeId = 10 refers the relation (<Work> is contained by <Edition>)
const relationshipTypeId = 10;
const worksContainedByEdition = getRelationshipTargetByTypeId(entity, relationshipTypeId);
Expand Down Expand Up @@ -155,16 +154,19 @@ function EditionDisplayPage({entity, identifierTypes}) {
<EntityFooter
bbid={entity.bbid}
deleted={entity.deleted}
entityType={entity.type}
entityUrl={urlPrefix}
lastModified={entity.revision.revision.createdAt}
user={user}
/>
</div>
);
}
EditionDisplayPage.displayName = 'EditionDisplayPage';
EditionDisplayPage.propTypes = {
entity: PropTypes.object.isRequired,
identifierTypes: PropTypes.array
identifierTypes: PropTypes.array,
user: PropTypes.object.isRequired
};
EditionDisplayPage.defaultProps = {
identifierTypes: []
Expand Down
176 changes: 126 additions & 50 deletions src/client/components/pages/entities/footer.js
Expand Up @@ -18,72 +18,148 @@

import * as bootstrap from 'react-bootstrap';
import * as utilsHelper from '../../../helpers/utils';

import AddToCollectionModal from '../parts/add-to-collection-modal';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import PropTypes from 'prop-types';
import React from 'react';


const {formatDate} = utilsHelper;
const {
Button, ButtonGroup, Col, Row
Alert, Button, ButtonGroup, Col, Row
} = bootstrap;

function EntityFooter({bbid, deleted, entityUrl, lastModified}) {
return (
<div>
<Row>
<Col md={6} mdOffset={3}>
<ButtonGroup justified>
<Button
bsStyle="warning"
disabled={deleted}
href={`${entityUrl}/edit`}
title="Edit Entity"
>
<FontAwesomeIcon icon="pencil-alt"/>&nbsp;Edit
</Button>
<Button
bsStyle="primary"
href={`${entityUrl}/revisions`}
title="Revision History"
>
<FontAwesomeIcon icon="history"/>&nbsp;History
</Button>
<Button
bsStyle="danger"
disabled={deleted}
href={`${entityUrl}/delete`}
title="Delete Entity"
>
<FontAwesomeIcon icon="times"/>&nbsp;Delete
</Button>
<Button
bsStyle="default"
href={`/merge/add/${bbid}`}
title="Select entity for merging"
>
<FontAwesomeIcon flip="vertical" icon="code-branch"/>
&nbsp;Merge
</Button>
</ButtonGroup>
</Col>
</Row>
<div className="text-center margin-top-d10">
<dl>
<dt>Last Modified</dt>
<dd>{formatDate(new Date(lastModified))}</dd>
</dl>
class EntityFooter extends React.Component {
constructor(props) {
super(props);
this.state = {
message: {
text: null,
type: null
},
showModal: false
};

this.onCloseModal = this.onCloseModal.bind(this);
this.handleShowModal = this.handleShowModal.bind(this);
this.handleAlertDismiss = this.handleAlertDismiss.bind(this);
this.closeModalAndShowMessage = this.closeModalAndShowMessage.bind(this);
}

onCloseModal() {
this.setState({showModal: false});
}

handleShowModal() {
if (this.props.user) {
this.setState({showModal: true});
}
else {
this.setState({
message: {
text: 'You need to be logged in',
type: 'danger'
}
});
}
}

closeModalAndShowMessage(message) {
this.setState({
message,
showModal: false
});
}

handleAlertDismiss() {
this.setState({message: {}});
}

render() {
return (
<div>
{
this.props.user ?
<div>
<AddToCollectionModal
bbids={[this.props.bbid]}
closeModalAndShowMessage={this.closeModalAndShowMessage}
entityType={this.props.entityType}
handleCloseModal={this.onCloseModal}
show={this.state.showModal}
userId={this.props.user.id}
/>
</div> : null
}
{
this.state.message.text ?
<Alert bsStyle={this.state.message.type} onDismiss={this.handleAlertDismiss}>{this.state.message.text}</Alert> : null

}
<Row>
<Col md={10} mdOffset={1}>
<ButtonGroup justified>
<Button
bsStyle="warning"
disabled={this.props.deleted}
href={`${this.props.entityUrl}/edit`}
title="Edit Entity"
>
<FontAwesomeIcon icon="pencil-alt"/>&nbsp;Edit
</Button>
<Button
bsStyle="primary"
href={`${this.props.entityUrl}/revisions`}
title="Revision History"
>
<FontAwesomeIcon icon="history"/>&nbsp;History
</Button>
<Button
bsStyle="danger"
disabled={this.props.deleted}
href={`${this.props.entityUrl}/delete`}
title="Delete Entity"
>
<FontAwesomeIcon icon="times"/>&nbsp;Delete
</Button>
<Button
bsStyle="default"
href={`/merge/add/${this.props.bbid}`}
title="Select entity for merging"
>
<FontAwesomeIcon flip="vertical" icon="code-branch"/>
&nbsp;Merge
</Button>
<Button
bsStyle="primary"
href="#"
title="Add To Collection"
onClick={this.handleShowModal}
>
<FontAwesomeIcon icon="grip-vertical"/>
&nbsp;Add to collection
</Button>
</ButtonGroup>
</Col>
</Row>
<div className="text-center margin-top-d10">
<dl>
<dt>Last Modified</dt>
<dd>{formatDate(new Date(this.props.lastModified))}</dd>
</dl>
</div>
</div>
</div>
);
);
}
}
EntityFooter.displayName = 'EntityFooter';
EntityFooter.propTypes = {
bbid: PropTypes.string.isRequired,
deleted: PropTypes.bool,
entityType: PropTypes.string.isRequired,
entityUrl: PropTypes.string.isRequired,
lastModified: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]).isRequired
lastModified: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]).isRequired,
user: PropTypes.object.isRequired
};
EntityFooter.defaultProps = {
deleted: false
Expand Down
8 changes: 5 additions & 3 deletions src/client/components/pages/entities/publisher.js
Expand Up @@ -18,7 +18,6 @@

import * as bootstrap from 'react-bootstrap';
import * as entityHelper from '../../../helpers/entity';

import EditionTable from './edition-table';
import EntityFooter from './footer';
import EntityImage from './image';
Expand Down Expand Up @@ -80,7 +79,7 @@ PublisherAttributes.propTypes = {
};


function PublisherDisplayPage({entity, identifierTypes}) {
function PublisherDisplayPage({entity, identifierTypes, user}) {
const urlPrefix = getEntityUrl(entity);
return (
<div>
Expand Down Expand Up @@ -110,16 +109,19 @@ function PublisherDisplayPage({entity, identifierTypes}) {
<EntityFooter
bbid={entity.bbid}
deleted={entity.deleted}
entityType={entity.type}
entityUrl={urlPrefix}
lastModified={entity.revision.revision.createdAt}
user={user}
/>
</div>
);
}
PublisherDisplayPage.displayName = 'PublisherDisplayPage';
PublisherDisplayPage.propTypes = {
entity: PropTypes.object.isRequired,
identifierTypes: PropTypes.array
identifierTypes: PropTypes.array,
user: PropTypes.object.isRequired
};
PublisherDisplayPage.defaultProps = {
identifierTypes: []
Expand Down
7 changes: 5 additions & 2 deletions src/client/components/pages/entities/work.js
Expand Up @@ -71,7 +71,7 @@ WorkAttributes.propTypes = {
};


function WorkDisplayPage({entity, identifierTypes}) {
function WorkDisplayPage({entity, identifierTypes, user}) {
// relationshipTypeId = 10 refers the relation (<Work> is contained by <Edition>)
const relationshipTypeId = 10;
const editionsContainWork = getRelationshipSourceByTypeId(entity, relationshipTypeId);
Expand Down Expand Up @@ -107,16 +107,19 @@ function WorkDisplayPage({entity, identifierTypes}) {
<EntityFooter
bbid={entity.bbid}
deleted={entity.deleted}
entityType={entity.type}
entityUrl={urlPrefix}
lastModified={entity.revision.revision.createdAt}
user={user}
/>
</div>
);
}
WorkDisplayPage.displayName = 'WorkDisplayPage';
WorkDisplayPage.propTypes = {
entity: PropTypes.object.isRequired,
identifierTypes: PropTypes.array
identifierTypes: PropTypes.array,
user: PropTypes.object.isRequired
};
WorkDisplayPage.defaultProps = {
identifierTypes: []
Expand Down

0 comments on commit 63e6a53

Please sign in to comment.