update

2024-06-02 14:34:03 +03:30
parent 69ad899b35
commit b6dcacce95
12 changed files with 221 additions and 117 deletions
@@ -1,6 +1,6 @@
 <template>
    
-    <NuxtLoadingIndicator color="#ffbe33" duration="1" throttle="0"/>
+    <NuxtLoadingIndicator color="#ffbe33" :duration="1" :throttle="0"/>
    <NuxtLayout />
    <NuxtPage />
    <NuxtLayout name="footer"/>
@@ -3,8 +3,8 @@
        <div class="relative text-center h-[56.154vw] md:h-[11.406vw]">
            <p
                class="post w-[30.769vw] md:w-[6.979vw] h-[9.487vw] md:h-[2.24vw] flexBox text-[3.59vw] md:text-[0.938vw] absolute  left-0 bottom-0 bg-white  rounded-tr-[3.59vw] md:rounded-tr-[0.781vw]">
-                {{props.course?.price}},000
-                <span class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]">تومان</span>
+                {{props.course?.price == 0 ? 'رایگان' : props.course?.price + ',000'}}
+                <span v-if="!props.course?.price == 0" class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]">تومان</span>
            </p>
            <NuxtImg style="object-fit: cover;" :src="props.course?.image"  alt="laravel"
            :placeholder="[30, 20]"
@@ -19,7 +19,7 @@
            <div class="w-[69.231vw] md:w-[16vw] space-y-[9vw] md:space-y-[1.4vw] mt-[4vw] md:mt-[0vw] xl:mt-[0.7vw]">
                <h1
                    class="hover:text-primaryGreen text-[3.59vw] md:text-[0.833vw] text-[#383E43] w-full">
-                 {{props.course?.name}}
+                 {{hideEndOfString(props.course?.name)}}
            </h1>
                <div class="flex justify-between text-[3.614vw] md:text-[0.658vw]">
                    <p class="flex items-center text-[#878787]">
@@ -106,7 +106,7 @@
                        </svg>
    
                    </NuxtLink>
-                    <span @click="change">
+                    <span>
                        <svg class="mt-[0.5vw] w-[8.718vw] md:w-[2.24vw] h-[8.718vw] md:h-[2.24vw]" viewBox="0 0 44 46"
                            fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
@@ -143,10 +143,20 @@
 <script setup>
 import { useToast } from 'vue-toastification'
 const props = defineProps(['course']);
+const MyArray = ['Salam','Man','Sadegh','Hastam'];
 const toast = useToast()
-const change = () =>{
-    toast.error('متن تست')
+
+function hideEndOfString(inputString) {
+    const words = inputString.split(' ');
+    if (words.length > 8) {
+        const truncatedWords = words.slice(0, 8);
+        return truncatedWords.join(' ') + '...';
+    } else {
+        return inputString;
+    }
 }
+
+
 </script>
 <style scoped>
 .post::before {
@@ -1,53 +1,7 @@
 <template>
-  <div
-    id="filters"
-    class="text-[#333333] rounded-t-[4.103vw] p-[5vw] flex flex-col fixed bg-white bottom-0 left-0 z-[1000] h-[80.769vw] translate-y-[80.769vw] duration-500 w-[100vw]"
-  >
-    <div class="flex items-center justify-between w-full">
-      <span class="text-[3.59vw]">مرتب سازی بر اساس</span>
-      <svg
-        @click="closeSortOptions"
-        class="w-[5.641vw] h-[5.641vw]"
-        viewBox="0 0 22 22"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6.41663 6.41675L15.5833 15.5834M6.41663 15.5834L15.5833 6.41675"
-          stroke="#878787"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </div>
-
-    <ul class="mt-[4vw] text-[3.19vw] px-[2vw]">
-      <li class="border-b py-[4vw] flex justify-between items-center">
-        <span>
-            همه ی دوره ها
-        </span>
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-    </li>
-      <li class="border-b py-[4vw]">دوره های رایگان</li>
-      <li class="border-b py-[4vw]">ارزانترین</li>
-      <li class="py-[4vw]">گرانترین</li>
-    </ul>
-  </div>
+ 
 </template>

 <script setup>
-const closeSortOptions = () => {
-  if (process.client) {
-    document.getElementById("brightnessFilter").style.filter = "none";
-    document.getElementById("brightnessFilter").style.backdropFilter = "none";
-    document.getElementById("filters").classList.add("translate-y-[80.769vw]");
-    document
-      .getElementsByTagName("html")[0]
-      .classList.remove("overflow-hidden");
-  }
-};

 </script>
@@ -28,7 +28,8 @@
        >
          دوره های پیشنهادی
        </h5>
-        <div
+  
+        <div 
          class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
        >
        <div v-for="(course, index) in data.courses"
@@ -36,6 +37,7 @@
        <Card :course="course" />
      
      </div>
+    
        </div>
      </div>
   
@@ -324,8 +324,6 @@ async function logout(){
 .scrol::-webkit-scrollbar {
    display: none;
  }
-  
-  /* Hide scrollbar for IE, Edge and Firefox */
  .scrol {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
@@ -131,15 +131,13 @@ const { authUser } = useAuth();
 const loading = ref(false)

 const edit = async(formData) => {
-  console.log('form :',formData);
    try {
        loading.value = true;
        await $fetch('/api/user/update', {
            method: 'PUT',
            body: formData
        })
-        // toast.success("ویرایش اطلاعات شما باموفقیت انجام شد");
-        location.reload()
+         location.reload()
      } catch (error) {
     toast.error(error)
    } finally {
@@ -406,7 +406,6 @@ const sendTicket = async () => {
  load()
  addTicketForm.value = false;
  subject.value = null;
-  console.log('تیکت',data);

 };

@@ -67,7 +67,34 @@
            />
          </div>

-          <div
+
+          <div class="mt-[10vw] md:mt-[2.5vw] md:px-[1.6vw] w-full flex gap-[1vw] md:gap-[0.5vw] scrol relative overflow-auto whitespace-nowrap">
+            <p
+            :class="{'bg-primaryGreen text-white'  :  !route.query.hasOwnProperty('category')}"
+            @click="removeCategory()"
+            class="flexBox cursor-pointer
+            py-[2.051vw] md:py-[0.625vw] rounded-[2.051vw] md:rounded-[0.521vw] 
+            border-[1px] border-primaryGreen text-primaryGreen
+            text-[3.59vw] md:text-[1.055vw]
+            px-[3.5vw] md:px-[1.5vw] font-semibold thin
+            ">همه دسته بندی ها</p>
+            <p class="flexBox cursor-pointer
+            py-[2.051vw] md:py-[0.625vw] rounded-[2.051vw] md:rounded-[0.521vw] 
+            border-[1px] border-primaryGreen text-primaryGreen
+            text-[3.59vw] md:text-[1.055vw]
+            px-[3.5vw] md:px-[1.5vw] font-semibold thin
+            "
+            :class="{'bg-primaryGreen text-white'  :  route.query.hasOwnProperty('category') && route.query.category == slide.id }"
+            v-for="slide in categories"
+            :key="slide.id"
+            @click="selectCategory(slide.id)"
+            >{{slide.name}}</p>
+
+          </div>
+          
+
+
+          <!-- <div
            class="flexBox px-0 md:px-[1vw] h-[2.813vw] mt-[10vw] md:mt-[2.5vw]"
          >
            <svg
@@ -83,6 +110,8 @@
              />
            </svg>

+
+
            <Carousel
              dir="rtl"
              :items-to-show="2"
@@ -115,11 +144,11 @@
                class="fill-[#878787] hover:fill-[#383E43]"
              />
            </svg>
-          </div>
+          </div> -->
        </div>

        <div
-          class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.3vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
+          class="suggestions px-[1vw] md:px-[1.042vw] mt-[5vw] md:mt-[3.3vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
        >
          <div
            class="ps-[1.5vw] border-b-[0.104vw] mt-[2vw] flex gap-x-[1vw] items-center text-[0.833vw] text-[#878787]"
@@ -192,10 +221,14 @@


          </div>
+          <p
+          class="flexBox min-h-[8vw]"
+          v-if="data?.count < 1">محصولی جهت نمایش وجود ندارد !!!</p>
        </div>

        <div class="flexBox py-[5vw] md:py-[2vw]" dir="ltr">
          <ul
+          v-if="paginationLength > 2"
            class="flexBox gap-[6vw] md:gap-[2vw] text-[4.038vw] md:text-[1.055vw] text-[#383E43]"
          >
            <li class="w-[1.5vw]">
@@ -231,19 +264,19 @@
              {{ page }}
            </li> -->
            <li
-            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < 7 || !route.query.hasOwnProperty('page')}"
+            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < (paginationLength) || !route.query.hasOwnProperty('page')}"
            class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{pageNumber - 4}}</li>

            <li
-            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < 6 || !route.query.hasOwnProperty('page')}"
+            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < (paginationLength - 1) || !route.query.hasOwnProperty('page')}"
            class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{pageNumber - 3}}</li>

            <li
-            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < 5 || !route.query.hasOwnProperty('page')}"
+            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < (paginationLength - 2) || !route.query.hasOwnProperty('page')}"
            class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{pageNumber - 2}}</li>

            <li 
-            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page == 1|| !route.query.hasOwnProperty('page')}"
+            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page == 1 || !route.query.hasOwnProperty('page')}"
            class="w-[1.5vw] cursor-pointer" @click="prevPage">{{pageNumber - 1}}</li>
           

@@ -251,7 +284,7 @@
            <li class="w-[1.5vw] cursor-pointer flexBox bg-primaryGreen text-white w-[7.692vw] md:w-[2.292vw] h-[7.692vw] md:h-[2.292vw] rounded-[50%]">{{pageNumber}}</li>

            <li
-            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page >= 7}"
+            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page >= paginationLength}"
            class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{parseInt(pageNumber) + 1}}</li>
          

@@ -261,7 +294,7 @@
          

            
-            <li class="w-[1.5vw]" v-if="pageNumber < 5">...</li>
+            <li class="w-[1.5vw]" v-if="pageNumber < (paginationLength - 2)">...</li>
       
            
           
@@ -269,7 +302,7 @@

            <li
            class="w-[1.5vw]"
-            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page > 5}" @click="nextPage"
+            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page > (paginationLength - 2)}" @click="nextPage"
            >{{paginationLength}}</li>

            
@@ -296,12 +329,89 @@
              </svg>
            </li>
          </ul>
+
        </div>

      </div>
    </div>
  </div>
-  <courses-pageSort-filter />
+
+
+
+
+  <div
+  id="filters"
+  class="text-[#333333] rounded-t-[4.103vw] p-[5vw] flex flex-col fixed bg-white bottom-0 left-0 z-[1000] h-[80.769vw] translate-y-[80.769vw] duration-500 w-[100vw]"
+>
+  <div class="flex items-center justify-between w-full">
+    <span class="text-[3.59vw]">مرتب سازی بر اساس</span>
+    <svg
+      @click="closeSortOptions"
+      class="w-[5.641vw] h-[5.641vw]"
+      viewBox="0 0 22 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.41663 6.41675L15.5833 15.5834M6.41663 15.5834L15.5833 6.41675"
+        stroke="#878787"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </div>
+
+  <ul class="mt-[4vw] text-[3.19vw] px-[2vw]">
+    <li
+    @click="() => {sortByHandler(''); closeSortOptions()}"
+    class="border-b py-[4vw] flex justify-between items-center">
+      <span>
+          همه ی دوره ها
+      </span>
+      <svg 
+      class="hidden w-[6.154vw] h-[6.154vw]"
+      :class="{'!block' : !route.query.hasOwnProperty('price') || route.query.price == '' }"
+      viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+  </li>
+    <li class="border-b py-[4vw] flex justify-between items-center" @click="() => {sortByHandler('free'); closeSortOptions()}">
+      <span>
+        دوره های رایگان
+    </span>
+    <svg 
+    class="hidden w-[6.154vw] h-[6.154vw]"
+    :class="{'!block' : route.query.price == 'free' }"
+    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+    </li>
+    <li class="border-b py-[4vw] flex justify-between items-center"  @click="() => {sortByHandler('low_to_high'); closeSortOptions()}">
+      <span>
+        ارزان ترین
+    </span>
+    <svg 
+    class="hidden w-[6.154vw] h-[6.154vw]"
+    :class="{'!block' : route.query.price == 'low_to_high' }"
+    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+    </li>
+    <li class="py-[4vw] flex justify-between items-center"  @click="() => {sortByHandler('high_to_low'); closeSortOptions()}">
+      <span>
+        ارزان ترین
+    </span>
+    <svg 
+    class="hidden w-[6.154vw] h-[6.154vw]"
+    :class="{'!block' : route.query.price == 'high_to_low' }"
+    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+
+    </li>
+  </ul>
+</div>
 </template>


@@ -312,23 +422,19 @@ const query = ref({});
 const router = useRouter();
 const route = useRoute();
 const pageNumber = ref(0);
-const tedad = ref(0)
-console.log('tedad 1', tedad.value);
+
 const paginationLength = ref(0);
 query.value = route.query;
-//console.log(route.query.page);
 pageNumber.value = route.query.hasOwnProperty('page') ? route.query.page : 1
 const { data, refresh, pending } = await useFetch(() => "/api/course", {
  method: "POST",
  query: query,
 });
-watch(data => {
-  if (Object.keys(route.query).length == 0) {
-      query.value = {},
-      refresh() 
-}

-})
+
+
+
+
 paginationLength.value = Math.ceil(data.value.count / 2);
 function changePage(page) {
  pageNumber.value = page;
@@ -352,7 +458,7 @@ function prevPage(){
  }
 }
 function nextPage(num){
-  if (pageNumber.value < 7) {
+  if (pageNumber.value < paginationLength.value) {
    pageNumber.value++
    query.value = { ...route.query, page: pageNumber };
  
@@ -364,23 +470,60 @@ function nextPage(num){
    
  }
 }
+
+
+
+function removeCategory(){
+  if (query.value.hasOwnProperty("category")) {
+      delete query.value.category;
+    }
+    if (query.value.hasOwnProperty("page")) {
+    delete query.value.page;
+  }
+  if (query.value.hasOwnProperty("price")) {
+    delete query.value.price;
+  }
+    router.push({
+    path: "/courses",
+    query: query.value,
+  });
+  pageNumber.value = 1
+  refresh()
+}
+
+
+
+
 const categoryLis = await useFetch("/api/category");
 const categories = categoryLis.data.value;
+
 function selectCategory(id) {
  query.value = { ...route.query, category: id };
  if (query.value.hasOwnProperty("page")) {
    delete query.value.page;
  }
+  if (id === '') {
+    if (query.value.hasOwnProperty("category")) {
+      delete query.value.category;
+    }
+ 
+  }
  router.push({
    path: "/courses",
    query: query.value,
  });
+  pageNumber.value = 1
  refresh();
+  watch(data , () => {
+  paginationLength.value = Math.ceil(data.value.count / 2); 
+})
 }


+
+
+
 function sortByHandler(param){
-  console.log(param);
  query.value = { ...route.query, price: param };

  if (param === '') {
@@ -389,6 +532,7 @@ function sortByHandler(param){
    }
    
  }
+  
  router.push({
    path: "/courses",
    query: query.value,
@@ -397,11 +541,6 @@ function sortByHandler(param){
 }


-watch(data , () => {
-  paginationLength.value = Math.ceil(data.value.count / 2); 
-
-})
-

 const openSortOptions = () => {
  if (process.client) {
@@ -415,6 +554,20 @@ const openSortOptions = () => {
      "brightness(90%)";
  }
 };
+const closeSortOptions = () => {
+  if (process.client) {
+    document.getElementById("brightnessFilter").style.filter = "none";
+    document.getElementById("brightnessFilter").style.backdropFilter = "none";
+    document.getElementById("filters").classList.add("translate-y-[80.769vw]");
+    document
+      .getElementsByTagName("html")[0]
+      .classList.remove("overflow-hidden");
+  }
+};
+
+
+
+

 </script>

@@ -427,4 +580,12 @@ const openSortOptions = () => {
  height: 0.01vw;
  top: 2vw;
 }
+.scrol::-webkit-scrollbar {
+  display: none;
+}
+.scrol {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
 </style>
@@ -1,39 +1,24 @@
 export default defineEventHandler(async (event) => {
    const { public: { apiBase } } = useRuntimeConfig();

-     const query = getQuery(event);
-    console.log('server query :',query);
-    // const category = '/category/' + query.category
-     let category = query.hasOwnProperty('category') ? `categoryId=${query.category}` : '';
-     let page = query.hasOwnProperty('page') ? `page=${query.page}` : '';
-     let sortBy = query.hasOwnProperty('price') ? `price=${query.price}` : '';
-   // const category = 'categoryId=66587ae698d0a0db14693a5e'
-   // const page = 'page=1'
-     try {
-        const data = await $fetch(`${apiBase}/course?${category}&${page}&${sortBy}&pageSize=2`, {
+    const query = getQuery(event);
+    let category = query.hasOwnProperty('category') ? `categoryId=${query.category}` : '';
+    let page = query.hasOwnProperty('page') ? `page=${query.page}` : '';
+  // let sortBy = query.hasOwnProperty('sortBy') ? `price=${query.price}` : '';
+    let price = query.hasOwnProperty('price') ? `price=${query.price}` : '';
+    try {
+        const data = await $fetch(`${apiBase}/course?${category}&${page}&pageSize=2&${price}`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
+                'content-type': 'application/json'
+
            }
        });
        return data;
    } catch (error) {
+        console.log('err :', error);
        return error;
    }

-})
-
-
-
-
-// const page = ref(0);
-
-// const { data, refresh } = await useFetch(() => '/api/global', {
-//     query: { url: '/orders', page },
-//     headers: useRequestHeaders(['cookie'])
-// })
-
-// function paginate(value) {
-//     page.value = value;
-//     refresh()
-// }
+});
@@ -3,7 +3,6 @@ export default defineEventHandler(async (event) => {
    const { public: { apiBase } } = useRuntimeConfig();
    const token = getCookie(event, 'token');
    const body = await readBody(event);
-    console.log('badane :', body);
    try {
        const data = await $fetch(`${apiBase}/ticket/${body.id}`, {
            method: 'GET',
@@ -3,7 +3,6 @@ export default defineEventHandler(async (event) => {
    const { public: { apiBase } } = useRuntimeConfig();
    const token = getCookie(event, 'token');
    const body = await readBody(event);
-console.log(body);
    try {
        const data = await $fetch(`${apiBase}/ticket`, {
            method: 'POST',
@@ -2,7 +2,6 @@ export default defineEventHandler(async (event) => {
    const body = await readBody(event);
    const { public: { apiBase } } = useRuntimeConfig();
    const token = getCookie(event, 'token');
-    console.log(body);
    try {
        const data = await $fetch(`${apiBase}/user/update`, {
            method: 'PUT',