inbox.vue
2.28 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { breakpointsTailwind } from '@vueuse/core'
import type { Mail } from '~/types'
const { t } = useAppI18n()
const dashboardDataApi = useDashboardDataApi()
const tabItems = computed(() => [{
label: t('inbox.tabs.all'),
value: 'all'
}, {
label: t('inbox.tabs.unread'),
value: 'unread'
}])
const selectedTab = ref('all')
const { data: mails } = await dashboardDataApi.getMails()
// Filter mails based on the selected tab
const filteredMails = computed(() => {
if (selectedTab.value === 'unread') {
return mails.value.filter(mail => !!mail.unread)
}
return mails.value
})
const selectedMail = ref<Mail | null>()
const isMailPanelOpen = computed({
get() {
return !!selectedMail.value
},
set(value: boolean) {
if (!value) {
selectedMail.value = null
}
}
})
// Reset selected mail if it's not in the filtered mails
watch(filteredMails, () => {
if (!filteredMails.value.find(mail => mail.id === selectedMail.value?.id)) {
selectedMail.value = null
}
})
const breakpoints = useBreakpoints(breakpointsTailwind)
const isMobile = breakpoints.smaller('lg')
</script>
<template>
<UDashboardPanel
id="inbox-1"
:default-size="25"
:min-size="20"
:max-size="30"
resizable
>
<UDashboardNavbar :title="t('inbox.title')">
<template #leading>
<UDashboardSidebarCollapse />
</template>
<template #trailing>
<UBadge :label="filteredMails.length" variant="subtle" />
</template>
<template #right>
<UTabs
v-model="selectedTab"
:items="tabItems"
:content="false"
size="xs"
/>
</template>
</UDashboardNavbar>
<InboxList v-model="selectedMail" :mails="filteredMails" />
</UDashboardPanel>
<InboxMail v-if="selectedMail" :mail="selectedMail" @close="selectedMail = null" />
<div v-else class="hidden lg:flex flex-1 items-center justify-center">
<UIcon name="i-lucide-inbox" class="size-32 text-dimmed" />
</div>
<ClientOnly>
<USlideover v-if="isMobile" v-model:open="isMailPanelOpen">
<template #content>
<InboxMail v-if="selectedMail" :mail="selectedMail" @close="selectedMail = null" />
</template>
</USlideover>
</ClientOnly>
</template>