New: Book editor on author details page

2026-04-24 22:35:39 -04:00 · 2021-11-19 11:33:23 +00:00
parent bf852cadbe
commit 4887ed0d2f
19 changed files with 939 additions and 9 deletions
@@ -0,0 +1,156 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import SelectInput from 'Components/Form/SelectInput';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import PageContentFooter from 'Components/Page/PageContentFooter';
+import { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import BookEditorFooterLabel from './BookEditorFooterLabel';
+import DeleteBookModal from './Delete/DeleteBookModal';
+import styles from './BookEditorFooter.css';
+
+const NO_CHANGE = 'noChange';
+
+class BookEditorFooter extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      monitored: NO_CHANGE,
+      rootFolderPath: NO_CHANGE,
+      savingTags: false,
+      isDeleteBookModalOpen: false,
+      isTagsModalOpen: false,
+      isConfirmMoveModalOpen: false,
+      destinationRootFolder: null
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      isSaving,
+      saveError
+    } = this.props;
+
+    if (prevProps.isSaving && !isSaving && !saveError) {
+      this.setState({
+        monitored: NO_CHANGE,
+        rootFolderPath: NO_CHANGE,
+        savingTags: false
+      });
+    }
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.setState({ [name]: value });
+
+    if (value === NO_CHANGE) {
+      return;
+    }
+
+    switch (name) {
+      case 'monitored':
+        this.props.onSaveSelected({ [name]: value === 'monitored' });
+        break;
+      default:
+        this.props.onSaveSelected({ [name]: value });
+    }
+  }
+
+  onDeleteSelectedPress = () => {
+    this.setState({ isDeleteBookModalOpen: true });
+  }
+
+  onDeleteBookModalClose = () => {
+    this.setState({ isDeleteBookModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      bookIds,
+      selectedCount,
+      isSaving,
+      isDeleting
+    } = this.props;
+
+    const {
+      monitored,
+      isDeleteBookModalOpen
+    } = this.state;
+
+    const monitoredOptions = [
+      { key: NO_CHANGE, value: 'No Change', disabled: true },
+      { key: 'monitored', value: 'Monitored' },
+      { key: 'unmonitored', value: 'Unmonitored' }
+    ];
+
+    return (
+      <PageContentFooter>
+        <div className={styles.inputContainer}>
+          <BookEditorFooterLabel
+            label={translate('MonitorBook')}
+            isSaving={isSaving && monitored !== NO_CHANGE}
+          />
+
+          <SelectInput
+            name="monitored"
+            value={monitored}
+            values={monitoredOptions}
+            isDisabled={!selectedCount}
+            onChange={this.onInputChange}
+          />
+        </div>
+
+        <div className={styles.buttonContainer}>
+          <div className={styles.buttonContainerContent}>
+            <BookEditorFooterLabel
+              label={translate('SelectedCountBooksSelectedInterp', [selectedCount])}
+              isSaving={false}
+            />
+
+            <div className={styles.buttons}>
+              <SpinnerButton
+                className={styles.deleteSelectedButton}
+                kind={kinds.DANGER}
+                isSpinning={isDeleting}
+                isDisabled={!selectedCount || isDeleting}
+                onPress={this.onDeleteSelectedPress}
+              >
+                Delete
+              </SpinnerButton>
+            </div>
+          </div>
+        </div>
+
+        <DeleteBookModal
+          isOpen={isDeleteBookModalOpen}
+          bookIds={bookIds}
+          onModalClose={this.onDeleteBookModalClose}
+        />
+
+      </PageContentFooter>
+    );
+  }
+}
+
+BookEditorFooter.propTypes = {
+  bookIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+  selectedCount: PropTypes.number.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  isDeleting: PropTypes.bool.isRequired,
+  deleteError: PropTypes.object,
+  onSaveSelected: PropTypes.func.isRequired
+};
+
+export default BookEditorFooter;