Feat: Improve Unified creation form

src/client/entity-editor/alias-editor/alias-modal-body.tsx

@@ -36,14 +36,14 @@ export const AliasModalBody = ({aliases, onAddAlias, languageOptions}:AliasModal
 			</div>
 			<div>
 				{
-					aliases.toArray().map((_, rowId) => (
+					aliases.map((_, rowId) => (
 						<AliasRow
 							index={rowId}
 							// eslint-disable-next-line react/no-array-index-key
 							key={`alias-row-${rowId}`}
 							languageOptions={languageOptionsForDisplay}
 						/>
-					))
+					)).toArray()
 				}
 			</div>
 			<Row>

src/client/entity-editor/series-section/series-editor.tsx

@@ -43,6 +43,7 @@ type EntitySearchResult = {
 
 type SeriesItemsProps = {
 	defaultOptions: Array<any>,
+	hideItemSelect: boolean
 	baseEntity: Entity,
 	onAdd: (_Relationship) => unknown,
     onEdit: (Attribute, string) => unknown,
@@ -141,7 +142,7 @@ const SortableItem = SortableElement(({value, onRemove, baseEntity, handleNumber
 ));
 
 const SortableList = SortableContainer(({children}) => <div>{children}</div>);
-function SeriesEditor({baseEntity, relationshipTypes, seriesType, orderType, onRemove,
+function SeriesEditor({baseEntity, relationshipTypes, seriesType, orderType, onRemove, hideItemSelect,
 	onAdd, onEdit, onSort, seriesItemsArray, isUnifiedForm, defaultOptions}:SeriesItemsProps) {
 	const [seriesItem, setSeriesItem] = useState(null);
 	const [targetEntity, setTargetEntity] = useState(null);
@@ -228,6 +229,7 @@ function SeriesEditor({baseEntity, relationshipTypes, seriesType, orderType, onR
 				}
 				</> : null
 			}
+			{!hideItemSelect &&
 			<Row className="margin-top-d8">
 				<Col className={alignText} lg={isUnifiedForm ? 7 : 3}>
 					<p className="margin-top-d5">Add an entity to the series:</p>
@@ -250,6 +252,7 @@ function SeriesEditor({baseEntity, relationshipTypes, seriesType, orderType, onR
 					</Button>
 				</Col>
 			</Row>
+					   }
 		</div>
 	);
 }

src/client/entity-editor/series-section/series-section.tsx

@@ -59,7 +59,7 @@ type DispatchProps = {
 };
 
 type OwnProps = {
-	hideTypeOption?:boolean,
+	hideItemSelect?:boolean,
 	entity: Entity,
 	isUnifiedForm?: boolean,
 	entityType: EntityType,
@@ -104,7 +104,7 @@ function SeriesSection({
 	entity,
 	entityName,
 	entityType,
-	hideTypeOption,
+	hideItemSelect,
 	onEdit,
 	onOrderTypeChange,
 	onRemove,
@@ -181,11 +181,10 @@ function SeriesSection({
 	return (
 		<div>
 			{!isUnifiedForm && heading}
-			{!hideTypeOption &&
+			{!hideItemSelect &&
 			<p className="text-muted">
 				All fields are mandatory — select the option from dropdown
 			</p>}
-			{!hideTypeOption &&
 			<Row>
 				<Col lg={lgCol}>
 					<Form.Group>
@@ -232,10 +231,10 @@ function SeriesSection({
 					</Form.Group>}
 				</Col>
 			</Row>
-			}
 			<SeriesEditor
 				baseEntity={baseEntity}
 				defaultOptions={defaultOptions}
+				hideItemSelect={hideItemSelect}
 				isUnifiedForm={isUnifiedForm}
 				orderType={orderTypeValue}
 				relationshipTypes={relationshipTypes}
@@ -251,7 +250,7 @@ function SeriesSection({
 }
 SeriesSection.displayName = 'SeriesSection';
 SeriesSection.defaultProps = {
-	hideTypeOption: false,
+	hideItemSelect: false,
 	isUnifiedForm: false
 };
 

src/client/stylesheets/style.scss

@@ -815,15 +815,14 @@ div[class~=collapsing]+div[class=card-header] .accordion-arrow {
 .uf-modal-body .accordion > .card{
 	margin-bottom: 10px;
 }
-.entities-preview{
-	cursor: pointer;
-	color: $orange;
-	transition: all 0.2s linear;
-}
-.entities-preview:hover{
-	color: #754E37;
+.review-section{
+	display: flex;
 }
 
 .series-item-dialog{
 	max-width: 600px;
+}
+
+.review-card{
+	margin: 10px;
 }

src/client/unified-form/content-tab/content-tab.tsx

@@ -81,7 +81,7 @@ export function ContentTab({works, onChange, onModalClose, onModalOpen, onSeries
 			bbid: series?.id
 		},
 		entityType: 'series',
-		hideTypeOption: true
+		hideItemSelect: true
 	};
 	const checkLabel = (
 		<>
@@ -98,6 +98,24 @@ export function ContentTab({works, onChange, onModalClose, onModalOpen, onSeries
 				</OverlayTrigger>
 			</FormLabel>
 		</>);
+	const seriesWorkLabel = (
+
+		<>
+			<FormLabel className="font-weight-normal">
+			Add Works to Series
+				<OverlayTrigger
+					delay={50}
+					overlay={<Tooltip id="series-work">This will automatically add each new selected work to series items (if present)</Tooltip>}
+				>
+					<FontAwesomeIcon
+						className="margin-left-0-5"
+						icon={faInfoCircle}
+					/>
+				</OverlayTrigger>
+			</FormLabel>
+		</>
+
+	);
 	const filterSeries = React.useCallback((item) => toLower(item.entityType) === 'work', []);
 	const filters = [filterSeries];
 	return (
@@ -125,19 +143,23 @@ export function ContentTab({works, onChange, onModalClose, onModalOpen, onSeries
 					type="checkbox"
 					onChange={toggleCheck}
 				/>
+			</div>
+			<hr/>
+			<div>
+				<h3>Series</h3>
+				<p className="text-muted">You can add all the Works above to an existing or new series if they are part of the
+					 same a set or sequence of related Works.
+					 Check the checkbox below to add the Works to a Series
+				</p>
 				<FormCheck
-					className="ml-1"
+					className="ml-1 mb-2"
 					defaultChecked={copyToSeries}
-					disabled={!series}
 					id="works-copy-to-series"
-					label="Add Work to Series"
+					label={seriesWorkLabel}
 					type="checkbox"
 					onChange={toggleCopyToSeries}
 				/>
-			</div>
-			<hr/>
-			<div>
-				<h3>Series</h3>
+				{copyToSeries &&
 				<Row>
 					<Col lg={{span: 6}}>
 						<SearchEntityCreate
@@ -149,11 +171,8 @@ export function ContentTab({works, onChange, onModalClose, onModalOpen, onSeries
 							{...rest}
 						/>
 					</Col>
-					{/* <Col lg={{span: 2}}>
-						{series && <Button variant="primary" onClick={onShowHandler}>Add Items</Button>}
-					</Col> */}
-				</Row>
-				{series && <SeriesSection {...seriesSectionProps}/>}
+				</Row>}
+				{copyToSeries && <SeriesSection {...seriesSectionProps}/>}
 			</div>
 		</>
 	);

src/client/unified-form/content-tab/reducer.ts

@@ -16,7 +16,7 @@ export function worksReducer(state = initialState, {type, payload}:Action):State
 		case UPDATE_WORK:
 			return state.set(payload.id, Immutable.fromJS(payload.value));
 		case TOGGLE_COPY_AUTHOR_CREDITS:
-			return state.setIn([payload, 'checked'], !state.getIn([payload.id, 'checked']));
+			return state.setIn([payload, 'checked'], !state.getIn([payload, 'checked']));
 		default:
 			return state;
 	}

src/client/unified-form/interface/type.ts

@@ -204,15 +204,7 @@ export type WorkRowOwnProps = {
 
 export type WorkRowProps = WorkRowStateProps & WorkRowDispatchProps & WorkRowOwnProps;
 
-export type SingleEntityModalProps = {
+export type SingleEntityCardProps = {
     entity:any,
-    show:boolean,
-    handleClose:()=>void,
-	languageOptions:any[]
-};
-
-export type SingleEntityProps = {
-    entity: any;
-    isLast: boolean;
 	languageOptions:any[]
 };

src/client/unified-form/submit-tab/single-entity-modal.tsx → src/client/unified-form/submit-tab/single-entity-card.tsx

@@ -1,12 +1,13 @@
-import {Modal} from 'react-bootstrap';
+import {Card} from 'react-bootstrap';
 import React from 'react';
-import {SingleEntityModalProps} from '../interface/type';
+import {SingleEntityCardProps} from '../interface/type';
 import _ from 'lodash';
 import {dateObjectToISOString} from '../../helpers/utils';
 
 /* eslint-disable sort-keys */
 const BASE_ENTITY = {
 	Name: 'nameSection.name',
+	Type: 'type',
 	Language: 'nameSection.language',
 	'Sort-Name': 'nameSection.sortName',
 	Disambiguation: 'nameSection.disambiguation',
@@ -29,12 +30,12 @@ const ENTITY_FIELDS = {
 	},
 	editionGroup: {
 		...BASE_ENTITY,
-		Type: 'editionGroupSection.type'
+		'EditionGroup-Type': 'editionGroupSection.type'
 	},
 	author: {
 		...BASE_ENTITY,
 		Gender: 'authorSection.gender',
-		Type: 'authorSection.type',
+		'Author-Type': 'authorSection.type',
 		'Begin-Date': 'authorSection.beginDate',
 		'Begin-Area': 'authorSection.beginArea.text',
 		'Dead?': 'authorSection.ended',
@@ -43,7 +44,7 @@ const ENTITY_FIELDS = {
 	},
 	publisher: {
 		...BASE_ENTITY,
-		Type: 'publisherSection.type',
+		'Publihser-Type': 'publisherSection.type',
 		'Begin-Date': 'publisherSection.beginDate',
 		'Dissolved?': 'publisherSection.ended',
 		'End-Date': 'publisherSection.endDate'
@@ -53,20 +54,20 @@ const ENTITY_FIELDS = {
 		...BASE_ENTITY,
 		orderType: 'seriesSection.orderType',
 		'Series-Items': 'seriesSection.seriesItems',
-		seriesType: 'seriesSection.seriesType'
+		'series-Type': 'seriesSection.seriesType'
 	},
 	work: {
 		...BASE_ENTITY,
-		type: 'workSection.type',
+		'Work-Type': 'workSection.type',
 		'Work-Languages': 'workSection.languages'
 	}
 };
-export default function SingleEntityModal({entity, show, handleClose, languageOptions}:SingleEntityModalProps) {
+export default function SingleEntityCard({entity, languageOptions}:SingleEntityCardProps) {
 	const id2LanguageMap = React.useMemo(() => Object.fromEntries(_.map(languageOptions, (option) => [option.id, option.name])), []);
 	// display formatted entity attributes in modal
 	function renderField(path, key) {
 		let fieldVal = _.get(entity, path, '');
-		if (!fieldVal || (fieldVal.length === 0)) {
+		if (!fieldVal || (fieldVal.length === 0) || key === 'Name') {
 			return;
 		}
 		if (key === 'Language') {
@@ -98,14 +99,11 @@ export default function SingleEntityModal({entity, show, handleClose, languageOp
 	}
 	const entityFields = ENTITY_FIELDS[_.camelCase(entity.type)] ?? {};
 	return (
-		<Modal show={show} onHide={handleClose}>
-			<Modal.Header closeButton>
-				<Modal.Title>{entity.type}</Modal.Title>
-			</Modal.Header>
-			<Modal.Body>
+		<Card className="review-card">
+			<Card.Header>{_.get(entity, entityFields.Name, '<unknown>')}</Card.Header>
+			<Card.Body>
 				{_.map(entityFields, renderField)}
-			</Modal.Body>
-
-		</Modal>
+			</Card.Body>
+		</Card>
 	);
 }