opendesk

1<template>
2  <Select
3    :model-value="agentStatusStore.myStatus"
4    :options="dropdownOptions"
5    :placeholder="__('Set status')"
6    variant="subtle"
7    @update:model-value="agentStatusStore.setMyStatus"
8  >
9    <template #item-prefix="{ item }">
10      <div
11        class="size-2 rounded-full flex-shrink-0"
12        :class="agentStatusStore.statusColor(item.value)"
13      />
14    </template>
15  </Select>
16</template>
17
18<script setup lang="ts">
19import { useAgentStatusStore } from "@/stores/agentStatus";
20import { __ } from "@/translation";
21import { Select } from "frappe-ui";
22import { computed } from "vue";
23
24const agentStatusStore = useAgentStatusStore();
25
26const dropdownOptions = computed(() =>
27  agentStatusStore.statusOptions.map((statusOption: string) => ({
28    label: __(statusOption),
29    value: statusOption,
30  }))
31);
32</script>
33