feat: Add custom attribute table (#2929)

app/javascript/dashboard/api/attributes.js

@@ -1,9 +1,14 @@
+/* global axios */
 import ApiClient from './ApiClient';
 
 class AttributeAPI extends ApiClient {
   constructor() {
     super('custom_attribute_definitions', { accountScoped: true });
   }
+
+  getAttributesByModel(modelId) {
+    return axios.get(`${this.url}?attribute_model=${modelId}`);
+  }
 }
 
 export default new AttributeAPI();

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

@@ -2,6 +2,8 @@
   "ATTRIBUTES_MGMT": {
     "HEADER": "Attributes",
     "HEADER_BTN_TXT": "Add Attribute",
+    "LOADING": "Fetching attributes",
+    "SIDEBAR_TXT": "<p><b>Attributes</b> <p>A custom attribute tracks facts about your contacts/conversation — like the subscription plan, or when they ordered the first item etc. <br /><br />For creating a Attributes, just click on the <b>Add Attribute.</b> You can also edit or delete an existing  Attribute by clicking on the Edit or Delete button.</p>",
     "ADD": {
       "TITLE": "Add attribute",
       "SUBMIT": "Create",
@@ -9,11 +11,13 @@
       "FORM": {
         "NAME": {
           "LABEL": "Display Name",
-          "PLACEHOLDER": "Enter attribute display name"
+          "PLACEHOLDER": "Enter attribute display name",
+          "ERROR": "Name is required"
         },
         "DESC": {
           "LABEL": "Description",
-          "PLACEHOLDER": "Enter attribute description"
+          "PLACEHOLDER": "Enter attribute description",
+          "ERROR": "Description is required"
         },
         "MODEL": {
           "LABEL": "Model",
@@ -33,6 +37,22 @@
         "SUCCESS_MESSAGE": "Attribute added successfully",
         "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
       }
+    },
+    "TABS": {
+      "HEADER": "Custom Attributes",
+      "CONVERSATION": "Conversation",
+      "CONTACT": "Contact"
+    },
+    "LIST": {
+      "TABLE_HEADER": ["Name", "Description", "Type", "Key"],
+      "BUTTONS": {
+        "EDIT": "Edit",
+        "DELETE": "Delete"
+      },
+      "EMPTY_RESULT": {
+        "404": "There are no attributes created",
+        "NOT_FOUND": "There are no attributes configured"
+      }
     }
   }
 }

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

@@ -5,17 +5,19 @@
 
       <form class="row" @submit.prevent="addAttributes()">
         <div class="medium-12 columns">
-          <label :class="{ error: $v.displayName.$error }">
+          <woot-input
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL') }}
+            v-model="displayName"
-            <input
+            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
-              v-model.trim="displayName"
+            type="text"
-              type="text"
+            :class="{ error: $v.displayName.$error }"
-              :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
+            :error="
-              @blur="$v.displayName.$touch"
+              $v.displayName.$error
-            />
+                ? $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.ERROR')
-          </label>
+                : ''
-        </div>
+            "
-        <div class="medium-12 columns">
+            :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
@@ -25,9 +27,10 @@
               :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>
-        </div>
-        <div class="medium-12 columns">
           <label :class="{ error: $v.attributeModel.$error }">
             {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.LABEL') }}
             <select v-model="attributeModel">
@@ -39,8 +42,7 @@
               {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.ERROR') }}
             </span>
           </label>
-        </div>
+
-        <div class="medium-12 columns">
           <label :class="{ error: $v.attributeType.$error }">
             {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LABEL') }}
             <select v-model="attributeType">
@@ -52,18 +54,16 @@
               {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
             </span>
           </label>
-        </div>
+          <div v-if="displayName" class="medium-12 columns">
-        <div v-if="displayName" class="medium-12 columns">
+            <label>
-          <label>
+              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL') }}
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL') }}
+              <i class="ion-help" />
-            <i class="ion-help" />
+            </label>
-          </label>
+            <p class="key-value text-truncate">
-          <p class="key-value text-truncate">
+              {{ attributeKey }}
-            {{ attributeKey }}
+            </p>
-          </p>
+          </div>
-        </div>
+          <div class="modal-footer">
-        <div class="modal-footer">
-          <div class="medium-12 columns">
             <woot-submit-button
               :disabled="
                 $v.displayName.$invalid ||

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

@@ -0,0 +1,172 @@
+<template>
+  <div class="row table-wrap">
+    <div class="column">
+      <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
+        <woot-tabs-item
+          v-for="tab in tabs"
+          :key="tab.key"
+          :name="tab.name"
+          :show-badge="false"
+        />
+      </woot-tabs>
+
+      <div class="columns with-right-space ">
+        <p
+          v-if="!uiFlags.isFetching && !attributes.length"
+          class="no-items-error-message"
+        >
+          {{ $t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404') }}
+        </p>
+        <woot-loading-state
+          v-if="uiFlags.isFetching"
+          :message="$t('ATTRIBUTES_MGMT.LOADING')"
+        />
+        <table
+          v-if="!uiFlags.isFetching && attributes.length"
+          class="woot-table"
+        >
+          <thead>
+            <th
+              v-for="tableHeader in $t('ATTRIBUTES_MGMT.LIST.TABLE_HEADER')"
+              :key="tableHeader"
+              class="item"
+            >
+              {{ tableHeader }}
+            </th>
+          </thead>
+          <tbody>
+            <tr v-for="attribute in attributes" :key="attribute.attribute_key">
+              <td class="item text-truncate">
+                {{ attribute.attribute_display_name }}
+              </td>
+              <td class="item-description text-truncate">
+                {{ attribute.attribute_description }}
+              </td>
+              <td class="item text-truncatee">
+                {{ attribute.attribute_display_type }}
+              </td>
+              <td class="item key text-truncate">
+                {{ attribute.attribute_key }}
+              </td>
+              <td class="button-wrapper">
+                <woot-button
+                  variant="link"
+                  color-scheme="secondary"
+                  class-names="grey-btn"
+                  icon="ion-edit"
+                >
+                  {{ $t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT') }}
+                </woot-button>
+                <woot-button
+                  variant="link"
+                  color-scheme="secondary"
+                  icon="ion-close-circled"
+                  class-names="grey-btn"
+                >
+                  {{ $t('ATTRIBUTES_MGMT.LIST.BUTTONS.DELETE') }}
+                </woot-button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div class="small-4 columns">
+      <span v-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  data() {
+    return {
+      selectedTabIndex: 0,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'attributes/getUIFlags',
+    }),
+    attributes() {
+      const attributeModel = this.selectedTabIndex
+        ? 'contact_attribute'
+        : 'conversation_attribute';
+
+      return this.$store.getters['attributes/getAttributesByModel'](
+        attributeModel
+      );
+    },
+    tabs() {
+      return [
+        {
+          key: 0,
+          name: this.$t('ATTRIBUTES_MGMT.TABS.CONVERSATION'),
+        },
+        {
+          key: 1,
+          name: this.$t('ATTRIBUTES_MGMT.TABS.CONTACT'),
+        },
+      ];
+    },
+  },
+  mounted() {
+    this.fetchAttributes(this.selectedTabIndex);
+  },
+  methods: {
+    onClickTabChange(index) {
+      this.selectedTabIndex = index;
+      this.fetchAttributes(index);
+    },
+    fetchAttributes(index) {
+      this.$store.dispatch('attributes/get', index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.table-wrap {
+  padding-left: var(--space-small);
+}
+
+.woot-table {
+  width: 100%;
+  margin-top: var(--space-small);
+}
+
+.no-items-error-message {
+  margin-top: var(--space-larger);
+}
+
+.tabs {
+  padding-left: 0;
+  margin-right: var(--space-medium);
+  user-select: none;
+}
+
+.item {
+  padding-left: 0;
+  max-width: 10rem;
+  min-width: 8rem;
+}
+
+.item-description {
+  padding-left: 0;
+  max-width: 16rem;
+  min-width: 10rem;
+}
+
+.key {
+  font-family: monospace;
+}
+
+::v-deep {
+  .tabs-title a {
+    font-weight: var(--font-weight-medium);
+    padding-top: 0;
+  }
+}
+</style>

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

@@ -8,6 +8,7 @@
     >
       {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
     </woot-button>
+    <custom-attribute />
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
       <add-attribute :on-close="hideAddPopup" />
     </woot-modal>
@@ -16,9 +17,11 @@
 
 <script>
 import AddAttribute from './AddAttribute';
+import CustomAttribute from './CustomAttribute';
 export default {
   components: {
     AddAttribute,
+    CustomAttribute,
   },
   data() {
     return {

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

@@ -14,18 +14,18 @@ export const getters = {
   getUIFlags(_state) {
     return _state.uiFlags;
   },
-  getAttributes: _state => attributeType => {
+  getAttributesByModel: _state => attributeModel => {
     return _state.records.filter(
-      record => record.attribute_display_type === attributeType
+      record => record.attribute_model === attributeModel
     );
   },
 };
 
 export const actions = {
-  get: async function getAttributes({ commit }) {
+  get: async function getAttributesByModel({ commit }, modelId) {
     commit(types.SET_CUSTOM_ATTRIBUTE_UI_FLAG, { isFetching: true });
     try {
-      const response = await AttributeAPI.get();
+      const response = await AttributeAPI.getAttributesByModel(modelId);
       commit(types.SET_CUSTOM_ATTRIBUTE, response.data);
     } catch (error) {
       // Ignore error

app/javascript/dashboard/store/modules/specs/attributes/actions.spec.js

@@ -11,7 +11,7 @@ describe('#actions', () => {
   describe('#get', () => {
     it('sends correct actions if API is success', async () => {
       axios.get.mockResolvedValue({ data: attributesList });
-      await actions.get({ commit }, { inboxId: 23 });
+      await actions.get({ commit });
       expect(commit.mock.calls).toEqual([
         [types.default.SET_CUSTOM_ATTRIBUTE_UI_FLAG, { isFetching: true }],
         [types.default.SET_CUSTOM_ATTRIBUTE, attributesList],
@@ -20,7 +20,7 @@ describe('#actions', () => {
     });
     it('sends correct actions if API is error', async () => {
       axios.get.mockRejectedValue({ message: 'Incorrect header' });
-      await actions.get({ commit }, { inboxId: 23 });
+      await actions.get({ commit });
       expect(commit.mock.calls).toEqual([
         [types.default.SET_CUSTOM_ATTRIBUTE_UI_FLAG, { isFetching: true }],
         [types.default.SET_CUSTOM_ATTRIBUTE_UI_FLAG, { isFetching: false }],

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

@@ -1,16 +1,16 @@
 export default [
   {
     attribute_display_name: 'Language',
-    attribute_display_type: 0,
+    attribute_display_type: 1,
     attribute_description: 'The conversation language',
     attribute_key: 'language',
     attribute_model: 0,
   },
   {
     attribute_display_name: 'Language one',
-    attribute_display_type: 1,
+    attribute_display_type: 2,
     attribute_description: 'The conversation language one',
     attribute_key: 'language_one',
-    attribute_model: 3,
+    attribute_model: 1,
   },
 ];

app/javascript/dashboard/store/modules/specs/attributes/getters.spec.js

@@ -2,15 +2,15 @@ import { getters } from '../../attributes';
 import attributesList from './fixtures';
 
 describe('#getters', () => {
-  it('getAttributes', () => {
+  it('getAttributesByModel', () => {
     const state = { records: attributesList };
-    expect(getters.getAttributes(state)(1)).toEqual([
+    expect(getters.getAttributesByModel(state)(1)).toEqual([
       {
         attribute_display_name: 'Language one',
-        attribute_display_type: 1,
+        attribute_display_type: 2,
         attribute_description: 'The conversation language one',
         attribute_key: 'language_one',
-        attribute_model: 3,
+        attribute_model: 1,
       },
     ]);
   });