feat: Add contact label filter (#2454)

Co-authored-by: Sojan Jose <sojan@pepalo.com>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue

@@ -14,6 +14,10 @@
       v-if="showSearchEmptyState"
       :title="$t('CONTACTS_PAGE.LIST.404')"
     />
+    <empty-state
+      v-else-if="!isLoading && !contacts.length"
+      :title="$t('CONTACTS_PAGE.LIST.NO_CONTACTS')"
+    />
     <div v-if="isLoading" class="contacts--loader">
       <spinner />
       <span>{{ $t('CONTACTS_PAGE.LIST.LOADING_MESSAGE') }}</span>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue

@@ -7,6 +7,7 @@
         this-selected-contact-id=""
         :on-input-search="onInputSearch"
         :on-toggle-create="onToggleCreate"
+        :header-title="label"
       />
       <contacts-table
         :contacts="records"
@@ -51,6 +52,9 @@ export default {
     ContactInfoPanel,
     CreateContact,
   },
+  props: {
+    label: { type: String, default: '' },
+  },
   data() {
     return {
       searchQuery: '',
@@ -92,6 +96,11 @@ export default {
         : DEFAULT_PAGE;
     },
   },
+  watch: {
+    label() {
+      this.fetchContacts(DEFAULT_PAGE);
+    },
+  },
   mounted() {
     this.fetchContacts(this.pageParameter);
   },
@@ -116,7 +125,11 @@ export default {
     },
     fetchContacts(page) {
       this.updatePageParam(page);
-      const requestParams = { page, sortAttr: this.getSortAttribute() };
+      const requestParams = {
+        page,
+        sortAttr: this.getSortAttribute(),
+        label: this.label,
+      };
       if (!this.searchQuery) {
         this.$store.dispatch('contacts/get', requestParams);
       } else {

app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue

@@ -3,7 +3,7 @@
     <div class="table-actions-wrap">
       <div class="left-aligned-wrap">
         <h1 class="page-title">
-          {{ $t('CONTACTS_PAGE.HEADER') }}
+          {{ headerTitle ? `#${headerTitle}` : $t('CONTACTS_PAGE.HEADER') }}
         </h1>
       </div>
       <div class="right-aligned-wrap">
@@ -42,6 +42,10 @@
 export default {
   components: {},
   props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
     searchQuery: {
       type: String,
       default: '',

app/javascript/dashboard/routes/dashboard/contacts/routes.js

@@ -10,6 +10,15 @@ export const routes = [
     roles: ['administrator', 'agent'],
     component: ContactsView,
   },
+  {
+    path: frontendURL('accounts/:accountId/labels/:label/contacts'),
+    name: 'contacts_labels_dashboard',
+    roles: ['administrator', 'agent'],
+    component: ContactsView,
+    props: route => {
+      return { label: route.params.label };
+    },
+  },
   {
     path: frontendURL('accounts/:accountId/contacts/:contactId'),
     name: 'contacts_dashboard_manage',

app/javascript/dashboard/routes/dashboard/settings/labels/specs/validationMixin.spec.js

@@ -26,11 +26,10 @@ describe('validationMixin', () => {
       i18n: i18nConfig,
       localVue,
       data() {
-        return {
-          title: 'sales',
-        };
+        return { title: 'sales' };
       },
     });
+    wrapper.vm.$v.$touch();
     expect(wrapper.vm.getLabelTitleErrorMessage).toBe('');
   });
   it('it should return label required error message if empty name is passed', async () => {
@@ -38,11 +37,10 @@ describe('validationMixin', () => {
       i18n: i18nConfig,
       localVue,
       data() {
-        return {
-          title: '',
-        };
+        return { title: '' };
       },
     });
+    wrapper.vm.$v.$touch();
     expect(wrapper.vm.getLabelTitleErrorMessage).toBe('Label name is required');
   });
   it('it should return label minimum length error message if one charceter label name is passed', async () => {
@@ -50,11 +48,10 @@ describe('validationMixin', () => {
       i18n: i18nConfig,
       localVue,
       data() {
-        return {
-          title: 's',
-        };
+        return { title: 's' };
       },
     });
+    wrapper.vm.$v.$touch();
     expect(wrapper.vm.getLabelTitleErrorMessage).toBe(
       'Minimum length 2 is required'
     );
@@ -64,11 +61,10 @@ describe('validationMixin', () => {
       i18n: i18nConfig,
       localVue,
       data() {
-        return {
-          title: 'sales enquiry',
-        };
+        return { title: 'sales enquiry' };
       },
     });
+    wrapper.vm.$v.$touch();
     expect(wrapper.vm.getLabelTitleErrorMessage).toBe(
       'Only Alphabets, Numbers, Hyphen and Underscore are allowed'
     );

app/javascript/dashboard/routes/dashboard/settings/labels/validationMixin.js

@@ -1,16 +1,17 @@
 export default {
   computed: {
     getLabelTitleErrorMessage() {
-      if (!this.title) {
-        return this.$t('LABEL_MGMT.FORM.NAME.REQUIRED_ERROR');
+      let errorMessage = '';
+      if (!this.$v.title.$error) {
+        errorMessage = '';
+      } else if (!this.$v.title.required) {
+        errorMessage = this.$t('LABEL_MGMT.FORM.NAME.REQUIRED_ERROR');
+      } else if (!this.$v.title.minLength) {
+        errorMessage = this.$t('LABEL_MGMT.FORM.NAME.MINIMUM_LENGTH_ERROR');
+      } else if (!this.$v.title.validLabelCharacters) {
+        errorMessage = this.$t('LABEL_MGMT.FORM.NAME.VALID_ERROR');
       }
-      if (!this.$v.title.minLength) {
-        return this.$t('LABEL_MGMT.FORM.NAME.MINIMUM_LENGTH_ERROR');
-      }
-      if (!this.$v.title.validLabelCharacters) {
-        return this.$t('LABEL_MGMT.FORM.NAME.VALID_ERROR');
-      }
-      return '';
+      return errorMessage;
     },
   },
 };