enhancement: Show agent availability status in conversation assignee select list (#2122)

* show agent status on conversation assignation

* add agent status in contact sidebar

* availability status badge component

* review fixes

* review fixes

* chore: Fixes issue with status badge (#2136)

* add empty case in agent list

* Chore: Availability badge shape issue. #2140

Co-authored-by: Nithin David <webofnithin@gmail.com>
Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

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

@@ -1,10 +1,7 @@
 <template>
   <div class="status">
     <div class="status-view">
-      <div
+      <availability-status-badge :status="currentUserAvailabilityStatus" />
-        :class="`status-badge status-badge__${currentUserAvailabilityStatus}`"
-      />
-
       <div class="status-view--title">
         {{ availabilityDisplayLabel }}
       </div>
@@ -28,7 +25,7 @@
                 :disabled="status.disabled"
                 @click="changeAvailabilityStatus(status.value)"
               >
-                <span :class="`status-badge status-badge__${status.value}`" />
+                <availability-status-badge :status="status.value" />
                 {{ status.label }}
               </button>
             </woot-dropdown-item>
@@ -48,6 +45,7 @@ import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import AvailabilityStatusBadge from '../widgets/conversation/AvailabilityStatusBadge';
 
 const AVAILABILITY_STATUS_KEYS = ['online', 'busy', 'offline'];
 
@@ -55,6 +53,7 @@ export default {
   components: {
     WootDropdownMenu,
     WootDropdownItem,
+    AvailabilityStatusBadge,
   },
 
   mixins: [clickaway],
@@ -147,26 +146,6 @@ export default {
   }
 }
 
-.status-badge {
-  width: var(--space-one);
-  height: var(--space-one);
-  margin-right: var(--space-micro);
-  display: inline-block;
-  border-radius: 50%;
-
-  &__online {
-    background: var(--g-400);
-  }
-
-  &__offline {
-    background: var(--b-600);
-  }
-
-  &__busy {
-    background: var(--y-700);
-  }
-}
-
 .status-change {
   .dropdown-pane {
     top: -132px;

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

@@ -0,0 +1,29 @@
+<template>
+  <div :class="`status-badge status-badge__${status}`" />
+</template>
+<script>
+export default {
+  props: {
+    status: { type: String, default: '' },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import '~dashboard/assets/scss/variables';
+.status-badge {
+  width: var(--space-one);
+  height: var(--space-one);
+  margin-right: var(--space-micro);
+  display: inline-block;
+  border-radius: 50%;
+  &__online {
+    background: var(--g-400);
+  }
+  &__offline {
+    background: var(--b-600);
+  }
+  &__busy {
+    background: var(--y-700);
+  }
+}
+</style>

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

@@ -46,6 +46,14 @@
           @select="assignAgent"
           @remove="removeAgent"
         >
+          <template slot="option" slot-scope="props">
+            <div class="option__desc">
+              <availability-status-badge
+                :status="props.option.availability_status"
+              />
+              <span class="option__title">{{ props.option.name }}</span>
+            </div>
+          </template>
           <span slot="noResult">{{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}</span>
         </multiselect>
       </div>
@@ -57,11 +65,13 @@
 import { mapGetters } from 'vuex';
 import MoreActions from './MoreActions';
 import Thumbnail from '../Thumbnail';
+import AvailabilityStatusBadge from '../conversation/AvailabilityStatusBadge';
 
 export default {
   components: {
     MoreActions,
     Thumbnail,
+    AvailabilityStatusBadge,
   },
 
   props: {
@@ -126,7 +136,6 @@ export default {
           bus.$emit('newToastMessage', this.$t('CONVERSATION.CHANGE_AGENT'));
         });
     },
-
     removeAgent() {},
   },
 };
@@ -142,4 +151,17 @@ export default {
 .conv-header {
   flex: 0 0 var(--space-jumbo);
 }
+
+.option__desc {
+  display: flex;
+  align-items: center;
+}
+
+.option__desc {
+  &::v-deep .status-badge {
+    margin-right: var(--space-small);
+    min-width: 0;
+    flex-shrink: 0;
+  }
+}
 </style>

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -22,7 +22,17 @@
           selected-label=""
           :placeholder="$t('CONVERSATION_SIDEBAR.SELECT.PLACEHOLDER')"
           :allow-empty="true"
+        >
+          <template slot="option" slot-scope="props">
+            <div class="option__desc">
+              <availability-status-badge
+                :status="props.option.availability_status"
               />
+              <span class="option__title">{{ props.option.name }}</span>
+            </div>
+          </template>
+          <span slot="noResult">{{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}</span>
+        </multiselect>
       </div>
       <div class="multiselect-wrap--small">
         <label class="multiselect__label">
@@ -39,6 +49,7 @@
           :placeholder="$t('CONVERSATION_SIDEBAR.SELECT.PLACEHOLDER')"
           :allow-empty="true"
         />
+        <span slot="noResult">{{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}</span>
       </div>
     </div>
     <div v-if="browser.browser_name" class="conversation--details">
@@ -111,6 +122,8 @@ import ContactDetailsItem from './ContactDetailsItem.vue';
 import ContactInfo from './contact/ContactInfo';
 import ConversationLabels from './labels/LabelBox.vue';
 import ContactCustomAttributes from './ContactCustomAttributes';
+import AvailabilityStatusBadge from 'dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue';
+
 import flag from 'country-code-emoji';
 
 export default {
@@ -120,6 +133,7 @@ export default {
     ContactDetailsItem,
     ContactInfo,
     ConversationLabels,
+    AvailabilityStatusBadge,
   },
   mixins: [alertMixin],
   props: {
@@ -350,4 +364,8 @@ export default {
 .multiselect__label {
   margin-bottom: var(--space-smaller);
 }
+.option__desc {
+  display: flex;
+  align-items: center;
+}
 </style>