menu
This commit is contained in:
Primakov Alexandr Alexandrovich
parent
4eb8ace12b
commit
ab55c36ac5
@ -16,10 +16,33 @@ import {
|
||||
FormHelperText,
|
||||
FormErrorMessage,
|
||||
useToast,
|
||||
useColorMode,
|
||||
} from '@chakra-ui/react'
|
||||
import { useForm, Controller } from 'react-hook-form'
|
||||
|
||||
const MENU_SCRIPT_URL = 'https://admin.bro-js.ru/remote-assets/lib/serviceMenu/serviceMenu.js'
|
||||
|
||||
const loadServiceMenu = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const script = document.createElement('script')
|
||||
script.src = MENU_SCRIPT_URL
|
||||
script.onload = () => setTimeout(() => resolve(true), 1000)
|
||||
script.onerror = reject
|
||||
document.body.appendChild(script)
|
||||
})
|
||||
}
|
||||
|
||||
import { ErrorSpan } from '../style'
|
||||
declare global {
|
||||
interface Window {
|
||||
createServiceMenu?: (options: any) => {
|
||||
show: () => void;
|
||||
hide: () => void;
|
||||
update: () => void;
|
||||
destroy: () => void;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
import { useAppSelector } from '../../__data__/store'
|
||||
import { api } from '../../__data__/api/api'
|
||||
@ -27,6 +50,7 @@ import { isTeacher } from '../../utils/user'
|
||||
import { AddIcon } from '@chakra-ui/icons'
|
||||
import { PageLoader } from '../../components/page-loader/page-loader'
|
||||
import { CourseCard } from './course-card'
|
||||
import { keycloak } from '../../__data__/kc'
|
||||
|
||||
interface NewCourseForm {
|
||||
startDt: string
|
||||
@ -41,6 +65,14 @@ export const CoursesList = () => {
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const toastRef = useRef(null)
|
||||
|
||||
const [serviceMenu, setServiceMenu] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
loadServiceMenu().then(() => {
|
||||
setServiceMenu(true)
|
||||
}).catch(console.error)
|
||||
}, [])
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
@ -79,6 +111,39 @@ export const CoursesList = () => {
|
||||
}
|
||||
}, [crucQuery.isSuccess])
|
||||
|
||||
const serviceMenuContainerRef = useRef<HTMLDivElement>(null)
|
||||
const serviceMenuInstanceRef = useRef<any>(null)
|
||||
|
||||
useEffect(() => {
|
||||
// Проверяем, что библиотека загружена и есть контейнер для меню
|
||||
if (window.createServiceMenu && serviceMenuContainerRef.current) {
|
||||
// Создаем меню сервисов
|
||||
serviceMenuInstanceRef.current = window.createServiceMenu({
|
||||
accessToken: keycloak.token,
|
||||
apiUrl: 'https://admin.bro-js.ru/api/global-settings/v1',
|
||||
targetElement: serviceMenuContainerRef.current,
|
||||
styles: {
|
||||
dotColor: '#333',
|
||||
hoverColor: '#eee',
|
||||
backgroundColor: '#fff',
|
||||
textColor: '#333',
|
||||
},
|
||||
translations: {
|
||||
menuTitle: 'Сервисы BRO',
|
||||
menuAriaLabel: 'Сервисы BRO',
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Очистка при размонтировании
|
||||
return () => {
|
||||
if (serviceMenuInstanceRef.current) {
|
||||
serviceMenuInstanceRef.current.destroy();
|
||||
serviceMenuInstanceRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [keycloak.token, serviceMenu]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<PageLoader />
|
||||
@ -86,6 +151,8 @@ export const CoursesList = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div id="dots" ref={serviceMenuContainerRef}></div>
|
||||
<Container maxW="container.xl">
|
||||
{isTeacher(user) && (
|
||||
<Box mt="15" mb="15">
|
||||
@ -106,8 +173,8 @@ export const CoursesList = () => {
|
||||
rules={{ required: 'Обязательное поле' }}
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={Boolean(errors.startDt)}
|
||||
isRequired
|
||||
isInvalid={Boolean(errors.startDt)}
|
||||
>
|
||||
<FormLabel>Дата начала</FormLabel>
|
||||
<Input
|
||||
@ -116,7 +183,7 @@ export const CoursesList = () => {
|
||||
placeholder="Select Date and Time"
|
||||
size="md"
|
||||
type="date"
|
||||
/>
|
||||
/>
|
||||
{errors.startDt ? (
|
||||
<FormErrorMessage>
|
||||
{errors.startDt?.message}
|
||||
@ -137,8 +204,8 @@ export const CoursesList = () => {
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={Boolean(errors.name)}
|
||||
isRequired
|
||||
isInvalid={Boolean(errors.name)}
|
||||
>
|
||||
<FormLabel>Название новой лекции:</FormLabel>
|
||||
<Input
|
||||
@ -146,7 +213,7 @@ export const CoursesList = () => {
|
||||
required={false}
|
||||
placeholder="КФУ-24-2"
|
||||
size="md"
|
||||
/>
|
||||
/>
|
||||
{errors.name && (
|
||||
<FormErrorMessage>
|
||||
{errors.name.message}
|
||||
@ -154,7 +221,7 @@ export const CoursesList = () => {
|
||||
)}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
/>
|
||||
|
||||
<Box mt={10}>
|
||||
<Button
|
||||
@ -162,7 +229,7 @@ export const CoursesList = () => {
|
||||
type="submit"
|
||||
leftIcon={<AddIcon />}
|
||||
colorScheme="blue"
|
||||
>
|
||||
>
|
||||
Создать
|
||||
</Button>
|
||||
</Box>
|
||||
@ -180,7 +247,7 @@ export const CoursesList = () => {
|
||||
leftIcon={<AddIcon />}
|
||||
colorScheme="green"
|
||||
onClick={() => setShowForm(true)}
|
||||
>
|
||||
>
|
||||
Добавить
|
||||
</Button>
|
||||
</Box>
|
||||
@ -190,11 +257,12 @@ export const CoursesList = () => {
|
||||
<VStack as="ul" align="stretch">
|
||||
{data?.body?.map((c) => (
|
||||
<CourseCard
|
||||
key={c.id}
|
||||
course={c}
|
||||
key={c.id}
|
||||
course={c}
|
||||
/>
|
||||
))}
|
||||
</VStack>
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
9
src/types/serviceMenu.d.ts
vendored
Normal file
9
src/types/serviceMenu.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
declare module 'https://admin.bro-js.ru/remote-assets/lib/serviceMenu/serviceMenu.js' {
|
||||
const createServiceMenu: (options: any) => {
|
||||
show: () => void;
|
||||
hide: () => void;
|
||||
update: () => void;
|
||||
destroy: () => void;
|
||||
};
|
||||
export default createServiceMenu;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user