Merge pull request #6 from pieceowater-dev/dev

fix: posts
pieceowater-dev · May 7, 2024 · d112ad9 · d112ad9
2 parents 609adf2 + 542aee7
commit d112ad9
Show file tree

Hide file tree

Showing 13 changed files with 301 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>QPay</title>
+    <title>Grands-Pay</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/entities/settings/posts-table/index.ts b/src/entities/settings/posts-table/index.ts
@@ -0,0 +1,3 @@
+import { usePostsTable } from 'entities/settings/posts-table/use-posts-table'
+
+export { usePostsTable }
diff --git a/src/entities/settings/posts-table/model/interface.ts b/src/entities/settings/posts-table/model/interface.ts
@@ -0,0 +1,6 @@
+export interface IPostsResponse {
+  id: number
+  name: string
+  address: string
+  identifier: string
+}
diff --git a/src/entities/settings/posts-table/use-posts-table.tsx b/src/entities/settings/posts-table/use-posts-table.tsx
@@ -0,0 +1,119 @@
+import { Space, TableProps } from 'antd'
+import { useNotify } from 'app/providers/app'
+import { IPostsResponse } from 'entities/settings/posts-table/model/interface'
+import { IPostsTableProps } from 'pages/settings/ui/posts/model/interface'
+import { useEffect, useState } from 'react'
+import { getAxiosInstance } from 'shared/api/api-query/api-query'
+import { useToggle } from 'shared/lib/hooks/use-toggle'
+
+export const usePostsTable = () => {
+  const { openNotification } = useNotify()
+  const [postModal, handlePostModal] = useToggle()
+  const [totalPosts, setTotalPosts] = useState(0)
+  const [posts, setPosts] = useState([])
+  const [deleteLoading, setDeleteLoading] = useState(false)
+  const [stopLoading, setStopLoading] = useState(false)
+  const [currentPost, setCurrentPost] = useState<(IPostsResponse & { id: number }) | undefined>(
+    undefined,
+  )
+
+  const fetchData = async (skip?: number) => {
+    try {
+      const axiosInstance = await getAxiosInstance()
+      const res = await axiosInstance.get('/posts', { params: { skip: skip || 0 } })
+      const response = res.data.items.map((item: IPostsResponse) => ({
+        key: item.id,
+        name: item.name,
+        address: item.address,
+        identifier: item.identifier,
+      }))
+
+      setPosts(response)
+      setTotalPosts(res.data.totals.count || 0)
+    } catch (error) {
+      openNotification('Произошла ошибка при загрузке данных о пользователях')
+    }
+  }
+
+  const deletePost = async (postId: number, stop?: boolean) => {
+    const loading = (state: boolean) => (stop ? setStopLoading(state) : setDeleteLoading(state))
+    loading(true)
+
+    try {
+      const axiosInstance = await getAxiosInstance()
+
+      await axiosInstance.patch(`/posts/${postId}`, stop ? { stopped: true } : { deleted: true })
+      openNotification(`Пост ${stop ? 'приостановлен' : 'удален'}`, 'success')
+      fetchData()
+      loading(false)
+    } catch (error) {
+      loading(false)
+      openNotification('Что-то пошло не так')
+    }
+  }
+
+  const editUser = (data: IPostsResponse & { id: number }) => {
+    setCurrentPost(data)
+  }
+
+  const columns: TableProps<IPostsTableProps>['columns'] = [
+    {
+      title: 'Имя поста',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: 'Адрес',
+      dataIndex: 'address',
+      key: 'address',
+    },
+    {
+      title: 'Индификатор',
+      dataIndex: 'identifier',
+      key: 'identifier',
+    },
+    {
+      title: 'Действие',
+      key: 'action',
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      render: (_, record) => (
+        <Space size='middle'>
+          <a
+            onClick={() => {
+              editUser({
+                name: record.name,
+                address: record.address,
+                identifier: record.identifier,
+                id: record.key,
+              })
+              handlePostModal()
+            }}
+          >
+            Редактировать
+          </a>
+          <a onClick={() => (stopLoading ? null : deletePost(record.key, true))}>
+            {stopLoading ? 'Загрузка' : 'Приостановить'}
+          </a>
+          <a onClick={() => (deleteLoading ? null : deletePost(record.key))}>
+            {deleteLoading ? 'Загрузка' : 'Удалить'}
+          </a>
+        </Space>
+      ),
+    },
+  ]
+
+  useEffect(() => {
+    fetchData()
+  }, [])
+
+  return {
+    postModal,
+    handlePostModal,
+    totalPosts,
+    posts,
+    fetchData,
+    columns,
+    currentPost,
+    setCurrentPost,
+  }
+}
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 { Skeleton, Space, TableProps } from 'antd'
+import { 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'

diff --git a/src/features/settings/new-post/index.ts b/src/features/settings/new-post/index.ts
@@ -0,0 +1,3 @@
+import { NewPost } from 'features/settings/new-post/new-post'
+
+export { NewPost }
diff --git a/src/features/settings/new-post/model/interface.ts b/src/features/settings/new-post/model/interface.ts
@@ -0,0 +1,13 @@
+export interface INewPostProps {
+  open: boolean
+  handeOpen: () => void
+  item?: INewPostFormArgs
+  refetch: () => void
+}
+
+export interface INewPostFormArgs {
+  name: string
+  address: string
+  identifier: string
+  id?: number
+}
diff --git a/src/features/settings/new-post/new-post.tsx b/src/features/settings/new-post/new-post.tsx
@@ -0,0 +1,86 @@
+import { Button, Drawer, Form, FormProps, Input } from 'antd'
+import { useNotify } from 'app/providers/app'
+import { INewPostFormArgs, INewPostProps } from 'features/settings/new-post/model/interface'
+import React, { FC, useEffect, useState } from 'react'
+import { getAxiosInstance } from 'shared/api/api-query/api-query'
+
+export const NewPost: FC<INewPostProps> = ({ open, handeOpen, item, refetch }) => {
+  const { openNotification } = useNotify()
+  const [form] = Form.useForm()
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    form.resetFields()
+  }, [item, open])
+
+  const onFinish: FormProps<INewPostFormArgs>['onFinish'] = async (data) => {
+    setLoading(true)
+    try {
+      const axiosInstance = await getAxiosInstance()
+      if (item && item.id) {
+        await axiosInstance.patch(`/posts/${item.id}`, data).then(() => {
+          openNotification('Пост изменен', 'success')
+          handeOpen()
+          refetch()
+          setLoading(false)
+        })
+      } else {
+        await axiosInstance.post('/posts', data).then(() => {
+          openNotification('Пост создан', 'success')
+          handeOpen()
+          refetch()
+          setLoading(false)
+        })
+      }
+    } catch (error) {
+      openNotification('Что-то пошло не так')
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Drawer title='Создание нового поста' onClose={handeOpen} open={open}>
+      <Form
+        form={form}
+        onFinish={onFinish}
+        layout={'vertical'}
+        initialValues={{
+          name: item?.name || '',
+          address: item?.address || '',
+          identifier: item?.identifier || '',
+        }}
+        style={{ height: '100%' }}
+      >
+        <Form.Item<INewPostFormArgs>
+          label={'Имя поста'}
+          name={'name'}
+          rules={[{ required: true, message: 'Введите имя поста' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item<INewPostFormArgs>
+          label={'Адрес'}
+          name={'address'}
+          rules={[{ required: true, message: 'Введите адрес' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item<INewPostFormArgs>
+          label={'Индификатор'}
+          name={'identifier'}
+          rules={[{ required: true, message: 'Введите Индификатор' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item style={{ position: 'absolute', bottom: -10, left: 24 }}>
+          <Button type='primary' htmlType='submit' loading={loading}>
+            Сохранить
+          </Button>
+        </Form.Item>
+      </Form>
+    </Drawer>
+  )
+}
diff --git a/src/pages/settings/settings.tsx b/src/pages/settings/settings.tsx
@@ -1,10 +1,13 @@
+import { Flex } from 'antd'
+import { Posts } from 'pages/settings/ui/posts'
 import { Users } from 'pages/settings/ui/users'
 import { FC } from 'react'
 
 export const Settings: FC = () => {
   return (
-    <>
+    <Flex gap={'10px'} style={{ flexDirection: 'column' }}>
       <Users />
-    </>
+      <Posts />
+    </Flex>
   )
 }
diff --git a/src/pages/settings/ui/posts/index.ts b/src/pages/settings/ui/posts/index.ts
@@ -0,0 +1,3 @@
+import { Posts } from 'pages/settings/ui/posts/posts'
+
+export { Posts }
diff --git a/src/pages/settings/ui/posts/model/interface.ts b/src/pages/settings/ui/posts/model/interface.ts
@@ -0,0 +1,6 @@
+export interface IPostsTableProps {
+  key: number
+  name: string
+  address: string
+  identifier: string
+}
diff --git a/src/pages/settings/ui/posts/posts.tsx b/src/pages/settings/ui/posts/posts.tsx
@@ -0,0 +1,54 @@
+import { Button, Flex, Table } from 'antd'
+import { usePostsTable } from 'entities/settings/posts-table'
+import { NewPost } from 'features/settings/new-post'
+import { FC } from 'react'
+
+export const Posts: FC = () => {
+  const {
+    handlePostModal,
+    postModal,
+    setCurrentPost,
+    totalPosts,
+    posts,
+    fetchData,
+    columns,
+    currentPost,
+  } = usePostsTable()
+
+  return (
+    <>
+      <Flex gap={'10px'} align={'center'} style={{ marginBottom: '10px' }}>
+        <div style={{ fontSize: '28px' }}>Посты</div>
+        <Button
+          type={'primary'}
+          onClick={() => {
+            setCurrentPost(undefined)
+            handlePostModal()
+          }}
+        >
+          Новый пост
+        </Button>
+      </Flex>
+
+      <Table
+        style={{ minHeight: '500px' }}
+        scroll={{ y: 500 }}
+        columns={columns}
+        dataSource={posts}
+        bordered={true}
+        showHeader={true}
+        tableLayout={'fixed'}
+        pagination={{
+          total: totalPosts,
+        }}
+      />
+
+      <NewPost
+        open={postModal}
+        handeOpen={handlePostModal}
+        refetch={fetchData}
+        item={currentPost}
+      />
+    </>
+  )
+}
diff --git a/src/pages/settings/ui/users/users.tsx b/src/pages/settings/ui/users/users.tsx
@@ -31,6 +31,7 @@ export const Users: FC = () => {
       </Flex>
 
       <Table
+        style={{ minHeight: '500px' }}
         scroll={{ y: 500 }}
         columns={columns}
         dataSource={users}