chore: fix ui

app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue

@@ -6,41 +6,60 @@
     />
     <form class="mx-0 flex flex-wrap" @submit.prevent="addSLA">
       <woot-input
-        v-model.trim="title"
-        :class="{ error: $v.title.$error }"
+        v-model.trim="name"
+        :class="{ error: $v.name.$error }"
         class="w-full sla-name--input"
-        :sla="$t('SLA.FORM.NAME.SLA')"
+        :label="$t('SLA.FORM.NAME.LABEL')"
         :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
-        :error="getSLATitleErrorMessage"
-        data-testid="sla-title"
-        @input="$v.title.$touch"
+        :error="getSlaNameErrorMessage"
+        data-testid="sla-name"
+        @input="$v.name.$touch"
       />
 
       <woot-input
         v-model.trim="description"
-        :class="{ error: $v.description.$error }"
         class="w-full"
-        :sla="$t('SLA.FORM.DESCRIPTION.SLA')"
+        :label="$t('SLA.FORM.DESCRIPTION.LABEL')"
         :placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
         data-testid="sla-description"
-        @input="$v.description.$touch"
       />
 
-      <div class="w-full">
-        <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.FORM.SHOW_ON_SIDEBAR.SLA') }}
-        </sla>
-      </div>
+      <woot-input
+        v-model.trim="firstResponseTimeThreshold"
+        class="w-full"
+        :label="$t('SLA.FORM.FIRST_RESPONSE_TIME.LABEL')"
+        :placeholder="$t('SLA.FORM.FIRST_RESPONSE_TIME.PLACEHOLDER')"
+        data-testid="sla-firstResponseTimeThreshold"
+      />
+
+      <woot-input
+        v-model.trim="nextResponseTimeThreshold"
+        class="w-full"
+        :label="$t('SLA.FORM.NEXT_RESPONSE_TIME.LABEL')"
+        :placeholder="$t('SLA.FORM.NEXT_RESPONSE_TIME.PLACEHOLDER')"
+        data-testid="sla-nextResponseTimeThreshold"
+      />
+
+      <woot-input
+        v-model.trim="resolutionTimeThreshold"
+        class="w-full"
+        :label="$t('SLA.FORM.RESOLUTION_TIME.LABEL')"
+        :placeholder="$t('SLA.FORM.RESOLUTION_TIME.PLACEHOLDER')"
+        data-testid="sla-resolutionTimeThreshold"
+      />
+
+      <woot-input
+        v-model.trim="onlyDuringBusinessHours"
+        class="w-full"
+        type="checkbox"
+        :label="$t('SLA.FORM.BUSINESS_HOURS.LABEL')"
+        :placeholder="$t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER')"
+        data-testid="sla-onlyDuringBusinessHours"
+      />
+
       <div class="flex justify-end items-center py-2 px-0 gap-2 w-full">
         <woot-button
-          :is-disabled="$v.title.$invalid || uiFlags.isCreating"
+          :is-disabled="$v.name.$invalid || uiFlags.isCreating"
           :is-loading="uiFlags.isCreating"
           data-testid="sla-submit"
         >
@@ -59,45 +78,41 @@ import alertMixin from 'shared/mixins/alertMixin';
 import validationMixin from './validationMixin';
 import { mapGetters } from 'vuex';
 import validations from './validations';
-import { getRandomColor } from 'dashboard/helper/labelColor';
 
 export default {
   mixins: [alertMixin, validationMixin],
-  props: {
-    prefillTitle: {
-      type: String,
-      default: '',
-    },
-  },
+  props: {},
   data() {
     return {
-      color: '#000',
+      name: '',
       description: '',
-      title: '',
+      firstResponseTimeThreshold: '',
+      nextResponseTimeThreshold: '',
+      resolutionTimeThreshold: '',
+      onlyDuringBusinessHours: '',
       showOnSidebar: true,
     };
   },
   validations,
   computed: {
     ...mapGetters({
-      uiFlags: 'slas/getUIFlags',
+      uiFlags: 'sla/getUIFlags',
     }),
   },
-  mounted() {
-    this.color = getRandomColor();
-    this.title = this.prefillTitle.toLowerCase();
-  },
+  mounted() {},
   methods: {
     onClose() {
       this.$emit('close');
     },
     async addSLA() {
       try {
-        await this.$store.dispatch('slas/create', {
-          color: this.color,
+        await this.$store.dispatch('sla/create', {
+          name: this.name,
           description: this.description,
-          title: this.title.toLowerCase(),
-          show_on_sidebar: this.showOnSidebar,
+          first_response_time_threshold: this.firstResponseTimeThreshold,
+          next_response_time_threshold: this.nextResponseTimeThreshold,
+          resolution_time_threshold: this.resolutionTimeThreshold,
+          only_during_business_hours: this.onlyDuringBusinessHours,
         });
         this.showAlert(this.$t('SLA.ADD.API.SUCCESS_MESSAGE'));
         this.onClose();
@@ -110,13 +125,4 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-// SLA API supports only lowercase letters
-.sla-name--input {
-  ::v-deep {
-    input {
-      @apply lowercase;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>

app/javascript/dashboard/routes/dashboard/settings/sla/EditSLA.vue

@@ -3,38 +3,57 @@
     <woot-modal-header :header-title="pageTitle" />
     <form class="mx-0 flex flex-wrap" @submit.prevent="editSLA">
       <woot-input
-        v-model.trim="title"
-        :class="{ error: $v.title.$error }"
+        v-model.trim="name"
+        :class="{ error: $v.name.$error }"
         class="w-full sla-name--input"
-        :sla="$t('SLA.FORM.NAME.SLA')"
+        :sla="$t('SLA.FORM.NAME.LABEL')"
         :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
-        :error="getSLATitleErrorMessage"
-        @input="$v.title.$touch"
+        :error="getSlaNameErrorMessage"
+        @input="$v.name.$touch"
       />
       <woot-input
         v-model.trim="description"
-        :class="{ error: $v.description.$error }"
         class="w-full"
-        :sla="$t('SLA.FORM.DESCRIPTION.SLA')"
+        :label="$t('SLA.FORM.DESCRIPTION.LABEL')"
         :placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
-        @input="$v.description.$touch"
+        data-testid="sla-description"
+      />
+
+      <woot-input
+        v-model.trim="firstResponseTimeThreshold"
+        class="w-full"
+        :label="$t('SLA.FORM.FIRST_RESPONSE_TIME.LABEL')"
+        :placeholder="$t('SLA.FORM.FIRST_RESPONSE_TIME.PLACEHOLDER')"
+        data-testid="sla-firstResponseTimeThreshold"
+      />
+
+      <woot-input
+        v-model.trim="nextResponseTimeThreshold"
+        class="w-full"
+        :label="$t('SLA.FORM.NEXT_RESPONSE_TIME.LABEL')"
+        :placeholder="$t('SLA.FORM.NEXT_RESPONSE_TIME.PLACEHOLDER')"
+        data-testid="sla-nextResponseTimeThreshold"
+      />
+
+      <woot-input
+        v-model.trim="resolutionTimeThreshold"
+        class="w-full"
+        :label="$t('SLA.FORM.RESOLUTION_TIME.LABEL')"
+        :placeholder="$t('SLA.FORM.RESOLUTION_TIME.PLACEHOLDER')"
+        data-testid="sla-resolutionTimeThreshold"
+      />
+
+      <woot-input
+        v-model.trim="onlyDuringBusinessHours"
+        class="w-full"
+        :label="$t('SLA.FORM.BUSINESS_HOURS.LABEL')"
+        :placeholder="$t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER')"
+        data-testid="sla-onlyDuringBusinessHours"
       />
 
-      <div class="w-full">
-        <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.FORM.SHOW_ON_SIDEBAR.SLA') }}
-        </sla>
-      </div>
       <div class="flex justify-end items-center py-2 px-0 gap-2 w-full">
         <woot-button
-          :is-disabled="$v.title.$invalid || uiFlags.isUpdating"
+          :is-disabled="$v.name.$invalid || uiFlags.isUpdating"
           :is-loading="uiFlags.isUpdating"
         >
           {{ $t('SLA.FORM.EDIT') }}
@@ -63,19 +82,21 @@ export default {
   },
   data() {
     return {
-      title: '',
+      name: '',
       description: '',
-      showOnSidebar: true,
-      color: '',
+      firstResponseTimeThreshold: '',
+      nextResponseTimeThreshold: '',
+      resolutionTimeThreshold: '',
+      onlyDuringBusinessHours: '',
     };
   },
   validations,
   computed: {
     ...mapGetters({
-      uiFlags: 'slas/getUIFlags',
+      uiFlags: 'sla/getUIFlags',
     }),
     pageTitle() {
-      return `${this.$t('SLA.EDIT.TITLE')} - ${this.selectedResponse.title}`;
+      return `${this.$t('SLA.EDIT.TITLE')} - ${this.selectedResponse.name}`;
     },
   },
   mounted() {
@@ -86,19 +107,27 @@ export default {
       this.$emit('close');
     },
     setFormValues() {
-      this.title = this.selectedResponse.title;
+      this.name = this.selectedResponse.name;
       this.description = this.selectedResponse.description;
-      this.showOnSidebar = this.selectedResponse.show_on_sidebar;
-      this.color = this.selectedResponse.color;
+      this.firstResponseTimeThreshold =
+        this.selectedResponse.first_response_time_threshold;
+      this.nextResponseTimeThreshold =
+        this.selectedResponse.next_response_time_threshold;
+      this.resolutionTimeThreshold =
+        this.selectedResponse.resolution_time_threshold;
+      this.onlyDuringBusinessHours =
+        this.selectedResponse.only_during_business_hours.toString();
     },
     editSLA() {
       this.$store
-        .dispatch('slas/update', {
+        .dispatch('sla/update', {
           id: this.selectedResponse.id,
-          color: this.color,
+          name: this.name,
           description: this.description,
-          title: this.title.toLowerCase(),
-          show_on_sidebar: this.showOnSidebar,
+          first_response_time_threshold: this.firstResponseTimeThreshold,
+          next_response_time_threshold: this.nextResponseTimeThreshold,
+          resolution_time_threshold: this.resolutionTimeThreshold,
+          only_during_business_hours: this.onlyDuringBusinessHours,
         })
         .then(() => {
           this.showAlert(this.$t('SLA.EDIT.API.SUCCESS_MESSAGE'));
@@ -111,13 +140,4 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-// SLA API supports only lowercase letters
-.sla-name--input {
-  ::v-deep {
-    input {
-      @apply lowercase;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>

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

@@ -27,10 +27,10 @@
             </th>
           </thead>
           <tbody>
-            <tr v-for="(sla, index) in records" :key="sla.title">
+            <tr v-for="sla in records" :key="sla.title">
               <td class="sla-title">
                 <span class="overflow-hidden whitespace-nowrap text-ellipsis">{{
-                  sla.title
+                  sla.name
                 }}</span>
               </td>
               <td>{{ sla.description }}</td>
@@ -40,7 +40,34 @@
                     class="sla-color--display"
                     :style="{ backgroundColor: sla.color }"
                   />
-                  {{ sla.color }}
+                  {{ sla.first_response_time_threshold }}
+                </div>
+              </td>
+              <td>
+                <div class="sla-color--container">
+                  <span
+                    class="sla-color--display"
+                    :style="{ backgroundColor: sla.color }"
+                  />
+                  {{ sla.next_response_time_threshold }}
+                </div>
+              </td>
+              <td>
+                <div class="sla-color--container">
+                  <span
+                    class="sla-color--display"
+                    :style="{ backgroundColor: sla.color }"
+                  />
+                  {{ sla.resolution_time_threshold }}
+                </div>
+              </td>
+              <td>
+                <div class="sla-color--container">
+                  <span
+                    class="sla-color--display"
+                    :style="{ backgroundColor: sla.color }"
+                  />
+                  {{ sla.only_during_business_hours }}
                 </div>
               </td>
               <td class="button-wrapper">
@@ -54,16 +81,6 @@
                   icon="edit"
                   @click="openEditPopup(sla)"
                 />
-                <woot-button
-                  v-tooltip.top="$t('SLA.FORM.DELETE')"
-                  variant="smooth"
-                  color-scheme="alert"
-                  size="tiny"
-                  icon="dismiss-circle"
-                  class-names="grey-btn"
-                  :is-loading="loading[sla.id]"
-                  @click="openDeletePopup(sla, index)"
-                />
               </td>
             </tr>
           </tbody>
@@ -118,8 +135,8 @@ export default {
   },
   computed: {
     ...mapGetters({
-      records: 'slas/getslas',
-      uiFlags: 'slas/getUIFlags',
+      records: 'sla/getSLA',
+      uiFlags: 'sla/getUIFlags',
     }),
     // Delete Modal
     deleteConfirmText() {
@@ -133,7 +150,7 @@ export default {
     },
   },
   mounted() {
-    this.$store.dispatch('slas/get');
+    this.$store.dispatch('sla/get');
   },
   methods: {
     openAddPopup() {
@@ -193,7 +210,7 @@ export default {
 }
 .sla-title {
   span {
-    @apply w-60 inline-block;
+    @apply inline-block;
   }
 }
 </style>

app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js

@@ -11,7 +11,7 @@ export default {
       props: {
         headerTitle: 'SLA.HEADER',
         icon: 'tag',
-        showNewButton: false,
+        showNewButton: true,
       },
       children: [
         {

app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js

@@ -1,14 +1,14 @@
 export default {
   computed: {
-    getLabelTitleErrorMessage() {
+    getSlaNameErrorMessage() {
       let errorMessage = '';
-      if (!this.$v.title.$error) {
+      if (!this.$v.name.$error) {
         errorMessage = '';
-      } else if (!this.$v.title.required) {
+      } else if (!this.$v.name.required) {
         errorMessage = this.$t('SLA.FORM.NAME.REQUIRED_ERROR');
-      } else if (!this.$v.title.minLength) {
+      } else if (!this.$v.name.minLength) {
         errorMessage = this.$t('SLA.FORM.NAME.MINIMUM_LENGTH_ERROR');
-      } else if (!this.$v.title.validLabelCharacters) {
+      } else if (!this.$v.name.validLabelCharacters) {
         errorMessage = this.$t('SLA.FORM.NAME.VALID_ERROR');
       }
       return errorMessage;

app/javascript/dashboard/routes/dashboard/settings/sla/validations.js

@@ -1,16 +1,8 @@
 import { required, minLength } from 'vuelidate/lib/validators';
 
-export const validLabelCharacters = (str = '') => !!str && !str.includes(' ');
-
 export default {
-  title: {
+  name: {
     required,
     minLength: minLength(2),
-    validLabelCharacters,
   },
-  description: {},
-  color: {
-    required,
-  },
-  showOnSidebar: {},
 };