Add options to expand album types by default (#644)

* Add options to expand album types by default

* Remove isAfter and simplify slightly

* Fix display of settings on large screens

frontend/src/Artist/Details/ArtistDetailsSeason.js

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import isAfter from 'Utilities/Date/isAfter';
 import getToggledRange from 'Utilities/Table/getToggledRange';
 import { icons, sortDirections } from 'Helpers/Props';
 import Icon from 'Components/Icon';
@@ -51,13 +50,16 @@ class ArtistDetailsSeason extends Component {
     const {
       name,
       onExpandPress,
-      items
+      items,
+      uiSettings
     } = this.props;
 
-    const expand = _.some(items, (item) => {
-      return isAfter(item.releaseDate) ||
-             isAfter(item.releaseDate, { days: -365 });
-    });
+    const expand = _.some(items, (item) =>
+      ((item.albumType === 'Album') && uiSettings.expandAlbumByDefault) ||
+        ((item.albumType === 'Single') && uiSettings.expandSingleByDefault) ||
+        ((item.albumType === 'EP') && uiSettings.expandEPByDefault) ||
+        ((item.albumType === 'Broadcast') && uiSettings.expandBroadcastByDefault) ||
+        ((item.albumType === 'Other') && uiSettings.expandOtherByDefault));
 
     onExpandPress(name, expand);
   }
@@ -199,7 +201,7 @@ class ArtistDetailsSeason extends Component {
                     </Table> :
 
                     <div className={styles.noAlbums}>
-                      No albums in this group
+                      No releases in this group
                     </div>
                 }
                 <div className={styles.collapseButtonContainer}>
@@ -243,7 +245,8 @@ ArtistDetailsSeason.propTypes = {
   onTableOptionChange: PropTypes.func.isRequired,
   onExpandPress: PropTypes.func.isRequired,
   onSortPress: PropTypes.func.isRequired,
-  onMonitorAlbumPress: PropTypes.func.isRequired
+  onMonitorAlbumPress: PropTypes.func.isRequired,
+  uiSettings: PropTypes.object.isRequired
 };
 
 export default ArtistDetailsSeason;

frontend/src/Artist/Details/ArtistDetailsSeasonConnector.js

@@ -8,6 +8,7 @@ import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import createArtistSelector from 'Store/Selectors/createArtistSelector';
 import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
 import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import { toggleAlbumsMonitored, setAlbumsTableOption, setAlbumsSort } from 'Store/Actions/albumActions';
 import { executeCommand } from 'Store/Actions/commandActions';
 import ArtistDetailsSeason from './ArtistDetailsSeason';
@@ -19,7 +20,8 @@ function createMapStateToProps() {
     createArtistSelector(),
     createCommandsSelector(),
     createDimensionsSelector(),
-    (label, albums, artist, commands, dimensions) => {
+    createUISettingsSelector(),
+    (label, albums, artist, commands, dimensions, uiSettings) => {
 
       const albumsInGroup = _.filter(albums.items, { albumType: label });
 
@@ -37,7 +39,8 @@ function createMapStateToProps() {
         sortKey: albums.sortKey,
         sortDirection: albums.sortDirection,
         artistMonitored: artist.monitored,
-        isSmallScreen: dimensions.isSmallScreen
+        isSmallScreen: dimensions.isSmallScreen,
+        uiSettings
       };
     }
   );

frontend/src/Settings/UI/UISettings.css

@@ -0,0 +1,3 @@
+.columnGroup {
+  flex-direction: column;
+}

frontend/src/Settings/UI/UISettings.js

@@ -10,6 +10,7 @@ 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 styles from './UISettings.css';
 
 export const firstDayOfWeekOptions = [
   { key: 0, value: 'Sunday' },
@@ -173,6 +174,51 @@ class UISettings extends Component {
                       {...settings.enableColorImpairedMode}
                     />
                   </FormGroup>
+
+                  <FormGroup>
+                    <FormLabel>Expand Items by Default</FormLabel>
+                    <div className={styles.columnGroup}>
+                      <FormInputGroup
+                        type={inputTypes.CHECK}
+                        name="expandAlbumByDefault"
+                        helpText="Albums"
+                        onChange={onInputChange}
+                        {...settings.expandAlbumByDefault}
+                      />
+
+                      <FormInputGroup
+                        type={inputTypes.CHECK}
+                        name="expandEPByDefault"
+                        helpText="EPs"
+                        onChange={onInputChange}
+                        {...settings.expandEPByDefault}
+                      />
+
+                      <FormInputGroup
+                        type={inputTypes.CHECK}
+                        name="expandSingleByDefault"
+                        helpText="Singles"
+                        onChange={onInputChange}
+                        {...settings.expandSingleByDefault}
+                      />
+
+                      <FormInputGroup
+                        type={inputTypes.CHECK}
+                        name="expandBroadcastByDefault"
+                        helpText="Broadcast"
+                        onChange={onInputChange}
+                        {...settings.expandBroadcastByDefault}
+                      />
+
+                      <FormInputGroup
+                        type={inputTypes.CHECK}
+                        name="expandOtherByDefault"
+                        helpText="Other"
+                        onChange={onInputChange}
+                        {...settings.expandOtherByDefault}
+                      />
+                    </div>
+                  </FormGroup>
                 </FieldSet>
               </Form>
           }