New: Add a monitor toggle to each series (#31)

* New: Add a monitor toggle to each series

* Resolve linting errors

* Spin when any of the books are currently saving

* Resolve CSS linting errors

frontend/src/Author/Details/AuthorDetailsSeries.css

@@ -113,6 +113,11 @@
   text-align: center;
 }
 
+.seriesTitle {
+  display: flex;
+  padding-left: 15px;
+}
+
 @media only screen and (max-width: $breakpointSmall) {
   .bookType {
     border-right: 0;

frontend/src/Author/Details/AuthorDetailsSeries.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import MonitorToggleButton from 'Components/MonitorToggleButton';
 import getToggledRange from 'Utilities/Table/getToggledRange';
 import { icons, sortDirections } from 'Helpers/Props';
 import Icon from 'Components/Icon';
@@ -53,6 +54,14 @@ class AuthorDetailsSeries extends Component {
     onExpandPress(id, true);
   }
 
+  isSeriesMonitored(series) {
+    return series.items.every((book) => book.monitored);
+  }
+
+  isSeriesSaving(series) {
+    return series.items.some((book) => book.isSaving);
+  }
+
   //
   // Listeners
 
@@ -83,6 +92,12 @@ class AuthorDetailsSeries extends Component {
     this.props.onMonitorBookPress(_.uniq(bookIds), monitored);
   }
 
+  onMonitorSeriesPress = (monitored, { shiftKey }) => {
+    const bookIds = this.props.items.map((book) => book.id);
+
+    this.props.onMonitorBookPress(_.uniq(bookIds), monitored);
+  }
+
   //
   // Render
 
@@ -97,13 +112,23 @@ class AuthorDetailsSeries extends Component {
       sortDirection,
       onSortPress,
       isSmallScreen,
-      onTableOptionChange
+      onTableOptionChange,
+      authorMonitored
     } = this.props;
 
     return (
       <div
         className={styles.bookType}
       >
+        <div className={styles.seriesTitle}>
+          <MonitorToggleButton
+            size={24}
+            monitored={this.isSeriesMonitored(this.props)}
+            isDisabled={!authorMonitored}
+            isSaving={this.isSeriesSaving(this.props)}
+            onPress={this.onMonitorSeriesPress}
+          />
+
           <Link
             className={styles.expandButton}
             onPress={this.onExpandPress}
@@ -138,6 +163,7 @@ class AuthorDetailsSeries extends Component {
 
             </div>
           </Link>
+        </div>
 
         <div>
           {
@@ -199,7 +225,8 @@ AuthorDetailsSeries.propTypes = {
   onExpandPress: PropTypes.func.isRequired,
   onSortPress: PropTypes.func.isRequired,
   onMonitorBookPress: PropTypes.func.isRequired,
-  uiSettings: PropTypes.object.isRequired
+  uiSettings: PropTypes.object.isRequired,
+  authorMonitored: PropTypes.object.isRequired
 };
 
 export default AuthorDetailsSeries;