Improve desk select (#2002)

client/components/Planning/PlanningDateTime.tsx

@@ -1,10 +1,23 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {get} from 'lodash';
 import moment from 'moment';
 import {planningUtils} from '../../utils/index';
 import {MAIN} from '../../constants';
 import {CoverageIcons} from '../Coverages/CoverageIcons';
+import {IDesk, IUser} from 'superdesk-api';
+import {IPlanningItem} from 'interfaces';
+
+interface IProps {
+    item: IPlanningItem;
+    date?: string;
+    users?: Array<IUser>;
+    desks?: Array<IDesk>;
+    activeFilter?: string;
+    contentTypes?: Array<any>;
+    includeScheduledUpdates?: boolean;
+    contacts?: any;
+    filterLanguage?: string;
+}
 
 export const PlanningDateTime = ({
     item,
@@ -15,14 +28,20 @@ export const PlanningDateTime = ({
     contentTypes,
     includeScheduledUpdates,
     contacts,
-}) => {
+    filterLanguage,
+}: IProps) => {
     const coverages = get(item, 'coverages', []);
     const coverageTypes = planningUtils.mapCoverageByDate(coverages);
     const hasAssociatedEvent = !!get(item, 'event_item');
     const isSameDay = (scheduled) => scheduled && (date == null || moment(scheduled).format('YYYY-MM-DD') === date);
     const coverageToDisplay = coverageTypes.filter((coverage) => {
         const scheduled = get(coverage, 'planning.scheduled');
 
+        // Display only the coverages that match the active filter language
+        if (filterLanguage !== '' && filterLanguage != null && coverage.planning.language != filterLanguage) {
+            return false;
+        }
+
         if (includeScheduledUpdates && get(coverage, 'scheduled_updates.length') > 0) {
             for (let i = 0; i < coverage.scheduled_updates.length; i++) {
                 if (isSameDay(coverage.scheduled_updates[i].planning.scheduled)) {
@@ -53,14 +72,3 @@ export const PlanningDateTime = ({
         />
     );
 };
-
-PlanningDateTime.propTypes = {
-    item: PropTypes.object.isRequired,
-    date: PropTypes.string,
-    users: PropTypes.array,
-    desks: PropTypes.array,
-    activeFilter: PropTypes.string,
-    contentTypes: PropTypes.array,
-    includeScheduledUpdates: PropTypes.bool,
-    contacts: PropTypes.object,
-};

client/components/Planning/PlanningItem.tsx

@@ -286,6 +286,7 @@ class PlanningItemComponent extends React.Component<IProps, IState> {
                             activeFilter,
                             contentTypes,
                             contacts,
+                            filterLanguage,
                         })}
                     </Row>
                 </Column>

client/components/UI/List/Column.tsx

@@ -7,7 +7,26 @@ import classNames from 'classnames';
  * @name Column
  * @description Column Component of a list item
  */
-export const Column = ({children, grow, border, noPadding, hasCheck, checked, className}) => (
+
+interface IProps {
+    children: Array<JSX.Element> | JSX.Element;
+    grow?: boolean;
+    border?: boolean;
+    noPadding?: boolean;
+    hasCheck?: boolean;
+    checked?: boolean;
+    className?: string;
+}
+
+export const Column = ({
+    children,
+    grow = false,
+    border = true,
+    noPadding = false,
+    hasCheck = false,
+    checked,
+    className,
+}: IProps) => (
     <div
         className={classNames(
             'sd-list-item__column',
@@ -24,20 +43,3 @@ export const Column = ({children, grow, border, noPadding, hasCheck, checked, cl
         {children}
     </div>
 );
-
-Column.propTypes = {
-    children: PropTypes.node.isRequired,
-    grow: PropTypes.bool,
-    border: PropTypes.bool,
-    noPadding: PropTypes.bool,
-    hasCheck: PropTypes.bool,
-    checked: PropTypes.bool,
-    className: PropTypes.string,
-};
-
-Column.defaultProps = {
-    grow: false,
-    border: true,
-    noPadding: false,
-    hasCheck: false,
-};

client/components/UI/List/Row.tsx

@@ -1,13 +1,21 @@
-import React from 'react';
+import React, {CSSProperties} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+interface IProps {
+    children: Array<JSX.Element> | JSX.Element;
+    classes?: string;
+    paddingBottom?: boolean;
+    testId?: string;
+    style?: CSSProperties;
+}
+
 /**
  * @ngdoc react
  * @name Row
  * @description Row Component in a list of item where each item is a row
  */
-export const Row = ({children, classes, paddingBottom, testId, style}) => (
+export const Row = ({children, classes = '', paddingBottom, testId, style}: IProps) => (
     <div
         className={classNames(
             'sd-list-item__row',
@@ -22,19 +30,3 @@ export const Row = ({children, classes, paddingBottom, testId, style}) => (
         {children}
     </div>
 );
-
-Row.propTypes = {
-    children: PropTypes.node.isRequired,
-    classes: PropTypes.string,
-    margin: PropTypes.bool,
-    marginTop: PropTypes.bool,
-    paddingBottom: PropTypes.bool,
-    testId: PropTypes.string,
-    style: PropTypes.object,
-};
-
-Row.defaultProps = {
-    classes: '',
-    margin: true,
-    marginTop: false,
-};

client/components/fields/coverages.tsx

@@ -11,8 +11,10 @@ export const coverages = ({
     activeFilter,
     contentTypes,
     contacts,
+    filterLanguage,
 }) => (
     <PlanningDateTime
+        filterLanguage={filterLanguage}
         item={item}
         date={date}
         users={users}
@@ -33,4 +35,5 @@ coverages.propTypes = {
     activeFilter: PropTypes.string,
     contentTypes: PropTypes.array,
     contacts: PropTypes.object,
+    filterLanguage: PropTypes.string,
 };

client/components/fields/editor/EventRelatedPlannings/EmbeddedCoverageForm.tsx

@@ -81,28 +81,44 @@ function getLanguagesForCoverage(
     };
 }
 
-export class EmbeddedCoverageFormComponent extends React.PureComponent<IProps> {
+interface IState {
+    userList: Array<IUser>;
+    selectedDeskId?: string;
+}
+
+export class EmbeddedCoverageFormComponent extends React.PureComponent<IProps, IState> {
     constructor(props) {
         super(props);
 
+        this.state = {
+            userList: this.props.users,
+            selectedDeskId: null,
+        };
+
         this.onDeskChange = this.onDeskChange.bind(this);
         this.onStatusChange = this.onStatusChange.bind(this);
         this.onUserChange = this.onUserChange.bind(this);
         this.onLanguageChange = this.onLanguageChange.bind(this);
     }
 
     onDeskChange(deskId?: IDesk['_id']) {
-        const newDesk = deskId == null ? null : this.props.desks.find((desk) => desk._id === deskId);
+        const newDesk = deskId == null || deskId == '' ? null : this.props.desks.find((desk) => desk._id === deskId);
 
         const updates: Partial<ICoverageDetails> = {
             desk: newDesk,
             filteredUsers: getUsersForDesk(newDesk, this.props.users),
+            user: null,
         };
 
         if ((this.props.coverage.language ?? '').length < 1) {
-            updates.language = newDesk.desk_language;
+            updates.language = newDesk?.desk_language ?? null;
         }
 
+        this.setState({
+            selectedDeskId: deskId,
+            userList: updates.filteredUsers,
+        });
+
         this.props.update(updates);
     }
 
@@ -155,7 +171,7 @@ export class EmbeddedCoverageFormComponent extends React.PureComponent<IProps> {
                                 error={this.props.errors?.desk}
                             >
                                 <Option />
-                                {coverage.filteredDesks.map(
+                                {this.props.desks.map(
                                     (desk) => (
                                         <Option
                                             key={desk._id}
@@ -174,9 +190,11 @@ export class EmbeddedCoverageFormComponent extends React.PureComponent<IProps> {
                             style={{padding: '2rem 0'}}
                         >
                             <SelectUser
+                                deskId={this.state.selectedDeskId}
                                 onSelect={(user) => {
                                     this.onUserChange(null, user);
                                 }}
+                                selectedUserId={coverage.user?._id ?? null}
                                 autoFocus={false}
                                 horizontalSpacing={true}
                                 clearable={true}
@@ -191,7 +209,7 @@ export class EmbeddedCoverageFormComponent extends React.PureComponent<IProps> {
                                     value={language}
                                     onChange={(item) => this.onLanguageChange(item)}
                                 >
-                                    <Option />
+                                    <Option value={null} />
                                     {allLanguages.map(
                                         (language) => (
                                             <Option

client/utils/index.ts

@@ -544,8 +544,9 @@ export const getItemsById = (ids, items) => (
 export const getUsersForDesk = (desk, globalUserList = []) => {
     if (!desk) return globalUserList;
 
-    return globalUserList.filter((user) =>
-        map(desk.members, 'user').indexOf(user._id) !== -1);
+    const deskMembersSet = new Set((desk.members ?? []).map((member) => member.user));
+
+    return globalUserList.filter(({_id}) => deskMembersSet.has(_id));
 };
 
 export const getDesksForUser = (user, desksList = []) => {