New: Add index views for all books

2026-04-19 21:44:30 -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,287 @@
+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 BookIndexOverviewOptionsModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      detailedProgressBar: props.detailedProgressBar,
+      size: props.size,
+      showReleaseDate: props.showReleaseDate,
+      showMonitored: props.showMonitored,
+      showQualityProfile: props.showQualityProfile,
+      showAdded: props.showAdded,
+      showPath: props.showPath,
+      showSizeOnDisk: props.showSizeOnDisk,
+      showSearchAction: props.showSearchAction
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      detailedProgressBar,
+      size,
+      showReleaseDate,
+      showMonitored,
+      showQualityProfile,
+      showAdded,
+      showPath,
+      showSizeOnDisk,
+      showSearchAction
+    } = this.props;
+
+    const state = {};
+
+    if (detailedProgressBar !== prevProps.detailedProgressBar) {
+      state.detailedProgressBar = detailedProgressBar;
+    }
+
+    if (size !== prevProps.size) {
+      state.size = size;
+    }
+
+    if (showReleaseDate !== prevProps.showReleaseDate) {
+      state.showReleaseDate = showReleaseDate;
+    }
+
+    if (showMonitored !== prevProps.showMonitored) {
+      state.showMonitored = showMonitored;
+    }
+
+    if (showQualityProfile !== prevProps.showQualityProfile) {
+      state.showQualityProfile = showQualityProfile;
+    }
+
+    if (showAdded !== prevProps.showAdded) {
+      state.showAdded = showAdded;
+    }
+
+    if (showPath !== prevProps.showPath) {
+      state.showPath = showPath;
+    }
+
+    if (showSizeOnDisk !== prevProps.showSizeOnDisk) {
+      state.showSizeOnDisk = showSizeOnDisk;
+    }
+
+    if (showSearchAction !== prevProps.showSearchAction) {
+      state.showSearchAction = showSearchAction;
+    }
+
+    if (!_.isEmpty(state)) {
+      this.setState(state);
+    }
+  }
+
+  //
+  // Listeners
+
+  onChangeOverviewOption = ({ name, value }) => {
+    this.setState({
+      [name]: value
+    }, () => {
+      this.props.onChangeOverviewOption({ [name]: value });
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      onModalClose
+    } = this.props;
+
+    const {
+      detailedProgressBar,
+      size,
+      showReleaseDate,
+      showMonitored,
+      showQualityProfile,
+      showAdded,
+      showPath,
+      showSizeOnDisk,
+      showSearchAction
+    } = this.state;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Overview Options
+        </ModalHeader>
+
+        <ModalBody>
+          <Form>
+            <FormGroup>
+              <FormLabel>
+                {translate('PosterSize')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.SELECT}
+                name="size"
+                value={size}
+                values={posterSizeOptions}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                {translate('DetailedProgressBar')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="detailedProgressBar"
+                value={detailedProgressBar}
+                helpText={translate('DetailedProgressBarHelpText')}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                {translate('ShowReleaseDate')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showReleaseDate"
+                value={showReleaseDate}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                {translate('ShowMonitored')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showMonitored"
+                value={showMonitored}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+
+              <FormLabel>
+                {translate('ShowQualityProfile')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showQualityProfile"
+                value={showQualityProfile}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                {translate('ShowDateAdded')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showAdded"
+                value={showAdded}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                {translate('ShowPath')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showPath"
+                value={showPath}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                {translate('ShowSizeOnDisk')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showSizeOnDisk"
+                value={showSizeOnDisk}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                {translate('ShowSearch')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showSearchAction"
+                value={showSearchAction}
+                helpText={translate('ShowSearchActionHelpText')}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button
+            onPress={onModalClose}
+          >
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+BookIndexOverviewOptionsModalContent.propTypes = {
+  size: PropTypes.string.isRequired,
+  detailedProgressBar: PropTypes.bool.isRequired,
+  showMonitored: PropTypes.bool.isRequired,
+  showQualityProfile: PropTypes.bool.isRequired,
+  showReleaseDate: PropTypes.bool.isRequired,
+  showAdded: PropTypes.bool.isRequired,
+  showPath: PropTypes.bool.isRequired,
+  showSizeOnDisk: PropTypes.bool.isRequired,
+  showSearchAction: PropTypes.bool.isRequired,
+  onChangeOverviewOption: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default BookIndexOverviewOptionsModalContent;