134 lines
3.6 KiB
TypeScript
134 lines
3.6 KiB
TypeScript
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
import { MenuCategoryProps } from '../model/types';
|
|
import { useStore } from '@/shared/model/store';
|
|
import { IMAGE_ROOT } from '@/shared/constants/common';
|
|
import { UserFavorite } from '@/entities/user/model/types';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export const MenuCategory = ({
|
|
menuId,
|
|
menuIcon,
|
|
menuName,
|
|
subMenu,
|
|
setMenuOn,
|
|
editMode,
|
|
setChangeMenuId
|
|
}: MenuCategoryProps) => {
|
|
const { navigate } = useNavigate();
|
|
|
|
const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
|
|
const [menuIds, setMenuIds] = useState<Array<string | undefined>>([]);
|
|
|
|
const onClickToNavigate = (path?: string) => {
|
|
if(!!path && !!setMenuOn && !editMode){
|
|
setMenuOn(false);
|
|
navigate(path);
|
|
}
|
|
};
|
|
|
|
const favoriteSetting = (
|
|
checked: boolean,
|
|
title?: string,
|
|
path?: string,
|
|
menuId?: string
|
|
) => {
|
|
console.log(checked, title, path, menuId)
|
|
let userFavorite = useStore.getState().UserStore.userFavorite;
|
|
if(checked){
|
|
userFavorite = [
|
|
...userFavorite,
|
|
{
|
|
title: title,
|
|
img: IMAGE_ROOT + '/ico_menu_01.svg',
|
|
path: path,
|
|
menuId: menuId
|
|
}
|
|
];
|
|
}
|
|
else{
|
|
userFavorite = userFavorite.filter((value, index) => {
|
|
return value.menuId !== menuId
|
|
});
|
|
}
|
|
useStore.getState().UserStore.setUserFavorite(userFavorite);
|
|
callFavoiteItems();
|
|
if(setChangeMenuId){
|
|
setChangeMenuId(menuId);
|
|
}
|
|
};
|
|
|
|
const callFavoiteItems = () => {
|
|
let userFavorite = useStore.getState().UserStore.userFavorite;
|
|
console.log(userFavorite)
|
|
setFavoriteItems(userFavorite);
|
|
let newArr: Array<string | undefined> = userFavorite.map((value, index) => {
|
|
return value.menuId;
|
|
});
|
|
setMenuIds(newArr);
|
|
};
|
|
|
|
useEffect(() => {
|
|
callFavoiteItems();
|
|
}, []);
|
|
|
|
const getMenuItems = () => {
|
|
let rs = [];
|
|
if(subMenu){
|
|
for(let i=0;i<subMenu.length;i++){
|
|
if(!!editMode){
|
|
rs.push(
|
|
<li
|
|
key={ `menu-item-key-${menuId}-${i}` }
|
|
onClick={ () => onClickToNavigate(subMenu[i]?.path) }
|
|
>
|
|
<span>{ subMenu[i]?.menuName }</span>
|
|
<div className="check_box_scrap">
|
|
<input
|
|
id={ `menu-item-checkbox-${subMenu[i]?.menuId}-${i}` }
|
|
className="checkbox"
|
|
type="checkbox"
|
|
checked={ menuIds.includes(subMenu[i]?.menuId)? true: false }
|
|
onChange={ (e) => favoriteSetting(
|
|
e.target.checked,
|
|
subMenu[i]?.menuName,
|
|
subMenu[i]?.path,
|
|
subMenu[i]?.menuId
|
|
)}
|
|
/>
|
|
<label
|
|
className="gtr"
|
|
htmlFor={ `menu-item-checkbox-${subMenu[i]?.menuId}-${i}` }
|
|
></label>
|
|
</div>
|
|
</li>
|
|
);
|
|
}
|
|
else{
|
|
rs.push(
|
|
<li
|
|
key={ `menu-item-key-${i}` }
|
|
onClick={ () => onClickToNavigate(subMenu[i]?.path) }
|
|
>{ subMenu[i]?.menuName }</li>
|
|
);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
return rs;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="menu-category">
|
|
<div className="category-header">
|
|
<div className={ 'category-icon ' + menuIcon }></div>
|
|
<span>{ menuName }</span>
|
|
</div>
|
|
<ul className="category-items">
|
|
{ getMenuItems() }
|
|
</ul>
|
|
</div>
|
|
</>
|
|
);
|
|
}; |