New: Unmapped files view (#888)

* New: Unmapped files view

Displays all trackfiles that haven't been matched to a track.
Generalised the file details component and adds it to the album
details screen.

* Add sorting by quality

* New: MediaServiceTests & MediaRepoTests

frontend/src/Album/Details/TrackActionsCell.js

@@ -1,34 +1,109 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { icons } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
 import IconButton from 'Components/Link/IconButton';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import FileDetailsModal from 'TrackFile/FileDetailsModal';
 import styles from './TrackActionsCell.css';
 
 class TrackActionsCell extends Component {
 
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isDetailsModalOpen: false,
+      isConfirmDeleteModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onDetailsPress = () => {
+    this.setState({ isDetailsModalOpen: true });
+  }
+
+  onDetailsModalClose = () => {
+    this.setState({ isDetailsModalOpen: false });
+  }
+
+  onDeleteFilePress = () => {
+    this.setState({ isConfirmDeleteModalOpen: true });
+  }
+
+  onConfirmDelete = () => {
+    this.setState({ isConfirmDeleteModalOpen: false });
+    this.props.deleteTrackFile({ id: this.props.trackFileId });
+  }
+
+  onConfirmDeleteModalClose = () => {
+    this.setState({ isConfirmDeleteModalOpen: false });
+  }
+
   //
   // Render
 
   render() {
 
-    return (
+    const {
+      trackFileId,
+      trackFilePath
+    } = this.props;
 
-      // TODO: Placeholder until we figure out what to show here.
+    const {
+      isDetailsModalOpen,
+      isConfirmDeleteModalOpen
+    } = this.state;
+
+    return (
       <TableRowCell className={styles.TrackActionsCell}>
-        <IconButton
-          name={icons.DELETE}
-          title="Delete Track"
+        {
+          trackFilePath &&
+            <IconButton
+              name={icons.INFO}
+              onPress={this.onDetailsPress}
+            />
+        }
+        {
+          trackFilePath &&
+          <IconButton
+            name={icons.DELETE}
+            onPress={this.onDeleteFilePress}
+          />
+        }
+
+        <FileDetailsModal
+          isOpen={isDetailsModalOpen}
+          onModalClose={this.onDetailsModalClose}
+          id={trackFileId}
         />
 
+        <ConfirmModal
+          isOpen={isConfirmDeleteModalOpen}
+          kind={kinds.DANGER}
+          title="Delete Track File"
+          message={`Are you sure you want to delete ${trackFilePath}?`}
+          confirmLabel="Delete"
+          onConfirm={this.onConfirmDelete}
+          onCancel={this.onConfirmDeleteModalClose}
+        />
       </TableRowCell>
+
     );
   }
 }
 
 TrackActionsCell.propTypes = {
   id: PropTypes.number.isRequired,
-  albumId: PropTypes.number.isRequired
+  albumId: PropTypes.number.isRequired,
+  trackFilePath: PropTypes.string,
+  trackFileId: PropTypes.number.isRequired,
+  deleteTrackFile: PropTypes.func.isRequired
 };
 
 export default TrackActionsCell;

frontend/src/Album/Details/TrackRow.js

@@ -12,24 +12,6 @@ import styles from './TrackRow.css';
 
 class TrackRow extends Component {
 
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isDetailsModalOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onDetailsModalClose = () => {
-    this.setState({ isDetailsModalOpen: false });
-  }
-
   //
   // Render
 
@@ -44,7 +26,8 @@ class TrackRow extends Component {
       duration,
       trackFilePath,
       trackFileRelativePath,
-      columns
+      columns,
+      deleteTrackFile
     } = this.props;
 
     return (
@@ -160,6 +143,9 @@ class TrackRow extends Component {
                   key={name}
                   albumId={albumId}
                   id={id}
+                  trackFilePath={trackFilePath}
+                  trackFileId={trackFileId}
+                  deleteTrackFile={deleteTrackFile}
                 />
               );
             }
@@ -173,6 +159,7 @@ class TrackRow extends Component {
 }
 
 TrackRow.propTypes = {
+  deleteTrackFile: PropTypes.func.isRequired,
   id: PropTypes.number.isRequired,
   albumId: PropTypes.number.isRequired,
   trackFileId: PropTypes.number,

frontend/src/Album/Details/TrackRowConnector.js

@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createTrackFileSelector from 'Store/Selectors/createTrackFileSelector';
+import { deleteTrackFile } from 'Store/Actions/trackFileActions';
 import TrackRow from './TrackRow';
 
 function createMapStateToProps() {
@@ -15,4 +16,9 @@ function createMapStateToProps() {
     }
   );
 }
-export default connect(createMapStateToProps)(TrackRow);
+
+const mapDispatchToProps = {
+  deleteTrackFile
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(TrackRow);