chore: refactor

This commit is contained in:
Vishnu Narayanan
2024-01-24 19:43:03 +05:30
parent d1039d4866
commit cb2fa4da45
6 changed files with 57 additions and 46 deletions
+16
View File
@@ -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();
@@ -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);
}
},
@@ -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'));
});
},
},
@@ -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;
@@ -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,
},
@@ -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;
},