added upload and delete attachment

frontend/pages/profile/tickets/new.vue

@@ -1,4 +1,13 @@
 <script setup lang="ts">
+// imports
+
+import useCreateTicket, {
+    type CreateTicketRequest,
+} from "~/composables/api/tickets/useCreateTicket";
+import useUploadAttachment from "~/composables/api/tickets/useUploadAttachment";
+import { useToast } from "~/composables/global/useToast";
+import { QUERY_KEYS } from "~/constants";
+
 // meta
 
 definePageMeta({
@@ -15,6 +24,12 @@ type TicketCategory = {
 
 // state
 
+const router = useRouter();
+
+const { $queryClient: queryClient } = useNuxtApp();
+
+const { addToast } = useToast();
+
 const ticketCategories: TicketCategory[] = [
     {
         title: "مالی و حسابداری",
@@ -46,12 +61,76 @@ const ticketCategories: TicketCategory[] = [
     },
 ];
 
-const ticketData = ref({
+const ticketData = ref<CreateTicketRequest>({
-    category: undefined,
+    ticket_category: undefined,
     order: undefined,
-    message: "",
+    subject: "",
-    files: [],
+    content: "",
+    attachments: [],
 });
+
+// queries
+
+const { mutateAsync: createTicket, isPending: createTicketIsPending } =
+    useCreateTicket();
+
+const { mutate: uploadAttachment, isPending: uploadAttachmentIsPending } =
+    useUploadAttachment();
+
+// methods
+
+const handleUploadAttachment = (file: File) => {
+    uploadAttachment(
+        { file },
+        {
+            onSuccess: (data) => {
+                ticketData.value.attachments.push({ ...data });
+            },
+            onError: (error) => {
+                addToast({
+                    message: error.message
+                        ? error.message
+                        : "خطایی در آپلود پیوست رخ داد",
+                    options: {
+                        status: "error",
+                        description: "لطفا مجدد تلاش کنید",
+                    },
+                });
+            },
+        }
+    );
+};
+
+const handleSubmit = () => {
+    createTicket(
+        { ...ticketData.value },
+        {
+            onSuccess: () => {
+                router.push({ name: "profile-tickets" });
+                queryClient.invalidateQueries({
+                    queryKey: [QUERY_KEYS.tickets],
+                });
+                addToast({
+                    message: "تیکت شما با موفقیت ثبت شد",
+                    options: {
+                        status: "success",
+                        description:
+                            "پس از بررسی پشتیبانی به شما اطلاع رسانی می شود",
+                    },
+                });
+            },
+            onError: () => {
+                addToast({
+                    message: "خطایی در ثبت تیکت رخ داد",
+                    options: {
+                        status: "success",
+                        description: "لطفا مجدد تلاش کنید",
+                    },
+                });
+            },
+        }
+    );
+};
 </script>
 
 <template>
@@ -75,7 +154,7 @@ const ticketData = ref({
                     <Select
                         placeholder="انتخاب کنید"
                         variant="outlined"
-                        v-model="ticketData.category"
+                        v-model="ticketData.ticket_category"
                     >
                         <template #content>
                             <SelectGroup>
@@ -133,23 +212,39 @@ const ticketData = ref({
                         </template>
                     </Select>
                 </DataField>
+                <DataField
+                    id="subject"
+                    :required="true"
+                    label="عنوان تیکت"
+                    class="col-span-full"
+                >
+                    <Input
+                        v-model="ticketData.subject"
+                        placeholder="عنوان تیکت را اینجا بنویسید ..."
+                        variant="outlined"
+                    />
+                </DataField>
                 <DataField id="message" :required="true" label="متن تیکت">
                     <textarea
-                        v-model="ticketData.message"
+                        v-model="ticketData.content"
                         class="w-full bg-white border-[1.5px] border-slate-200 rounded-xl text-xs lg:text-sm p-5 text-black h-[10rem] lg:h-[20rem] transition resize-none outline-none focus:!border-black"
                         placeholder="متن تیکت را اینجا بنویسید ..."
                     />
                 </DataField>
-                <FileInput v-model="ticketData.files" />
+                <FileInput
+                    v-model="ticketData.attachments"
+                    @change="handleUploadAttachment"
+                    :loading="uploadAttachmentIsPending"
+                />
             </div>
         </ProfileSection>
         <div class="w-full flex-center py-5">
             <Button class="rounded-full px-20" end-icon="bi:send" size="md">
-                <!-- <Icon
+                <Icon
-                    v-if="createAddressIsPending"
+                    v-if="createTicketIsPending"
                     name="svg-spinners:3-dots-bounce"
-                /> -->
+                />
-                <span>ارسال تیکت</span>
+                <span v-else>ارسال تیکت</span>
             </Button>
         </div>
     </div>