opendesk

1<template>
2  <div v-if="customers?.length" class="flex items-center gap-1.5">
3    <div class="flex items-center">
4      <Tooltip
5        v-for="customer in visibleCustomers"
6        :key="customer.name"
7        :text="customer.name"
8      >
9        <Avatar
10          class="-mr-1.5 cursor-pointer ring-2 ring-[var(--surface-base)] transition hover:z-10 hover:scale-110"
11          shape="circle"
12          size="sm"
13          :image="customer.image"
14          :label="customer.name"
15          @click="goToCustomer(customer.name)"
16        />
17      </Tooltip>
18      <div
19        v-if="remainingCustomers.length"
20        class="relative -mr-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-surface-gray-2 text-2xs font-medium text-ink-gray-6 ring-2 ring-[var(--surface-base)]"
21      >
22        +{{ remainingCustomers.length }}
23      </div>
24    </div>
25    <span
26      class="text-sm text-ink-gray-8 ml-2"
27      :class="customers.length === 1 && 'cursor-pointer'"
28      v-on="
29        customers.length === 1
30          ? { click: () => goToCustomer(customers[0]!.name) }
31          : {}
32      "
33    >
34      {{ label }}
35    </span>
36  </div>
37</template>
38
39<script setup lang="ts">
40import { __ } from "@/translation";
41import { Avatar, Tooltip } from "frappe-ui";
42import { computed } from "vue";
43import { useRouter } from "vue-router";
44
45interface Customer {
46  name: string;
47  image?: string | null;
48}
49
50const props = defineProps<{
51  customers: Customer[];
52}>();
53
54const router = useRouter();
55
56const MAX_VISIBLE_AVATARS = 5;
57
58const visibleCustomers = computed(() =>
59  props.customers.slice(0, MAX_VISIBLE_AVATARS)
60);
61
62const remainingCustomers = computed(() =>
63  props.customers.slice(MAX_VISIBLE_AVATARS)
64);
65
66const label = computed(() =>
67  props.customers.length === 1
68    ? props.customers[0].name
69    : __("{0} Customers", [props.customers.length])
70);
71
72function goToCustomer(name: string): void {
73  router.push({ name: "Customer", params: { id: name } });
74}
75</script>
76