akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: fix ui

Browse Source
This commit is contained in:
Vishnu Narayanan
2024-01-25 18:33:55 +05:30
parent d2f5b5f976
commit edd0d58c39
9 changed files with 189 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/api/sla.js
+1 -6
View File
@@ -1,4 +1,4 @@
/* global axios */
// /* global axios */
import ApiClient from './ApiClient';
@@ -6,11 +6,6 @@ class SlaAPI extends ApiClient {
constructor() {
super('sla_policies', { accountScoped: true });
}
get({ page }) {
const url = page ? `${this.url}?page=${page}` : this.url;
return axios.get(url);
}
}
export default new SlaAPI();
app/javascript/dashboard/i18n/locale/en/sla.json
+20 -10
View File
@@ -9,25 +9,35 @@
"404": "There are no slas available in this account.",
"TITLE": "Manage slas",
"DESC": "SLA let you group the conversations together.",
"TABLE_HEADER": ["Name", "Description", "Color"]
"TABLE_HEADER": ["Name", "Description", "FRT", "NRT", "RT", "Business Hours"]
},
"FORM": {
"NAME": {
"SLA": "SLA Name",
"PLACEHOLDER": "SLA name",
"LABEL": "SLA Name",
"PLACEHOLDER": "SLA Name",
"REQUIRED_ERROR": "SLA name is required",
"MINIMUM_LENGTH_ERROR": "Minimum length 2 is required",
"VALID_ERROR": "Only Alphabets, Numbers, Hyphen and Underscore are allowed"
},
"DESCRIPTION": {
"SLA": "Description",
"LABEL": "Description",
"PLACEHOLDER": "SLA Description"
},
"COLOR": {
"SLA": "Color"
"FIRST_RESPONSE_TIME": {
"LABEL": "First Response Time",
"PLACEHOLDER": "First Response Time"
},
"SHOW_ON_SIDEBAR": {
"SLA": "Show sla on sidebar"
"NEXT_RESPONSE_TIME": {
"LABEL": "Next Response Time",
"PLACEHOLDER": "Next Response Time"
},
"RESOLUTION_TIME": {
"LABEL": "Resolution Time",
"PLACEHOLDER": "Resolution Time"
},
"BUSINESS_HOURS": {
"LABEL": "Business Hours",
"PLACEHOLDER": "Business Hours"
},
"EDIT": "Edit",
"CREATE": "Create",
@@ -48,7 +58,7 @@
"ADD_ALL_SLAS": "Add all slas"
},
"ADD": {
"TITLE": "Add sla",
"TITLE": "Add SLA",
"DESC": "SLA let you group the conversations together.",
"API": {
"SUCCESS_MESSAGE": "SLA added successfully",
@@ -56,7 +66,7 @@
}
},
"EDIT": {
"TITLE": "Edit sla",
"TITLE": "Edit SLA",
"API": {
"SUCCESS_MESSAGE": "SLA updated successfully",
"ERROR_MESSAGE": "There was an error, please try again"
app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
+56 -50
View File
@@ -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
+63 -43
View File
@@ -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
+34 -17
View File
@@ -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
+1 -1
View File
@@ -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
+5 -5
View File
@@ -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 -9
View File
@@ -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: {},
};
app/javascript/dashboard/store/modules/sla.js
+8 -25
View File
@@ -24,14 +24,11 @@ export const getters = {
};
export const actions = {
get: async function getSLA({ commit }) {
get: async function get({ commit }) {
commit(types.SET_SLA_UI_FLAG, { isFetching: true });
try {
const response = await SlaAPI.get(true);
const sortedSLA = response.data.payload.sort((a, b) =>
a.title.localeCompare(b.title)
);
commit(types.SET_SLA, sortedSLA);
const response = await SlaAPI.get();
commit(types.SET_SLA, response.data.payload);
} catch (error) {
// Ignore error
} finally {
@@ -39,12 +36,12 @@ export const actions = {
}
},
create: async function createSLA({ commit }, cannedObj) {
create: async function create({ commit }, slaObj) {
commit(types.SET_SLA_UI_FLAG, { isCreating: true });
try {
const response = await SlaAPI.create(cannedObj);
const response = await SlaAPI.create(slaObj);
AnalyticsHelper.track(SLA_EVENTS.CREATE);
commit(types.ADD_SLA, response.data);
commit(types.ADD_SLA, response.data.payload);
} catch (error) {
const errorMessage = error?.response?.data?.message;
throw new Error(errorMessage);
@@ -53,31 +50,18 @@ export const actions = {
}
},
update: async function updateSLA({ commit }, { id, ...updateObj }) {
update: async function update({ commit }, { id, ...updateObj }) {
commit(types.SET_SLA_UI_FLAG, { isUpdating: true });
try {
const response = await SlaAPI.update(id, updateObj);
AnalyticsHelper.track(SLA_EVENTS.UPDATE);
commit(types.EDIT_SLA, response.data);
commit(types.EDIT_SLA, response.data.payload);
} catch (error) {
throw new Error(error);
} finally {
commit(types.SET_SLA_UI_FLAG, { isUpdating: false });
}
},
delete: async function deleteSLA({ commit }, id) {
commit(types.SET_SLA_UI_FLAG, { isDeleting: true });
try {
await SlaAPI.delete(id);
AnalyticsHelper.track(SLA_EVENTS.DELETED);
commit(types.DELETE_SLA, id);
} catch (error) {
throw new Error(error);
} finally {
commit(types.SET_SLA_UI_FLAG, { isDeleting: false });
}
},
};
export const mutations = {
@@ -91,7 +75,6 @@ export const mutations = {
[types.SET_SLA]: MutationHelpers.set,
[types.ADD_SLA]: MutationHelpers.create,
[types.EDIT_SLA]: MutationHelpers.update,
[types.DELETE_SLA]: MutationHelpers.destroy,
};
export default {