3.1.0

2024-08-11 23:54:35 +03:00
18 changed files with 2849 additions and 3599 deletions
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,6 +1,4 @@
 declare module '*.svg' {
    const src: string;
    export default src;
-}
-
-declare const __webpack_public_path__: string;
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "journal.pl",
-    "version": "3.1.2",
+    "version": "3.1.0",
    "description": "bro-js platform journal ui repo",
    "main": "./src/index.tsx",
    "scripts": {
@@ -25,7 +25,7 @@
        "eslint-plugin-react": "^7.34.1"
    },
    "dependencies": {
-        "@brojs/cli": "^0.0.4-alpha.10",
+        "@brojs/cli": "^0.0.4-alpha.9",
        "@chakra-ui/icons": "^2.1.1",
        "@chakra-ui/react": "^2.8.2",
        "@emotion/react": "^11.11.4",
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,28 +1,87 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { Global } from '@emotion/react'
+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';
-import { globalStyles } from './global.styles';

 dayjs.locale('ru', ruLocale);

-const App = ({ store }) => (
-    <ChakraProvider>
-        <BrowserRouter>
-            <Helmet>
-                <meta name="viewport" content="width=device-width, user-scalable=no" />
-                <title>Журнал</title>
-            </Helmet>
-            <Global styles={globalStyles} />
-            <Dashboard store={store} />
-        </BrowserRouter>
-    </ChakraProvider>
-)
+const App = ({ store }) => {
+    return(
+      <ChakraProvider>
+          <BrowserRouter>
+              <Helmet>
+                  <meta name="viewport" content="width=device-width, user-scalable=no" />
+                  <title>Журнал</title>
+              </Helmet>
+              <Global
+                  styles={css`
+                      html {
+                          height: 100%;
+                          max-width: 100%;
+                          overflow: hidden;
+                      }
+                      body {
+                          color: #000;
+                          /* background: radial-gradient(circle at top right, rgb(154 227 33), rgb(33 160 56)); */
+                          background: radial-gradient(
+                              farthest-side at bottom left,
+                              rgba(35, 235, 4, 0.709), 
+                              rgba(255, 255, 255, 0) 65%
+                          ),
+                          radial-gradient(
+                              farthest-corner at bottom center,
+                              rgba(244, 244, 8, 0.6), 
+                              rgba(255, 255, 255, 0) 40%
+                          ),
+                          radial-gradient(
+                              farthest-side at bottom right,
+                              rgba(0, 195, 255, 0.648), 
+                              rgb(239 244 246) 65%
+                              /* rgba(255, 255, 255, 0) 65% */
+                          );
+                          height: 100%;
+                          /* font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif; */
+                          font-weight: 600;
+                      }
+                      #app {
+                          height: 100%;
+                          overflow-y: auto;
+                      }
+
+                      @font-face {
+                          font-family: 'KiyosunaSans';
+                          src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-B.otf'}');
+                          font-weight: normal;
+                          font-style: normal;
+                      }
+                      @font-face {
+                          font-family: 'KiyosunaSans';
+                          src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-L.otf'}');
+                          font-weight: lighter;
+                          font-style: normal;
+                      }
+                      @font-face {
+                          font-family: 'RFKrabuler';
+                          src: url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.eot'}');
+                          src:
+                              url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff2'}') format('woff2'),
+                              url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff'}') format('woff'),
+                              url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/TTF/RF-Krabuler-Regular.ttf'}') format('truetype');
+                          font-weight: normal;
+                          font-style: normal;
+                      }
+                  `}
+              />
+              <Dashboard store={store} />
+          </BrowserRouter>
+        </ChakraProvider>
+    )
+}

 export default App;

--- a/src/components/xl-spinner/index.ts
+++ b/src/components/xl-spinner/index.ts
@@ -1 +0,0 @@
-export { XlSpinner } from './xl-spinner';
--- a/src/components/xl-spinner/xl-spinner.tsx
+++ b/src/components/xl-spinner/xl-spinner.tsx
@@ -1,20 +0,0 @@
-import React from 'react'
-import {
-    Container,
-    Center,
-    Spinner,
-} from '@chakra-ui/react'
-
-export const XlSpinner = () => (
-    <Container maxW="container.xl">
-        <Center h="300px">
-            <Spinner
-                thickness="4px"
-                speed="0.65s"
-                emptyColor="gray.200"
-                color="blue.500"
-                size="xl"
-            />
-        </Center>
-    </Container>
-)
--- a/src/global.styles.ts
+++ b/src/global.styles.ts
@@ -1,60 +0,0 @@
-import { css } from '@emotion/react'
-
-export const globalStyles = css`
-html {
-    height: 100%;
-    max-width: 100%;
-    min-width: 320px;
-    overflow: hidden;
-}
-body {
-    color: #000;
-    /* background: radial-gradient(circle at top right, rgb(154 227 33), rgb(33 160 56)); */
-    background: radial-gradient(
-        farthest-side at bottom left,
-        rgba(35, 235, 4, 0.709), 
-        rgba(255, 255, 255, 0) 65%
-    ),
-    radial-gradient(
-        farthest-corner at bottom center,
-        rgba(244, 244, 8, 0.6), 
-        rgba(255, 255, 255, 0) 40%
-    ),
-    radial-gradient(
-        farthest-side at bottom right,
-        rgba(0, 195, 255, 0.648), 
-        rgb(239 244 246) 65%
-        /* rgba(255, 255, 255, 0) 65% */
-    );
-    height: 100%;
-    /* font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif; */
-    font-weight: 600;
-}
-#app {
-    height: 100%;
-    overflow-y: auto;
-}
-
-@font-face {
-    font-family: 'KiyosunaSans';
-    src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-B.otf'}');
-    font-weight: normal;
-    font-style: normal;
-}
-@font-face {
-    font-family: 'KiyosunaSans';
-    src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-L.otf'}');
-    font-weight: lighter;
-    font-style: normal;
-}
-@font-face {
-    font-family: 'RFKrabuler';
-    src: url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.eot'}');
-    src:
-        url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff2'}') format('woff2'),
-        url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff'}') format('woff'),
-        url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/TTF/RF-Krabuler-Regular.ttf'}') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-`
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,10 +5,6 @@ import App from './app';
 import { keycloak } from "./__data__/kc";
 import { createStore } from "./__data__/store";

-if(!module.hot) {
-  import('./ym');
-}
-
 export default (props) => <App {...props} />;
  
 let rootElement: ReactDOM.Root
--- a/src/pages/course-list.tsx
+++ b/src/pages/course-list.tsx
@@ -61,8 +61,8 @@ const CoursesList = () => {
    getValues,
  } = useForm<NewCourseForm>({
    defaultValues: {
-      startDt: dayjs().format('YYYY-MM-DD'),
-      name: 'Название',
+      startDt: '',
+      name: '',
    },
  })

@@ -288,7 +288,7 @@ const CourseCard = ({
        </CardBody>
      )}
      <CardFooter>
-        <ButtonGroup spacing={[0, 4]} mt="16px" flexDirection={['column', 'row']}>
+        <ButtonGroup spacing="4" mt="16px">
          <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
            <Button
              leftIcon={<LinkIcon />}
@@ -302,7 +302,6 @@ const CourseCard = ({
          <Tooltip label="Детали" fontSize="12px" top="16px">
            <Button
              colorScheme="blue"
-              mt={["16px", 0]}
              variant="outline"
              leftIcon={isOpened ? <ArrowUpIcon /> : <ArrowDownIcon />}
              loadingText="Загрузка"
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -1,6 +1,8 @@
 import { lazy } from 'react'

-export const CourseListPage = lazy(() => import(/* webpackChunkName: "course-list" */ './course-list'));
-export const LessonDetailsPage = lazy(() => import(/* webpackChunkName: "lesson-details" */ './lesson-details'));
-export const LessonListPage = lazy(() => import(/* webpackChunkName: "lesson-list" */ './lesson-list'));
-export const UserPage = lazy(() => import(/* webpackChunkName: "user-page" */ './user-page'));
+export const CourseListPage = lazy(/* chank-name="course-details" */() => import('./course-list'));
+
+export const LessonDetailsPage = lazy(/* chank-name="course-details" */() => import('./lesson-details'));
+export const LessonListPage = lazy(/* chank-name="course-details" */() => import('./lesson-list'));
+
+export const UserPage = lazy(/* chank-name="course-details" */() => import('./user-page'));
--- a/src/pages/lesson-list/lesson-list.tsx
+++ b/src/pages/lesson-list/lesson-list.tsx
@@ -4,18 +4,31 @@ import React, {
  useRef,
  useState,
 } from 'react'
+import { ResponsiveBar } from '@nivo/bar'
 import dayjs from 'dayjs'
 import { Link, useParams } from 'react-router-dom'
 import { getNavigationsValue, getFeatures } from '@brojs/cli'
+import { useForm, Controller } from 'react-hook-form'
 import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  Container,
  Box,
+  Card,
+  CardBody,
+  CardHeader,
+  Heading,
  Button,
+  CloseButton,
  useToast,
+  VStack,
+  FormControl,
+  FormLabel,
  Toast,
+  FormHelperText,
+  FormErrorMessage,
+  Input,
  TableContainer,
  Table,
  Thead,
@@ -28,6 +41,8 @@ import {
  MenuItem,
  Text,
  MenuList,
+  Center,
+  Spinner,
  AlertDialog,
  AlertDialogBody,
  AlertDialogContent,
@@ -37,22 +52,134 @@ import {
 } from '@chakra-ui/react'
 import { AddIcon, EditIcon } from '@chakra-ui/icons'

-import { useAppSelector } from '../../__data__/store'
-import { api } from '../../__data__/api/api'
-import { isTeacher } from '../../utils/user'
-import { qrCode } from '../../assets'
-import { Lesson } from '../../__data__/model'
-import { XlSpinner } from '../../components/xl-spinner'
+import { useAppSelector } from '../__data__/store'
+import { api } from '../__data__/api/api'
+import { isTeacher } from '../utils/user'
+import { qrCode } from '../assets'
+import { Lesson } from '../__data__/model'

-import { LessonForm } from './components/lessons-form'
-import { BreadcrumbsWrapper } from './style'
-import { Bar } from './components/bar'
+import { ErrorSpan, BreadcrumbsWrapper } from './style'

 const features = getFeatures('journal')

 const barFeature = features?.['lesson.bar']
 const groupByDate = features?.['group.by.date']

+interface NewLessonForm {
+  name: string
+  date: string
+}
+
+interface LessonFormProps {
+  lesson?: Partial<Lesson>
+  isLoading: boolean
+  onCancel: () => void
+  onSubmit: (lesson: Lesson) => void
+  error?: string
+  title: string
+  nameButton: string
+}
+
+const LessonForm = ({
+  lesson,
+  isLoading,
+  onCancel,
+  onSubmit,
+  error,
+  title,
+  nameButton,
+}: LessonFormProps) => {
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<NewLessonForm>({
+    defaultValues: lesson || {
+      name: '',
+      date: '',
+    },
+  })
+
+  return (
+    <Card align="left">
+      <CardHeader display="flex">
+        <Heading as="h2" mt="0">
+          {title}
+        </Heading>
+        <CloseButton
+          ml="auto"
+          onClick={() => {
+            reset()
+            onCancel()
+          }}
+        />
+      </CardHeader>
+      <CardBody>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <VStack spacing="10" align="left">
+            <Controller
+              control={control}
+              name="date"
+              rules={{ required: 'Обязательное поле' }}
+              render={({ field }) => (
+                <FormControl>
+                  <FormLabel>Дата</FormLabel>
+                  <Input
+                    {...field}
+                    required={false}
+                    placeholder="Укажите дату лекции"
+                    size="md"
+                    type="datetime-local"
+                  />
+                  {errors.date ? (
+                    <FormErrorMessage>{errors.date?.message}</FormErrorMessage>
+                  ) : (
+                    <FormHelperText>Укажите дату и время лекции</FormHelperText>
+                  )}
+                </FormControl>
+              )}
+            />
+
+            <Controller
+              control={control}
+              name="name"
+              rules={{ required: 'Обязательное поле' }}
+              render={({ field }) => (
+                <FormControl isRequired isInvalid={Boolean(errors.name)}>
+                  <FormLabel>Название новой лекции:</FormLabel>
+                  <Input
+                    {...field}
+                    required={false}
+                    placeholder="Название лекции"
+                    size="md"
+                  />
+                  {errors.name && (
+                    <FormErrorMessage>{errors.name.message}</FormErrorMessage>
+                  )}
+                </FormControl>
+              )}
+            />
+            <Box mt="10">
+              <Button
+                size="lg"
+                type="submit"
+                leftIcon={<AddIcon />}
+                colorScheme="blue"
+                isLoading={isLoading}
+              >
+                {nameButton}
+              </Button>
+            </Box>
+          </VStack>
+
+          {error && <ErrorSpan>{error}</ErrorSpan>}
+        </form>
+      </CardBody>
+    </Card>
+  )
+}
+
 const LessonList = () => {
  const { courseId } = useParams()
  const user = useAppSelector((s) => s.user)
@@ -74,6 +201,7 @@ const LessonList = () => {
      return []
    }

+
    if (!groupByDate) {
      return [{ date: '', data: sorted }]
    }
@@ -180,7 +308,19 @@ const LessonList = () => {
  }, [updateLessonRqst.isSuccess])

  if (isLoading) {
-    return <XlSpinner />;
+    return (
+      <Container maxW="container.xl">
+        <Center h="300px">
+          <Spinner
+            thickness="4px"
+            speed="0.65s"
+            emptyColor="gray.200"
+            color="blue.500"
+            size="xl"
+          />
+        </Center>
+      </Container>
+    )
  }

  return (
@@ -354,3 +494,29 @@ const LessonList = () => {
 }

 export default LessonList
+
+const Bar = ({ data }) => (
+  <ResponsiveBar
+    data={data}
+    keys={['count']}
+    indexBy="lessonIndex"
+    margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
+    padding={0.3}
+    valueScale={{ type: 'linear' }}
+    indexScale={{ type: 'band', round: true }}
+    colors={{ scheme: 'set3' }}
+    axisTop={null}
+    axisRight={null}
+    labelSkipWidth={12}
+    labelSkipHeight={12}
+    labelTextColor={{
+      from: 'color',
+      modifiers: [['brighter', 1.4]],
+    }}
+    role="application"
+    ariaLabel="График посещаемости лекций"
+    barAriaLabel={(e) =>
+      e.id + ': ' + e.formattedValue + ' on lection: ' + e.indexValue
+    }
+  />
+)
--- a/src/pages/lesson-list/components/bar.tsx
+++ b/src/pages/lesson-list/components/bar.tsx
@@ -1,28 +0,0 @@
-import React from 'react'
-import { ResponsiveBar } from '@nivo/bar'
-
-export const Bar = ({ data }) => (
-    <ResponsiveBar
-        data={data}
-        keys={['count']}
-        indexBy="lessonIndex"
-        margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
-        padding={0.3}
-        valueScale={{ type: 'linear' }}
-        indexScale={{ type: 'band', round: true }}
-        colors={{ scheme: 'set3' }}
-        axisTop={null}
-        axisRight={null}
-        labelSkipWidth={12}
-        labelSkipHeight={12}
-        labelTextColor={{
-            from: 'color',
-            modifiers: [['brighter', 1.4]],
-        }}
-        role="application"
-        ariaLabel="График посещаемости лекций"
-        barAriaLabel={(e) =>
-            e.id + ': ' + e.formattedValue + ' on lection: ' + e.indexValue
-        }
-    />
-)
--- a/src/pages/lesson-list/components/lessons-form.tsx
+++ b/src/pages/lesson-list/components/lessons-form.tsx
@@ -1,137 +0,0 @@
-import React from 'react'
-import { useForm, Controller } from 'react-hook-form'
-import {
-    Box,
-    Card,
-    CardBody,
-    CardHeader,
-    Heading,
-    Button,
-    CloseButton,
-    VStack,
-    FormControl,
-    FormLabel,
-    FormHelperText,
-    FormErrorMessage,
-    Input,
-} from '@chakra-ui/react'
-import { AddIcon } from '@chakra-ui/icons'
-
-import { dateToCalendarFormat } from '../../../utils/time'
-import { Lesson } from '../../../__data__/model'
-import { ErrorSpan } from '../style'
-
-interface NewLessonForm {
-    name: string;
-    date: string;
-}
-
-interface LessonFormProps {
-    lesson?: Partial<Lesson>
-    isLoading: boolean
-    onCancel: () => void
-    onSubmit: (lesson: Lesson) => void
-    error?: string
-    title: string
-    nameButton: string
-}
-
-export const LessonForm = ({
-    lesson,
-    isLoading,
-    onCancel,
-    onSubmit,
-    error,
-    title,
-    nameButton,
-}: LessonFormProps) => {
-    const {
-        control,
-        handleSubmit,
-        reset,
-        formState: { errors },
-    } = useForm<NewLessonForm>({
-        defaultValues: (lesson && { ...lesson, date: dateToCalendarFormat(lesson.date) }) || {
-            name: '',
-            date: dateToCalendarFormat(),
-        },
-    })
-    
-    return (
-        <Card align="left">
-        <CardHeader display="flex">
-        <Heading as="h2" mt="0">
-        {title}
-        </Heading>
-        <CloseButton
-        ml="auto"
-        onClick={() => {
-            reset()
-            onCancel()
-        }}
-        />
-        </CardHeader>
-        <CardBody>
-        <form onSubmit={handleSubmit(onSubmit)}>
-        <VStack spacing="10" align="left">
-        <Controller
-        control={control}
-        name="date"
-        rules={{ required: 'Обязательное поле' }}
-        render={({ field }) => (
-            <FormControl>
-            <FormLabel>Дата</FormLabel>
-            <Input
-            {...field}
-            required={false}
-            placeholder="Укажите дату лекции"
-            size="md"
-            type="datetime-local"
-            />
-            {errors.date ? (
-                <FormErrorMessage>{errors.date?.message}</FormErrorMessage>
-            ) : (
-                <FormHelperText>Укажите дату и время лекции</FormHelperText>
-            )}
-            </FormControl>
-        )}
-        />
-        
-        <Controller
-        control={control}
-        name="name"
-        rules={{ required: 'Обязательное поле' }}
-        render={({ field }) => (
-            <FormControl isRequired isInvalid={Boolean(errors.name)}>
-            <FormLabel>Название новой лекции:</FormLabel>
-            <Input
-            {...field}
-            required={false}
-            placeholder="Название лекции"
-            size="md"
-            />
-            {errors.name && (
-                <FormErrorMessage>{errors.name.message}</FormErrorMessage>
-            )}
-            </FormControl>
-        )}
-        />
-        <Box mt="10">
-        <Button
-        size="lg"
-        type="submit"
-        leftIcon={<AddIcon />}
-        colorScheme="blue"
-        isLoading={isLoading}
-        >
-        {nameButton}
-        </Button>
-        </Box>
-        </VStack>
-        
-        {error && <ErrorSpan>{error}</ErrorSpan>}
-        </form>
-        </CardBody>
-        </Card>
-    )
-}
--- a/src/pages/lesson-list/index.ts
+++ b/src/pages/lesson-list/index.ts
@@ -1,3 +0,0 @@
-import LessonsList from './lesson-list';
-
-export default LessonsList;
--- a/src/pages/lesson-list/style.ts
+++ b/src/pages/lesson-list/style.ts
@@ -1,13 +0,0 @@
-import styled from '@emotion/styled';
-
-export const BreadcrumbsWrapper = styled.div`
-  padding: 12px;
-`;
-
-export const ErrorSpan = styled.span`
-  color: #f9e2e2;
-  display: block;
-  padding: 16px;
-  background-color: #d32f0b;
-  border-radius: 11px;
-`
--- a/src/pages/user-page.tsx
+++ b/src/pages/user-page.tsx
@@ -9,8 +9,10 @@ import {
  Box,
  Center,
  Container,
+  Heading,
  Spinner,
  Text,
+  Stack,
 } from '@chakra-ui/react'
 import { UserCard } from '../components/user-card'

--- a/src/utils/time.ts
+++ b/src/utils/time.ts
@@ -1,3 +0,0 @@
-import dayjs from "dayjs";
-
-export const dateToCalendarFormat = (date?: string) => dayjs(date).format('YYYY-MM-DDTHH:mm')
--- a/src/ym.ts
+++ b/src/ym.ts
@@ -13,5 +13,3 @@ ym(98045358, "init", {
    accurateTrackBounce: true,
    webvisor: true
 });
-
-export const dummy = true;