[SDESK-6643] fix(ui): Unable to add contact to Coverage ScheduledUpda…

…te (#1744)
superdesk · Dec 7, 2022 · f5d9b1f · f5d9b1f
1 parent a5df253
commit f5d9b1f
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 33 deletions.
diff --git 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<IContactItem['_id']>;
     contacts: Array<IContactItem>;
     privileges: IPrivileges;
     readOnly?: boolean;
@@ -23,15 +21,28 @@ interface IProps {
 
     onFocus?(): void;
     refNode?(node: HTMLElement): void;
-    onChange(field: string, value: Array<IContactItem['_id']>): void;
     addContact(contact: Partial<IContactItem>): 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<IContactItem['_id']> | null;
+    onChange(field: string, value: Array<IContactItem['_id']>): 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<IProps, IState> {
     }
 
     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<IProps, IState> {
         // 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<IProps, IState> {
             readOnly,
         } = this.props;
 
+        let value: Array<IContactItem['_id']>;
+
+        if (this.props.value == null) {
+            value = [];
+        } else if (this.props.singleValue === true) {
+            value = [this.props.value];
+        } else {
+            value = this.props.value;
+        }
+
         return (
             <div
                 ref={refNode}
@@ -128,7 +159,7 @@ export class ContactFieldComponent extends React.Component<IProps, IState> {
                     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<IProps, IState> {
                 />
 
                 <ContactsPreviewList
-                    contactIds={this.props.value}
+                    contactIds={value}
                     onEditContact={privileges.contacts ? this.showEditModal : null}
                     onRemoveContact={privileges.contacts ? this.removeContact : null}
                     scrollInView={true}
@@ -147,7 +178,7 @@ export class ContactFieldComponent extends React.Component<IProps, IState> {
                     readOnly={this.props.readOnly}
                 />
 
-                {this.state.showEditModal && (
+                {this.state.showEditModal && this.state.editContact != null && (
                     <ContactEditor
                         onCancel={this.closeEditModal}
                         currentContact={this.state.editContact}

diff --git a/client/components/Coverages/ScheduledUpdate/ScheduledUpdateForm.tsx b/client/components/Coverages/ScheduledUpdate/ScheduledUpdateForm.tsx
@@ -91,7 +91,7 @@ export class ScheduledUpdateForm extends React.Component {
                     field={`${field}.planning.contact_info`}
                     profileName="contact_info"
                     label={assignmentUtils.getContactLabel(get(diff, field))}
-                    defaultValue={[]}
+                    defaultValue={null}
                     {...fieldProps}
                     onPopupOpen={onPopupOpen}
                     onPopupClose={onPopupClose}

diff --git a/client/components/fields/editor/Contacts.tsx b/client/components/fields/editor/Contacts.tsx
@@ -20,6 +20,7 @@ export class EditorFieldContacts extends React.PureComponent<IEditorFieldProps>
                 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
@@ -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<IProps> {
-    constructor(props) {
-        super(props);
-
-        this.onChange = this.onChange.bind(this);
-    }
-
-    onChange(field: string, value: Array<IContactItem['_id']>) {
-        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<IProps> {
                 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}
             />
         );
     }