diff options
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/product/components/ProductFilter.jsx | 36 | ||||
| -rw-r--r-- | src/lib/product/components/ProductFilterDesktop.jsx | 67 |
2 files changed, 61 insertions, 42 deletions
diff --git a/src/lib/product/components/ProductFilter.jsx b/src/lib/product/components/ProductFilter.jsx index 38e2d2c3..14eef0ba 100644 --- a/src/lib/product/components/ProductFilter.jsx +++ b/src/lib/product/components/ProductFilter.jsx @@ -96,12 +96,18 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr value={brand} onChange={(e) => setBrand(e.target.value)} > - <option value=''>Pilih Brand...</option> - {brands.map((brand, index) => ( - <option value={brand.brand} key={index}> - {brand.brand} <span className='text-sm text-gray-200'>({brand.qty})</span> - </option> - ))} + {brands.length > 0 ? ( + <> + <option value=''>Pilih Brand...</option> + {brands.map((brand, index) => ( + <option value={brand.brand} key={index}> + {brand.brand} <span className='text-sm text-gray-200'>({brand.qty})</span> + </option> + ))} + </> + ) : ( + <option value=''>Brands tidak tersedia</option> + )} </select> </div> )} @@ -114,12 +120,18 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr value={category} onChange={(e) => setCategory(e.target.value)} > - <option value=''>Pilih Kategori...</option> - {categories.map((category, index) => ( - <option value={category.name} key={index}> - {category.name} <span className='text-sm text-gray-200'>({category.qty})</span> - </option> - ))} + {categories.length > 0 ? ( + <> + <option value=''>Pilih Kategori...</option> + {categories.map((category, index) => ( + <option value={category.name} key={index}> + {category.name} <span className='text-sm text-gray-200'>({category.qty})</span> + </option> + ))} + </> + ) : ( + <option value=''>Kategori tidak tersedia</option> + )} </select> </div> <div> diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx index 582dabea..e84d6526 100644 --- a/src/lib/product/components/ProductFilterDesktop.jsx +++ b/src/lib/product/components/ProductFilterDesktop.jsx @@ -111,7 +111,6 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu return ( <> <Accordion defaultIndex={[0]} allowMultiple> - {!router.pathname.includes('brands') && ( <AccordionItem> <AccordionButton padding={[2, 4]}> @@ -123,21 +122,25 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu <AccordionPanel> <Stack gap={3} direction='column' maxH={'240px'} overflow='auto'> - {brands.map((brand, index) => ( - <div className='flex items-center gap-2 ' key={index}> - <Checkbox - isChecked={brandValues.includes(brand.brand)} - onChange={handleBrandsChange} - value={brand.brand} - size='md' - > - <div className='flex items-center gap-2'> - <span>{brand.brand} </span> - <span className='text-sm text-gray-600'>({brand.qty})</span> - </div> - </Checkbox> - </div> - ))} + {brands && brands.length > 0 ? ( + brands.map((brand, index) => ( + <div className='flex items-center gap-2 ' key={index}> + <Checkbox + isChecked={brandValues.includes(brand.brand)} + onChange={handleBrandsChange} + value={brand.brand} + size='md' + > + <div className='flex items-center gap-2'> + <span>{brand.brand} </span> + <span className='text-sm text-gray-600'>({brand.qty})</span> + </div> + </Checkbox> + </div> + )) + ) : ( + <div className='flex items-center gap-2'>Brands tidak tersedia</div> + )} </Stack> </AccordionPanel> </AccordionItem> @@ -153,21 +156,25 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu <AccordionPanel> <Stack gap={3} direction='column' maxH={'240px'} overflow='auto'> - {categories.map((category, index) => ( - <div className='flex items-center gap-2' key={index}> - <Checkbox - isChecked={categoryValues.includes(category.name)} - onChange={handleCategoriesChange} - value={category.name} - size='md' - > - <div className='flex items-center gap-2'> + {categories && categories.length > 0 ? ( + categories.map((category, index) => ( + <div className='flex items-center gap-2' key={index}> + <Checkbox + isChecked={categoryValues.includes(category.name)} + onChange={handleCategoriesChange} + value={category.name} + size='md' + > + <div className='flex items-center gap-2'> <span>{category.name} </span> <span className='text-sm text-gray-600'>({category.qty})</span> </div> - </Checkbox> - </div> - ))} + </Checkbox> + </div> + )) + ) : ( + <div className='flex items-center gap-2'>Kategori tidak tersedia</div> + )} </Stack> </AccordionPanel> </AccordionItem> @@ -218,7 +225,7 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu </AccordionPanel> </AccordionItem> - <AccordionItem> + {/* <AccordionItem> <AccordionButton padding={[2, 4]}> <Box as='span' flex='1' textAlign='left' fontWeight='semibold'> Ketersedian Stok @@ -236,7 +243,7 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu Ketersedian Stock </Checkbox> </AccordionPanel> - </AccordionItem> + </AccordionItem> */} </Accordion> <Button className='w-full mt-6' colorScheme='red' onClick={handleSubmit}> |