Fixed: Tidy up the Author / Book files table

Closes #1089
pull/1141/head
ta264 4 years ago
parent 71a34c7650
commit af9f8a9a18

@ -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;
}

@ -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

@ -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;

@ -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
columns={columns}
selectAll={true}
allSelected={allSelected}
allUnselected={allUnselected}
onSelectAllChange={this.onSelectAllChange}
<div
className={styles.filesTable}
>
<TableBody>
{
items.map((item) => {
return (
<BookFileEditorRow
key={item.id}
isSelected={selectedState[item.id]}
{...item}
onSelectedChange={this.onSelectedChange}
deleteBookFile={dispatchDeleteBookFile}
/>
);
})
}
</TableBody>
</Table> :
<Table
selectAll={true}
allSelected={allSelected}
allUnselected={allUnselected}
onSelectAllChange={this.onSelectAllChange}
{...otherProps}
>
<TableBody>
{
items.map((item) => {
return (
<BookFileEditorRow
key={item.id}
isSelected={selectedState[item.id]}
{...item}
onSelectedChange={this.onSelectedChange}
deleteBookFile={dispatchDeleteBookFile}
/>
);
})
}
</TableBody>
</Table>
</div> :
null
}

@ -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());
},

Loading…
Cancel
Save