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
68ea51f6
Commit
68ea51f6
authored
Jul 24, 2024
by
Merekeyev Dias
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
added delete modal
parent
2c8b493e
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
73 additions
and
24 deletions
+73
-24
src/App.tsx
src/App.tsx
+1
-1
src/pages/HomePage/HomePage.tsx
src/pages/HomePage/HomePage.tsx
+72
-23
No files found.
src/App.tsx
View file @
68ea51f6
...
...
@@ -27,7 +27,7 @@ const App: React.FC = () => {
<
Route
element=
{
<
AuthLayout
/>
}
>
<
Route
path=
"/"
element=
{
<
HomePage
/>
}
/>
<
Route
path=
"/add"
element=
{
<
AddPage
/>
}
/>
<
Route
path=
"/edit"
element=
{
<
EditPage
/>
}
/>
<
Route
path=
"/edit
/:id
"
element=
{
<
EditPage
/>
}
/>
<
Route
path=
"/requests"
element=
{
<
RequestPage
/>
}
/>
</
Route
>
</
Routes
>
...
...
src/pages/HomePage/HomePage.tsx
View file @
68ea51f6
import
React
from
'
react
'
;
import
React
,
{
useState
}
from
'
react
'
;
import
{
useNavigate
}
from
'
react-router
'
;
import
{
MaterialSymbol
}
from
'
react-material-symbols
'
;
import
{
Button
,
Space
,
Spin
,
Table
,
Tag
}
from
'
antd
'
;
//Pagination
import
{
Button
,
Pagination
,
Space
,
Spin
,
Table
,
Tag
,
Modal
}
from
'
antd
'
;
import
type
{
TableProps
}
from
'
antd
'
;
import
'
./Homepage.css
'
;
import
{
useGetOrganizationsQuery
}
from
'
../../features/api/apiSlice
'
;
...
...
@@ -29,40 +29,85 @@ const columns: TableProps<DataType>['columns'] = [
{
title
:
"
Код организации
"
,
dataIndex
:
"
organization_code
"
,
key
:
"
organization_
code
"
key
:
"
code
"
},
{
title
:
"
Наименование организации
"
,
dataIndex
:
"
organization_name
"
,
key
:
"
organization_name
"
key
:
"
name
"
},
{
title
:
"
Адрес системы/хост
"
,
dataIndex
:
"
host
"
,
key
:
"
host
"
},
{
title
:
"
Статус
"
,
dataIndex
:
"
status
"
,
key
:
"
status
"
,
render
:
(
_
,
record
)
=>
{
const
color
=
record
.
status
===
'
deleted
'
?
'
red
'
:
record
.
status
===
'
blocked
'
?
'
orange
'
:
'
green
'
;
let
color
=
record
.
status
==
'
0
'
?
'
red
'
:
record
.
status
==
'
1
'
?
'
processing
'
:
'
green
'
;
return
(
<
p
>
<
Tag
color=
{
color
}
style=
{
{
fontSize
:
'
14px
'
}
}
>
{
record
.
status
===
'
deleted
'
?
'
Удален
'
:
record
.
status
===
'
blocked
'
?
'
Заблокирован
'
:
'
А
ктивен
'
}
{
record
.
status
==
'
0
'
?
'
удален
'
:
record
.
status
==
'
1
'
?
'
заблокирован
'
:
'
а
ктивен
'
}
</
Tag
>
);
</
p
>
)
}
},
{
title
:
"
Действия
"
,
width
:
60
,
render
:
(
value
)
=>
{
render
:
(
_
,
record
)
=>
{
return
(
<
Space
>
<
Button
onClick=
{
()
=>
console
.
log
(
value
)
}
icon=
{
<
MaterialSymbol
icon=
'visibility'
size=
{
22
}
/>
}
/>
<
Button
onClick=
{
()
=>
console
.
log
(
value
)
}
icon=
{
<
MaterialSymbol
icon=
'delete'
size=
{
22
}
/>
}
/>
</
Space
>
<
ActionColumn
data=
{
record
}
/>
)
}
}
]
const
ActionColumn
:
React
.
FC
<
{
data
:
any
}
>
=
({
data
})
=>
{
const
[
open
,
setOpen
]
=
useState
(
false
);
const
navigate
=
useNavigate
();
const
showDeleteModal
=
()
=>
{
setOpen
(
true
);
};
const
handleDeleteModalOk
=
()
=>
{
setOpen
(
false
);
};
const
handleDeleteModalCancel
=
()
=>
{
setOpen
(
false
);
};
const
handleEditClick
=
()
=>
{
navigate
(
`/edit/
${
data
.
id
}
`
);
}
];
return
(
<
Space
>
<
Button
onClick=
{
()
=>
handleEditClick
()
}
icon=
{
<
MaterialSymbol
icon=
'visibility'
size=
{
22
}
/>
}
/>
<
Button
onClick=
{
showDeleteModal
}
icon=
{
<
MaterialSymbol
icon=
'delete'
size=
{
22
}
/>
}
/>
<
Modal
open=
{
open
}
title=
{
`Вы уверены в том, что хотите удалить ${data.organization_name}?`
}
footer=
{
()
=>
{
return
<
div
style=
{
{
textAlign
:
'
start
'
,
marginTop
:
'
1rem
'
}
}
>
<
Button
key=
"submit"
type=
"primary"
danger
onClick=
{
handleDeleteModalOk
}
style=
{
{
marginRight
:
'
.5rem
'
}
}
>
Удалить
</
Button
>
<
Button
key=
"back"
onClick=
{
handleDeleteModalCancel
}
>
Назад
</
Button
>
</
div
>;
}
}
/>
</
Space
>
)
}
const
HomePage
:
React
.
FC
=
()
=>
{
const
navigate
=
useNavigate
();
...
...
@@ -71,6 +116,10 @@ const HomePage: React.FC = () => {
navigate
(
"
/add
"
);
};
const
handlePaginationChange
=
(
page
:
number
|
string
|
null
)
=>
{
console
.
log
(
"
Current page:
"
,
page
);
};
const
{
data
:
orgs
=
[],
isLoading
,
...
...
@@ -82,12 +131,12 @@ const HomePage: React.FC = () => {
let
table
;
if
(
isLoading
)
{
table
=
<
Spin
/>
;
table
=
<
Spin
/>
}
else
if
(
isSuccess
)
{
const
dataSource
=
orgs
.
map
((
org
)
=>
({
...
org
,
key
:
org
.
id
}));
table
=
<
Table
dataSource=
{
dataSource
}
columns=
{
columns
}
pagination=
{
false
}
/>
;
table
=
<
Table
dataSource=
{
dataSource
}
columns=
{
columns
}
pagination=
{
false
}
/>
}
else
if
(
isError
)
{
table
=
<
div
>
{
error
.
toString
()
}
</
div
>
;
table
=
<
div
>
{
error
.
toString
()
}
</
div
>
}
return
(
...
...
@@ -101,12 +150,12 @@ const HomePage: React.FC = () => {
<
div
className=
"data"
>
{
table
}
</
div
>
{
/*
<div className='pagination-container'>
<Pagination current={1} defaultCurrent={1} pageSize={1
0} total={orgs.length
} />
</div>
*/
}
<
div
className=
'pagination-container'
>
<
Pagination
current=
{
1
}
defaultCurrent=
{
1
}
pageSize=
{
1
}
total=
{
10
}
onChange=
{
handlePaginationChange
}
/>
</
div
>
</
section
>
</
div
>
);
}
;
}
export
default
HomePage
;
\ No newline at end of file
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