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

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

@@ -0,0 +1,388 @@
+import { generateID, ObjectTypes } from '@manuscripts/json-schema';
+import { AddIcon, AddUserIcon, AffiliationPlaceholderIcon, CloseButton, Drawer, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SelectedItemsBox, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
+import { isEqual } from 'lodash';
+import React, { useEffect, useReducer, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { authorComparator, } from '../../lib/authors';
+import { affiliationsReducer, authorsReducer } from '../authors/AuthorsModal';
+import { ConfirmationDialog, DialogType } from '../dialog/ConfirmationDialog';
+import FormFooter from '../form/FormFooter';
+import { FormPlaceholder } from '../form/FormPlaceholder';
+import { ModalFormActions } from '../form/ModalFormActions';
+import { AffiliationForm } from './AffiliationForm';
+import { AffiliationList } from './AffiliationList';
+const StyledSidebarContent = styled(SidebarContent) `
+  padding: 0;
+`;
+const AddAffiliationButton = styled.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.div `
+  padding-left: ${(props) => props.theme.grid.unit * 2}px;
+`;
+const AffiliationForms = styled.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.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.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.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.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 = styled(ModalBody) `
+  position: relative;
+  height: calc(90vh - 40px);
+`;
+const StyledModalSidebarHeader = styled(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,
+});
+export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, }) => {
+    const [isOpen, setIsOpen] = useState(true);
+    const [selection, setSelection] = useState(undefined);
+    const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+    const valuesRef = useRef();
+    const actionsRef = useRef();
+    const [authors, dispatchAuthors] = useReducer(authorsReducer, $authors.sort(authorComparator));
+    const [affiliations, dispatchAffiliations] = useReducer(affiliationsReducer, $affiliations);
+    const [isDisableSave, setIsDisableSave] = useState(true);
+    const [newAffiliation, setNewAffiliation] = useState(false);
+    const [showRequiredFieldConfirmationDialog, setShowRequiredFieldConfirmationDialog,] = useState(false);
+    const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);
+    const affiliation = {
+        id: generateID(ObjectTypes.Affiliation),
+        institution: '',
+        department: '',
+        addressLine1: '',
+        addressLine2: '',
+        addressLine3: '',
+        postCode: '',
+        country: '',
+        county: '',
+        city: '',
+        email: {
+            href: '',
+            text: '',
+        },
+        priority: affiliations.length,
+    };
+    const [showAuthorDrawer, setShowAuthorDrawer] = useState(false);
+    const [selectedIds, setSelectedIds] = useState([]);
+    const [pendingSelection, setPendingSelection] = useState(null);
+    const [pendingAction, setPendingAction] = useState(null);
+    const [savedAffiliationId, setSavedAffiliationId] = useState(undefined);
+    const [affiliationAuthorMap, setAffiliationAuthorMap] = useState({});
+    const handleClose = () => {
+        var _a;
+        const values = valuesRef.current;
+        const hasAffiliationChanges = selection && !isEqual(values, normalize(selection));
+        const originalAuthors = affiliationAuthorMap[(selection === null || selection === void 0 ? void 0 : selection.id) || ''] || [];
+        const hasAuthorChanges = !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 && !isEqual(values, normalize(selection));
+        const originalAuthors = affiliationAuthorMap[(selection === null || selection === void 0 ? void 0 : selection.id) || ''] || [];
+        const hasAuthorChanges = !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 && !isEqual(normalize(values), normalize(selection));
+        const originalAuthors = affiliationAuthorMap[(selection === null || selection === void 0 ? void 0 : selection.id) || ''] || [];
+        const hasAuthorChanges = selection && !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 = !isEqual(valuesRef.current, normalize(selection));
+        const originalAuthors = affiliationAuthorMap[selection.id] || [];
+        const hasAuthorChanges = !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);
+    };
+    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.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: true },
+        React.createElement(ModalContainer, null,
+            React.createElement(ModalHeader, null,
+                React.createElement(CloseButton, { onClick: () => handleClose(), "data-cy": "modal-close-button" })),
+            React.createElement(StyledModalBody, null,
+                React.createElement(ModalSidebar, null,
+                    React.createElement(StyledModalSidebarHeader, null,
+                        React.createElement(ModalSidebarTitle, null, "Affiliations")),
+                    React.createElement(StyledSidebarContent, null,
+                        React.createElement(AddAffiliationButton, { "data-cy": "add-affiliation-button", onClick: handleAddAffiliation, "data-active": newAffiliation },
+                            React.createElement(AddIcon, { width: 18, height: 18 }),
+                            React.createElement(ActionTitle, null, "New Affiliation")),
+                        React.createElement(AffiliationList, { affiliation: selection, affiliations: affiliations, onSelect: handleSelect, onDelete: handleShowDeleteDialog, lastSavedAffiliationId: savedAffiliationId }))),
+                React.createElement(ScrollableModalContent, { "data-cy": "affiliations-modal-content" },
+                    React.createElement(AffiliationForms, null,
+                        selection ? (React.createElement(React.Fragment, null,
+                            React.createElement(ModalFormActions, { type: 'affiliation', onSave: () => handleSaveAffiliation(valuesRef.current), onDelete: handleDeleteAffiliation, showDeleteDialog: showDeleteDialog, handleShowDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
+                            React.createElement(AffiliationForm, { values: normalize(selection), onSave: handleSaveAffiliation, onChange: handleAffiliationChange, actionsRef: actionsRef }),
+                            React.createElement(ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: handleConfirmationCancel, type: DialogType.REQUIRED, entityType: "affiliation" }),
+                            React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleConfirmationSave, onSecondary: handleConfirmationCancel, type: DialogType.SAVE, entityType: "affiliation" }),
+                            React.createElement(AuthorsSection, null,
+                                React.createElement(AuthorsHeader, null,
+                                    React.createElement(AuthorsTitle, null, "Authors"),
+                                    React.createElement(AffiliateButton, { onClick: () => setShowAuthorDrawer(true), "data-cy": "affiliate-authors-button" },
+                                        React.createElement(AddUserIcon, { width: 16, height: 16 }),
+                                        "Affiliate Authors")),
+                                React.createElement(SelectedItemsBox, { items: selectedAuthors, onRemove: (id) => {
+                                        setSelectedIds((prev) => prev.filter((authorId) => authorId !== id));
+                                    }, placeholder: "No authors assigned" })))) : (React.createElement(FormPlaceholder, { type: "affiliation", title: 'Affiliation Details', message: "Select an affiliation from the list to display it's details here.", placeholderIcon: React.createElement(AffiliationPlaceholderIcon, null) })),
+                        showAuthorDrawer && (React.createElement(Drawer, { items: authorItems, selectedIds: selectedIds, title: "Authors", onSelect: handleAuthorSelect, onBack: () => setShowAuthorDrawer(false), width: "100%" }))))),
+            React.createElement(FormFooter, { onCancel: handleClose }))));
+};

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

@@ -15,7 +15,7 @@
  */
 import { CheckboxField, CheckboxLabel, TextField, TextFieldGroupContainer, TextFieldLabel, } from '@manuscripts/style-guide';
 import { Field, Formik } from 'formik';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { ChangeHandlingForm } from '../ChangeHandlingForm';
 export const LabelText = styled.div `
@@ -46,8 +46,13 @@ const CheckboxContainer = styled.div `
   align-items: center;
   gap: 32px;
 `;
-export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequired, }) => {
+export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequired, selectedAffiliations, }) => {
     const formRef = useRef(null);
+    useEffect(() => {
+        if (selectedAffiliations && formRef.current) {
+            formRef.current.setFieldValue('affiliations', selectedAffiliations);
+        }
+    }, [selectedAffiliations]);
     if (actionsRef && !actionsRef.current) {
         actionsRef.current = {
             reset: () => {
@@ -81,6 +86,9 @@ export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmai
                 React.createElement(OrcidContainer, null,
                     React.createElement(TextFieldLabel, null,
                         React.createElement(LabelText, null, "ORCID"),
-                        React.createElement(Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (React.createElement(TextField, Object.assign({ id: 'orcid', placeholder: 'https://orcid.org/...' }, props.field)))))))));
+                        React.createElement(Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (React.createElement(TextField, Object.assign({ id: 'orcid', placeholder: 'https://orcid.org/...' }, props.field)))))),
+                React.createElement(Field, { name: "affiliations", type: "hidden" }, (props) => {
+                    return (React.createElement(TextField, Object.assign({ type: "hidden" }, props.field, { value: selectedAffiliations || [] })));
+                }))));
     }));
 };

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

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