Skip to content
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

Jump to bottom

feat(workTable): Add work table on the edition page and edition table on the work page. #BB-330 #250

Merged
merged 7 commits into from Feb 13, 2019
Merged

feat(workTable): Add work table on the edition page and edition table on the work page. #BB-330 #250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
13a5a12
feat(workTable): Add work table on the edition page and edition table…
akhilesh26 Feb 7, 2019
d42c796
refactor(code-quality): pass relationshipTypeId as function parameter.
akhilesh26 Feb 12, 2019
b3c7efe
fix(defensive approach): check the type of `entity.relationships` is …
akhilesh26 Feb 12, 2019
5515520
feat(edition-table): add bigger button `Add Edition`, if edition tabl…
akhilesh26 Feb 12, 2019
e95e5c6
feat(work-table): Add bigger button `Add Work`, if work table is empty.
akhilesh26 Feb 12, 2019
a831356
refactor(code-quality): Create all changes mentioned in the comments …
akhilesh26 Feb 13, 2019
dd3e297
refactor(utils): return an empty array.
akhilesh26 Feb 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
89 changes: 59 additions & 30 deletions src/client/components/pages/entities/edition-table.js
View file
Open in desktop
Expand Up @@ -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
};

Expand Down
20 changes: 10 additions & 10 deletions src/client/components/pages/entities/edition.js
View file
Open in desktop
Expand Up @@ -26,13 +26,14 @@ 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');
Expand Down Expand Up @@ -97,6 +98,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>
Expand All @@ -118,14 +122,10 @@ function EditionDisplayPage({entity, identifierTypes}) {
</div>
</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}
Expand Down
7 changes: 6 additions & 1 deletion src/client/components/pages/entities/links.js
View file
Open in desktop
Expand Up @@ -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}>
Expand Down
2 changes: 1 addition & 1 deletion src/client/components/pages/entities/publication.js
View file
Open in desktop
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/client/components/pages/entities/publisher.js
View file
Open in desktop
Expand Up @@ -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}
Expand Down
117 changes: 117 additions & 0 deletions src/client/components/pages/entities/work-table.js
View file
Open in desktop
@@ -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;
23 changes: 10 additions & 13 deletions src/client/components/pages/entities/work.js
View file
Open in desktop
Expand Up @@ -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}) {
Expand Down Expand Up @@ -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>
Expand All @@ -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}
Expand Down