v3 UI

frontend/src/InteractiveImport/Series/SelectSeriesModal.js

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

frontend/src/InteractiveImport/Series/SelectSeriesModalContent.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/Series/SelectSeriesModalContent.js

@@ -0,0 +1,99 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { scrollDirections } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Scroller from 'Components/Scroller/Scroller';
+import TextInput from 'Components/Form/TextInput';
+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 SelectSeriesRow from './SelectSeriesRow';
+import styles from './SelectSeriesModalContent.css';
+
+class SelectSeriesModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      filter: ''
+    };
+  }
+
+  //
+  // Listeners
+
+  onFilterChange = ({ value }) => {
+    this.setState({ filter: value.toLowerCase() });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      items,
+      onSeriesSelect,
+      onModalClose
+    } = this.props;
+
+    const filter = this.state.filter;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Manual Import - Select Series
+        </ModalHeader>
+
+        <ModalBody
+          className={styles.modalBody}
+          scrollDirection={scrollDirections.NONE}
+        >
+          <TextInput
+            className={styles.filterInput}
+            placeholder="Filter series"
+            name="filter"
+            value={filter}
+            autoFocus={true}
+            onChange={this.onFilterChange}
+          />
+
+          <Scroller className={styles.scroller}>
+            {
+              items.map((item) => {
+                return item.title.toLowerCase().includes(filter) ?
+                  (
+                    <SelectSeriesRow
+                      key={item.id}
+                      id={item.id}
+                      title={item.title}
+                      onSeriesSelect={onSeriesSelect}
+                    />
+                  ) :
+                  null;
+              })
+            }
+          </Scroller>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button onPress={onModalClose}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+SelectSeriesModalContent.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSeriesSelect: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default SelectSeriesModalContent;

frontend/src/InteractiveImport/Series/SelectSeriesModalContentConnector.js

@@ -0,0 +1,75 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { updateInteractiveImportItem } from 'Store/Actions/interactiveImportActions';
+import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
+import SelectSeriesModalContent from './SelectSeriesModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    createAllSeriesSelector(),
+    (items) => {
+      return {
+        items: items.sort((a, b) => {
+          if (a.sortTitle < b.sortTitle) {
+            return -1;
+          }
+
+          if (a.sortTitle > b.sortTitle) {
+            return 1;
+          }
+
+          return 0;
+        })
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  updateInteractiveImportItem
+};
+
+class SelectSeriesModalContentConnector extends Component {
+
+  //
+  // Listeners
+
+  onSeriesSelect = (seriesId) => {
+    const series = _.find(this.props.items, { id: seriesId });
+
+    this.props.ids.forEach((id) => {
+      this.props.updateInteractiveImportItem({
+        id,
+        series,
+        seasonNumber: undefined,
+        episodes: []
+      });
+    });
+
+    this.props.onModalClose(true);
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <SelectSeriesModalContent
+        {...this.props}
+        onSeriesSelect={this.onSeriesSelect}
+      />
+    );
+  }
+}
+
+SelectSeriesModalContentConnector.propTypes = {
+  ids: PropTypes.arrayOf(PropTypes.number).isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  updateInteractiveImportItem: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(SelectSeriesModalContentConnector);

frontend/src/InteractiveImport/Series/SelectSeriesRow.css

@@ -0,0 +1,4 @@
+.series {
+  padding: 8px;
+  border-bottom: 1px solid $borderColor;
+}

frontend/src/InteractiveImport/Series/SelectSeriesRow.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Link from 'Components/Link/Link';
+import styles from './SelectSeriesRow.css';
+
+class SelectSeriesRow extends Component {
+
+  //
+  // Listeners
+
+  onPress = () => {
+    this.props.onSeriesSelect(this.props.id);
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Link
+        className={styles.series}
+        component="div"
+        onPress={this.onPress}
+      >
+        {this.props.title}
+      </Link>
+    );
+  }
+}
+
+SelectSeriesRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  onSeriesSelect: PropTypes.func.isRequired
+};
+
+export default SelectSeriesRow;