feat: Campaign table (chatwoot#2212)

* code cleanup * add campaign table * update locale texts * locale text cleanup * Rename selectedAgent with selectedSender in add campaign form * code cleanup * remove timer mixin * update avatar size to 20px * add border for table * add campaigns get action specs * rename campaign table component * fix style issues * update sender list based on inbox permission * style fixes * review fixes * add campaign sender component * replace wootsubmit button with wootbutton * update scroll width * replace campaign status with woot label * changes as per review * style fixes * remove unused code * disable campaign in inbox settings page * review fixes
Leo-iun1n · May 6, 2021 · 6245a10 · 6245a10
1 parent 381c358
commit 6245a10
Show file tree

Hide file tree

Showing 7 changed files with 344 additions and 41 deletions.
diff --git a/app/javascript/dashboard/i18n/locale/en/campaign.json b/app/javascript/dashboard/i18n/locale/en/campaign.json
@@ -3,9 +3,6 @@
     "HEADER": "Campaigns",
     "SIDEBAR_TXT": "Proactive messages allow the customer to send outbound messages to their contacts which would trigger more conversations. Click on <b>Add Campaign</b> to create a new campaign. You can also edit or delete an existing campaign by clicking on the Edit or Delete button.",
     "HEADER_BTN_TXT": "Create a campaign",
-    "LIST": {
-      "404": "There are no campaigns created for this inbox."
-    },
     "ADD": {
       "TITLE": "Create a campaign",
       "DESC": "Proactive messages allow the customer to send outbound messages to their contacts which would trigger more conversations.",
@@ -44,6 +41,27 @@
         "SUCCESS_MESSAGE": "Campaign created successfully",
         "ERROR_MESSAGE": "There was an error. Please try again."
       }
+    },
+    "LIST": {
+      "LOADING_MESSAGE": "Loading campaigns...",
+      "TABLE_HEADER": {
+        "TITLE": "Title",
+        "MESSAGE": "Message",
+        "STATUS": "Status",
+        "SENDER": "Sender",
+        "URL": "URL",
+        "TIME_ON_PAGE": "Time(Seconds)",
+        "CREATED_AT": "Created at"
+      },
+      "BUTTONS": {
+        "ADD": "Add",
+        "EDIT": "Edit",
+        "DELETE": "Delete"
+      },
+      "STATUS": {
+        "ENABLED": "Enabled",
+        "DISABLED": "Disabled"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -258,7 +258,7 @@
       <weekly-availability :inbox="inbox" />
     </div>
     <div v-if="selectedTabKey === 'campaign'">
-      <campaign />
+      <campaign :selected-agents="selectedAgents" />
     </div>
   </div>
 </template>

diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/AddCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/AddCampaign.vue
@@ -32,18 +32,18 @@
         </div>
 
         <div class="medium-12 columns">
-          <label :class="{ error: $v.selectedAgent.$error }">
+          <label :class="{ error: $v.selectedSender.$error }">
             {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
-            <select v-model="selectedAgent">
+            <select v-model="selectedSender">
               <option
-                v-for="agent in agentsList"
-                :key="agent.name"
-                :value="agent.name"
+                v-for="sender in senderList"
+                :key="sender.name"
+                :value="sender.id"
               >
-                {{ agent.name }}
+                {{ sender.name }}
               </option>
             </select>
-            <span v-if="$v.selectedAgent.$error" class="message">
+            <span v-if="$v.selectedSender.$error" class="message">
               {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
             </span>
           </label>
@@ -119,6 +119,10 @@ export default {
   },
   mixins: [alertMixin],
   props: {
+    senderList: {
+      type: Array,
+      default: () => [],
+    },
     onClose: {
       type: Function,
       default: () => {},
@@ -128,7 +132,7 @@ export default {
     return {
       title: '',
       message: '',
-      selectedAgent: '',
+      selectedSender: '',
       endPoint: '',
       timeOnPage: 10,
       show: true,
@@ -142,7 +146,7 @@ export default {
     message: {
       required,
     },
-    selectedAgent: {
+    selectedSender: {
       required,
     },
     endPoint: {
@@ -157,18 +161,13 @@ export default {
 
   computed: {
     ...mapGetters({
-      agentList: 'agents/getAgents',
       uiFlags: 'campaigns/getUIFlags',
     }),
-
-    agentsList() {
-      return this.agentList;
-    },
     buttonDisabled() {
       return (
         this.$v.message.$invalid ||
         this.$v.title.$invalid ||
-        this.$v.selectedAgent.$invalid ||
+        this.$v.selectedSender.$invalid ||
         this.$v.endPoint.$invalid ||
         this.$v.timeOnPage.$invalid ||
         this.uiFlags.isCreating
@@ -182,7 +181,7 @@ export default {
           title: this.title,
           message: this.message,
           inbox_id: this.$route.params.inboxId,
-          sender_id: this.selectedAgent,
+          sender_id: this.selectedSender,
           enabled: this.enabled,
           trigger_rules: {
             url: this.endPoint,

diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/Campaign.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/Campaign.vue
@@ -1,48 +1,57 @@
 <template>
   <div class="column content-box">
-    <div v-if="campaigns.length" class="row button-wrapper">
+    <div class="row button-wrapper">
       <woot-button @click="openAddPopup">
         <i class="icon ion-android-add-circle"></i>
         {{ $t('CAMPAIGN.HEADER_BTN_TXT') }}
       </woot-button>
     </div>
+    <campaigns-table
+      :campaigns="records"
+      :show-empty-state="showEmptyResult"
+      :is-loading="uiFlags.isFetching"
+    />
 
-    <div v-if="!campaigns.length" class="row">
-      <div class="small-8 columns">
-        <p class="no-items-error-message">
-          {{ $t('CAMPAIGN.LIST.404') }}
-          <a @click="openAddPopup">
-            {{ $t('CAMPAIGN.HEADER_BTN_TXT') }}
-          </a>
-        </p>
-      </div>
-
-      <div class="small-4 columns">
-        <span>
-          <p>
-            <b> {{ $t('CAMPAIGN.HEADER') }}</b>
-          </p>
-          <p v-html="$t('CAMPAIGN.SIDEBAR_TXT')" />
-        </span>
-      </div>
-    </div>
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-campaign :on-close="hideAddPopup" />
+      <add-campaign :on-close="hideAddPopup" :sender-list="selectedAgents" />
     </woot-modal>
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex';
 import AddCampaign from './AddCampaign';
+import CampaignsTable from './CampaignsTable';
+
 export default {
   components: {
     AddCampaign,
+    CampaignsTable,
+  },
+  props: {
+    selectedAgents: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
       campaigns: [],
       showAddPopup: false,
     };
   },
+  computed: {
+    ...mapGetters({
+      records: 'campaigns/getCampaigns',
+      uiFlags: 'campaigns/getUIFlags',
+    }),
+    showEmptyResult() {
+      const hasEmptyResults = this.records.length === 0;
+      return hasEmptyResults;
+    },
+  },
+  mounted() {
+    this.$store.dispatch('campaigns/get');
+  },
   methods: {
     openAddPopup() {
       this.showAddPopup = true;
@@ -58,5 +67,6 @@ export default {
 .button-wrapper {
   display: flex;
   justify-content: flex-end;
+  padding-bottom: var(--space-one);
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignSender.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignSender.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="row--user-block">
+    <Thumbnail
+      :src="sender.thumbnail"
+      size="20px"
+      :username="sender.name"
+      :status="sender.availability_status"
+    />
+    <div>
+      <h6 class="text-block-title text-truncate">
+        {{ sender.name }}
+      </h6>
+    </div>
+  </div>
+</template>
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    sender: {
+      type: Object,
+      default: () => {},
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '~dashboard/assets/scss/mixins';
+
+.row--user-block {
+  align-items: center;
+  display: flex;
+  text-align: left;
+
+  .user-name {
+    margin: 0;
+    text-transform: capitalize;
+  }
+  .user-thumbnail-box {
+    margin-right: var(--space-small);
+  }
+}
+</style>