From c1762c0083d1b41c84e2d4e1be1d0607fad5558a Mon Sep 17 00:00:00 2001
From: mohadese namavar <mohadese.namavar@gmail.com>
Date: Sun, 7 Jul 2024 14:16:58 +0430
Subject: [PATCH] apply debug changes

---
 components/home/PopularCategories.vue       |   3 +-
 components/panel/PorfileMenu.vue            |   2 +-
 components/panel/dialog/password/Change.vue |  10 +-
 components/product/Card.vue                 |   2 +-
 components/product/Wrapper.vue              |   6 +-
 components/product/comment/Summary.vue      |   6 +-
 components/product/comment/dialog/Form.vue  |  11 +-
 components/product/dialog/Menu.vue          |   3 +-
 initialize/mobile.js                        |   4 +-
 initialize/product.js                       | 482 ++++++++++++--------
 layouts/mobile.vue                          |   2 +-
 11 files changed, 321 insertions(+), 210 deletions(-)

diff --git a/components/home/PopularCategories.vue b/components/home/PopularCategories.vue
index 3c7e19f..ba4157a 100644
--- a/components/home/PopularCategories.vue
+++ b/components/home/PopularCategories.vue
@@ -46,9 +46,10 @@ const style = (bg) => `background: linear-gradient(143.73deg, ${bg.from} 5.62%,
             }
 
             ul {
-                @apply rtl grid grid-rows-2 grid-flow-col gap-[1.9rem] w-max mx-auto lg:gap-0 lg:gap-y-8;
+                @apply rtl grid grid-rows-2 grid-flow-col justify-items-center gap-[1.9rem] w-max mx-auto lg:gap-0 lg:gap-y-8;
 
                 li {
+                    @apply justify-self-center;
                     a {
                         @apply m-auto flex flex-col items-center;
                         @apply w-[4.6rem] h-[6rem] justify-between;
diff --git a/components/panel/PorfileMenu.vue b/components/panel/PorfileMenu.vue
index 033d503..76c5eae 100644
--- a/components/panel/PorfileMenu.vue
+++ b/components/panel/PorfileMenu.vue
@@ -2,7 +2,7 @@
     <ul class="profile-menu">
         <li v-for="(item, i) in menu.profile" :key="i">
             <template v-if="i != 2 || user?.profile?.confirmToSales">
-                <component :is="item.link ? 'router-link': 'div'" :to="'/panel/' + item.url" @click="handleClick(item.key)"
+                <component :is="item.url ? 'router-link': 'div'" :to="'/panel/' + item.url" @click="handleClick(item.key)"
                     v-ripple>
                     <i :class="item.icon"></i>
                     <span>{{ item.label }}</span>
diff --git a/components/panel/dialog/password/Change.vue b/components/panel/dialog/password/Change.vue
index 5ea0109..c662756 100644
--- a/components/panel/dialog/password/Change.vue
+++ b/components/panel/dialog/password/Change.vue
@@ -13,10 +13,10 @@
                 </li>
             </ul>
             <Button v-bind="btns.save.props" :loading="loading" @click="save()" />
-            <div>
+            <!-- <div>
                 <p>{{ $t("forgetPassword") }}</p>
                 <Button v-bind="btns.recovery.props" @click="recovery()" />
-            </div>
+            </div> -->
         </div>
     </dialog>
 </template>
@@ -77,7 +77,7 @@ watch(computed(() => form), (value, old) => {
     @apply w-full lg:w-[61.6rem] lg:h-[36.9rem] bg-white rounded-t-2xl lg:rounded-2xl flex p-6 lg:p-4 lg:pl-6 relative;
 
     &::after {
-        @apply content-['_'] absolute inset-x-0 bottom-28 h-3 shadow-[0px_-2px_5px_#0000000a] lg:shadow-none;
+        @apply content-['_'] absolute inset-x-0 bottom-16 h-3 shadow-[0px_-2px_5px_#0000000a] lg:shadow-none;
     }
 
     &>img {
@@ -98,10 +98,10 @@ watch(computed(() => form), (value, old) => {
         }
 
         &>button:nth-of-type(1) {
-            @apply self-end -mt-2 -ml-2;
+            @apply self-end -ml-5 -mt-5 lg:-mt-2 lg:-ml-2;;
 
             .p-button-icon {
-                @apply text-sm text-[#333333];
+                @apply text-xl text-[#333333];
                 @apply lg:text-[2em] lg:text-[#b2b2b29b];
             }
         }
diff --git a/components/product/Card.vue b/components/product/Card.vue
index 4e7665a..c27bd4e 100644
--- a/components/product/Card.vue
+++ b/components/product/Card.vue
@@ -56,7 +56,7 @@ const numberFormat = (number) =>
 
 <style lang="scss">
 .product-card {
-    box-shadow: 0px 2px 10px 0px #87C29A;
+    box-shadow: 0px 2px 14px 0px #e5eef5;
     @apply bg-white rounded-[0.6rem] border flex flex-col relative;
 
     &>img {
diff --git a/components/product/Wrapper.vue b/components/product/Wrapper.vue
index c601d6a..673258b 100644
--- a/components/product/Wrapper.vue
+++ b/components/product/Wrapper.vue
@@ -18,9 +18,13 @@
 const { swiper, btns } = inject('init')
 const { device, dialog } = inject('service')
 const product = inject('data')
+const token = useCookie('token')
+const router = useRouter()
 
 const handleClick = () => {
-    dialog.show(resolveComponent('ProductDialogReport'), product)
+    if (token.value)
+        dialog.show(resolveComponent('ProductDialogReport'), product)
+    else router.push('/auth/login')
 }
 </script>
 
diff --git a/components/product/comment/Summary.vue b/components/product/comment/Summary.vue
index 44a67d5..2286eee 100644
--- a/components/product/comment/Summary.vue
+++ b/components/product/comment/Summary.vue
@@ -14,9 +14,13 @@
 const { btns } = inject('init')
 const product = inject('data')
 const { dialog } = inject('service')
+const token = useCookie('token')
+const router = useRouter()
 
 const handleClick = () => {
-    dialog.show(resolveComponent('ProductCommentDialogForm'), product)
+    if (token.value)
+        dialog.show(resolveComponent('ProductCommentDialogForm'), product)
+    else router.push('/auth/login')
 }
 </script>
 
diff --git a/components/product/comment/dialog/Form.vue b/components/product/comment/dialog/Form.vue
index cd7d44e..47eab2d 100644
--- a/components/product/comment/dialog/Form.vue
+++ b/components/product/comment/dialog/Form.vue
@@ -13,7 +13,7 @@
                     <component :is="item.is" ref="chips" :id="key" v-bind="item.props" v-model="form[key]" />
                     <label :for="key">{{ item.label }}</label>
                     <template v-if="['positive', 'negative'].includes(key)">
-                        <Button icon="isax isax-add" severity="secondary" text @click="addChip(i)" />
+                        <Button icon="isax isax-add" severity="secondary" text @click="addChip(key)" />
                     </template> 
                     <small v-if="errors[key]">{{ errors[key] }}</small>
                 </li>
@@ -76,8 +76,9 @@ const submit = async () => {
 
 }
 
-const addChip = (i) => {
-    chips.value[i].addItem(new Event('keydown'), chips.value[i].$data.inputValue, true)
+const addChip = (key) => {
+    const index = ['title', 'positive', 'negative'].indexOf(key)
+    chips.value[index]?.addItem(new Event('keydown'), chips.value[index].$data.inputValue, true)
 }
 
 const starsClass = (i) => (i > (form?.point || 0) ? 'opacity-25' : '')
@@ -158,6 +159,10 @@ watch(computed(() => form), (value, old) => {
 
                         .p-chips-token {
                             @apply ltr my-1;
+
+                            .p-chips-token-label {
+                                @apply font-vazir;
+                            }
                         }
                     }
                 }
diff --git a/components/product/dialog/Menu.vue b/components/product/dialog/Menu.vue
index 659190f..0e7dc7a 100644
--- a/components/product/dialog/Menu.vue
+++ b/components/product/dialog/Menu.vue
@@ -2,7 +2,7 @@
     <div class="product-menu">
         <ul>
             <li v-for="({ icon, label, click }, i) in meta.init.menu" :key="i" >
-                <div @click="click" v-ripple>
+                <div @click="click(dialogRef)" v-ripple>
                     <i :class="icon" />
                     <span>{{ label }}</span>
                 </div>
@@ -13,6 +13,7 @@
 
 <script setup>
 const { meta } = useRoute()
+const dialogRef = inject('dialogRef')
 </script>
 
 <style lang="scss">
diff --git a/initialize/mobile.js b/initialize/mobile.js
index 3ec0a85..3bb4cda 100644
--- a/initialize/mobile.js
+++ b/initialize/mobile.js
@@ -1,5 +1,5 @@
 export default () => {
-    const store = useUserStore()
+    const token = useCookie('token')
 
     return reactive({
         btns: {
@@ -41,7 +41,7 @@ export default () => {
                 },
             },
             profile: {
-                to: computed(() => store.token ? '/panel/profile' : '/auth/login'),
+                to: computed(() => token.value ? '/panel/profile' : '/auth/login'),
                 props: {
                     icon: "isax isax-user", rounded: true, severity: "secondary", text: true,
                 },
diff --git a/initialize/product.js b/initialize/product.js
index ea74991..55e91b3 100644
--- a/initialize/product.js
+++ b/initialize/product.js
@@ -1,206 +1,302 @@
-import ProductDialogReminder from '../components/product/dialog/Reminder.vue'
-import ProductDialogMenu from '../components/product/dialog/Menu.vue'
-import ProductDialogShare from '../components/product/dialog/Share.vue'
-import ProductDialogLineChart from '../components/product/dialog/LineChart.vue'
+import ProductDialogReminder from "../components/product/dialog/Reminder.vue";
+import ProductDialogMenu from "../components/product/dialog/Menu.vue";
+import ProductDialogShare from "../components/product/dialog/Share.vue";
+import ProductDialogLineChart from "../components/product/dialog/LineChart.vue";
 
 export default (data) => {
-    const { dialog, t } = inject('service')
-    const fevorites = useFavoritesStore()
-    const cart = useCartStore()
-    const router = useRouter()
+  const { dialog, t } = inject("service");
+  const fevorites = useFavoritesStore();
+  const cart = useCartStore();
+  const token = useCookie("token");
+  const router = useRouter();
 
-    const confg = reactive({
-        btns: {
-            report: {
-                props: {
-                    label: t("reportIncorrectSpecs"),
-                    icon: "isax isax-info-circle",
-                    severity: "secondary",
-                    iconPos: "right",
-                    rounded: true,
-                    text: true,
-                }
-            },
-            arrows: [
-                { icon: "isax isax-arrow-right-3", rounded: true, swiper: true },
-                { icon: "isax isax-arrow-left-2", rounded: true, swiper: true },
-            ],
-            close: {
-                props: { icon: 'isax isax-close-circle', severity: 'secondary', rounded: true, text: true }
-            },
-            shares: {
-                copyLink: {
-                    props: {
-                        label: t("copyLink"), icon: "isax isax-document-copy", severity: "secondary", iconPos: "right", outlined: true,
-                    }
-                },
-                telegram: {
-                    props: {
-                        label: t("telegram"), icon: "isax isax-send-2", severity: "primary", iconPos: "right",
-                    }
-                },
-                whatsapp: {
-                    props: {
-                        label: t("whatsapp"), icon: "isax isax-call4", severity: "success", iconPos: "right",
-                    }
-                }
-            },
-            submit: {
-                props: {
-                    label: t('submitComment'), outlined: true
-                }
-            },
-            sort: {
-                createdAt: {
-                    props: {
-                        label: t("newest"), severity: "secondary", text: true,
-                    }
-                },
-                point: {
-                    props: {
-                        label: t("mostUseful"), severity: "secondary", text: true,
-                    }
-                },
-            }
+  const confg = reactive({
+    btns: {
+      report: {
+        props: {
+          label: t("reportIncorrectSpecs"),
+          icon: "isax isax-info-circle",
+          severity: "secondary",
+          iconPos: "right",
+          rounded: true,
+          text: true,
         },
-        swiper: {
-            gallery: { pagination: { dynamicBullets: true }, modules: [SwiperPagination] },
-            similars: {
-                slidesPerView: 'auto',
-                modules: [SwiperNavigation],
-                navigation: {
-                    prevEl: "div>button[swiper]:first-of-type",
-                    nextEl: "div>button[swiper]:last-of-type",
-                },
-            }
+      },
+      arrows: [
+        { icon: "isax isax-arrow-right-3", rounded: true, swiper: true },
+        { icon: "isax isax-arrow-left-2", rounded: true, swiper: true },
+      ],
+      close: {
+        props: {
+          icon: "isax isax-close-circle",
+          severity: "secondary",
+          rounded: true,
+          text: true,
         },
-        chart: {
-            setChartData: (prices, dates) => {
-                var ctx = document.getElementsByTagName('canvas')[0].getContext('2d')
-                var gradient = ctx.createLinearGradient(0, 0, 0, 400)
-                gradient.addColorStop(0, 'rgba(1, 86, 153, 0.62')
-                gradient.addColorStop(1, 'rgba(1, 86, 153, 0)')
-                const labels = []
-                const data = []
-                prices
-                    .filter((item) => {
-                        return (
-                            new Date(item.date) >= new Date(dates.from) &&
-                            new Date(item.date) <= new Date(dates.to)
-                        )
-                    })
-                    .forEach(({ date, price }) => {
-                        labels.push(
-                            new Date(date).toLocaleDateString('fa', { month: 'long', year: 'numeric' })
-                        )
-                        data.push(price + ' T')
-                    })
+      },
+      shares: {
+        copyLink: {
+          props: {
+            label: t("copyLink"),
+            icon: "isax isax-document-copy",
+            severity: "secondary",
+            iconPos: "right",
+            outlined: true,
+          },
+        },
+        telegram: {
+          props: {
+            label: t("telegram"),
+            icon: "isax isax-send-2",
+            severity: "primary",
+            iconPos: "right",
+          },
+        },
+        whatsapp: {
+          props: {
+            label: t("whatsapp"),
+            icon: "isax isax-call4",
+            severity: "success",
+            iconPos: "right",
+          },
+        },
+      },
+      submit: {
+        props: {
+          label: t("submitComment"),
+          outlined: true,
+        },
+      },
+      sort: {
+        createdAt: {
+          props: {
+            label: t("newest"),
+            severity: "secondary",
+            text: true,
+          },
+        },
+        point: {
+          props: {
+            label: t("mostUseful"),
+            severity: "secondary",
+            text: true,
+          },
+        },
+      },
+    },
+    swiper: {
+      gallery: {
+        pagination: { dynamicBullets: true },
+        modules: [SwiperPagination],
+      },
+      similars: {
+        slidesPerView: "auto",
+        modules: [SwiperNavigation],
+        navigation: {
+          prevEl: "div>button[swiper]:first-of-type",
+          nextEl: "div>button[swiper]:last-of-type",
+        },
+      },
+    },
+    chart: {
+      setChartData: (prices, dates) => {
+        var ctx = document.getElementsByTagName("canvas")[0].getContext("2d");
+        var gradient = ctx.createLinearGradient(0, 0, 0, 400);
+        gradient.addColorStop(0, "rgba(1, 86, 153, 0.62)");
+        gradient.addColorStop(1, "rgba(1, 86, 153, 0)");
+        const labels = [];
+        const data = [];
+        prices
+          // .filter((item) => {
+          //     return (
+          //         new Date(item.date) >= new Date(dates.from) &&
+          //         new Date(item.date) <= new Date(dates.to)
+          //     )
+          // })
+          .forEach(({ date, price }) => {
+            labels.push(
+              new Date(date).toLocaleDateString("fa", {
+                month: "long",
+                year: "numeric",
+              })
+            );
+            data.push(price);
+          });
 
-                return {
-                    labels,
-                    datasets: [
-                        {
-                            label: '', data, fill: true, tension: 0.4, borderColor: '#379956', backgroundColor: gradient
-                        }
-                    ]
-                }
+        return {
+          labels,
+          datasets: [
+            {
+              label: "",
+              data,
+              fill: true,
+              tension: 0.4,
+              borderColor: "#379956",
+              backgroundColor: gradient,
             },
-            setChartOptions: () => {
-                return {
-                    maintainAspectRatio: false,
-                    aspectRatio: 0.6,
-                    plugins: { legend: { display: false } },
-                    scales: { x: { grid: { display: false } } }
-                }
-            }
+          ],
+        };
+      },
+      setChartOptions: () => {
+        return {
+          maintainAspectRatio: false,
+          aspectRatio: 0.6,
+          plugins: { legend: { display: false } },
+          scales: {
+            x: { grid: { display: false } },
+            y: {
+              display: true,
+              title: {
+                display: true,
+                text: "Toman",
+              },
+            },
+          },
+        };
+      },
+    },
+    menu: {
+      share: {
+        label: t("shareProduct"),
+        icon: "isax isax-share",
+        click: () => dialog.show(ProductDialogShare, data),
+      },
+      reminder: {
+        label: t("amazingInformation"),
+        icon: "isax isax-notification4",
+        click: (dialogRef) => {
+          if (token.value) dialog.show(ProductDialogReminder, data);
+          else {
+            dialogRef.close();
+            router.push("/auth/login");
+          }
         },
-        menu: {
-            share: {
-                label: t('shareProduct'), icon: "isax isax-share",
-                click: () => dialog.show(ProductDialogShare, data)
-            },
-            reminder: {
-                label: t('amazingInformation'), icon: "isax isax-notification4",
-                click: () => dialog.show(ProductDialogReminder, data)
-            },
-            chart: {
-                label: t('priceChart'), icon: "isax isax-chart-2",
-                click: () => dialog.show(ProductDialogLineChart, data)
-            },
-            compare: {
-                label: t('compareProduct'), icon: "isax isax-row-horizontal4",
-                click: () => router.push('/compare/' + data.id)
-            }
+      },
+      chart: {
+        label: t("priceChart"),
+        icon: "isax isax-chart-2",
+        click: () => dialog.show(ProductDialogLineChart, data),
+      },
+      compare: {
+        label: t("compareProduct"),
+        icon: "isax isax-row-horizontal4",
+        click: () => router.push("/compare/" + data.id),
+      },
+    },
+    options: {
+      favorite: {
+        props: {
+          severity: "secondary",
+          text: true,
+          rounded: true,
+          icon: computed(
+            () => `isax isax-heart${fevorites.find(data.id) ? "5" : ""}`
+          ),
         },
-        options: {
-            favorite: {
-                props: {
-                    severity: "secondary", text: true, rounded: true,
-                    icon: computed(() =>
-                        `isax isax-heart${fevorites.find(data.id) ? '5' : ''}`
-                    )
-                },
-                click: () => fevorites.update(data.id)
-            },
-            cart: {
-                props: {
-                    icon: "isax isax-shopping-cart", severity: "secondary", text: true, rounded: true,
-                    badges: computed(() => cart.items.length)
-                },
-                click: () => router.push('/checkout/cart')
-            },
-            menu: {
-                props: {
-                    icon: "isax isax-more rotate-90", severity: "secondary", text: true, rounded: true,
-                },
-                click: () => dialog.show(ProductDialogMenu, confg.menu, { dismissableMask: true })
-            },
+        click: () => {
+          if (token.value) fevorites.update(data.id);
+          else router.push("/auth/login");
         },
-        actions: {
-            favorite: {
-                props: {
-                    severity: "secondary", text: true, rounded: true, icon: computed(() => {
-                        const like = fevorites.find(data.id)
-                        return `isax isax-heart${like ? '5' : ''}`
-                    })
-                },
-                click: () => fevorites.update(data.id),
-            },
-            share: {
-                props: {
-                    icon: "isax isax-share", severity: "secondary", text: true, rounded: true,
-                },
-                click: () => dialog.show(ProductDialogShare, data)
-            },
-            reminder: {
-                props: {
-                    icon: "isax isax-notification4", severity: "secondary", text: true, rounded: true,
-                },
-                click: () => dialog.show(ProductDialogReminder, data)
-            },
-            chart: {
-                props: {
-                    icon: "isax isax-chart-2", severity: "secondary", text: true, rounded: true,
-                },
-                click: () => dialog.show(ProductDialogLineChart, data)
-            },
-            compare: {
-                props: {
-                    icon: "isax isax-row-horizontal4", severity: "secondary", text: true, rounded: true,
-                },
-                click: () => router.push('/compare/' + data.id)
-            },
+      },
+      cart: {
+        props: {
+          icon: "isax isax-shopping-cart",
+          severity: "secondary",
+          text: true,
+          rounded: true,
+          badges: computed(() => cart.items.length),
         },
-        checkboxes: {
-            reminder: ["sms", "notif", "email"],
-            report: [
-                "incorrectName", "inappropriatePhoto", "incorrectSpecs", "incorrectDesc", "notOriginal", "duplicate",
-            ]
+        click: () => router.push("/checkout/cart"),
+      },
+      menu: {
+        props: {
+          icon: "isax isax-more rotate-90",
+          severity: "secondary",
+          text: true,
+          rounded: true,
         },
-        sorts: [
-            "mostRelevant", "mostVisited", "newest", "bestselling", "cheapest", "mostExpensive", "buyersSuggestion",
-        ]
-    })
+        click: () =>
+          dialog.show(ProductDialogMenu, confg.menu, { dismissableMask: true }),
+      },
+    },
+    actions: {
+      favorite: {
+        props: {
+          severity: "secondary",
+          text: true,
+          rounded: true,
+          icon: computed(() => {
+            const like = fevorites.find(data.id);
+            return `isax isax-heart${like ? "5" : ""}`;
+          }),
+        },
+        click: () => {
+          if (token.value) fevorites.update(data.id);
+          else router.push("/auth/login");
+        },
+      },
+      share: {
+        props: {
+          icon: "isax isax-share",
+          severity: "secondary",
+          text: true,
+          rounded: true,
+        },
+        click: () => dialog.show(ProductDialogShare, data),
+      },
+      reminder: {
+        props: {
+          icon: "isax isax-notification4",
+          severity: "secondary",
+          text: true,
+          rounded: true,
+        },
+        click: () => {
+            if (token.value)
+                dialog.show(ProductDialogReminder, data)
+            else router.push('/auth/login')
+        }
+      },
+      chart: {
+        props: {
+          icon: "isax isax-chart-2",
+          severity: "secondary",
+          text: true,
+          rounded: true,
+        },
+        click: () => dialog.show(ProductDialogLineChart, data),
+      },
+      compare: {
+        props: {
+          icon: "isax isax-row-horizontal4",
+          severity: "secondary",
+          text: true,
+          rounded: true,
+        },
+        click: () => router.push("/compare/" + data.id),
+      },
+    },
+    checkboxes: {
+      reminder: ["sms", "notif", "email"],
+      report: [
+        "incorrectName",
+        "inappropriatePhoto",
+        "incorrectSpecs",
+        "incorrectDesc",
+        "notOriginal",
+        "duplicate",
+      ],
+    },
+    sorts: [
+      "mostRelevant",
+      "mostVisited",
+      "newest",
+      "bestselling",
+      "cheapest",
+      "mostExpensive",
+      "buyersSuggestion",
+    ],
+  });
 
-    return confg;
-}
\ No newline at end of file
+  return confg;
+};
diff --git a/layouts/mobile.vue b/layouts/mobile.vue
index d710b33..7911b9b 100644
--- a/layouts/mobile.vue
+++ b/layouts/mobile.vue
@@ -15,7 +15,7 @@ const { config } = useAttrs()
 const { header = true, navigation = true } = config.mobile
 provide('config', config)
 
-const { status, data } = await useFetch('/api/headers')
+const { status, data, error } = await useFetch('/api/headers')
 
 if (status.value == 'success')
     sidebar.props = { menu: data.value }