deploy v-1

src/views/Create.vue

@@ -1,124 +1,141 @@
 <template>
   <section class="flex flex-col gap-4">
     <Panel :header="$t('createCourse')">
-      <div class="grid grid-cols-3 gap-7">
-        <div class="flex flex-col gap-1">
-          <FloatLabel>
-            <InputText class="w-full" v-model="newCourse.name" />
-            <label>{{ $t("title") }}</label>
-          </FloatLabel>
-        </div>
-
-        <div class="flex flex-col gap-1">
-          <FloatLabel>
-            <InputText class="w-full" v-model="newCourse.language" />
-            <label>{{ $t("زبان آموزش") }}</label>
-          </FloatLabel>
-        </div>
-        <div class="flex flex-col gap-1">
-          <FloatLabel>
-            <InputText v-model="newCourse.duration" class="w-full" />
-            <label>{{ $t("مدت زمان دوره") }}</label>
-          </FloatLabel>
-        </div>
-
-        <div class="flex flex-col gap-1">
-          <FloatLabel>
-            <Dropdown
-            v-model="level"
-              :options="['مبتدی', 'متوسط', 'پیشرفته']"
-
-
-              class="w-full"
-            />
-            <label>{{ $t("سطح دوره") }}</label>
-          </FloatLabel>
-        </div>
-        <div class="flex flex-col gap-1">
-          <FloatLabel>
-            <InputText class="w-full" v-model="newCourse.teacher" />
-            <label>{{ $t("مدرس دوره") }}</label>
-          </FloatLabel>
-        </div>
-
-        <!-- <div class="flex flex-col gap-1">
-          <FloatLabel>
-            <InputText class="w-full" v-model="newCourse.categories" />
-            <label>{{ $t("دسته بندی") }}</label>
-          </FloatLabel>
-        </div> -->
-
-        <div class="flex flex-col gap-1">
-          <FloatLabel>
-            <InputText
-              class="w-full"
-              v-model="newCourse.completionPercentage"
-            />
-            <label>{{ $t("درصد تکمیل دوره") }}</label>
-          </FloatLabel>
-        </div>
-
-        <div class="flex flex-col gap-1">
-          <FloatLabel>
-            <InputText class="w-full" v-model="newCourse.videosCount" />
-            <label>{{ $t("تعداد ویدیو ها") }}</label>
-          </FloatLabel>
-        </div>
-
-        <div class="flex flex-col gap-1">
-          <FloatLabel>
-            <InputText class="w-full" v-model="newCourse.totalFileSize" />
-            <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"
-            
-                  @input="chooseImage"
-                />
-
-              </Button>
-            </InputGroup>
-            <label>{{ $t("image") }}</label>
-          </FloatLabel>
-        </div>
-      </div>
-
-      <div class="flex w-full mt-7">
+      <div class="flex">
         <div class="basis-4/6">
-          <FloatLabel>
-            <Editor
-              v-model="newCourse.description"
-              placeholder="توضیحات"
-              editorStyle="height: 320px"
-            />
-          </FloatLabel>
+          <div class="grid grid-cols-2 gap-7">
+            <div class="flex flex-col gap-1">
+              <FloatLabel>
+                <InputText
+                  @change="setSlug"
+                  class="w-full"
+                  v-model="newCourse.name"
+                />
+                <label>{{ $t("title") }}</label>
+              </FloatLabel>
+            </div>
+
+            <div class="flex flex-col gap-1">
+              <FloatLabel>
+                <Dropdown
+                  v-model="language"
+                  @change="selectLanguage"
+                  :options="['انگلیسی', 'فارسی']"
+                  class="w-full"
+                />
+                <!-- <InputText class="w-full" v-model="newCourse.language" /> -->
+                <label>{{ $t("زبان آموزش") }}</label>
+              </FloatLabel>
+            </div>
+            <div class="flex flex-col gap-1">
+              <FloatLabel>
+                <InputText
+                  v-model="newCourse.duration"
+                  class="w-full"
+                  prefix="ساعت"
+                />
+                <label>{{ $t("مدت زمان دوره") }}</label>
+              </FloatLabel>
+            </div>
+
+            <div class="flex flex-col gap-1">
+              <FloatLabel>
+                <Dropdown
+                  v-model="level"
+                  @change="selectLevel"
+                  :options="['مبتدی', 'متوسط', 'پیشرفته']"
+                  class="w-full"
+                />
+                <label>{{ $t("سطح دوره") }}</label>
+              </FloatLabel>
+            </div>
+
+            <div class="flex flex-col gap-1">
+              <FloatLabel>
+                <InputText
+                  class="w-full"
+                  v-model="newCourse.completionPercentage"
+                />
+                <label>{{ $t("درصد تکمیل دوره") }}</label>
+              </FloatLabel>
+            </div>
+
+            <div class="flex flex-col gap-1">
+              <FloatLabel>
+                <InputText class="w-full" v-model="newCourse.countOfVideos" />
+                <label>{{ $t("تعداد ویدیو ها") }}</label>
+              </FloatLabel>
+            </div>
+
+            <div class="flex flex-col gap-1">
+              <FloatLabel>
+                <InputText class="w-full" v-model="newCourse.totalFileSize" />
+                <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" :loading="saving">
+                    <i class="pi pi-image ml-2"></i>
+                    <span>{{ $t("chooseImage") }}</span>
+                    <input
+                      type="file"
+                      class="opacity-0 absolute inset-0 cursor-pointer"
+                      @input="chooseImage"
+                    />
+                  </Button>
+                </InputGroup>
+                <label>{{ $t("image") }}</label>
+              </FloatLabel>
+            </div>
+          </div>
+          <div class="w-full mt-7">
+            <FloatLabel>
+              <Editor
+                v-model="newCourse.description"
+                placeholder="توضیحات"
+                editorStyle="height: 315px"
+              />
+            </FloatLabel>
+          </div>
         </div>
 
-        <div class="basis-2/6 ms-8">
-          <div class="card flex flex-col gap-2 justify-center">
-            <Listbox
-              listStyle="height:240px"
-              emptyMessage="دسته بندی وجود ندارد"
-              emptyFilterMessage="دسته بندی وجود ندارد"
-              v-model="selectedCity"
-              filterPlaceholder=" دسته بندی"
-              :options="cities"
-              filter
-              optionLabel="name"
-              class="w-full"
-            />
+        <div class="basis-2/6 flex flex-col gap-7 ms-7">
+          <div class="flex flex-col gap-1">
+            <FloatLabel>
+              <InputText class="w-full" v-model="newCourse.price" />
+              <label>{{ $t("قیمت دوره") }}</label>
+            </FloatLabel>
           </div>
-          <div></div>
+
+          <Listbox
+            listStyle="height:240px"
+            emptyMessage="دسته بندی وجود ندارد"
+            emptyFilterMessage="دسته بندی وجود ندارد"
+            v-model="selectedCategory"
+            @change="selectCategory"
+            filterPlaceholder=" دسته بندی"
+            :options="cities"
+            filter
+            optionLabel="name"
+            class="w-full"
+          />
+
+          <Listbox
+            listStyle="height:240px"
+            emptyMessage="مدرس مورد نظر یافت نشد"
+            emptyFilterMessage="مدرس وجود ندارد"
+            v-model="selectedteacher"
+            @change="selectTeacher"
+            filterPlaceholder=" مدرس دوره"
+            :options="teachers"
+            filter
+            optionLabel="name"
+            class="w-full"
+          />
         </div>
       </div>
 
@@ -144,11 +161,19 @@
           :label="$t('create')"
           icon="pi pi-save"
           severity="success"
-          :loading="saving"
+          :loading="creating"
           @click="create(newCourse)"
         />
       </div>
     </Panel>
+
+    <Message
+      v-if="saving"
+      class="absolute right-12 bottom-8"
+      icon="pi pi-spinner-dotted"
+      severity="info"
+      >درحال آپلود تصویر...</Message
+    >
   </section>
 </template>
 
@@ -171,88 +196,142 @@ import { useStaticsStore } from "@/stores/statics";
 import { useUploaderStore } from "@/stores/uploader";
 import { useProductsStore } from "@/stores/products";
 import { useCategoriesStore } from "@/stores/categoreis";
+import { useUsersStore } from "../stores/users";
 const categoriesStore = useCategoriesStore();
 const courseStore = useProductsStore();
 const uploadStore = useUploaderStore();
-import { useRoute } from "vue-router";
+const userStore = useUsersStore();
+import { useRoute, useRouter } from "vue-router";
 const route = useRoute();
-const level = ref(null)
+const level = ref(null);
+const selectedCategory = ref();
+const selectedteacher = ref();
+const language = ref("");
+const saving = ref(false);
+const creating = ref(false);
+const selectCategory = () => {
+  newCourse.categories = selectedCategory.value.id;
+};
+const selectTeacher = () => {
+  newCourse.teacher = selectedteacher.value.id;
+};
 watchEffect(async () => {
   const { page = 1, rows = 10 } = route.query;
   const categoriess = await categoriesStore.index(page, rows);
-  console.log("cat", categoriess);
   cities.value = categoriess;
 });
+watchEffect(async () => {
+  await userStore.index();
+  teachers.value = userStore.items.user;
+});
+
+const selectLevel = () => {
+  newCourse.level = level.value;
+};
+const selectLanguage = () => {
+  newCourse.language = language.value;
+};
 const selectedCity = ref();
 const cities = ref();
+const teachers = ref();
 const levels = reactive(["آسان", "متوسط", "سخت"]);
 const newCourse = reactive({
   name: "",
   description: "",
-  slug: "",
+  slug: "تست",
   duration: "",
   image: "",
   categories: "",
-  price: 0,
+  price: null,
   teacher: "",
-  completionPercentage: 0,
+  completionPercentage: null,
   level: "",
   language: "",
-  countOfVideos: 0,
+  countOfVideos: null,
   totalFileSize: "",
 });
-const chooseImage = async (val) => {
-  console.log(val.target.files[0]);
- const uploader = await uploadStore.uploader(val.target.files[0]);
-  console.log('uploader', uploader.data.url);
- newCourse.image = uploader.data.url;
-  console.log("تصویر آپلود شد");
-  console.log("upldr", uploader);
+const setSlug = () => {
+  newCourse.slug = newCourse.name;
 };
-const create = async (data) => {
-  if (newCourse.image === "") {
-    return console.log("تصویر دوره وارد نشده است");
+const chooseImage = async (val) => {
+  saving.value = true;
+  const uploader = await uploadStore.uploader(val.target.files[0]);
+  newCourse.image = uploader.data.url;
+  saving.value = false;
+  if (uploader.status === 200 || uploader.status === 201) {
+    toast.add({
+      life: 2000,
+      severity: "success",
+      summary: t("successful"),
+      detail: t("تصویر آپلود شد"),
+    });
+  } else {
+    return toast.add({
+      life: 2000,
+      severity: "error",
+      summary: t("error"),
+      detail: t("خطا در بارگذاری تصویر، مجدد تلاش کنید"),
+    });
   }
+
+};
+const router = useRouter();
+const create = async (newCourse) => {
+  creating.value = true;
   if (
     newCourse.name === "" ||
     newCourse.description === "" ||
-    // newCourse.slug === "" ||
     newCourse.duration === "" ||
-    // newCourse.categories === "" ||
-    // newCourse.teacher === "" ||
-    newCourse.completionPercentage === 0 ||
-    // newCourse.level === "" ||
-    // newCourse.language === "" ||
-    newCourse.countOfVideos === "" ||
+    newCourse.categories === "" ||
+    newCourse.price === null ||
+    newCourse.teacher === "" ||
+    newCourse.completionPercentage === null ||
+    newCourse.level === "" ||
+    newCourse.language === "" ||
+    newCourse.countOfVideos === null ||
     newCourse.totalFileSize === ""
   ) {
-    return console.log("تمام مقادیر را وارد کنید");
+    creating.value = false;
+    return toast.add({
+      life: 2000,
+      severity: "error",
+      summary: t("error"),
+      detail: t("تمام فیلد ها را وارد کنید"),
+    });
+  }
+  if (newCourse.image === "" || newCourse.image === null) {
+    creating.value = false;
+    return toast.add({
+      life: 2000,
+      severity: "error",
+      summary: t("error"),
+      detail: t("تصویر دوره را وارد کنید"),
+    });
   }
-  newCourse.name = data.name;
-  newCourse.description = data.description;
-  newCourse.slug = data.name;
-  newCourse.duration = data.duration;
-  // newCourse.categories = data.categories;
-  newCourse.categories = "66587ae698d0a0db14693a5e";
-  // newCourse.teacher = data.teacher;
-  newCourse.teacher = "66530b0480ef484e2bd19220";
-  // newCourse.completionPercentage = data.completionPercentage;
-  newCourse.completionPercentage = 20;
-  // newCourse.level = data.level;
-  newCourse.level = "متوسط";
-  // newCourse.language = data.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);
+ 
+
+  if (creat.message === "دوره با موفقیت ثبت شد") {
+    toast.add({
+      life: 2000,
+      severity: "success",
+      summary: t("successful"),
+      detail: t("دوره جدید با موفقیت ایجاد شد"),
+    });
+    router.push('/courses')
+    creating.value = false;
+  } else {
+    creating.value = false;
+    toast.add({
+      life: 2000,
+      severity: "error",
+      summary: t("error"),
+      detail: t("مشکل در ایجاد دوره، مجدد تلاش کنید"),
+    });
+  }
+
 };
-//   console.log("form", data);
-//   console.log("json", JSON.stringify(data));
-//   const { result } = await store.edit(data);
-//   console.log("res", result);
-// };
+
 const expandedKeys = ref({});
 
 const CategoryForm = defineAsyncComponent(() =>
@@ -265,9 +344,7 @@ const store = useStaticsStore();
 
 watchEffect(async () => {
   await store.index();
-  // console.log(store.items);
 
-  //data.videosCount = store.items.hours;
 });
 </script>
 
@@ -300,7 +377,7 @@ const uploader = useUploaderStore();
 const save = async () => {
   saving.value = true;
 
-  console.log(form);
+
 
   //Upload File
   if (typeof form.coverImage === "object") {