Fixed: Tidy up the Author / Book files table

Closes #1089

frontend/src/BookFile/Editor/BookFileEditorRow.css

@@ -0,0 +1,20 @@
+.path {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  flex: 4 0 400px;
+  font-size: 13px;
+  font-family: $monoSpaceFontFamily;
+}
+
+.size {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 100px;
+}
+
+.quality,
+.dateAdded {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 120px;
+}

frontend/src/BookFile/Editor/BookFileEditorRow.js

@@ -1,15 +1,20 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import BookQuality from 'Book/BookQuality';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import TableRow from 'Components/Table/TableRow';
+import formatBytes from 'Utilities/Number/formatBytes';
 import BookFileActionsCell from './BookFileActionsCell';
+import styles from './BookFileEditorRow.css';
 
 function BookFileEditorRow(props) {
   const {
     id,
     path,
+    size,
+    dateAdded,
     quality,
     qualityCutoffNotMet,
     isSelected,
@@ -24,11 +29,26 @@ function BookFileEditorRow(props) {
         isSelected={isSelected}
         onSelectedChange={onSelectedChange}
       />
-      <TableRowCell>
+      <TableRowCell
+        className={styles.path}
+      >
         {path}
       </TableRowCell>
 
-      <TableRowCell>
+      <TableRowCell
+        className={styles.size}
+      >
+        {formatBytes(size)}
+      </TableRowCell>
+
+      <RelativeDateCellConnector
+        className={styles.dateAdded}
+        date={dateAdded}
+      />
+
+      <TableRowCell
+        className={styles.quality}
+      >
         <BookQuality
           quality={quality}
           isCutoffNotMet={qualityCutoffNotMet}
@@ -47,8 +67,10 @@ function BookFileEditorRow(props) {
 BookFileEditorRow.propTypes = {
   id: PropTypes.number.isRequired,
   path: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
   quality: PropTypes.object.isRequired,
   qualityCutoffNotMet: PropTypes.bool.isRequired,
+  dateAdded: PropTypes.string.isRequired,
   isSelected: PropTypes.bool,
   onSelectedChange: PropTypes.func.isRequired,
   deleteBookFile: PropTypes.func.isRequired

frontend/src/BookFile/Editor/BookFileEditorTableContent.css

@@ -1,3 +1,16 @@
+.filesTable {
+  margin-bottom: 20px;
+  padding-top: 15px;
+  border: 1px solid $borderColor;
+  border-top: 1px solid $borderColor;
+  border-radius: 4px;
+  background-color: $white;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
 .actions {
   display: flex;
   margin-right: auto;

frontend/src/BookFile/Editor/BookFileEditorTableContent.js

@@ -17,24 +17,6 @@ import toggleSelected from 'Utilities/Table/toggleSelected';
 import BookFileEditorRow from './BookFileEditorRow';
 import styles from './BookFileEditorTableContent.css';
 
-const columns = [
-  {
-    name: 'path',
-    label: 'Path',
-    isVisible: true
-  },
-  {
-    name: 'quality',
-    label: 'Quality',
-    isVisible: true
-  },
-  {
-    name: 'actions',
-    columnLabel: 'Actions',
-    isVisible: true
-  }
-];
-
 class BookFileEditorTableContent extends Component {
 
   //
@@ -115,7 +97,8 @@ class BookFileEditorTableContent extends Component {
       error,
       items,
       qualities,
-      dispatchDeleteBookFile
+      dispatchDeleteBookFile,
+      ...otherProps
     } = this.props;
 
     const {
@@ -160,29 +143,33 @@ class BookFileEditorTableContent extends Component {
 
         {
           isPopulated && items.length ?
-            <Table
+            <div
-              columns={columns}
+              className={styles.filesTable}
-              selectAll={true}
-              allSelected={allSelected}
-              allUnselected={allUnselected}
-              onSelectAllChange={this.onSelectAllChange}
             >
-              <TableBody>
+              <Table
-                {
+                selectAll={true}
-                  items.map((item) => {
+                allSelected={allSelected}
-                    return (
+                allUnselected={allUnselected}
-                      <BookFileEditorRow
+                onSelectAllChange={this.onSelectAllChange}
-                        key={item.id}
+                {...otherProps}
-                        isSelected={selectedState[item.id]}
+              >
-                        {...item}
+                <TableBody>
-                        onSelectedChange={this.onSelectedChange}
+                  {
-                        deleteBookFile={dispatchDeleteBookFile}
+                    items.map((item) => {
-                      />
+                      return (
-                    );
+                        <BookFileEditorRow
-                  })
+                          key={item.id}
-                }
+                          isSelected={selectedState[item.id]}
-              </TableBody>
+                          {...item}
-            </Table> :
+                          onSelectedChange={this.onSelectedChange}
+                          deleteBookFile={dispatchDeleteBookFile}
+                        />
+                      );
+                    })
+                  }
+                </TableBody>
+              </Table>
+            </div> :
             null
         }
 

frontend/src/BookFile/Editor/BookFileEditorTableContentConnector.js

@@ -4,9 +4,10 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { deleteBookFile, deleteBookFiles, updateBookFiles } from 'Store/Actions/bookFileActions';
+import { deleteBookFile, deleteBookFiles, setBookFilesSort, updateBookFiles } from 'Store/Actions/bookFileActions';
 import { fetchQualityProfileSchema } from 'Store/Actions/settingsActions';
 import createAuthorSelector from 'Store/Selectors/createAuthorSelector';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import getQualities from 'Utilities/Quality/getQualities';
 import BookFileEditorTableContent from './BookFileEditorTableContent';
 
@@ -35,7 +36,7 @@ function createSchemaSelector() {
 function createMapStateToProps() {
   return createSelector(
     (state, { bookId }) => bookId,
-    (state) => state.bookFiles,
+    createClientSideCollectionSelector('bookFiles'),
     createSchemaSelector(),
     createAuthorSelector(),
     (
@@ -44,9 +45,14 @@ function createMapStateToProps() {
       schema,
       author
     ) => {
+      const {
+        items,
+        ...otherProps
+      } = bookFiles;
       return {
         ...schema,
-        items: bookFiles.items,
+        items,
+        ...otherProps,
         isDeleting: bookFiles.isDeleting,
         isSaving: bookFiles.isSaving
       };
@@ -56,6 +62,10 @@ function createMapStateToProps() {
 
 function createMapDispatchToProps(dispatch, props) {
   return {
+    onSortPress(sortKey) {
+      dispatch(setBookFilesSort({ sortKey }));
+    },
+
     dispatchFetchQualityProfileSchema(name, path) {
       dispatch(fetchQualityProfileSchema());
     },