2024-03-28 22:00:23 +03:00
3 changed files with 352 additions and 205 deletions
--- a/src/app.tsx
+++ b/src/app.tsx
@ -4,6 +4,7 @@ import { Global, css  } from '@emotion/react'
 import { BrowserRouter } from 'react-router-dom';
 import ruLocale from 'dayjs/locale/ru';
 import dayjs from 'dayjs';
+import { ChakraProvider } from '@chakra-ui/react'

 import { Dashboard } from './dashboard';

@ -11,6 +12,7 @@ dayjs.locale('ru', ruLocale);

 const App = ({ store }) => {
    return(
+      <ChakraProvider>
          <BrowserRouter>
              <Helmet>
                  <meta name="viewport" content="width=device-width, user-scalable=no" />
@ -18,7 +20,6 @@ const App = ({ store }) => {
              </Helmet>
              <Global
                  styles={css`
-                    * { box-sizing: border-box; }
                      html {
                          height: 100%;
                          max-width: 100%;
@ -40,7 +41,8 @@ const App = ({ store }) => {
                          radial-gradient(
                              farthest-side at bottom right,
                              rgba(0, 195, 255, 0.648), 
-                            rgba(255, 255, 255, 0) 65%
+                              rgb(239 244 246) 65%
+                              /* rgba(255, 255, 255, 0) 65% */
                          );
                          height: 100%;
                          font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif;
@ -77,6 +79,7 @@ const App = ({ store }) => {
              />
              <Dashboard store={store} />
          </BrowserRouter>
+        </ChakraProvider>
    )
 }

--- a/src/dashboard.tsx
+++ b/src/dashboard.tsx
@ -1,34 +1,82 @@
-import React, { useEffect, Suspense } from "react";
-import { Routes, Route, useNavigate } from "react-router-dom";
-import { Provider } from "react-redux";
+import React, { useEffect, Suspense } from 'react'
+import { Routes, Route, useNavigate } from 'react-router-dom'
+import { Provider } from 'react-redux'

 import {
  CourseListPage,
  LessonDetailsPage,
  LessonListPage,
-  UserPage
+  UserPage,
 } from './pages'
-import { getNavigationsValue } from "@ijl/cli";
+import { getNavigationsValue } from '@ijl/cli'
+import { Box, Container, Spinner, VStack } from '@chakra-ui/react'

 const Redirect = ({ path }) => {
-  const navigate = useNavigate();
+  const navigate = useNavigate()

  useEffect(() => {
-    navigate(path);
-  }, []);
+    navigate(path)
+  }, [])

-  return null;
-};
+  return null
+}

-const Wrapper = ({ children }) => <Suspense fallback="...">{children}</Suspense>
+const Wrapper = ({ children }) => (
+  <Suspense
+    fallback={
+      <Container>
+        <VStack>
+          <Box mt="150">
+          <Spinner
+            thickness="4px"
+            speed="0.65s"
+            emptyColor="gray.200"
+            color="blue.500"
+            size="xl"
+          /></Box>
+        </VStack>
+      </Container>
+    }
+  >
+    {children}
+  </Suspense>
+)

 export const Dashboard = ({ store }) => (
  <Provider store={store}>
    <Routes>
-      <Route path={getNavigationsValue('journal.main')} element={<Wrapper><CourseListPage /></Wrapper>} />
-      <Route path={`${getNavigationsValue('journal.main')}/lessons-list/:courseId`} element={<Wrapper><LessonListPage /></Wrapper>} />
-      <Route path={`${getNavigationsValue('journal.main')}/u/:lessonId/:accessId`} element={<Wrapper><UserPage /></Wrapper>} />
-      <Route path={`${getNavigationsValue('journal.main')}/lesson/:courseId/:lessonId`} element={<Wrapper><LessonDetailsPage /></Wrapper>} />
+      <Route
+        path={getNavigationsValue('journal.main')}
+        element={
+          <Wrapper>
+            <CourseListPage />
+          </Wrapper>
+        }
+      />
+      <Route
+        path={`${getNavigationsValue('journal.main')}/lessons-list/:courseId`}
+        element={
+          <Wrapper>
+            <LessonListPage />
+          </Wrapper>
+        }
+      />
+      <Route
+        path={`${getNavigationsValue('journal.main')}/u/:lessonId/:accessId`}
+        element={
+          <Wrapper>
+            <UserPage />
+          </Wrapper>
+        }
+      />
+      <Route
+        path={`${getNavigationsValue('journal.main')}/lesson/:courseId/:lessonId`}
+        element={
+          <Wrapper>
+            <LessonDetailsPage />
+          </Wrapper>
+        }
+      />
    </Routes>
  </Provider>
-);
+)
--- a/src/pages/course-list.tsx
+++ b/src/pages/course-list.tsx
@ -1,8 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import dayjs from 'dayjs'
-import { Link } from 'react-router-dom'
-import { getConfigValue, getNavigationsValue } from '@ijl/cli'
-
+import { Link as ConnectedLink } from 'react-router-dom'
+import { getNavigationsValue } from '@ijl/cli'
 import {
  Box,
  CardHeader,
@ -12,107 +11,191 @@ import {
  Stack,
  StackDivider,
  Button,
-  UnorderedList,
+  Card,
  Heading,
  Tooltip,
+  Spinner,
+  Container,
+  VStack,
+  Link,
+  Input,
+  CloseButton,
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  Center,
+  FormErrorMessage,
 } from '@chakra-ui/react'
+import { useForm, Controller } from 'react-hook-form'

-import {
-  ArrowImg,
-  IconButton,
-  InputElement,
-  InputLabel,
-  InputWrapper,
-  StartWrapper,
-  Papper,
-  ErrorSpan,
-  Cross,
-  AddButton,
-  MainWrapper,
-  StyledCard,
-} from './style'
+import { ErrorSpan, MainWrapper } from './style'

-import { linkOpen, moreDetails } from '../assets'
-
-import arrow from '../assets/36-arrow-right.svg'
-import { keycloak } from '../__data__/kc'
 import { useAppSelector } from '../__data__/store'
 import { api } from '../__data__/api/api'
 import { isTeacher } from '../utils/user'
+import { AddIcon, ArrowDownIcon, ArrowUpIcon, LinkIcon } from '@chakra-ui/icons'
+
+interface NewCourseForm {
+  startDt: string
+  name: string
+}

 const CoursesList = () => {
  const user = useAppSelector((s) => s.user)
  const { data, isLoading, error } = api.useCoursesListQuery()
-  const [createCourse, crcQuery] = api.useCreateUpdateCourseMutation()
+  const [createUpdateCourse, crucQuery] = api.useCreateUpdateCourseMutation()
  const [value, setValue] = useState('')
  const [showForm, setShowForm] = useState(false)
-  const [showDetails, setShowDetails] = useState(false)
+  const [courseDetailsOpenedId, setCourseDetailsOpenedId] = useState<
+    string | null
+  >(null)

-  const handleChange = useCallback(
-    (event) => {
-      setValue(event.target.value.toUpperCase())
-    },
-    [setValue],
-  )
-  const handleSubmit = useCallback(
-    (event) => {
-      event.preventDefault()
-      createCourse({ name: value })
-    },
-    [value],
-  )
+  const { control, handleSubmit, reset } = useForm<NewCourseForm>({
+    mode: 'all',
+  })
+
+  const onSubmit = ({ startDt, name }) => {
+    createUpdateCourse({ name, startDt })
+  }

  useEffect(() => {
-    if (crcQuery.isSuccess) {
-      setValue('')
+    if (crucQuery.isSuccess) {
+      reset()
+    }
+  }, [crucQuery.isSuccess])
+
+  if (isLoading) {
+    return (
+      <Container maxW="container.xl">
+        <Center h="300px">
+          <Spinner
+            thickness="4px"
+            speed="0.65s"
+            emptyColor="gray.200"
+            color="blue.500"
+            size="xl"
+          />
+        </Center>
+      </Container>
+    )
  }
-  }, [crcQuery.isSuccess])

  return (
-    <MainWrapper>
-      <StartWrapper>
+    <Container maxW="container.xl">
      {isTeacher(user) && (
-          <>
-            {showForm ? (
-              <Papper>
-                <Cross role="button" onClick={() => setShowForm(false)}>
-                  X
-                </Cross>
-                <form onSubmit={handleSubmit}>
-                  <InputWrapper>
-                    <InputLabel htmlFor="input">
-                      Название новой лекции:
-                    </InputLabel>
-                    <InputElement
+        <Box mt="15" mb="15">
+          {!showForm ? (
+            <Card align="left">
+              <CardHeader display="flex">
+                <Heading as="h2" mt="0">
+                  Создание курса
+                </Heading>
+                <CloseButton ml="auto" onClick={() => setShowForm(false)} />
+              </CardHeader>
+              <CardBody>
+                <form onSubmit={handleSubmit(onSubmit)}>
+                  <VStack spacing={10} align="left">
+                    <Controller
+                      control={control}
+                      name="startDt"
+                      rules={{ required: 'Обязательное поле' }}
+                      render={({ field, fieldState }) => (
+                        <FormControl isRequired>
+                          <FormLabel>Дата начала</FormLabel>
+                          <Input
+                            {...field}
+                            placeholder="Select Date and Time"
+                            size="md"
+                            type="datetime-local"
+                          />
+                          {fieldState.error ? (
+                            <FormErrorMessage>
+                              {fieldState.error.message}
+                            </FormErrorMessage>
+                          ) : (
+                            <FormHelperText>
+                              Укажите дату начала курса
+                            </FormHelperText>
+                          )}
+                        </FormControl>
+                      )}
+                    />
+                    <FormControl isRequired>
+                      <FormLabel>Название новой лекции:</FormLabel>
+                      <Input
                        value={value}
                        onChange={handleChange}
-                      id="input"
-                      type="text"
-                      autoComplete="off"
+                        placeholder="КФУ-24-2"
+                        size="md"
                      />
-                    <IconButton type="submit">
-                      <ArrowImg src={arrow} />
-                    </IconButton>
-                  </InputWrapper>
+                      <FormHelperText></FormHelperText>
+                    </FormControl>
+
+                    <Box mt={10}>
+                      <Button
+                        size="lg"
+                        leftIcon={<AddIcon />}
+                        colorScheme="blue"
+                      >
+                        Создать
+                      </Button>
+                    </Box>
+                  </VStack>
+
                  {crcQuery?.error && (
                    <ErrorSpan>{(crcQuery?.error as any).error}</ErrorSpan>
                  )}
                </form>
-              </Papper>
+              </CardBody>
+            </Card>
          ) : (
-              <AddButton onClick={() => setShowForm(true)}>Добавить</AddButton>
+            <Box p="2" m="2">
+              <Button
+                leftIcon={<AddIcon />}
+                colorScheme="green"
+                onClick={() => setShowForm(true)}
+              >
+                Добавить
+              </Button>
+            </Box>
          )}
-          </>
+        </Box>
      )}
-        <UnorderedList spacing={3}>
-          {data?.body?.map((course) => (
-            <StyledCard key={course._id} align="left">
+      <VStack as="ul" align="stretch">
+        {data?.body?.map((c) => (
+          <CourseCard
+            isOpened={courseDetailsOpenedId === c._id}
+            key={c._id}
+            course={c}
+            openDetails={() =>
+              courseDetailsOpenedId === c._id
+                ? setCourseDetailsOpenedId(null)
+                : setCourseDetailsOpenedId(c._id)
+            }
+          />
+        ))}
+      </VStack>
+    </Container>
+  )
+}
+
+const CourseCard = ({ course, isOpened, openDetails }) => {
+  const [getLessonList, lessonList] = api.useLazyLessonListQuery()
+  useEffect(() => {
+    if (isOpened) {
+      getLessonList(course._id, true)
+    }
+  }, [isOpened])
+  const user = useAppSelector((s) => s.user)
+
+  return (
+    <Card key={course._id} align="left">
      <CardHeader>
        <Heading as="h2" mt="0">
          {course.name}
        </Heading>
      </CardHeader>
-              {showDetails && (
+      {isOpened && (
        <CardBody mt="16px">
          <Stack divider={<StackDivider />} spacing="8px">
            <Box as="span" textAlign="left">
@ -121,46 +204,59 @@ const CoursesList = () => {
            <Box as="span" textAlign="left">
              Количество занятий - {course.lessons.length}
            </Box>
+            {lessonList.isFetching ? (
+              <Spinner />
+            ) : (
+              <>
+                <Heading as="h3" mt={4} mb={3} size="lg">
+                  Список занятий:
+                </Heading>
+                <Stack>
+                  {lessonList.data?.body?.map((lesson) => (
+                    <Link
+                      as={ConnectedLink}
+                      to={
+                        isTeacher(user)
+                          ? `${getNavigationsValue('journal.main')}/lesson/${course._id}/${lesson._id}`
+                          : ''
+                      }
+                    >
+                      {lesson.name}
+                    </Link>
+                  ))}
+                </Stack>
+              </>
+            )}
          </Stack>
        </CardBody>
      )}
      <CardFooter>
-                <ButtonGroup spacing="12" mt="16px">
-                  <Tooltip
-                    label="На страницу с лекциями"
-                    fontSize="12px"
-                    top="16px"
-                  >
-                    <Button variant="ghost" border="none" bg="#ffffff">
-                      <Link
+        <ButtonGroup spacing="4" mt="16px">
+          <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
+            <Button
+              leftIcon={<LinkIcon />}
+              as={ConnectedLink}
+              colorScheme="blue"
              to={`${getNavigationsValue('journal.main')}/lessons-list/${course._id}`}
            >
-                        <img src={linkOpen} alt="Перейти к лекциям" />
-                      </Link>
+              Открыть
            </Button>
          </Tooltip>
          <Tooltip label="Детали" fontSize="12px" top="16px">
            <Button
-                      variant="ghost"
-                      border="none"
-                      bg="#ffffff"
-                      onClick={() => {
-                        showDetails
-                          ? setShowDetails(null)
-                          : setShowDetails(true)
-                      }}
-                      cursor="pointer"
+              colorScheme="blue"
+              variant="outline"
+              leftIcon={isOpened ? <ArrowUpIcon /> : <ArrowDownIcon />}
+              loadingText="Загрузка"
+              isLoading={lessonList.isFetching}
+              onClick={openDetails}
            >
-                      <img src={moreDetails} alt="Просмотреть детали" />
+              Просмотреть детали
            </Button>
          </Tooltip>
        </ButtonGroup>
      </CardFooter>
-            </StyledCard>
-          ))}
-        </UnorderedList>
-      </StartWrapper>
-    </MainWrapper>
+    </Card>
  )
 }