feat: Ability to add label for contact page (#2350)

* feat: Ability to add label for contact page

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>

app/javascript/dashboard/components/widgets/LabelSelector.stories.js

@@ -0,0 +1,67 @@
+import { action } from '@storybook/addon-actions';
+import LabelSelector from './LabelSelector';
+
+export default {
+  title: 'Components/Label/Contact Label',
+  component: LabelSelector,
+  argTypes: {
+    contactId: {
+      control: {
+        type: 'text ,number',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { LabelSelector },
+  template:
+    '<label-selector v-bind="$props" @add="onAdd" @remove="onRemove"></label-selector>',
+});
+
+export const ContactLabel = Template.bind({});
+ContactLabel.args = {
+  onAdd: action('Added'),
+  onRemove: action('Removed'),
+  allLabels: [
+    {
+      id: '1',
+      title: 'sales',
+      description: '',
+      color: '#0a5dd1',
+    },
+    {
+      id: '2',
+      title: 'refund',
+      description: '',
+      color: '#8442f5',
+    },
+    {
+      id: '3',
+      title: 'testing',
+      description: '',
+      color: '#f542f5',
+    },
+    {
+      id: '4',
+      title: 'scheduled',
+      description: '',
+      color: '#42d1f5',
+    },
+  ],
+  savedLabels: [
+    {
+      id: '2',
+      title: 'refund',
+      description: '',
+      color: '#8442f5',
+    },
+    {
+      id: '4',
+      title: 'scheduled',
+      description: '',
+      color: '#42d1f5',
+    },
+  ],
+};

app/javascript/dashboard/components/widgets/LabelSelector.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <h6 class="text-block-title">
+      <i class="title-icon ion-pricetags" />
+      {{ $t('CONTACT_PANEL.LABELS.CONTACT.TITLE') }}
+    </h6>
+    <div v-on-clickaway="closeDropdownLabel" class="label-wrap">
+      <add-label @add="toggleLabels" />
+      <woot-label
+        v-for="label in savedLabels"
+        :key="label.id"
+        :title="label.title"
+        :description="label.description"
+        :show-close="true"
+        :bg-color="label.color"
+        @click="removeItem"
+      />
+      <div class="dropdown-wrap">
+        <div
+          :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
+          class="dropdown-pane"
+        >
+          <label-dropdown
+            v-if="showSearchDropdownLabel"
+            :account-labels="allLabels"
+            :selected-labels="selectedLabels"
+            @add="addItem"
+            @remove="removeItem"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import AddLabel from 'shared/components/ui/dropdown/AddLabel';
+import LabelDropdown from 'shared/components/ui/label/LabelDropdown';
+import { mixin as clickaway } from 'vue-clickaway';
+
+export default {
+  components: {
+    AddLabel,
+    LabelDropdown,
+  },
+
+  mixins: [clickaway],
+
+  props: {
+    allLabels: {
+      type: Array,
+      default: () => [],
+    },
+    savedLabels: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  data() {
+    return {
+      showSearchDropdownLabel: false,
+    };
+  },
+
+  computed: {
+    selectedLabels() {
+      return this.savedLabels.map(label => label.title);
+    },
+  },
+
+  methods: {
+    addItem(label) {
+      this.$emit('add', label);
+    },
+
+    removeItem(label) {
+      this.$emit('remove', label);
+    },
+
+    toggleLabels() {
+      this.showSearchDropdownLabel = !this.showSearchDropdownLabel;
+    },
+
+    closeDropdownLabel() {
+      this.showSearchDropdownLabel = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.title-icon {
+  margin-right: var(--space-smaller);
+}
+
+.label-wrap {
+  position: relative;
+  margin-left: var(--space-two);
+  line-height: var(--space-medium);
+
+  .dropdown-wrap {
+    display: flex;
+    position: absolute;
+    margin-right: var(--space-medium);
+    top: var(--space-medium);
+    width: 100%;
+    left: -1px;
+
+    .dropdown-pane {
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>