New: Custom Filtering for UI (#234)

frontend/src/Artist/Index/Table/ArtistIndexHeader.css

@@ -55,7 +55,7 @@
 .sizeOnDisk {
   composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
 
-  flex: 0 0 110px;
+  flex: 0 0 115px;
 }
 
 .tags {

frontend/src/Artist/Index/Table/ArtistIndexRow.js

@@ -74,18 +74,22 @@ class ArtistIndexRow extends Component {
       nextAlbum,
       lastAlbum,
       added,
-      albumCount,
-      trackCount,
-      trackFileCount,
-      totalTrackCount,
+      statistics,
       path,
-      sizeOnDisk,
       tags,
       columns,
       isRefreshingArtist,
       onRefreshArtistPress
     } = this.props;
 
+    const {
+      albumCount,
+      trackCount,
+      trackFileCount,
+      totalTrackCount,
+      sizeOnDisk
+    } = statistics;
+
     const {
       isEditArtistModalOpen,
       isDeleteArtistModalOpen
@@ -367,13 +371,9 @@ ArtistIndexRow.propTypes = {
   nextAlbum: PropTypes.object,
   lastAlbum: PropTypes.object,
   added: PropTypes.string,
-  albumCount: PropTypes.number,
-  trackCount: PropTypes.number,
-  trackFileCount: PropTypes.number,
-  totalTrackCount: PropTypes.number,
+  statistics: PropTypes.object.isRequired,
   latestAlbum: PropTypes.object,
   path: PropTypes.string.isRequired,
-  sizeOnDisk: PropTypes.number,
   tags: PropTypes.arrayOf(PropTypes.number).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   isRefreshingArtist: PropTypes.bool.isRequired,
@@ -382,7 +382,8 @@ ArtistIndexRow.propTypes = {
 
 ArtistIndexRow.defaultProps = {
   trackCount: 0,
-  trackFileCount: 0
+  trackFileCount: 0,
+  albumCount: 0
 };
 
 export default ArtistIndexRow;

frontend/src/Artist/Index/Table/ArtistIndexTable.js

@@ -1,6 +1,6 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
 import { sortDirections } from 'Helpers/Props';
 import VirtualTable from 'Components/Table/VirtualTable';
 import ArtistIndexItemConnector from 'Artist/Index/ArtistIndexItemConnector';
@@ -9,40 +9,37 @@ import ArtistIndexRow from './ArtistIndexRow';
 import styles from './ArtistIndexTable.css';
 
 class ArtistIndexTable extends Component {
+
+  //
+  // Lifecycle
+
   constructor(props, context) {
     super(props, context);
-    this._table = null;
+
+    this.state = {
+      scrollIndex: null
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const jumpToCharacter = this.props.jumpToCharacter;
+
+    if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
+      const items = this.props.items;
+
+      const scrollIndex = getIndexOfFirstCharacter(items, jumpToCharacter);
+
+      if (scrollIndex != null) {
+        this.setState({ scrollIndex });
+      }
+    } else if (jumpToCharacter == null && prevProps.jumpToCharacter != null) {
+      this.setState({ scrollIndex: null });
+    }
   }
 
   //
   // Control
 
-  /**
-   * Sets the reference to the virtual table
-   * @param ref
-   */
-  setTableRef = (ref) => {
-    this._table = ref;
-  };
-
-  scrollToFirstCharacter(character) {
-    const items = this.props.items;
-
-    const row = _.findIndex(items, (item) => {
-      const firstCharacter = item.sortName.charAt(0);
-
-      if (character === '#') {
-        return !isNaN(firstCharacter);
-      }
-
-      return firstCharacter === character;
-    });
-
-    if (row != null) {
-      this._table.scrollToRow(row);
-    }
-  }
-
   rowRenderer = ({ key, rowIndex, style }) => {
     const {
       items,
@@ -72,8 +69,7 @@ class ArtistIndexTable extends Component {
     const {
       items,
       columns,
-      filterKey,
-      filterValue,
+      filters,
       sortKey,
       sortDirection,
       isSmallScreen,
@@ -86,10 +82,10 @@ class ArtistIndexTable extends Component {
 
     return (
       <VirtualTable
-        ref={this.setTableRef}
         className={styles.tableContainer}
         items={items}
         scrollTop={scrollTop}
+        scrollIndex={this.state.scrollIndex}
         contentBody={contentBody}
         isSmallScreen={isSmallScreen}
         rowHeight={38}
@@ -104,8 +100,7 @@ class ArtistIndexTable extends Component {
           />
         }
         columns={columns}
-        filterKey={filterKey}
-        filterValue={filterValue}
+        filters={filters}
         sortKey={sortKey}
         sortDirection={sortDirection}
         onRender={onRender}
@@ -118,11 +113,11 @@ class ArtistIndexTable extends Component {
 ArtistIndexTable.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  filterKey: PropTypes.string,
-  filterValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   sortKey: PropTypes.string,
   sortDirection: PropTypes.oneOf(sortDirections.all),
   scrollTop: PropTypes.number.isRequired,
+  jumpToCharacter: PropTypes.string,
   contentBody: PropTypes.object.isRequired,
   isSmallScreen: PropTypes.bool.isRequired,
   onSortPress: PropTypes.func.isRequired,

frontend/src/Artist/Index/Table/ArtistIndexTableConnector.js

@@ -29,6 +29,6 @@ export default connectSection(
   createMapStateToProps,
   createMapDispatchToProps,
   undefined,
-  { withRef: true },
+  undefined,
   { section: 'artist', uiSection: 'artistIndex' }
 )(ArtistIndexTable);