New: Add index views for all books

2026-04-23 22:25:09 -04:00 · 2021-09-01 21:04:39 +01:00
parent a774cf0682
commit 2558660b7b
65 changed files with 5433 additions and 12 deletions
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import BookIndexPosterOptionsModalContentConnector from './BookIndexPosterOptionsModalContentConnector';
+
+function BookIndexPosterOptionsModal({ isOpen, onModalClose, ...otherProps }) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <BookIndexPosterOptionsModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+BookIndexPosterOptionsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default BookIndexPosterOptionsModal;
@@ -0,0 +1,248 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Form from 'Components/Form/Form';
+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 } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+
+const posterSizeOptions = [
+  { key: 'small', value: 'Small' },
+  { key: 'medium', value: 'Medium' },
+  { key: 'large', value: 'Large' }
+];
+
+class BookIndexPosterOptionsModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      detailedProgressBar: props.detailedProgressBar,
+      size: props.size,
+      showTitle: props.showTitle,
+      showAuthor: props.showAuthor,
+      showMonitored: props.showMonitored,
+      showQualityProfile: props.showQualityProfile,
+      showSearchAction: props.showSearchAction
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      detailedProgressBar,
+      size,
+      showTitle,
+      showAuthor,
+      showMonitored,
+      showQualityProfile,
+      showSearchAction
+    } = this.props;
+
+    const state = {};
+
+    if (detailedProgressBar !== prevProps.detailedProgressBar) {
+      state.detailedProgressBar = detailedProgressBar;
+    }
+
+    if (size !== prevProps.size) {
+      state.size = size;
+    }
+
+    if (showTitle !== prevProps.showTitle) {
+      state.showTitle = showTitle;
+    }
+
+    if (showAuthor !== prevProps.showAuthor) {
+      state.showAuthor = showAuthor;
+    }
+
+    if (showMonitored !== prevProps.showMonitored) {
+      state.showMonitored = showMonitored;
+    }
+
+    if (showQualityProfile !== prevProps.showQualityProfile) {
+      state.showQualityProfile = showQualityProfile;
+    }
+
+    if (showSearchAction !== prevProps.showSearchAction) {
+      state.showSearchAction = showSearchAction;
+    }
+
+    if (!_.isEmpty(state)) {
+      this.setState(state);
+    }
+  }
+
+  //
+  // Listeners
+
+  onChangePosterOption = ({ name, value }) => {
+    this.setState({
+      [name]: value
+    }, () => {
+      this.props.onChangePosterOption({ [name]: value });
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      onModalClose
+    } = this.props;
+
+    const {
+      detailedProgressBar,
+      size,
+      showTitle,
+      showAuthor,
+      showMonitored,
+      showQualityProfile,
+      showSearchAction
+    } = this.state;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Poster Options
+        </ModalHeader>
+
+        <ModalBody>
+          <Form>
+            <FormGroup>
+              <FormLabel>
+                {translate('PosterSize')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.SELECT}
+                name="size"
+                value={size}
+                values={posterSizeOptions}
+                onChange={this.onChangePosterOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                {translate('DetailedProgressBar')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="detailedProgressBar"
+                value={detailedProgressBar}
+                helpText={translate('DetailedProgressBarHelpText')}
+                onChange={this.onChangePosterOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                {translate('ShowTitle')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showTitle"
+                value={showTitle}
+                helpText={translate('ShowBookTitleHelpText')}
+                onChange={this.onChangePosterOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                {translate('ShowName')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showAuthor"
+                value={showAuthor}
+                helpText={translate('ShowTitleHelpText')}
+                onChange={this.onChangePosterOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                {translate('ShowMonitored')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showMonitored"
+                value={showMonitored}
+                helpText={translate('ShowMonitoredHelpText')}
+                onChange={this.onChangePosterOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                {translate('ShowQualityProfile')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showQualityProfile"
+                value={showQualityProfile}
+                helpText={translate('ShowQualityProfileHelpText')}
+                onChange={this.onChangePosterOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                {translate('ShowSearch')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showSearchAction"
+                value={showSearchAction}
+                helpText={translate('ShowSearchActionHelpText')}
+                onChange={this.onChangePosterOption}
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button
+            onPress={onModalClose}
+          >
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+BookIndexPosterOptionsModalContent.propTypes = {
+  size: PropTypes.string.isRequired,
+  showTitle: PropTypes.bool.isRequired,
+  showAuthor: PropTypes.bool.isRequired,
+  showMonitored: PropTypes.bool.isRequired,
+  showQualityProfile: PropTypes.bool.isRequired,
+  detailedProgressBar: PropTypes.bool.isRequired,
+  showSearchAction: PropTypes.bool.isRequired,
+  onChangePosterOption: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default BookIndexPosterOptionsModalContent;
@@ -0,0 +1,23 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setBookPosterOption } from 'Store/Actions/bookIndexActions';
+import BookIndexPosterOptionsModalContent from './BookIndexPosterOptionsModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.bookIndex,
+    (bookIndex) => {
+      return bookIndex.posterOptions;
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onChangePosterOption(payload) {
+      dispatch(setBookPosterOption(payload));
+    }
+  };
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(BookIndexPosterOptionsModalContent);