feat: Use display_name instead of name of the agent (#1097)

* feat: Use display_name instead of name of the agent

app/javascript/dashboard/api/auth.js

@@ -118,7 +118,12 @@ export default {
     return axios.post(urlData.url, { email });
   },
 
-  profileUpdate({ password, password_confirmation, ...profileAttributes }) {
+  profileUpdate({
+    password,
+    password_confirmation,
+    displayName,
+    ...profileAttributes
+  }) {
     const formData = new FormData();
     Object.keys(profileAttributes).forEach(key => {
       const value = profileAttributes[key];
@@ -126,6 +131,7 @@ export default {
         formData.append(`profile[${key}]`, value);
       }
     });
+    formData.append('profile[display_name]', displayName || '');
     if (password && password_confirmation) {
       formData.append('profile[password]', password);
       formData.append('profile[password_confirmation]', password_confirmation);

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -58,12 +58,12 @@
       <div class="current-user" @click.prevent="showOptions()">
         <thumbnail
           :src="currentUser.avatar_url"
-          :username="currentUser.name"
+          :username="currentUserAvailableName"
           :status="currentUser.availability_status"
         />
         <div class="current-user--data">
           <h3 class="current-user--name">
-            {{ currentUser.name }}
+            {{ currentUserAvailableName }}
           </h3>
           <h5 class="current-user--role">
             {{ currentRole }}
@@ -202,6 +202,10 @@ export default {
       uiFlags: 'agents/getUIFlags',
       accountLabels: 'labels/getLabelsOnSidebar',
     }),
+    currentUserAvailableName() {
+      const { available_name: availableName } = this.currentUser;
+      return availableName;
+    },
     showChangeAccountOption() {
       if (this.globalConfig.createNewAccountFromDashboard) {
         return true;

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -25,7 +25,7 @@
         <multiselect
           v-model="currentChat.meta.assignee"
           :options="agentList"
-          label="name"
+          label="available_name"
           :allow-empty="true"
           deselect-label="Remove"
           placeholder="Select Agent"
@@ -95,7 +95,7 @@ export default {
       return [
         {
           confirmed: true,
-          name: 'None',
+          available_name: 'None',
           id: 0,
           role: 'agent',
           account_id: 0,

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -95,10 +95,13 @@ export default {
         : false;
     },
     sentByMessage() {
-      return this.data.message_type === 1 &&
-        !this.isHovered &&
-        this.data.sender !== undefined
-        ? { content: `Sent by: ${this.data.sender.name}`, classes: 'top' }
+      const { sender } = this.data;
+
+      return this.data.message_type === 1 && !this.isHovered && sender
+        ? {
+            content: `Sent by: ${sender.available_name || sender.name}`,
+            classes: 'top',
+          }
         : false;
     },
     wrapClass() {

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -44,9 +44,14 @@
         "LABEL": "Profile Image"
       },
       "NAME": {
-        "LABEL": "Your name",
-        "ERROR": "Please enter a valid name",
-        "PLACEHOLDER": "Please enter your name, this would be displayed in conversations"
+        "LABEL": "Your full name",
+        "ERROR": "Please enter a valid full name",
+        "PLACEHOLDER": "Please enter your full name"
+      },
+      "DISPLAY_NAME": {
+        "LABEL": "Display name",
+        "ERROR": "Please enter a valid display name",
+        "PLACEHOLDER": "Please enter a display name, this would be displayed in conversations"
       },
       "AVAILABILITY": {
         "LABEL": "Availability",

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -291,16 +291,9 @@ export default {
           inboxId: this.currentInboxId,
         });
         const {
-          data: { payload },
+          data: { payload: inboxMembers },
         } = response;
-        payload.forEach(el => {
-          const [item] = this.agentList.filter(
-            agent => agent.id === el.user_id
-          );
-          if (item) {
-            this.selectedAgents.push(item);
-          }
-        });
+        this.selectedAgents = inboxMembers;
       } catch (error) {
         console.log(error);
       }

app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue

@@ -26,6 +26,17 @@
               {{ $t('PROFILE_SETTINGS.FORM.NAME.ERROR') }}
             </span>
           </label>
+          <label :class="{ error: $v.displayName.$error }">
+            {{ $t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.LABEL') }}
+            <input
+              v-model="displayName"
+              type="text"
+              :placeholder="
+                $t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.PLACEHOLDER')
+              "
+              @input="$v.displayName.$touch"
+            />
+          </label>
           <label :class="{ error: $v.email.$error }">
             {{ $t('PROFILE_SETTINGS.FORM.EMAIL.LABEL') }}
             <input
@@ -130,6 +141,7 @@ export default {
       avatarFile: '',
       avatarUrl: '',
       name: '',
+      displayName: '',
       email: '',
       password: '',
       passwordConfirmation: '',
@@ -141,6 +153,7 @@ export default {
     name: {
       required,
     },
+    displayName: {},
     email: {
       required,
       email,
@@ -188,6 +201,7 @@ export default {
       this.email = this.currentUser.email;
       this.avatarUrl = this.currentUser.avatar_url;
       this.availability = this.currentUser.availability_status;
+      this.displayName = this.currentUser.display_name;
     },
     async updateUser() {
       this.$v.$touch();
@@ -203,6 +217,7 @@ export default {
           email: this.email,
           avatar: this.avatarFile,
           password: this.password,
+          displayName: this.displayName,
           availability: this.availability,
           password_confirmation: this.passwordConfirmation,
         });

app/javascript/dashboard/store/modules/conversations/getters.js

@@ -21,7 +21,7 @@ const getters = {
   getMineChats(_state) {
     const currentUserID = authAPI.getCurrentUser().id;
     return _state.allConversations.filter(chat =>
-      chat.meta.assignee === null
+      !chat.meta.assignee
         ? false
         : chat.status === _state.chatStatusFilter &&
           chat.meta.assignee.id === currentUserID
@@ -29,8 +29,7 @@ const getters = {
   },
   getUnAssignedChats(_state) {
     return _state.allConversations.filter(
-      chat =>
-        chat.meta.assignee === null && chat.status === _state.chatStatusFilter
+      chat => !chat.meta.assignee && chat.status === _state.chatStatusFilter
     );
   },
   getAllStatusChats(_state) {