LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Better SLA missed events popover (#9215)

Browse Source 
* feat: SLA events component

* feat: Add SLA event item component

* Update SLAPopoverCard.vue

* Update SLAPopoverCard.vue

* fix: Translation

* Update SLAEventItem.vue

* feat: complete sticky nrt

* chore: code cleanup

* Update SLACardLabel.vue

* chore: code cleanup

* chore: away click fixes

* feat: use tabular nums

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
This commit is contained in:
Muhsin Keloth
2024-04-10 12:49:38 +05:30
committed by GitHub
parent 9013450e00
commit aed156f359
7 changed files with 125 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
View File

@@ -1,45 +1,85 @@
<script setup>
import { format, fromUnixTime } from 'date-fns';
import { ref, computed } from 'vue';
defineProps({
allMissedSlas: {
import wootConstants from 'dashboard/constants/globals';
import SLAEventItem from './SLAEventItem.vue';
const { SLA_MISS_TYPES } = wootConstants;
const props = defineProps({
slaMissedEvents: {
type: Array,
default: () => [],
required: true,
},
});
const formatDate = timestamp => format(fromUnixTime(timestamp), 'PP');
const shouldShowAllNrts = ref(false);
const upperCase = str => str.toUpperCase();
const frtMisses = computed(() =>
props.slaMissedEvents.filter(
slaEvent => slaEvent.event_type === SLA_MISS_TYPES.FRT
)
);
const nrtMisses = computed(() => {
const missedEvents = props.slaMissedEvents.filter(
slaEvent => slaEvent.event_type === SLA_MISS_TYPES.NRT
);
return shouldShowAllNrts.value ? missedEvents : missedEvents.slice(0, 6);
});
const rtMisses = computed(() =>
props.slaMissedEvents.filter(
slaEvent => slaEvent.event_type === SLA_MISS_TYPES.RT
)
);
const shouldShowMoreNRTButton = computed(() => nrtMisses.value.length > 6);
const toggleShowAllNRT = () => {
shouldShowAllNrts.value = !shouldShowAllNrts.value;
};
</script>
<template>
<div
class="absolute flex flex-col items-start bg-[#fdfdfd] dark:bg-slate-800 z-50 p-4 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4"
class="absolute flex flex-col items-start bg-[#fdfdfd] dark:bg-slate-800 z-50 p-4 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
>
<div
v-for="missedSLA in allMissedSlas"
:key="missedSLA.id"
class="flex items-center justify-between w-full"
<span class="text-sm font-medium text-slate-900 dark:text-slate-25">
{{ $t('SLA.EVENTS.TITLE') }}
</span>
<SLA-event-item
v-if="frtMisses.length"
:label="$t('SLA.EVENTS.FRT')"
:items="frtMisses"
/>
<SLA-event-item
v-if="nrtMisses.length"
:label="$t('SLA.EVENTS.NRT')"
:items="nrtMisses"
>
<span
class="text-sm font-normal tracking-[-0.6%] w-[140px] truncate text-slate-900 dark:text-slate-50"
>
{{
$t(
`CONVERSATION.HEADER.SLA_POPOVER.${upperCase(missedSLA.event_type)}`
)
}}
</span>
<span
class="text-sm font-normal tracking-[-0.6%] text-slate-600 dark:text-slate-200"
>
{{ $t('CONVERSATION.HEADER.SLA_POPOVER.MISSED') }}
</span>
<span
class="text-sm font-normal tracking-[-0.6%] text-slate-900 dark:text-slate-50"
>
{{ formatDate(missedSLA.created_at) }}
</span>
</div>
<template #showMore>
<div
v-if="shouldShowMoreNRTButton"
class="flex flex-col items-end w-full"
>
<woot-button
size="small"
:icon="!shouldShowAllNrts ? 'plus-sign' : ''"
variant="link"
color-scheme="secondary"
class="hover:!no-underline !gap-1 hover:!bg-transparent dark:hover:!bg-transparent"
@click="toggleShowAllNRT"
>
{{
shouldShowAllNrts
? $t('SLA.EVENTS.HIDE', { count: nrtMisses.length })
: $t('SLA.EVENTS.SHOW_MORE', { count: nrtMisses.length })
}}
</woot-button>
</div>
</template>
</SLA-event-item>
<SLA-event-item
v-if="rtMisses.length"
:label="$t('SLA.EVENTS.RT')"
:items="rtMisses"
/>
</div>
</template>