hossein-por-shop/frontend/pages/profile/tickets/new.vue

<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({
    middleware: "check-is-logged-in",
    layout: "profile",
});

// types

type TicketCategory = {
    title: string;
    value: string;
};

// state

const router = useRouter();

const { $queryClient: queryClient } = useNuxtApp();

const { addToast } = useToast();

const ticketCategories: TicketCategory[] = [
    {
        title: "مالی و حسابداری",
        value: "finance_and_accounting",
    },
    {
        title: "پروفایل کاربری",
        value: "user_profile",
    },
    {
        title: "پیگیری سفارش",
        value: "order_tracking",
    },
    {
        title: "احراز هویت",
        value: "authentication",
    },
    {
        title: "محصول",
        value: "product",
    },
    {
        title: "اعلام باگ و خطا در وبسایت",
        value: "bug_and_error_reporting",
    },
    {
        title: "سایر",
        value: "other",
    },
];

const ticketData = ref<CreateTicketRequest>({
    ticket_category: undefined,
    order: undefined,
    subject: "",
    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>
    <div class="w-full flex flex-col gap-5">
        <ProfilePageTitle title="تیکت جدید" icon="bi:ticket" />

        <ProfileSection title="ارتباط با پشتیبانی">
            <template #button>
                <NuxtLink :to="{ name: 'profile-tickets' }">
                    <Button
                        class="rounded-full"
                        size="md"
                        end-icon="bi:arrow-left"
                    >
                        بازگشت به تیکت ها
                    </Button>
                </NuxtLink>
            </template>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
                <DataField id="category" :required="true" label="دسته بندی">
                    <Select
                        placeholder="انتخاب کنید"
                        variant="outlined"
                        v-model="ticketData.ticket_category"
                    >
                        <template #content>
                            <SelectGroup>
                                <SelectItem
                                    v-for="(
                                        category, index
                                    ) in ticketCategories"
                                    :key="index"
                                    class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
                                    :value="category.value"
                                >
                                    <SelectItemIndicator
                                        class="absolute left-0 w-[25px] inline-flex items-center justify-center"
                                    >
                                        <Icon name="bi:check" size="20" />
                                    </SelectItemIndicator>
                                    <SelectItemText
                                        class="text-end font-iran-yekan-x text-sm"
                                    >
                                        {{ category.title }}
                                    </SelectItemText>
                                </SelectItem>
                            </SelectGroup>
                        </template>
                    </Select>
                </DataField>
                <DataField id="orders" :required="true" label="خرید یا سفارش">
                    <Select
                        placeholder="انتخاب کنید"
                        variant="outlined"
                        v-model="ticketData.order"
                    >
                        <template #content>
                            <SelectGroup>
                                <SelectItem
                                    v-for="(
                                        category, index
                                    ) in ticketCategories"
                                    :key="index"
                                    class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
                                    :value="category.value"
                                >
                                    <SelectItemIndicator
                                        class="absolute left-0 w-[25px] inline-flex items-center justify-center"
                                    >
                                        <Icon name="bi:check" size="20" />
                                    </SelectItemIndicator>
                                    <SelectItemText
                                        class="text-end font-iran-yekan-x text-sm"
                                    >
                                        {{ category.title }}
                                    </SelectItemText>
                                </SelectItem>
                            </SelectGroup>
                        </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.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.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
                    v-if="createTicketIsPending"
                    name="svg-spinners:3-dots-bounce"
                />
                <span v-else>ارسال تیکت</span>
            </Button>
        </div>
    </div>
</template>

<style scoped></style>