[UI Work] Add Overview Artist Index View

frontend/src/Artist/Index/Overview/Options/ArtistIndexOverviewOptionsModalContent.js

@@ -0,0 +1,247 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { inputTypes } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+
+const posterSizeOptions = [
+  { key: 'small', value: 'Small' },
+  { key: 'medium', value: 'Medium' },
+  { key: 'large', value: 'Large' }
+];
+
+class ArtistIndexOverviewOptionsModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      detailedProgressBar: props.detailedProgressBar,
+      size: props.size,
+      showQualityProfile: props.showQualityProfile,
+      showPreviousAiring: props.showPreviousAiring,
+      showAdded: props.showAdded,
+      showAlbumCount: props.showAlbumCount,
+      showPath: props.showPath,
+      showSizeOnDisk: props.showSizeOnDisk
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      detailedProgressBar,
+      size,
+      showQualityProfile,
+      showPreviousAiring,
+      showAdded,
+      showAlbumCount,
+      showPath,
+      showSizeOnDisk
+    } = this.props;
+
+    const state = {};
+
+    if (detailedProgressBar !== prevProps.detailedProgressBar) {
+      state.detailedProgressBar = detailedProgressBar;
+    }
+
+    if (size !== prevProps.size) {
+      state.size = size;
+    }
+
+    if (showQualityProfile !== prevProps.showQualityProfile) {
+      state.showQualityProfile = showQualityProfile;
+    }
+
+    if (showPreviousAiring !== prevProps.showPreviousAiring) {
+      state.showPreviousAiring = showPreviousAiring;
+    }
+
+    if (showAdded !== prevProps.showAdded) {
+      state.showAdded = showAdded;
+    }
+
+    if (showAlbumCount !== prevProps.showAlbumCount) {
+      state.showAlbumCount = showAlbumCount;
+    }
+
+    if (showPath !== prevProps.showPath) {
+      state.showPath = showPath;
+    }
+
+    if (showSizeOnDisk !== prevProps.showSizeOnDisk) {
+      state.showSizeOnDisk = showSizeOnDisk;
+    }
+
+    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,
+      showQualityProfile,
+      showPreviousAiring,
+      showAdded,
+      showAlbumCount,
+      showPath,
+      showSizeOnDisk
+    } = this.state;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Overview Options
+        </ModalHeader>
+
+        <ModalBody>
+          <Form>
+            <FormGroup>
+              <FormLabel>Poster Size</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.SELECT}
+                name="size"
+                value={size}
+                values={posterSizeOptions}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Detailed Progress Bar</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="detailedProgressBar"
+                value={detailedProgressBar}
+                helpText="Show text on progess bar"
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Show Quality Profile</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showQualityProfile"
+                value={showQualityProfile}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Show Previous Airing</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showPreviousAiring"
+                value={showPreviousAiring}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Show Date Added</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showAdded"
+                value={showAdded}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Show Season Count</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showAlbumCount"
+                value={showAlbumCount}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Show Path</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showPath"
+                value={showPath}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Show Size on Disk</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showSizeOnDisk"
+                value={showSizeOnDisk}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button
+            onPress={onModalClose}
+          >
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+ArtistIndexOverviewOptionsModalContent.propTypes = {
+  size: PropTypes.string.isRequired,
+  showQualityProfile: PropTypes.bool.isRequired,
+  showPreviousAiring: PropTypes.bool.isRequired,
+  showAdded: PropTypes.bool.isRequired,
+  showAlbumCount: PropTypes.bool.isRequired,
+  showPath: PropTypes.bool.isRequired,
+  showSizeOnDisk: PropTypes.bool.isRequired,
+  detailedProgressBar: PropTypes.bool.isRequired,
+  onChangeOverviewOption: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default ArtistIndexOverviewOptionsModalContent;