126 lines
3.5 KiB
TypeScript
126 lines
3.5 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
import 'swiper/css';
|
|
import { IMAGE_ROOT } from '@/shared/constants/common';
|
|
import { UserFavorite } from '@/entities/user/model/types';
|
|
import { useFavoriteEditOnStore, useMenuOnStore, useStore } from '@/shared/model/store';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { showAlert } from '@/widgets/show-alert';
|
|
import { checkGrant } from '@/shared/lib/check-grant';
|
|
|
|
export interface FavoriteWrapperProps {
|
|
usingType: 'home' | 'menu',
|
|
changeMenuId?: string;
|
|
};
|
|
|
|
export const FavoriteWrapper = ({
|
|
usingType,
|
|
changeMenuId,
|
|
}: FavoriteWrapperProps) => {
|
|
const { navigate } = useNavigate();
|
|
const { i18n, t } = useTranslation();
|
|
|
|
const { menuOn, setMenuOn } = useMenuOnStore();
|
|
const { favoriteEditOn, setFavoriteEditOn } = useFavoriteEditOnStore();
|
|
|
|
const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
|
|
|
|
const itemAdd: UserFavorite = {
|
|
menuId: -1,
|
|
menuName: t('favorite.edit'),
|
|
menuNameEng: t('favorite.edit'),
|
|
iconFilePath: IMAGE_ROOT + '/ico_menu_plus.svg',
|
|
programPath: '',
|
|
};
|
|
|
|
const onClickToFavoriteEdit = () => {
|
|
setMenuOn(true);
|
|
setFavoriteEditOn(true);
|
|
};
|
|
|
|
const onClickToNavigate = (menuId?: number, path?: string) => {
|
|
if(menuId && checkGrant(menuId, 'R')){
|
|
if(!!path){
|
|
navigate(path);
|
|
setMenuOn(false);
|
|
}
|
|
}
|
|
else{
|
|
showAlert(t('common.nopermission'));
|
|
}
|
|
};
|
|
|
|
const getFavoriteList = () => {
|
|
let userFavorite = useStore.getState().UserStore.userFavorite;
|
|
setFavoriteItems(userFavorite);
|
|
};
|
|
|
|
const makeFavoriteItems = () => {
|
|
let rs = [];
|
|
for(let i=0;i<favoriteItems.length;i++){
|
|
const displayName = i18n.language === 'en' && favoriteItems[i]?.menuNameEng
|
|
? favoriteItems[i]?.menuNameEng
|
|
: favoriteItems[i]?.menuName;
|
|
|
|
rs.push(
|
|
<SwiperSlide key={ `favorite-slide-key-${i}` }>
|
|
<div
|
|
className="swiper-item"
|
|
onClick={ () => !favoriteEditOn && onClickToNavigate(favoriteItems[i]?.menuId, favoriteItems[i]?.programPath) }
|
|
>
|
|
<div className="swiper-icon coin-icon">
|
|
<img
|
|
src={ favoriteItems[i]?.iconFilePath || '' }
|
|
alt={ displayName }
|
|
/>
|
|
</div>
|
|
<span className="swiper-text">{ displayName }</span>
|
|
</div>
|
|
</SwiperSlide>
|
|
);
|
|
}
|
|
return rs;
|
|
};
|
|
const makeAddFavoriteItem = () => {
|
|
let rs = [];
|
|
if(!favoriteEditOn){
|
|
rs.push(
|
|
<SwiperSlide key={ `favorite-item-add-slide-key` }>
|
|
<div
|
|
className="swiper-item"
|
|
onClick={ onClickToFavoriteEdit }
|
|
>
|
|
<div className="swiper-icon coin-icon">
|
|
<img
|
|
src={ itemAdd.iconFilePath || '' }
|
|
alt={ itemAdd.menuName }
|
|
/>
|
|
</div>
|
|
<span className="swiper-text">{ itemAdd.menuName }</span>
|
|
</div>
|
|
</SwiperSlide>
|
|
);
|
|
}
|
|
|
|
return rs;
|
|
};
|
|
|
|
useEffect(() => {
|
|
getFavoriteList();
|
|
}, [changeMenuId, favoriteEditOn]);
|
|
|
|
return (
|
|
<>
|
|
<Swiper
|
|
spaceBetween={ 9 }
|
|
slidesPerView={ 4 }
|
|
style={{height: ((usingType === 'home') && (favoriteItems.length < 1))? '0px': '75px'}}
|
|
>
|
|
{ (favoriteItems.length > 0) && makeFavoriteItems() }
|
|
{ makeAddFavoriteItem() }
|
|
</Swiper>
|
|
</>
|
|
);
|
|
};
|