feat: Adds the ability to edit and delete custom attributes (#2982)

* feat: Adds the ability to edit and delete custom attributes

* Review fixes

* Minor fixes

* Adds specs

* Minor fixes

* Update settings.routes.js

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/helper/commons.js

@@ -61,3 +61,10 @@ export const createPendingMessage = data => {
 
   return pendingMessage;
 };
+
+export const convertToSlug = text => {
+  return text
+    .toLowerCase()
+    .replace(/[^\w ]+/g, '')
+    .replace(/ +/g, '_');
+};

app/javascript/dashboard/helper/specs/commons.spec.js

@@ -1,4 +1,8 @@
-import { getTypingUsersText, createPendingMessage } from '../commons';
+import {
+  getTypingUsersText,
+  createPendingMessage,
+  convertToSlug,
+} from '../commons';
 
 describe('#getTypingUsersText', () => {
   it('returns the correct text is there is only one typing user', () => {
@@ -83,3 +87,9 @@ describe('#createPendingMessage', () => {
     expect(pending.attachments.length).toBe(1);
   });
 });
+
+describe('convertToSlug', () => {
+  it('should convert to slug', () => {
+    expect(convertToSlug('Test@%^&*(){}>.!@`~_ ing')).toBe('test__ing');
+  });
+});

app/javascript/dashboard/i18n/locale/en/attributesMgmt.json

@@ -35,7 +35,29 @@
       },
       "API": {
         "SUCCESS_MESSAGE": "Attribute added successfully",
-        "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+        "ERROR_MESSAGE": "Could not able to create an attribute, Please try again later"
+      }
+    },
+    "DELETE": {
+      "BUTTON_TEXT": "Delete",
+      "API": {
+        "SUCCESS_MESSAGE": "Attribute deleted successfully.",
+        "ERROR_MESSAGE": "Couldn't delete the attribute. Try again."
+      },
+      "CONFIRM": {
+        "TITLE": "Are you sure want to delete - %{attributeName}",
+        "PLACE_HOLDER": "Please type {attributeName} to confirm",
+        "MESSAGE": "Deleting will remove the attribute",
+        "YES": "Delete ",
+        "NO": "Cancel"
+      }
+    },
+    "EDIT": {
+      "TITLE": "Edit attribute",
+      "UPDATE_BUTTON_TEXT": "Update",
+      "API": {
+        "SUCCESS_MESSAGE": "Attribute updated successfully",
+        "ERROR_MESSAGE": "There was an error updating attribute, please try again"
       }
     },
     "TABS": {

app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue

@@ -85,6 +85,8 @@
 <script>
 import { required, minLength } from 'vuelidate/lib/validators';
 import { mapGetters } from 'vuex';
+import { convertToSlug } from 'dashboard/helper/commons.js';
+import { ATTRIBUTE_MODELS, ATTRIBUTE_TYPES } from './constants';
 import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
@@ -102,42 +104,8 @@ export default {
       description: '',
       attributeModel: 0,
       attributeType: 0,
-      models: [
+      models: ATTRIBUTE_MODELS,
-        {
+      types: ATTRIBUTE_TYPES,
-          id: 0,
-          option: 'Conversation',
-        },
-        {
-          id: 1,
-          option: 'Contact',
-        },
-      ],
-      types: [
-        {
-          id: 0,
-          option: 'Text',
-        },
-        {
-          id: 1,
-          option: 'Number',
-        },
-        {
-          id: 2,
-          option: 'Currency',
-        },
-        {
-          id: 3,
-          option: 'Percent',
-        },
-        {
-          id: 4,
-          option: 'Link',
-        },
-        {
-          id: 5,
-          option: 'Date',
-        },
-      ],
       show: true,
     };
   },
@@ -147,10 +115,7 @@ export default {
       uiFlags: 'getUIFlags',
     }),
     attributeKey() {
-      return this.displayName
+      return convertToSlug(this.displayName);
-        .toLowerCase()
-        .replace(/[^\w ]+/g, '')
-        .replace(/ +/g, '_');
     },
   },
 

app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue

@@ -54,6 +54,7 @@
                   color-scheme="secondary"
                   class-names="grey-btn"
                   icon="ion-edit"
+                  @click="openEditPopup(attribute)"
                 >
                   {{ $t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT') }}
                 </woot-button>
@@ -62,6 +63,7 @@
                   color-scheme="secondary"
                   icon="ion-close-circled"
                   class-names="grey-btn"
+                  @click="openDelete(attribute)"
                 >
                   {{ $t('ATTRIBUTES_MGMT.LIST.BUTTONS.DELETE') }}
                 </woot-button>
@@ -74,16 +76,44 @@
     <div class="small-4 columns">
       <span v-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')"></span>
     </div>
+    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+      <edit-attribute
+        :selected-attribute="selectedAttribute"
+        :is-updating="uiFlags.isUpdating"
+        @on-close="hideEditPopup"
+      />
+    </woot-modal>
+    <woot-confirm-delete-modal
+      v-if="showDeletePopup"
+      :show.sync="showDeletePopup"
+      :title="confirmDeleteTitle"
+      :message="$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.MESSAGE')"
+      :confirm-text="deleteConfirmText"
+      :reject-text="deleteRejectText"
+      :confirm-value="selectedAttribute.attribute_display_name"
+      :confirm-place-holder-text="confirmPlaceHolderText"
+      @on-confirm="confirmDeletion"
+      @on-close="closeDelete"
+    />
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+import EditAttribute from './EditAttribute';
 
 export default {
+  components: {
+    EditAttribute,
+  },
+  mixins: [alertMixin],
   data() {
     return {
       selectedTabIndex: 0,
+      showEditPopup: false,
+      showDeletePopup: false,
+      selectedAttribute: {},
     };
   },
   computed: {
@@ -111,6 +141,24 @@ export default {
         },
       ];
     },
+    deleteConfirmText() {
+      return `${this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.YES')} ${
+        this.selectedAttribute.attribute_display_name
+      }`;
+    },
+    deleteRejectText() {
+      return this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.NO');
+    },
+    confirmDeleteTitle() {
+      return this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.TITLE', {
+        attributeName: this.selectedAttribute.attribute_display_name,
+      });
+    },
+    confirmPlaceHolderText() {
+      return `${this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
+        attributeName: this.selectedAttribute.attribute_display_name,
+      })}`;
+    },
   },
   mounted() {
     this.fetchAttributes(this.selectedTabIndex);
@@ -123,6 +171,36 @@ export default {
     fetchAttributes(index) {
       this.$store.dispatch('attributes/get', index);
     },
+    async deleteAttributes({ id }) {
+      try {
+        await this.$store.dispatch('attributes/delete', id);
+        this.showAlert(this.$t('ATTRIBUTES_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        const errorMessage =
+          error?.response?.message ||
+          this.$t('ATTRIBUTES_MGMT.DELETE.API.ERROR_MESSAGE');
+        this.showAlert(errorMessage);
+      }
+    },
+    openEditPopup(response) {
+      this.showEditPopup = true;
+      this.selectedAttribute = response;
+    },
+    hideEditPopup() {
+      this.showEditPopup = false;
+    },
+    confirmDeletion() {
+      this.deleteAttributes(this.selectedAttribute);
+      this.closeDelete();
+    },
+    openDelete(value) {
+      this.showDeletePopup = true;
+      this.selectedAttribute = value;
+    },
+    closeDelete() {
+      this.showDeletePopup = false;
+      this.selectedAttribute = {};
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="column content-box">
+    <woot-modal-header :header-title="pageTitle" />
+    <form class="row" @submit.prevent="editAttributes">
+      <div class="medium-12 columns">
+        <woot-input
+          v-model.trim="displayName"
+          :label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
+          type="text"
+          :class="{ error: $v.displayName.$error }"
+          :error="
+            $v.displayName.$error
+              ? $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.ERROR')
+              : ''
+          "
+          :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
+          @blur="$v.displayName.$touch"
+        />
+        <label :class="{ error: $v.description.$error }">
+          {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
+          <textarea
+            v-model.trim="description"
+            rows="5"
+            type="text"
+            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.DESC.PLACEHOLDER')"
+            @blur="$v.description.$touch"
+          />
+          <span v-if="$v.description.$error" class="message">
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.ERROR') }}
+          </span>
+        </label>
+        <label :class="{ error: $v.attributeType.$error }">
+          {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LABEL') }}
+          <select v-model="attributeType">
+            <option v-for="type in types" :key="type.id" :value="type.id">
+              {{ type.option }}
+            </option>
+          </select>
+          <span v-if="$v.attributeType.$error" class="message">
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
+          </span>
+        </label>
+        <div v-if="displayName" class="medium-12 columns">
+          <label>
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL') }}
+            <i class="ion-help" />
+          </label>
+          <p class="key-value text-truncate">
+            {{ attributeKey }}
+          </p>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <woot-button
+          :is-loading="isUpdating"
+          :disabled="$v.displayName.$invalid || $v.description.$invalid"
+        >
+          {{ $t('ATTRIBUTES_MGMT.EDIT.UPDATE_BUTTON_TEXT') }}
+        </woot-button>
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { required, minLength } from 'vuelidate/lib/validators';
+import { convertToSlug } from 'dashboard/helper/commons.js';
+import { ATTRIBUTE_TYPES } from './constants';
+import alertMixin from 'shared/mixins/alertMixin';
+export default {
+  components: {},
+  mixins: [alertMixin],
+  props: {
+    selectedAttribute: {
+      type: Object,
+      default: () => {},
+    },
+    isUpdating: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      displayName: '',
+      description: '',
+      attributeType: 0,
+      types: ATTRIBUTE_TYPES,
+      show: true,
+    };
+  },
+  validations: {
+    displayName: {
+      required,
+    },
+    attributeType: {
+      required,
+    },
+    description: {
+      required,
+      minLength: minLength(1),
+    },
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'attributes/getUIFlags',
+    }),
+    pageTitle() {
+      return `${this.$t('ATTRIBUTES_MGMT.EDIT.TITLE')} - ${
+        this.selectedAttribute.attribute_display_name
+      }`;
+    },
+    attributeKey() {
+      return convertToSlug(this.displayName);
+    },
+  },
+  mounted() {
+    this.setFormValues();
+  },
+  methods: {
+    onClose() {
+      this.$emit('on-close');
+    },
+    setFormValues() {
+      this.displayName = this.selectedAttribute.attribute_display_name;
+      this.description = this.selectedAttribute.attribute_description;
+    },
+    async editAttributes() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+      try {
+        await this.$store.dispatch('attributes/update', {
+          id: this.selectedAttribute.id,
+          attribute_display_name: this.displayName,
+          attribute_description: this.description,
+          attribute_display_type: this.attributeType,
+          attribute_key: this.attributeKey,
+        });
+        this.showAlert(this.$t('ATTRIBUTES_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+        this.onClose();
+      } catch (error) {
+        const errorMessage =
+          error?.response?.message ||
+          this.$t('ATTRIBUTES_MGMT.EDIT.API.ERROR_MESSAGE');
+        this.showAlert(errorMessage);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.key-value {
+  padding: 0 var(--space-small) var(--space-small) 0;
+  font-family: monospace;
+}
+</style>

app/javascript/dashboard/routes/dashboard/settings/attributes/constants.js

@@ -0,0 +1,37 @@
+export const ATTRIBUTE_MODELS = [
+  {
+    id: 0,
+    option: 'Conversation',
+  },
+  {
+    id: 1,
+    option: 'Contact',
+  },
+];
+
+export const ATTRIBUTE_TYPES = [
+  {
+    id: 0,
+    option: 'Text',
+  },
+  {
+    id: 1,
+    option: 'Number',
+  },
+  {
+    id: 2,
+    option: 'Currency',
+  },
+  {
+    id: 3,
+    option: 'Percent',
+  },
+  {
+    id: 4,
+    option: 'Link',
+  },
+  {
+    id: 5,
+    option: 'Date',
+  },
+];

app/javascript/dashboard/store/modules/attributes.js

@@ -7,6 +7,8 @@ export const state = {
   uiFlags: {
     isFetching: false,
     isCreating: false,
+    isUpdating: false,
+    isDeleting: false,
   },
 };