[DEV-130] add current staff to assign list (#1089)

* add current staff to assign list

* create a unique library

* add owner pic to dropdown

* update staffmember list when profilepic changes

* Improve coding

Co-authored-by: LautaroCesso <lautaro_cesso@hotmail.com>

client/src/app-components/ticket-query-filters.js

@@ -8,6 +8,7 @@ import i18n from 'lib-app/i18n';
 import API from 'lib-app/api-call';
 import history from 'lib-app/history';
 import searchTicketsUtils from 'lib-app/search-tickets-utils';
+import ticketUtils from 'lib-app/ticket-utils';
 
 import Form from 'core-components/form';
 import SubmitButton from 'core-components/submit-button';
@@ -34,7 +35,8 @@ class TicketQueryFilters extends React.Component {
             formState,
             filters,
             showFilters,
-            ticketQueryListState
+            ticketQueryListState,
+            staffList
         } = this.props;
 
         return (
@@ -72,7 +74,7 @@ class TicketQueryFilters extends React.Component {
                             label={i18n('OWNER')}
                             name="owners"
                             field="autocomplete"
-                            fieldProps={{items: this.getStaffList()}} />
+                            fieldProps={{items: ticketUtils.getStaffList({staffList}, 'toAutocomplete')}} />
                     </div>
                     <div className="ticket-query-filters__third-row">
                         <FormField
@@ -131,8 +133,8 @@ class TicketQueryFilters extends React.Component {
                     id: author.id*1,
                     profilePic: author.profilePic,
                     isStaff: author.isStaff * 1,
-                    content: author.profilePic !== undefined ? this.renderStaffOption(author) : author.name,
-                    contentOnSelected: author.profilePic !== undefined ? this.renderStaffSelected(author) : author.name
+                    content: author.profilePic !== undefined ? ticketUtils.renderStaffOption(author) : author.name,
+                    contentOnSelected: author.profilePic !== undefined ? ticketUtils.renderStaffSelected(author) : author.name
                 }});
         });
     }
@@ -159,24 +161,6 @@ class TicketQueryFilters extends React.Component {
         );
     }
 
-    renderStaffOption(staff) {
-        return (
-            <div className="ticket-query-filters__staff-option" key={`staff-option-${staff.id}`}>
-                <img className="ticket-query-filters__staff-option__profile-pic" src={this.getStaffProfilePic(staff)}/>
-                <span className="ticket-query-filters__staff-option__name">{staff.name}</span>
-            </div>
-        );
-    }
-
-    renderStaffSelected(staff) {
-        return (
-            <div className="ticket-query-filters__staff-selected" key={`staff-selected-${staff.id}`}>
-                <img className="ticket-query-filters__staff-selected__profile-pic" src={this.getStaffProfilePic(staff)}/>
-                <span className="ticket-query-filters__staff-selected__name">{staff.name}</span>
-            </div>
-        );
-    }
-
     addTag(tag) {
         const { formState } = this.props;
         this.onChangeFormState({...formState, tags: [...formState.tags, tag]});
@@ -220,11 +204,12 @@ class TicketQueryFilters extends React.Component {
     }
 
     getSelectedStaffs(selectedStaffsId) {
+        const { staffList } = this.props;
         let selectedStaffs = [];
 
         if(selectedStaffsId !== undefined) {
             selectedStaffs = selectedStaffsId.map(
-                (staffId) => this.getStaffList().find(_staff => (_staff.id === staffId))
+                (staffId) => ticketUtils.getStaffList({staffList}, 'toAutocomplete').find(_staff => (_staff.id === staffId))
             );
         }
 
@@ -243,25 +228,6 @@ class TicketQueryFilters extends React.Component {
         return selectedTagsName;
     }
 
-    getStaffList() {
-        const { staffList, } = this.props;
-        let newStaffList = staffList.map(staff => {
-            return {
-                id: JSON.parse(staff.id),
-                name: staff.name.toLowerCase(),
-                color: 'gray',
-                contentOnSelected: this.renderStaffSelected(staff),
-                content: this.renderStaffOption(staff),
-            }
-        });
-
-        return newStaffList;
-    }
-
-    getStaffProfilePic(staff) {
-        return staff.profilePic ? API.getFileLink(staff.profilePic) : (API.getURL() + '/images/profile.png');
-    }
-
     getStatusItems() {
         let items = [
             {id: 0, name: 'Any', content: i18n('ANY')},
@@ -369,8 +335,8 @@ class TicketQueryFilters extends React.Component {
             id: author.id*1,
             isStaff: author.isStaff*1,
             profilePic: author.profilePic,
-            content: author.profilePic !== undefined ? this.renderStaffOption(author) : author.name,
-            contentOnSelected: author.profilePic !== undefined ? this.renderStaffSelected(author) : author.name
+            content: author.profilePic !== undefined ? ticketUtils.renderStaffOption(author) : author.name,
+            contentOnSelected: author.profilePic !== undefined ? ticketUtils.renderStaffSelected(author) : author.name
         }));
     }
 

client/src/app-components/ticket-viewer.js

@@ -10,6 +10,7 @@ import SessionStore       from 'lib-app/session-store';
 import MentionsParser     from 'lib-app/mentions-parser';
 import history from 'lib-app/history';
 import searchTicketsUtils from 'lib-app/search-tickets-utils';
+import ticketUtils from 'lib-app/ticket-utils';
 
 import TicketEvent        from 'app-components/ticket-event';
 import AreYouSure         from 'app-components/are-you-sure';
@@ -348,7 +349,7 @@ class TicketViewer extends React.Component {
         if(assignmentAllowed && ticket.owner) {
             ownerNode = (
                 <a className="ticket-viewer__info-owner-name" href={this.searchTickets(filtersOnlyWithOwner)}>
-                    {ticket.owner.name}
+                    {ticketUtils.renderStaffSelected(ticket.owner)}
                 </a>
             );
         } else {
@@ -846,37 +847,19 @@ class TicketViewer extends React.Component {
     }
 
     getStaffAssignmentItems() {
-        const { userDepartments, userId, ticket } = this.props;
+        const { staffMembers, ticket } = this.props;
         let staffAssignmentItems = [
             {content: i18n('NONE'), contentOnSelected: i18n('NONE'), id: 0}
         ];
 
-        if(_.some(userDepartments, {id: ticket.department.id})) {
-            staffAssignmentItems.push({
-                content: i18n('ASSIGN_TO_ME'),
-                contentOnSelected: this.getCurrentStaff().name,
-                id: userId
-            });
-        }
-
         staffAssignmentItems = staffAssignmentItems.concat(
-            _.map(
-                this.getStaffList(),
-                ({id, name}) => ({content: name, contentOnSelected: name, id: id*1})
+            ticketUtils.getStaffList({staffList: staffMembers, ticket}, 'toDropDown').map(
+                ({id, content}) => ({content, id: id*1})
             )
         );
-
         return staffAssignmentItems;
     }
 
-    getStaffList() {
-        const { userId, staffMembers, ticket } = this.props;
-
-        return _.filter(staffMembers, ({id, departments}) => {
-            return (id != userId) && _.some(departments, {id: ticket.department.id});
-        })
-    }
-
     getCurrentStaff() {
         const { userId, staffMembers, ticket } = this.props;
 

client/src/app/admin/panel/staff/staff-editor.js

@@ -514,6 +514,7 @@ class StaffEditor extends React.Component {
                 loadingPicture: false
             });
 
+            this.retrieveStaffMembers();
             onChange && onChange();
         }).catch(() => {
             window.scrollTo(0,0);

client/src/lib-app/ticket-utils.js

@@ -0,0 +1,58 @@
+import React from "react";
+import API   from 'lib-app/api-call';
+import _ from 'lodash';
+
+export default {
+    getStaffList({staffList, ticket}, type) {
+        switch(type) {
+            case 'toDropDown': 
+                {
+                    return _.filter(
+                        staffList,
+                        ({ departments }) => {
+                            return _.some(departments, {id: ticket.department.id});
+                        }
+                    ).map(staff => {
+                        return {
+                            ...staff,
+                            content: this.renderStaffOption(staff)
+                        }
+                    });
+                };
+            case 'toAutocomplete': 
+               {
+                    return staffList.map(staff => {
+                        return {
+                            id: JSON.parse(staff.id),
+                            name: staff.name.toLowerCase(),
+                            color: 'gray',
+                            contentOnSelected: this.renderStaffSelected(staff),
+                            content: this.renderStaffOption(staff),
+                        }
+                    });
+               };
+        }
+    },
+
+    getStaffProfilePic(staff) {
+        return staff.profilePic ? API.getFileLink(staff.profilePic) : (API.getURL() + '/images/profile.png');
+    },
+
+    renderStaffOption(staff) {
+        return (
+            <div className="ticket-query-filters__staff-option" key={`staff-option-${staff.id}`}>
+                <img className="ticket-query-filters__staff-option__profile-pic" src={this.getStaffProfilePic(staff)}/>
+                <span className="ticket-query-filters__staff-option__name">{staff.name}</span>
+            </div>
+        );
+    },
+
+    renderStaffSelected(staff) {
+        return (
+            <div className="ticket-query-filters__staff-selected" key={`staff-selected-${staff.id}`}>
+                <img className="ticket-query-filters__staff-selected__profile-pic" src={this.getStaffProfilePic(staff)}/>
+                <span className="ticket-query-filters__staff-selected__name">{staff.name}</span>
+            </div>
+        );
+    }
+}

server/models/Ticket.php

@@ -176,7 +176,8 @@ class Ticket extends DataStore {
             return [
                 'id' => $owner->id,
                 'name' => $owner->name,
-                'email' => $owner->email
+                'email' => $owner->email,
+                'profilePic' => $owner->profilePic
             ];
         } else {
             return null;