From 4cae5c7d510dea081fbd9b1a8dd8085548a349d4 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 20 Mar 2023 20:35:15 +0530
Subject: [PATCH] chore: The label creation UI input is transform to lowercase
 (#6712)

---
 .../routes/dashboard/settings/labels/AddLabel.vue  | 14 ++++++++++++--
 .../routes/dashboard/settings/labels/EditLabel.vue | 14 ++++++++++++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
index bad9b4be4..538b53c06 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
@@ -8,7 +8,7 @@
       <woot-input
         v-model.trim="title"
         :class="{ error: $v.title.$error }"
-        class="medium-12 columns"
+        class="medium-12 columns label-name--input"
         :label="$t('LABEL_MGMT.FORM.NAME.LABEL')"
         :placeholder="$t('LABEL_MGMT.FORM.NAME.PLACEHOLDER')"
         :error="getLabelTitleErrorMessage"
@@ -91,7 +91,7 @@ export default {
         await this.$store.dispatch('labels/create', {
           color: this.color,
           description: this.description,
-          title: this.title,
+          title: this.title.toLowerCase(),
           show_on_sidebar: this.showOnSidebar,
         });
         this.showAlert(this.$t('LABEL_MGMT.ADD.API.SUCCESS_MESSAGE'));
@@ -105,3 +105,13 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+// Label API supports only lowercase letters
+.label-name--input {
+  ::v-deep {
+    input {
+      text-transform: lowercase;
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
index fbb15ac8a..f342af3e0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
@@ -5,7 +5,7 @@
       <woot-input
         v-model.trim="title"
         :class="{ error: $v.title.$error }"
-        class="medium-12 columns"
+        class="medium-12 columns label-name--input"
         :label="$t('LABEL_MGMT.FORM.NAME.LABEL')"
         :placeholder="$t('LABEL_MGMT.FORM.NAME.PLACEHOLDER')"
         :error="getLabelTitleErrorMessage"
@@ -101,7 +101,7 @@ export default {
           id: this.selectedResponse.id,
           color: this.color,
           description: this.description,
-          title: this.title,
+          title: this.title.toLowerCase(),
           show_on_sidebar: this.showOnSidebar,
         })
         .then(() => {
@@ -115,3 +115,13 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+// Label API supports only lowercase letters
+.label-name--input {
+  ::v-deep {
+    input {
+      text-transform: lowercase;
+    }
+  }
+}
+</style>