New: Optionally display authors as LastName, FirstName in index

Fixes #1062

frontend/src/Author/Index/Posters/AuthorIndexPoster.js

@@ -70,6 +70,7 @@ class AuthorIndexPoster extends Component {
     const {
       id,
       authorName,
+      authorNameLastFirst,
       monitored,
       titleSlug,
       status,
@@ -193,9 +194,9 @@ class AuthorIndexPoster extends Component {
           />
 
           {
-            showTitle &&
+            showTitle !== 'no' &&
               <div className={styles.title}>
-                {authorName}
+                {showTitle === 'firstLast' ? authorName : authorNameLastFirst}
               </div>
           }
 
@@ -260,6 +261,7 @@ class AuthorIndexPoster extends Component {
 AuthorIndexPoster.propTypes = {
   id: PropTypes.number.isRequired,
   authorName: PropTypes.string.isRequired,
+  authorNameLastFirst: PropTypes.string.isRequired,
   monitored: PropTypes.bool.isRequired,
   status: PropTypes.string.isRequired,
   titleSlug: PropTypes.string.isRequired,
@@ -269,7 +271,7 @@ AuthorIndexPoster.propTypes = {
   posterWidth: PropTypes.number.isRequired,
   posterHeight: PropTypes.number.isRequired,
   detailedProgressBar: PropTypes.bool.isRequired,
-  showTitle: PropTypes.bool.isRequired,
+  showTitle: PropTypes.string.isRequired,
   showMonitored: PropTypes.bool.isRequired,
   showQualityProfile: PropTypes.bool.isRequired,
   qualityProfile: PropTypes.object.isRequired,

frontend/src/Author/Index/Posters/AuthorIndexPosters.js

@@ -50,7 +50,7 @@ function calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions)
     isSmallScreen ? columnPaddingSmallScreen : columnPadding
   ];
 
-  if (showTitle) {
+  if (showTitle !== 'no') {
     heights.push(19);
   }
 
@@ -137,7 +137,8 @@ class AuthorIndexPosters extends Component {
             prevState.columnWidth !== columnWidth ||
             prevState.columnCount !== columnCount ||
             prevState.rowHeight !== rowHeight ||
-            hasDifferentItemsOrOrder(prevProps.items, items))) {
+            hasDifferentItemsOrOrder(prevProps.items, items)) ||
+            prevProps.posterOptions.showTitle !== posterOptions.showTitle) {
       // recomputeGridSize also forces Grid to discard its cache of rendered cells
       this._grid.recomputeGridSize();
     }
@@ -148,7 +149,7 @@ class AuthorIndexPosters extends Component {
     }
 
     if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
-      const index = getIndexOfFirstCharacter(items, jumpToCharacter);
+      const index = getIndexOfFirstCharacter(items, sortKey, jumpToCharacter);
 
       if (this._grid && index != null) {
         const row = Math.floor(index / columnCount);

frontend/src/Author/Index/Posters/Options/AuthorIndexPosterOptionsModalContent.js

@@ -19,6 +19,12 @@ const posterSizeOptions = [
   { key: 'large', value: 'Large' }
 ];
 
+const nameOptions = [
+  { key: 'no', value: translate('NoName') },
+  { key: 'firstLast', value: translate('NameFirstLast') },
+  { key: 'lastFirst', value: translate('NameLastFirst') }
+];
+
 class AuthorIndexPosterOptionsModalContent extends Component {
 
   //
@@ -148,9 +154,10 @@ class AuthorIndexPosterOptionsModalContent extends Component {
               </FormLabel>
 
               <FormInputGroup
-                type={inputTypes.CHECK}
+                type={inputTypes.SELECT}
                 name="showTitle"
                 value={showTitle}
+                values={nameOptions}
                 helpText={translate('ShowTitleHelpText')}
                 onChange={this.onChangePosterOption}
               />
@@ -214,7 +221,7 @@ class AuthorIndexPosterOptionsModalContent extends Component {
 
 AuthorIndexPosterOptionsModalContent.propTypes = {
   size: PropTypes.string.isRequired,
-  showTitle: PropTypes.bool.isRequired,
+  showTitle: PropTypes.string.isRequired,
   showMonitored: PropTypes.bool.isRequired,
   showQualityProfile: PropTypes.bool.isRequired,
   detailedProgressBar: PropTypes.bool.isRequired,