opendesk

1<template>
2  <div
3    class="flex justify-between items-center border-outline-elevation-2 p-2 cursor-pointer hover:bg-surface-sidebar rounded-4 h-14"
4  >
5    <!-- avatar and name -->
6    <div class="flex justify-between items-center gap-2">
7      <EmailProviderIcon :logo="emailIcon[emailAccount.service]" />
8      <div class="rtl:text-right">
9        <p class="text-p-base-medium text-ink-gray-7">
10          {{ __(emailAccount.email_account_name) }}
11        </p>
12        <div class="text-p-sm w-full text-ink-gray-5 mt-1">
13          {{ __(emailAccount.email_id) }}
14        </div>
15      </div>
16    </div>
17    <div>
18      <Badge
19        variant="subtle"
20        :label="badgeTitleColor[0]"
21        :theme="badgeTitleColor[1]"
22      />
23    </div>
24    <!-- email id -->
25  </div>
26</template>
27
28<script setup lang="ts">
29import { EmailAccount } from "@/types";
30import { emailIcon } from "./emailConfig";
31import EmailProviderIcon from "./EmailProviderIcon.vue";
32import { computed } from "vue";
33import { __ } from "@/translation";
34
35interface P {
36  emailAccount: EmailAccount;
37}
38
39const props = defineProps<P>();
40
41const badgeTitleColor = computed(() => {
42  if (
43    props.emailAccount.default_incoming &&
44    props.emailAccount.default_outgoing
45  ) {
46    const color =
47      props.emailAccount.enable_incoming && props.emailAccount.enable_outgoing
48        ? "blue"
49        : "gray";
50    return [__("Default Sending and Inbox"), color];
51  } else if (props.emailAccount.default_incoming) {
52    const color = props.emailAccount.enable_incoming ? "blue" : "gray";
53    return [__("Default Inbox"), color];
54  } else if (props.emailAccount.default_outgoing) {
55    const color = props.emailAccount.enable_outgoing ? "blue" : "gray";
56    return [__("Default Sending"), color];
57  } else {
58    const color = props.emailAccount.enable_incoming ? "blue" : "gray";
59    return [__("Inbox"), color];
60  }
61});
62</script>
63
64<style scoped></style>
65