create ticket section

src/views/Create.vue

@@ -25,10 +25,8 @@
         <div class="flex flex-col gap-1">
           <FloatLabel>
             <Dropdown
-              :options="levels"
-              :optionLabel="levels"
-              :optionValue="levels"
-              v-model="newCourse.level"
+            v-model="level"
+              :options="['مبتدی', 'متوسط', 'پیشرفته']"
               class="w-full"
             />
             <label>{{ $t("سطح دوره") }}</label>
@@ -41,12 +39,12 @@
           </FloatLabel>
         </div>
 
-        <div class="flex flex-col gap-1">
+        <!-- <div class="flex flex-col gap-1">
           <FloatLabel>
             <InputText class="w-full" v-model="newCourse.categories" />
             <label>{{ $t("دسته بندی") }}</label>
           </FloatLabel>
-        </div>
+        </div> -->
 
         <div class="flex flex-col gap-1">
           <FloatLabel>
@@ -71,6 +69,25 @@
             <label>{{ $t("حجم کل دوره") }}</label>
           </FloatLabel>
         </div>
+
+        <div class="flex flex-col gap-1">
+          <FloatLabel>
+            <InputGroup>
+              <InputText class="pointer-events-none truncate" dir="ltr" />
+              <Button severity="secondary">
+                <i class="pi pi-image ml-2"></i>
+                <span>{{ $t("chooseImage") }}</span>
+                <input
+                  type="file"
+                  class="opacity-0 absolute inset-0 cursor-pointer"
+                  accept="image/*"
+                  @input="chooseImage"
+                />
+              </Button>
+            </InputGroup>
+            <label>{{ $t("image") }}</label>
+          </FloatLabel>
+        </div>
       </div>
 
       <div class="flex w-full mt-7">
@@ -84,27 +101,8 @@
           </FloatLabel>
         </div>
 
-        <div class="basis-2/6 ms-10">
-          <div class="flex flex-col gap-1">
-            <FloatLabel>
-              <InputGroup>
-                <InputText class="pointer-events-none truncate" dir="ltr" />
-                <Button severity="secondary">
-                  <i class="pi pi-image ml-2"></i>
-                  <span>{{ $t("chooseImage") }}</span>
-                  <input
-                    type="file"
-                    class="opacity-0 absolute inset-0 cursor-pointer"
-                    accept="image/*"
-                    @input="chooseImage"
-                  />
-                </Button>
-              </InputGroup>
-              <label>{{ $t("image") }}</label>
-            </FloatLabel>
-          </div>
-
-          <div class="card flex flex-col gap-2 justify-center mt-7">
+        <div class="basis-2/6 ms-8">
+          <div class="card flex flex-col gap-2 justify-center">
             <Listbox
               listStyle="height:240px"
               emptyMessage="دسته بندی وجود ندارد"
@@ -152,6 +150,7 @@
 </template>
 
 <script setup>
+import Listbox from "primevue/listbox";
 import { jDate } from "@/utils/jDate";
 import { treeTogglerRTL } from "@/utils/tree-toggler-rtl";
 
@@ -168,10 +167,21 @@ import {
 import { useStaticsStore } from "@/stores/statics";
 import { useUploaderStore } from "@/stores/uploader";
 import { useProductsStore } from "@/stores/products";
-const courseStore = useProductsStore()
+import { useCategoriesStore } from "@/stores/categoreis";
+const categoriesStore = useCategoriesStore();
+const courseStore = useProductsStore();
 const uploadStore = useUploaderStore();
 import { useRoute } from "vue-router";
+const route = useRoute();
+const level = ref(null)
+watchEffect(async () => {
+  const { page = 1, rows = 10 } = route.query;
+  const categoriess = await categoriesStore.index(page, rows);
+  console.log("cat", categoriess);
+  cities.value = categoriess;
+});
 const selectedCity = ref();
+const cities = ref();
 const levels = reactive(["آسان", "متوسط", "سخت"]);
 const newCourse = reactive({
   name: "",
@@ -193,7 +203,7 @@ const chooseImage = async (el) => {
   //console.log('uploader', uploader.data.url);
   newCourse.image = uploader.data.url;
   console.log("تصویر آپلود شد");
-  console.log('upldr',uploader);
+  console.log("upldr", uploader);
 };
 const create = async (data) => {
   if (newCourse.image === "") {
@@ -219,20 +229,20 @@ const create = async (data) => {
   newCourse.slug = data.name;
   newCourse.duration = data.duration;
   // newCourse.categories = data.categories;
-  newCourse.categories = "66587ae698d0a0db14693a5e"
+  newCourse.categories = "66587ae698d0a0db14693a5e";
   // newCourse.teacher = data.teacher;
-  newCourse.teacher = "66530b0480ef484e2bd19220"
+  newCourse.teacher = "66530b0480ef484e2bd19220";
   // newCourse.completionPercentage = data.completionPercentage;
   newCourse.completionPercentage = 20;
   // newCourse.level = data.level;
-  newCourse.level = "متوسط"
+  newCourse.level = "متوسط";
   // newCourse.language = data.language;
-  newCourse.language = "فارسی"
+  newCourse.language = "فارسی";
   newCourse.countOfVideos = data.countOfVideos;
   newCourse.totalFileSize = data.totalFileSize;
   // console.log("newCourse: ", newCourse);
- const creat = await courseStore.create(newCourse)
- console.log('created', creat);
+  const creat = await courseStore.create(newCourse);
+  console.log("created", creat);
 };
 //   console.log("form", data);
 //   console.log("json", JSON.stringify(data));