From cb2fa4da450af36e63a5c08908dc9f0ad63989c2 Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <vishnu@chatwoot.com>
Date: Wed, 24 Jan 2024 19:43:03 +0530
Subject: [PATCH] chore: refactor

---
 app/javascript/dashboard/api/sla.js           | 16 ++++++++++
 .../routes/dashboard/settings/sla/AddSLA.vue  | 26 ++++++++---------
 .../routes/dashboard/settings/sla/EditSLA.vue | 24 +++++++--------
 .../routes/dashboard/settings/sla/Index.vue   | 29 +++++++++----------
 .../dashboard/settings/sla/sla.routes.js      |  2 +-
 .../dashboard/settings/sla/validationMixin.js |  6 ++--
 6 files changed, 57 insertions(+), 46 deletions(-)
 create mode 100644 app/javascript/dashboard/api/sla.js

diff --git a/app/javascript/dashboard/api/sla.js b/app/javascript/dashboard/api/sla.js
new file mode 100644
index 000000000..f1e2ae15f
--- /dev/null
+++ b/app/javascript/dashboard/api/sla.js
@@ -0,0 +1,16 @@
+/* global axios */
+
+import ApiClient from './ApiClient';
+
+class SLA extends ApiClient {
+  constructor() {
+    super('sla', { accountScoped: true });
+  }
+
+  get({ page }) {
+    const url = page ? `${this.url}?page=${page}` : this.url;
+    return axios.get(url);
+  }
+}
+
+export default new SLA();
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
index b7c86151e..e02c38559 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="h-auto overflow-auto flex flex-col">
     <woot-modal-header
-      :header-title="$t('SLA_MGMT.ADD.TITLE')"
-      :header-content="$t('SLA_MGMT.ADD.DESC')"
+      :header-title="$t('SLA.ADD.TITLE')"
+      :header-content="$t('SLA.ADD.DESC')"
     />
     <form class="mx-0 flex flex-wrap" @submit.prevent="addSLA">
       <woot-input
         v-model.trim="title"
         :class="{ error: $v.title.$error }"
         class="w-full sla-name--input"
-        :sla="$t('SLA_MGMT.FORM.NAME.SLA')"
-        :placeholder="$t('SLA_MGMT.FORM.NAME.PLACEHOLDER')"
+        :sla="$t('SLA.FORM.NAME.SLA')"
+        :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
         :error="getSLATitleErrorMessage"
         data-testid="sla-title"
         @input="$v.title.$touch"
@@ -20,22 +20,22 @@
         v-model.trim="description"
         :class="{ error: $v.description.$error }"
         class="w-full"
-        :sla="$t('SLA_MGMT.FORM.DESCRIPTION.SLA')"
-        :placeholder="$t('SLA_MGMT.FORM.DESCRIPTION.PLACEHOLDER')"
+        :sla="$t('SLA.FORM.DESCRIPTION.SLA')"
+        :placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
         data-testid="sla-description"
         @input="$v.description.$touch"
       />
 
       <div class="w-full">
         <sla>
-          {{ $t('SLA_MGMT.FORM.COLOR.SLA') }}
+          {{ $t('SLA.FORM.COLOR.SLA') }}
           <woot-color-picker v-model="color" />
         </sla>
       </div>
       <div class="w-full">
         <input v-model="showOnSidebar" type="checkbox" :value="true" />
         <sla for="conversation_creation">
-          {{ $t('SLA_MGMT.FORM.SHOW_ON_SIDEBAR.SLA') }}
+          {{ $t('SLA.FORM.SHOW_ON_SIDEBAR.SLA') }}
         </sla>
       </div>
       <div class="flex justify-end items-center py-2 px-0 gap-2 w-full">
@@ -44,10 +44,10 @@
           :is-loading="uiFlags.isCreating"
           data-testid="sla-submit"
         >
-          {{ $t('SLA_MGMT.FORM.CREATE') }}
+          {{ $t('SLA.FORM.CREATE') }}
         </woot-button>
         <woot-button class="button clear" @click.prevent="onClose">
-          {{ $t('SLA_MGMT.FORM.CANCEL') }}
+          {{ $t('SLA.FORM.CANCEL') }}
         </woot-button>
       </div>
     </form>
@@ -59,7 +59,7 @@ import alertMixin from 'shared/mixins/alertMixin';
 import validationMixin from './validationMixin';
 import { mapGetters } from 'vuex';
 import validations from './validations';
-import { getRandomColor } from 'dashboard/helper/slaColor';
+import { getRandomColor } from 'dashboard/helper/labelColor';
 
 export default {
   mixins: [alertMixin, validationMixin],
@@ -99,11 +99,11 @@ export default {
           title: this.title.toLowerCase(),
           show_on_sidebar: this.showOnSidebar,
         });
-        this.showAlert(this.$t('SLA_MGMT.ADD.API.SUCCESS_MESSAGE'));
+        this.showAlert(this.$t('SLA.ADD.API.SUCCESS_MESSAGE'));
         this.onClose();
       } catch (error) {
         const errorMessage =
-          error.message || this.$t('SLA_MGMT.ADD.API.ERROR_MESSAGE');
+          error.message || this.$t('SLA.ADD.API.ERROR_MESSAGE');
         this.showAlert(errorMessage);
       }
     },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/EditSLA.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/EditSLA.vue
index a8f88bdbd..c3abdb4fe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/EditSLA.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/EditSLA.vue
@@ -6,8 +6,8 @@
         v-model.trim="title"
         :class="{ error: $v.title.$error }"
         class="w-full sla-name--input"
-        :sla="$t('SLA_MGMT.FORM.NAME.SLA')"
-        :placeholder="$t('SLA_MGMT.FORM.NAME.PLACEHOLDER')"
+        :sla="$t('SLA.FORM.NAME.SLA')"
+        :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
         :error="getSLATitleErrorMessage"
         @input="$v.title.$touch"
       />
@@ -15,21 +15,21 @@
         v-model.trim="description"
         :class="{ error: $v.description.$error }"
         class="w-full"
-        :sla="$t('SLA_MGMT.FORM.DESCRIPTION.SLA')"
-        :placeholder="$t('SLA_MGMT.FORM.DESCRIPTION.PLACEHOLDER')"
+        :sla="$t('SLA.FORM.DESCRIPTION.SLA')"
+        :placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
         @input="$v.description.$touch"
       />
 
       <div class="w-full">
         <sla>
-          {{ $t('SLA_MGMT.FORM.COLOR.SLA') }}
+          {{ $t('SLA.FORM.COLOR.SLA') }}
           <woot-color-picker v-model="color" />
         </sla>
       </div>
       <div class="w-full">
         <input v-model="showOnSidebar" type="checkbox" :value="true" />
         <sla for="conversation_creation">
-          {{ $t('SLA_MGMT.FORM.SHOW_ON_SIDEBAR.SLA') }}
+          {{ $t('SLA.FORM.SHOW_ON_SIDEBAR.SLA') }}
         </sla>
       </div>
       <div class="flex justify-end items-center py-2 px-0 gap-2 w-full">
@@ -37,10 +37,10 @@
           :is-disabled="$v.title.$invalid || uiFlags.isUpdating"
           :is-loading="uiFlags.isUpdating"
         >
-          {{ $t('SLA_MGMT.FORM.EDIT') }}
+          {{ $t('SLA.FORM.EDIT') }}
         </woot-button>
         <woot-button class="button clear" @click.prevent="onClose">
-          {{ $t('SLA_MGMT.FORM.CANCEL') }}
+          {{ $t('SLA.FORM.CANCEL') }}
         </woot-button>
       </div>
     </form>
@@ -75,9 +75,7 @@ export default {
       uiFlags: 'slas/getUIFlags',
     }),
     pageTitle() {
-      return `${this.$t('SLA_MGMT.EDIT.TITLE')} - ${
-        this.selectedResponse.title
-      }`;
+      return `${this.$t('SLA.EDIT.TITLE')} - ${this.selectedResponse.title}`;
     },
   },
   mounted() {
@@ -103,11 +101,11 @@ export default {
           show_on_sidebar: this.showOnSidebar,
         })
         .then(() => {
-          this.showAlert(this.$t('SLA_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+          this.showAlert(this.$t('SLA.EDIT.API.SUCCESS_MESSAGE'));
           setTimeout(() => this.onClose(), 10);
         })
         .catch(() => {
-          this.showAlert(this.$t('SLA_MGMT.EDIT.API.ERROR_MESSAGE'));
+          this.showAlert(this.$t('SLA.EDIT.API.ERROR_MESSAGE'));
         });
     },
   },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
index 2d01d4ba5..fc8729d7f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
@@ -6,7 +6,7 @@
       icon="add-circle"
       @click="openAddPopup"
     >
-      {{ $t('SLA_MGMT.HEADER_BTN_TXT') }}
+      {{ $t('SLA.HEADER_BTN_TXT') }}
     </woot-button>
     <div class="flex flex-row gap-4">
       <div class="w-[60%]">
@@ -14,18 +14,15 @@
           v-if="!uiFlags.isFetching && !records.length"
           class="flex h-full items-center flex-col justify-center"
         >
-          {{ $t('SLA_MGMT.LIST.404') }}
+          {{ $t('SLA.LIST.404') }}
         </p>
         <woot-loading-state
           v-if="uiFlags.isFetching"
-          :message="$t('SLA_MGMT.LOADING')"
+          :message="$t('SLA.LOADING')"
         />
         <table v-if="!uiFlags.isFetching && records.length" class="woot-table">
           <thead>
-            <th
-              v-for="thHeader in $t('SLA_MGMT.LIST.TABLE_HEADER')"
-              :key="thHeader"
-            >
+            <th v-for="thHeader in $t('SLA.LIST.TABLE_HEADER')" :key="thHeader">
               {{ thHeader }}
             </th>
           </thead>
@@ -48,7 +45,7 @@
               </td>
               <td class="button-wrapper">
                 <woot-button
-                  v-tooltip.top="$t('SLA_MGMT.FORM.EDIT')"
+                  v-tooltip.top="$t('SLA.FORM.EDIT')"
                   variant="smooth"
                   size="tiny"
                   color-scheme="secondary"
@@ -58,7 +55,7 @@
                   @click="openEditPopup(sla)"
                 />
                 <woot-button
-                  v-tooltip.top="$t('SLA_MGMT.FORM.DELETE')"
+                  v-tooltip.top="$t('SLA.FORM.DELETE')"
                   variant="smooth"
                   color-scheme="alert"
                   size="tiny"
@@ -74,7 +71,7 @@
       </div>
 
       <div class="w-[34%]">
-        <span v-dompurify-html="$t('SLA_MGMT.SIDEBAR_TXT')" />
+        <span v-dompurify-html="$t('SLA.SIDEBAR_TXT')" />
       </div>
     </div>
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
@@ -89,8 +86,8 @@
       :show.sync="showDeleteConfirmationPopup"
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
-      :title="$t('SLA_MGMT.DELETE.CONFIRM.TITLE')"
-      :message="$t('SLA_MGMT.DELETE.CONFIRM.MESSAGE')"
+      :title="$t('SLA.DELETE.CONFIRM.TITLE')"
+      :message="$t('SLA.DELETE.CONFIRM.MESSAGE')"
       :message-value="deleteMessage"
       :confirm-text="deleteConfirmText"
       :reject-text="deleteRejectText"
@@ -126,10 +123,10 @@ export default {
     }),
     // Delete Modal
     deleteConfirmText() {
-      return this.$t('SLA_MGMT.DELETE.CONFIRM.YES');
+      return this.$t('SLA.DELETE.CONFIRM.YES');
     },
     deleteRejectText() {
-      return this.$t('SLA_MGMT.DELETE.CONFIRM.NO');
+      return this.$t('SLA.DELETE.CONFIRM.NO');
     },
     deleteMessage() {
       return ` ${this.selectedResponse.title}?`;
@@ -171,10 +168,10 @@ export default {
       this.$store
         .dispatch('slas/delete', id)
         .then(() => {
-          this.showAlert(this.$t('SLA_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+          this.showAlert(this.$t('SLA.DELETE.API.SUCCESS_MESSAGE'));
         })
         .catch(() => {
-          this.showAlert(this.$t('SLA_MGMT.DELETE.API.ERROR_MESSAGE'));
+          this.showAlert(this.$t('SLA.DELETE.API.ERROR_MESSAGE'));
         })
         .finally(() => {
           this.loading[this.selectedResponse.id] = false;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js b/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
index 27fdc161a..47d1527f1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
@@ -9,7 +9,7 @@ export default {
       path: frontendURL('accounts/:accountId/settings/sla'),
       component: SettingsContent,
       props: {
-        headerTitle: 'SLA_MGMT.HEADER',
+        headerTitle: 'SLA.HEADER',
         icon: 'tag',
         showNewButton: false,
       },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js b/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
index 74c2a2fbf..17d4eccd4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
@@ -5,11 +5,11 @@ export default {
       if (!this.$v.title.$error) {
         errorMessage = '';
       } else if (!this.$v.title.required) {
-        errorMessage = this.$t('SLA_MGMT.FORM.NAME.REQUIRED_ERROR');
+        errorMessage = this.$t('SLA.FORM.NAME.REQUIRED_ERROR');
       } else if (!this.$v.title.minLength) {
-        errorMessage = this.$t('SLA_MGMT.FORM.NAME.MINIMUM_LENGTH_ERROR');
+        errorMessage = this.$t('SLA.FORM.NAME.MINIMUM_LENGTH_ERROR');
       } else if (!this.$v.title.validLabelCharacters) {
-        errorMessage = this.$t('SLA_MGMT.FORM.NAME.VALID_ERROR');
+        errorMessage = this.$t('SLA.FORM.NAME.VALID_ERROR');
       }
       return errorMessage;
     },