Merge pull request #154 from open-schools/dev

Release 1.1.2
open-schools · Aug 30, 2024 · d8e7156 · d8e7156
2 parents 0d9f1fe + fe9cbeb
commit d8e7156
Show file tree

Hide file tree

Showing 43 changed files with 427 additions and 484 deletions.
diff --git a/apps/schools/dev.Dockerfile b/apps/schools/dev.Dockerfile
@@ -2,6 +2,7 @@ FROM node:18-alpine AS runner
 
 RUN node -v
 
+ENV NODE_OPTIONS="--max-old-space-size=4096"
 ENV NODE_TLS_REJECT_UNAUTHORIZED=0
 ENV NODE_ENV production
 ENV NEXT_TELEMETRY_DISABLED 1

diff --git a/apps/schools/domains/circle/components/changeCircleForm/index.tsx b/apps/schools/domains/circle/components/changeCircleForm/index.tsx
@@ -6,8 +6,6 @@ import { Button } from '@domains/common/components/button'
 import { useChangeCircleFormValidators } from './hooks'
 import { useGetAllCirclesQuery } from '@domains/organization/redux/organizationApi'
 import { useOrganization } from '@domains/organization/providers/organizationProvider'
-import { WithTooltip } from '@domains/common/components/tooltip/withTooltip'
-import { TOOLTIP_MARGIN } from './styles/styles'
 import { isValidFormCheck } from '@domains/common/utils/form'
 import { CIRCLE_NAME, CIRCLE_ADDRESS, ADDRESS_ROOM } from './constants'
 import classnames from 'classnames'
@@ -80,22 +78,20 @@ export const ChangeCircleForm = () => {
                         layout='vertical'
                     >
                         <Typography.Title level={1}>Редактирование кружка</Typography.Title>
-                        <WithTooltip tooltipText={'Здесь будет текст тултипа'} margin={TOOLTIP_MARGIN}>
-                            <Form.Item
-                                required={true}
-                                label={
-                                    <span>
-                                        <span className={styles.requiredMark}>*</span> Название
-                                    </span>
-                                }
-                                name={CIRCLE_NAME}
-                                className={styles.label}
-                                rules={validators.name}
-                                initialValue={initialValues[CIRCLE_NAME]}
-                            >
-                                <Input required={true} placeholder='Введите название кружка' />
-                            </Form.Item>
-                        </WithTooltip>
+                        <Form.Item
+                            required={true}
+                            label={
+                                <span>
+                                    <span className={styles.requiredMark}>*</span> Название
+                                </span>
+                            }
+                            name={CIRCLE_NAME}
+                            className={styles.label}
+                            rules={validators.name}
+                            initialValue={initialValues[CIRCLE_NAME]}
+                        >
+                            <Input required={true} placeholder='Введите название кружка' />
+                        </Form.Item>
 
                         <Row className={styles.complexInputContainer}>
                             {!circlesData.isLoading ? (

diff --git a/apps/schools/domains/circle/components/changeCircleForm/styles/styles.module.scss b/apps/schools/domains/circle/components/changeCircleForm/styles/styles.module.scss
@@ -20,6 +20,7 @@
         font-style: normal;
         font-weight: 400;
         line-height: 22px;
+        width: 95%;
 
         :global {
           .ant-select-selector {

diff --git a/apps/schools/domains/circle/components/circleList/index.tsx b/apps/schools/domains/circle/components/circleList/index.tsx
@@ -10,27 +10,18 @@ import { RowType, TableType } from './interfaces'
 import { searchStudentsColumns } from './constants'
 import { useGetAllCirclesQuery } from '@domains/organization/redux/organizationApi'
 import EmptyWrapper from '@domains/common/components/containers/EmptyWrapper'
-import { mapReturnedData } from '@domains/common/redux/utils'
 import { HighlightText } from '@domains/common/components/table/forming'
 import { getVarsForAddressColumn } from '@domains/common/utils/geo'
 import { AppRoutes, RoutePath } from '@domains/common/constants/routerEnums'
-import { defaultPaginationTablePage, defaultPaginationTablePageSize } from '@domains/common/constants/Table'
-import { scrollToTop } from '@domains/common/utils/scrollInDirection'
+import { useQueryState } from 'next-usequerystate'
 
 export function CircleList() {
-    const [searchRequestText, setSearchRequestText] = useState('')
+    const [searchRequestText, setSearchRequestText] = useQueryState('search')
     const { organizationId } = useOrganization()
 
-    const [paginationParams, setPaginationParams] = useState({
-        page: defaultPaginationTablePage,
-        pageSize: defaultPaginationTablePageSize,
-    })
-
     const { data: circles, isFetching: isFetching } = useGetAllCirclesQuery({
         organization_id: organizationId,
-        or_search: createSearchTextForRequest(searchRequestText, searchStudentsColumns),
-        page: paginationParams.page,
-        page_size: paginationParams.pageSize,
+        or_search: createSearchTextForRequest(searchRequestText || '', searchStudentsColumns),
     })
 
     return (
@@ -42,7 +33,7 @@ export function CircleList() {
             data={circles}
             isLoading={isFetching}
             handleRunTask={() => router.push(RoutePath[AppRoutes.CIRCLE_CREATE])}
-            searchTrigger={searchRequestText}
+            searchTrigger={searchRequestText || ''}
         >
             <div className={styles.header}>
                 <Typography.Title level={1}>Кружки</Typography.Title>
@@ -61,18 +52,6 @@ export function CircleList() {
                     ['Адрес', 'address'],
                     ['Кол-во принятых заявок', 'accepted_count'],
                 ]}
-                pagination={{
-                    current: paginationParams.page,
-                    pageSize: paginationParams.pageSize,
-                    total: circles?.count,
-                    onChange: (page, pageSize) => {
-                        setPaginationParams({
-                            page,
-                            pageSize,
-                        })
-                        scrollToTop()
-                    },
-                }}
                 data={circles}
                 isLoading={isFetching}
                 mainRoute={RoutePath[AppRoutes.CIRCLE_LIST]}
@@ -95,8 +74,9 @@ export function CircleList() {
                     },
                 }}
                 customWidths={[60, 25, 15]}
-                searchRequestText={searchRequestText}
-                setSearchRequestText={setSearchRequestText}
+                searchRequestText={searchRequestText || ''}
+                setSearchRequestText={(text) => setSearchRequestText(text)}
+                rowClassName={styles.tableRowPointer}
             />
         </EmptyWrapper>
     )

diff --git a/apps/schools/domains/circle/components/circleList/styles/styles.module.scss b/apps/schools/domains/circle/components/circleList/styles/styles.module.scss
@@ -59,4 +59,8 @@
   font-style: normal;
   font-weight: 400;
   line-height: 22px;
-}
+}
+
+.tableRowPointer:hover {
+  cursor: pointer;
+}
diff --git a/apps/schools/domains/circle/components/createCircleForm/index.tsx b/apps/schools/domains/circle/components/createCircleForm/index.tsx
@@ -1,17 +1,15 @@
-import { Form, Typography, Input as AntdInput, Row, Spin, Tooltip } from 'antd'
+import { Form, Typography, Input as AntdInput, Row, Spin } from 'antd'
 import React, { useEffect, useState } from 'react'
 import { Input } from '@domains/common/components/input'
 import styles from './styles/styles.module.scss'
 import { Button } from '@domains/common/components/button'
 import { useCreateCircleFormValidators } from './hooks'
 import { useGetAllCirclesQuery } from '@domains/organization/redux/organizationApi'
 import { useOrganization } from '@domains/organization/providers/organizationProvider'
-import { WithTooltip } from '@domains/common/components/tooltip/withTooltip'
-import { TOOLTIP_MARGIN } from './styles/styles'
 import { isValidFormCheck } from '@domains/common/utils/form'
 import { CIRCLE_NAME, CIRCLE_ADDRESS, ADDRESS_ROOM } from './constants'
 import classnames from 'classnames'
-import { AimOutlined, QuestionCircleFilled } from '@ant-design/icons'
+import { AimOutlined } from '@ant-design/icons'
 import { Select } from '@domains/common/components/select'
 import { useCreateCircleMutation } from '../../redux/circleApi'
 import { getVarsForAddressColumn } from '@domains/common/utils/geo'
@@ -21,14 +19,6 @@ import { mapSteps } from '@domains/circle/interfaces/mapStepsType'
 import { FormMapSteps } from '@domains/circle/constants/Enums'
 import Image from 'next/image'
 import android from '@public/image/Android 11.png'
-import {
-    DEFAULT_ICON_SIZE,
-    DEFAULT_MARGIN,
-    DEFAULT_OVERLAY_INNER_COLOR,
-    DEFAULT_OVERLAY_INNER_STYLE,
-    ICON_SIZES,
-} from '@domains/common/components/tooltip/styles/styles'
-import { BackPage } from '@domains/common/components/backPage'
 
 export const CreateCircleForm = () => {
     const validators = useCreateCircleFormValidators()
@@ -93,28 +83,10 @@ export const CreateCircleForm = () => {
                             >
                                 <Input
                                     required={true}
-                                    inputContainerClass={styles.inputWithTooltipContainer}
-                                    className={styles.inputWithTooltip}
+                                    inputContainerClass={styles.inputContainer}
+                                    className={styles.input}
                                     placeholder='Введите название кружка'
-                                >
-                                    <div className={styles.tooltipContainer}>
-                                        <Tooltip
-                                            placement='right'
-                                            title={'Здесь будет текст тултипа'}
-                                            color={DEFAULT_OVERLAY_INNER_COLOR}
-                                            style={{ height: 'auto' }}
-                                            overlayInnerStyle={DEFAULT_OVERLAY_INNER_STYLE}
-                                        >
-                                            <QuestionCircleFilled
-                                                style={{
-                                                    top: `${TOOLTIP_MARGIN}`,
-                                                    marginBottom: '10px',
-                                                    fontSize: ICON_SIZES[DEFAULT_ICON_SIZE],
-                                                }}
-                                            />
-                                        </Tooltip>
-                                    </div>
-                                </Input>
+                                />
                             </Form.Item>
                         </div>
 

diff --git a/apps/schools/domains/circle/components/createCircleForm/styles/styles.module.scss b/apps/schools/domains/circle/components/createCircleForm/styles/styles.module.scss
@@ -30,13 +30,13 @@
           width: 3%;
         }
 
-        .inputWithTooltipContainer {
+        .inputContainer {
           display: flex;
           flex-direction: row;
           justify-content: unset;
         }
 
-        .inputWithTooltip {
+        .input {
           width: 70%;
           margin-right: 5px;
           display: flex;

diff --git a/apps/schools/domains/circle/components/currentCircle/index.tsx b/apps/schools/domains/circle/components/currentCircle/index.tsx
@@ -25,10 +25,11 @@ import { getVarsForAddressColumn } from '@domains/common/utils/geo'
 import { StatusesEnum } from '@domains/common/constants/Enums'
 import { ErrorType } from '@store/commonApi'
 import { AppRoutes, DynamicAppRoutes, DynamicRoutePath, RoutePath } from '@domains/common/constants/routerEnums'
+import { useQueryState } from 'next-usequerystate'
 
 const CurrentCircle = () => {
     const [isModalVisible, setIsModalVisible] = useState(false)
-    const [searchRequestText, setSearchRequestText] = useState('')
+    const [searchRequestText, setSearchRequestText] = useQueryState('search')
     const [mutation, isDeleteFinished] = useDeleteCircleMutation()
     const uuid = getUuidFromUrl()
     const router = useRouter()
@@ -40,7 +41,7 @@ const CurrentCircle = () => {
     const { data: circle, error: circleError } = useGetCircleQuery({ circle_id: uuid[0] })
     const { data: students, isLoading } = useGetCircleStudentsQuery({
         circle_id: uuid[0],
-        or_search: createSearchTextForRequest(searchRequestText, searchColumns),
+        or_search: createSearchTextForRequest(searchRequestText || '', searchColumns),
     })
     const { data: queryData } = useGetCurrentCircleQuery({ circle_id: uuid[0], organization_id: organizationId })
 
@@ -135,8 +136,8 @@ const CurrentCircle = () => {
                     isLoading={isLoading}
                     needNumbering={true}
                     searchFields={['student_name', 'student_phone', 'parent_names', 'parent_phones']}
-                    searchRequestText={searchRequestText}
-                    setSearchRequestText={setSearchRequestText}
+                    searchRequestText={searchRequestText || ''}
+                    setSearchRequestText={(text) => setSearchRequestText(text)}
                 />
             </div>
             <Col span={24} className={styles.buttonBar}>

diff --git a/apps/schools/domains/common/components/bubbleFilter/index.tsx b/apps/schools/domains/common/components/bubbleFilter/index.tsx
@@ -4,12 +4,13 @@ import styles from './styles/styles.module.scss'
 import { BubbleFilterProps, BubbleFilterListItem } from '@domains/common/components/bubbleFilter/interface'
 import { CloseOutlined } from '@ant-design/icons'
 
-export const BubbleFilter: React.FC<BubbleFilterProps> = React.memo(({ text, items }) => {
-    const listItems = items.map((item: BubbleFilterListItem) =>
-        item.count && item.count > 0 ? (
+export const BubbleFilter: React.FC<BubbleFilterProps> = React.memo(({ text, items, statuses }) => {
+    const listItems = items.map((item: BubbleFilterListItem) => {
+        const isSelected = statuses?.includes(item.key) ?? false
+        return item.count && item.count > 0 ? (
             <Row
-                className={item.isSelected ? styles.bubbleContainerSelected : styles.bubbleContainer}
-                onClick={item.isSelected ? () => {} : item.onClick}
+                className={isSelected ? styles.bubbleContainerSelected : styles.bubbleContainer}
+                onClick={isSelected ? () => {} : item.onClick}
                 style={{ backgroundColor: item.isSelected ? item.color : '' }}
                 key={item.key}
             >
@@ -21,8 +22,8 @@ export const BubbleFilter: React.FC<BubbleFilterProps> = React.memo(({ text, ite
                 <div className={styles.bubbleText}>{item.text}</div>
                 {item.isSelected && <CloseOutlined onClick={item.onExit} className={styles.closeIcon} />}
             </Row>
-        ) : null,
-    )
+        ) : null
+    })
 
     return (
         <Row className={styles.container}>

diff --git a/apps/schools/domains/common/components/bubbleFilter/interface.ts b/apps/schools/domains/common/components/bubbleFilter/interface.ts
@@ -11,4 +11,5 @@ export interface BubbleFilterListItem {
 export interface BubbleFilterProps {
     items: BubbleFilterListItem[]
     text?: string
+    statuses?: string[] | null
 }
diff --git a/apps/schools/domains/common/components/searchInput/index.tsx b/apps/schools/domains/common/components/searchInput/index.tsx
@@ -1,14 +1,15 @@
-import React, { useState, ChangeEvent } from 'react'
+import React, { ChangeEvent } from 'react'
 import { Input } from '@domains/common/components/input'
 import { CloseCircleOutlined, SearchOutlined } from '@ant-design/icons'
 import styles from './styles/styles.module.scss'
+import { useQueryState } from 'next-usequerystate'
 
 interface SearchInputProps {
     onSearchChange: (value: string) => void
 }
 
 const SearchInput: React.FC<SearchInputProps> = ({ onSearchChange }) => {
-    const [inputText, setInputText] = useState('')
+    const [inputText, setInputText] = useQueryState('search')
 
     const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
         const value = event.target.value
@@ -21,7 +22,7 @@ const SearchInput: React.FC<SearchInputProps> = ({ onSearchChange }) => {
             onChange={handleInputChange}
             customType={'inputSearch'}
             placeholder={'Поиск'}
-            value={inputText}
+            value={inputText || ''}
             children={
                 <>
                     <SearchOutlined className={styles.search} />

diff --git a/apps/schools/domains/common/components/table/index.tsx b/apps/schools/domains/common/components/table/index.tsx
@@ -9,6 +9,7 @@ import { typeTable } from '@domains/common/constants/Table'
 import { CustomTableProps } from '@domains/common/components/table/interfaces'
 import { calculateAverageWidth } from '@domains/common/utils/calculateAverageWidth'
 import { ColumnType } from 'antd/lib/table/interface'
+import { useQueryState } from 'next-usequerystate'
 
 export const Table = <RowType, DataItemType>(props: CustomTableProps<RowType, DataItemType>) => {
     const {
@@ -64,7 +65,7 @@ export const Table = <RowType, DataItemType>(props: CustomTableProps<RowType, Da
     ]
 
     const [isTableLoading, setIsTableLoading] = useState(false)
-    const [inputText, setInputText] = useState('')
+    const [inputText, setInputText] = useQueryState('search')
     const [dataSource, setDataSource] = useState<any[]>([])
     const router = useRouter()
 
@@ -134,7 +135,7 @@ export const Table = <RowType, DataItemType>(props: CustomTableProps<RowType, Da
                     }}
                     customType={'inputSearch'}
                     placeholder={'Поиск'}
-                    value={inputText}
+                    value={inputText || ''}
                     children={
                         <>
                             <SearchOutlined className={styles.search} />

diff --git a/apps/schools/domains/common/components/table/interfaces.ts b/apps/schools/domains/common/components/table/interfaces.ts
@@ -3,6 +3,7 @@ import { ReturnedData } from '@domains/common/redux/interfaces'
 import { TableProps } from 'antd'
 import { ColumnFilterItem } from 'antd/lib/table/interface'
 import { Key } from 'antd/es/table/interface'
+import { Options } from 'next-usequerystate'
 
 export interface CustomFieldsProps {
     [key: string]: React.FC<{
@@ -30,7 +31,10 @@ export interface CustomTableProps<RowType, DataItemType> extends TableProps<any>
     customFields?: CustomFieldsProps
     searchRequestText: string
     needNumbering?: boolean
-    setSearchRequestText: React.Dispatch<React.SetStateAction<string>>
+    setSearchRequestText: <Shallow>(
+        value: string | ((old: string | null) => string | null) | null,
+        options?: Options<Shallow> | undefined,
+    ) => Promise<URLSearchParams>
     mainRoute: string
     sortFields?: string[]
     customFilterFields?: CustomFilterFieldsProps<RowType>