Merge pull request #5 from pieceowater-dev/dev

fix: users
pieceowater-dev · May 5, 2024 · 609adf2 · 609adf2
2 parents 2e777f1 + f450677
commit 609adf2
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 31 deletions.
diff --git a/src/app/providers/ui/theme-provider.tsx b/src/app/providers/ui/theme-provider.tsx
@@ -9,7 +9,7 @@ export const ThemeProvider: FC<IProvidersProps> = ({ children }) => {
       componentSize={'middle'}
       theme={{
         token: {
-          colorPrimary: '#81DA88',
+          colorPrimary: '#6ebd74',
           borderRadius: 8,
         },
         components: {

diff --git a/src/entities/settings/users-table/users-table.tsx b/src/entities/settings/users-table/users-table.tsx
@@ -1,4 +1,4 @@
-import { Space, TableProps } from 'antd'
+import { Skeleton, Space, TableProps } from 'antd'
 import { useNotify } from 'app/providers/app'
 import { IUsersItems } from 'entities/settings/users-table/model/interface'
 import { INewUserFormArgs } from 'features/settings/new-user/model/interface'
@@ -11,19 +11,42 @@ export const usersTable = () => {
   const { openNotification } = useNotify()
   const [openUser, handleUserOpen] = useToggle()
   const [users, setUsers] = useState([])
+  const [totalUsers, setTotalUsers] = useState(0)
+  const [deleteLoading, setDeleteLoading] = useState(false)
   const [currentUser, setCurrentUser] = useState<INewUserFormArgs | undefined>(undefined)
 
+  const fetchData = async (skip?: number) => {
+    try {
+      const axiosInstance = await getAxiosInstance()
+      const res = await axiosInstance.get('/users', { params: { skip: skip || 0 } })
+      const response = res.data.items.map((item: IUsersItems) => ({
+        key: item.id,
+        name: item.name,
+        email: item.email,
+      }))
+
+      setUsers(response)
+      setTotalUsers(res.data.totals.count || 0)
+    } catch (error) {
+      openNotification('Произошла ошибка при загрузке данных о пользователях')
+    }
+  }
+
   const editUser = (data: INewUserFormArgs & { id: number }) => {
     setCurrentUser(data)
   }
 
   const deleteUser = async (userId: number) => {
+    setDeleteLoading(true)
     try {
       const axiosInstance = await getAxiosInstance()
 
-      await axiosInstance.patch(`/users/${userId}`)
-      openNotification('Пользователь удален')
+      await axiosInstance.patch(`/users/${userId}`, { deleted: true })
+      openNotification('Пользователь удален', 'success')
+      fetchData()
+      setDeleteLoading(false)
     } catch (error) {
+      setDeleteLoading(false)
       openNotification('Что-то пошло не так')
     }
   }
@@ -53,31 +76,27 @@ export const usersTable = () => {
           >
             Редактировать
           </a>
-          <a onClick={() => deleteUser(record.key)}>Удалить</a>
+
+          <a onClick={() => (deleteLoading ? null : deleteUser(record.key))}>
+            {deleteLoading ? 'Загрузка' : 'Удалить'}
+          </a>
         </Space>
       ),
     },
   ]
 
   useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const axiosInstance = await getAxiosInstance()
-        const res = await axiosInstance.get('/users')
-        const response = res.data.items.map((item: IUsersItems) => ({
-          key: item.id,
-          name: item.name,
-          email: item.email,
-        }))
-
-        setUsers(response)
-      } catch (error) {
-        openNotification('Произошла ошибка при загрузке данных о пользователях')
-      }
-    }
-
     fetchData()
   }, [])
 
-  return { users, columns, currentUser, setCurrentUser, openUser, handleUserOpen }
+  return {
+    users,
+    columns,
+    currentUser,
+    setCurrentUser,
+    openUser,
+    handleUserOpen,
+    totalUsers,
+    fetchData,
+  }
 }
diff --git a/src/features/settings/new-user/model/interface.ts b/src/features/settings/new-user/model/interface.ts
@@ -2,6 +2,7 @@ export interface INewUserProps {
   open: boolean
   handleModal: () => void
   item?: INewUserFormArgs
+  refetch: () => void
 }
 
 export interface INewUserFormArgs {

diff --git a/src/features/settings/new-user/new-user.tsx b/src/features/settings/new-user/new-user.tsx
@@ -1,30 +1,36 @@
 import { Button, Drawer, Form, FormProps, Input } from 'antd'
 import { useNotify } from 'app/providers/app'
 import { INewUserFormArgs, INewUserProps } from 'features/settings/new-user/model/interface'
-import React, { FC, useEffect } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import { getAxiosInstance } from 'shared/api/api-query/api-query'
 
-export const NewUser: FC<INewUserProps> = ({ open, handleModal, item }) => {
+export const NewUser: FC<INewUserProps> = ({ open, handleModal, item, refetch }) => {
   const { openNotification } = useNotify()
   const [form] = Form.useForm()
+  const [loading, setLoading] = useState(false)
 
   const onFinish: FormProps<INewUserFormArgs>['onFinish'] = async (data) => {
+    setLoading(true)
     try {
       const axiosInstance = await getAxiosInstance()
-
       if (item && item.id) {
         await axiosInstance.patch(`/users/${item.id}`, data).then(() => {
           openNotification('Пользователь изменен', 'success')
           handleModal()
+          refetch()
+          setLoading(false)
         })
       } else {
         await axiosInstance.post('/users', data).then(() => {
           openNotification('Пользователь создан', 'success')
           handleModal()
+          refetch()
+          setLoading(false)
         })
       }
     } catch (error) {
       openNotification('Что-то пошло не так')
+      setLoading(false)
     }
   }
 
@@ -41,7 +47,7 @@ export const NewUser: FC<INewUserProps> = ({ open, handleModal, item }) => {
         initialValues={{
           name: item?.name || '',
           email: item?.email || '',
-          password: item?.password || '',
+          password: item ? item?.password : undefined,
         }}
         style={{ height: '100%' }}
       >
@@ -64,13 +70,13 @@ export const NewUser: FC<INewUserProps> = ({ open, handleModal, item }) => {
         <Form.Item<INewUserFormArgs>
           label={'Пароль'}
           name={'password'}
-          rules={[{ required: true, message: 'Введите пароль' }]}
+          rules={[{ required: !item, message: 'Введите пароль' }]}
         >
           <Input.Password />
         </Form.Item>
 
         <Form.Item style={{ position: 'absolute', bottom: -10, left: 24 }}>
-          <Button type='primary' htmlType='submit'>
+          <Button type='primary' htmlType='submit' loading={loading}>
             Сохранить
           </Button>
         </Form.Item>

diff --git a/src/pages/settings/ui/users/users.tsx b/src/pages/settings/ui/users/users.tsx
@@ -4,7 +4,16 @@ import { NewUser } from 'features/settings/new-user'
 import { FC } from 'react'
 
 export const Users: FC = () => {
-  const { users, columns, currentUser, openUser, handleUserOpen, setCurrentUser } = usersTable()
+  const {
+    users,
+    columns,
+    fetchData,
+    currentUser,
+    openUser,
+    handleUserOpen,
+    setCurrentUser,
+    totalUsers,
+  } = usersTable()
 
   return (
     <>
@@ -22,14 +31,23 @@ export const Users: FC = () => {
       </Flex>
 
       <Table
+        scroll={{ y: 500 }}
         columns={columns}
         dataSource={users}
         bordered={true}
         showHeader={true}
         tableLayout={'fixed'}
+        pagination={{
+          total: totalUsers,
+        }}
       />
 
-      <NewUser open={openUser} handleModal={handleUserOpen} item={currentUser} />
+      <NewUser
+        open={openUser}
+        handleModal={handleUserOpen}
+        item={currentUser}
+        refetch={fetchData}
+      />
     </>
   )
 }
diff --git a/src/widget/header/header.tsx b/src/widget/header/header.tsx
@@ -14,7 +14,7 @@ export const Header: FC = () => {
       align={'center'}
       style={{
         padding: '1rem',
-        background: '#81DA88',
+        background: '#6ebd74',
         borderBottomLeftRadius: '8px',
         borderBottomRightRadius: '8px',
       }}