diff --git a/frontend/src/BookFile/Editor/BookFileEditorRow.css b/frontend/src/BookFile/Editor/BookFileEditorRow.css new file mode 100644 index 000000000..418967ccf --- /dev/null +++ b/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; +} diff --git a/frontend/src/BookFile/Editor/BookFileEditorRow.js b/frontend/src/BookFile/Editor/BookFileEditorRow.js index 466ed0b52..c11e02ba3 100644 --- a/frontend/src/BookFile/Editor/BookFileEditorRow.js +++ b/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} /> - + {path} - + + {formatBytes(size)} + + + + + - - { - items.map((item) => { - return ( - - ); - }) - } - - : + + + { + items.map((item) => { + return ( + + ); + }) + } + +
+ : null } diff --git a/frontend/src/BookFile/Editor/BookFileEditorTableContentConnector.js b/frontend/src/BookFile/Editor/BookFileEditorTableContentConnector.js index d9f9b1a0a..bf5d636b1 100644 --- a/frontend/src/BookFile/Editor/BookFileEditorTableContentConnector.js +++ b/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()); },