@manuscripts/style-guide 1.1.15-LEAN-2620 → 1.1.15-LEAN-2684-4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/EditorHeader/EditorHeader.js +20 -20
- package/dist/cjs/components/EditorHeader/ProceedView.js +10 -9
- package/dist/cjs/components/SubmissionInspector/BaseInformation.js +1 -1
- package/dist/cjs/lib/capabilities.js +4 -3
- package/dist/es/components/EditorHeader/EditorHeader.js +21 -21
- package/dist/es/components/EditorHeader/ProceedView.js +11 -10
- package/dist/es/components/SubmissionInspector/BaseInformation.js +1 -1
- package/dist/es/lib/capabilities.js +4 -3
- package/dist/types/components/AlertMessage.d.ts +1 -1
- package/dist/types/components/AuthorForm/RemoveAuthorButton.d.ts +1 -1
- package/dist/types/components/AutoSaveInput.d.ts +1 -1
- package/dist/types/components/Dialog.d.ts +1 -1
- package/dist/types/components/EditorHeader/EditorHeader.d.ts +3 -9
- package/dist/types/components/EditorHeader/ProceedView.d.ts +3 -2
- package/dist/types/components/Form.d.ts +1 -1
- package/dist/types/components/Resizer/Resizer.d.ts +1 -1
- package/dist/types/components/Resizer/ResizerButton.d.ts +1 -1
- package/dist/types/components/icons/add-author.d.ts +2 -1
- package/dist/types/components/icons/add-comment-icon.d.ts +2 -1
- package/dist/types/components/icons/add-icon-active.d.ts +2 -1
- package/dist/types/components/icons/add-icon-inverted.d.ts +2 -1
- package/dist/types/components/icons/back-arrow.d.ts +2 -1
- package/dist/types/components/icons/bookmark.d.ts +2 -1
- package/dist/types/components/icons/google.d.ts +2 -1
- package/dist/types/components/icons/orcid.d.ts +2 -1
- package/dist/types/components/icons/plus-icon.d.ts +2 -1
- package/dist/types/components/icons/project-notification.d.ts +2 -1
- package/dist/types/components/icons/project.d.ts +2 -1
- package/dist/types/components/icons/projects-list.d.ts +2 -1
- package/dist/types/components/icons/search.d.ts +2 -1
- package/dist/types/components/icons/tick-mark.d.ts +2 -1
- package/dist/types/components/icons/user.d.ts +2 -1
- package/package.json +3 -3
|
@@ -47,56 +47,56 @@ const MapUserRole = {
|
|
|
47
47
|
Writer: Editing,
|
|
48
48
|
Annotator: { label: 'Suggesting...', icon: __1.AnnotatorIcon },
|
|
49
49
|
Viewer: { label: 'Reading...', icon: __1.ReadingIcon },
|
|
50
|
+
Proofer: { label: 'Proofing', icon: __1.AnnotatorIcon },
|
|
50
51
|
};
|
|
51
52
|
const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
|
|
52
|
-
var _a, _b, _c, _d
|
|
53
|
+
var _a, _b, _c, _d;
|
|
53
54
|
const [confirmationDialog, toggleConfirmationDialog] = (0, react_1.useState)(false);
|
|
55
|
+
const [loading, setLoading] = (0, react_1.useState)(false);
|
|
54
56
|
const [noteValue, setNoteValue] = (0, react_1.useState)('');
|
|
57
|
+
const [error, setError] = (0, react_1.useState)(undefined);
|
|
55
58
|
const [selectedTransitionIndex, setSelectedTransitionIndex] = (0, react_1.useState)();
|
|
56
|
-
const {
|
|
57
|
-
|
|
59
|
+
const { complete: showComplete, error: submissionError, mutationError, submit, } = submitProceed;
|
|
60
|
+
(0, react_1.useEffect)(() => {
|
|
61
|
+
if (submissionError) {
|
|
62
|
+
setError(submissionError);
|
|
63
|
+
}
|
|
64
|
+
}, [submissionError]);
|
|
58
65
|
const continueDialogAction = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
59
66
|
if (submission && selectedTransitionIndex && handleSnapshot) {
|
|
60
67
|
const { status } = submission.currentStep.type.transitions[selectedTransitionIndex];
|
|
61
|
-
|
|
68
|
+
setLoading(true);
|
|
62
69
|
yield handleSnapshot();
|
|
63
70
|
yield submit(status.id, noteValue);
|
|
71
|
+
setLoading(false);
|
|
64
72
|
}
|
|
65
73
|
}), [
|
|
66
|
-
submission,
|
|
67
|
-
selectedTransitionIndex,
|
|
68
74
|
handleSnapshot,
|
|
69
|
-
|
|
70
|
-
|
|
75
|
+
selectedTransitionIndex,
|
|
76
|
+
submission,
|
|
71
77
|
noteValue,
|
|
78
|
+
submit,
|
|
72
79
|
]);
|
|
73
80
|
const onTransitionClick = (0, react_1.useCallback)((event) => {
|
|
74
|
-
updateState('init');
|
|
75
81
|
toggleConfirmationDialog(true);
|
|
76
82
|
setSelectedTransitionIndex(event.target.value || event.target.parentNode.value);
|
|
77
|
-
}, [setSelectedTransitionIndex, toggleConfirmationDialog
|
|
83
|
+
}, [setSelectedTransitionIndex, toggleConfirmationDialog]);
|
|
78
84
|
const onCancelClick = (0, react_1.useCallback)(() => {
|
|
79
85
|
toggleConfirmationDialog(false);
|
|
80
86
|
setSelectedTransitionIndex(undefined);
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
}, [
|
|
84
|
-
toggleConfirmationDialog,
|
|
85
|
-
setSelectedTransitionIndex,
|
|
86
|
-
clearError,
|
|
87
|
-
updateState,
|
|
88
|
-
]);
|
|
87
|
+
setError(undefined);
|
|
88
|
+
}, [toggleConfirmationDialog, setSelectedTransitionIndex, setError]);
|
|
89
89
|
const onNoteChange = (0, react_1.useCallback)((event) => setNoteValue(event.target.value), [setNoteValue]);
|
|
90
90
|
const currentStepTransition = submission === null || submission === void 0 ? void 0 : submission.currentStep.type.transitions;
|
|
91
91
|
const disable = !currentStepTransition || !canCompleteTask;
|
|
92
|
-
const errorCode = (
|
|
92
|
+
const errorCode = (_c = (_b = (_a = mutationError === null || mutationError === void 0 ? void 0 : mutationError.graphQLErrors) === null || _a === void 0 ? void 0 : _a.find((error) => { var _a; return (_a = error === null || error === void 0 ? void 0 : error.extensions) === null || _a === void 0 ? void 0 : _a.code; })) === null || _b === void 0 ? void 0 : _b.extensions) === null || _c === void 0 ? void 0 : _c.code.name;
|
|
93
93
|
return (react_1.default.createElement(Wrapper, null,
|
|
94
94
|
goBack && (react_1.default.createElement(SecondaryButtonSmall, { onClick: goBack, type: "button" },
|
|
95
95
|
react_1.default.createElement(__1.LeftArrow, null),
|
|
96
96
|
react_1.default.createElement("span", null, "Dashboard"))),
|
|
97
97
|
handleSnapshot &&
|
|
98
98
|
typeof hasPendingSuggestions == 'boolean' &&
|
|
99
|
-
submission.nextStep && (react_1.default.createElement(ProceedView_1.ProceedView, { isAnnotator: isAnnotator, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions,
|
|
99
|
+
submission.nextStep && (react_1.default.createElement(ProceedView_1.ProceedView, { isAnnotator: isAnnotator, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, loading: loading, showComplete: showComplete, noteValue: noteValue, currentStepTransition: currentStepTransition, error: error, currentStepType: submission.currentStep.type, previousStepType: (_d = submission.previousStep) === null || _d === void 0 ? void 0 : _d.type, nextStepType: submission.nextStep.type, confirmationDialog: confirmationDialog, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
|
|
100
100
|
status && (react_1.default.createElement(ChildWrapper, null,
|
|
101
101
|
react_1.default.createElement(__1.SaveStatus, { status: status }))),
|
|
102
102
|
react_1.default.createElement(Spacer, null),
|
|
@@ -46,7 +46,7 @@ const StepDetails = ({ icon, label, description, role }) => (react_1.default.cre
|
|
|
46
46
|
react_1.default.createElement(__1.SecondarySmallText, null,
|
|
47
47
|
"Actor: ",
|
|
48
48
|
role.label))));
|
|
49
|
-
const ProceedView = ({ currentStepTransition, onTransitionClick, disable,
|
|
49
|
+
const ProceedView = ({ currentStepTransition, onTransitionClick, disable, loading, showComplete, confirmationDialog, previousStepType, currentStepType, nextStepType, isAnnotator, hasPendingSuggestions, error, noteValue, onNoteChange, onCancelClick, continueDialogAction, message: Message, }) => {
|
|
50
50
|
const dialogMessages = (0, react_1.useMemo)(() => hasPendingSuggestions && !isAnnotator
|
|
51
51
|
? {
|
|
52
52
|
header: 'The task can not be transitioned to the next step',
|
|
@@ -59,7 +59,7 @@ const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialog
|
|
|
59
59
|
},
|
|
60
60
|
},
|
|
61
61
|
}
|
|
62
|
-
:
|
|
62
|
+
: showComplete
|
|
63
63
|
? {
|
|
64
64
|
header: 'Content reassigned successfully',
|
|
65
65
|
message: `to the ${currentStepType.label}`,
|
|
@@ -84,7 +84,7 @@ const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialog
|
|
|
84
84
|
},
|
|
85
85
|
},
|
|
86
86
|
}, [
|
|
87
|
-
|
|
87
|
+
showComplete,
|
|
88
88
|
continueDialogAction,
|
|
89
89
|
onCancelClick,
|
|
90
90
|
currentStepType,
|
|
@@ -97,15 +97,16 @@ const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialog
|
|
|
97
97
|
currentStepTransition.map((transition, index) => (react_1.default.createElement(Task, { key: 'task_' + transition.type.id, className: transition.status.id === 'success' ? 'happyPath' : '', value: index, onClick: onTransitionClick },
|
|
98
98
|
react_1.default.createElement("strong", null, transition.type.label),
|
|
99
99
|
transition.type.description))))))) || (react_1.default.createElement(EditorHeader_1.PrimaryButtonSmall, { value: 0, onClick: onTransitionClick, disabled: disable }, "Complete task")),
|
|
100
|
-
|
|
101
|
-
react_1.default.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026"))),
|
|
102
|
-
|
|
103
|
-
dialogData.state === 'success' && (react_1.default.createElement(Grid, null,
|
|
100
|
+
(loading && (react_1.default.createElement(__1.LoadingOverlay, null,
|
|
101
|
+
react_1.default.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026")))) || (react_1.default.createElement(__1.Dialog, { isOpen: confirmationDialog && !loading, category: __1.Category.confirmation, header: dialogMessages.header, message: dialogMessages.message, actions: dialogMessages.actions },
|
|
102
|
+
(showComplete && (react_1.default.createElement(Grid, null,
|
|
104
103
|
previousStepType && (react_1.default.createElement(StepDetails, Object.assign({}, previousStepType, { icon: react_1.default.createElement(react_1.default.Fragment, null,
|
|
105
104
|
react_1.default.createElement(__1.TaskStepDoneIcon, null),
|
|
106
105
|
react_1.default.createElement(Line, null)) }))),
|
|
107
|
-
react_1.default.createElement(StepDetails, Object.assign({}, currentStepType))))
|
|
108
|
-
|
|
106
|
+
react_1.default.createElement(StepDetails, Object.assign({}, currentStepType))))) ||
|
|
107
|
+
((!hasPendingSuggestions || isAnnotator) && onNoteChange && (react_1.default.createElement(TextAreaWrapper, null,
|
|
108
|
+
react_1.default.createElement(EditorHeader_1.MediumTextArea, { value: noteValue, onChange: onNoteChange, rows: 5, placeholder: 'Add any additional comment here...' })))),
|
|
109
|
+
error && (react_1.default.createElement(AlertMessage_1.AlertMessage, { type: AlertMessage_1.AlertMessageType.error, hideCloseButton: true }, error))))));
|
|
109
110
|
};
|
|
110
111
|
exports.ProceedView = ProceedView;
|
|
111
112
|
const TaskDropdown = styled_components_1.default.div `
|
|
@@ -260,7 +260,7 @@ const UpdatedDueDate = styled_components_1.default.div `
|
|
|
260
260
|
box-sizing: border-box;
|
|
261
261
|
border-radius: ${(props) => props.theme.grid.unit}px;
|
|
262
262
|
padding: ${(props) => props.theme.grid.unit}px
|
|
263
|
-
${(props) => props.theme.grid.unit * 2}px;
|
|
263
|
+
${(props) => props.theme.grid.unit * 2}px;
|
|
264
264
|
`;
|
|
265
265
|
const DueDateMessage = (0, styled_components_1.default)(Dialog_1.MessageContainer) `
|
|
266
266
|
min-height: min-content;
|
|
@@ -17,6 +17,7 @@ const getCapabilities = (project, profile, role, actions) => {
|
|
|
17
17
|
const isOwner = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.owners) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
|
|
18
18
|
const isWriter = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.writers) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
|
|
19
19
|
const isAnnotator = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.annotators) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
|
|
20
|
+
const isProofer = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.proofers) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
|
|
20
21
|
const isViewer = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.viewers) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
|
|
21
22
|
const isProdEditor = () => role == 'pe';
|
|
22
23
|
const allowed = (action) => !!(actions === null || actions === void 0 ? void 0 : actions.includes(action));
|
|
@@ -30,7 +31,7 @@ const getCapabilities = (project, profile, role, actions) => {
|
|
|
30
31
|
handleOwnComments: !isViewer(),
|
|
31
32
|
handleOthersComments: isOwner(),
|
|
32
33
|
resolveOwnComment: !isViewer(),
|
|
33
|
-
resolveOthersComment: !(isViewer() || isAnnotator()),
|
|
34
|
+
resolveOthersComment: !(isViewer() || isAnnotator() || isProofer()),
|
|
34
35
|
createComment: !isViewer(),
|
|
35
36
|
viewNotes: true,
|
|
36
37
|
createNotes: !isViewer() && allowed(Actions.addNote),
|
|
@@ -55,8 +56,8 @@ const getCapabilities = (project, profile, role, actions) => {
|
|
|
55
56
|
accessEditor: true,
|
|
56
57
|
formatArticle: !isViewer(),
|
|
57
58
|
editArticle: !isViewer(),
|
|
58
|
-
editMetadata: !(isViewer() || isAnnotator()),
|
|
59
|
-
editCitationsAndRefs: !(isViewer() || isAnnotator()),
|
|
59
|
+
editMetadata: !(isViewer() || isAnnotator() || isProofer()),
|
|
60
|
+
editCitationsAndRefs: !(isViewer() || isAnnotator() || isProofer()),
|
|
60
61
|
shareProject: isOwner(),
|
|
61
62
|
};
|
|
62
63
|
};
|
|
@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
7
7
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
|
-
import React, { useCallback, useState } from 'react';
|
|
10
|
+
import React, { useCallback, useEffect, useState } from 'react';
|
|
11
11
|
import styled from 'styled-components';
|
|
12
12
|
import { AnnotatorIcon, DropdownContainer, DropdownList, EditIcon, LeftArrow, NavDropdownContainer, NavDropdownToggle, PrimaryButton, ReadingIcon, SaveStatus, SecondaryButton, TextArea, useDropdown, } from '../..';
|
|
13
13
|
import { ProceedView } from './ProceedView';
|
|
@@ -18,56 +18,56 @@ const MapUserRole = {
|
|
|
18
18
|
Writer: Editing,
|
|
19
19
|
Annotator: { label: 'Suggesting...', icon: AnnotatorIcon },
|
|
20
20
|
Viewer: { label: 'Reading...', icon: ReadingIcon },
|
|
21
|
+
Proofer: { label: 'Proofing', icon: AnnotatorIcon },
|
|
21
22
|
};
|
|
22
23
|
export const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
|
|
23
|
-
var _a, _b, _c, _d
|
|
24
|
+
var _a, _b, _c, _d;
|
|
24
25
|
const [confirmationDialog, toggleConfirmationDialog] = useState(false);
|
|
26
|
+
const [loading, setLoading] = useState(false);
|
|
25
27
|
const [noteValue, setNoteValue] = useState('');
|
|
28
|
+
const [error, setError] = useState(undefined);
|
|
26
29
|
const [selectedTransitionIndex, setSelectedTransitionIndex] = useState();
|
|
27
|
-
const {
|
|
28
|
-
|
|
30
|
+
const { complete: showComplete, error: submissionError, mutationError, submit, } = submitProceed;
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (submissionError) {
|
|
33
|
+
setError(submissionError);
|
|
34
|
+
}
|
|
35
|
+
}, [submissionError]);
|
|
29
36
|
const continueDialogAction = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
30
37
|
if (submission && selectedTransitionIndex && handleSnapshot) {
|
|
31
38
|
const { status } = submission.currentStep.type.transitions[selectedTransitionIndex];
|
|
32
|
-
|
|
39
|
+
setLoading(true);
|
|
33
40
|
yield handleSnapshot();
|
|
34
41
|
yield submit(status.id, noteValue);
|
|
42
|
+
setLoading(false);
|
|
35
43
|
}
|
|
36
44
|
}), [
|
|
37
|
-
submission,
|
|
38
|
-
selectedTransitionIndex,
|
|
39
45
|
handleSnapshot,
|
|
40
|
-
|
|
41
|
-
|
|
46
|
+
selectedTransitionIndex,
|
|
47
|
+
submission,
|
|
42
48
|
noteValue,
|
|
49
|
+
submit,
|
|
43
50
|
]);
|
|
44
51
|
const onTransitionClick = useCallback((event) => {
|
|
45
|
-
updateState('init');
|
|
46
52
|
toggleConfirmationDialog(true);
|
|
47
53
|
setSelectedTransitionIndex(event.target.value || event.target.parentNode.value);
|
|
48
|
-
}, [setSelectedTransitionIndex, toggleConfirmationDialog
|
|
54
|
+
}, [setSelectedTransitionIndex, toggleConfirmationDialog]);
|
|
49
55
|
const onCancelClick = useCallback(() => {
|
|
50
56
|
toggleConfirmationDialog(false);
|
|
51
57
|
setSelectedTransitionIndex(undefined);
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}, [
|
|
55
|
-
toggleConfirmationDialog,
|
|
56
|
-
setSelectedTransitionIndex,
|
|
57
|
-
clearError,
|
|
58
|
-
updateState,
|
|
59
|
-
]);
|
|
58
|
+
setError(undefined);
|
|
59
|
+
}, [toggleConfirmationDialog, setSelectedTransitionIndex, setError]);
|
|
60
60
|
const onNoteChange = useCallback((event) => setNoteValue(event.target.value), [setNoteValue]);
|
|
61
61
|
const currentStepTransition = submission === null || submission === void 0 ? void 0 : submission.currentStep.type.transitions;
|
|
62
62
|
const disable = !currentStepTransition || !canCompleteTask;
|
|
63
|
-
const errorCode = (
|
|
63
|
+
const errorCode = (_c = (_b = (_a = mutationError === null || mutationError === void 0 ? void 0 : mutationError.graphQLErrors) === null || _a === void 0 ? void 0 : _a.find((error) => { var _a; return (_a = error === null || error === void 0 ? void 0 : error.extensions) === null || _a === void 0 ? void 0 : _a.code; })) === null || _b === void 0 ? void 0 : _b.extensions) === null || _c === void 0 ? void 0 : _c.code.name;
|
|
64
64
|
return (React.createElement(Wrapper, null,
|
|
65
65
|
goBack && (React.createElement(SecondaryButtonSmall, { onClick: goBack, type: "button" },
|
|
66
66
|
React.createElement(LeftArrow, null),
|
|
67
67
|
React.createElement("span", null, "Dashboard"))),
|
|
68
68
|
handleSnapshot &&
|
|
69
69
|
typeof hasPendingSuggestions == 'boolean' &&
|
|
70
|
-
submission.nextStep && (React.createElement(ProceedView, { isAnnotator: isAnnotator, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions,
|
|
70
|
+
submission.nextStep && (React.createElement(ProceedView, { isAnnotator: isAnnotator, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, loading: loading, showComplete: showComplete, noteValue: noteValue, currentStepTransition: currentStepTransition, error: error, currentStepType: submission.currentStep.type, previousStepType: (_d = submission.previousStep) === null || _d === void 0 ? void 0 : _d.type, nextStepType: submission.nextStep.type, confirmationDialog: confirmationDialog, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
|
|
71
71
|
status && (React.createElement(ChildWrapper, null,
|
|
72
72
|
React.createElement(SaveStatus, { status: status }))),
|
|
73
73
|
React.createElement(Spacer, null),
|
|
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
|
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import { Category, Dialog, LoadingOverlay, NavDropdown, NavDropdownButton, NavDropdownContainer, PrimaryBoldHeading, PrimaryButton, SecondarySmallText, TaskStepDoneIcon, useDropdown, } from '../..';
|
|
4
4
|
import { AlertMessage, AlertMessageType } from '../AlertMessage';
|
|
5
|
-
import { PrimaryButtonSmall, } from './EditorHeader';
|
|
5
|
+
import { MediumTextArea, PrimaryButtonSmall, } from './EditorHeader';
|
|
6
6
|
const DropdownWrapper = ({ disabled, button, primary, children }) => {
|
|
7
7
|
const { isOpen, toggleOpen, wrapperRef } = useDropdown();
|
|
8
8
|
return (React.createElement(NavDropdownContainer, { id: 'user-dropdown', ref: wrapperRef },
|
|
@@ -17,7 +17,7 @@ const StepDetails = ({ icon, label, description, role }) => (React.createElement
|
|
|
17
17
|
React.createElement(SecondarySmallText, null,
|
|
18
18
|
"Actor: ",
|
|
19
19
|
role.label))));
|
|
20
|
-
export const ProceedView = ({ currentStepTransition, onTransitionClick, disable,
|
|
20
|
+
export const ProceedView = ({ currentStepTransition, onTransitionClick, disable, loading, showComplete, confirmationDialog, previousStepType, currentStepType, nextStepType, isAnnotator, hasPendingSuggestions, error, noteValue, onNoteChange, onCancelClick, continueDialogAction, message: Message, }) => {
|
|
21
21
|
const dialogMessages = useMemo(() => hasPendingSuggestions && !isAnnotator
|
|
22
22
|
? {
|
|
23
23
|
header: 'The task can not be transitioned to the next step',
|
|
@@ -30,7 +30,7 @@ export const ProceedView = ({ currentStepTransition, onTransitionClick, disable,
|
|
|
30
30
|
},
|
|
31
31
|
},
|
|
32
32
|
}
|
|
33
|
-
:
|
|
33
|
+
: showComplete
|
|
34
34
|
? {
|
|
35
35
|
header: 'Content reassigned successfully',
|
|
36
36
|
message: `to the ${currentStepType.label}`,
|
|
@@ -55,7 +55,7 @@ export const ProceedView = ({ currentStepTransition, onTransitionClick, disable,
|
|
|
55
55
|
},
|
|
56
56
|
},
|
|
57
57
|
}, [
|
|
58
|
-
|
|
58
|
+
showComplete,
|
|
59
59
|
continueDialogAction,
|
|
60
60
|
onCancelClick,
|
|
61
61
|
currentStepType,
|
|
@@ -68,15 +68,16 @@ export const ProceedView = ({ currentStepTransition, onTransitionClick, disable,
|
|
|
68
68
|
currentStepTransition.map((transition, index) => (React.createElement(Task, { key: 'task_' + transition.type.id, className: transition.status.id === 'success' ? 'happyPath' : '', value: index, onClick: onTransitionClick },
|
|
69
69
|
React.createElement("strong", null, transition.type.label),
|
|
70
70
|
transition.type.description))))))) || (React.createElement(PrimaryButtonSmall, { value: 0, onClick: onTransitionClick, disabled: disable }, "Complete task")),
|
|
71
|
-
|
|
72
|
-
React.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026"))),
|
|
73
|
-
|
|
74
|
-
dialogData.state === 'success' && (React.createElement(Grid, null,
|
|
71
|
+
(loading && (React.createElement(LoadingOverlay, null,
|
|
72
|
+
React.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026")))) || (React.createElement(Dialog, { isOpen: confirmationDialog && !loading, category: Category.confirmation, header: dialogMessages.header, message: dialogMessages.message, actions: dialogMessages.actions },
|
|
73
|
+
(showComplete && (React.createElement(Grid, null,
|
|
75
74
|
previousStepType && (React.createElement(StepDetails, Object.assign({}, previousStepType, { icon: React.createElement(React.Fragment, null,
|
|
76
75
|
React.createElement(TaskStepDoneIcon, null),
|
|
77
76
|
React.createElement(Line, null)) }))),
|
|
78
|
-
React.createElement(StepDetails, Object.assign({}, currentStepType))))
|
|
79
|
-
|
|
77
|
+
React.createElement(StepDetails, Object.assign({}, currentStepType))))) ||
|
|
78
|
+
((!hasPendingSuggestions || isAnnotator) && onNoteChange && (React.createElement(TextAreaWrapper, null,
|
|
79
|
+
React.createElement(MediumTextArea, { value: noteValue, onChange: onNoteChange, rows: 5, placeholder: 'Add any additional comment here...' })))),
|
|
80
|
+
error && (React.createElement(AlertMessage, { type: AlertMessageType.error, hideCloseButton: true }, error))))));
|
|
80
81
|
};
|
|
81
82
|
const TaskDropdown = styled.div `
|
|
82
83
|
display: flex;
|
|
@@ -230,7 +230,7 @@ const UpdatedDueDate = styled.div `
|
|
|
230
230
|
box-sizing: border-box;
|
|
231
231
|
border-radius: ${(props) => props.theme.grid.unit}px;
|
|
232
232
|
padding: ${(props) => props.theme.grid.unit}px
|
|
233
|
-
${(props) => props.theme.grid.unit * 2}px;
|
|
233
|
+
${(props) => props.theme.grid.unit * 2}px;
|
|
234
234
|
`;
|
|
235
235
|
const DueDateMessage = styled(MessageContainer) `
|
|
236
236
|
min-height: min-content;
|
|
@@ -11,6 +11,7 @@ export const getCapabilities = (project, profile, role, actions) => {
|
|
|
11
11
|
const isOwner = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.owners) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
|
|
12
12
|
const isWriter = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.writers) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
|
|
13
13
|
const isAnnotator = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.annotators) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
|
|
14
|
+
const isProofer = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.proofers) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
|
|
14
15
|
const isViewer = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.viewers) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
|
|
15
16
|
const isProdEditor = () => role == 'pe';
|
|
16
17
|
const allowed = (action) => !!(actions === null || actions === void 0 ? void 0 : actions.includes(action));
|
|
@@ -24,7 +25,7 @@ export const getCapabilities = (project, profile, role, actions) => {
|
|
|
24
25
|
handleOwnComments: !isViewer(),
|
|
25
26
|
handleOthersComments: isOwner(),
|
|
26
27
|
resolveOwnComment: !isViewer(),
|
|
27
|
-
resolveOthersComment: !(isViewer() || isAnnotator()),
|
|
28
|
+
resolveOthersComment: !(isViewer() || isAnnotator() || isProofer()),
|
|
28
29
|
createComment: !isViewer(),
|
|
29
30
|
viewNotes: true,
|
|
30
31
|
createNotes: !isViewer() && allowed(Actions.addNote),
|
|
@@ -49,8 +50,8 @@ export const getCapabilities = (project, profile, role, actions) => {
|
|
|
49
50
|
accessEditor: true,
|
|
50
51
|
formatArticle: !isViewer(),
|
|
51
52
|
editArticle: !isViewer(),
|
|
52
|
-
editMetadata: !(isViewer() || isAnnotator()),
|
|
53
|
-
editCitationsAndRefs: !(isViewer() || isAnnotator()),
|
|
53
|
+
editMetadata: !(isViewer() || isAnnotator() || isProofer()),
|
|
54
|
+
editCitationsAndRefs: !(isViewer() || isAnnotator() || isProofer()),
|
|
54
55
|
shareProject: isOwner(),
|
|
55
56
|
};
|
|
56
57
|
};
|
|
@@ -33,7 +33,7 @@ export declare class AutoSaveInput extends React.Component<FieldProps & AutoSave
|
|
|
33
33
|
focused: boolean;
|
|
34
34
|
};
|
|
35
35
|
componentWillUnmount(): void;
|
|
36
|
-
render(): JSX.Element;
|
|
36
|
+
render(): React.JSX.Element;
|
|
37
37
|
private handleSubmit;
|
|
38
38
|
private handleFocus;
|
|
39
39
|
private handleBlur;
|
|
@@ -47,7 +47,7 @@ export declare enum Category {
|
|
|
47
47
|
export declare class Dialog extends React.Component<DialogProps, DialogState> {
|
|
48
48
|
state: DialogState;
|
|
49
49
|
componentDidMount(): void;
|
|
50
|
-
render(): JSX.Element;
|
|
50
|
+
render(): React.JSX.Element;
|
|
51
51
|
private renderButtons;
|
|
52
52
|
private checkInputValue;
|
|
53
53
|
private setDisabledBtnState;
|
|
@@ -26,14 +26,6 @@ export type SubmissionStepType = {
|
|
|
26
26
|
label: string;
|
|
27
27
|
};
|
|
28
28
|
};
|
|
29
|
-
export type DialogState = 'init' | 'loading' | 'error' | 'success' | 'closed';
|
|
30
|
-
export type ProceedDialogData = {
|
|
31
|
-
state: DialogState;
|
|
32
|
-
error?: string;
|
|
33
|
-
mutationError?: ApolloError | undefined;
|
|
34
|
-
updateState: (state: DialogState) => void;
|
|
35
|
-
clearError: () => void;
|
|
36
|
-
};
|
|
37
29
|
export declare const EditorHeader: React.FC<{
|
|
38
30
|
handleSnapshot?: () => Promise<void>;
|
|
39
31
|
submission: PartialSubmission;
|
|
@@ -44,7 +36,9 @@ export declare const EditorHeader: React.FC<{
|
|
|
44
36
|
}>;
|
|
45
37
|
userRole: string;
|
|
46
38
|
submitProceed: {
|
|
47
|
-
|
|
39
|
+
complete: boolean;
|
|
40
|
+
error: string;
|
|
41
|
+
mutationError: ApolloError | undefined;
|
|
48
42
|
submit: (statusId: string, noteValue: string) => Promise<unknown>;
|
|
49
43
|
};
|
|
50
44
|
goBack?: () => void;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ProceedDialogData } from '../..';
|
|
3
2
|
import { SubmissionStepTransition, SubmissionStepType } from './EditorHeader';
|
|
4
3
|
export declare const ProceedView: React.FC<{
|
|
5
4
|
isAnnotator: boolean;
|
|
@@ -7,9 +6,11 @@ export declare const ProceedView: React.FC<{
|
|
|
7
6
|
onTransitionClick: (event: unknown) => void;
|
|
8
7
|
onNoteChange?: (event: unknown) => void;
|
|
9
8
|
hasPendingSuggestions: boolean;
|
|
10
|
-
|
|
9
|
+
loading: boolean;
|
|
10
|
+
showComplete: boolean;
|
|
11
11
|
noteValue: string;
|
|
12
12
|
currentStepTransition: SubmissionStepTransition[];
|
|
13
|
+
error: string | undefined;
|
|
13
14
|
previousStepType: SubmissionStepType | undefined;
|
|
14
15
|
currentStepType: SubmissionStepType;
|
|
15
16
|
nextStepType: SubmissionStepType;
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
16
|
/// <reference types="react" />
|
|
17
|
-
export declare const CenteredForm: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<
|
|
17
|
+
export declare const CenteredForm: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import("react").RefAttributes<HTMLFormElement>>, import("styled-components").DefaultTheme, {}, never>;
|
|
18
18
|
export declare const FormHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
19
19
|
export declare const FormActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
20
20
|
export declare const FormError: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -22,7 +22,7 @@ export declare class Resizer extends React.Component<Props, State> {
|
|
|
22
22
|
isResizing: boolean;
|
|
23
23
|
startPosition: number;
|
|
24
24
|
};
|
|
25
|
-
render(): JSX.Element;
|
|
25
|
+
render(): React.JSX.Element;
|
|
26
26
|
private scheduleResize;
|
|
27
27
|
private mouseDownHandler;
|
|
28
28
|
private mouseUpHandler;
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
* See the License for the specific language governing permissions and
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
|
+
import React from 'react';
|
|
16
17
|
import { IconProps } from './types';
|
|
17
|
-
declare const AddAuthor: (props: IconProps) => JSX.Element;
|
|
18
|
+
declare const AddAuthor: (props: IconProps) => React.JSX.Element;
|
|
18
19
|
export default AddAuthor;
|
|
@@ -13,5 +13,6 @@
|
|
|
13
13
|
* See the License for the specific language governing permissions and
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
|
-
|
|
16
|
+
import React from 'react';
|
|
17
|
+
declare const AddComment: () => React.JSX.Element;
|
|
17
18
|
export default AddComment;
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
* See the License for the specific language governing permissions and
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
|
+
import React from 'react';
|
|
16
17
|
import { IconProps } from './types';
|
|
17
|
-
declare const AddIconActive: (props: IconProps) => JSX.Element;
|
|
18
|
+
declare const AddIconActive: (props: IconProps) => React.JSX.Element;
|
|
18
19
|
export default AddIconActive;
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
* See the License for the specific language governing permissions and
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
|
+
import React from 'react';
|
|
16
17
|
import { IconProps } from './types';
|
|
17
|
-
declare const AddIconInverted: (props: IconProps) => JSX.Element;
|
|
18
|
+
declare const AddIconInverted: (props: IconProps) => React.JSX.Element;
|
|
18
19
|
export default AddIconInverted;
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
* See the License for the specific language governing permissions and
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
|
+
import React from 'react';
|
|
16
17
|
import { IconProps } from './types';
|
|
17
|
-
export declare const BackArrow: (props: IconProps) => JSX.Element;
|
|
18
|
+
export declare const BackArrow: (props: IconProps) => React.JSX.Element;
|
|
18
19
|
export default BackArrow;
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
* See the License for the specific language governing permissions and
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
|
+
import React from 'react';
|
|
16
17
|
import { IconProps } from './types';
|
|
17
|
-
declare const Bookmark: (props: IconProps) => JSX.Element;
|
|
18
|
+
declare const Bookmark: (props: IconProps) => React.JSX.Element;
|
|
18
19
|
export default Bookmark;
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
* See the License for the specific language governing permissions and
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
|
+
import React from 'react';
|
|
16
17
|
import { IconProps } from './types';
|
|
17
|
-
declare const Google: (props: IconProps) => JSX.Element;
|
|
18
|
+
declare const Google: (props: IconProps) => React.JSX.Element;
|
|
18
19
|
export default Google;
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
* See the License for the specific language governing permissions and
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
|
+
import React from 'react';
|
|
16
17
|
import { IconProps } from './types';
|
|
17
|
-
declare const Orcid: (props: IconProps) => JSX.Element;
|
|
18
|
+
declare const Orcid: (props: IconProps) => React.JSX.Element;
|
|
18
19
|
export default Orcid;
|
|
@@ -13,5 +13,6 @@
|
|
|
13
13
|
* See the License for the specific language governing permissions and
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
|
-
|
|
16
|
+
import React from 'react';
|
|
17
|
+
export declare const PlusIcon: () => React.JSX.Element;
|
|
17
18
|
export default PlusIcon;
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
* See the License for the specific language governing permissions and
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
|
+
import React from 'react';
|
|
16
17
|
import { IconProps } from './types';
|
|
17
|
-
declare const ProjectNotification: (props: IconProps) => JSX.Element;
|
|
18
|
+
declare const ProjectNotification: (props: IconProps) => React.JSX.Element;
|
|
18
19
|
export default ProjectNotification;
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
* See the License for the specific language governing permissions and
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
|
+
import React from 'react';
|
|
16
17
|
import { IconProps } from './types';
|
|
17
|
-
declare const ProjectIcon: (props: IconProps) => JSX.Element;
|
|
18
|
+
declare const ProjectIcon: (props: IconProps) => React.JSX.Element;
|
|
18
19
|
export default ProjectIcon;
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
* See the License for the specific language governing permissions and
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
|
+
import React from 'react';
|
|
16
17
|
import { IconProps } from './types';
|
|
17
|
-
declare const ProjectsList: (props: IconProps) => JSX.Element;
|
|
18
|
+
declare const ProjectsList: (props: IconProps) => React.JSX.Element;
|
|
18
19
|
export default ProjectsList;
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
* See the License for the specific language governing permissions and
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
|
+
import React from 'react';
|
|
16
17
|
import { IconProps } from './types';
|
|
17
|
-
declare const SearchIcon: (props: IconProps) => JSX.Element;
|
|
18
|
+
declare const SearchIcon: (props: IconProps) => React.JSX.Element;
|
|
18
19
|
export default SearchIcon;
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
* See the License for the specific language governing permissions and
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
|
+
import React from 'react';
|
|
16
17
|
import { IconProps } from './types';
|
|
17
|
-
declare const TickMark: (props: IconProps) => JSX.Element;
|
|
18
|
+
declare const TickMark: (props: IconProps) => React.JSX.Element;
|
|
18
19
|
export default TickMark;
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
* See the License for the specific language governing permissions and
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
|
+
import React from 'react';
|
|
16
17
|
import { IconProps } from './types';
|
|
17
|
-
declare const User: (props: IconProps) => JSX.Element;
|
|
18
|
+
declare const User: (props: IconProps) => React.JSX.Element;
|
|
18
19
|
export default User;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@manuscripts/style-guide",
|
|
3
3
|
"description": "Shared components for Manuscripts applications",
|
|
4
|
-
"version": "1.1.15-LEAN-
|
|
4
|
+
"version": "1.1.15-LEAN-2684-4",
|
|
5
5
|
"repository": "github:Atypon-OpenSource/manuscripts-style-guide",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"main": "dist/cjs",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"@formatjs/intl-utils": "^2.2.0",
|
|
38
38
|
"@manuscripts/assets": "^0.6.2",
|
|
39
39
|
"@manuscripts/transform": "^1.3.4",
|
|
40
|
-
"@manuscripts/json-schema": "
|
|
40
|
+
"@manuscripts/json-schema": "2.0.2-LEAN-2553",
|
|
41
41
|
"@manuscripts/title-editor": "^1.1.0",
|
|
42
42
|
"@manuscripts/comment-editor": "^1.0.3",
|
|
43
43
|
"@reach/tabs": "^0.11.2",
|
|
@@ -143,4 +143,4 @@
|
|
|
143
143
|
"resolutions": {
|
|
144
144
|
"@types/react": "^17.0.2"
|
|
145
145
|
}
|
|
146
|
-
}
|
|
146
|
+
}
|