phx-react
Version:
PHX REACT
764 lines • 70.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXMainWrapV3 = void 0;
const tslib_1 = require("tslib");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const react_1 = require("@headlessui/react");
const outline_1 = require("@heroicons/react/24/outline");
const react_2 = tslib_1.__importStar(require("react"));
const Modal_1 = require("../Modal");
const Skeleton_1 = require("../Skeleton");
const js_cookie_1 = tslib_1.__importDefault(require("js-cookie"));
const constants_1 = require("../../utils/constants");
const solid_1 = require("@heroicons/react/20/solid");
const fontawesome_svg_core_1 = require("@fortawesome/fontawesome-svg-core");
const search_bar_1 = tslib_1.__importDefault(require("./search/search-bar"));
const Banner_1 = require("../Banner");
const solid_2 = require("@heroicons/react/24/solid");
const PHXGrpcClientV3_1 = require("../Func/GRPC/PHXGrpcClientV3");
const query_1 = require("../../query");
const Card_1 = require("../Card");
const getEnvPublic_1 = tslib_1.__importDefault(require("../Func/getEnvPublic"));
const saveCookiesClient_1 = tslib_1.__importDefault(require("../Func/saveCookiesClient"));
const appearance_styled_1 = tslib_1.__importDefault(require("./appearance/appearance-styled"));
const nav_mobile_1 = tslib_1.__importDefault(require("./navigator/nav-mobile"));
const sub_menu_style_1 = require("./style/sub-menu-style");
const Icon_1 = require("./assets/Icon");
const image_1 = tslib_1.__importDefault(require("next/image"));
const axios_1 = tslib_1.__importDefault(require("axios"));
const getCookieSession_1 = tslib_1.__importDefault(require("../Func/getCookieSession"));
const LoadingProvider_1 = require("../LoadingProvider");
const helpers_1 = require("../../helpers/helpers");
const page_tracker_1 = require("../../stores/page-tracker/page-tracker");
const sessionStore_1 = require("../Func/sessionStore");
fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.fas);
function classNames(...classes) {
return classes.filter(Boolean).join(' ');
}
const PHXMainWrapV3 = ({ children, hiddenLeftMenu = false, logoHeight = '28px', multipleMenu = false, params, pathName, router, getDataCookies, }) => {
var _a, _b, _c, _d, _e;
const { pid } = params ? params : {};
const [modal, setModal] = (0, react_2.useState)(false);
const [openSubMenu, setOpenSubMenu] = (0, react_2.useState)(true);
const [campaignName, setCampaignName] = (0, react_2.useState)('');
const [sidebarOpen, setSidebarOpen] = (0, react_2.useState)(false);
const [subNavigation, setSubNavigation] = (0, react_2.useState)([]);
const [navigation, setNavigation] = (0, react_2.useState)([]);
const [modalSignOut, setModalSignOut] = (0, react_2.useState)(false);
const [showBanner, setShowBanner] = (0, react_2.useState)(true);
const [isLoading, setIsLoading] = (0, react_2.useState)(true);
const sessionCookie = (0, react_2.useRef)((0, getCookieSession_1.default)());
const userSessionInfo = (_a = sessionCookie.current) === null || _a === void 0 ? void 0 : _a.user_info;
const schoolInfoId = userSessionInfo === null || userSessionInfo === void 0 ? void 0 : userSessionInfo.school_id;
const userId = userSessionInfo === null || userSessionInfo === void 0 ? void 0 : userSessionInfo.id;
const { setLoading: setGlobalLoading } = (0, LoadingProvider_1.useLoading)();
const [dataInitMain, setDataInitMain] = (0, react_2.useState)({
menuDefault: [],
loadingMenu: true,
loadingSchool: true,
listSchool: [],
logo: {
path: '',
height: logoHeight,
},
menu: [],
schoolId: null,
configLayout: undefined,
perCode: [],
roleCode: [],
isLoadingPermission: true,
sourceAvatar: ((_b = userSessionInfo === null || userSessionInfo === void 0 ? void 0 : userSessionInfo.user_avatar) === null || _b === void 0 ? void 0 : _b.size_small) || (userSessionInfo === null || userSessionInfo === void 0 ? void 0 : userSessionInfo.avatar) || constants_1.DEFAULT_AVATAR,
});
const locationPathname = typeof window !== 'undefined' ? window.location.pathname : '';
const locationArr = locationPathname.split('/').filter(Boolean);
const basePath = locationArr.slice(0, locationArr.length - pathName.split('/').filter(Boolean).length).join('/');
const pathNameWithBasePath = `${basePath ? `${'/' + basePath}` : ''}${pathName}`;
function enablePer(code, arr) {
if (!code)
return true;
return arr === null || arr === void 0 ? void 0 : arr.some((item) => item === code);
}
// Lấy code phân quyền trong menu từ path hiện tại
function getCodesByPath(dataMenu, currentPath) {
let lastMatchingCode = null;
const normalizedPath = currentPath.replace(/\/$/, '');
function traverse(items, prefix) {
for (const item of items) {
const fullPath = item.path.startsWith('/') ? prefix + item.path : item.path;
const normalizedFullPath = fullPath.replace(/\/$/, '');
if (normalizedPath === normalizedFullPath || normalizedPath.startsWith(normalizedFullPath + '/')) {
lastMatchingCode = item.code;
}
if (item.child) {
traverse(item.child, prefix);
}
}
}
for (const rootItem of dataMenu) {
const rootPath = rootItem.path;
const prefix = rootPath.split('/').slice(0, 2).join('/');
traverse([rootItem], prefix);
}
return lastMatchingCode ? lastMatchingCode : null;
}
// code phân quyền path hiện tại
const currentCode = getCodesByPath(dataInitMain.menuDefault, locationPathname);
const requireLoginValidation = () => {
(0, sessionStore_1.clearSession)();
const currentURL = window.location.href;
const url = currentURL.split('/');
const loginPush = `${url[0]}//${url[2]}/login-sso`;
window.location.replace(loginPush);
};
const checkIsQuitJob = ({ profileStaff, profileTeacher }) => {
try {
// xóa cookies với những tài khoản giáo viên, nhân viên đã nghỉ việc
const staffIsQuitJob = profileStaff === null || profileStaff === void 0 ? void 0 : profileStaff.is_quit_job;
const teacherIsQuitJob = profileTeacher === null || profileTeacher === void 0 ? void 0 : profileTeacher.is_quit_job;
if (staffIsQuitJob || teacherIsQuitJob) {
console.log('Phiên đăng nhập đã hết hạn');
Object.keys(js_cookie_1.default.get()).forEach((cookieName) => {
js_cookie_1.default.remove(cookieName);
});
requireLoginValidation();
}
}
catch (error) {
console.log(error);
}
};
const fetchDataPer = async () => {
var _a, _b, _c, _d;
try {
const res = await (0, PHXGrpcClientV3_1.PHXClientQueryV3)({
query: query_1.GET_PERMISSION_DETAIL_USER_V3,
variables: { id: userId, school_id: schoolInfoId },
});
const userPermissions = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.permission_user) !== null && _b !== void 0 ? _b : [];
const rolePermissions = (_d = (_c = res.data) === null || _c === void 0 ? void 0 : _c.permission_role) !== null && _d !== void 0 ? _d : [];
const allPermissions = [...userPermissions, ...rolePermissions];
// Tách quyền theo loại: quyền route (không phải action) và quyền action
const permissionCodes = allPermissions.map((p) => p.permission);
const routePermissions = permissionCodes.filter((p) => !p.is_action).map((p) => p.code);
const actionPermissions = permissionCodes.filter((p) => p.is_action).map((p) => p.code);
// Tạo object dạng { ACTION_CODE: true }
const actionPermissionMap = Object.fromEntries(actionPermissions.map((code) => [code, true]));
// Xoá trùng và set route permissions
const uniqueRoutePermissions = Array.from(new Set(routePermissions));
return { uniqueRoutePermissions, actionPermissionMap };
}
catch (error) {
console.error('Error fetching school data:', error);
return { uniqueRoutePermissions: null, actionPermissionMap: null };
}
};
const getProfileByUser = async () => {
try {
const response = await (0, PHXGrpcClientV3_1.PHXClientQueryV3)({
query: query_1.QUERY_GET_PROFILE_USER,
variables: {
user_id: userId,
},
});
const profileUser = response.data.users_by_pk;
const { avatar, email, full_name, profile_staff, profile_teacher, user_avatar, user_roles } = profileUser;
// check user is quit job
checkIsQuitJob({
profileStaff: profile_staff,
profileTeacher: profile_teacher,
});
// renew list role in cookie
return {
avatar,
user_avatar,
full_name,
email,
user_code: (profile_staff === null || profile_staff === void 0 ? void 0 : profile_staff.user_code) || (profile_teacher === null || profile_teacher === void 0 ? void 0 : profile_teacher.user_code) || '',
user_roles,
};
}
catch (error) {
console.log(error);
return;
}
};
const fetchDataSchool = async () => {
var _a, _b, _c, _d;
if (!userSessionInfo)
return;
const { id, school: { school_name: { group_id }, school_name_id, }, school_id, } = userSessionInfo;
setIsLoading(true);
let settingSiteDb = undefined;
try {
const res = await (0, PHXGrpcClientV3_1.PHXClientQueryV3)({
query: query_1.GET_SCHOOL_V3,
variables: { group_id, school_name_id, user_id: id },
isDelay: false,
});
const dataSchool = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.school_name[0]) === null || _b === void 0 ? void 0 : _b.schools;
const settingFetchData = (_d = (_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.setting_site[0]) === null || _d === void 0 ? void 0 : _d.value_setting;
if (settingFetchData) {
const cleanedJsonString = settingFetchData.replace(/^"(.*)"$/, '$1');
settingSiteDb = JSON.parse(cleanedJsonString);
}
setIsLoading(false);
return {
settingSiteDb,
loadingSchool: dataSchool.length === 0,
listSchool: dataSchool,
schoolId: school_id,
};
}
catch (error) {
setIsLoading(false);
console.error('Error fetching school data:', error);
return;
}
};
const fetchDataMenu = async () => {
const envPublic = await (0, getEnvPublic_1.default)();
const menuUrl = envPublic === null || envPublic === void 0 ? void 0 : envPublic.SCHOOL_MENU_V2;
const logoMenuTop = envPublic === null || envPublic === void 0 ? void 0 : envPublic.SCHOOL_TOP_MENU_LOGO;
if (!menuUrl || !logoMenuTop) {
console.error('menu or logo not found');
}
const data = await fetch(menuUrl);
const menuJson = await data.json();
return {
loadingMenu: false,
logo: { path: logoMenuTop, height: logoHeight },
menu: menuJson,
};
};
const detectEnvByDomain = (domain, configEnv) => {
for (const [env, pattern] of Object.entries(configEnv)) {
if (env.startsWith('_comment'))
continue; // bỏ qua comment
const regex = new RegExp(pattern.replace(/\\\\/g, '\\'));
if (regex.test(domain))
return env;
}
return 'stg';
};
const getEnvByConfig = (configEnv) => {
const domain = window.location.hostname;
const env = detectEnvByDomain(domain, configEnv);
return `config_menu_${env}:disable`;
};
const isConfigEnvValid = (code, configDisable) => configDisable.length === 0 || !(configDisable === null || configDisable === void 0 ? void 0 : configDisable.includes(code));
const funcMenuByConfigEnv = (menuJson, configDisable) => {
const menuWithConfigEnv = [];
for (const item of menuJson) {
if (!isConfigEnvValid(item === null || item === void 0 ? void 0 : item.code, configDisable))
continue;
const menuItem = { ...item, child: [] };
const menuSecondLevel = (item === null || item === void 0 ? void 0 : item.child) || [];
for (const childItem of menuSecondLevel || []) {
if (!isConfigEnvValid(childItem === null || childItem === void 0 ? void 0 : childItem.code, configDisable))
continue;
const childMenuItem = { ...childItem, child: [] };
const menuThirdLevel = (childItem === null || childItem === void 0 ? void 0 : childItem.child) || [];
for (const subChildItem of menuThirdLevel) {
if (!isConfigEnvValid(subChildItem === null || subChildItem === void 0 ? void 0 : subChildItem.code, configDisable))
continue;
childMenuItem.child.push(subChildItem);
}
menuItem.child.push(childMenuItem);
}
menuWithConfigEnv.push(menuItem);
}
return menuWithConfigEnv;
};
const fetchInitData = async () => {
var _a;
const { loadingMenu, logo, menu } = await fetchDataMenu();
const profileNew = await getProfileByUser();
const dataPer = await fetchDataPer();
const dataSchool = await fetchDataSchool();
const { actionPermissionMap, uniqueRoutePermissions } = dataPer;
const { config_env } = menu;
const enviromentByDomainConfig = getEnvByConfig(config_env);
const menuJson = menu.menu;
const configDisable = menu[enviromentByDomainConfig];
setDataInitMain({
menuDefault: menuJson,
logo,
menu: funcMenuByConfigEnv(menuJson, configDisable),
loadingMenu,
schoolId: (dataSchool === null || dataSchool === void 0 ? void 0 : dataSchool.schoolId) || null,
loadingSchool: !!(dataSchool === null || dataSchool === void 0 ? void 0 : dataSchool.loadingSchool),
listSchool: (dataSchool === null || dataSchool === void 0 ? void 0 : dataSchool.listSchool) || [],
isLoadingPermission: false,
perCode: uniqueRoutePermissions,
roleCode: (profileNew === null || profileNew === void 0 ? void 0 : profileNew.user_roles.map((userRole) => { var _a; return (_a = userRole === null || userRole === void 0 ? void 0 : userRole.role) === null || _a === void 0 ? void 0 : _a.role_code; })) || [],
configLayout: (dataSchool === null || dataSchool === void 0 ? void 0 : dataSchool.settingSiteDb) || undefined,
sourceAvatar: ((_a = profileNew === null || profileNew === void 0 ? void 0 : profileNew.user_avatar) === null || _a === void 0 ? void 0 : _a.size_small) || (profileNew === null || profileNew === void 0 ? void 0 : profileNew.avatar) || constants_1.DEFAULT_AVATAR,
});
const currentSession = (0, getCookieSession_1.default)();
(0, saveCookiesClient_1.default)({
value: {
...currentSession,
...(actionPermissionMap && {
action_permission: actionPermissionMap || [],
}),
setting_site: (dataSchool === null || dataSchool === void 0 ? void 0 : dataSchool.settingSiteDb) || {},
...(profileNew && {
user_info: {
...userSessionInfo,
...profileNew,
},
}),
},
});
};
(0, react_2.useEffect)(() => {
if (!userSessionInfo) {
// Require login if production mode
requireLoginValidation();
return;
}
fetchInitData();
}, []);
const isEqualUrl = (parentHref, pathNameCompare) => {
if (!parentHref || !pathNameCompare) {
return false;
}
const pathNameSplit = pathNameCompare.split('/');
const hrefSplit = parentHref.split('/');
if (!pathNameSplit || !hrefSplit) {
return false;
}
let urlRouter;
let currentMenu;
if (multipleMenu) {
urlRouter = pathNameSplit[1] + pathNameSplit[2];
currentMenu = hrefSplit[1] + hrefSplit[2];
}
else {
urlRouter = pathNameSplit[1];
currentMenu = hrefSplit[1];
}
return urlRouter === currentMenu;
};
const isBelongParentWithMicroservice = (parentSplit, pathNameSplit) => {
if (parentSplit.length > 2) {
const compareLength = parentSplit.length;
for (let i = 1; i < compareLength; i++) {
if (parentSplit[i] !== pathNameSplit[i])
return false;
}
return true;
}
else {
return parentSplit[1] === pathNameSplit[3];
}
};
const isBelongParent = (parentUrl, pathNameCompare, isMicroservice) => {
const parentSplit = parentUrl.split('/');
const pathNameSplit = pathNameCompare.split('/');
if (isMicroservice) {
return isBelongParentWithMicroservice(parentSplit, pathNameSplit);
}
if (parentSplit.length > 2 && !parentSplit.includes('list')) {
return parentSplit[1] === pathNameSplit[2] && parentSplit[2] === pathNameSplit[3];
}
else {
return parentSplit[1] === pathNameSplit[2];
}
};
const checkAdmissions = (path) => {
const pathNameSplit = path.split('/');
return pathNameSplit[1] === 'admissions';
};
const loadParentNavigation = (path) => {
const mainNavigation = dataInitMain.menu;
const naviSize = mainNavigation.length;
for (let i = 0; i < naviSize; i++) {
const item = mainNavigation[i];
item.current = false;
if (item.path === path || isEqualUrl(item.path, path)) {
item.current = true;
// Find sub modules
const itemLength = item.child.length;
const listChildren = [];
for (let j = 0; j < itemLength; j++) {
const childItem = item.child[j];
// Active child item
childItem.current = isBelongParent(childItem.path, path, !!(childItem === null || childItem === void 0 ? void 0 : childItem.isMicroservice));
if (childItem.child) {
const childItemLength = childItem.child.length;
let count = 0;
for (let k = 0; k < childItemLength; k++) {
const subChild = childItem.child[k];
subChild.current = isBelongParent(subChild.path, path, !!(childItem === null || childItem === void 0 ? void 0 : childItem.isMicroservice));
if (isBelongParent(subChild.path, path, !!(childItem === null || childItem === void 0 ? void 0 : childItem.isMicroservice)) ||
isBelongParent(childItem.path, path, !!(childItem === null || childItem === void 0 ? void 0 : childItem.isMicroservice))) {
count++;
}
const isSameSubChildPath = (subChild === null || subChild === void 0 ? void 0 : subChild.isMicroservice)
? subChild.path === (childItem === null || childItem === void 0 ? void 0 : childItem.path)
: subChild.path === (childItem === null || childItem === void 0 ? void 0 : childItem.pathInternal);
const isPathInternal = (childItem === null || childItem === void 0 ? void 0 : childItem.isMicroservice) ? isSameSubChildPath : subChild.path === childItem.path;
count > 0 ? (childItem.showChild = true) : (childItem.showChild = false);
isPathInternal ? (childItem.current = false) : null;
}
}
listChildren.push(childItem);
}
setSubNavigation(listChildren);
}
}
setNavigation(mainNavigation);
};
const loadChildrenCampaign = (path) => {
const mainNavigation = dataInitMain.menu;
const naviSize = mainNavigation.length;
for (let i = 0; i < naviSize; i++) {
const item = mainNavigation[i];
item.current = false;
if (item.path === path || isEqualUrl(item.path, path)) {
item.current = true;
// Find sub modules
// const itemLength = item.child.length;
const campaign = item.child.filter((child) => child.path === '/campaign/list');
const listCampaign = campaign[0];
const itemLength = listCampaign === null || listCampaign === void 0 ? void 0 : listCampaign.childrenByParentDetail.length;
const listChildren = [];
for (let j = 0; j < itemLength; j++) {
const childItem = listCampaign === null || listCampaign === void 0 ? void 0 : listCampaign.childrenByParentDetail[j];
// Active child item
childItem.current = isBelongParent(childItem.path, path, false);
if (childItem.child) {
const childItemLength = childItem.child.length;
for (let k = 0; k < childItemLength; k++) {
const subChild = childItem.child[k];
subChild.current = isBelongParent(subChild.path, path, false);
if (isBelongParent(subChild.path, path, false) || isBelongParent(childItem.path, path, false)) {
childItem.showChild = true;
}
subChild.path === childItem.path ? (childItem.current = false) : null;
}
}
listChildren.push(childItem);
}
setSubNavigation(listChildren);
}
}
setNavigation(mainNavigation);
};
const checkChildrenCampaign = (path) => {
var _a;
const campaignMenu = (_a = dataInitMain.menu) === null || _a === void 0 ? void 0 : _a.find((item) => item.path === '/admissions/campaign/list');
const campaignChild = campaignMenu === null || campaignMenu === void 0 ? void 0 : campaignMenu.child;
const listChild = campaignChild === null || campaignChild === void 0 ? void 0 : campaignChild.find((item) => item.path === '/campaign/list');
const isChild = listChild === null || listChild === void 0 ? void 0 : listChild.childrenByParentDetail.find((item) => isBelongParent(item.path, path, false));
return isChild !== undefined;
};
(0, react_2.useEffect)(() => {
const isAdmissions = checkAdmissions(pathNameWithBasePath);
if (isAdmissions && checkChildrenCampaign(pathNameWithBasePath)) {
if (pathNameWithBasePath.includes('/admissions/overview/list/') && pid) {
(0, PHXGrpcClientV3_1.PHXClientQueryV3)({
query: query_1.getCampaignNameV3,
variables: { id: pid },
isDelay: false,
}).then((res) => {
const data = res.data.admissions_campaigns_by_pk;
setCampaignName(data.campaign_name);
js_cookie_1.default.set('campaign_name', JSON.stringify(data.campaign_name));
});
loadChildrenCampaign(pathNameWithBasePath);
}
else if (pathNameWithBasePath === '/admissions/campaign/list') {
loadParentNavigation(pathNameWithBasePath);
}
else {
loadChildrenCampaign(pathNameWithBasePath);
}
}
else {
loadParentNavigation(pathNameWithBasePath);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dataInitMain, pid, pathNameWithBasePath]);
(0, react_2.useEffect)(() => {
const isAdmissions = checkAdmissions(pathNameWithBasePath);
if (isAdmissions) {
if (pathNameWithBasePath === '/admissions/campaign/list' || !checkChildrenCampaign(pathNameWithBasePath)) {
setOpenSubMenu(true);
}
else {
setOpenSubMenu(true);
const campaign_name = js_cookie_1.default.get('campaign_name');
setCampaignName(campaign_name ? JSON.parse(campaign_name) : campaignName);
loadChildrenCampaign(pathNameWithBasePath);
}
}
else {
setOpenSubMenu(true);
}
}, [pathNameWithBasePath, dataInitMain]);
const loadSubNavigation = (path, isChild, childPath) => {
const subLength = subNavigation.length;
const newSub = [];
for (let i = 0; i < subLength; i++) {
const item = subNavigation[i];
item.current = item.path === path && !isChild;
if (item.child) {
item.showChild = item.path === path;
for (let j = 0; j < item.child.length; j++) {
const child = item.child[j];
child.current = child.path === childPath;
if (child.path === item.path) {
item.current = false;
child.current = childPath ? child.path === childPath : child.path === path;
}
}
}
newSub.push(item);
}
setSubNavigation(newSub);
};
// const triggerClicked = (path: string) => {
// loadParentNavigation(path)
// }
// const handleClicked = (path: string) => {
// triggerClicked(path)
// }
const subNavigationTriggerClicked = (item, parent) => {
parent ? loadSubNavigation(parent.path, true, item.path) : loadSubNavigation(item.path, false);
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const campaign = Number(urlParams.get('campaignId'));
setGlobalLoading(true);
// handle for admissions
if (campaign) {
router.push(`${item.path}?campaignId=${campaign}`);
}
else {
router.push(item.path);
}
};
const { path: topMenuLogoFromEnv } = dataInitMain.logo;
const handleModalSignOut = () => setModalSignOut(true);
const handleRedirectRouter = (path) => {
const currentURL = window.location.href;
const url = currentURL.split('/');
const pushPath = `${url[0]}//${url[2]}/${path}`;
window.location.replace(pushPath);
};
const callApiLogoutToken = async () => {
try {
return await axios_1.default.post(`/api/authenticate/logout`, {}, {
withCredentials: true,
});
}
catch (error) {
console.error(error);
return;
}
};
const handleSignOut = async () => {
setModalSignOut(false);
Object.keys(js_cookie_1.default.get()).forEach((cookieName) => {
js_cookie_1.default.remove(cookieName);
});
await callApiLogoutToken();
console.log('Đăng xuất tài khoản');
handleRedirectRouter('login-sso');
};
const handleProfilePage = () => {
handleRedirectRouter('profile');
};
const handleBackMenu = () => {
router.push('/campaign/list');
loadParentNavigation('/admissions/campaign/list');
};
const checkChildBefore = (item, currentItem) => {
const currentIndexActive = item.find((s) => s.current);
return currentIndexActive ? currentIndexActive.id > currentItem.id : false;
};
const [openNavName, setOpenNavName] = (0, react_2.useState)(false);
const [showSearchBar, setShowSearchBar] = (0, react_2.useState)(false);
const [selected, setSelected] = (0, react_2.useState)(null);
const handleOpenModal = (id) => {
setModal(id !== dataInitMain.schoolId);
setSelected(id);
};
const handlePrimaryModal = () => {
const currentSession = (0, getCookieSession_1.default)();
const userInfo = currentSession === null || currentSession === void 0 ? void 0 : currentSession.user_info;
if (userInfo) {
try {
const newSchoolId = selected;
const schoolIdCurrent = userInfo.school_id;
if (newSchoolId && newSchoolId !== schoolIdCurrent) {
const userInfoNew = { ...userInfo, school_id: newSchoolId };
(0, saveCookiesClient_1.default)({
value: { ...currentSession, user_info: userInfoNew },
});
window.location.reload();
}
}
catch (error) {
console.error(error);
}
}
setModal(false);
};
// settings page
const isSettings = () => {
const pathNameSplit = pathNameWithBasePath.split('/');
return pathNameSplit[1] === 'setting';
};
const checkLogoHeader = ((_c = dataInitMain.configLayout) === null || _c === void 0 ? void 0 : _c.logo_dashboard) || topMenuLogoFromEnv || constants_1.DEFAULT_LOGO_DASHBOARD;
const isActivityHistory = () => {
const pathNameSplit = pathNameWithBasePath.split('/');
return pathNameSplit[1] === constants_1.PATH_ACTIVITY_HISTORY;
};
const [activityHistoryChild, setActivityHistoryChild] = (0, react_2.useState)(constants_1.MENU_ACTIVITY_HISTORY_CHILD);
const handleClickActivityHistoryChild = (clickedItem) => {
const updated = activityHistoryChild.map((item) => ({
...item,
current: item.code === clickedItem.code,
}));
setActivityHistoryChild(updated);
};
(0, react_2.useEffect)(() => {
if (basePath === constants_1.PATH_ACTIVITY_HISTORY) {
setActivityHistoryChild((prev) => prev.map((item) => ({
...item,
current: pathNameWithBasePath.endsWith(item.path),
})));
}
else {
setActivityHistoryChild([]);
}
}, [pathNameWithBasePath, basePath]);
return (react_2.default.createElement(react_2.default.Fragment, null,
react_2.default.createElement(page_tracker_1.PageTracker, null),
react_2.default.createElement("div", { className: 'flex min-h-full flex-col' },
react_2.default.createElement(appearance_styled_1.default, { configLayout: dataInitMain === null || dataInitMain === void 0 ? void 0 : dataInitMain.configLayout, settingSiteCookie: getDataCookies ? (_d = (0, helpers_1.decryptCookie)(getDataCookies)) === null || _d === void 0 ? void 0 : _d.setting_site : null }),
react_2.default.createElement("header", { className: 'header-color-styled fixed top-0 z-50 min-w-full border-gray-200 bg-white' },
react_2.default.createElement("div", { className: 'header-styled mx-auto flex h-14 items-center justify-between bg-[#1a1a1a] pr-4' },
react_2.default.createElement("div", { className: 'flex items-center gap-x-3' },
react_2.default.createElement("a", { className: 'flex w-full items-center', href: '/' }, topMenuLogoFromEnv ? (react_2.default.createElement(react_2.default.Fragment, null, isLoading ? (react_2.default.createElement("div", { className: 'header-loading-logo ml-3 h-8 w-full animate-pulse' })) : (react_2.default.createElement("img", { alt: 'Logo', className: 'max-w-48 ml-3 h-auto max-h-7 w-auto', src: checkLogoHeader, style: { maxWidth: '12rem' } })))) : (react_2.default.createElement(react_2.default.Fragment, null))),
react_2.default.createElement("div", { className: 'flex items-center lg:hidden' },
react_2.default.createElement("button", { className: 'bg-grey-100 mr-3 inline-flex items-center justify-center rounded-md p-1 text-gray-200 hover:bg-white hover:text-gray-600', onClick: () => setSidebarOpen(true), type: 'button' },
react_2.default.createElement("span", { className: 'sr-only' }, "Open sidebar"),
react_2.default.createElement(outline_1.Bars3Icon, { "aria-hidden": 'true', className: 'h-6 w-6' })))),
react_2.default.createElement(search_bar_1.default, { onClose: () => setShowSearchBar(false), open: showSearchBar }),
react_2.default.createElement("div", { className: 'flex items-center gap-x-8' },
react_2.default.createElement("div", { className: '-m-1.5 p-1.5' },
react_2.default.createElement(react_1.Menu, { as: 'div', className: 'relative ml-3' },
react_2.default.createElement("div", null,
react_2.default.createElement(react_1.Menu.Button, { className: 'flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800' },
react_2.default.createElement("span", { className: 'sr-only' }, "Open user menu"),
isLoading ? (react_2.default.createElement("div", { className: 'flex animate-pulse' },
react_2.default.createElement("div", { className: 'header-loading-avatar h-8 w-8 rounded-full' }))) : (react_2.default.createElement("img", { alt: '', className: 'h-8 w-8 rounded-full', src: dataInitMain.sourceAvatar })))),
react_2.default.createElement(react_1.Transition, { as: react_2.Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
react_2.default.createElement(react_1.Menu.Items, { className: ' absolute right-0 z-10 mt-2 w-[340px] origin-top-right rounded-md bg-white px-2 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none' },
react_2.default.createElement(react_1.Menu.Item, null,
react_2.default.createElement("div", { "aria-hidden": true, className: 'px-2 pb-2 pt-4 text-sm font-semibold text-gray-900 ' }, "Ch\u1ECDn tr\u01B0\u1EDDng")),
!dataInitMain.loadingSchool ? (react_2.default.createElement(react_2.default.Fragment, null, dataInitMain.listSchool
.filter((val) => {
if (!enablePer(constants_1.switchSchool, dataInitMain.perCode)) {
return val.id === dataInitMain.schoolId;
}
else {
return true;
}
})
.map((item) => (react_2.default.createElement(react_1.Menu.Item, { key: item.id },
react_2.default.createElement("div", { "aria-hidden": true, className: `${item.id === dataInitMain.schoolId &&
dataInitMain.listSchool.length > 1 &&
!enablePer(constants_1.switchSchool, dataInitMain.perCode) === false
? 'rounded-lg bg-zinc-200 font-semibold text-gray-900 '
: 'font-normal '}
${item.id !== dataInitMain.schoolId &&
(dataInitMain.listSchool.length === 1 ||
!enablePer(constants_1.switchSchool, dataInitMain.perCode)) === false
? 'cursor-pointer hover:rounded-lg hover:bg-gray-100'
: ''}
relative mb-1 flex items-center justify-between px-2 py-1.5 text-sm text-gray-900`, onClick: () => handleOpenModal(item.id) },
react_2.default.createElement("p", { className: 'max-w-[95%] truncate' }, item.name),
item.id === dataInitMain.schoolId &&
dataInitMain.listSchool.length > 1 &&
!enablePer(constants_1.switchSchool, dataInitMain.perCode) === false && (react_2.default.createElement(solid_2.CheckIcon, { "aria-hidden": 'true', className: 'h-4 w-4' })))))))) : (react_2.default.createElement(Skeleton_1.PHXSkeleton, { className: 'flex-1 px-2 py-2', type: 'single' })),
react_2.default.createElement("div", { className: 'border-b pt-1.5' }),
react_2.default.createElement(react_1.Menu.Item, null,
react_2.default.createElement("div", { "aria-hidden": true, className: 'px-2 pb-2 pt-4 text-sm font-semibold text-gray-900' }, "T\u00F9y ch\u1ECDn")),
react_2.default.createElement(react_1.Menu.Item, null,
react_2.default.createElement("div", { "aria-hidden": true, className: 'cursor-pointer px-2 py-1.5 text-sm text-gray-900 hover:rounded-lg hover:bg-gray-100', onClick: handleProfilePage }, "Th\u00F4ng tin c\u00E1 nh\u00E2n")),
react_2.default.createElement(react_1.Menu.Item, null,
react_2.default.createElement("div", { "aria-hidden": true, className: 'mb-2.5 cursor-pointer px-2 py-1.5 text-sm text-[#8e1f0c] hover:rounded-lg hover:bg-gray-100', onClick: handleModalSignOut }, "\u0110\u0103ng xu\u1EA5t")))))))))),
react_2.default.createElement("div", null,
react_2.default.createElement(Modal_1.PHXModal, { dangerActionText: '\u0110\u0103ng xu\u1EA5t', onDangerClick: handleSignOut, onHide: () => setModalSignOut(false), primaryActionText: '', show: modalSignOut, title: '\u0110\u0103ng xu\u1EA5t' },
react_2.default.createElement("div", { className: 'text-sm text-gray-700' }, "Khi th\u1EF1c hi\u1EC7n thao t\u00E1c n\u00E0y b\u1EA1n s\u1EBD tho\u00E1t kh\u1ECFi trang qu\u1EA3n tr\u1ECB v\u00E0 tr\u1EDF v\u1EC1 trang \u0111\u0103ng nh\u1EADp"))),
react_2.default.createElement(Modal_1.PHXModal, { onHide: () => setModal(false), onPrimaryClick: handlePrimaryModal, primaryActionText: 'X\u00E1c nh\u1EADn', show: modal, title: 'X\u00E1c nh\u1EADn thay \u0111\u1ED5i tr\u01B0\u1EDDng' },
react_2.default.createElement(Banner_1.PHXBanner, { description: 'Khi thay \u0111\u1ED5i tr\u01B0\u1EDDng t\u1EA5t c\u1EA3 d\u1EEF li\u1EC7u s\u1EBD hi\u1EC3n th\u1ECB theo tr\u01B0\u1EDDng v\u1EEBa \u0111\u01B0\u1EE3c ch\u1ECDn', onClose: () => setShowBanner(false), show: showBanner, title: 'L\u01B0u \u00FD', type: 'warning' })),
react_2.default.createElement("div", { className: 'relative flex min-h-screen bg-gray-100' },
react_2.default.createElement(nav_mobile_1.default, { menu: dataInitMain.menu, path: pathNameWithBasePath, permission: dataInitMain.perCode, router: router, setSidebarOpen: setSidebarOpen, hiddenSideBar: () => setSidebarOpen(false), sidebarOpen: sidebarOpen, pathNameWithBasePath: pathNameWithBasePath }),
react_2.default.createElement("div", { className: 'hidden lg:flex lg:flex-shrink-0' },
react_2.default.createElement("div", { className: 'flex' },
react_2.default.createElement("div", { className: 'mt-14 flex lg:inset-y-0' },
react_2.default.createElement("div", { "aria-hidden": true, className: `${openNavName ? 'w-64' : 'w-14'} menu-styled z-10 flex h-full flex-col justify-between border-r !bg-gray-200 transition-all duration-300 lg:fixed`, onMouseOut: () => setOpenNavName(false), onMouseOver: () => setOpenNavName(true) },
react_2.default.createElement("div", { className: classNames('flex flex-1 flex-col', openNavName ? 'overflow-y-auto' : 'overflow-y-hidden') },
react_2.default.createElement("div", { className: 'relative flex-1' },
react_2.default.createElement("div", { "aria-label": 'Sidebar', className: 'hidden overflow-x-hidden md:block md:flex-shrink-0 md:overflow-y-auto' }, !hiddenLeftMenu && (react_2.default.createElement("div", { className: `space-y- flex ${openNavName ? 'w-64' : 'w-12'} flex-col overflow-hidden p-3` }, navigation.map((item, index) => (react_2.default.createElement("div", { key: index, className: 'w-full' }, enablePer(item.code, dataInitMain.perCode) && (react_2.default.createElement("a", { className: `${classNames(item.current && !openNavName
? 'menu-bg-color-icon-active-styled font-semibold' // màu background của icon đang active của menu
: 'menu-icon-color-styled', // màu icon của menu
!openNavName
? 'mb-1.5 inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg'
: 'mb-1.5 inline-flex h-8 min-w-full flex-shrink-0 items-center rounded-lg', openNavName && item.current
? 'menu-bg-color-icon-active-styled rounded-lg'
: 'menu-hover-bg hover:rounded-lg hover:bg-opacity-50')}`, href: item.path,
// onClick={() => handleClicked(item.path)}
onMouseOver: () => setOpenNavName(true) },
react_2.default.createElement("span", { className: 'sr-only' }, item.name),
react_2.default.createElement("span", { className: classNames(!openNavName
? 'group cursor-pointer hover:z-10 focus-visible:outline-none'
: `flex gap-x-2 ${item.menuIconSL ? 'pl-[3px] pt-[2px]' : 'pl-[0.45rem]'}`) },
item.menuIconSL ? (react_2.default.createElement("img", { alt: 'icon', className: 'w-[1.6rem]', src: item.menuIconSL })) : (
// <FontAwesomeIcon
// className="mt-1 h-[1.125rem] w-[1.125rem]"
// icon={item.image}
// />
react_2.default.createElement(image_1.default, { alt: 'icon', className: classNames('h-[1.125rem] w-[1.125rem] text-gray-950', openNavName && 'mt-[0.2rem]'), height: 0, src: item.current ? Icon_1.Icons[`${item.code}_SOLID`] : Icon_1.Icons[item.code], width: 0 })),
openNavName && (react_2.default.createElement("div", { className: 'h-6' },
react_2.default.createElement("p", { className: `mt-0.5 h-full text-[0.86rem] text-[#353A44] transition-all duration-300 ${openNavName ? 'opacity-100' : 'opacity-0'}` }, item.name)))))))))))))),
react_2.default.createElement("div", { className: classNames('border-t', navigation.length > 0 && ((_e = navigation[0]) === null || _e === void 0 ? void 0 : _e.isSchoolink) ? 'border-[#1c222b]' : 'border-indigo-100') },
react_2.default.createElement("div", { className: 'flex overflow-hidden px-3 pb-1.5 pt-3' },
react_2.default.createElement("a", { className: classNames('z-0', !openNavName
? 'inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg'
: 'inline-flex h-8 min-w-full flex-shrink-0 items-center rounded-lg hover:rounded-lg hover:bg-opacity-50', isActivityHistory() && !openNavName
? 'setting-bg-icon-active' // màu background của icon đang active trong menu
: 'setting-icon-color font-medium', // màu icon
openNavName && isActivityHistory()
? 'setting-bg-icon-active rounded-lg' // màu background của icon đang active trong menu
: 'setting-hover-bg hover:rounded-lg hover:bg-opacity-50'), href: '/activity-history/list', onMouseOver: () => setOpenNavName(true) },
react_2.default.createElement("span", { className: 'sr-only' }, "L\u1ECBch s\u1EED ho\u1EA1t \u0111\u1ED9ng"),
react_2.default.createElement("span", { className: classNames(!openNavName
? 'cursor-pointer hover:z-10 focus-visible:outline-none'
: 'flex gap-x-2 pl-[0.45rem]') },
react_2.default.createElement(image_1.default, { alt: 'icon', className: classNames('h-[1.125rem] w-[1.125rem]', openNavName ? 'mt-[0.2rem]' : ''), height: 0, src: isActivityHistory() ? Icon_1.Icons.ACTIVITY_HISTORY_SOLID : Icon_1.Icons.ACTIVITY_HISTORY, width: 0 }),
openNavName && (react_2.default.createElement("div", { className: 'h-6' },
react_2.default.createElement("p", { className: `setting-text-color mt-0.5 h-full text-[0.86rem] font-normal text-[#353A44] transition-all duration-300 hover:cursor-pointer ${openNavName ? 'opacity-100' : 'opacity-0'}` }, "L\u1ECBch s\u1EED ho\u1EA1t \u0111\u1ED9ng")))))),
react_2.default.createElement("div", { className: 'mb-14 flex overflow-hidden px-3 pb-3' },
react_2.default.createElement("a", { className: classNames('z-0', !openNavName
? 'inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg'
: 'inline-flex h-8 min-w-full flex-shrink-0 items-center rounded-lg hover:rounded-lg hover:bg-opacity-50', isSettings() && !openNavName
? 'setting-bg-icon-active' // màu background của icon đang active trong menu
: 'setting-icon-color font-medium', // màu icon
openNavName && isSettings()
? 'setting-bg-icon-active rounded-lg' // màu background của icon đang active trong menu
: 'setting-hover-bg hover:rounded-lg hover:bg-opacity-50'), href: '/setting',
// onClick={() => handleClicked(item.path)}
onMouseOver: () => setOpenNavName(true) },
react_2.default.createElement("span", { className: 'sr-only' }, "setting"),
react_2.default.createElement("span", { className: classNames(!openNavName
? 'cursor-pointer hover:z-10 focus-visible:outline-none'
: 'flex gap-x-2 pl-[0.45rem]') },
react_2.default.createElement(image_1.default, { alt: 'icon', className: classNames('h-[1.125rem] w-[1.125rem]', openNavName ? 'mt-[0.2rem]' : ''), height: 0, src: isSettings() ? Icon_1.Icons.SETTING_SOLID : Icon_1.Icons.SETTING, width: 0 }),
openNavName && (react_2.default.createElement("div", { className: 'h-6' },
react_2.default.createElement("p", { className: `setting-text-color mt-0.5 h-full text-[0.86rem] font-normal text-[#353A44] transition-all duration-300 hover:cursor-pointer ${openNavName ? 'opacity-100' : 'opacity-