menu

src/pages/course-list/course-list.tsx

@@ -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
+                        isRequired
-                          isInvalid={Boolean(errors.startDt)}
+                        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
+                        isRequired
-                          isInvalid={Boolean(errors.name)}
+                        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}
+          key={c.id}
-            course={c}
+          course={c}
           />
         ))}
       </VStack>
     </Container>
+        </>
   )
 }

src/types/serviceMenu.d.ts

@@ -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;
+}