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(Entity-Page): Ability to add existing entity via relationship #804

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Feat(Entity-Page): Ability to add existing entity via relationship #804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c5fb430
created post route for adding relationships
tr1ten Mar 12, 2022
f11eceb
added add edition entity modal for work entity
tr1ten Mar 13, 2022
4a24913
added modal for selecting works in edition
tr1ten Mar 14, 2022
56ec710
fixing minor bugs
tr1ten Mar 14, 2022
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
51 changes: 45 additions & 6 deletions src/client/components/pages/entities/edition-table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,20 @@ import * as bootstrap from 'react-bootstrap';
import * as entityHelper from '../../../helpers/entity';
import * as utilHelper from '../../../helpers/utils';

import React, {useState} from 'react';
import {faBook, faPlus} from '@fortawesome/free-solid-svg-icons';

import AddEntityRelationModal from '../parts/add-entity-relation-modal';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import PropTypes from 'prop-types';
import React from 'react';
import {kebabCase as _kebabCase} from 'lodash';


const {
getEditionReleaseDate, getEntityLabel, getEntityDisambiguation,
getISBNOfEdition, getEditionFormat
} = entityHelper;
const {Button, Table} = bootstrap;
const {Alert, Button, Table} = bootstrap;

function EditionTableRow({edition, showAddedAtColumn, showCheckboxes, selectedEntities, onToggleRow}) {
const name = getEntityLabel(edition);
Expand Down Expand Up @@ -95,8 +96,28 @@ EditionTableRow.defaultProps = {
showCheckboxes: false
};

function EditionTable({editions, entity, showAddedAtColumn, showAdd, showCheckboxes, selectedEntities, onToggleRow}) {
function EditionTable({editions, entity, showAddedAtColumn, showAdd, showCheckboxes, selectedEntities, onToggleRow, relationshipTypeId}) {
let tableContent;
const [show, setShow] = useState(false);
const [message, setMessage] = useState({});
const haveRelationshipId = Boolean(relationshipTypeId);
function onCloseModalHandler() {
setShow(false);
}
function handleOpenModal() {
setShow(true);
}
function closeModalAndShowMessage(msg) {
setMessage(msg);
onCloseModalHandler();
}
function handleAlertDismiss() {
setMessage({});
}
const submitUrl = `/${entity.type.toLowerCase()}/${
entity.bbid
}/relationships`;
const buttonProps = !haveRelationshipId ? {href: `/edition/create?${_kebabCase(entity.type)}=${entity.bbid}`} : {onClick: handleOpenModal};
if (editions.length) {
tableContent = (
<React.Fragment>
Expand Down Expand Up @@ -128,15 +149,17 @@ function EditionTable({editions, entity, showAddedAtColumn, showAdd, showCheckbo
}
</tbody>
</Table>
{showAdd &&
{showAdd && (
<Button
className="margin-top-d15"
href={`/edition/create?${_kebabCase(entity.type)}=${entity.bbid}`}
variant="success"
{...buttonProps}

>
<FontAwesomeIcon icon={faPlus}/>
{' Add Edition'}
</Button>
)
}
</React.Fragment>
);
Expand All @@ -146,8 +169,8 @@ function EditionTable({editions, entity, showAddedAtColumn, showAdd, showCheckbo
<React.Fragment>
<span className="margin-right-2 float-left">
<Button
href={`/edition/create?${_kebabCase(entity.type)}=${entity.bbid}`}
variant="success"
{...buttonProps}
>
<FontAwesomeIcon icon={faBook} size="2x"/>
<br/>
Expand All @@ -173,6 +196,20 @@ function EditionTable({editions, entity, showAddedAtColumn, showAdd, showCheckbo
<div>
<h2>Editions</h2>
{tableContent}
{haveRelationshipId && <AddEntityRelationModal
closeModalAndShowMessage={closeModalAndShowMessage}
entity={entity} isSource={entity.type !== 'Work'} relationshipTypeId={relationshipTypeId} show={show}
submitUrl={submitUrl} targetEntityType="Edition" onCloseModal={onCloseModalHandler}
/>}
{message.type &&
<Alert
dismissible
className="margin-top-1"
variant={message.type}
onClose={handleAlertDismiss}
>
{message.text}
</Alert>}
</div>
);
}
Expand All @@ -181,6 +218,7 @@ EditionTable.propTypes = {
editions: PropTypes.array.isRequired,
entity: PropTypes.object,
onToggleRow: PropTypes.func,
relationshipTypeId: PropTypes.number,
selectedEntities: PropTypes.array,
showAdd: PropTypes.bool,
showAddedAtColumn: PropTypes.bool,
Expand All @@ -189,6 +227,7 @@ EditionTable.propTypes = {
EditionTable.defaultProps = {
entity: null,
onToggleRow: null,
relationshipTypeId: null,
selectedEntities: [],
showAdd: true,
showAddedAtColumn: false,
Expand Down
1 change: 1 addition & 0 deletions src/client/components/pages/entities/edition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@ function EditionDisplayPage({entity, identifierTypes, user}) {
<React.Fragment>
<WorksTable
entity={entity}
relationshipTypeId={10}
works={worksContainedByEditionWithAuthors}
/>
<EntityLinks
Expand Down
51 changes: 46 additions & 5 deletions src/client/components/pages/entities/work-table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,16 @@ import * as bootstrap from 'react-bootstrap';
import * as entityHelper from '../../../helpers/entity';
import * as utilHelper from '../../../helpers/utils';

import React, {useState} from 'react';
import {faPenNib, faPlus} from '@fortawesome/free-solid-svg-icons';

import AddEntityRelationModal from '../parts/add-entity-relation-modal';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import PropTypes from 'prop-types';
import React from 'react';
import {kebabCase as _kebabCase} from 'lodash';


const {Button, Table} = bootstrap;
const {Alert, Button, Table} = bootstrap;

const {getEntityDisambiguation, getLanguageAttribute, getEntityLabel} = entityHelper;

Expand Down Expand Up @@ -85,8 +86,32 @@ WorkTableRow.defaultProps = {
showCheckboxes: false
};

function WorkTable({entity, showAddedAtColumn, works, showAdd, showCheckboxes, selectedEntities, onToggleRow}) {
function WorkTable({entity, showAddedAtColumn, works, showAdd, showCheckboxes, selectedEntities, onToggleRow, relationshipTypeId}) {
let tableContent;
const [show, setShow] = useState(false);
const [message, setMessage] = useState({});
const haveRelationshipId = Boolean(relationshipTypeId);
function onCloseModalHandler() {
setShow(false);
}
function handleOpenModal() {
setShow(true);
}
function closeModalAndShowMessage(msg) {
setMessage(msg);
onCloseModalHandler();
}
function handleAlertDismiss() {
setMessage({});
}
let submitUrl;
let buttonProps;
if (showAdd) {
submitUrl = `/${entity.type.toLowerCase()}/${
entity.bbid
}/relationships`;
buttonProps = !haveRelationshipId ? {href: `/work/create?${_kebabCase(entity.type)}=${entity.bbid}`} : {onClick: handleOpenModal};
}
if (works.length) {
const showAuthors = works[0].authorsData;
tableContent = (
Expand Down Expand Up @@ -122,8 +147,8 @@ function WorkTable({entity, showAddedAtColumn, works, showAdd, showCheckboxes, s
{showAdd &&
<Button
className="margin-top-d15"
href={`/work/create?${_kebabCase(entity.type)}=${entity.bbid}`}
variant="success"
{...buttonProps}
>
<FontAwesomeIcon className="margin-right-0-5" icon={faPlus}/>Add Work
</Button>
Expand All @@ -136,7 +161,7 @@ function WorkTable({entity, showAddedAtColumn, works, showAdd, showCheckboxes, s
<React.Fragment>
<span className="margin-right-2 float-left">
<Button
href={`/work/create?${_kebabCase(entity.type)}=${entity.bbid}`}
{...buttonProps}
variant="success"
>
<FontAwesomeIcon icon={faPenNib} size="2x"/>
Expand All @@ -163,13 +188,28 @@ function WorkTable({entity, showAddedAtColumn, works, showAdd, showCheckboxes, s
<div>
<h2>Works</h2>
{tableContent}
{haveRelationshipId && <AddEntityRelationModal
closeModalAndShowMessage={closeModalAndShowMessage}
entity={entity} isSource={entity.type !== 'Work'} relationshipTypeId={relationshipTypeId} show={show}
submitUrl={submitUrl} targetEntityType="Work" onCloseModal={onCloseModalHandler}
/>}
{message.type &&
<Alert
dismissible
className="margin-top-1"
variant={message.type}
onClose={handleAlertDismiss}
>
{message.text}
</Alert>}
</div>
);
}
WorkTable.displayName = 'WorkTable';
WorkTable.propTypes = {
entity: PropTypes.object,
onToggleRow: PropTypes.func,
relationshipTypeId: PropTypes.number,
selectedEntities: PropTypes.array,
showAdd: PropTypes.bool,
showAddedAtColumn: PropTypes.bool,
Expand All @@ -179,6 +219,7 @@ WorkTable.propTypes = {
WorkTable.defaultProps = {
entity: null,
onToggleRow: null,
relationshipTypeId: null,
selectedEntities: [],
showAdd: true,
showAddedAtColumn: false,
Expand Down
1 change: 1 addition & 0 deletions src/client/components/pages/entities/work.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ function WorkDisplayPage({entity, identifierTypes, user}) {
<EditionTable
editions={editionsContainWork}
entity={entity}
relationshipTypeId={10}
/>
<EntityLinks
entity={entity}
Expand Down
Loading