feat: Creates label dropdown component (#2220)

* Feat: Creates label dropdown component

* fixes conflicts in i18n

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>

app/javascript/dashboard/components/index.js

@@ -6,6 +6,8 @@ import Button from './ui/WootButton';
 import Code from './Code';
 import ColorPicker from './widgets/ColorPicker';
 import DeleteModal from './widgets/modal/DeleteModal.vue';
+import DropdownItem from 'shared/components/ui/dropdown/DropdownItem';
+import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
 import Input from './widgets/forms/Input.vue';
 import Label from './ui/Label';
 import LoadingState from './widgets/LoadingState';
@@ -26,6 +28,8 @@ const WootUIKit = {
   Code,
   ColorPicker,
   DeleteModal,
+  DropdownItem,
+  DropdownMenu,
   Input,
   LoadingState,
   Label,

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

@@ -28,11 +28,17 @@
         "INACTIVE_LABELS": "Labels available in the account",
         "REMOVE": "Click on X icon to remove the label",
         "ADD": "Click on + icon to add the label",
+        "ADD_BUTTON": "Add Labels",
         "UPDATE_BUTTON": "Update labels",
         "UPDATE_ERROR": "Couldn't update labels, try again."
       },
       "NO_LABELS_TO_ADD": "There are no more labels defined in the account.",
-      "NO_AVAILABLE_LABELS": "There are no labels added to this conversation."
+      "NO_AVAILABLE_LABELS": "There are no labels added to this conversation.",
+      "LABEL_SELECT": {
+        "TITLE": "Add Labels",
+        "PLACEHOLDER": "Search labels",
+        "NO_RESULT": "No labels found"
+      }
     },
     "MUTE_CONTACT": "Mute Conversation",
     "UNMUTE_CONTACT": "Unmute Conversation",

app/javascript/shared/components/ui/dropdown/DropdownItem.vue

@@ -27,11 +27,12 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.dropdown-menu__item ::v-deep {
+.dropdown-menu__item {
+  list-style: none;
+
+  ::v-deep {
     a,
     .button {
-    font-weight: var(--font-size-normal);
-    font-size: var(--font-size-small);
       width: 100%;
       text-align: left;
       white-space: nowrap;
@@ -43,4 +44,5 @@ export default {
       }
     }
   }
+}
 </style>

app/javascript/shared/components/ui/label/LabelDropdown.stories.js

@@ -0,0 +1,58 @@
+import { action } from '@storybook/addon-actions';
+import LabelDropdown from './LabelDropdown';
+
+export default {
+  title: 'Components/Label/Dropdown',
+  component: LabelDropdown,
+  argTypes: {
+    conversationId: {
+      control: {
+        type: 'text',
+      },
+    },
+    accountLabels: {
+      defaultValue: [
+        {
+          color: '#555',
+          description: '',
+          id: 1,
+          title: 'sales',
+        },
+        {
+          color: '#c242f5',
+          description: '',
+          id: 1,
+          title: 'business',
+        },
+        {
+          color: '#4287f5',
+          description: '',
+          id: 1,
+          title: 'testing',
+        },
+      ],
+      control: {
+        type: 'object',
+      },
+    },
+    selectedLabels: {
+      defaultValue: 'sales, testing',
+      control: {
+        type: 'object',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { LabelDropdown },
+  template:
+    '<label-dropdown v-bind="$props" @add="onAdd" @remove="onRemove"></label-dropdown>',
+});
+
+export const Dropdown = Template.bind({});
+Dropdown.args = {
+  onAdd: action('added'),
+  onRemove: action('removed'),
+};

app/javascript/shared/components/ui/label/LabelDropdown.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="dropdown-search-wrap">
+    <h4 class="text-block-title">
+      {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
+    </h4>
+    <div class="search-wrap">
+      <input
+        ref="searchbar"
+        v-model="search"
+        type="text"
+        class="search-input"
+        autofocus="true"
+        :placeholder="$t('CONTACT_PANEL.LABELS.LABEL_SELECT.PLACEHOLDER')"
+      />
+    </div>
+    <div class="list-wrap">
+      <div class="list">
+        <woot-dropdown-menu>
+          <label-dropdown-item
+            v-for="label in filteredActiveLabels"
+            :key="label.title"
+            :title="label.title"
+            :color="label.color"
+            :selected="selectedLabels.includes(label.title)"
+            @click="onAddRemove(label)"
+          />
+        </woot-dropdown-menu>
+        <div v-if="noResult" class="no-result">
+          {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.NO_RESULT') }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import LabelDropdownItem from './LabelDropdownItem';
+export default {
+  components: {
+    LabelDropdownItem,
+  },
+
+  props: {
+    conversationId: {
+      type: [String, Number],
+      required: true,
+    },
+    accountLabels: {
+      type: Array,
+      default: () => [],
+    },
+    selectedLabels: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  data() {
+    return {
+      search: '',
+    };
+  },
+
+  computed: {
+    filteredActiveLabels() {
+      return this.accountLabels.filter(label => {
+        return label.title.toLowerCase().includes(this.search.toLowerCase());
+      });
+    },
+
+    noResult() {
+      return this.filteredActiveLabels.length === 0 && this.search !== '';
+    },
+  },
+
+  mounted() {
+    this.focusInput();
+  },
+
+  methods: {
+    focusInput() {
+      this.$refs.searchbar.focus();
+    },
+
+    updateLabels(label) {
+      this.$emit('update', label);
+    },
+
+    onAdd(label) {
+      this.$emit('add', label);
+    },
+
+    onRemove(label) {
+      this.$emit('remove', label);
+    },
+
+    onAddRemove(label) {
+      if (this.selectedLabels.includes(label.title)) {
+        this.onRemove(label.title);
+      } else {
+        this.onAdd(label);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dropdown-search-wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: 20rem;
+
+  .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);
+    }
+
+    input:focus {
+      border: 1px solid var(--w-500);
+    }
+  }
+
+  .list-wrap {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex: 1 1 auto;
+    overflow: auto;
+
+    .list {
+      width: 100%;
+    }
+
+    .no-result {
+      display: flex;
+      justify-content: center;
+      color: var(--s-700);
+      padding: var(--space-smaller) var(--space-one);
+      font-weight: var(--font-weight-medium);
+      font-size: var(--font-size-small);
+    }
+  }
+}
+</style>

app/javascript/shared/components/ui/label/LabelDropdownItem.stories.js

@@ -0,0 +1,39 @@
+import { action } from '@storybook/addon-actions';
+import LabelDropdownItem from './LabelDropdownItem';
+
+export default {
+  title: 'Components/Label/Item',
+  component: LabelDropdownItem,
+  argTypes: {
+    title: {
+      defaultValue: 'sales',
+      control: {
+        type: 'text',
+      },
+    },
+    color: {
+      defaultValue: '#555',
+      control: {
+        type: 'text',
+      },
+    },
+    selected: {
+      defaultValue: true,
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { LabelDropdownItem },
+  template:
+    '<label-dropdown-item v-bind="$props" @click="onClick"></label-dropdown-item>',
+});
+
+export const item = Template.bind({});
+item.args = {
+  onClick: action('Selected'),
+};

app/javascript/shared/components/ui/label/LabelDropdownItem.vue

@@ -0,0 +1,82 @@
+<template>
+  <woot-dropdown-item>
+    <div class="item-wrap">
+      <woot-button variant="clear" @click="onClick">
+        <div class="button-wrap">
+          <div class="name-label-wrap">
+            <div
+              v-if="color"
+              class="label-color--display"
+              :style="{ backgroundColor: color }"
+            />
+            <span>{{ title }}</span>
+          </div>
+          <i v-if="selected" class="icon ion-checkmark-round" />
+        </div>
+      </woot-button>
+    </div>
+  </woot-dropdown-item>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click', this.title);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.item-wrap {
+  display: flex;
+
+  .button-wrap {
+    display: flex;
+    justify-content: space-between;
+
+    &.active {
+      display: flex;
+      font-weight: var(--font-weight-bold);
+      color: var(--w-700);
+    }
+
+    .name-label-wrap {
+      display: flex;
+    }
+
+    .label-color--display {
+      margin-right: var(--space-small);
+    }
+
+    .icon {
+      font-size: var(--font-size-small);
+    }
+  }
+
+  .label-color--display {
+    border-radius: var(--border-radius-normal);
+    height: var(--space-slab);
+    margin-right: var(--space-smaller);
+    margin-top: var(--space-micro);
+    min-width: var(--space-slab);
+    width: var(--space-slab);
+  }
+}
+</style>