feat: Creates new component for multiselect. (#2446)

.codeclimate.yml

@@ -34,3 +34,4 @@ exclude_patterns:
   - "stories/**/*"
   - "**/*.stories.js"
   - "**/stories/"
+  - "app/javascript/**/*.stories.js"

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -6,6 +6,10 @@ $default-button-height: 4.0rem;
   height: $default-button-height;
   margin-bottom: 0;
 
+  .button__content {
+    width: 100%;
+  }
+
   .spinner {
     padding: 0 var(--space-small);
   }

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

@@ -90,7 +90,7 @@
       }
     },
     "SEARCH": {
-      "NO_RESULTS": "No agents found."
+      "NO_RESULTS": "No results found."
     }
   }
 }

app/javascript/shared/components/ui/MultiselectDropdown.stories.js

@@ -0,0 +1,65 @@
+import { action } from '@storybook/addon-actions';
+import Dropdown from './MutiselectDropdown';
+
+export default {
+  title: 'Components/Dropdown/Multiselect Dropdown',
+  component: Dropdown,
+  argTypes: {
+    options: {
+      control: {
+        type: 'object',
+      },
+    },
+    selectedItem: {
+      control: {
+        type: 'object',
+      },
+    },
+    multiselectorTitle: {
+      control: {
+        type: 'text',
+      },
+    },
+    multiselectorPlaceholder: {
+      control: {
+        type: 'text',
+      },
+    },
+    noSearchResult: {
+      control: {
+        type: 'text',
+      },
+    },
+    inputPlaceholder: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Dropdown },
+  template: '<dropdown v-bind="$props" @click="onClick"></dropdown>',
+});
+
+export const MultiselectDropdown = Template.bind({});
+MultiselectDropdown.args = {
+  onClick: action('Opened'),
+  options: [
+    {
+      id: 1,
+      availability_status: 'online',
+      name: 'James Philip',
+      thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
+    },
+  ],
+
+  selectedItem: {
+    id: 1,
+    availability_status: 'online',
+    name: 'James Philip',
+    thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
+  },
+};

app/javascript/shared/components/ui/MultiselectDropdownItems.stories.js

@@ -0,0 +1,67 @@
+import { action } from '@storybook/addon-actions';
+import DropdownItems from './MultiselectDropdownItems';
+
+export default {
+  title: 'Components/Dropdown/Multiselect Dropdown Items',
+  component: DropdownItems,
+  argTypes: {
+    options: {
+      control: {
+        type: 'object',
+      },
+    },
+    selectedItem: {
+      control: {
+        type: 'object',
+      },
+    },
+    inputPlaceholder: {
+      control: {
+        type: 'text',
+      },
+    },
+    noSearchResult: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { DropdownItems },
+  template:
+    '<dropdown-items v-bind="$props" @click="onClick"></dropdown-items>',
+});
+
+export const MultiselectDropdownItems = Template.bind({});
+MultiselectDropdownItems.args = {
+  onClick: action('Added'),
+  options: [
+    {
+      id: '0',
+      name: 'None',
+      thumbnail: '',
+    },
+    {
+      id: '1',
+      name: 'James Philip',
+      availability_status: 'online',
+      role: 'administrator',
+      thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
+    },
+    {
+      id: '2',
+      name: 'Support Team',
+      thumbnail: '',
+    },
+    {
+      id: '3',
+      name: 'Agent',
+      thumbnail: '',
+    },
+  ],
+
+  selectedItem: { id: '1' },
+};

app/javascript/shared/components/ui/MultiselectDropdownItems.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="dropdown-wrap">
+    <div class="search-wrap">
+      <input
+        ref="searchbar"
+        v-model="search"
+        type="text"
+        class="search-input"
+        autofocus="true"
+        :placeholder="inputPlaceholder"
+      />
+    </div>
+    <div class="list-scroll-container">
+      <div class="dropdown-list">
+        <woot-dropdown-menu>
+          <woot-dropdown-item
+            v-for="option in filteredOptions"
+            :key="option.id"
+          >
+            <woot-button
+              class="dropdown-item"
+              variant="clear"
+              :class="{
+                active: option.id === (selectedItem && selectedItem.id),
+              }"
+              @click="() => onclick(option)"
+            >
+              <div class="user-wrap">
+                <Thumbnail
+                  :src="option.thumbnail"
+                  size="24px"
+                  :username="option.name"
+                  :status="option.availability_status"
+                />
+                <div class="name-wrap">
+                  <span
+                    class="name text-truncate text-block-title"
+                    :title="option.name"
+                  >
+                    {{ option.name }}
+                  </span>
+                  <i
+                    v-if="option.id === (selectedItem && selectedItem.id)"
+                    class="icon ion-checkmark-round"
+                  />
+                </div>
+              </div>
+            </woot-button>
+          </woot-dropdown-item>
+        </woot-dropdown-menu>
+        <h4 v-if="noResult" class="no-result text-truncate text-block-title">
+          {{ noSearchResult }}
+        </h4>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+export default {
+  components: {
+    WootDropdownItem,
+    WootDropdownMenu,
+    Thumbnail,
+  },
+
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    selectedItem: {
+      type: Object,
+      default: () => ({}),
+    },
+    inputPlaceholder: {
+      type: String,
+      default: 'Search',
+    },
+    noSearchResult: {
+      type: String,
+      default: 'No results found',
+    },
+  },
+
+  data() {
+    return {
+      search: '',
+    };
+  },
+
+  computed: {
+    filteredOptions() {
+      return this.options.filter(option => {
+        return option.name.toLowerCase().includes(this.search.toLowerCase());
+      });
+    },
+    noResult() {
+      return this.filteredOptions.length === 0 && this.search !== '';
+    },
+  },
+  mounted() {
+    this.focusInput();
+  },
+  methods: {
+    onclick(option) {
+      this.$emit('click', option);
+    },
+
+    focusInput() {
+      this.$refs.searchbar.focus();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dropdown-wrap {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  max-height: 16rem;
+}
+
+.search-wrap {
+  margin-bottom: var(--space-small);
+  flex: 0 0 auto;
+  max-height: var(--space-large);
+}
+
+.search-input {
+  margin: 0;
+  width: 100%;
+  border: 1px solid transparent;
+  height: var(--space-large);
+  font-size: var(--font-size-small);
+  padding: var(--space-small);
+  background-color: var(--color-background);
+
+  &:focus {
+    border: 1px solid var(--w-500);
+  }
+}
+
+.list-scroll-container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+.dropdown-list {
+  width: 100%;
+  max-height: 12rem;
+}
+
+.dropdown-item {
+  justify-content: space-between;
+  width: 100%;
+
+  &.active {
+    font-weight: var(--font-weight-bold);
+  }
+}
+
+.user-wrap {
+  display: flex;
+  align-items: center;
+}
+
+.name-wrap {
+  display: flex;
+  justify-content: space-between;
+  min-width: 0;
+  width: 100%;
+}
+
+.name {
+  line-height: var(--space-normal);
+  margin: 0 var(--space-small);
+}
+
+.icon {
+  margin-left: var(--space-smaller);
+}
+
+.no-result {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: var(--space-small) var(--space-one);
+}
+</style>

app/javascript/shared/components/ui/MutiselectDropdown.vue

@@ -0,0 +1,165 @@
+<template>
+  <div v-on-clickaway="onCloseDropdown" class="selector-wrap">
+    <woot-button
+      variant="hollow"
+      color-scheme="secondary"
+      :v-model="selectedItem"
+      class="selector-button"
+      @click="toggleDropdown"
+    >
+      <div class="selector-user-wrap">
+        <Thumbnail
+          v-if="hasValue"
+          :src="selectedItem.thumbnail"
+          size="24px"
+          :status="selectedItem.availability_status"
+          :badge="selectedItem.channel"
+          :username="selectedItem.name"
+        />
+        <div class="selector-name-wrap">
+          <h4
+            v-if="!hasValue"
+            class="not-selected text-ellipsis text-block-title"
+          >
+            {{ multiselectorPlaceholder }}
+          </h4>
+          <h4
+            v-else
+            class="selector-name text-truncate text-block-title"
+            :title="selectedItem.name"
+          >
+            {{ selectedItem.name }}
+          </h4>
+          <i v-if="showSearchDropdown" class="icon ion-chevron-up" />
+          <i v-else class="icon ion-chevron-down" />
+        </div>
+      </div>
+    </woot-button>
+    <div
+      :class="{ 'dropdown-pane--open': showSearchDropdown }"
+      class="dropdown-pane"
+    >
+      <h4 class="text-block-title text-truncate">
+        {{ multiselectorTitle }}
+      </h4>
+      <multiselect-dropdown-items
+        v-if="showSearchDropdown"
+        :options="options"
+        :selected-item="selectedItem"
+        :input-placeholder="inputPlaceholder"
+        :no-search-result="noSearchResult"
+        @click="onClickSelectItem"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems';
+import { mixin as clickaway } from 'vue-clickaway';
+export default {
+  components: {
+    Thumbnail,
+    MultiselectDropdownItems,
+  },
+  mixins: [clickaway],
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    selectedItem: {
+      type: Object,
+      default: () => ({}),
+    },
+    multiselectorTitle: {
+      type: String,
+      default: 'Select',
+    },
+    multiselectorPlaceholder: {
+      type: String,
+      default: 'None',
+    },
+    noSearchResult: {
+      type: String,
+      default: 'No results found',
+    },
+    inputPlaceholder: {
+      type: String,
+      default: 'Search',
+    },
+  },
+  data() {
+    return {
+      showSearchDropdown: false,
+    };
+  },
+  computed: {
+    hasValue() {
+      if (this.selectedItem && this.selectedItem.id) {
+        return true;
+      }
+      return false;
+    },
+  },
+  methods: {
+    toggleDropdown() {
+      this.showSearchDropdown = !this.showSearchDropdown;
+    },
+
+    onCloseDropdown() {
+      this.showSearchDropdown = false;
+    },
+
+    onClickSelectItem(value) {
+      this.$emit('click', value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.selector-wrap {
+  position: relative;
+  width: 100%;
+  margin-right: var(--space-one);
+  margin-bottom: var(--space-small);
+
+  .selector-button {
+    width: 100%;
+    border: 1px solid var(--color-border);
+
+    &:hover {
+      border: 1px solid var(--color-border);
+    }
+  }
+
+  .selector-user-wrap {
+    display: flex;
+  }
+
+  .selector-name-wrap {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-width: 0;
+    align-items: center;
+  }
+
+  .not-selected {
+    margin: 0 var(--space-small) 0 0;
+  }
+
+  .selector-name {
+    align-items: center;
+    margin: 0 var(--space-small);
+  }
+
+  .dropdown-pane {
+    box-sizing: border-box;
+    top: 4.2rem;
+    width: 100%;
+  }
+}
+</style>