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 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,
          },
        },
      },
    },
    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,
            },
          ],
        };
      },
      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");
          }
        },
      },
      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: () => {
          if (token.value) fevorites.update(data.id);
          else router.push("/auth/login");
        },
      },
      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: () => {
          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;
};