From c2db8a1fd7f2fa19c275053334eb996e3c2ba51c Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Mon, 15 Nov 2021 12:45:47 +0530
Subject: [PATCH] chore: Add the option to edit custom attribute display name
 (#3382)

---
 .../i18n/locale/en/attributesMgmt.json        |  3 +-
 .../settings/attributes/AddAttribute.vue      | 21 ++++++++++----
 .../settings/attributes/EditAttribute.vue     | 29 ++++++++++++-------
 .../dashboard/store/modules/attributes.js     |  6 ++--
 4 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json b/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
index 819b4cb66..0ea8af780 100644
--- a/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
@@ -32,7 +32,8 @@
         "KEY": {
           "LABEL": "Key",
           "PLACEHOLDER": "Enter custom attribute key",
-          "ERROR": "Key is required"
+          "ERROR": "Key is required",
+          "IN_VALID": "Invalid key"
         }
       },
       "API": {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
index b5ab9622a..29f5c3fc8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
@@ -59,11 +59,7 @@
             :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
             type="text"
             :class="{ error: $v.attributeKey.$error }"
-            :error="
-              $v.attributeKey.$error
-                ? $t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR')
-                : ''
-            "
+            :error="$v.attributeKey.$error ? keyErrorMessage : ''"
             :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
             @blur="$v.attributeKey.$touch"
           />
@@ -122,6 +118,12 @@ export default {
         this.uiFlags.isCreating
       );
     },
+    keyErrorMessage() {
+      if (!this.$v.attributeKey.isKey) {
+        return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.IN_VALID');
+      }
+      return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
+    },
   },
 
   validations: {
@@ -140,6 +142,9 @@ export default {
     },
     attributeKey: {
       required,
+      isKey(value) {
+        return !(value.indexOf(' ') >= 0);
+      },
     },
   },
 
@@ -148,6 +153,10 @@ export default {
       this.attributeKey = convertToSlug(this.displayName);
     },
     async addAttributes() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
       try {
         await this.$store.dispatch('attributes/create', {
           attribute_display_name: this.displayName,
@@ -159,7 +168,7 @@ export default {
         this.alertMessage = this.$t('ATTRIBUTES_MGMT.ADD.API.SUCCESS_MESSAGE');
         this.onClose();
       } catch (error) {
-        const errorMessage = error?.response?.data?.message;
+        const errorMessage = error?.message;
         this.alertMessage =
           errorMessage || this.$t('ATTRIBUTES_MGMT.ADD.API.ERROR_MESSAGE');
       } finally {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
index 49e5420c2..1acf8a4a3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
@@ -14,7 +14,6 @@
               : ''
           "
           :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
-          readonly
           @blur="$v.displayName.$touch"
         />
         <label :class="{ error: $v.description.$error }">
@@ -46,11 +45,7 @@
           :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
           type="text"
           :class="{ error: $v.attributeKey.$error }"
-          :error="
-            $v.attributeKey.$error
-              ? $t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR')
-              : ''
-          "
+          :error="$v.attributeKey.$error ? keyErrorMessage : ''"
           :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
           readonly
           @blur="$v.attributeKey.$touch"
@@ -112,6 +107,9 @@ export default {
     },
     attributeKey: {
       required,
+      isKey(value) {
+        return !(value.indexOf(' ') >= 0);
+      },
     },
   },
   computed: {
@@ -130,6 +128,12 @@ export default {
           this.selectedAttribute.attribute_display_type
       ).id;
     },
+    keyErrorMessage() {
+      if (!this.$v.attributeKey.isKey) {
+        return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.IN_VALID');
+      }
+      return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
+    },
   },
   mounted() {
     this.setFormValues();
@@ -153,14 +157,17 @@ export default {
         await this.$store.dispatch('attributes/update', {
           id: this.selectedAttribute.id,
           attribute_description: this.description,
+          attribute_display_name: this.displayName,
         });
-        this.showAlert(this.$t('ATTRIBUTES_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+
+        this.alertMessage = 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);
+        const errorMessage = error?.message;
+        this.alertMessage =
+          errorMessage || this.$t('ATTRIBUTES_MGMT.EDIT.API.ERROR_MESSAGE');
+      } finally {
+        this.showAlert(this.alertMessage);
       }
     },
   },
diff --git a/app/javascript/dashboard/store/modules/attributes.js b/app/javascript/dashboard/store/modules/attributes.js
index 82319ca20..40cfc99d7 100644
--- a/app/javascript/dashboard/store/modules/attributes.js
+++ b/app/javascript/dashboard/store/modules/attributes.js
@@ -41,7 +41,8 @@ export const actions = {
       const response = await AttributeAPI.create(attributeObj);
       commit(types.ADD_CUSTOM_ATTRIBUTE, response.data);
     } catch (error) {
-      throw new Error(error);
+      const errorMessage = error?.response?.data?.message;
+      throw new Error(errorMessage);
     } finally {
       commit(types.SET_CUSTOM_ATTRIBUTE_UI_FLAG, { isCreating: false });
     }
@@ -52,7 +53,8 @@ export const actions = {
       const response = await AttributeAPI.update(id, updateObj);
       commit(types.EDIT_CUSTOM_ATTRIBUTE, response.data);
     } catch (error) {
-      throw new Error(error);
+      const errorMessage = error?.response?.data?.message;
+      throw new Error(errorMessage);
     } finally {
       commit(types.SET_CUSTOM_ATTRIBUTE_UI_FLAG, { isUpdating: false });
     }