diff --git a/frontend/src/BookFile/Editor/BookFileActionsCell.css b/frontend/src/BookFile/Editor/BookFileActionsCell.css
new file mode 100644
index 000000000..6b80ba0e0
--- /dev/null
+++ b/frontend/src/BookFile/Editor/BookFileActionsCell.css
@@ -0,0 +1,6 @@
+.TrackActionsCell {
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+ width: 70px;
+ white-space: nowrap;
+}
diff --git a/frontend/src/BookFile/Editor/BookFileActionsCell.js b/frontend/src/BookFile/Editor/BookFileActionsCell.js
new file mode 100644
index 000000000..82ffba93e
--- /dev/null
+++ b/frontend/src/BookFile/Editor/BookFileActionsCell.js
@@ -0,0 +1,107 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import FileDetailsModal from 'BookFile/FileDetailsModal';
+import IconButton from 'Components/Link/IconButton';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import { icons, kinds } from 'Helpers/Props';
+import styles from './BookFileActionsCell.css';
+
+class BookFileActionsCell 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.deleteBookFile({ id: this.props.id });
+ }
+
+ onConfirmDeleteModalClose = () => {
+ this.setState({ isConfirmDeleteModalOpen: false });
+ }
+
+ //
+ // Render
+
+ render() {
+
+ const {
+ id,
+ path
+ } = this.props;
+
+ const {
+ isDetailsModalOpen,
+ isConfirmDeleteModalOpen
+ } = this.state;
+
+ return (
+
+ {
+ path &&
+
+ }
+ {
+ path &&
+
+ }
+
+
+
+
+
+
+ );
+ }
+}
+
+BookFileActionsCell.propTypes = {
+ id: PropTypes.number.isRequired,
+ path: PropTypes.string,
+ deleteBookFile: PropTypes.func.isRequired
+};
+
+export default BookFileActionsCell;
diff --git a/frontend/src/BookFile/Editor/BookFileEditorRow.js b/frontend/src/BookFile/Editor/BookFileEditorRow.js
index 30ce6405d..466ed0b52 100644
--- a/frontend/src/BookFile/Editor/BookFileEditorRow.js
+++ b/frontend/src/BookFile/Editor/BookFileEditorRow.js
@@ -4,6 +4,7 @@ import BookQuality from 'Book/BookQuality';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
import TableRow from 'Components/Table/TableRow';
+import BookFileActionsCell from './BookFileActionsCell';
function BookFileEditorRow(props) {
const {
@@ -12,7 +13,8 @@ function BookFileEditorRow(props) {
quality,
qualityCutoffNotMet,
isSelected,
- onSelectedChange
+ onSelectedChange,
+ deleteBookFile
} = props;
return (
@@ -32,6 +34,12 @@ function BookFileEditorRow(props) {
isCutoffNotMet={qualityCutoffNotMet}
/>
+
+
);
}
@@ -42,7 +50,8 @@ BookFileEditorRow.propTypes = {
quality: PropTypes.object.isRequired,
qualityCutoffNotMet: PropTypes.bool.isRequired,
isSelected: PropTypes.bool,
- onSelectedChange: PropTypes.func.isRequired
+ onSelectedChange: PropTypes.func.isRequired,
+ deleteBookFile: PropTypes.func.isRequired
};
export default BookFileEditorRow;
diff --git a/frontend/src/BookFile/Editor/BookFileEditorTableContent.js b/frontend/src/BookFile/Editor/BookFileEditorTableContent.js
index 7dfde48dc..c346ec8ab 100644
--- a/frontend/src/BookFile/Editor/BookFileEditorTableContent.js
+++ b/frontend/src/BookFile/Editor/BookFileEditorTableContent.js
@@ -26,6 +26,11 @@ const columns = [
name: 'quality',
label: 'Quality',
isVisible: true
+ },
+ {
+ name: 'actions',
+ columnLabel: 'Actions',
+ isVisible: true
}
];
@@ -117,7 +122,8 @@ class BookFileEditorTableContent extends Component {
isPopulated,
error,
items,
- qualities
+ qualities,
+ dispatchDeleteBookFile
} = this.props;
const {
@@ -178,6 +184,7 @@ class BookFileEditorTableContent extends Component {
isSelected={selectedState[item.id]}
{...item}
onSelectedChange={this.onSelectedChange}
+ deleteBookFile={dispatchDeleteBookFile}
/>
);
})
@@ -230,7 +237,8 @@ BookFileEditorTableContent.propTypes = {
items: PropTypes.arrayOf(PropTypes.object).isRequired,
qualities: PropTypes.arrayOf(PropTypes.object).isRequired,
onDeletePress: PropTypes.func.isRequired,
- onQualityChange: PropTypes.func.isRequired
+ onQualityChange: PropTypes.func.isRequired,
+ dispatchDeleteBookFile: PropTypes.func.isRequired
};
export default BookFileEditorTableContent;
diff --git a/frontend/src/BookFile/Editor/BookFileEditorTableContentConnector.js b/frontend/src/BookFile/Editor/BookFileEditorTableContentConnector.js
index 04d96744a..ef6ab425e 100644
--- a/frontend/src/BookFile/Editor/BookFileEditorTableContentConnector.js
+++ b/frontend/src/BookFile/Editor/BookFileEditorTableContentConnector.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
-import { deleteBookFiles, updateBookFiles } from 'Store/Actions/bookFileActions';
+import { deleteBookFile, deleteBookFiles, updateBookFiles } from 'Store/Actions/bookFileActions';
import { fetchQualityProfileSchema } from 'Store/Actions/settingsActions';
import createAuthorSelector from 'Store/Selectors/createAuthorSelector';
import getQualities from 'Utilities/Quality/getQualities';
@@ -67,6 +67,10 @@ function createMapDispatchToProps(dispatch, props) {
onDeletePress(bookFileIds) {
dispatch(deleteBookFiles({ bookFileIds }));
+ },
+
+ dispatchDeleteBookFile(id) {
+ dispatch(deleteBookFile(id));
}
};
}
@@ -119,7 +123,8 @@ BookFileEditorTableContentConnector.propTypes = {
bookId: PropTypes.number,
qualities: PropTypes.arrayOf(PropTypes.object).isRequired,
dispatchFetchQualityProfileSchema: PropTypes.func.isRequired,
- dispatchUpdateBookFiles: PropTypes.func.isRequired
+ dispatchUpdateBookFiles: PropTypes.func.isRequired,
+ dispatchDeleteBookFile: PropTypes.func.isRequired
};
export default connect(createMapStateToProps, createMapDispatchToProps)(BookFileEditorTableContentConnector);