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
2026-01-06 16:55:49 +00:00 · 2019-08-25 16:49:30 +01:00
parent 74cb2a6f52
commit 4413c7e46c
36 changed files with 1507 additions and 404 deletions
--- a/frontend/src/UnmappedFiles/UnmappedFilesTableRow.js
+++ b/frontend/src/UnmappedFiles/UnmappedFilesTableRow.js
@@ -0,0 +1,218 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons, kinds } from 'Helpers/Props';
+import formatBytes from 'Utilities/Number/formatBytes';
+import IconButton from 'Components/Link/IconButton';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import VirtualTableRow from 'Components/Table/VirtualTableRow';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
+import TrackQuality from 'Album/TrackQuality';
+import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
+import FileDetailsModal from 'TrackFile/FileDetailsModal';
+import styles from './UnmappedFilesTableRow.css';
+
+class UnmappedFilesTableRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isDetailsModalOpen: false,
+      isInteractiveImportModalOpen: false,
+      isConfirmDeleteModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onDetailsPress = () => {
+    this.setState({ isDetailsModalOpen: true });
+  }
+
+  onDetailsModalClose = () => {
+    this.setState({ isDetailsModalOpen: false });
+  }
+
+  onInteractiveImportPress = () => {
+    this.setState({ isInteractiveImportModalOpen: true });
+  }
+
+  onInteractiveImportModalClose = () => {
+    this.setState({ isInteractiveImportModalOpen: false });
+  }
+
+  onDeleteFilePress = () => {
+    this.setState({ isConfirmDeleteModalOpen: true });
+  }
+
+  onConfirmDelete = () => {
+    this.setState({ isConfirmDeleteModalOpen: false });
+    this.props.deleteUnmappedFile(this.props.id);
+  }
+
+  onConfirmDeleteModalClose = () => {
+    this.setState({ isConfirmDeleteModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      style,
+      id,
+      path,
+      size,
+      dateAdded,
+      quality,
+      columns
+    } = this.props;
+
+    const folder = path.substring(0, Math.max(path.lastIndexOf('/'), path.lastIndexOf('\\')));
+
+    const {
+      isInteractiveImportModalOpen,
+      isDetailsModalOpen,
+      isConfirmDeleteModalOpen
+    } = this.state;
+
+    return (
+      <VirtualTableRow
+        style={style}
+      >
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'path') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  {path}
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'size') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  {formatBytes(size)}
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'dateAdded') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  className={styles[name]}
+                  date={dateAdded}
+                  component={VirtualTableRowCell}
+                />
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  <TrackQuality
+                    quality={quality}
+                  />
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'actions') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  <IconButton
+                    name={icons.INFO}
+                    onPress={this.onDetailsPress}
+                  />
+
+                  <IconButton
+                    name={icons.INTERACTIVE}
+                    onPress={this.onInteractiveImportPress}
+                  />
+
+                  <IconButton
+                    name={icons.DELETE}
+                    onPress={this.onDeleteFilePress}
+                  />
+
+                </VirtualTableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+
+        <InteractiveImportModal
+          isOpen={isInteractiveImportModalOpen}
+          folder={folder}
+          showFilterExistingFiles={true}
+          filterExistingFiles={false}
+          showImportMode={false}
+          showReplaceExistingFiles={false}
+          replaceExistingFiles={false}
+          onModalClose={this.onInteractiveImportModalClose}
+        />
+
+        <FileDetailsModal
+          isOpen={isDetailsModalOpen}
+          onModalClose={this.onDetailsModalClose}
+          id={id}
+        />
+
+        <ConfirmModal
+          isOpen={isConfirmDeleteModalOpen}
+          kind={kinds.DANGER}
+          title="Delete Track File"
+          message={`Are you sure you want to delete ${path}?`}
+          confirmLabel="Delete"
+          onConfirm={this.onConfirmDelete}
+          onCancel={this.onConfirmDeleteModalClose}
+        />
+
+      </VirtualTableRow>
+    );
+  }
+
+}
+
+UnmappedFilesTableRow.propTypes = {
+  style: PropTypes.object.isRequired,
+  id: PropTypes.number.isRequired,
+  path: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  quality: PropTypes.object.isRequired,
+  dateAdded: PropTypes.string.isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  deleteUnmappedFile: PropTypes.func.isRequired
+};
+
+export default UnmappedFilesTableRow;