Merge branch 'develop' into feat/CW-3082
This commit is contained in:
Shivam Mishra
@@ -38,13 +38,10 @@
|
||||
:contact-id="contact.id"
|
||||
attribute-type="contact_attribute"
|
||||
attribute-class="conversation--attribute"
|
||||
attribute-from="contact_panel"
|
||||
:custom-attributes="contact.custom_attributes"
|
||||
class="even"
|
||||
/>
|
||||
<custom-attribute-selector
|
||||
attribute-type="contact_attribute"
|
||||
:contact-id="contact.id"
|
||||
/>
|
||||
</accordion-item>
|
||||
</div>
|
||||
<div v-if="element.name === 'contact_labels'">
|
||||
@@ -85,7 +82,6 @@ import ContactConversations from 'dashboard/routes/dashboard/conversation/Contac
|
||||
import ContactInfo from 'dashboard/routes/dashboard/conversation/contact/ContactInfo.vue';
|
||||
import ContactLabel from 'dashboard/routes/dashboard/contacts/components/ContactLabels.vue';
|
||||
import CustomAttributes from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue';
|
||||
import CustomAttributeSelector from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue';
|
||||
import draggable from 'vuedraggable';
|
||||
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
|
||||
|
||||
@@ -96,7 +92,6 @@ export default {
|
||||
ContactInfo,
|
||||
ContactLabel,
|
||||
CustomAttributes,
|
||||
CustomAttributeSelector,
|
||||
draggable,
|
||||
},
|
||||
mixins: [uiSettingsMixin],
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
@on-sort-change="onSortChange"
|
||||
/>
|
||||
<table-footer
|
||||
class="border-t border-slate-75 dark:border-slate-700/50"
|
||||
:current-page="Number(meta.currentPage)"
|
||||
:total-count="meta.count"
|
||||
:page-size="15"
|
||||
|
||||
@@ -87,10 +87,7 @@
|
||||
attribute-type="contact_attribute"
|
||||
attribute-class="conversation--attribute"
|
||||
class="even"
|
||||
:contact-id="contact.id"
|
||||
/>
|
||||
<custom-attribute-selector
|
||||
attribute-type="contact_attribute"
|
||||
attribute-from="conversation_contact_panel"
|
||||
:contact-id="contact.id"
|
||||
/>
|
||||
</accordion-item>
|
||||
@@ -142,7 +139,6 @@ import ConversationParticipant from './ConversationParticipant.vue';
|
||||
import ContactInfo from './contact/ContactInfo.vue';
|
||||
import ConversationInfo from './ConversationInfo.vue';
|
||||
import CustomAttributes from './customAttributes/CustomAttributes.vue';
|
||||
import CustomAttributeSelector from './customAttributes/CustomAttributeSelector.vue';
|
||||
import draggable from 'vuedraggable';
|
||||
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
|
||||
import MacrosList from './Macros/List.vue';
|
||||
@@ -154,7 +150,6 @@ export default {
|
||||
ContactInfo,
|
||||
ConversationInfo,
|
||||
CustomAttributes,
|
||||
CustomAttributeSelector,
|
||||
ConversationAction,
|
||||
ConversationParticipant,
|
||||
draggable,
|
||||
|
||||
@@ -1,152 +1,109 @@
|
||||
<template>
|
||||
<div class="conversation--details">
|
||||
<contact-details-item
|
||||
v-if="initiatedAt"
|
||||
:title="$t('CONTACT_PANEL.INITIATED_AT')"
|
||||
:value="initiatedAt.timestamp"
|
||||
class="conversation--attribute"
|
||||
/>
|
||||
<contact-details-item
|
||||
v-if="browserLanguage"
|
||||
:title="$t('CONTACT_PANEL.BROWSER_LANGUAGE')"
|
||||
:value="browserLanguage"
|
||||
class="conversation--attribute"
|
||||
/>
|
||||
<contact-details-item
|
||||
v-if="referer"
|
||||
:title="$t('CONTACT_PANEL.INITIATED_FROM')"
|
||||
:value="referer"
|
||||
class="conversation--attribute"
|
||||
>
|
||||
<a :href="referer" rel="noopener noreferrer nofollow" target="_blank">
|
||||
{{ referer }}
|
||||
</a>
|
||||
</contact-details-item>
|
||||
<contact-details-item
|
||||
v-if="browserName"
|
||||
:title="$t('CONTACT_PANEL.BROWSER')"
|
||||
:value="browserName"
|
||||
class="conversation--attribute"
|
||||
/>
|
||||
<contact-details-item
|
||||
v-if="platformName"
|
||||
:title="$t('CONTACT_PANEL.OS')"
|
||||
:value="platformName"
|
||||
class="conversation--attribute"
|
||||
/>
|
||||
<contact-details-item
|
||||
v-if="ipAddress"
|
||||
:title="$t('CONTACT_PANEL.IP_ADDRESS')"
|
||||
:value="ipAddress"
|
||||
class="conversation--attribute"
|
||||
/>
|
||||
<custom-attributes
|
||||
attribute-type="conversation_attribute"
|
||||
attribute-class="conversation--attribute"
|
||||
:class="customAttributeRowClass"
|
||||
/>
|
||||
<custom-attribute-selector attribute-type="conversation_attribute" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLanguageName } from '../../../components/widgets/conversation/advancedFilterItems/languages';
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { getLanguageName } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
|
||||
import ContactDetailsItem from './ContactDetailsItem.vue';
|
||||
import CustomAttributes from './customAttributes/CustomAttributes.vue';
|
||||
import CustomAttributeSelector from './customAttributes/CustomAttributeSelector.vue';
|
||||
const props = defineProps({
|
||||
conversationAttributes: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
contactAttributes: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ContactDetailsItem,
|
||||
CustomAttributes,
|
||||
CustomAttributeSelector,
|
||||
},
|
||||
props: {
|
||||
conversationAttributes: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
contactAttributes: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
STATIC_ATTRIBUTES: [
|
||||
const referer = computed(() => props.conversationAttributes.referer);
|
||||
const initiatedAt = computed(
|
||||
() => props.conversationAttributes.initiated_at?.timestamp
|
||||
);
|
||||
|
||||
const browserInfo = props.conversationAttributes.browser;
|
||||
|
||||
const browserName = computed(() => {
|
||||
if (!browserInfo) return '';
|
||||
const { browser_name: name = '', browser_version: version = '' } =
|
||||
browserInfo;
|
||||
return `${name} ${version}`;
|
||||
});
|
||||
|
||||
const browserLanguage = computed(() =>
|
||||
getLanguageName(props.conversationAttributes.browser_language)
|
||||
);
|
||||
|
||||
const platformName = computed(() => {
|
||||
if (!browserInfo) return '';
|
||||
const { platform_name: name = '', platform_version: version = '' } =
|
||||
browserInfo;
|
||||
return `${name} ${version}`;
|
||||
});
|
||||
|
||||
const createdAtIp = computed(() => props.contactAttributes.created_at_ip);
|
||||
|
||||
const staticElements = computed(() =>
|
||||
[
|
||||
{
|
||||
name: 'initiated_at',
|
||||
label: 'CONTACT_PANEL.INITIATED_AT',
|
||||
content: initiatedAt,
|
||||
title: 'CONTACT_PANEL.INITIATED_AT',
|
||||
},
|
||||
{
|
||||
name: 'referer',
|
||||
label: 'CONTACT_PANEL.BROWSER',
|
||||
content: browserLanguage,
|
||||
title: 'CONTACT_PANEL.BROWSER_LANGUAGE',
|
||||
},
|
||||
{
|
||||
name: 'browserName',
|
||||
label: 'CONTACT_PANEL.BROWSER',
|
||||
content: referer,
|
||||
title: 'CONTACT_PANEL.INITIATED_FROM',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
name: 'platformName',
|
||||
label: 'CONTACT_PANEL.OS',
|
||||
content: browserName,
|
||||
title: 'CONTACT_PANEL.BROWSER',
|
||||
},
|
||||
{
|
||||
name: 'ipAddress',
|
||||
label: 'CONTACT_PANEL.IP_ADDRESS',
|
||||
content: platformName,
|
||||
title: 'CONTACT_PANEL.OS',
|
||||
},
|
||||
],
|
||||
computed: {
|
||||
referer() {
|
||||
return this.conversationAttributes.referer;
|
||||
{
|
||||
content: createdAtIp,
|
||||
title: 'CONTACT_PANEL.IP_ADDRESS',
|
||||
},
|
||||
initiatedAt() {
|
||||
return this.conversationAttributes.initiated_at;
|
||||
},
|
||||
browserName() {
|
||||
if (!this.conversationAttributes.browser) {
|
||||
return '';
|
||||
}
|
||||
const {
|
||||
browser_name: browserName = '',
|
||||
browser_version: browserVersion = '',
|
||||
} = this.conversationAttributes.browser;
|
||||
return `${browserName} ${browserVersion}`;
|
||||
},
|
||||
browserLanguage() {
|
||||
return getLanguageName(this.conversationAttributes.browser_language);
|
||||
},
|
||||
platformName() {
|
||||
if (!this.conversationAttributes.browser) {
|
||||
return '';
|
||||
}
|
||||
const { platform_name: platformName, platform_version: platformVersion } =
|
||||
this.conversationAttributes.browser;
|
||||
return `${platformName || ''} ${platformVersion || ''}`;
|
||||
},
|
||||
ipAddress() {
|
||||
const { created_at_ip: createdAtIp } = this.contactAttributes;
|
||||
return createdAtIp;
|
||||
},
|
||||
customAttributeRowClass() {
|
||||
const attributes = [
|
||||
'initiatedAt',
|
||||
'referer',
|
||||
'browserName',
|
||||
'platformName',
|
||||
'ipAddress',
|
||||
];
|
||||
const availableAttributes = attributes.filter(
|
||||
attribute => !!this[attribute]
|
||||
);
|
||||
return availableAttributes.length % 2 === 0 ? 'even' : 'odd';
|
||||
},
|
||||
},
|
||||
};
|
||||
].filter(attribute => !!attribute.content.value)
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="conversation--details">
|
||||
<ContactDetailsItem
|
||||
v-for="element in staticElements"
|
||||
:key="element.title"
|
||||
:title="$t(element.title)"
|
||||
:value="element.content.value"
|
||||
class="conversation--attribute"
|
||||
>
|
||||
<a
|
||||
v-if="element.type === 'link'"
|
||||
:href="referer"
|
||||
rel="noopener noreferrer nofollow"
|
||||
target="_blank"
|
||||
class="text-woot-400 dark:text-woot-600"
|
||||
>
|
||||
{{ referer }}
|
||||
</a>
|
||||
</ContactDetailsItem>
|
||||
<CustomAttributes
|
||||
:class="staticElements.length % 2 === 0 ? 'even' : 'odd'"
|
||||
attribute-class="conversation--attribute"
|
||||
attribute-from="conversation_panel"
|
||||
attribute-type="conversation_attribute"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.conversation--attribute {
|
||||
@apply border-slate-50 dark:border-slate-700 border-b border-solid;
|
||||
|
||||
@apply border-slate-50 dark:border-slate-700/50 border-b border-solid;
|
||||
&:nth-child(2n) {
|
||||
@apply bg-slate-25 dark:bg-slate-800;
|
||||
@apply bg-slate-25 dark:bg-slate-800/50;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -125,8 +125,9 @@
|
||||
>
|
||||
<span
|
||||
class="flex items-center h-10 px-2 text-sm border-solid bg-slate-50 border-y ltr:border-l rtl:border-r ltr:rounded-l-md rtl:rounded-r-md dark:bg-slate-700 text-slate-800 dark:text-slate-100 border-slate-200 dark:border-slate-600"
|
||||
>{{ socialProfile.prefixURL }}</span
|
||||
>
|
||||
{{ socialProfile.prefixURL }}
|
||||
</span>
|
||||
<input
|
||||
v-model="socialProfileUserNames[socialProfile.key]"
|
||||
class="input-group-field ltr:rounded-l-none rtl:rounded-r-none !mb-0"
|
||||
|
||||
-114
@@ -1,114 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-col w-full max-h-[12.5rem]">
|
||||
<h4
|
||||
class="text-sm text-slate-800 dark:text-slate-100 mb-1 overflow-hidden whitespace-nowrap text-ellipsis flex-grow"
|
||||
>
|
||||
{{ $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_SELECT.TITLE') }}
|
||||
</h4>
|
||||
<div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="search-input"
|
||||
autofocus="true"
|
||||
:placeholder="$t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_SELECT.PLACEHOLDER')"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-start items-start flex-grow flex-shrink flex-auto overflow-auto h-32"
|
||||
>
|
||||
<div class="w-full h-full">
|
||||
<woot-dropdown-menu>
|
||||
<custom-attribute-drop-down-item
|
||||
v-for="attribute in filteredAttributes"
|
||||
:key="attribute.attribute_display_name"
|
||||
:title="attribute.attribute_display_name"
|
||||
@click="onAddAttribute(attribute)"
|
||||
/>
|
||||
</woot-dropdown-menu>
|
||||
<div
|
||||
v-if="noResult"
|
||||
class="w-full justify-center items-center flex mb-2 h-[70%] text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
|
||||
>
|
||||
{{ $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_SELECT.NO_RESULT') }}
|
||||
</div>
|
||||
<woot-button
|
||||
class="float-right"
|
||||
icon="add"
|
||||
size="tiny"
|
||||
@click="addNewAttribute"
|
||||
>
|
||||
{{ $t('CUSTOM_ATTRIBUTES.FORM.ADD.TITLE') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomAttributeDropDownItem from './CustomAttributeDropDownItem.vue';
|
||||
import attributeMixin from 'dashboard/mixins/attributeMixin';
|
||||
export default {
|
||||
components: {
|
||||
CustomAttributeDropDownItem,
|
||||
},
|
||||
mixins: [attributeMixin],
|
||||
props: {
|
||||
attributeType: {
|
||||
type: String,
|
||||
default: 'conversation_attribute',
|
||||
},
|
||||
contactId: { type: Number, default: null },
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
filteredAttributes() {
|
||||
return this.attributes
|
||||
.filter(
|
||||
item =>
|
||||
!Object.keys(this.customAttributes).includes(item.attribute_key)
|
||||
)
|
||||
.filter(attribute => {
|
||||
return attribute.attribute_display_name
|
||||
.toLowerCase()
|
||||
.includes(this.search.toLowerCase());
|
||||
});
|
||||
},
|
||||
|
||||
noResult() {
|
||||
return this.filteredAttributes.length === 0;
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.focusInput();
|
||||
},
|
||||
|
||||
methods: {
|
||||
focusInput() {
|
||||
this.$refs.searchbar.focus();
|
||||
},
|
||||
addNewAttribute() {
|
||||
this.$router.push(
|
||||
`/app/accounts/${this.accountId}/settings/custom-attributes/list`
|
||||
);
|
||||
},
|
||||
async onAddAttribute(attribute) {
|
||||
this.$emit('add-attribute', attribute);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-input {
|
||||
@apply m-0 w-full border border-solid border-transparent h-8 text-sm text-slate-700 dark:text-slate-100 rounded-md focus:border-woot-500 bg-slate-50 dark:bg-slate-900;
|
||||
}
|
||||
</style>
|
||||
-79
@@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<woot-dropdown-item>
|
||||
<woot-button variant="clear" @click="onClick">
|
||||
<span class="label-text" :title="title">{{ title }}</span>
|
||||
</woot-button>
|
||||
</woot-dropdown-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AttributeDropDownItem',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click', this.title);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item-wrap {
|
||||
display: flex;
|
||||
|
||||
::v-deep .button__content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--w-700);
|
||||
}
|
||||
|
||||
.name-label-wrap {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
|
||||
.label-color--display {
|
||||
margin-right: var(--space-small);
|
||||
}
|
||||
|
||||
.label-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.1;
|
||||
padding-right: var(--space-small);
|
||||
padding-left: var(--space-small);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-color--display {
|
||||
border-radius: var(--border-radius-normal);
|
||||
height: var(--space-slab);
|
||||
margin-right: var(--space-smaller);
|
||||
margin-top: var(--space-micro);
|
||||
min-width: var(--space-slab);
|
||||
width: var(--space-slab);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
-138
@@ -1,138 +0,0 @@
|
||||
<template>
|
||||
<div class="custom-attribute--selector">
|
||||
<div
|
||||
v-on-clickaway="closeDropdown"
|
||||
class="label-wrap"
|
||||
@keyup.esc="closeDropdown"
|
||||
>
|
||||
<woot-button
|
||||
size="small"
|
||||
variant="link"
|
||||
icon="add"
|
||||
@click="toggleAttributeDropDown"
|
||||
>
|
||||
{{ $t('CUSTOM_ATTRIBUTES.ADD_BUTTON_TEXT') }}
|
||||
</woot-button>
|
||||
|
||||
<div class="dropdown-wrap">
|
||||
<div
|
||||
:class="{ 'dropdown-pane--open': showAttributeDropDown }"
|
||||
class="dropdown-pane"
|
||||
>
|
||||
<custom-attribute-drop-down
|
||||
v-if="showAttributeDropDown"
|
||||
:attribute-type="attributeType"
|
||||
:contact-id="contactId"
|
||||
@add-attribute="addAttribute"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomAttributeDropDown from './CustomAttributeDropDown.vue';
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
import attributeMixin from 'dashboard/mixins/attributeMixin';
|
||||
import { mixin as clickaway } from 'vue-clickaway';
|
||||
import { BUS_EVENTS } from 'shared/constants/busEvents';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomAttributeDropDown,
|
||||
},
|
||||
mixins: [clickaway, alertMixin, attributeMixin],
|
||||
props: {
|
||||
attributeType: {
|
||||
type: String,
|
||||
default: 'conversation_attribute',
|
||||
},
|
||||
contactId: { type: Number, default: null },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showAttributeDropDown: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async addAttribute(attribute) {
|
||||
try {
|
||||
const {
|
||||
attribute_key: attributeKey,
|
||||
attribute_display_type: attributeDisplayType,
|
||||
default_value: attributeDefaultValue,
|
||||
} = attribute;
|
||||
const isCheckbox = attributeDisplayType === 'checkbox';
|
||||
const defaultValue = isCheckbox ? false : attributeDefaultValue || null;
|
||||
if (this.attributeType === 'conversation_attribute') {
|
||||
await this.$store.dispatch('updateCustomAttributes', {
|
||||
conversationId: this.conversationId,
|
||||
customAttributes: {
|
||||
...this.customAttributes,
|
||||
[attributeKey]: defaultValue,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
await this.$store.dispatch('contacts/update', {
|
||||
id: this.contactId,
|
||||
custom_attributes: {
|
||||
...this.customAttributes,
|
||||
[attributeKey]: defaultValue,
|
||||
},
|
||||
});
|
||||
}
|
||||
bus.$emit(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, attributeKey);
|
||||
this.showAlert(this.$t('CUSTOM_ATTRIBUTES.FORM.ADD.SUCCESS'));
|
||||
} catch (error) {
|
||||
const errorMessage =
|
||||
error?.response?.message ||
|
||||
this.$t('CUSTOM_ATTRIBUTES.FORM.ADD.ERROR');
|
||||
this.showAlert(errorMessage);
|
||||
} finally {
|
||||
this.closeDropdown();
|
||||
}
|
||||
},
|
||||
|
||||
toggleAttributeDropDown() {
|
||||
this.showAttributeDropDown = !this.showAttributeDropDown;
|
||||
},
|
||||
|
||||
closeDropdown() {
|
||||
this.showAttributeDropDown = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-attribute--selector {
|
||||
width: 100%;
|
||||
padding: var(--space-slab) var(--space-normal);
|
||||
|
||||
.label-wrap {
|
||||
line-height: var(--space-medium);
|
||||
position: relative;
|
||||
|
||||
.dropdown-wrap {
|
||||
display: flex;
|
||||
left: -1px;
|
||||
margin-right: var(--space-medium);
|
||||
position: absolute;
|
||||
top: var(--space-medium);
|
||||
width: 100%;
|
||||
|
||||
.dropdown-pane {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--r-500);
|
||||
font-size: var(--font-size-mini);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
</style>
|
||||
+80
-7
@@ -1,23 +1,35 @@
|
||||
<template>
|
||||
<div class="custom-attributes--panel">
|
||||
<custom-attribute
|
||||
v-for="attribute in filteredAttributes"
|
||||
v-for="attribute in displayedAttributes"
|
||||
:key="attribute.id"
|
||||
:attribute-key="attribute.attribute_key"
|
||||
:attribute-type="attribute.attribute_display_type"
|
||||
:values="attribute.attribute_values"
|
||||
:label="attribute.attribute_display_name"
|
||||
:icon="attribute.icon"
|
||||
emoji=""
|
||||
:value="attribute.value"
|
||||
:show-actions="true"
|
||||
:attribute-regex="attribute.regex_pattern"
|
||||
:regex-cue="attribute.regex_cue"
|
||||
:class="attributeClass"
|
||||
:contact-id="contactId"
|
||||
@update="onUpdate"
|
||||
@delete="onDelete"
|
||||
@copy="onCopy"
|
||||
/>
|
||||
<!-- Show more and show less buttons show it if the filteredAttributes length is greater than 5 -->
|
||||
<div v-if="filteredAttributes.length > 5" class="flex px-2 py-2">
|
||||
<woot-button
|
||||
size="small"
|
||||
:icon="showAllAttributes ? 'chevron-up' : 'chevron-down'"
|
||||
variant="clear"
|
||||
color-scheme="primary"
|
||||
class="!px-2 hover:!bg-transparent dark:hover:!bg-transparent"
|
||||
@click="onClickToggle"
|
||||
>
|
||||
{{ toggleButtonText }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -25,13 +37,14 @@
|
||||
import CustomAttribute from 'dashboard/components/CustomAttribute.vue';
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
import attributeMixin from 'dashboard/mixins/attributeMixin';
|
||||
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
|
||||
import { copyTextToClipboard } from 'shared/helpers/clipboard';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomAttribute,
|
||||
},
|
||||
mixins: [alertMixin, attributeMixin],
|
||||
mixins: [alertMixin, attributeMixin, uiSettingsMixin],
|
||||
props: {
|
||||
attributeType: {
|
||||
type: String,
|
||||
@@ -42,8 +55,67 @@ export default {
|
||||
default: '',
|
||||
},
|
||||
contactId: { type: Number, default: null },
|
||||
attributeFrom: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showAllAttributes: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
toggleButtonText() {
|
||||
return !this.showAllAttributes
|
||||
? this.$t('CUSTOM_ATTRIBUTES.SHOW_MORE')
|
||||
: this.$t('CUSTOM_ATTRIBUTES.SHOW_LESS');
|
||||
},
|
||||
filteredAttributes() {
|
||||
return this.attributes.map(attribute => {
|
||||
// Check if the attribute key exists in customAttributes
|
||||
const hasValue = Object.hasOwnProperty.call(
|
||||
this.customAttributes,
|
||||
attribute.attribute_key
|
||||
);
|
||||
|
||||
const isCheckbox = attribute.attribute_display_type === 'checkbox';
|
||||
const defaultValue = isCheckbox ? false : '';
|
||||
|
||||
return {
|
||||
...attribute,
|
||||
// Set value from customAttributes if it exists, otherwise use default value
|
||||
value: hasValue
|
||||
? this.customAttributes[attribute.attribute_key]
|
||||
: defaultValue,
|
||||
};
|
||||
});
|
||||
},
|
||||
displayedAttributes() {
|
||||
// Show only the first 5 attributes or all depending on showAllAttributes
|
||||
if (this.showAllAttributes || this.filteredAttributes.length <= 5) {
|
||||
return this.filteredAttributes;
|
||||
}
|
||||
return this.filteredAttributes.slice(0, 5);
|
||||
},
|
||||
showMoreUISettingsKey() {
|
||||
return `show_all_attributes_${this.attributeFrom}`;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initializeSettings();
|
||||
},
|
||||
methods: {
|
||||
initializeSettings() {
|
||||
this.showAllAttributes =
|
||||
this.uiSettings[this.showMoreUISettingsKey] || false;
|
||||
},
|
||||
onClickToggle() {
|
||||
this.showAllAttributes = !this.showAllAttributes;
|
||||
this.updateUISettings({
|
||||
[this.showMoreUISettingsKey]: this.showAllAttributes,
|
||||
});
|
||||
},
|
||||
async onUpdate(key, value) {
|
||||
const updatedAttributes = { ...this.customAttributes, [key]: value };
|
||||
try {
|
||||
@@ -96,16 +168,17 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-attributes--panel {
|
||||
.conversation--attribute {
|
||||
@apply border-slate-50 dark:border-slate-700 border-b border-solid;
|
||||
@apply border-slate-50 dark:border-slate-700/50 border-b border-solid;
|
||||
}
|
||||
|
||||
&.odd {
|
||||
.conversation--attribute {
|
||||
&:nth-child(2n + 1) {
|
||||
@apply bg-slate-25 dark:bg-slate-800;
|
||||
@apply bg-slate-25 dark:bg-slate-800/50;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -113,7 +186,7 @@ export default {
|
||||
&.even {
|
||||
.conversation--attribute {
|
||||
&:nth-child(2n) {
|
||||
@apply bg-slate-25 dark:bg-slate-800;
|
||||
@apply bg-slate-25 dark:bg-slate-800/50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
:current-page="currentPage"
|
||||
:total-count="totalCount"
|
||||
:page-size="pageSize"
|
||||
class="dark:bg-slate-900 sticky bottom-0"
|
||||
class="dark:bg-slate-900 bottom-0 border-t border-slate-75 dark:border-slate-700/50"
|
||||
@page-change="onPageChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
+1
@@ -9,6 +9,7 @@
|
||||
:on-mark-all-done-click="onMarkAllDoneClick"
|
||||
/>
|
||||
<table-footer
|
||||
class="border-t border-slate-75 dark:border-slate-700/50"
|
||||
:current-page="Number(meta.currentPage)"
|
||||
:total-count="meta.count"
|
||||
:page-size="15"
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
:current-page="Number(meta.currentPage)"
|
||||
:total-count="meta.totalEntries"
|
||||
:page-size="meta.perPage"
|
||||
class="dark:bg-slate-900"
|
||||
class="!bg-slate-25 dark:!bg-slate-900 border-t border-slate-75 dark:border-slate-700/50"
|
||||
@page-change="onPageChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="flex flex-col flex-1 px-4 pt-4 overflow-auto">
|
||||
<SLAReportFilters @filter-change="onFilterChange" />
|
||||
<woot-button
|
||||
color-scheme="success"
|
||||
class-names="button--fixed-top"
|
||||
icon="arrow-download"
|
||||
@click="downloadReports"
|
||||
>
|
||||
{{ $t('SLA_REPORTS.DOWNLOAD_SLA_REPORTS') }}
|
||||
</woot-button>
|
||||
<div class="flex flex-col gap-6">
|
||||
<SLAMetrics
|
||||
:hit-rate="slaMetrics.hitRate"
|
||||
:no-of-breaches="slaMetrics.numberOfSLAMisses"
|
||||
:no-of-conversations="slaMetrics.numberOfConversations"
|
||||
:is-loading="uiFlags.isFetchingMetrics"
|
||||
/>
|
||||
<SLATable
|
||||
:sla-reports="slaReports"
|
||||
:is-loading="uiFlags.isFetching"
|
||||
:current-page="Number(slaMeta.currentPage)"
|
||||
:total-count="Number(slaMeta.count)"
|
||||
@page-change="onPageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import SLAMetrics from './components/SLA/SLAMetrics.vue';
|
||||
import SLATable from './components/SLA/SLATable.vue';
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
import SLAReportFilters from './components/SLA/SLAReportFilters.vue';
|
||||
import { generateFileName } from 'dashboard/helper/downloadHelper';
|
||||
export default {
|
||||
name: 'SLAReports',
|
||||
components: {
|
||||
SLAMetrics,
|
||||
SLATable,
|
||||
SLAReportFilters,
|
||||
},
|
||||
mixins: [alertMixin],
|
||||
data() {
|
||||
return {
|
||||
pageNumber: 1,
|
||||
from: 0,
|
||||
to: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
slaReports: 'slaReports/getAll',
|
||||
slaMetrics: 'slaReports/getMetrics',
|
||||
slaMeta: 'slaReports/getMeta',
|
||||
uiFlags: 'slaReports/getUIFlags',
|
||||
}),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchSLAMetrics();
|
||||
this.fetchSLAReports();
|
||||
},
|
||||
methods: {
|
||||
fetchSLAReports({ pageNumber } = {}) {
|
||||
this.$store.dispatch('slaReports/get', {
|
||||
page: pageNumber || this.pageNumber,
|
||||
from: this.from,
|
||||
to: this.to,
|
||||
});
|
||||
},
|
||||
fetchSLAMetrics() {
|
||||
this.$store.dispatch('slaReports/getMetrics', {
|
||||
from: this.from,
|
||||
to: this.to,
|
||||
});
|
||||
},
|
||||
onPageChange(pageNumber) {
|
||||
this.fetchSLAReports({ pageNumber });
|
||||
},
|
||||
onFilterChange({ from, to }) {
|
||||
this.from = from;
|
||||
this.to = to;
|
||||
this.fetchSLAReports();
|
||||
this.fetchSLAMetrics();
|
||||
},
|
||||
downloadReports() {
|
||||
const type = 'sla';
|
||||
try {
|
||||
this.$store.dispatch('slaReports/download', {
|
||||
fileName: generateFileName({ type, to: this.to }),
|
||||
...this.requestPayload,
|
||||
});
|
||||
} catch (error) {
|
||||
this.showAlert(this.$t('SLA_REPORTS.DOWNLOAD_FAILED'));
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
+3
-1
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div class="flex flex-col md:flex-row justify-between mb-4">
|
||||
<div class="md:grid flex flex-col filter-container gap-3 w-full">
|
||||
<div
|
||||
class="md:grid flex-col gap-3 w-full grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] p-5"
|
||||
>
|
||||
<reports-filters-date-range @on-range-change="onDateRangeChange" />
|
||||
<woot-date-range-picker
|
||||
v-if="isDateRangeSelected"
|
||||
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
|
||||
<span
|
||||
class="inline-flex items-center gap-1 text-sm text-slate-700 dark:text-slate-200 font-medium"
|
||||
class="inline-flex items-center gap-1 text-sm font-medium text-slate-700 dark:text-slate-200"
|
||||
>
|
||||
{{ label }}
|
||||
<fluent-icon
|
||||
@@ -9,12 +9,12 @@
|
||||
size="14"
|
||||
icon="information"
|
||||
type="outline"
|
||||
class="flex-shrink-0 text-sm font-normal flex sm:font-medium text-slate-500 dark:text-slate-500"
|
||||
class="flex flex-shrink-0 text-sm font-normal sm:font-medium text-slate-500 dark:text-slate-500"
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="w-12 h-6 mb-0.5 rounded-md bg-slate-50 animate-pulse"
|
||||
class="w-12 h-6 mb-0.5 rounded-md bg-slate-50 dark:bg-slate-800 animate-pulse"
|
||||
/>
|
||||
|
||||
<span v-else class="text-2xl font-medium text-slate-900 dark:text-slate-25">
|
||||
|
||||
+15
-2
@@ -13,9 +13,18 @@
|
||||
class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
|
||||
/>
|
||||
<SLAMetricCard
|
||||
:label="$t('SLA_REPORTS.METRICS.NO_OF_BREACHES.LABEL')"
|
||||
:label="$t('SLA_REPORTS.METRICS.NO_OF_MISSES.LABEL')"
|
||||
:value="noOfBreaches"
|
||||
:tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_BREACHES.TOOLTIP')"
|
||||
:tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_MISSES.TOOLTIP')"
|
||||
:is-loading="isLoading"
|
||||
/>
|
||||
<div
|
||||
class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
|
||||
/>
|
||||
<SLAMetricCard
|
||||
:label="$t('SLA_REPORTS.METRICS.NO_OF_CONVERSATIONS.LABEL')"
|
||||
:value="noOfConversations"
|
||||
:tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_CONVERSATIONS.TOOLTIP')"
|
||||
:is-loading="isLoading"
|
||||
/>
|
||||
</div>
|
||||
@@ -32,6 +41,10 @@ defineProps({
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
noOfConversations: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
|
||||
+91
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="flex flex-col md:flex-row justify-between mb-4">
|
||||
<div class="md:grid flex flex-col filter-container gap-3 w-full">
|
||||
<reports-filters-date-range @on-range-change="onDateRangeChange" />
|
||||
<woot-date-range-picker
|
||||
v-if="isDateRangeSelected"
|
||||
show-range
|
||||
class="no-margin auto-width"
|
||||
:value="customDateRange"
|
||||
:confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
|
||||
:placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
|
||||
@change="onCustomDateRangeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
|
||||
import ReportsFiltersDateRange from '../Filters/DateRange.vue';
|
||||
import subDays from 'date-fns/subDays';
|
||||
import { DATE_RANGE_OPTIONS } from '../../constants';
|
||||
import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
WootDateRangePicker,
|
||||
ReportsFiltersDateRange,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
selectedDateRange: DATE_RANGE_OPTIONS.LAST_7_DAYS,
|
||||
selectedGroupByFilter: null,
|
||||
customDateRange: [new Date(), new Date()],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isDateRangeSelected() {
|
||||
return (
|
||||
this.selectedDateRange.id === DATE_RANGE_OPTIONS.CUSTOM_DATE_RANGE.id
|
||||
);
|
||||
},
|
||||
to() {
|
||||
if (this.isDateRangeSelected) {
|
||||
return getUnixEndOfDay(this.customDateRange[1]);
|
||||
}
|
||||
return getUnixEndOfDay(new Date());
|
||||
},
|
||||
from() {
|
||||
if (this.isDateRangeSelected) {
|
||||
return getUnixStartOfDay(this.customDateRange[0]);
|
||||
}
|
||||
|
||||
const { offset } = this.selectedDateRange;
|
||||
const fromDate = subDays(new Date(), offset);
|
||||
return getUnixStartOfDay(fromDate);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
businessHoursSelected() {
|
||||
this.emitChange();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.emitChange();
|
||||
},
|
||||
methods: {
|
||||
emitChange() {
|
||||
const { from, to } = this;
|
||||
this.$emit('filter-change', {
|
||||
from,
|
||||
to,
|
||||
});
|
||||
},
|
||||
onDateRangeChange(selectedRange) {
|
||||
this.selectedDateRange = selectedRange;
|
||||
this.emitChange();
|
||||
},
|
||||
onCustomDateRangeChange(value) {
|
||||
this.customDateRange = value;
|
||||
this.emitChange();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.filter-container {
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
}
|
||||
</style>
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
<script setup>
|
||||
import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
|
||||
import CardLabels from 'dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue';
|
||||
import SLAViewDetails from './SLAViewDetails.vue';
|
||||
defineProps({
|
||||
slaName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
conversationId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
conversation: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
slaEvents: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="grid content-center items-center h-16 grid-cols-12 gap-4 px-6 py-0 w-full bg-white border-b last:border-b-0 last:rounded-b-xl border-slate-75 dark:border-slate-800/50 dark:bg-slate-900"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
|
||||
>
|
||||
<span class="text-slate-700 dark:text-slate-200">
|
||||
{{ `#${conversationId} ` }}
|
||||
</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">with </span>
|
||||
<span class="text-slate-700 dark:text-slate-200 capitalize truncate">{{
|
||||
conversation.contact.name
|
||||
}}</span>
|
||||
<card-labels
|
||||
class="w-[80%]"
|
||||
:conversation-id="conversationId"
|
||||
:conversation-labels="conversation.labels"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center capitalize py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right col-span-2"
|
||||
>
|
||||
{{ slaName }}
|
||||
</div>
|
||||
<div class="flex items-center gap-2 col-span-2">
|
||||
<user-avatar-with-name
|
||||
v-if="conversation.assignee"
|
||||
:user="conversation.assignee"
|
||||
/>
|
||||
<span v-else class="text-slate-600 dark:text-slate-200"> --- </span>
|
||||
</div>
|
||||
<SLAViewDetails :sla-events="slaEvents" />
|
||||
</div>
|
||||
</template>
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="min-w-full border rounded-xl border-slate-75 dark:border-slate-700/50"
|
||||
>
|
||||
<div
|
||||
class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 border-b bg-slate-25 border-slate-75 dark:border-slate-800 rounded-t-xl dark:bg-slate-900"
|
||||
>
|
||||
<table-header-cell
|
||||
:span="6"
|
||||
:label="$t('SLA_REPORTS.TABLE.HEADER.CONVERSATION')"
|
||||
/>
|
||||
<table-header-cell
|
||||
:span="2"
|
||||
:label="$t('SLA_REPORTS.TABLE.HEADER.POLICY')"
|
||||
/>
|
||||
<table-header-cell
|
||||
:span="2"
|
||||
:label="$t('SLA_REPORTS.TABLE.HEADER.AGENT')"
|
||||
/>
|
||||
<table-header-cell :span="2" label="" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="flex items-center rounded-b-xl justify-center h-32 bg-white dark:bg-slate-900"
|
||||
>
|
||||
<spinner />
|
||||
<span>{{ $t('SLA_REPORTS.LOADING') }}</span>
|
||||
</div>
|
||||
<div v-else-if="slaReports.length > 0">
|
||||
<SLA-report-item
|
||||
v-for="slaReport in slaReports"
|
||||
:key="slaReport.applied_sla.id"
|
||||
:sla-name="slaReport.applied_sla.sla_name"
|
||||
:conversation="slaReport.conversation"
|
||||
:conversation-id="slaReport.conversation.id"
|
||||
:sla-events="slaReport.sla_events"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex items-center justify-center rounded-b-xl h-32 bg-white dark:bg-slate-900"
|
||||
>
|
||||
{{ $t('SLA_REPORTS.NO_RECORDS') }}
|
||||
</div>
|
||||
</div>
|
||||
<table-footer
|
||||
v-if="shouldShowFooter"
|
||||
:current-page="currentPage"
|
||||
:total-count="totalCount"
|
||||
:page-size="pageSize"
|
||||
@page-change="onPageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
|
||||
import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
|
||||
import SLAReportItem from './SLAReportItem.vue';
|
||||
import Spinner from 'shared/components/Spinner.vue';
|
||||
export default {
|
||||
name: 'SLATable',
|
||||
components: {
|
||||
SLAReportItem,
|
||||
TableFooter,
|
||||
Spinner,
|
||||
TableHeaderCell,
|
||||
},
|
||||
props: {
|
||||
slaReports: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
totalCount: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 25,
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageNo: 1,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
shouldShowFooter() {
|
||||
return this.currentPage === 1
|
||||
? this.totalCount > this.pageSize
|
||||
: this.slaReports.length > 0;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onPageChange(page) {
|
||||
this.$emit('page-change', page);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div v-on-clickaway="closeSlaEvents" class="label-wrap">
|
||||
<div
|
||||
class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
|
||||
>
|
||||
<div class="relative">
|
||||
<woot-button
|
||||
color-scheme="secondary"
|
||||
variant="link"
|
||||
@click="openSlaEvents"
|
||||
>
|
||||
{{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
|
||||
</woot-button>
|
||||
<SLA-popover-card
|
||||
v-if="showSlaPopoverCard"
|
||||
:all-missed-slas="slaEvents"
|
||||
class="right-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mixin as clickaway } from 'vue-clickaway';
|
||||
import SLAPopoverCard from 'dashboard/components/widgets/conversation/components/SLAPopoverCard.vue';
|
||||
export default {
|
||||
components: {
|
||||
SLAPopoverCard,
|
||||
},
|
||||
mixins: [clickaway],
|
||||
|
||||
props: {
|
||||
slaEvents: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showSlaPopoverCard: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
closeSlaEvents() {
|
||||
this.showSlaPopoverCard = false;
|
||||
},
|
||||
openSlaEvents() {
|
||||
this.showSlaPopoverCard = !this.showSlaPopoverCard;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -9,6 +9,7 @@ const TeamReports = () => import('./TeamReports.vue');
|
||||
const CsatResponses = () => import('./CsatResponses.vue');
|
||||
const BotReports = () => import('./BotReports.vue');
|
||||
const LiveReports = () => import('./LiveReports.vue');
|
||||
const SLAReports = () => import('./SLAReports.vue');
|
||||
|
||||
export default {
|
||||
routes: [
|
||||
@@ -151,5 +152,22 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: frontendURL('accounts/:accountId/reports'),
|
||||
component: SettingsContent,
|
||||
props: {
|
||||
headerTitle: 'SLA_REPORTS.HEADER',
|
||||
icon: 'document-list-clock',
|
||||
keepAlive: false,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'sla',
|
||||
name: 'sla_reports',
|
||||
roles: ['administrator'],
|
||||
component: SLAReports,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@@ -5,6 +5,11 @@
|
||||
v-model="name"
|
||||
:class="{ error: $v.name.$error }"
|
||||
class="w-full"
|
||||
:styles="{
|
||||
borderRadius: '12px',
|
||||
padding: '6px 12px',
|
||||
fontSize: '14px',
|
||||
}"
|
||||
:label="$t('SLA.FORM.NAME.LABEL')"
|
||||
:placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
|
||||
:error="getSlaNameErrorMessage"
|
||||
@@ -13,6 +18,11 @@
|
||||
<woot-input
|
||||
v-model="description"
|
||||
class="w-full"
|
||||
:styles="{
|
||||
borderRadius: '12px',
|
||||
padding: '6px 12px',
|
||||
fontSize: '14px',
|
||||
}"
|
||||
:label="$t('SLA.FORM.DESCRIPTION.LABEL')"
|
||||
:placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
|
||||
/>
|
||||
@@ -29,23 +39,29 @@
|
||||
@isInValid="handleIsInvalid(index, $event)"
|
||||
/>
|
||||
|
||||
<div class="flex items-center w-full gap-2">
|
||||
<input id="sla_bh" v-model="onlyDuringBusinessHours" type="checkbox" />
|
||||
<label for="sla_bh">
|
||||
<div
|
||||
class="mt-3 flex h-10 items-center text-sm w-full gap-2 border border-solid border-slate-200 dark:border-slate-600 px-3 py-1.5 rounded-xl justify-between"
|
||||
>
|
||||
<span for="sla_bh" class="text-slate-700 dark:text-slate-200">
|
||||
{{ $t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER') }}
|
||||
</label>
|
||||
</span>
|
||||
<woot-switch id="sla_bh" v-model="onlyDuringBusinessHours" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end w-full gap-2 px-0 py-2">
|
||||
<div class="flex items-center justify-end w-full gap-2 mt-8">
|
||||
<woot-button
|
||||
class="px-4 rounded-xl button clear outline-woot-200/50 outline"
|
||||
@click.prevent="onClose"
|
||||
>
|
||||
{{ $t('SLA.FORM.CANCEL') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
:is-disabled="isSubmitDisabled"
|
||||
class="px-4 rounded-xl"
|
||||
:is-loading="uiFlags.isUpdating"
|
||||
>
|
||||
{{ submitLabel }}
|
||||
</woot-button>
|
||||
<woot-button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('SLA.FORM.CANCEL') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,24 @@
|
||||
<template>
|
||||
<div class="relative mt-2 w-full">
|
||||
<div class="flex items-center w-full gap-3">
|
||||
<woot-input
|
||||
v-model="thresholdTime"
|
||||
:class="{ error: $v.thresholdTime.$error }"
|
||||
class="w-full [&>input]:pr-24"
|
||||
class="flex-grow"
|
||||
:styles="{
|
||||
borderRadius: '12px',
|
||||
padding: '6px 12px',
|
||||
fontSize: '14px',
|
||||
}"
|
||||
:label="label"
|
||||
:placeholder="placeholder"
|
||||
:error="getThresholdTimeErrorMessage"
|
||||
@input="onThresholdTimeChange"
|
||||
/>
|
||||
<div class="absolute right-px h-9 top-[27px] flex items-center">
|
||||
<!-- the mt-7 handles the label offset -->
|
||||
<div class="mt-7">
|
||||
<select
|
||||
v-model="thresholdUnitValue"
|
||||
class="h-full rounded-[4px] hover:cursor-pointer font-medium border-1 border-solid bg-transparent border-transparent dark:border-transparent mb-0 py-0 pl-2 pr-7 text-slate-600 dark:text-slate-300 dark:focus:border-woot-500 focus:border-woot-500 text-sm"
|
||||
class="px-4 py-1.5 min-w-[6.5rem] h-10 text-sm font-medium border-0 bg-slate-50 rounded-xl hover:cursor-pointer pr-7 text-slate-800 dark:text-slate-300"
|
||||
@change="onThresholdUnitChange"
|
||||
>
|
||||
<option
|
||||
@@ -56,9 +62,9 @@ export default {
|
||||
thresholdTime: this.threshold || '',
|
||||
thresholdUnitValue: this.thresholdUnit,
|
||||
options: [
|
||||
{ value: 'Minutes', label: 'Minutes' },
|
||||
{ value: 'Hours', label: 'Hours' },
|
||||
{ value: 'Days', label: 'Days' },
|
||||
{ value: 'Minutes', label: 'minutes' },
|
||||
{ value: 'Hours', label: 'hours' },
|
||||
{ value: 'Days', label: 'days' },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
+15
-5
@@ -4,14 +4,22 @@ import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
|
||||
<template>
|
||||
<base-settings-list-item class="opacity-50">
|
||||
<template #title>
|
||||
<div class="w-24 h-[26px] rounded-md bg-slate-50 animate-pulse" />
|
||||
<div
|
||||
class="w-24 h-[26px] rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
|
||||
/>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="w-64 h-4 mb-0.5 rounded-md bg-slate-50 animate-pulse" />
|
||||
<div class="w-48 h-4 rounded-md bg-slate-50 animate-pulse" />
|
||||
<div
|
||||
class="w-64 h-4 mb-0.5 rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
|
||||
/>
|
||||
<div
|
||||
class="w-48 h-4 rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
|
||||
/>
|
||||
</template>
|
||||
<template #label>
|
||||
<div class="w-32 h-[26px] bg-slate-50 animate-pulse rounded-md" />
|
||||
<div
|
||||
class="w-32 h-[26px] bg-slate-50 dark:bg-slate-700 animate-pulse rounded-md"
|
||||
/>
|
||||
</template>
|
||||
<template #rightSection>
|
||||
<div
|
||||
@@ -22,7 +30,9 @@ import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
|
||||
:key="ii"
|
||||
class="flex justify-end w-1/3 h-full px-4"
|
||||
>
|
||||
<div class="w-32 h-full rounded-md bg-slate-50 animate-pulse" />
|
||||
<div
|
||||
class="w-32 h-full rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user