diff --git a/client/components/Contacts/ContactField.tsx b/client/components/Contacts/ContactField.tsx index 9679bcb6d..31ca81b4e 100644 --- a/client/components/Contacts/ContactField.tsx +++ b/client/components/Contacts/ContactField.tsx @@ -1,6 +1,5 @@ import React from 'react'; import {connect} from 'react-redux'; -import {get} from 'lodash'; import {superdeskApi} from '../../superdeskApi'; import {IContactItem, IPrivileges} from '../../interfaces'; @@ -10,11 +9,10 @@ import * as actions from '../../actions'; import {ContactEditor, SelectSearchContactsField, ContactsPreviewList} from './index'; -interface IProps { +interface IBaseProps { field: string; label: string; querySearch?: boolean; - value: Array; contacts: Array; privileges: IPrivileges; readOnly?: boolean; @@ -23,15 +21,28 @@ interface IProps { onFocus?(): void; refNode?(node: HTMLElement): void; - onChange(field: string, value: Array): void; addContact(contact: Partial): void; onPopupOpen?(): void; onPopupClose?(): void; } +interface ISingleContactProps extends IBaseProps { + singleValue: true; + value: IContactItem['_id'] | null; + onChange(field: string, value: IContactItem['_id'] | null): void; +} + +interface IMultiContactProps extends IBaseProps { + singleValue: false; + value: Array | null; + onChange(field: string, value: Array): void; +} + +type IProps = ISingleContactProps | IMultiContactProps; + interface IState { showEditModal: boolean; - editContact: boolean; + editContact?: IContactItem; } const mapStateToProps = (state) => ({ @@ -74,12 +85,18 @@ export class ContactFieldComponent extends React.Component { } removeContact(contact: IContactItem) { - let value = Array.from(this.props.value); - const index = value.indexOf(contact._id); - - if (index >= 0) { - value.splice(index, 1); - this.props.onChange(this.props.field, value); + if (this.props.singleValue === true) { + if (this.props.value === contact._id) { + this.props.onChange(this.props.field, null); + } + } else { + let value = Array.from(this.props.value ?? []); + const index = value.indexOf(contact._id); + + if (index >= 0) { + value.splice(index, 1); + this.props.onChange(this.props.field, value); + } } } @@ -92,8 +109,12 @@ export class ContactFieldComponent extends React.Component { // Update the redux store this.props.addContact(savedContact); - // Append the value if the id is not in the list already - if (!this.props.value.find((contactId) => contactId === savedContact._id)) { + if (this.props.singleValue === true) { + if (this.props.value !== savedContact._id) { + this.props.onChange(this.props.field, savedContact._id); + } + } else if (!(this.props.value ?? []).find((contactId) => contactId === savedContact._id)) { + // Append the value if the id is not in the list already this.props.onChange( this.props.field, [ @@ -118,6 +139,16 @@ export class ContactFieldComponent extends React.Component { readOnly, } = this.props; + let value: Array; + + if (this.props.value == null) { + value = []; + } else if (this.props.singleValue === true) { + value = [this.props.value]; + } else { + value = this.props.value; + } + return (
{ field={field} label={label} onChange={this.onChange} - value={this.props.value} + value={value} onAdd={privileges.contacts ? this.showEditModal : null} onAddText={privileges.contacts ? gettext('Add Contact') : null} onFocus={onFocus} @@ -138,7 +169,7 @@ export class ContactFieldComponent extends React.Component { /> { readOnly={this.props.readOnly} /> - {this.state.showEditModal && ( + {this.state.showEditModal && this.state.editContact != null && ( value={value} onChange={this.props.onChange} readOnly={this.props.disabled} + singleValue={false} /> ); } diff --git a/client/components/fields/editor/CoverageContact.tsx b/client/components/fields/editor/CoverageContact.tsx index dca7f6d35..f26070bb1 100644 --- a/client/components/fields/editor/CoverageContact.tsx +++ b/client/components/fields/editor/CoverageContact.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import {get} from 'lodash'; -import {IContactItem, IEditorFieldProps} from '../../../interfaces'; +import {IEditorFieldProps} from '../../../interfaces'; import {superdeskApi} from '../../../superdeskApi'; import {ContactField, ContactsPreviewList} from '../../Contacts'; @@ -12,19 +12,6 @@ interface IProps extends IEditorFieldProps { } export class EditorFieldCoverageContact extends React.PureComponent { - constructor(props) { - super(props); - - this.onChange = this.onChange.bind(this); - } - - onChange(field: string, value: Array) { - this.props.onChange( - field, - value[0] ?? null - ); - } - render() { const {gettext} = superdeskApi.localization; const field = this.props.field ?? 'planning.contact_info'; @@ -53,9 +40,10 @@ export class EditorFieldCoverageContact extends React.PureComponent { testId={this.props.testId} field={field} label={label} - value={value != null ? [value] : []} - onChange={this.onChange} + value={value} + onChange={this.props.onChange} readOnly={this.props.disabled} + singleValue={true} /> ); }