opendesk

1<template>
2  <div>
3    <!-- Loading -->
4    <div v-if="loading" class="flex items-center justify-center py-16">
5      <LoadingIndicator class="size-10" />
6    </div>
7
8    <!-- Empty -->
9    <div
10      v-else-if="!feedbackCount.data"
11      class="flex flex-col items-center justify-center gap-3 py-16 text-center"
12    >
13      <LucideStar class="h-7.5 w-7.5 text-ink-gray-4" />
14      <div class="flex flex-col gap-1 max-w-[282px] m-auto">
15        <p class="text-base-medium text-ink-gray-7">
16          {{ __("No feedback yet") }}
17        </p>
18        <p class="text-ink-gray-6 text-base">
19          {{
20            __("Feedback from this contact will appear here once available.")
21          }}
22        </p>
23      </div>
24    </div>
25
26    <!-- Content -->
27    <section v-else>
28      <FeedbackList :name="name" />
29    </section>
30  </div>
31</template>
32
33<script setup lang="ts">
34import { useContactFeedback } from "@/composables/contact";
35import { __ } from "@/translation";
36import { LoadingIndicator } from "frappe-ui";
37import LucideStar from "~icons/lucide/star";
38import FeedbackList from "./FeedbackList.vue";
39
40const props = defineProps<{
41  name: string;
42}>();
43
44const { feedbackCount, loading } = useContactFeedback(props.name);
45</script>
46