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>
2021-07-29 17:44:37 +05:30 · 2021-07-29 17:44:37 +05:30 · f2b5e328bb
commit f2b5e328bb
parent 672e5874fb
5 changed files with 117 additions and 41 deletions
--- a/app/javascript/dashboard/i18n/locale/en/agentMgmt.json
+++ b/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"
+        }
+      }
    }
  }
 }
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/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>
--- a/app/javascript/shared/components/ui/MultiselectDropdown.stories.js
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.stories.js
@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import Dropdown from './MutiselectDropdown';
+import Dropdown from './MultiselectDropdown';

 export default {
  title: 'Components/Dropdown/Multiselect Dropdown',
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@ -1,5 +1,9 @@
 <template>
-  <div v-on-clickaway="onCloseDropdown" class="selector-wrap">
+  <div
+    v-on-clickaway="onCloseDropdown"
+    class="selector-wrap"
+    @keyup.esc="onCloseDropdown"
+  >
    <woot-button
      variant="hollow"
      color-scheme="secondary"
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
@ -11,14 +11,19 @@
      />
    </div>
    <div class="list-scroll-container">
-      <div class="dropdown-list">
+      <div
+        ref="multiselectDropdown"
+        class="multiselect-dropdown--list"
+        @keyup.up="onArrowUp"
+        @keyup.down="onArrowDown"
+      >
        <woot-dropdown-menu>
          <woot-dropdown-item
            v-for="option in filteredOptions"
            :key="option.id"
          >
            <woot-button
-              class="dropdown-item"
+              class="multiselect-dropdown--item"
              variant="clear"
              :class="{
                active: option.id === (selectedItem && selectedItem.id),
@ -102,17 +107,50 @@ export default {
      return this.filteredOptions.length === 0 && this.search !== '';
    },
  },
+
  mounted() {
    this.focusInput();
  },
+
  methods: {
    onclick(option) {
      this.$emit('click', option);
    },
-
    focusInput() {
      this.$refs.searchbar.focus();
    },
+    onArrowUp() {
+      const allDropdownItems = this.$refs.multiselectDropdown.querySelectorAll(
+        '.dropdown .multiselect-dropdown--item'
+      );
+      const focusedElement = this.$refs.multiselectDropdown.querySelector(
+        '.dropdown .multiselect-dropdown--item:focus'
+      );
+      const activeElementIndex = [...allDropdownItems].indexOf(focusedElement);
+      const lastElementIndex = allDropdownItems.length - 1;
+
+      if (activeElementIndex >= 1) {
+        allDropdownItems[activeElementIndex - 1].focus();
+      } else {
+        allDropdownItems[lastElementIndex].focus();
+      }
+    },
+    onArrowDown() {
+      const allDropdownItems = this.$refs.multiselectDropdown.querySelectorAll(
+        '.dropdown .multiselect-dropdown--item'
+      );
+      const focusedElement = this.$refs.multiselectDropdown.querySelector(
+        '.dropdown .multiselect-dropdown--item:focus'
+      );
+      const activeElementIndex = [...allDropdownItems].indexOf(focusedElement);
+      const lastElementIndex = allDropdownItems.length - 1;
+
+      if (activeElementIndex === lastElementIndex) {
+        allDropdownItems[0].focus();
+      } else {
+        allDropdownItems[activeElementIndex + 1].focus();
+      }
+    },
  },
 };
 </script>
@ -153,18 +191,24 @@ export default {
  overflow: auto;
 }

-.dropdown-list {
+.multiselect-dropdown--list {
  width: 100%;
  max-height: 12rem;
 }

-.dropdown-item {
+.multiselect-dropdown--item {
  justify-content: space-between;
  width: 100%;

  &.active {
+    background-color: var(--w-50);
+    color: var(--w-900);
    font-weight: var(--font-weight-bold);
  }
+
+  &:focus {
+    background-color: var(--color-background);
+  }
 }

 .user-wrap {