From 043d80a557824017735105798d5ea7b6913288e1 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Mon, 13 May 2019 15:38:20 +0100
Subject: [PATCH] disable interactions with the listing if notes are being
edited
---
.../src/app/src/components/Listing/index.js | 4 +++-
.../src/app/src/components/Listing/style.scss | 14 ++++++++++----
.../src/app/src/containers/NoteListing.js | 7 ++++++-
.../src/app/src/redux/selectors/notes.js | 2 ++
4 files changed, 21 insertions(+), 6 deletions(-)
diff --git a/opentech/static_src/src/app/src/components/Listing/index.js b/opentech/static_src/src/app/src/components/Listing/index.js
index e712e958a..5049d2bad 100644
--- a/opentech/static_src/src/app/src/components/Listing/index.js
+++ b/opentech/static_src/src/app/src/components/Listing/index.js
@@ -22,6 +22,7 @@ export default class Listing extends React.Component {
handleRetry: PropTypes.func,
listRef: PropTypes.object,
column: PropTypes.string,
+ isEditing: PropTypes.bool,
};
renderListItems() {
@@ -88,6 +89,7 @@ export default class Listing extends React.Component {
items,
column,
listRef,
+ isEditing,
} = this.props;
@@ -106,7 +108,7 @@ export default class Listing extends React.Component {
return (
<>
{ isLoading && <InlineLoading /> }
- <ul className={`listing listing--${column}`} ref={listRef}>
+ <ul className={`listing listing--${column} ${isEditing ? 'disabled' : ''}`} ref={listRef}>
{this.renderListItems()}
</ul>
</>
diff --git a/opentech/static_src/src/app/src/components/Listing/style.scss b/opentech/static_src/src/app/src/components/Listing/style.scss
index a55970b21..879cff54b 100644
--- a/opentech/static_src/src/app/src/components/Listing/style.scss
+++ b/opentech/static_src/src/app/src/components/Listing/style.scss
@@ -1,15 +1,21 @@
.listing {
overflow-y: overlay;
flex-grow: 3;
+ transition: opacity $transition;
@include target-ie11 {
max-width: 390px;
width: 100%;
}
- &__header {
- height: $listing-header-height;
+ &.is-blank {
padding: 20px;
+ text-align: center;
+ }
+
+ &.disabled {
+ opacity: .5;
+ pointer-events: none;
}
// ensures the last item will be at the top of the column after navigating to it via the dropdown
@@ -29,9 +35,9 @@
box-shadow: inset 0 -20px 20px -10px $color--light-mid-grey;
}
- &.is-blank {
+ &__header {
+ height: $listing-header-height;
padding: 20px;
- text-align: center;
}
// inner <li>'s
diff --git a/opentech/static_src/src/app/src/containers/NoteListing.js b/opentech/static_src/src/app/src/containers/NoteListing.js
index 5b77d9599..ad04491a6 100644
--- a/opentech/static_src/src/app/src/containers/NoteListing.js
+++ b/opentech/static_src/src/app/src/containers/NoteListing.js
@@ -12,10 +12,12 @@ import {
getNotesErrorMessage,
getNoteIDsForSubmissionOfID,
getNotesFetchState,
+ getNoteEditingState
} from '@selectors/notes';
-const NoteListing = ({loadNotes, submissionID, noteIDs, isErrored, errorMessage, isLoading }) => {
+const NoteListing = ({ loadNotes, submissionID, noteIDs, isErrored, errorMessage, isLoading, isEditing }) => {
+
const fetchNotes = () => loadNotes(submissionID)
const {start, stop } = useInterval(fetchNotes, 30000)
@@ -40,6 +42,7 @@ const NoteListing = ({loadNotes, submissionID, noteIDs, isErrored, errorMessage,
return (
<Listing
+ isEditing={isEditing}
isLoading={ isLoading }
isErrored={ isErrored }
errorMessage={ errorMessage }
@@ -58,6 +61,7 @@ NoteListing.propTypes = {
isErrored: PropTypes.bool,
errorMessage: PropTypes.string,
isLoading: PropTypes.bool,
+ isEditing: PropTypes.bool,
};
@@ -70,6 +74,7 @@ const mapStateToProps = (state, ownProps) => ({
isLoading: getNotesFetchState(state),
isErrored: getNotesErrorState(state),
errorMessage: getNotesErrorMessage(state),
+ isEditing: getNoteEditingState(state),
});
export default connect(mapStateToProps, mapDispatchToProps)(NoteListing);
diff --git a/opentech/static_src/src/app/src/redux/selectors/notes.js b/opentech/static_src/src/app/src/redux/selectors/notes.js
index dd91f2cc0..3395bbc0a 100644
--- a/opentech/static_src/src/app/src/redux/selectors/notes.js
+++ b/opentech/static_src/src/app/src/redux/selectors/notes.js
@@ -35,3 +35,5 @@ const getNoteCreatingState = state => state.notes.isCreating;
export const getNoteCreatingStateForSubmission = submissionID => createSelector(
[getNoteCreatingState], creatingStates => creatingStates.includes(submissionID)
);
+
+export const getNoteEditingState = state => state.notes.isEditing;
--
GitLab