feat(series): Created series entity create/edit routes and display page

package.json

@@ -35,7 +35,8 @@
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",
-    "bookbrainz-data": "^2.10.0",
+    "array-move": "^3.0.1",
+    "bookbrainz-data": "^2.11.0",
     "chart.js": "^2.9.4",
     "chartjs-adapter-date-fns": "^1.0.0",
     "classnames": "^2.2.5",
@@ -69,6 +70,7 @@
     "react-hot-loader": "^4.13.0",
     "react-redux": "^5.1.2",
     "react-select": "^1.1.0",
+    "react-sortable-hoc": "^2.0.0",
     "react-sticky": "^6.0.1",
     "react-virtualized-select": "^3.0.1",
     "redux": "^3.7.2",

src/client/components/pages/collection.js

@@ -18,48 +18,21 @@
 
 import * as bootstrap from 'react-bootstrap';
 import {faPencilAlt, faPlus, faTimesCircle, faTrashAlt} from '@fortawesome/free-solid-svg-icons';
+import {formatDate, getEntityKey, getEntityTable} from '../../helpers/utils';
 import AddEntityToCollectionModal from './parts/add-entity-to-collection-modal';
-import AuthorTable from './entities/author-table';
 import DeleteOrRemoveCollaborationModal from './parts/delete-or-remove-collaboration-modal';
 import {ENTITY_TYPE_ICONS} from '../../helpers/entity';
-import EditionGroupTable from './entities/editionGroup-table';
-import EditionTable from './entities/edition-table';
 import EntityImage from './entities/image';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import PagerElement from './parts/pager';
 import PropTypes from 'prop-types';
-import PublisherTable from './entities/publisher-table';
 import React from 'react';
-import WorkTable from './entities/work-table';
 import _ from 'lodash';
-import {formatDate} from '../../helpers/utils';
 import request from 'superagent';
 
 
 const {Alert, Badge, Button, Col, Row} = bootstrap;
 
-function getEntityTable(entityType) {
-	const tables = {
-		Author: AuthorTable,
-		Edition: EditionTable,
-		EditionGroup: EditionGroupTable,
-		Publisher: PublisherTable,
-		Work: WorkTable
-	};
-	return tables[entityType];
-}
-
-function getEntityKey(entityType) {
-	const keys = {
-		Author: 'authors',
-		Edition: 'editions',
-		EditionGroup: 'editionGroups',
-		Publisher: 'publishers',
-		Work: 'works'
-	};
-	return keys[entityType];
-}
-
 function CollectionAttributes({collection}) {
 	return (
 		<div>

src/client/components/pages/entities/author-table.js

@@ -29,6 +29,7 @@ const {transformISODateForDisplay, extractAttribute, getEntityDisambiguation, ge
 function AuthorTableRow({author, showAddedAtColumn, showCheckboxes, selectedEntities, onToggleRow}) {
 	const name = getEntityLabel(author);
 	const disambiguation = getEntityDisambiguation(author);
+	const number = author.number || '?';
 	const authorType = author.authorType ? author.authorType.label : '?';
 	const gender = author.gender ? author.gender.name : '?';
 	const beginDate = transformISODateForDisplay(extractAttribute(author.beginDate));
@@ -37,6 +38,7 @@ function AuthorTableRow({author, showAddedAtColumn, showCheckboxes, selectedEnti
 	/* eslint-disable react/jsx-no-bind */
 	return (
 		<tr>
+			{author.displayNumber && <td>{number}</td>}
 			<td>
 				{
 					showCheckboxes ?
@@ -83,7 +85,8 @@ function AuthorTable({authors, showAddedAtColumn, showCheckboxes, selectedEntiti
 				<Table striped>
 					<thead>
 						<tr>
-							<th style={{width: '50%'}}>Name</th>
+							{authors[0].displayNumber && <th style={{width: '10%'}}>#</th>}
+							<th>Name</th>
 							<th>Gender</th>
 							<th>Type</th>
 							<th>Date of birth</th>

src/client/components/pages/entities/edition-table.js

@@ -37,6 +37,7 @@ const {Button, Table} = bootstrap;
 function EditionTableRow({edition, showAddedAtColumn, showCheckboxes, selectedEntities, onToggleRow}) {
 	const name = getEntityLabel(edition);
 	const disambiguation = getEntityDisambiguation(edition);
+	const number = edition.number || '?';
 	const releaseDate = getEditionReleaseDate(edition);
 	const isbn = getISBNOfEdition(edition);
 	const editionFormat = getEditionFormat(edition);
@@ -45,6 +46,7 @@ function EditionTableRow({edition, showAddedAtColumn, showCheckboxes, selectedEn
 	/* eslint-disable react/jsx-no-bind */
 	return (
 		<tr>
+			{edition.displayNumber && <td>{number}</td>}
 			<td>
 				{
 					showCheckboxes ?
@@ -101,6 +103,7 @@ function EditionTable({editions, entity, showAddedAtColumn, showAdd, showCheckbo
 				<Table striped>
 					<thead>
 						<tr>
+							{editions[0].displayNumber && <th style={{width: '10%'}}>#</th>}
 							<th>Name</th>
 							<th>Format</th>
 							<th>ISBN</th>

src/client/components/pages/entities/editionGroup-table.js

@@ -30,13 +30,15 @@ const {getEntityDisambiguation, getEntityLabel} = entityHelper;
 
 function EditionGroupTableRow({editionGroup, showAddedAtColumn, showCheckboxes, selectedEntities, onToggleRow}) {
 	const name = getEntityLabel(editionGroup);
+	const number = editionGroup.number || '?';
 	const disambiguation = getEntityDisambiguation(editionGroup);
 	const editionGroupType = editionGroup.editionGroupType ? editionGroup.editionGroupType.label : '?';
 	const addedAt = showAddedAtColumn ? utilHelper.formatDate(new Date(editionGroup.addedAt), true) : null;
 
 	/* eslint-disable react/jsx-no-bind */
 	return (
 		<tr>
+			{editionGroup.displayNumber && <td>{number}</td>}
 			<td>
 				{
 					showCheckboxes ?
@@ -78,6 +80,7 @@ function EditionGroupTable({editionGroups, showAddedAtColumn, showCheckboxes, se
 				<Table striped>
 					<thead>
 						<tr>
+							{editionGroups[0].displayNumber && <th style={{width: '10%'}}>#</th>}
 							<th>Name</th>
 							<th>Type</th>
 							{

src/client/components/pages/entities/publisher-table.js

@@ -29,6 +29,7 @@ const {transformISODateForDisplay, extractAttribute, getEntityDisambiguation, ge
 
 function PublisherTableRow({showAddedAtColumn, publisher, showCheckboxes, selectedEntities, onToggleRow}) {
 	const name = getEntityLabel(publisher);
+	const number = publisher.number || '?';
 	const disambiguation = getEntityDisambiguation(publisher);
 	const publisherType = publisher.publisherType ? publisher.publisherType.label : '?';
 	const area = publisher.area ? publisher.area.name : '?';
@@ -39,6 +40,7 @@ function PublisherTableRow({showAddedAtColumn, publisher, showCheckboxes, select
 	/* eslint-disable react/jsx-no-bind */
 	return (
 		<tr>
+			{publisher.displayNumber && <td>{number}</td>}
 			<td>
 				{
 					showCheckboxes ?
@@ -83,7 +85,8 @@ function PublisherTable({showAddedAtColumn, publishers, showCheckboxes, selected
 				<Table striped>
 					<thead>
 						<tr>
-							<th style={{width: '50%'}}>Name</th>
+							{publishers[0].displayNumber && <th style={{width: '10%'}}>#</th>}
+							<th>Name</th>
 							<th>Area</th>
 							<th>Type</th>
 							<th>Date founded</th>