feat: Update agent and team multi-select with new multi-select dropdown (#2516)

* feat: Update agent/team multiselect styles

* Component name fixes

* Adds key control for our multiselect dropdown and component name spell fix

* Minor fixes

* Review fixes

* Minor fixes

* Minor fixes

* Review fixes

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

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

@@ -91,6 +91,23 @@
     },
     "SEARCH": {
       "NO_RESULTS": "No results found."
+    },
+    "MULTI_SELECTOR": {
+      "PLACEHOLDER": "None",
+      "TITLE": {
+        "AGENT": "Select agent",
+        "TEAM": "Select team"
+      },
+      "SEARCH": {
+        "NO_RESULTS": {
+          "AGENT": "No agents found",
+          "TEAM": "No teams found"
+        },
+        "PLACEHOLDER": {
+          "AGENT": "Search agents",
+          "TEAM": "Search teams"
+        }
+      }
     }
   }
 }

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

@@ -24,27 +24,21 @@
             </woot-button>
           </template>
         </contact-details-item>
-        <multiselect
-          v-model="assignedAgent"
+        <multiselect-dropdown
           :options="agentsList"
-          label="name"
-          track-by="id"
-          deselect-label=""
-          select-label=""
-          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>
+          :selected-item="assignedAgent"
+          :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.AGENT')"
+          :multiselector-placeholder="
+            $t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')
+          "
+          :no-search-result="
+            $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.AGENT')
+          "
+          :input-placeholder="
+            $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.AGENT')
+          "
+          @click="onClickAssignAgent"
+        />
       </div>
       <div class="multiselect-wrap--small">
         <contact-details-item
@@ -52,19 +46,21 @@
           icon="ion-ios-people"
           emoji="🎢"
         />
-        <multiselect
-          v-model="assignedTeam"
+        <multiselect-dropdown
           :options="teamsList"
-          label="name"
-          track-by="id"
-          deselect-label=""
-          select-label=""
-          selected-label=""
-          :placeholder="$t('CONVERSATION_SIDEBAR.SELECT.PLACEHOLDER')"
-          :allow-empty="true"
-        >
-          <span slot="noResult">{{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}</span>
-        </multiselect>
+          :selected-item="assignedTeam"
+          :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.TEAM')"
+          :multiselector-placeholder="
+            $t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')
+          "
+          :no-search-result="
+            $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.TEAM')
+          "
+          :input-placeholder="
+            $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.TEAM')
+          "
+          @click="onClickAssignTeam"
+        />
       </div>
     </div>
     <conversation-labels :conversation-id="conversationId" />
@@ -138,7 +134,7 @@ 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 MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 
 import flag from 'country-code-emoji';
 
@@ -149,7 +145,7 @@ export default {
     ContactDetailsItem,
     ContactInfo,
     ConversationLabels,
-    AvailabilityStatusBadge,
+    MultiselectDropdown,
   },
   mixins: [alertMixin, agentMixin],
   props: {
@@ -330,6 +326,21 @@ export default {
       };
       this.assignedAgent = selfAssign;
     },
+    onClickAssignAgent(selectedItem) {
+      if (this.assignedAgent && this.assignedAgent.id === selectedItem.id) {
+        this.assignedAgent = null;
+      } else {
+        this.assignedAgent = selectedItem;
+      }
+    },
+
+    onClickAssignTeam(selectedItemTeam) {
+      if (this.assignedTeam && this.assignedTeam.id === selectedItemTeam.id) {
+        this.assignedTeam = null;
+      } else {
+        this.assignedTeam = selectedItemTeam;
+      }
+    },
   },
 };
 </script>