feat: Edit campaigns (#2230)

* add edit campaign component
2021-05-10 12:40:48 +05:30
parent 7f6abdc987
commit db31bfcee4
10 changed files with 321 additions and 11 deletions
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -335,10 +335,6 @@ export default {
      if (this.isAWebWidgetInbox) {
        return [
          ...visibleToAllChannelTabs,
-          // {
-          //   key: 'campaign',
-          //   name: this.$t('INBOX_MGMT.TABS.CAMPAIGN'),
-          // },
          {
            key: 'preChatForm',
            name: this.$t('INBOX_MGMT.TABS.PRE_CHAT_FORM'),
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/Campaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/Campaign.vue
@@ -1,8 +1,7 @@
 <template>
  <div class="column content-box">
    <div class="row button-wrapper">
-      <woot-button @click="openAddPopup">
-        <i class="icon ion-android-add-circle"></i>
+      <woot-button icon="ion-android-add-circle" @click="openAddPopup">
        {{ $t('CAMPAIGN.HEADER_BTN_TXT') }}
      </woot-button>
    </div>
@@ -10,22 +9,32 @@
      :campaigns="records"
      :show-empty-state="showEmptyResult"
      :is-loading="uiFlags.isFetching"
+      :on-edit-click="openEditPopup"
    />

    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
      <add-campaign :on-close="hideAddPopup" :sender-list="selectedAgents" />
    </woot-modal>
+    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+      <edit-campaign
+        :on-close="hideEditPopup"
+        :selected-campaign="selectedCampaign"
+        :sender-list="selectedAgents"
+      />
+    </woot-modal>
  </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
 import AddCampaign from './AddCampaign';
 import CampaignsTable from './CampaignsTable';
+import EditCampaign from './EditCampaign';

 export default {
  components: {
    AddCampaign,
    CampaignsTable,
+    EditCampaign,
  },
  props: {
    selectedAgents: {
@@ -37,6 +46,8 @@ export default {
    return {
      campaigns: [],
      showAddPopup: false,
+      showEditPopup: false,
+      selectedCampaign: {},
    };
  },
  computed: {
@@ -59,6 +70,14 @@ export default {
    hideAddPopup() {
      this.showAddPopup = false;
    },
+    openEditPopup(response) {
+      const { row: campaign } = response;
+      this.selectedCampaign = campaign;
+      this.showEditPopup = true;
+    },
+    hideEditPopup() {
+      this.showEditPopup = false;
+    },
  },
 };
 </script>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue
@@ -44,6 +44,10 @@ export default {
      type: Boolean,
      default: false,
    },
+    onEditClick: {
+      type: Function,
+      default: () => {},
+    },
  },

  data() {
@@ -130,14 +134,14 @@ export default {
          key: 'buttons',
          title: '',
          align: 'left',
-          renderBodyCell: () => (
+          renderBodyCell: (row) => (
            <div class="button-wrapper">
              <WootButton
                variant="clear"
                icon="ion-edit"
                color-scheme="secondary"
                classNames="hollow grey-btn"
-                click="openEditPopup(label)"
+                onClick={() => this.onEditClick(row)}
              >
                {this.$t('CAMPAIGN.LIST.BUTTONS.EDIT')}
              </WootButton>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/EditCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/EditCampaign.vue
@@ -0,0 +1,236 @@
+<template>
+  <modal :show.sync="show" :on-close="onClose">
+    <div class="column content-box">
+      <woot-modal-header :header-title="pageTitle" />
+      <form class="row" @submit.prevent="editCampaign">
+        <div class="medium-12 columns">
+          <label :class="{ error: $v.title.$error }">
+            {{ $t('CAMPAIGN.ADD.FORM.TITLE.LABEL') }}
+            <input
+              v-model.trim="title"
+              type="text"
+              :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
+              @input="$v.title.$touch"
+            />
+            <span v-if="$v.title.$error" class="message">
+              {{ $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') }}
+            </span>
+          </label>
+        </div>
+
+        <div class="medium-12 columns">
+          <label :class="{ error: $v.message.$error }">
+            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
+            <textarea
+              v-model.trim="message"
+              rows="5"
+              type="text"
+              :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
+              @input="$v.message.$touch"
+            />
+            <span v-if="$v.message.$error" class="message">
+              {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
+            </span>
+          </label>
+        </div>
+
+        <div class="medium-12 columns">
+          <label :class="{ error: $v.selectedSender.$error }">
+            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
+            <select v-model="selectedSender">
+              <option
+                v-for="sender in senderList"
+                :key="sender.name"
+                :value="sender.id"
+              >
+                {{ sender.name }}
+              </option>
+            </select>
+            <span v-if="$v.selectedSender.$error" class="message">
+              {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
+            </span>
+          </label>
+        </div>
+
+        <div class="medium-12 columns">
+          <label :class="{ error: $v.endPoint.$error }">
+            {{ $t('CAMPAIGN.ADD.FORM.END_POINT.LABEL') }}
+            <input
+              v-model.trim="endPoint"
+              type="text"
+              :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
+              @input="$v.endPoint.$touch"
+            />
+            <span v-if="$v.endPoint.$error" class="message">
+              {{ $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') }}
+            </span>
+          </label>
+        </div>
+        <div class="medium-12 columns">
+          <label :class="{ error: $v.timeOnPage.$error }">
+            {{ $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL') }}
+            <input
+              v-model.trim="timeOnPage"
+              type="number"
+              :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
+              @input="$v.timeOnPage.$touch"
+            />
+            <span v-if="$v.timeOnPage.$error" class="message">
+              {{ $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR') }}
+            </span>
+          </label>
+        </div>
+
+        <div class="medium-12 columns">
+          <label>
+            <input
+              v-model="enabled"
+              type="checkbox"
+              value="enabled"
+              name="enabled"
+            />
+            {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
+          </label>
+        </div>
+
+        <div class="modal-footer">
+          <woot-button :disabled="buttonDisabled" :loading="uiFlags.isCreating">
+            {{ $t('CAMPAIGN.EDIT.UPDATE_BUTTON_TEXT') }}
+          </woot-button>
+          <woot-button
+            class="button clear"
+            :disabled="buttonDisabled"
+            :loading="uiFlags.isCreating"
+            @click.prevent="onClose"
+          >
+            {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
+          </woot-button>
+        </div>
+      </form>
+    </div>
+  </modal>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { required, url, minLength } from 'vuelidate/lib/validators';
+import Modal from 'dashboard/components/Modal';
+import alertMixin from 'shared/mixins/alertMixin';
+
+export default {
+  components: {
+    Modal,
+  },
+  mixins: [alertMixin],
+  props: {
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+    selectedCampaign: {
+      type: Object,
+      default: () => {},
+    },
+    senderList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      title: '',
+      message: '',
+      selectedSender: '',
+      endPoint: '',
+      timeOnPage: 10,
+      show: true,
+      enabled: true,
+    };
+  },
+  validations: {
+    title: {
+      required,
+    },
+    message: {
+      required,
+    },
+    selectedSender: {
+      required,
+    },
+    endPoint: {
+      required,
+      minLength: minLength(7),
+      url,
+    },
+    timeOnPage: {
+      required,
+    },
+  },
+
+  computed: {
+    ...mapGetters({
+      uiFlags: 'campaigns/getUIFlags',
+    }),
+    buttonDisabled() {
+      return (
+        this.$v.message.$invalid ||
+        this.$v.title.$invalid ||
+        this.$v.selectedSender.$invalid ||
+        this.$v.endPoint.$invalid ||
+        this.$v.timeOnPage.$invalid ||
+        this.uiFlags.isCreating
+      );
+    },
+    pageTitle() {
+      return `${this.$t('CAMPAIGN.EDIT.TITLE')} - ${
+        this.selectedCampaign.title
+      }`;
+    },
+  },
+  mounted() {
+    this.setFormValues();
+  },
+  methods: {
+    setFormValues() {
+      const {
+        title,
+        message,
+        enabled,
+        trigger_rules: { url: endPoint, time_on_page: timeOnPage },
+        sender: { id: selectedSender },
+      } = this.selectedCampaign;
+      this.title = title;
+      this.message = message;
+      this.endPoint = endPoint;
+      this.timeOnPage = timeOnPage;
+      this.selectedSender = selectedSender;
+      this.enabled = enabled;
+    },
+    async editCampaign() {
+      try {
+        await this.$store.dispatch('campaigns/update', {
+          id: this.selectedCampaign.id,
+          title: this.title,
+          message: this.message,
+          inbox_id: this.$route.params.inboxId,
+          sender_id: this.selectedSender,
+          enabled: this.enabled,
+          trigger_rules: {
+            url: this.endPoint,
+            time_on_page: this.timeOnPage,
+          },
+        });
+        this.showAlert(this.$t('CAMPAIGN.EDIT.API.SUCCESS_MESSAGE'));
+        this.onClose();
+      } catch (error) {
+        this.showAlert(this.$t('CAMPAIGN.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.content-box .page-top-bar::v-deep {
+  padding: var(--space-large) var(--space-large) var(--space-zero);
+}
+</style>