Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
E
ESYTD
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Дияр Амангельды
ESYTD
Commits
53baecd5
Commit
53baecd5
authored
Jul 24, 2024
by
Merekeyev Dias
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
added requests in apislice
parent
f0caf0ca
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
51 additions
and
19 deletions
+51
-19
src/features/api/apiSlice.tsx
src/features/api/apiSlice.tsx
+33
-5
src/pages/HomePage/HomePage.tsx
src/pages/HomePage/HomePage.tsx
+17
-14
src/pages/HomePage/Homepage.css
src/pages/HomePage/Homepage.css
+1
-0
No files found.
src/features/api/apiSlice.tsx
View file @
53baecd5
...
@@ -3,20 +3,48 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
...
@@ -3,20 +3,48 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
interface
Organizations
{
interface
Organizations
{
id
:
number
;
id
:
number
;
bin
:
string
;
bin
:
string
;
code
:
string
;
organization_
code
:
string
;
name
:
string
;
organization_
name
:
string
;
status
:
string
;
status
:
string
;
host
:
string
;
login
:
string
;
}
}
export
const
apiSlice
=
createApi
({
export
const
apiSlice
=
createApi
({
reducerPath
:
'
api
'
,
reducerPath
:
'
api
'
,
baseQuery
:
fetchBaseQuery
({
baseUrl
:
"
https://669f8d88b132e2c136fe5106.mockapi.io/api/v1
"
}),
baseQuery
:
fetchBaseQuery
({
baseUrl
:
"
https://669f8d88b132e2c136fe5106.mockapi.io/api/v1
"
}),
endpoints
:
(
builder
)
=>
({
endpoints
:
(
builder
)
=>
({
getOrganization
:
builder
.
query
<
Organizations
[],
void
>
({
getOrganization
s
:
builder
.
query
<
Organizations
[],
void
>
({
query
:
()
=>
'
/organizations
'
query
:
()
=>
'
/organizations
'
}),
getOrganization
:
builder
.
query
({
query
:
orgId
=>
`/organizations/
${
orgId
}
`
}),
addNewOrganization
:
builder
.
query
({
query
:
initialOrg
=>
({
url
:
'
/organizations
'
,
method
:
'
POST
'
,
body
:
initialOrg
})
}),
editOrganization
:
builder
.
query
({
query
:
org
=>
({
url
:
`/organizations/
${
org
.
id
}
`
,
method
:
'
PUT
'
,
body
:
org
})
}),
deleteOrganization
:
builder
.
query
({
query
:
orgId
=>
({
url
:
`organizations/
${
orgId
}
`
,
method
:
"
DELETE
"
,
})
})
})
})
})
})
})
export
const
{
useGetOrganizationQuery
}
=
apiSlice
;
export
const
{
\ No newline at end of file
useGetOrganizationsQuery
,
useGetOrganizationQuery
,
useAddNewOrganizationQuery
,
useEditOrganizationQuery
,
useDeleteOrganizationQuery
}
=
apiSlice
;
\ No newline at end of file
src/pages/HomePage/HomePage.tsx
View file @
53baecd5
import
React
from
'
react
'
;
import
React
from
'
react
'
;
import
{
useNavigate
}
from
'
react-router
'
;
import
{
useNavigate
}
from
'
react-router
'
;
import
{
MaterialSymbol
}
from
'
react-material-symbols
'
;
import
{
MaterialSymbol
}
from
'
react-material-symbols
'
;
import
{
Button
,
Pagination
,
Spin
,
Table
}
from
'
antd
'
;
import
{
Button
,
Pagination
,
Sp
ace
,
Sp
in
,
Table
}
from
'
antd
'
;
import
type
{
TableProps
}
from
'
antd
'
;
import
type
{
TableProps
}
from
'
antd
'
;
import
'
./Homepage.css
'
;
import
'
./Homepage.css
'
;
import
{
useGetOrganizationQuery
}
from
'
../../features/api/apiSlice
'
;
import
{
useGetOrganization
s
Query
}
from
'
../../features/api/apiSlice
'
;
interface
DataType
{
interface
DataType
{
id
:
number
;
id
:
number
;
bin
:
string
;
bin
:
string
;
code
:
string
;
organization_
code
:
string
;
name
:
string
;
organization_
name
:
string
;
status
:
string
;
status
:
string
;
host
:
string
;
login
:
string
;
}
}
const
columns
:
TableProps
<
DataType
>
[
'
columns
'
]
=
[
const
columns
:
TableProps
<
DataType
>
[
'
columns
'
]
=
[
...
@@ -28,17 +28,17 @@ const columns: TableProps<DataType>['columns'] = [
...
@@ -28,17 +28,17 @@ const columns: TableProps<DataType>['columns'] = [
},
},
{
{
title
:
"
Код организации
"
,
title
:
"
Код организации
"
,
dataIndex
:
"
code
"
,
dataIndex
:
"
organization_
code
"
,
key
:
"
code
"
key
:
"
code
"
},
},
{
{
title
:
"
Наименование организации
"
,
title
:
"
Наименование организации
"
,
dataIndex
:
"
name
"
,
dataIndex
:
"
organization_
name
"
,
key
:
"
name
"
key
:
"
name
"
},
},
{
{
title
:
"
Адрес системы/хост
"
,
title
:
"
Адрес системы/хост
"
,
dataIndex
:
"
host
"
,
dataIndex
:
""
,
key
:
"
host
"
key
:
"
host
"
},
},
{
{
...
@@ -54,11 +54,14 @@ const columns: TableProps<DataType>['columns'] = [
...
@@ -54,11 +54,14 @@ const columns: TableProps<DataType>['columns'] = [
}
}
},
},
{
{
title
:
"
act
"
,
title
:
"
Действия
"
,
width
:
60
,
width
:
60
,
render
:
(
value
)
=>
{
render
:
(
value
)
=>
{
return
(
return
(
<
Button
onClick=
{
()
=>
console
.
log
(
value
)
}
icon=
{
<
MaterialSymbol
>
delete
</
MaterialSymbol
>
}
/>
<
Space
>
<
Button
onClick=
{
()
=>
console
.
log
(
value
)
}
icon=
{
<
MaterialSymbol
icon=
'visibility'
size=
{
22
}
/>
}
/>
<
Button
onClick=
{
()
=>
console
.
log
(
value
)
}
icon=
{
<
MaterialSymbol
icon=
'delete'
size=
{
22
}
/>
}
/>
</
Space
>
)
)
}
}
}
}
...
@@ -81,7 +84,7 @@ const HomePage: React.FC = () => {
...
@@ -81,7 +84,7 @@ const HomePage: React.FC = () => {
isSuccess
,
isSuccess
,
isError
,
isError
,
error
error
}
=
useGetOrganizationQuery
();
}
=
useGetOrganization
s
Query
();
let
table
;
let
table
;
...
@@ -89,7 +92,7 @@ const HomePage: React.FC = () => {
...
@@ -89,7 +92,7 @@ const HomePage: React.FC = () => {
table
=
<
Spin
/>
table
=
<
Spin
/>
}
else
if
(
isSuccess
)
{
}
else
if
(
isSuccess
)
{
const
dataSource
=
orgs
.
map
((
org
)
=>
({
...
org
,
key
:
org
.
id
}));
const
dataSource
=
orgs
.
map
((
org
)
=>
({
...
org
,
key
:
org
.
id
}));
table
=
<
Table
dataSource=
{
dataSource
}
columns=
{
columns
}
/>
table
=
<
Table
dataSource=
{
dataSource
}
columns=
{
columns
}
pagination=
{
false
}
/>
}
else
if
(
isError
)
{
}
else
if
(
isError
)
{
table
=
<
div
>
{
error
.
toString
()
}
</
div
>
table
=
<
div
>
{
error
.
toString
()
}
</
div
>
}
}
...
@@ -105,9 +108,9 @@ const HomePage: React.FC = () => {
...
@@ -105,9 +108,9 @@ const HomePage: React.FC = () => {
<
div
className=
"data"
>
<
div
className=
"data"
>
{
table
}
{
table
}
</
div
>
</
div
>
{
/*
<div className='pagination-container'>
<
div
className=
'pagination-container'
>
<
Pagination
current=
{
1
}
defaultCurrent=
{
1
}
pageSize=
{
1
}
total=
{
10
}
onChange=
{
handlePaginationChange
}
/>
<
Pagination
current=
{
1
}
defaultCurrent=
{
1
}
pageSize=
{
1
}
total=
{
10
}
onChange=
{
handlePaginationChange
}
/>
</div>
*/
}
</
div
>
</
section
>
</
section
>
</
div
>
</
div
>
);
);
...
...
src/pages/HomePage/Homepage.css
View file @
53baecd5
...
@@ -45,6 +45,7 @@
...
@@ -45,6 +45,7 @@
.data
{
.data
{
flex
:
1
;
flex
:
1
;
overflow-y
:
auto
;
overflow-y
:
auto
;
margin-bottom
:
75px
;
}
}
.data-table
{
.data-table
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment