New: Book editor on author details page

2026-04-20 21:54:25 -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,172 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './DeleteBookModalContent.css';
+
+class DeleteBookModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      deleteFiles: false,
+      addImportListExclusion: true
+    };
+  }
+
+  //
+  // Listeners
+
+  onDeleteFilesChange = ({ value }) => {
+    this.setState({ deleteFiles: value });
+  }
+
+  onAddImportListExclusionChange = ({ value }) => {
+    this.setState({ addImportListExclusion: value });
+  }
+
+  onDeleteBookConfirmed = () => {
+    const {
+      deleteFiles,
+      addImportListExclusion
+    } = this.state;
+
+    this.setState({ deleteFiles: false });
+    this.props.onDeleteSelectedPress(deleteFiles, addImportListExclusion);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      book,
+      files,
+      onModalClose
+    } = this.props;
+
+    const {
+      deleteFiles,
+      addImportListExclusion
+    } = this.state;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Delete Selected Book
+        </ModalHeader>
+
+        <ModalBody>
+          <div>
+            <FormGroup>
+              <FormLabel>{`Delete File${book.length > 1 ? 's' : ''}`}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="deleteFiles"
+                value={deleteFiles}
+                helpText={'Delete book files'}
+                kind={kinds.DANGER}
+                isDisabled={files.length === 0}
+                onChange={this.onDeleteFilesChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('AddListExclusion')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="addImportListExclusion"
+                value={addImportListExclusion}
+                helpText={translate('AddImportListExclusionHelpText')}
+                kind={kinds.DANGER}
+                onChange={this.onAddImportListExclusionChange}
+              />
+            </FormGroup>
+
+            {
+              !addImportListExclusion &&
+                <div className={styles.deleteFilesMessage}>
+                  <div>
+                    {translate('IfYouDontAddAnImportListExclusionAndTheAuthorHasAMetadataProfileOtherThanNoneThenThisBookMayBeReaddedDuringTheNextAuthorRefresh')}
+                  </div>
+                </div>
+            }
+
+          </div>
+
+          <div className={styles.message}>
+            {`Are you sure you want to delete ${book.length} selected book${book.length > 1 ? 's' : ''}${deleteFiles ? ' and their files' : ''}?`}
+          </div>
+
+          <ul>
+            {
+              book.map((s) => {
+                return (
+                  <li key={s.title}>
+                    <span>{s.title}</span>
+                  </li>
+                );
+              })
+            }
+          </ul>
+
+          {
+            deleteFiles &&
+              <div>
+                <div className={styles.deleteFilesMessage}>
+                  {translate('TheFollowingFilesWillBeDeleted')}
+                </div>
+                <ul>
+                  {
+                    files.map((s) => {
+                      return (
+                        <li key={s.path}>
+                          <span>{s.path}</span>
+                        </li>
+                      );
+                    })
+                  }
+                </ul>
+              </div>
+          }
+        </ModalBody>
+
+        <ModalFooter>
+          <Button onPress={onModalClose}>
+            Cancel
+          </Button>
+
+          <Button
+            kind={kinds.DANGER}
+            onPress={this.onDeleteBookConfirmed}
+          >
+            Delete
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+DeleteBookModalContent.propTypes = {
+  book: PropTypes.arrayOf(PropTypes.object).isRequired,
+  files: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onDeleteSelectedPress: PropTypes.func.isRequired
+};
+
+export default DeleteBookModalContent;