anahita-front/initialize/product.js

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 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,
                    }
                },
            }
        },
        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 + ' T')
                    })

                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 } } }
                }
            }
        },
        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)
            }
        },
        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 })
            },
        },
        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)
            },
        },
        checkboxes: {
            reminder: ["sms", "notif", "email"],
            report: [
                "incorrectName", "inappropriatePhoto", "incorrectSpecs", "incorrectDesc", "notOriginal", "duplicate",
            ]
        },
        sorts: [
            "mostRelevant", "mostVisited", "newest", "bestselling", "cheapest", "mostExpensive", "buyersSuggestion",
        ]
    })

    return confg;
}