opendesk

1<template>
2  <div
3    v-if="slaPolicyList.list.loading && !slaPolicyList.list.data"
4    class="flex items-center justify-center absolute inset-x-0 top-5.5 bottom-0"
5  >
6    <LoadingIndicator class="w-4" />
7  </div>
8  <div v-else class="grow">
9    <div
10      v-if="!slaPolicyList.list.loading && !slaPolicyList.list.data?.length"
11      class="flex items-center justify-center absolute inset-x-0 top-5.5 bottom-0"
12    >
13      <div
14        class="p-4 size-14.5 rounded-full bg-surface-gray-1 flex justify-center items-center"
15      >
16        <ShieldCheck class="size-6 text-ink-gray-6" />
17      </div>
18      <div class="flex flex-col items-center gap-1">
19        <div class="text-base-medium text-ink-gray-6">
20          {{ __("No SLA found") }}
21        </div>
22        <div class="text-p-sm text-ink-gray-5 max-w-60 text-center">
23          {{ __("Add one to get started.") }}
24        </div>
25      </div>
26    </div>
27    <div v-else class="-ms-2">
28      <div
29        class="grid grid-cols-6 items-center gap-3 text-sm text-ink-gray-5 ms-2"
30      >
31        <div class="col-span-5">
32          {{ __("Policy name") }}
33        </div>
34        <div class="col-span-1">{{ __("Enabled") }}</div>
35      </div>
36      <hr class="mt-2 mx-2" />
37      <div v-for="(sla, index) in orderedPolicies" :key="sla.name">
38        <SlaPolicyListItem :data="sla" />
39        <hr v-if="index !== orderedPolicies.length - 1" class="mx-2" />
40      </div>
41    </div>
42  </div>
43</template>
44
45<script setup lang="ts">
46import { dayjs, LoadingIndicator } from "frappe-ui";
47import SlaPolicyListItem from "./SlaPolicyListItem.vue";
48import { computed, inject } from "vue";
49import ShieldCheck from "~icons/lucide/shield-check";
50import { SlaPolicy, SlaPolicyListResourceSymbol } from "@/types";
51
52const slaPolicyList = inject(SlaPolicyListResourceSymbol);
53
54// rank 0 means unranked, which is applied last
55const rankOrder = (sla: SlaPolicy) => sla.rank || Infinity;
56
57// mirrors the ordering in get_sla (od_service_level_agreement/utils.py) — keep in sync
58const orderedPolicies = computed(() =>
59  [...(slaPolicyList.list.data ?? [])].sort(
60    (a, b) =>
61      Number(a.default_sla) - Number(b.default_sla) ||
62      rankOrder(a) - rankOrder(b) ||
63      dayjs(a.creation).diff(dayjs(b.creation))
64  )
65);
66</script>
67