From df261fb1b4cdac9d50e0d147e3ec065f7d84d369 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Tue, 18 Feb 2025 23:42:43 +0330
Subject: [PATCH] added ticket new

---
 frontend/pages/profile/tickets/new.vue | 155 ++++++++++++++++++++++++-
 1 file changed, 153 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/profile/tickets/new.vue b/frontend/pages/profile/tickets/new.vue
index 4f02ff5..e79aff9 100644
--- a/frontend/pages/profile/tickets/new.vue
+++ b/frontend/pages/profile/tickets/new.vue
@@ -1,7 +1,158 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// meta
+
+definePageMeta({
+    middleware: "check-is-logged-in",
+    layout: "profile",
+});
+
+// types
+
+type TicketCategory = {
+    title: string;
+    value: string;
+};
+
+// state
+
+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({
+    category: undefined,
+    order: undefined,
+    message: "",
+    files: [],
+});
+</script>
 
 <template>
-    <div></div>
+    <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.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="message" :required="true" label="متن تیکت">
+                    <textarea
+                        v-model="ticketData.message"
+                        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" />
+            </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="createAddressIsPending"
+                    name="svg-spinners:3-dots-bounce"
+                /> -->
+                <span>ارسال تیکت</span>
+            </Button>
+        </div>
+    </div>
 </template>
 
 <style scoped></style>