change circle page with some utils improvements

apps/schools/domains/circle/components/changeCircleForm/constants.ts

@@ -0,0 +1,3 @@
+export const CIRCLE_NAME: string = 'circle_name'
+export const CIRCLE_ADDRESS: string = 'circle_address'
+export const ADDRESS_ROOM: string = 'address_room'

apps/schools/domains/circle/components/changeCircleForm/hooks.ts

@@ -0,0 +1,30 @@
+import { useMemo } from 'react'
+import { PleaseInputAddressMsg, PleaseInputCircleNameMsg } from '@domains/user/components/auth/constants/message'
+import { ValidatorsMap } from '@domains/common/redux/interfaces'
+import { getGreaterValidator } from '@domains/common/utils/validators'
+
+export const useChangeCircleFormValidators = () => {
+    return useMemo<ValidatorsMap>(() => {
+        return {
+            name: [
+                {
+                    required: true,
+                    message: PleaseInputCircleNameMsg,
+                    whitespace: true,
+                    type: 'string',
+                },
+                getGreaterValidator(200),
+            ],
+            address: [
+                {
+                    required: true,
+                    message: PleaseInputAddressMsg,
+                    whitespace: true,
+                    type: 'string',
+                },
+                getGreaterValidator(200),
+            ],
+            room: [getGreaterValidator(55)],
+        }
+    }, [this])
+}

apps/schools/domains/circle/components/changeCircleForm/index.tsx

@@ -0,0 +1,155 @@
+import { Form, Typography, Input as AntdInput, Row, Spin } from 'antd'
+import React, { 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 { 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'
+import { AimOutlined } from '@ant-design/icons'
+import { Select } from '@domains/common/components/select'
+import { handleSubmitForm } from '../../handlers/circle'
+import { useChangeCircleMutation, useGetCircleQuery } from '../../redux/circleApi'
+import { getVarsForAddressColumn } from '@domains/common/utils/geo'
+import { getUuidFromUrl } from '@domains/common/utils/getUuidFromUrl'
+
+export const ChangeCircleForm = () => {
+    const validators = useChangeCircleFormValidators()
+    const { organizationId } = useOrganization()
+    const [form] = Form.useForm()
+    const [isFormValid, setIsFormValid] = useState(false)
+    const [mutation] = useChangeCircleMutation()
+
+    const circleId = getUuidFromUrl()[0]
+
+    const circleData = useGetCircleQuery({
+        circle_id: circleId,
+    })
+    const currentCircle = circleData?.data?.circle
+
+    const circlesData = useGetAllCirclesQuery({
+        organization_id: organizationId,
+    })
+    const circlesAddresses = Array.from(
+        new Set(circlesData?.data?.results.map((x) => getVarsForAddressColumn(x.address)[0])),
+    )
+
+    const initialValues = {
+        [CIRCLE_NAME]: currentCircle?.name,
+        [CIRCLE_ADDRESS]: getVarsForAddressColumn(currentCircle?.address ?? '')[0],
+        [ADDRESS_ROOM]: getVarsForAddressColumn(currentCircle?.address ?? '')[1],
+    }
+
+    const validationCheck = () => {
+        setIsFormValid(isValidFormCheck(form, [], initialValues))
+    }
+
+    return !circleData.isLoading ? (
+        <Row className={styles.mainRow}>
+            <div className={styles.formContainer}>
+                <Form
+                    form={form}
+                    className={styles.table}
+                    colon={false}
+                    requiredMark={false}
+                    onValuesChange={validationCheck}
+                    onFinish={() => {
+                        handleSubmitForm(circleId, form, mutation).then((isSucceed) => {
+                            if (isSucceed) window.location.href = `/circle/${circleId}`
+                        })
+                    }}
+                    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>
+
+                    <Row className={styles.complexInputContainer}>
+                        {!circlesData.isLoading ? (
+                            <>
+                                <AntdInput.Group compact className={styles.complexInput}>
+                                    <Form.Item
+                                        required={true}
+                                        label={
+                                            <span>
+                                                <span className={styles.requiredMark}>*</span> Адрес
+                                            </span>
+                                        }
+                                        name={CIRCLE_ADDRESS}
+                                        initialValue={initialValues[CIRCLE_ADDRESS]}
+                                        className={classnames(styles.label, styles.address)}
+                                        rules={validators.address}
+                                    >
+                                        <Select
+                                            placeholder='Выберите адрес кружка'
+                                            customType={'selectInput'}
+                                            className={styles.select}
+                                            loading={circlesData.isLoading}
+                                            options={circlesAddresses?.map((x: string | undefined) => {
+                                                return {
+                                                    value: x,
+                                                    label: x,
+                                                }
+                                            })}
+                                        />
+                                    </Form.Item>
+
+                                    <Form.Item
+                                        label={'Помещение'}
+                                        name={ADDRESS_ROOM}
+                                        className={classnames(styles.label, styles.room)}
+                                        initialValue={initialValues[ADDRESS_ROOM]}
+                                        rules={validators.room}
+                                    >
+                                        <Input className={styles.input} placeholder='Помещение и номер' />
+                                    </Form.Item>
+                                </AntdInput.Group>
+
+                                <Button className={styles.mapButton} antdType={'text'} icon={<AimOutlined />}>
+                                    Выбрать на карте
+                                </Button>
+                            </>
+                        ) : (
+                            <Spin></Spin>
+                        )}
+                    </Row>
+
+                    <Form.Item name='button'>
+                        <Button
+                            disabled={!isFormValid}
+                            key='submit'
+                            type='schoolDefault'
+                            htmlType='submit'
+                            block
+                            data-cy='resetcomplete-button'
+                            className={styles.button}
+                        >
+                            Сохранить изменения
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </div>
+        </Row>
+    ) : (
+        <Spin></Spin>
+    )
+}

apps/schools/domains/circle/components/changeCircleForm/styles/styles.module.scss

@@ -0,0 +1,71 @@
+@import '../../../../common/components/styles/abstracts/colors';
+
+.mainRow {
+  height: 100px;
+  justify-content: space-between;
+
+  .formContainer {
+    width: 700px;
+
+    .table {
+      max-width: 550px;
+
+      .requiredMark {
+        color: $color-required-mark;
+      }
+
+      .label {
+        font-family: 'Roboto', sans-serif;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px;
+      }
+
+      .complexInputContainer {
+        width: 125%;
+
+        .complexInput {
+          width: 76%;
+
+          .address {
+            width: 65%;
+            border-radius: 0;
+
+            .input {
+              border-top-right-radius: 0;
+              border-bottom-right-radius: 0;
+            }
+          }
+
+          .room {
+            width: 35%;
+
+            .input {
+              border-top-left-radius: 0;
+              border-bottom-left-radius: 0;
+            }
+          }
+        }
+
+        .mapButton {
+          width: 24%;
+          margin-top: 38px;
+          color: $main-blue-color;
+          padding-left: 1%;
+        }
+      }
+
+
+      .button {
+        width: 40%;
+        text-align: center;
+        font-family: 'Roboto', sans-serif;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+      }
+    }
+  }
+}

apps/schools/domains/circle/components/changeCircleForm/styles/styles.ts

@@ -0,0 +1 @@
+export const TOOLTIP_MARGIN = '47px'

apps/schools/domains/circle/components/createCircleForm/index.tsx

@@ -31,7 +31,7 @@ export const CreateCircleForm = () => {
     )
 
     const validationCheck = () => {
-        setIsFormValid(isValidFormCheck(form, [CIRCLE_NAME]))
+        setIsFormValid(isValidFormCheck(form, [CIRCLE_NAME, CIRCLE_ADDRESS]))
     }
 
     return (

apps/schools/domains/circle/components/currentCircle/index.tsx

@@ -22,6 +22,7 @@ import android from '@public/image/Android.svg'
 import { searchColumns } from './constants'
 import { CurrentCircleRowType } from './interfaces'
 import styles from './styles/styles.module.scss'
+import { getVarsForAddressColumn } from '@domains/common/utils/geo'
 
 const CurrentCircle = () => {
     const [isModalVisible, setIsModalVisible] = useState(false)
@@ -56,6 +57,7 @@ const CurrentCircle = () => {
     })
 
     const countAllQueries = sumObjectValues(queriesCount)
+    const addressVars = getVarsForAddressColumn(circle?.circle.address ?? '')
 
     return (
         <>
@@ -64,7 +66,7 @@ const CurrentCircle = () => {
             </Typography.Title>
             <Row className={styles.headersBlock}>
                 <Col lg={12} md={24} xs={24} sm={24} className={styles.queriesBlock}>
-                    <Col span={24}>{circle?.circle.address}</Col>
+                    <Col span={24}>{`${addressVars[0]}, ${addressVars[1]}`}</Col>
                     <Typography.Title level={2}>Заявки</Typography.Title>
                     <Row className={styles.Row}>
                         <div>Всего</div>

apps/schools/domains/circle/handlers/circle.ts

@@ -1,16 +1,16 @@
 import { FormInstance, message } from 'antd'
-import { LoadingRequestMsg, SuccessCreateCircleMsg } from '@domains/user/components/auth/constants/message'
+import { LoadingRequestMsg, SuccessUpdateCircleMsg } from '@domains/user/components/auth/constants/message'
 import { removeEmpty } from '@domains/common/utils/form'
 import { CIRCLE_NAME, CIRCLE_ADDRESS, ADDRESS_ROOM } from '../components/createCircleForm/constants'
 import { withLoadingMessage } from '@domains/common/utils/loading'
 import { ADDRESS_SEPARATOR } from '@domains/common/utils/geo'
 
-export async function handleSubmitForm(organizationId: string, formComponent: FormInstance, mutation: any) {
+export async function handleSubmitForm(circleId: string, formComponent: FormInstance, mutation: any) {
     const response = await withLoadingMessage(
         LoadingRequestMsg,
         mutation,
         removeEmpty({
-            organization: organizationId,
+            circle_id: circleId,
             name: formComponent.getFieldValue(CIRCLE_NAME),
             address: `${formComponent.getFieldValue(CIRCLE_ADDRESS)}${ADDRESS_SEPARATOR}${formComponent.getFieldValue(
                 ADDRESS_ROOM,
@@ -19,7 +19,7 @@ export async function handleSubmitForm(organizationId: string, formComponent: Fo
     )
 
     if ('data' in response) {
-        message.success(SuccessCreateCircleMsg)
+        message.success(SuccessUpdateCircleMsg)
         return true
     }
 

apps/schools/domains/circle/redux/circleApi.ts

@@ -6,6 +6,7 @@ import {
     CircleStudentsData,
     CreateCircleData,
     CreateCircleInviteStudentData,
+    ChangeCircleData,
 } from './interfaces'
 import { GetCircle, GetQueryStatus, GetStudent } from '@domains/common/redux/serializers'
 
@@ -25,6 +26,13 @@ const circleApi = commonApi.injectEndpoints({
                 body: data,
             }),
         }),
+        changeCircle: build.mutation<{ circle: GetCircle }, ChangeCircleData>({
+            query: (data) => ({
+                url: `/organization-management/circles/${data.circle_id}`,
+                method: 'PATCH',
+                body: data,
+            }),
+        }),
         getCircle: build.query<{ circle: GetCircle }, CircleData>({
             query: (params) => ({
                 url: `/organization-management/circles/${params.circle_id}`,
@@ -61,4 +69,5 @@ export const {
     useGetCircleQuery,
     useDeleteCircleMutation,
     useInviteStudentMutation,
+    useChangeCircleMutation,
 } = circleApi

apps/schools/domains/circle/redux/interfaces.ts

@@ -26,6 +26,13 @@ export interface CreateCircleData {
     location: string
 }
 
+export interface ChangeCircleData {
+    name?: string
+    address?: string
+    location?: string
+    circle_id: string
+}
+
 export interface AllCirclesIcalData extends BasePaginationData {
     id?: string
     organization?: string