1<template>
2 <SettingsLayoutBase
3 :title="__('Email Accounts')"
4 :description="
5 __(
6 'Manage your email accounts and configure incoming and outgoing settings.'
7 )
8 "
9 >
10 <template #header-actions>
11 <Button
12 :label="__('New')"
13 theme="gray"
14 class="rtl:flex-row-reverse"
15 variant="solid"
16 @click="emit('update:step', 'email-add')"
17 icon-left="lucide-plus"
18 />
19 </template>
20 <template #content>
21 <!-- list accounts -->
22 <div
23 class="-ms-2 grow"
24 v-if="!emailAccounts.loading && Boolean(emailAccounts.data?.length)"
25 >
26 <div class="flex text-sm text-ink-gray-5">
27 <div class="ms-2">{{ __("Email account name") }}</div>
28 </div>
29 <hr class="mx-2 mt-2" />
30 <div
31 v-for="emailAccount in emailAccounts.data"
32 :key="emailAccount.name"
33 >
34 <EmailAccountCard
35 :emailAccount="emailAccount"
36 @click="emit('update:step', 'email-edit', emailAccount)"
37 />
38 <hr
39 class="mx-2"
40 v-if="
41 emailAccount !==
42 emailAccounts?.data[emailAccounts?.data?.length - 1]
43 "
44 />
45 </div>
46 </div>
47 <!-- fallback if no email accounts -->
48 <EmptyState
49 v-else-if="!emailAccounts.loading"
50 variant="badge"
51 :icon="EmailIcon"
52 :title="__('No email account found')"
53 :description="__('Add one to get started.')"
54 />
55 </template>
56 </SettingsLayoutBase>
57</template>
58
59<script setup lang="ts">
60import EmptyState from "@/components/EmptyState.vue";
61import SettingsLayoutBase from "@/components/layouts/SettingsLayoutBase.vue";
62import { EmailAccount } from "@/types";
63import { createListResource } from "frappe-ui";
64import { EmailIcon } from "../icons";
65import EmailAccountCard from "./EmailAccountCard.vue";
66
67const emit = defineEmits(["update:step"]);
68
69const emailAccounts = createListResource({
70 doctype: "Email Account",
71 cache: ["Email Accounts"],
72 fields: ["*"],
73 filters: {
74 email_id: ["Not Like", "%example%"],
75 },
76 pageLength: 10,
77 auto: true,
78 onSuccess: (accounts: EmailAccount[]) => {
79 // convert 0 to false to handle boolean fields
80 accounts.forEach((account) => {
81 account.enable_incoming = Boolean(account.enable_incoming);
82 account.enable_outgoing = Boolean(account.enable_outgoing);
83 account.default_incoming = Boolean(account.default_incoming);
84 account.default_outgoing = Boolean(account.default_outgoing);
85 });
86 },
87});
88</script>
89