@manuscripts/body-editor 2.7.7 → 2.7.8-LEAN-4213.0

package/dist/cjs/components/affiliations/AffiliationsModal.js

@@ -0,0 +1,418 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AffiliationsModal = void 0;
+const json_schema_1 = require("@manuscripts/json-schema");
+const style_guide_1 = require("@manuscripts/style-guide");
+const lodash_1 = require("lodash");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const authors_1 = require("../../lib/authors");
+const AuthorsModal_1 = require("../authors/AuthorsModal");
+const ConfirmationDialog_1 = require("../dialog/ConfirmationDialog");
+const FormFooter_1 = __importDefault(require("../form/FormFooter"));
+const FormPlaceholder_1 = require("../form/FormPlaceholder");
+const ModalFormActions_1 = require("../form/ModalFormActions");
+const AffiliationForm_1 = require("./AffiliationForm");
+const AffiliationList_1 = require("./AffiliationList");
+const StyledSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
+  padding: 0;
+`;
+const AddAffiliationButton = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  padding: 12px 8px 12px 12px;
+  cursor: pointer;
+  &[data-active='true'] {
+    background: ${(props) => props.theme.colors.background.fifth};
+    border: 1px solid ${(props) => props.theme.colors.border.primary};
+    border-left: 0;
+    border-right: 0;
+  }
+`;
+const ActionTitle = styled_components_1.default.div `
+  padding-left: ${(props) => props.theme.grid.unit * 2}px;
+`;
+const AffiliationForms = styled_components_1.default.div `
+  padding-left: ${(props) => props.theme.grid.unit * 3}px;
+  padding-right: ${(props) => props.theme.grid.unit * 3}px;
+  position: relative;
+  margin-top: 20px;
+`;
+const AuthorsSection = styled_components_1.default.div `
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+  padding-top: ${(props) => props.theme.grid.unit * 4}px;
+  border-top: 1px solid ${(props) => props.theme.colors.border.tertiary};
+`;
+const AuthorsHeader = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-direction: column;
+  margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
+`;
+const AuthorsTitle = styled_components_1.default.h3 `
+  margin: 0;
+  font-weight: ${(props) => props.theme.font.weight.normal};
+  font-size: ${(props) => props.theme.font.size.large};
+  font-family: ${(props) => props.theme.font.family.sans};
+  color: ${(props) => props.theme.colors.text.secondary};
+`;
+const AffiliateButton = styled_components_1.default.button `
+  color: ${(props) => props.theme.colors.brand.default};
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.normal}
+    ${(props) => props.theme.font.family.sans};
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: ${(props) => props.theme.grid.unit * 2}px;
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+const StyledModalBody = (0, styled_components_1.default)(style_guide_1.ModalBody) `
+  position: relative;
+  height: calc(90vh - 40px);
+`;
+const StyledModalSidebarHeader = (0, styled_components_1.default)(style_guide_1.ModalSidebarHeader) `
+  margin-top: 8px;
+  margin-bottom: 16px;
+`;
+const normalize = (affiliation) => ({
+    id: affiliation.id,
+    institution: affiliation.institution,
+    department: affiliation.department,
+    addressLine1: affiliation.addressLine1,
+    addressLine2: affiliation.addressLine2,
+    addressLine3: affiliation.addressLine3,
+    postCode: affiliation.postCode,
+    country: affiliation.country,
+    county: affiliation.county,
+    city: affiliation.city,
+    email: affiliation.email,
+    priority: affiliation.priority,
+});
+const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(true);
+    const [selection, setSelection] = (0, react_1.useState)(undefined);
+    const [showDeleteDialog, setShowDeleteDialog] = (0, react_1.useState)(false);
+    const valuesRef = (0, react_1.useRef)();
+    const actionsRef = (0, react_1.useRef)();
+    const [authors, dispatchAuthors] = (0, react_1.useReducer)(AuthorsModal_1.authorsReducer, $authors.sort(authors_1.authorComparator));
+    const [affiliations, dispatchAffiliations] = (0, react_1.useReducer)(AuthorsModal_1.affiliationsReducer, $affiliations);
+    const [isDisableSave, setIsDisableSave] = (0, react_1.useState)(true);
+    const [newAffiliation, setNewAffiliation] = (0, react_1.useState)(false);
+    const [showRequiredFieldConfirmationDialog, setShowRequiredFieldConfirmationDialog,] = (0, react_1.useState)(false);
+    const [showConfirmationDialog, setShowConfirmationDialog] = (0, react_1.useState)(false);
+    const affiliation = {
+        id: (0, json_schema_1.generateID)(json_schema_1.ObjectTypes.Affiliation),
+        institution: '',
+        department: '',
+        addressLine1: '',
+        addressLine2: '',
+        addressLine3: '',
+        postCode: '',
+        country: '',
+        county: '',
+        city: '',
+        email: {
+            href: '',
+            text: '',
+        },
+        priority: affiliations.length,
+    };
+    const [showAuthorDrawer, setShowAuthorDrawer] = (0, react_1.useState)(false);
+    const [selectedIds, setSelectedIds] = (0, react_1.useState)([]);
+    const [pendingSelection, setPendingSelection] = (0, react_1.useState)(null);
+    const [pendingAction, setPendingAction] = (0, react_1.useState)(null);
+    const [savedAffiliationId, setSavedAffiliationId] = (0, react_1.useState)(undefined);
+    const [affiliationAuthorMap, setAffiliationAuthorMap] = (0, react_1.useState)({});
+    const handleClose = () => {
+        var _a;
+        const values = valuesRef.current;
+        const hasAffiliationChanges = selection && !(0, lodash_1.isEqual)(values, normalize(selection));
+        const originalAuthors = affiliationAuthorMap[(selection === null || selection === void 0 ? void 0 : selection.id) || ''] || [];
+        const hasAuthorChanges = !(0, lodash_1.isEqual)(originalAuthors.sort(), selectedIds.sort());
+        const hasChanges = hasAffiliationChanges || (selection && hasAuthorChanges);
+        const isInstitutionEmpty = ((_a = values === null || values === void 0 ? void 0 : values.institution) === null || _a === void 0 ? void 0 : _a.trim()) === '';
+        if (hasChanges) {
+            if (isInstitutionEmpty && hasAffiliationChanges) {
+                setShowRequiredFieldConfirmationDialog(true);
+            }
+            else {
+                setShowConfirmationDialog(true);
+            }
+            setPendingAction('close');
+        }
+        else {
+            setIsOpen(false);
+        }
+    };
+    const handleSelect = (affiliation) => {
+        var _a;
+        const values = valuesRef.current;
+        const hasAffiliationChanges = selection && !(0, lodash_1.isEqual)(values, normalize(selection));
+        const originalAuthors = affiliationAuthorMap[(selection === null || selection === void 0 ? void 0 : selection.id) || ''] || [];
+        const hasAuthorChanges = !(0, lodash_1.isEqual)(originalAuthors.sort(), selectedIds.sort());
+        const hasChanges = hasAffiliationChanges || hasAuthorChanges;
+        const isInstitutionEmpty = ((_a = values === null || values === void 0 ? void 0 : values.institution) === null || _a === void 0 ? void 0 : _a.trim()) === '';
+        if (hasChanges) {
+            setPendingSelection(affiliation);
+            setPendingAction('select');
+            if (isInstitutionEmpty && hasAffiliationChanges) {
+                setShowRequiredFieldConfirmationDialog(true);
+            }
+            else {
+                setShowConfirmationDialog(true);
+            }
+        }
+        else {
+            const affiliatedAuthorIds = authors
+                .filter((author) => { var _a; return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.includes(affiliation.id); })
+                .map((author) => author.id);
+            setNewAffiliation(false);
+            setSelection(affiliation);
+            setSelectedIds(affiliatedAuthorIds);
+            setShowAuthorDrawer(false);
+            setAffiliationAuthorMap((prevMap) => (Object.assign(Object.assign({}, prevMap), { [affiliation.id]: affiliatedAuthorIds })));
+        }
+    };
+    const handleSaveAffiliation = (values) => {
+        if (!values || !selection) {
+            return;
+        }
+        setIsDisableSave(true);
+        const affiliation = Object.assign(Object.assign({}, normalize(selection)), values);
+        onSaveAffiliation(affiliation);
+        dispatchAffiliations({
+            type: 'update',
+            items: [affiliation],
+        });
+        setSelection(affiliation);
+        const updatedAuthors = authors.map((author) => (Object.assign(Object.assign({}, author), { affiliations: selectedIds.includes(author.id)
+                ? [...new Set([...(author.affiliations || []), affiliation.id])]
+                : (author.affiliations || []).filter((id) => id !== affiliation.id) })));
+        dispatchAuthors({
+            type: 'update',
+            items: updatedAuthors,
+        });
+        onUpdateAuthors(updatedAuthors);
+        setNewAffiliation(false);
+        setAffiliationAuthorMap((prevMap) => (Object.assign(Object.assign({}, prevMap), { [affiliation.id]: selectedIds })));
+        setShowAuthorDrawer(false);
+        setSavedAffiliationId(affiliation.id);
+        setTimeout(() => {
+            setSavedAffiliationId(undefined);
+        }, 3200);
+    };
+    const handleAffiliationChange = (values) => {
+        var _a;
+        valuesRef.current = values;
+        if (!selection || selection.id !== values.id) {
+            setIsDisableSave(true);
+            return;
+        }
+        const isInstitutionEmpty = !((_a = values.institution) === null || _a === void 0 ? void 0 : _a.trim());
+        const hasAffiliationChanges = selection && !(0, lodash_1.isEqual)(normalize(values), normalize(selection));
+        const originalAuthors = affiliationAuthorMap[(selection === null || selection === void 0 ? void 0 : selection.id) || ''] || [];
+        const hasAuthorChanges = selection && !(0, lodash_1.isEqual)(originalAuthors.sort(), selectedIds.sort());
+        const shouldEnableSave = !isInstitutionEmpty && (hasAffiliationChanges || hasAuthorChanges);
+        setIsDisableSave(!shouldEnableSave);
+    };
+    const handleShowDeleteDialog = () => {
+        setShowDeleteDialog((prev) => !prev);
+    };
+    const handleDeleteAffiliation = () => {
+        if (!selection) {
+            return;
+        }
+        const updatedAuthors = authors.map((author) => (Object.assign(Object.assign({}, author), { affiliations: (author.affiliations || []).filter((id) => id !== selection.id) })));
+        dispatchAuthors({
+            type: 'update',
+            items: updatedAuthors,
+        });
+        onUpdateAuthors(updatedAuthors);
+        onDeleteAffiliation(selection);
+        dispatchAffiliations({
+            type: 'delete',
+            item: selection,
+        });
+        setSelectedIds([]);
+        setSelection(undefined);
+    };
+    const handleAuthorSelect = (authorId) => {
+        var _a, _b;
+        if (!selection) {
+            return;
+        }
+        const newSelectedAuthorIds = selectedIds.includes(authorId)
+            ? selectedIds.filter((id) => id !== authorId)
+            : [...selectedIds, authorId];
+        setSelectedIds(newSelectedAuthorIds);
+        const hasAffiliationChanges = !(0, lodash_1.isEqual)(valuesRef.current, normalize(selection));
+        const originalAuthors = affiliationAuthorMap[selection.id] || [];
+        const hasAuthorChanges = !(0, lodash_1.isEqual)(originalAuthors.sort(), newSelectedAuthorIds.sort());
+        const isInstitutionEmpty = !((_b = (_a = valuesRef.current) === null || _a === void 0 ? void 0 : _a.institution) === null || _b === void 0 ? void 0 : _b.trim());
+        const shouldEnableSave = !isInstitutionEmpty && (hasAffiliationChanges || hasAuthorChanges);
+        setIsDisableSave(!shouldEnableSave);
+    };
+    const authorItems = authors.map((author) => ({
+        id: author.id,
+        label: `${author.bibliographicName.given} ${author.bibliographicName.family}`,
+    }));
+    const selectedAuthors = selectedIds
+        .map((authorId) => {
+        const author = authors.find((a) => a.id === authorId);
+        return {
+            id: authorId,
+            label: author
+                ? `${author.bibliographicName.given} ${author.bibliographicName.family}`
+                : '',
+        };
+    })
+        .filter((author) => author.label);
+    const handleAddAffiliation = () => {
+        var _a;
+        const values = valuesRef.current;
+        const hasChanges = !isDisableSave;
+        const isInstitutionEmpty = ((_a = values === null || values === void 0 ? void 0 : values.institution) === null || _a === void 0 ? void 0 : _a.trim()) === '';
+        if (hasChanges) {
+            setPendingAction('new');
+            if (isInstitutionEmpty) {
+                setShowRequiredFieldConfirmationDialog(true);
+            }
+            else {
+                setShowConfirmationDialog(true);
+            }
+            return;
+        }
+        setNewAffiliation(true);
+        setSelection(affiliation);
+        setSelectedIds([]);
+        setShowAuthorDrawer(false);
+    };
+    (0, react_1.useEffect)(() => {
+        if (addNewAffiliation) {
+            handleAddAffiliation();
+            setNewAffiliation(true);
+        }
+    }, [addNewAffiliation]);
+    const handleConfirmationSave = () => {
+        handleSaveAffiliation(valuesRef.current);
+        setShowConfirmationDialog(false);
+        setShowRequiredFieldConfirmationDialog(false);
+        if (pendingAction === 'new') {
+            setNewAffiliation(true);
+            setSelection(affiliation);
+            setSelectedIds([]);
+            setIsDisableSave(true);
+        }
+        else if (pendingAction === 'select' && pendingSelection) {
+            setSelection(pendingSelection);
+            setNewAffiliation(false);
+            const affiliatedAuthorIds = authors
+                .filter((author) => { var _a; return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.some((aff) => aff === pendingSelection.id); })
+                .map((author) => author.id);
+            setSelectedIds(affiliatedAuthorIds);
+            valuesRef.current = normalize(pendingSelection);
+            setIsDisableSave(true);
+            setAffiliationAuthorMap((prevMap) => (Object.assign(Object.assign({}, prevMap), { [pendingSelection.id]: affiliatedAuthorIds })));
+        }
+        setPendingSelection(null);
+        setPendingAction(null);
+        if (pendingAction === 'close') {
+            setIsOpen(false);
+        }
+    };
+    const handleConfirmationCancel = () => {
+        setShowConfirmationDialog(false);
+        setShowRequiredFieldConfirmationDialog(false);
+        setShowAuthorDrawer(false);
+        if (pendingAction === 'select' && pendingSelection) {
+            setSelection(pendingSelection);
+            setNewAffiliation(false);
+            const affiliatedAuthorIds = authors
+                .filter((author) => { var _a; return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.some((aff) => aff === pendingSelection.id); })
+                .map((author) => author.id);
+            setSelectedIds(affiliatedAuthorIds);
+        }
+        else if (pendingAction === 'new') {
+            setNewAffiliation(true);
+            setSelection(affiliation);
+            setSelectedIds([]);
+        }
+        if (pendingSelection) {
+            valuesRef.current = normalize(pendingSelection);
+        }
+        else {
+            valuesRef.current = undefined;
+        }
+        setPendingSelection(null);
+        setPendingAction(null);
+        if (pendingAction === 'close') {
+            setIsOpen(false);
+        }
+    };
+    return (react_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: true },
+        react_1.default.createElement(style_guide_1.ModalContainer, null,
+            react_1.default.createElement(style_guide_1.ModalHeader, null,
+                react_1.default.createElement(style_guide_1.CloseButton, { onClick: () => handleClose(), "data-cy": "modal-close-button" })),
+            react_1.default.createElement(StyledModalBody, null,
+                react_1.default.createElement(style_guide_1.ModalSidebar, null,
+                    react_1.default.createElement(StyledModalSidebarHeader, null,
+                        react_1.default.createElement(style_guide_1.ModalSidebarTitle, null, "Affiliations")),
+                    react_1.default.createElement(StyledSidebarContent, null,
+                        react_1.default.createElement(AddAffiliationButton, { "data-cy": "add-affiliation-button", onClick: handleAddAffiliation, "data-active": newAffiliation },
+                            react_1.default.createElement(style_guide_1.AddIcon, { width: 18, height: 18 }),
+                            react_1.default.createElement(ActionTitle, null, "New Affiliation")),
+                        react_1.default.createElement(AffiliationList_1.AffiliationList, { affiliation: selection, affiliations: affiliations, onSelect: handleSelect, onDelete: handleShowDeleteDialog, lastSavedAffiliationId: savedAffiliationId }))),
+                react_1.default.createElement(style_guide_1.ScrollableModalContent, { "data-cy": "affiliations-modal-content" },
+                    react_1.default.createElement(AffiliationForms, null,
+                        selection ? (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement(ModalFormActions_1.ModalFormActions, { type: 'affiliation', onSave: () => handleSaveAffiliation(valuesRef.current), onDelete: handleDeleteAffiliation, showDeleteDialog: showDeleteDialog, handleShowDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
+                            react_1.default.createElement(AffiliationForm_1.AffiliationForm, { values: normalize(selection), onSave: handleSaveAffiliation, onChange: handleAffiliationChange, actionsRef: actionsRef }),
+                            react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: handleConfirmationCancel, type: ConfirmationDialog_1.DialogType.REQUIRED, entityType: "affiliation" }),
+                            react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleConfirmationSave, onSecondary: handleConfirmationCancel, type: ConfirmationDialog_1.DialogType.SAVE, entityType: "affiliation" }),
+                            react_1.default.createElement(AuthorsSection, null,
+                                react_1.default.createElement(AuthorsHeader, null,
+                                    react_1.default.createElement(AuthorsTitle, null, "Authors"),
+                                    react_1.default.createElement(AffiliateButton, { onClick: () => setShowAuthorDrawer(true), "data-cy": "affiliate-authors-button" },
+                                        react_1.default.createElement(style_guide_1.AddUserIcon, { width: 16, height: 16 }),
+                                        "Affiliate Authors")),
+                                react_1.default.createElement(style_guide_1.SelectedItemsBox, { items: selectedAuthors, onRemove: (id) => {
+                                        setSelectedIds((prev) => prev.filter((authorId) => authorId !== id));
+                                    }, placeholder: "No authors assigned" })))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "affiliation", title: 'Affiliation Details', message: "Select an affiliation from the list to display it's details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AffiliationPlaceholderIcon, null) })),
+                        showAuthorDrawer && (react_1.default.createElement(style_guide_1.Drawer, { items: authorItems, selectedIds: selectedIds, title: "Authors", onSelect: handleAuthorSelect, onBack: () => setShowAuthorDrawer(false), width: "100%" }))))),
+            react_1.default.createElement(FormFooter_1.default, { onCancel: handleClose }))));
+};
+exports.AffiliationsModal = AffiliationsModal;

package/dist/cjs/components/authors/AuthorDetailsForm.js

@@ -75,8 +75,13 @@ const CheckboxContainer = styled_components_1.default.div `
   align-items: center;
   gap: 32px;
 `;
-const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequired, }) => {
+const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequired, selectedAffiliations, }) => {
     const formRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (selectedAffiliations && formRef.current) {
+            formRef.current.setFieldValue('affiliations', selectedAffiliations);
+        }
+    }, [selectedAffiliations]);
     if (actionsRef && !actionsRef.current) {
         actionsRef.current = {
             reset: () => {
@@ -110,7 +115,10 @@ const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequir
                 react_1.default.createElement(OrcidContainer, null,
                     react_1.default.createElement(style_guide_1.TextFieldLabel, null,
                         react_1.default.createElement(exports.LabelText, null, "ORCID"),
-                        react_1.default.createElement(formik_1.Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (react_1.default.createElement(style_guide_1.TextField, Object.assign({ id: 'orcid', placeholder: 'https://orcid.org/...' }, props.field)))))))));
+                        react_1.default.createElement(formik_1.Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (react_1.default.createElement(style_guide_1.TextField, Object.assign({ id: 'orcid', placeholder: 'https://orcid.org/...' }, props.field)))))),
+                react_1.default.createElement(formik_1.Field, { name: "affiliations", type: "hidden" }, (props) => {
+                    return (react_1.default.createElement(style_guide_1.TextField, Object.assign({ type: "hidden" }, props.field, { value: selectedAffiliations || [] })));
+                }))));
     }));
 };
 exports.AuthorDetailsForm = AuthorDetailsForm;

package/dist/cjs/components/authors/AuthorList.js

@@ -34,7 +34,7 @@ const AuthorListTitle = styled_components_1.default.h2 `
   font-weight: 400;
   line-height: 24px;
   margin-left: 14px;
-  margin-top: 28px;
+  margin-top: 20px;
 `;
 const AuthorList = ({ author, authors, onSelect, onDelete, moveAuthor, lastSavedAuthor, }) => {
     return (react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend },