Skip to content
Permalink
Browse files

Merge pull request #250 from akhilesh26/work_table

feat(workTable): Add work table on the edition page and edition table on the work page. #BB-330
  • Loading branch information...
MonkeyDo committed Feb 13, 2019
2 parents 804aed5 + dd3e297 commit 8ea445434c565e7d6dd5e7582adac4da7db4f6ed
@@ -67,44 +67,73 @@ EditionTableRow.propTypes = {
edition: PropTypes.object.isRequired
};

function EditionTable({entity}) {
function EditionTable({editions, entity}) {
return (
<div>
<h2>Editions</h2>
<Table striped>
<thead>
<tr>
<th>Name</th>
<th>Format</th>
<th>ISBN</th>
<th>Release Date</th>
</tr>
</thead>
<tbody>
{
entity.editions.map((edition) => (
<EditionTableRow
edition={edition}
key={edition.bbid}
/>
))
}
</tbody>
</Table>
<Button
bsStyle="success"
className="margin-top-d15"
href={`/edition/create?${
entity.type.toLowerCase()}=${entity.bbid}`}
>
<Icon name="plus"/>
{' Add Edition'}
</Button>
{
editions.length ?
<React.Fragment>
<Table striped>
<thead>
<tr>
<th>Name</th>
<th>Format</th>
<th>ISBN</th>
<th>Release Date</th>
</tr>
</thead>
<tbody>
{
editions.map((edition) => (
<EditionTableRow
edition={edition}
key={edition.bbid}
/>
))
}
</tbody>
</Table>
<Button
bsStyle="success"
className="margin-top-d15"
href={`/edition/create?${
entity.type.toLowerCase()}=${entity.bbid}`}
>
<Icon name="plus"/>
{' Add Edition'}
</Button>
<hr className="margin-bottom-d0"/>
</React.Fragment> :
<React.Fragment>
<span className="margin-right-2 pull-left">
<Button
bsStyle="success"
href={`/edition/create?${
entity.type.toLowerCase()}=${entity.bbid}`}
>
<Icon name="book" size="2x"/>
<br/>
Add Edition
</Button>
</span>
<span>
<h4>There are no Editions yet!</h4>
<p>
Help us complete BookBrainz
<br/>
</p>
<br/><small>Not sure what to do? Visit the <a href="/help">help page</a> to get started.</small>
</span>
<hr className="margin-bottom-d0"/>
</React.Fragment>
}
</div>
);
}
EditionTable.displayName = 'EditionTable';
EditionTable.propTypes = {
editions: PropTypes.array.isRequired,
entity: PropTypes.object.isRequired
};

@@ -26,12 +26,13 @@ import EntityTitle from './title';
import Icon from 'react-fontawesome';
import PropTypes from 'prop-types';
import React from 'react';
import WorksTable from './work-table';

const {
extractAttribute, getEditionPublishers, getEditionReleaseDate, getEntityUrl,
getLanguageAttribute, ENTITY_TYPE_ICONS, getSortNameOfDefaultAlias
getLanguageAttribute, getRelationshipTargetByTypeId, ENTITY_TYPE_ICONS, getSortNameOfDefaultAlias
} = entityHelper;
const {Button, Col, Row} = bootstrap;
const {Col, Row} = bootstrap;

function EditionAttributes({edition}) {
const status = extractAttribute(edition.editionStatus, 'label');
@@ -96,6 +97,9 @@ EditionAttributes.propTypes = {


function EditionDisplayPage({entity, identifierTypes}) {
// relationshipTypeId = 10 refers the relation (<Work> is contained by <Edition>)
const relationshipTypeId = 10;
const worksContainedByEdition = getRelationshipTargetByTypeId(entity, relationshipTypeId);
const urlPrefix = getEntityUrl(entity);
return (
<div>
@@ -119,14 +123,10 @@ function EditionDisplayPage({entity, identifierTypes}) {
}
</Col>
</Row>
<Button
bsStyle="success"
className="margin-top-d15"
href={`/work/create?${
entity.type.toLowerCase()}=${entity.bbid}`}
>
<Icon className="margin-right-0-5" name="plus"/>Add Work
</Button>
<WorksTable
entity={entity}
works={worksContainedByEdition}
/>
<EntityLinks
entity={entity}
identifierTypes={identifierTypes}
@@ -17,22 +17,27 @@
*/

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

import EntityIdentifiers from './identifiers';
import EntityRelationships from './relationships';
import PropTypes from 'prop-types';
import React from 'react';


const {filterOutRelationshipTypeById} = entityHelper;
const {Col, Row} = bootstrap;

function EntityLinks({entity, identifierTypes, urlPrefix}) {
// relationshipTypeId = 10 refers the relation (<Work> is contained by <Edition>)
const relationshipTypeId = 10;
const relationships = filterOutRelationshipTypeById(entity, relationshipTypeId);
return (
<Row>
<Col md={8}>
<EntityRelationships
entityUrl={urlPrefix}
relationships={entity.relationships}
relationships={relationships}
/>
</Col>
<Col md={4}>
@@ -75,7 +75,7 @@ function PublicationDisplayPage({entity, identifierTypes}) {
<PublicationAttributes publication={entity}/>
</Col>
</Row>
<EditionTable entity={entity}/>
<EditionTable editions={entity.editions} entity={entity}/>
<EntityLinks
entity={entity}
identifierTypes={identifierTypes}
@@ -95,7 +95,7 @@ function PublisherDisplayPage({entity, identifierTypes}) {
<PublisherAttributes publisher={entity}/>
</Col>
</Row>
<EditionTable entity={entity}/>
<EditionTable editions={entity.editions} entity={entity}/>
<EntityLinks
entity={entity}
identifierTypes={identifierTypes}
@@ -0,0 +1,117 @@
/*
* Copyright (C) 2019 Akhilesh Kumar (@akhilesh26)
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License along
* with this program; if not, write to the Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
*/

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

import Icon from 'react-fontawesome';
import PropTypes from 'prop-types';
import React from 'react';


const {Button, Table} = bootstrap;

const {getEntityDisambiguation} = entityHelper;

function WorkTableRow({work}) {
const name = work.defaultAlias ? work.defaultAlias.name : '(unnamed)';
const disambiguation = getEntityDisambiguation(work);
const workType = work.workType ? work.workType.label : '?';
const workBBID = work.bbid;
return (
<tr>
<td>
<a href={`/Work/${workBBID}`}>{name}</a>
{disambiguation}
</td>
<td>{workType}</td>
</tr>
);
}
WorkTableRow.displayName = 'WorkTableRow';
WorkTableRow.propTypes = {
work: PropTypes.object.isRequired
};

function WorkTable({entity, works}) {
return (
<div>
<h2>Works</h2>
{
works.length ?
<React.Fragment>
<Table striped>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
{
works.map((work) => (
<WorkTableRow
key={work.bbid}
work={work}
/>
))}
</tbody>
</Table>
<Button
bsStyle="success"
className="margin-top-d15"
href={`/work/create?${
entity.type.toLowerCase()}=${entity.bbid}`}
>
<Icon className="margin-right-0-5" name="plus"/>Add Work
</Button>
<hr className="margin-bottom-d0"/>
</React.Fragment> :
<React.Fragment>
<span className="margin-right-2 pull-left">
<Button
bsStyle="success"
href={`/work/create?${
entity.type.toLowerCase()}=${entity.bbid}`}
>
<Icon name="pen-nib" size="2x"/>
<br/>
Add Work
</Button>
</span>
<span>
<h4>There are no Works yet!</h4>
<p>
Help us complete BookBrainz
<br/>
</p>
<br/><small>Not sure what to do? Visit the <a href="/help">help page</a> to get started.</small>
</span>
<hr className="margin-bottom-d0"/>
</React.Fragment>
}
</div>
);
}
WorkTable.displayName = 'WorkTable';
WorkTable.propTypes = {
entity: PropTypes.object.isRequired,
works: PropTypes.array.isRequired
};

export default WorkTable;
@@ -19,20 +19,18 @@
import * as bootstrap from 'react-bootstrap';
import * as entityHelper from '../../../helpers/entity';

import EditionTable from './edition-table';
import EntityFooter from './footer';
import EntityIdentifiers from './identifiers';
import EntityImage from './image';
import EntityLinks from './links';
import EntityRelationships from './relationships';
import EntityTitle from './title';
import Icon from 'react-fontawesome';
import PropTypes from 'prop-types';
import React from 'react';


const {getLanguageAttribute, getTypeAttribute, getEntityUrl,
const {getRelationshipSourceByTypeId, getLanguageAttribute, getTypeAttribute, getEntityUrl,
ENTITY_TYPE_ICONS, getSortNameOfDefaultAlias} = entityHelper;
const {Button, Col, Row} = bootstrap;
const {Col, Row} = bootstrap;


function WorkAttributes({work}) {
@@ -71,6 +69,9 @@ WorkAttributes.propTypes = {


function WorkDisplayPage({entity, identifierTypes}) {
// relationshipTypeId = 10 refers the relation (<Work> is contained by <Edition>)
const relationshipTypeId = 10;
const editionsContainWork = getRelationshipSourceByTypeId(entity, relationshipTypeId);
const urlPrefix = getEntityUrl(entity);
return (
<div>
@@ -86,14 +87,10 @@ function WorkDisplayPage({entity, identifierTypes}) {
<WorkAttributes work={entity}/>
</Col>
</Row>
<Button
bsStyle="success"
className="margin-top-d15"
href={`/edition/create?${
entity.type.toLowerCase()}=${entity.bbid}`}
>
<Icon className="margin-right-0-5" name="plus"/>Add Edition
</Button>
<EditionTable
editions={editionsContainWork}
entity={entity}
/>
<EntityLinks
entity={entity}
identifierTypes={identifierTypes}
Oops, something went wrong.

0 comments on commit 8ea4454

Please sign in to comment.
You can’t perform that action at this time.