New: Use Goodreads directly, allow multiple editions of a book (new DB required)

frontend/src/InteractiveImport/Edition/SelectEditionModal.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Modal from 'Components/Modal/Modal';
+import SelectEditionModalContentConnector from './SelectEditionModalContentConnector';
+
+class SelectEditionModal extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      onModalClose,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        onModalClose={onModalClose}
+      >
+        <SelectEditionModalContentConnector
+          {...otherProps}
+          onModalClose={onModalClose}
+        />
+      </Modal>
+    );
+  }
+}
+
+SelectEditionModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default SelectEditionModal;

frontend/src/InteractiveImport/Edition/SelectEditionModalContent.css

@@ -0,0 +1,18 @@
+.modalBody {
+  composes: modalBody from '~Components/Modal/ModalBody.css';
+
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.filterInput {
+  composes: input from '~Components/Form/TextInput.css';
+
+  flex: 0 0 auto;
+  margin-bottom: 20px;
+}
+
+.scroller {
+  flex: 1 1 auto;
+}

frontend/src/InteractiveImport/Edition/SelectEditionModalContent.js

@@ -0,0 +1,93 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Button from 'Components/Link/Button';
+import { scrollDirections } from 'Helpers/Props';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import SelectEditionRow from './SelectEditionRow';
+import Alert from 'Components/Alert';
+import styles from './SelectEditionModalContent.css';
+
+const columns = [
+  {
+    name: 'book',
+    label: 'Book',
+    isVisible: true
+  },
+  {
+    name: 'edition',
+    label: 'Edition',
+    isVisible: true
+  }
+];
+
+class SelectEditionModalContent extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      books,
+      onEditionSelect,
+      onModalClose,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Manual Import - Select Edition
+        </ModalHeader>
+
+        <ModalBody
+          className={styles.modalBody}
+          scrollDirection={scrollDirections.NONE}
+        >
+          <Alert>
+            Overrriding an edition here will <b>disable automatic edition selection</b> for that book in future.
+          </Alert>
+
+          <Table
+            columns={columns}
+            {...otherProps}
+          >
+            <TableBody>
+              {
+                books.map((item) => {
+                  return (
+                    <SelectEditionRow
+                      key={item.book.id}
+                      matchedEditionId={item.matchedEditionId}
+                      columns={columns}
+                      onEditionSelect={onEditionSelect}
+                      {...item.book}
+                    />
+                  );
+                })
+              }
+            </TableBody>
+          </Table>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button onPress={onModalClose}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+SelectEditionModalContent.propTypes = {
+  books: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onEditionSelect: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default SelectEditionModalContent;

frontend/src/InteractiveImport/Edition/SelectEditionModalContentConnector.js

@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import {
+  updateInteractiveImportItem,
+  saveInteractiveImportItem
+} from 'Store/Actions/interactiveImportActions';
+import SelectEditionModalContent from './SelectEditionModalContent';
+
+function createMapStateToProps() {
+  return {};
+}
+
+const mapDispatchToProps = {
+  updateInteractiveImportItem,
+  saveInteractiveImportItem
+};
+
+class SelectEditionModalContentConnector extends Component {
+
+  //
+  // Listeners
+
+  onEditionSelect = (bookId, editionId) => {
+    const ids = this.props.importIdsByBook[bookId];
+
+    ids.forEach((id) => {
+      this.props.updateInteractiveImportItem({
+        id,
+        editionId,
+        disableReleaseSwitching: true,
+        tracks: [],
+        rejections: []
+      });
+    });
+
+    this.props.saveInteractiveImportItem({ id: ids });
+
+    this.props.onModalClose(true);
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <SelectEditionModalContent
+        {...this.props}
+        onEditionSelect={this.onEditionSelect}
+      />
+    );
+  }
+}
+
+SelectEditionModalContentConnector.propTypes = {
+  importIdsByBook: PropTypes.object.isRequired,
+  books: PropTypes.arrayOf(PropTypes.object).isRequired,
+  updateInteractiveImportItem: PropTypes.func.isRequired,
+  saveInteractiveImportItem: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(SelectEditionModalContentConnector);

frontend/src/InteractiveImport/Edition/SelectEditionRow.css

@@ -0,0 +1,3 @@
+.albumRow {
+  cursor: pointer;
+}

frontend/src/InteractiveImport/Edition/SelectEditionRow.js

@@ -0,0 +1,125 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { inputTypes } from 'Helpers/Props';
+import TableRow from 'Components/Table/TableRow';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import titleCase from 'Utilities/String/titleCase';
+
+class SelectEditionRow extends Component {
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.onEditionSelect(parseInt(name), parseInt(value));
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      matchedEditionId,
+      title,
+      disambiguation,
+      editions,
+      columns
+    } = this.props;
+
+    const extendedTitle = disambiguation ? `${title} (${disambiguation})` : title;
+
+    const values = _.map(editions, (bookEdition) => {
+
+      let value = `${bookEdition.title}`;
+
+      if (bookEdition.disambiguation) {
+        value = `${value} (${titleCase(bookEdition.disambiguation)})`;
+      }
+
+      const extras = [];
+      if (bookEdition.language) {
+        extras.push(bookEdition.language);
+      }
+      if (bookEdition.publisher) {
+        extras.push(bookEdition.publisher);
+      }
+      if (bookEdition.isbn13) {
+        extras.push(bookEdition.isbn13);
+      }
+      if (bookEdition.format) {
+        extras.push(bookEdition.format);
+      }
+      if (bookEdition.pageCount > 0) {
+        extras.push(`${bookEdition.pageCount}p`);
+      }
+
+      if (extras) {
+        value = `${value} [${extras.join(', ')}]`;
+      }
+
+      return {
+        key: bookEdition.id,
+        value
+      };
+    });
+
+    const sortedValues = _.orderBy(values, ['value']);
+
+    return (
+      <TableRow>
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'book') {
+              return (
+                <TableRowCell key={name}>
+                  {extendedTitle}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'edition') {
+              return (
+                <TableRowCell key={name}>
+                  <FormInputGroup
+                    type={inputTypes.SELECT}
+                    name={id.toString()}
+                    values={sortedValues}
+                    value={matchedEditionId}
+                    onChange={this.onInputChange}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+      </TableRow>
+
+    );
+  }
+}
+
+SelectEditionRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  matchedEditionId: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  disambiguation: PropTypes.string.isRequired,
+  editions: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onEditionSelect: PropTypes.func.isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default SelectEditionRow;