Improve desk select

thecalcc · Jun 20, 2024 · 44bfde7 · 44bfde7
1 parent 5bd2a11
commit 44bfde7
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 25 deletions.
diff --git a/client/components/UI/List/Row.tsx b/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,
-};
diff --git a/client/components/fields/editor/EventRelatedPlannings/EmbeddedCoverageForm.tsx b/client/components/fields/editor/EventRelatedPlannings/EmbeddedCoverageForm.tsx
@@ -81,28 +81,52 @@ function getLanguagesForCoverage(
     };
 }
 
-export class EmbeddedCoverageFormComponent extends React.PureComponent<IProps> {
+interface IState {
+    userList: Array<IUser>;
+    selectedDeskId?: string;
+}
+
+const propertiesToFilterUsersBy = [
+    'username',
+    'display_name',
+    'first_name',
+    'last_name',
+    'email',
+    'sign_off',
+];
+
+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),
         };
 
         if ((this.props.coverage.language ?? '').length < 1) {
-            updates.language = newDesk.desk_language;
+            updates.language = newDesk?.desk_language;
         }
 
+        this.setState({
+            selectedDeskId: deskId,
+            userList: updates.filteredUsers,
+        });
+
         this.props.update(updates);
     }
 
@@ -155,7 +179,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,6 +198,26 @@ export class EmbeddedCoverageFormComponent extends React.PureComponent<IProps> {
                             style={{padding: '2rem 0'}}
                         >
                             <SelectUser
+                                key={this.state.selectedDeskId}
+                                getItems={(searchString) => {
+                                    const getFilteredUsers = (users: Array<IUser>) => {
+                                        return users.filter((user) =>
+                                            propertiesToFilterUsersBy.some((filterProp) => {
+                                                if (user[filterProp]?.toLowerCase().includes(searchString.toLowerCase())) {
+                                                    return true;
+                                                }
+
+                                                return false;
+                                            }),
+                                        )
+                                    };
+
+                                    if (searchString === '' || searchString == null) {
+                                        return Promise.resolve(this.state.userList);
+                                    }
+
+                                    return Promise.resolve(getFilteredUsers(this.state.userList));
+                                }}
                                 onSelect={(user) => {
                                     this.onUserChange(null, user);
                                 }}
@@ -187,11 +231,12 @@ export class EmbeddedCoverageFormComponent extends React.PureComponent<IProps> {
                         <List.Row>
                             <Row>
                                 <Select
+                                    key={this.state.selectedDeskId}
                                     label={gettext('Language:')}
                                     value={language}
                                     onChange={(item) => this.onLanguageChange(item)}
                                 >
-                                    <Option />
+                                    <Option value={null} />
                                     {allLanguages.map(
                                         (language) => (
                                             <Option

diff --git a/client/utils/index.ts b/client/utils/index.ts
@@ -544,8 +544,7 @@ 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);
+    return globalUserList.filter(({_id}) => (desk.members ?? []).find((member) => member.user === _id));
 };
 
 export const getDesksForUser = (user, desksList = []) => {