chore: refactor
This commit is contained in:
@@ -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;
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user