connected ticket page to api 50%

frontend/pages/profile/tickets/[id].vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import useGetTicket from "~/composables/api/tickets/useGetTicket";
+
 // meta
 
 definePageMeta({
@@ -15,74 +17,13 @@ const ticketData = ref({
     files: [],
 });
 
-const messages = [
-    {
-        is_user: true,
-        date: "2023-10-15T14:30:00Z",
-        username: "JohnDoe",
-        message: "Hey, did you get a chance to review the design files I sent?",
-        profile: "https://example.com/profiles/johndoe.jpg",
-        files: ["design-draft-1.pdf", "design-draft-2.pdf"],
-    },
-    {
-        is_user: false,
-        date: "2023-10-15T14:35:00Z",
-        username: "JaneSmith",
-        message:
-            "Yes, I just finished reviewing them. The second draft looks great!",
-        profile: "https://example.com/profiles/janesmith.jpg",
-        files: [],
-    },
-    {
-        is_user: true,
-        date: "2023-10-15T14:40:00Z",
-        username: "JohnDoe",
-        message:
-            "Awesome! Let me know if you need any changes before we finalize it.",
-        profile: "https://example.com/profiles/johndoe.jpg",
-        files: ["final-design-notes.txt"],
-    },
-    {
-        is_user: false,
-        date: "2023-10-15T14:35:00Z",
-        username: "JaneSmith",
-        message:
-            "Yes, I just finished reviewing them. The second draft looks great!",
-        profile: "https://example.com/profiles/janesmith.jpg",
-        files: [],
-    },
-    {
-        is_user: true,
-        date: "2023-10-15T14:40:00Z",
-        username: "JohnDoe",
-        message:
-            "Awesome! Let me know if you need any changes before we finalize it.",
-        profile: "https://example.com/profiles/johndoe.jpg",
-        files: ["final-design-notes.txt"],
-    },
-    {
-        is_user: false,
-        date: "2023-10-15T14:35:00Z",
-        username: "JaneSmith",
-        message:
-            "Yes, I just finished reviewing them. The second draft looks great!",
-        profile: "https://example.com/profiles/janesmith.jpg",
-        files: [],
-    },
-    {
-        is_user: true,
-        date: "2023-10-15T14:40:00Z",
-        username: "JohnDoe",
-        message:
-            "Awesome! Let me know if you need any changes before we finalize it.",
-        profile: "https://example.com/profiles/johndoe.jpg",
-        files: ["final-design-notes.txt"],
-    },
-];
-
 // computed
 
-const ticketId = computed(() => route.params.id);
+const ticketId = computed(() => route.params.id as string);
+
+// queries
+
+const { data: ticket, isLoading: ticketIsLoading } = useGetTicket(ticketId);
 </script>
 
 <template>
@@ -95,16 +36,6 @@ const ticketId = computed(() => route.params.id);
             <div
                 class="flex flex-col items-start w-1/2 gap-4 lg:gap-5 lg:w-full lg:items-center lg:flex-row"
             >
-                <div
-                    class="flex flex-col w-full gap-2 lg:py-2 lg:pe-5 lg:w-1/3 lg:border-e border-slate-200"
-                >
-                    <p class="text-xs lg:text-sm text-dynamic-secondary">
-                        شماره تیکت :
-                    </p>
-                    <p class="text-xs font-semibold lg:text-sm text-black">
-                        634932
-                    </p>
-                </div>
                 <div
                     class="flex flex-col w-full gap-2 lg:py-2 lg:pe-5 lg:w-1/3 lg:border-e border-slate-200"
                 >
@@ -112,7 +43,7 @@ const ticketId = computed(() => route.params.id);
                         دسته&zwnj;بندی :
                     </p>
                     <p class="text-xs font-semibold lg:text-sm text-black">
-                        گیفت&zwnj;کارت
+                        {{ ticket?.ticket_category }}
                     </p>
                 </div>
                 <div
@@ -124,7 +55,7 @@ const ticketId = computed(() => route.params.id);
                     <p
                         class="text-xs font-semibold lg:text-sm text-black text-dynamic-secondary"
                     >
-                        بسته شده
+                        {{ ticket?.status }}
                     </p>
                 </div>
                 <div class="flex flex-col w-full gap-2 lg:hidden border-black">
@@ -132,8 +63,7 @@ const ticketId = computed(() => route.params.id);
                         موضوع :
                     </p>
                     <p class="text-xs font-semibold lg:text-sm text-black">
-                        نمی&zwnj;دانم کد ارسال گیفت کارت خریداری شده را از کجا
-                        باید ببینم
+                        {{ ticket?.subject }}
                     </p>
                 </div>
                 <div class="items-center justify-end hidden w-1/4 lg:flex">
@@ -153,12 +83,12 @@ const ticketId = computed(() => route.params.id);
         <div
             class="hidden w-full text-sm px-5 pb-8 mt-3 border-b lg:block text-md border-slate-200"
         >
-            <span class="text-black/50"> موضوع : </span> نمی&zwnj;دانم کد ارسال
-            گیفت کارت خریداری شده را از کجا باید ببینم
+            <span class="text-black/50"> موضوع : </span>
+            {{ ticket?.subject }}
         </div>
 
         <div class="w-full flex flex-col gap-5 h-[32rem] overflow-y-auto">
-            <TicketBubble
+            <!-- <TicketBubble
                 v-for="(message, index) in messages"
                 :key="index"
                 :is_user="message.is_user"
@@ -167,7 +97,7 @@ const ticketId = computed(() => route.params.id);
                 :profile="message.profile"
                 :username="message.username"
                 :files="message.files"
-            />
+            /> -->
         </div>
 
         <div