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

feat: SLA List Item component (#9135)

Browse Source 
- Base settings list and list item components.
- SLA list item component.

Fixes: https://linear.app/chatwoot/issue/CW-3126/create-a-sla-list-item-component-with-the-new-design


Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
This commit is contained in:
Sivin Varghese
2024-03-21 19:30:11 +05:30
committed by GitHub
parent 762a39330a
commit c51492c674
11 changed files with 227 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/dashboard/assets/scss/_layout.scss
View File

@@ -1,11 +1,10 @@
// scss-lint:disable SpaceAfterPropertyColon
// @import 'shared/assets/fonts/inter';
@import 'shared/assets/fonts/inter';
// Inter,
html,
body {
font-family:
'PlusJakarta',
Inter,
-apple-system,
system-ui,
BlinkMacSystemFont,

14
app/javascript/dashboard/i18n/locale/en/sla.json
View File

@@ -19,7 +19,19 @@
"NRT",
"RT",
"Business Hours"
]
],
"BUSINESS_HOURS_ON": "Business hours on",
"BUSINESS_HOURS_OFF": "Business hours off",
"RESPONSE_TYPES": {
"FRT": "First response time threshold",
"NRT": "Next response time threshold",
"RT": "Resolution time threshold",
"SHORT_HAND": {
"FRT": "FRT",
"NRT": "NRT",
"RT": "RT"
}
}
},
"FORM": {
"NAME": {

6
app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<div class="flex flex-col w-full h-full gap-10 font-inter">
<slot name="header" />
<slot name="body" />
</div>
</template>

2
app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
View File

@@ -9,7 +9,7 @@ defineProps({
<template>
<div
class="flex flex-col w-full h-full px-5 pt-8 m-0 overflow-auto bg-white sm:px-16 sm:pt-16 dark:bg-slate-900"
class="flex flex-col w-full h-full px-5 pt-8 pb-3 m-0 overflow-auto bg-white sm:px-16 sm:pt-16 dark:bg-slate-900"
>
<div class="flex items-start max-w-[900px] w-full">
<keep-alive v-if="keepAlive">

8
app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
View File

@@ -49,7 +49,7 @@ const openInNewTab = url => {
</div>
</div>
<h1
class="text-2xl font-medium tracking-tight text-slate-900 dark:text-slate-25"
class="text-2xl font-medium tracking-[-1.5%] text-slate-900 dark:text-slate-25"
>
{{ title }}
</h1>
@@ -63,7 +63,9 @@ const openInNewTab = url => {
<div
class="flex flex-col gap-2 text-slate-600 dark:text-slate-300 max-w-[721px] w-full"
>
<p class="mb-0 text-sm font-normal">
<p
class="mb-0 text-sm font-normal tracking-[0.5%] line-clamp-5 sm:line-clamp-none"
>
<slot name="description">{{ description }}</slot>
</p>
<!-- Conditional link -->
@@ -72,7 +74,7 @@ const openInNewTab = url => {
:href="href"
target="_blank"
rel="noopener noreferrer"
class="sm:inline-flex hidden gap-1 w-fit items-center text-woot-500 dark:text-woot-500 text-sm font-medium tracking=[-0.6%] hover:underline"
class="sm:inline-flex hidden tracking-[-0.6%] gap-1 w-fit items-center text-woot-500 dark:text-woot-500 text-sm font-medium tracking=[-0.6%] hover:underline"
>
{{ linkText }}
<fluent-icon

53
app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue Normal file
View File

@@ -0,0 +1,53 @@
<script setup>
defineProps({
title: {
type: String,
default: '',
},
description: {
type: String,
default: '',
},
});
</script>
<template>
<div
class="flex relative flex-col sm:flex-row p-4 gap-4 sm:p-6 justify-between shadow-sm sm:divide-x sm:divide-slate-75 sm:dark:divide-slate-700/50 group bg-white border border-solid rounded-xl dark:bg-slate-800 border-slate-75 dark:border-slate-700/50 max-w-[900px] w-full"
>
<!-- left side section -->
<slot name="leftSection">
<div class="flex flex-col min-w-0 items-start gap-3 max-w-[480px] w-full">
<div
class="flex items-center justify-between w-full gap-3 sm:justify-normal whitespace-nowrap"
>
<h3
class="justify-between text-sm tracking-[-0.6%] font-medium truncate w-fit sm:justify-normal text-slate-900 dark:text-slate-25"
>
<slot name="title">
{{ title }}
</slot>
</h3>
<slot name="label" />
</div>
<p
class="text-sm text-slate-600 tracking-[0.5%] dark:text-slate-300 max-w-[400px] w-full line-clamp-2"
>
<slot name="description">
{{ description }}
</slot>
</p>
</div>
</slot>
<!-- right side section -->
<slot name="rightSection" />
<!-- actions section -->
<div
v-if="$slots.actions"
class="absolute flex-col items-center hidden gap-1 border-none ltr:-right-3 rtl:-left-3 top-3 group-hover:flex"
>
<slot name="actions" />
</div>
</div>
</template>

39
app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue Normal file
View File

@@ -0,0 +1,39 @@
<script setup>
defineProps({
hasBusinessHours: {
type: Boolean,
required: true,
},
});
</script>
<template>
<div
class="inline-flex items-center min-w-0 gap-1 px-1.5 sm:px-2 py-1 border border-solid rounded-lg border-slate-75 dark:border-slate-700/50"
>
<fluent-icon
size="14"
:icon="hasBusinessHours ? 'alarm-on' : 'alarm-off'"
type="outline"
class="flex-shrink-0"
:class="
hasBusinessHours
? 'text-slate-600 dark:text-slate-400'
: 'text-slate-300 dark:text-slate-700'
"
/>
<span
class="hidden text-xs tracking-[0.2%] font-normal truncate sm:block"
:class="
hasBusinessHours
? 'text-slate-600 dark:text-slate-400'
: 'text-slate-300 dark:text-slate-700'
"
>
{{
hasBusinessHours
? $t('SLA.LIST.BUSINESS_HOURS_ON')
: $t('SLA.LIST.BUSINESS_HOURS_OFF')
}}
</span>
</div>
</template>

64
app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue Normal file
View File

@@ -0,0 +1,64 @@
<script setup>
import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
import SLAResponseTime from './SLAResponseTime.vue';
import SLABusinessHoursLabel from './SLABusinessHoursLabel.vue';
defineProps({
slaName: {
type: String,
required: true,
},
description: {
type: String,
required: true,
},
firstResponse: {
type: String,
required: true,
},
nextResponse: {
type: String,
required: true,
},
resolutionTime: {
type: String,
required: true,
},
hasBusinessHours: {
type: Boolean,
required: true,
},
isLoading: {
type: Boolean,
default: false,
},
});
</script>
<template>
<base-settings-list-item :title="slaName" :description="description">
<template #label>
<SLA-business-hours-label :has-business-hours="hasBusinessHours" />
</template>
<template #rightSection>
<div
class="flex items-center divide-x rtl:divide-x-reverse sm:rtl:!border-l-0 sm:rtl:!border-r sm:rtl:border-solid sm:rtl:border-slate-75 sm:rtl:dark:border-slate-700/50 gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between divide-slate-75 dark:divide-slate-700/50"
>
<SLA-response-time response-type="FRT" :response-time="firstResponse" />
<SLA-response-time response-type="NRT" :response-time="nextResponse" />
<SLA-response-time response-type="RT" :response-time="resolutionTime" />
</div>
</template>
<template #actions>
<woot-button
v-tooltip.top="$t('SLA.FORM.DELETE')"
variant="smooth"
color-scheme="alert"
size="tiny"
icon="delete"
class-names="grey-btn"
:is-loading="isLoading"
@click="$emit('click')"
/>
</template>
</base-settings-list-item>
</template>

36
app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue Normal file
View File

@@ -0,0 +1,36 @@
<script setup>
defineProps({
responseType: {
type: String,
default: '',
},
responseTime: {
type: String,
default: '',
},
});
</script>
<template>
<div
class="flex flex-row items-start w-full h-full gap-1 sm:items-end sm:px-6 sm:py-2 sm:gap-2 sm:flex-col"
>
<span
class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm ltr:pl-1.5 sm:ltr:pl-0 rtl:pr-1.5 sm:rtl:pr-0 text-slate-600 dark:text-slate-300"
>
<fluent-icon
v-tooltip.left="$t(`SLA.LIST.RESPONSE_TYPES.${responseType}`)"
size="14"
icon="information"
type="outline"
class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-slate-500 dark:text-slate-500"
/>
{{ $t(`SLA.LIST.RESPONSE_TYPES.SHORT_HAND.${responseType}`) }}
<span class="flex sm:hidden">:</span>
</span>
<span
class="text-sm sm:text-2xl font-medium tracking-[-1.5%] text-slate-900 dark:text-slate-25"
>
{{ responseTime }}
</span>
</div>
</template>