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

refactor: move empty state to a separate component

Browse Source
This commit is contained in:
Shivam Mishra
2024-04-11 17:15:22 +05:30
parent aed156f359
commit ffd3154c94
3 changed files with 64 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
+8 -38
View File
@@ -10,44 +10,12 @@
<SLAListItemLoading v-for="ii in 2" :key="ii" class="mb-3" />
</template>
<template #body>
<div v-if="!records.length" class="w-full min-h-[12rem] relative">
<div class="w-full space-y-3">
<SLA-list-item
class="opacity-25 dark:opacity-20"
:sla-name="$t('SLA.LIST.EMPTY.TITLE_1')"
:description="$t('SLA.LIST.EMPTY.DESC_1')"
first-response="20m"
next-response="1h"
resolution-time="24h"
has-business-hours
/>
<SLA-list-item
class="opacity-25 dark:opacity-20"
:sla-name="$t('SLA.LIST.EMPTY.TITLE_2')"
:description="$t('SLA.LIST.EMPTY.DESC_2')"
first-response="2h"
next-response="4h"
resolution-time="4d"
has-business-hours
/>
</div>
<div
class="absolute inset-0 flex flex-col items-center justify-center w-full h-full bg-gradient-to-t from-white dark:from-slate-900 to-transparent"
>
<p class="max-w-xs text-sm font-medium text-center">
{{ $t('SLA.LIST.404') }}
</p>
<woot-button
color-scheme="primary"
icon="plus-sign"
class="px-5 mt-4 rounded-xl"
@click="openAddPopup"
>
{{ $t('SLA.ADD_ACTION_LONG') }}
</woot-button>
</div>
</div>
<div v-if="records.length" class="flex flex-col w-full h-full gap-3">
<SLAEmptyState
v-if="!records.length"
class="w-full min-h-[12rem] relative"
@primary-action="openAddPopup"
/>
<div v-else-if="records.length" class="flex flex-col w-full h-full gap-3">
<SLA-list-item
v-for="sla in records"
:key="sla.title"
@@ -84,6 +52,7 @@ import SettingsLayout from '../SettingsLayout.vue';
import SLAHeader from './components/SLAHeader.vue';
import SLAListItem from './components/SLAListItem.vue';
import SLAListItemLoading from './components/SLAListItemLoading.vue';
import SLAEmptyState from './components/SLAEmptyState.vue';
import { mapGetters } from 'vuex';
import { convertSecondsToTimeUnit } from '@chatwoot/utils';
@@ -97,6 +66,7 @@ export default {
SLAListItem,
SLAListItemLoading,
SettingsLayout,
SLAEmptyState,
},
mixins: [alertMixin],
data() {
app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue
+33
View File
@@ -0,0 +1,33 @@
<script setup>
import SLAListItem from './SLAListItem.vue';
</script>
<template>
<div class="w-full min-h-[12rem] relative">
<div class="w-full space-y-3">
<SLA-list-item
class="opacity-25 dark:opacity-20"
:sla-name="$t('SLA.LIST.EMPTY.TITLE_1')"
:description="$t('SLA.LIST.EMPTY.DESC_1')"
first-response="20m"
next-response="1h"
resolution-time="24h"
has-business-hours
/>
<SLA-list-item
class="opacity-25 dark:opacity-20"
:sla-name="$t('SLA.LIST.EMPTY.TITLE_2')"
:description="$t('SLA.LIST.EMPTY.DESC_2')"
first-response="2h"
next-response="4h"
resolution-time="4d"
has-business-hours
/>
</div>
<div
class="absolute inset-0 flex flex-col items-center justify-center w-full h-full bg-gradient-to-t from-white dark:from-slate-900 to-transparent"
>
<slot />
</div>
</div>
</template>
app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
+23
View File
@@ -0,0 +1,23 @@
<script setup>
import BaseEmptyState from './BaseEmptyState.vue';
import { defineEmits } from 'vue';
const emit = defineEmits(['primary-action']);
const primaryAction = () => emit('primary-action');
</script>
<template>
<base-empty-state>
<p class="max-w-xs text-sm font-medium text-center">
{{ $t('SLA.LIST.404') }}
</p>
<woot-button
color-scheme="primary"
icon="plus-sign"
class="px-5 mt-4 rounded-xl"
@click="primaryAction"
>
{{ $t('SLA.ADD_ACTION_LONG') }}
</woot-button>
</base-empty-state>
</template>