feat: Contact Exports (#7258)

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

@@ -5,6 +5,7 @@
         :search-query="searchQuery"
         :segments-id="segmentsId"
         :on-search-submit="onSearchSubmit"
+        :on-export-submit="onExportSubmit"
         this-selected-contact-id=""
         :on-input-search="onInputSearch"
         :on-toggle-create="onToggleCreate"
@@ -92,6 +93,7 @@ import filterQueryGenerator from '../../../../helper/filterQueryGenerator';
 import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews';
 import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
+import alertMixin from 'shared/mixins/alertMixin';
 import countries from 'shared/constants/countries.js';
 import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
 
@@ -110,6 +112,7 @@ export default {
     AddCustomViews,
     DeleteCustomViews,
   },
+  mixins: [alertMixin],
   props: {
     label: { type: String, default: '' },
     segmentsId: {
@@ -386,6 +389,16 @@ export default {
       this.$store.dispatch('contacts/clearContactFilters');
       this.fetchContacts(this.pageParameter);
     },
+    onExportSubmit() {
+      try {
+        this.$store.dispatch('contacts/export');
+        this.showAlert(this.$t('EXPORT_CONTACTS.SUCCESS_MESSAGE'));
+      } catch (error) {
+        this.showAlert(
+          error.message || this.$t('EXPORT_CONTACTS.ERROR_MESSAGE')
+        );
+      }
+    },
     setParamsForEditSegmentModal() {
       // Here we are setting the params for edit segment modal to show the existing values.
 

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

@@ -87,6 +87,16 @@
         >
           {{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
         </woot-button>
+
+        <woot-button
+          v-if="isAdmin"
+          color-scheme="info"
+          icon="upload"
+          class="clear"
+          @click="onExportSubmit"
+        >
+          {{ $t('EXPORT_CONTACTS.BUTTON_LABEL') }}
+        </woot-button>
       </div>
     </div>
   </header>
@@ -127,6 +137,10 @@ export default {
       type: Function,
       default: () => {},
     },
+    onExportSubmit: {
+      type: Function,
+      default: () => {},
+    },
     onToggleFilter: {
       type: Function,
       default: () => {},