summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/home/api/categoryManagementApi.js78
-rw-r--r--src/lib/home/components/CategoryDynamic.jsx135
-rw-r--r--src/lib/home/components/CategoryDynamicMobile.jsx174
3 files changed, 234 insertions, 153 deletions
diff --git a/src/lib/home/api/categoryManagementApi.js b/src/lib/home/api/categoryManagementApi.js
index 0aeb2aac..2ff4fdfc 100644
--- a/src/lib/home/api/categoryManagementApi.js
+++ b/src/lib/home/api/categoryManagementApi.js
@@ -1,40 +1,44 @@
export const fetchCategoryManagementSolr = async () => {
- let sort ='sort=sequence_i asc';
- try {
- const response = await fetch(`/solr/category_management/query?q=*:*&q.op=OR&indent=true&${sort}&&rows=20`);
- if (!response.ok) {
- throw new Error(`HTTP error! status: ${response.status}`);
- }
- const data = await response.json();
- const promotions = await map(data.response.docs);
- return promotions;
- } catch (error) {
- console.error("Error fetching promotion data:", error);
- return [];
+ let sort = 'sort=sequence_i asc';
+ try {
+ const response = await fetch(
+ `/solr/category_management/query?q=*:*&q.op=OR&indent=true&${sort}&&rows=20`
+ );
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ const data = await response.json();
+ const promotions = await map(data.response.docs);
+ return promotions;
+ } catch (error) {
+ console.error('Error fetching promotion data:', error);
+ return [];
+ }
+};
+
+const map = async (promotions) => {
+ return promotions.map((promotion) => {
+ let parsedCategories = promotion.categories.map((category) => {
+ // Parse string JSON utama
+ let parsedCategory = JSON.parse(category);
+
+ // Parse setiap elemen di child_frontend_id_i jika ada
+ if (parsedCategory.child_frontend_id_i) {
+ parsedCategory.child_frontend_id_i =
+ parsedCategory.child_frontend_id_i.map((child) => JSON.parse(child));
}
+
+ return parsedCategory;
+ });
+ let productMapped = {
+ id: promotion.id,
+ name: promotion.name_s,
+ image: promotion.image_s,
+ sequence: promotion.sequence_i,
+ numFound: promotion.numFound_i,
+ categories: parsedCategories,
+ category_id: promotion.category_id_i,
};
-
- const map = async (promotions) => {
- return promotions.map((promotion) =>{
- let parsedCategories = promotion.categories.map(category => {
- // Parse string JSON utama
- let parsedCategory = JSON.parse(category);
-
- // Parse setiap elemen di child_frontend_id_i jika ada
- if (parsedCategory.child_frontend_id_i) {
- parsedCategory.child_frontend_id_i = parsedCategory.child_frontend_id_i.map(child => JSON.parse(child));
- }
-
- return parsedCategory;
- });
- let productMapped = {
- id: promotion.id,
- name: promotion.name_s,
- image: promotion.image_s,
- sequence: promotion.sequence_i,
- numFound: promotion.numFound_i,
- categories: parsedCategories
- };
- return productMapped;
- })
- }; \ No newline at end of file
+ return productMapped;
+ });
+};
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index ca104ada..da2faf3d 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -1,7 +1,7 @@
import React, { useEffect, useState, useCallback } from 'react';
-import {fetchCategoryManagementSolr} from '../api/categoryManagementApi'
+import { fetchCategoryManagementSolr } from '../api/categoryManagementApi';
import NextImage from 'next/image';
-import Link from "next/link";
+import Link from 'next/link';
import { createSlug } from '@/core/utils/slug';
import odooApi from '@/core/api/odooApi';
import { Skeleton } from '@chakra-ui/react';
@@ -12,35 +12,34 @@ import 'swiper/css/pagination';
import { Navigation, Pagination, Autoplay } from 'swiper';
const CategoryDynamic = () => {
-
- const [categoryManagement, setCategoryManagement] = useState([])
- const [isLoading, setIsLoading] = useState(false)
+ const [categoryManagement, setCategoryManagement] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
const loadBrand = useCallback(async () => {
- setIsLoading(true)
+ setIsLoading(true);
const items = await fetchCategoryManagementSolr();
-
- setIsLoading(false)
- setCategoryManagement(items)
- }, [])
+
+ setIsLoading(false);
+ setCategoryManagement(items);
+ }, []);
useEffect(() => {
- loadBrand()
- }, [loadBrand])
-
+ loadBrand();
+ }, [loadBrand]);
+
// const [categoryData, setCategoryData] = useState({});
// const [subCategoryData, setSubCategoryData] = useState({});
-
+
// useEffect(() => {
// const fetchCategoryData = async () => {
// if (categoryManagement && categoryManagement.data) {
// const updatedCategoryData = {};
// const updatedSubCategoryData = {};
-
+
// for (const category of categoryManagement.data) {
// const countLevel1 = await odooApi('GET', `/api/v1/category/numFound?parent_id=${category.categoryIdI}`);
-
+
// updatedCategoryData[category.categoryIdI] = countLevel1?.numFound;
-
+
// for (const subCategory of countLevel1?.children) {
// updatedSubCategoryData[subCategory.id] = subCategory?.numFound;
// }
@@ -55,34 +54,46 @@ const CategoryDynamic = () => {
// }, [categoryManagement.isLoading]);
const swiperBanner = {
- modules: [Pagination, ],
- classNames:'mySwiper',
+ modules: [Pagination],
+ classNames: 'mySwiper',
slidesPerView: 3,
- spaceBetween:10,
+ spaceBetween: 10,
pagination: {
dynamicBullets: true,
clickable: true,
- }
+ },
};
-
+
return (
<div>
- {categoryManagement && categoryManagement?.map((category) => {
+ {categoryManagement &&
+ categoryManagement?.map((category) => {
+ console.log('category', category);
// const countLevel1 = categoryData[category.categoryIdI] || 0;
return (
<Skeleton key={category.id} isLoaded={!isLoading}>
<div key={category.id}>
<div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
- <div className='font-semibold sm:text-h-lg mr-2'>{category.name}</div>
+ <div className='font-semibold sm:text-h-lg mr-2'>
+ {category.name}
+ </div>
{/* <Skeleton isLoaded={countLevel1 != 0}>
<p className={`text-gray_r-10 text-sm`}>{countLevel1} Produk tersedia</p>
</Skeleton> */}
- <Link href={createSlug('/shop/category/', category?.name, category?.id)} className="!text-red-500 font-semibold">Lihat Semua</Link>
+ <Link
+ href={createSlug(
+ '/shop/category/',
+ category?.name,
+ category?.category_id
+ )}
+ className='!text-red-500 font-semibold'
+ >
+ Lihat Semua
+ </Link>
</div>
-
+
{/* Swiper for SubCategories */}
- <Swiper {...swiperBanner}
- >
+ <Swiper {...swiperBanner}>
{category.categories.map((subCategory) => {
// const countLevel2 = subCategoryData[subCategory.idLevel2] || 0;
@@ -92,39 +103,69 @@ const CategoryDynamic = () => {
<div className='p-3'>
<div className='flex flex-row border rounded mb-2 justify-start items-center'>
<NextImage
- src={subCategory.image ? subCategory.image : "/images/noimage.jpeg"}
+ src={
+ subCategory.image
+ ? subCategory.image
+ : '/images/noimage.jpeg'
+ }
alt={subCategory.name}
width={90}
height={30}
className='object-fit p-4'
/>
<div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
- <div className='font-semibold text-lg mr-2'>{subCategory?.name}</div>
+ <div className='font-semibold text-lg mr-2'>
+ {subCategory?.name}
+ </div>
{/* <Skeleton isLoaded={countLevel2 != 0}>
<p className={`text-gray_r-10 text-sm`}>
{countLevel2} Produk tersedia
</p>
</Skeleton> */}
- <Link href={createSlug('/shop/category/', subCategory?.name, subCategory?.id_level_2)} className="!text-red-500 font-semibold">Lihat Semua</Link>
+ <Link
+ href={createSlug(
+ '/shop/category/',
+ subCategory?.name,
+ subCategory?.id_level_2
+ )}
+ className='!text-red-500 font-semibold'
+ >
+ Lihat Semua
+ </Link>
</div>
</div>
<div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px] min-h-[240px] content-start'>
- {subCategory.child_frontend_id_i.map((childCategory) => (
- <div key={childCategory.id} className=''>
- <Link href={createSlug('/shop/category/', childCategory?.name, childCategory?.id_level_3)} className="flex flex-row gap-2 border rounded group hover:border-red-500">
- <NextImage
- src={childCategory.image ? childCategory.image : "/images/noimage.jpeg"}
- alt={childCategory.name}
- className='p-2 ml-1'
- width={40}
- height={40}
- />
- <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
- <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>{childCategory.name}</div>
- </div>
- </Link>
- </div>
- ))}
+ {subCategory.child_frontend_id_i.map(
+ (childCategory) => (
+ <div key={childCategory.id} className=''>
+ <Link
+ href={createSlug(
+ '/shop/category/',
+ childCategory?.name,
+ childCategory?.id_level_3
+ )}
+ className='flex flex-row gap-2 border rounded group hover:border-red-500'
+ >
+ <NextImage
+ src={
+ childCategory.image
+ ? childCategory.image
+ : '/images/noimage.jpeg'
+ }
+ alt={childCategory.name}
+ className='p-2 ml-1'
+ width={40}
+ height={40}
+ />
+ <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
+ <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
+ {childCategory.name}
+ </div>
+ </div>
+ </Link>
+ </div>
+ )
+ )}
</div>
</div>
</div>
diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx
index 1061f3e4..af151df2 100644
--- a/src/lib/home/components/CategoryDynamicMobile.jsx
+++ b/src/lib/home/components/CategoryDynamicMobile.jsx
@@ -1,38 +1,41 @@
import React, { useEffect, useState, useCallback } from 'react';
import NextImage from 'next/image';
-import Link from "next/link";
+import Link from 'next/link';
import { createSlug } from '@/core/utils/slug';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
-import {fetchCategoryManagementSolr} from '../api/categoryManagementApi'
+import { fetchCategoryManagementSolr } from '../api/categoryManagementApi';
const CategoryDynamicMobile = () => {
const [selectedCategory, setSelectedCategory] = useState({});
- const [categoryManagement, setCategoryManagement] = useState([])
- const [isLoading, setIsLoading] = useState(false)
+ const [categoryManagement, setCategoryManagement] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
const loadBrand = useCallback(async () => {
- setIsLoading(true)
+ setIsLoading(true);
const items = await fetchCategoryManagementSolr();
-
- setIsLoading(false)
- setCategoryManagement(items)
- }, [])
+
+ setIsLoading(false);
+ setCategoryManagement(items);
+ }, []);
useEffect(() => {
- loadBrand()
- }, [loadBrand])
+ loadBrand();
+ }, [loadBrand]);
useEffect(() => {
const loadPromo = async () => {
try {
if (categoryManagement?.length > 0) {
- const initialSelections = categoryManagement.reduce((acc, category) => {
- if (category.categories.length > 0) {
- acc[category.id] = category.categories[0].id_level_2;
- }
- return acc;
- }, {});
+ const initialSelections = categoryManagement.reduce(
+ (acc, category) => {
+ if (category.categories.length > 0) {
+ acc[category.id] = category.categories[0].id_level_2;
+ }
+ return acc;
+ },
+ {}
+ );
setSelectedCategory(initialSelections);
}
} catch (loadError) {
@@ -44,69 +47,102 @@ const CategoryDynamicMobile = () => {
}, [categoryManagement]);
const handleCategoryLevel2Click = (categoryIdI, idLevel2) => {
- setSelectedCategory(prev => ({
+ setSelectedCategory((prev) => ({
...prev,
- [categoryIdI]: idLevel2
+ [categoryIdI]: idLevel2,
}));
};
-
+
return (
<div className='p-4'>
- {categoryManagement && categoryManagement?.map((category) => (
- <div key={category.id}>
- <div className='bagian-judul flex flex-row justify-between items-center gap-3 mb-4 mt-4'>
- <div className='font-semibold sm:text-h-sm mr-2'>{category?.name}</div>
- <Link href={createSlug('/shop/category/', category?.name, category?.id)} className="!text-red-500 font-semibold text-sm">Lihat Semua</Link>
- </div>
- <Swiper slidesPerView={2.3} spaceBetween={10}>
- {category.categories.map((index) => (
- <SwiperSlide key={index.id}>
- <div
- onClick={() => handleCategoryLevel2Click(category.id, index?.id_level_2)}
- className={`border flex justify-start items-center max-w-48 max-h-16 rounded ${selectedCategory[category.id] === index?.id_level_2 ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
- >
- <div className='p-1 flex justify-start items-center'>
- <div className='flex flex-row justify-center items-center'>
- <NextImage
- src={index.image ? index.image : "/images/noimage.jpeg"}
- alt={index.name}
- width={30}
- height={30}
- className=''
- />
- <div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'>
- <div className='font-semibold text-[10px] line-clamp-1'>{index?.name}</div>
- </div>
- </div>
- </div>
- </div>
- </SwiperSlide>
- ))}
- </Swiper>
- <div className='p-3 mt-2 border'>
- <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px]'>
+ {categoryManagement &&
+ categoryManagement?.map((category) => (
+ <div key={category.id}>
+ <div className='bagian-judul flex flex-row justify-between items-center gap-3 mb-4 mt-4'>
+ <div className='font-semibold sm:text-h-sm mr-2'>
+ {category?.name}
+ </div>
+ <Link
+ href={createSlug(
+ '/shop/category/',
+ category?.name,
+ category?.category_id
+ )}
+ className='!text-red-500 font-semibold text-sm'
+ >
+ Lihat Semua
+ </Link>
+ </div>
+ <Swiper slidesPerView={2.3} spaceBetween={10}>
{category.categories.map((index) => (
- selectedCategory[category.id] === index?.id_level_2 && index?.child_frontend_id_i.map((x) => (
- <div key={x.id}>
- <Link href={createSlug('/shop/category/', x?.name, x?.id_level_3)} className="flex flex-row gap-1 border rounded group hover:border-red-500">
- <NextImage
- src={x.image ? x.image : "/images/noimage.jpeg"}
- alt={x.name}
- width={40}
- height={40}
- className='p-2'
- />
- <div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'>
- <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>{x?.name}</div>
+ <SwiperSlide key={index.id}>
+ <div
+ onClick={() =>
+ handleCategoryLevel2Click(category.id, index?.id_level_2)
+ }
+ className={`border flex justify-start items-center max-w-48 max-h-16 rounded ${
+ selectedCategory[category.id] === index?.id_level_2
+ ? 'bg-red-50 border-red-500 text-red-500'
+ : 'border-gray-200 text-gray-900'
+ }`}
+ >
+ <div className='p-1 flex justify-start items-center'>
+ <div className='flex flex-row justify-center items-center'>
+ <NextImage
+ src={
+ index.image ? index.image : '/images/noimage.jpeg'
+ }
+ alt={index.name}
+ width={30}
+ height={30}
+ className=''
+ />
+ <div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'>
+ <div className='font-semibold text-[10px] line-clamp-1'>
+ {index?.name}
+ </div>
+ </div>
</div>
- </Link>
+ </div>
</div>
- ))
+ </SwiperSlide>
))}
+ </Swiper>
+ <div className='p-3 mt-2 border'>
+ <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px]'>
+ {category.categories.map(
+ (index) =>
+ selectedCategory[category.id] === index?.id_level_2 &&
+ index?.child_frontend_id_i.map((x) => (
+ <div key={x.id}>
+ <Link
+ href={createSlug(
+ '/shop/category/',
+ x?.name,
+ x?.id_level_3
+ )}
+ className='flex flex-row gap-1 border rounded group hover:border-red-500'
+ >
+ <NextImage
+ src={x.image ? x.image : '/images/noimage.jpeg'}
+ alt={x.name}
+ width={40}
+ height={40}
+ className='p-2'
+ />
+ <div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'>
+ <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>
+ {x?.name}
+ </div>
+ </div>
+ </Link>
+ </div>
+ ))
+ )}
+ </div>
</div>
</div>
- </div>
- ))}
+ ))}
</div>
);
};
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 02:53:42 +0000