From a46cf1a2007292662a88b4746589ec1207199426 Mon Sep 17 00:00:00 2001 From: sinhnt Date: Fri, 11 Mar 2022 11:09:47 +0700 Subject: [PATCH 01/20] coding manage-player --- src/components/btnCreate/index.tsx | 8 +- src/components/table/Table.tsx | 2 +- src/pages/managePlayer/index.tsx | 216 ++++++++++--------------- src/styles/components/_btn-create.scss | 4 +- src/styles/components/_table.scss | 2 + 5 files changed, 95 insertions(+), 137 deletions(-) diff --git a/src/components/btnCreate/index.tsx b/src/components/btnCreate/index.tsx index ea72b4b..2e7550b 100644 --- a/src/components/btnCreate/index.tsx +++ b/src/components/btnCreate/index.tsx @@ -1,16 +1,16 @@ import React from "react"; -import {Link} from "react-router-dom"; -// import PlusIcon from "../../static/icon/plus.svg"; +import { Link } from "react-router-dom"; +import PlusIcon from "../../static/icon/plus.svg"; interface BtnCreateProps { path: string; content: string; } function BtnCreate(props: BtnCreateProps) { - const {path, content} = props; + const { path, content } = props; return ( - {/* icon */} + icon

{content}

); diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx index 46998ff..4299246 100644 --- a/src/components/table/Table.tsx +++ b/src/components/table/Table.tsx @@ -22,7 +22,7 @@ const TableCustom = (props: TableCustomProps) => { dataSource={data} /> -

Tổng:  {data.length} người chơi

+

Tổng:  {data.length} người chơi

) : ( diff --git a/src/pages/managePlayer/index.tsx b/src/pages/managePlayer/index.tsx index 437e584..b992341 100644 --- a/src/pages/managePlayer/index.tsx +++ b/src/pages/managePlayer/index.tsx @@ -1,141 +1,94 @@ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -import React, { useRef, useState } from 'react' +import React from 'react' import { ContentHeader } from '@app/components' import SearchBox from '@app/components/searchbox/SearchBox' -import TableCustom from '@app/components/table/Table'; -import useOnClickOutside from "@app/hooks/useClickOutside"; -import MoreAction from '@app/components/moreAction/MoreAction'; -import ChangeStatusModal from '@app/components/modal/ChangeStatusPlayer'; -import threeDotIcon from "../../static/icon/threedot.svg"; +import { Table } from 'antd'; +const dataSource = [ + { + key: '1', + AddressWallet: '0x7ef6c419ec...c9ee', + NameInGame: '32', + Nation: 'Việt Nam', + Level: 500, + AcitonLast: '13:00 - 01/01/2022', + Day: '01/01/2022', + Status: true, + }, + { + key: '2', + AddressWallet: '0x7ef6c419ec...c9ee', + NameInGame: '32', + Nation: 'Việt Nam', + Level: 500, + AcitonLast: '13:00 - 01/01/2022', + Day: '01/01/2022', + Status: true, + }, + { + key: '3', + AddressWallet: '0x7ef6c419ec...c9ee', + NameInGame: '32', + Nation: 'Việt Nam', + Level: 500, + AcitonLast: '13:00 - 01/01/2022', + Day: '01/01/2022', + Status: true, + }, + { + key: '4', + AddressWallet: '0x7ef6c419ec...c9ee', + NameInGame: '32', + Nation: 'Việt Nam', + Level: 500, + AcitonLast: '13:00 - 01/01/2022', + Day: '01/01/2022', + Status: false, + }, +]; +const columns = [ + { + title: 'Địa chí ví', + dataIndex: 'AddressWallet', + key: 'AddressWallet', + }, + { + title: 'Tên trong game', + dataIndex: 'NameInGame', + key: 'NameInGame', + }, + { + title: 'Quốc Gia', + dataIndex: 'Nation', + key: 'Nation', + }, + { + title: 'Level Cao nhất', + dataIndex: 'Level', + key: 'Level', + }, + { + title: 'Lần Hoạt động gần nhất', + dataIndex: 'AcitonLast', + key: 'AcitonLast', + }, + { + title: 'Ngày tham gia', + dataIndex: 'Day', + key: 'Day', + }, + { + title: 'Trạng thái', + dataIndex: 'Status', + key: 'Status', + }, +]; -const ManagePlayer = () => { - - const data = [ - { - key: '1', - AddressWallet: '0x7ef6c419ec...c9ee', - NameInGame: '32', - Nation: 'Việt Nam', - Level: 500, - AcitonLast: '13:00 - 01/01/2022', - Day: '01/01/2022', - Status: true, - }, - { - key: '2', - AddressWallet: '0x7ef6c419ec...c9ee', - NameInGame: '32', - Nation: 'Việt Nam', - Level: 500, - AcitonLast: '13:00 - 01/01/2022', - Day: '01/01/2022', - Status: true, - }, - { - key: '3', - AddressWallet: '0x7ef6c419ec...c9ee', - NameInGame: '32', - Nation: 'Việt Nam', - Level: 500, - AcitonLast: '13:00 - 01/01/2022', - Day: '01/01/2022', - Status: true, - }, - { - key: '4', - AddressWallet: '0x7ef6c419ec...c9ee', - NameInGame: '32', - Nation: 'Việt Nam', - Level: 500, - AcitonLast: '13:00 - 01/01/2022', - Day: '01/01/2022', - Status: false, - }, - ]; - - const ref = useRef(null); - const [isShowModal, setIsShowModal] = useState(-1); - useOnClickOutside(ref, () => setIsShowModal(-1)); - const handleShowModal = (key: number) => { - setIsShowModal(key); - }; - const columns = [ - { - title: 'Địa chí ví', - dataIndex: 'AddressWallet', - key: 'AddressWallet', - - }, - { - title: 'Tên trong game', - dataIndex: 'NameInGame', - key: 'NameInGame', - }, - { - title: 'Quốc Gia', - dataIndex: 'Nation', - key: 'Nation', - }, - { - title: 'Level Cao nhất', - dataIndex: 'Level', - key: 'Level', - }, - { - title: 'Lần Hoạt động gần nhất', - dataIndex: 'AcitonLast', - key: 'AcitonLast', - }, - { - title: 'Ngày tham gia', - dataIndex: 'Day', - key: 'Day', - }, - { - title: 'Trạng thái', - dataIndex: 'Status', - key: 'Status', - render: (status: boolean) => (status ?

Đang hoạt động

:

Dừng hoạt động

) - }, - { - title: "", - dataIndex: "key", - render: (key: any) => ( -
handleShowModal(key)}> - icon - {isShowModal === key && ( - - )} -
- ) - } - ] - const [isShowModalDelete, setIsShowModalDelete] = useState(false); - const handleOpenModalDelete = () => { - setIsShowModalDelete(true); - }; - - const handleOk = () => { - setIsShowModalDelete(false); - }; - - const handleCancel = () => { - setIsShowModalDelete(false); - }; +const ManagePlayer = () => { return (
-
- -
@@ -143,11 +96,12 @@ const ManagePlayer = () => {
-
- +
+ + ) } diff --git a/src/styles/components/_btn-create.scss b/src/styles/components/_btn-create.scss index f07c5ef..6851afe 100644 --- a/src/styles/components/_btn-create.scss +++ b/src/styles/components/_btn-create.scss @@ -6,6 +6,8 @@ display: flex; align-items: center; cursor: pointer; + min-width: 170px; + p { margin: 0; padding-left: 5px; @@ -15,4 +17,4 @@ line-height: 20px; color: #ffffff; } -} +} \ No newline at end of file diff --git a/src/styles/components/_table.scss b/src/styles/components/_table.scss index f69326d..398dc9c 100644 --- a/src/styles/components/_table.scss +++ b/src/styles/components/_table.scss @@ -22,3 +22,5 @@ color: #000000; } } + +.table-custom {} \ No newline at end of file From 8d2f922516208bb88f59b0c1313b1e3c20f590ad Mon Sep 17 00:00:00 2001 From: sinhnt Date: Fri, 11 Mar 2022 18:37:52 +0700 Subject: [PATCH 02/20] coding manage-player --- src/pages/detailPlayer/index.tsx | 3 +-- src/utils/types.ts | 6 ++++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/pages/detailPlayer/index.tsx b/src/pages/detailPlayer/index.tsx index 16af32a..d4ecf98 100644 --- a/src/pages/detailPlayer/index.tsx +++ b/src/pages/detailPlayer/index.tsx @@ -1,5 +1,4 @@ -/* eslint-disable prettier/prettier */ -/* eslint-disable react/jsx-no-bind */ + import React from 'react'; import { DataBasicInfo, DataHeaderInfo } from '@app/utils/types'; import { Tabs } from 'antd'; diff --git a/src/utils/types.ts b/src/utils/types.ts index 69fca61..55191b8 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -18,6 +18,12 @@ export interface DataHeaderInfo { nation: string; role: string; } +export interface DataHeaderInfo { + name: string; + address: string; + nation: string; + role: string; +} export interface DataBasicInfo { name: string; address: string; From feb26e624459f9490795d16993cbef74162d994b Mon Sep 17 00:00:00 2001 From: sinhnt Date: Tue, 15 Mar 2022 17:12:52 +0700 Subject: [PATCH 03/20] coding manage player detail --- src/App.tsx | 54 ++++----- src/components/boxComponent/index.tsx | 35 ++++++ src/pages/detailPlayer/BoxDetectError.tsx | 22 ++++ src/pages/detailPlayer/BoxHistoryClaim.tsx | 20 ++++ src/pages/detailPlayer/BoxInfoBasic.tsx | 30 +++-- src/pages/detailPlayer/BoxInfoHero.tsx | 105 ++++++++++++++++++ src/pages/detailPlayer/BoxInfoHistory.tsx | 20 ++++ src/pages/detailPlayer/BoxInfoInGame.tsx | 43 +++++++ src/pages/detailPlayer/BoxInfoItemInGame.tsx | 21 ++++ src/pages/detailPlayer/BoxInfoStoryMode.tsx | 111 +++++++++++++++++++ src/pages/detailPlayer/index.tsx | 26 +++-- src/pages/managePlayer/index.tsx | 2 +- src/styles/components/_index.scss | 3 +- src/styles/components/_tabs.scss | 100 +++++++++++++++++ src/styles/pages/_detail-player.scss | 4 +- src/utils/types.ts | 18 ++- 16 files changed, 550 insertions(+), 64 deletions(-) create mode 100644 src/components/boxComponent/index.tsx create mode 100644 src/pages/detailPlayer/BoxDetectError.tsx create mode 100644 src/pages/detailPlayer/BoxHistoryClaim.tsx create mode 100644 src/pages/detailPlayer/BoxInfoHero.tsx create mode 100644 src/pages/detailPlayer/BoxInfoHistory.tsx create mode 100644 src/pages/detailPlayer/BoxInfoInGame.tsx create mode 100644 src/pages/detailPlayer/BoxInfoItemInGame.tsx create mode 100644 src/pages/detailPlayer/BoxInfoStoryMode.tsx create mode 100644 src/styles/components/_tabs.scss diff --git a/src/App.tsx b/src/App.tsx index 6ba634b..04c2253 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,7 +17,7 @@ import Profile from "@pages/profile/Profile"; import ManagePlayer from './pages/managePlayer'; import PublicRoute from "./routes/PublicRoute"; -// import PrivateRoute from "./routes/PrivateRoute"; +import PrivateRoute from "./routes/PrivateRoute"; import CreateTypeUser from "./pages/createTypeUser"; import DetailUser from "./pages/detailUser"; import ManagerUser from "./pages/managerUser"; @@ -50,33 +50,33 @@ const App = () => { }> } /> - {/* }> */} - }> - } /> - } /> - } - /> - } - /> - } - /> - } /> - } - /> - } /> - } /> - } /> - } /> + }> + }> + } /> + } /> + } + /> + } + /> + } + /> + } /> + } + /> + } /> + } /> + } /> + } /> + - {/* */} ); diff --git a/src/components/boxComponent/index.tsx b/src/components/boxComponent/index.tsx new file mode 100644 index 0000000..e66fb26 --- /dev/null +++ b/src/components/boxComponent/index.tsx @@ -0,0 +1,35 @@ +import React from 'react' + +export interface Info { + name: string; + value: string | number | boolean; +} + +interface BoxComponentProps { + title: string; + listInfo: Info[]; +} + +const BoxComponent = (props: BoxComponentProps) => { + const { title, listInfo } = props + return ( +
+
+

{title}

+
+
+ {listInfo.map((item) => { + return ( +
+

{item.name}

+

{item.value}

+
+ ) + }) + } +
+
+ ) +} + +export default BoxComponent diff --git a/src/pages/detailPlayer/BoxDetectError.tsx b/src/pages/detailPlayer/BoxDetectError.tsx new file mode 100644 index 0000000..87f8f3b --- /dev/null +++ b/src/pages/detailPlayer/BoxDetectError.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import BoxComponent, { Info } from '@app/components/boxComponent' + + + + +const BoxDetectError = () => { + const fakeDataInfoHero: Info[] = + [ + { name: 'Trạng thái hoạt động:', value: true }, + { name: 'Tổng số nghi vấn vị phạm:', value: 100 }, + { name: 'Nghi vấn phát hiện nhiều nhất:', value: 'Claim quá nhiều MXY, Chi tiêu lớn trong game' }, + { name: 'Lần phát hiện gần nhất:', value: '13:00 - 01/01/2022' }, + ] + return ( +
+ +
+ ) +} + +export default BoxDetectError diff --git a/src/pages/detailPlayer/BoxHistoryClaim.tsx b/src/pages/detailPlayer/BoxHistoryClaim.tsx new file mode 100644 index 0000000..011292d --- /dev/null +++ b/src/pages/detailPlayer/BoxHistoryClaim.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import BoxComponent, { Info } from '@app/components/boxComponent' + + + + +const BoxHistoryClaim = () => { + const fakeDataInfoHero: Info[] = + [ + { name: 'Tổng giao dịch thực hiện:', value: '506 lần' }, + { name: 'Khối lượng giao dịch:', value: '1000 MXY' }, + ] + return ( +
+ +
+ ) +} + +export default BoxHistoryClaim diff --git a/src/pages/detailPlayer/BoxInfoBasic.tsx b/src/pages/detailPlayer/BoxInfoBasic.tsx index 652de0f..2c0c034 100644 --- a/src/pages/detailPlayer/BoxInfoBasic.tsx +++ b/src/pages/detailPlayer/BoxInfoBasic.tsx @@ -1,18 +1,18 @@ -import { DataHeaderInfo } from '@app/utils/types' +import { DataBasicInfo } from '@app/utils/types' import React from 'react' import { ReactComponent as EditIcon } from '../../static/icon/edit.svg'; -interface DataHeaderInfoProps { - data: DataHeaderInfo +interface DataBasicInfoProps { + data: DataBasicInfo } -const BoxInfoBasic = (props: DataHeaderInfoProps) => { +const BoxInfoBasic = (props: DataBasicInfoProps) => { const { data } = props return (
-

{data.name}

+

Thông tin cơ bản

Chỉnh sửa

@@ -20,16 +20,24 @@ const BoxInfoBasic = (props: DataHeaderInfoProps) => {
-

Địa chỉ ví:

-

{data.address}

+

Tổng thời gian hoạt động:

+

{data.timeActive}

-

Quốc gia:

-

{data.nation}

+

Lần hoạt động gần nhất:

+

{data.latestInGame}

-

Vai trò:

-

{data.role}

+

Trạng thái hoạt động:

+

{data.statusActive ? 'Đang hoạt động' : 'Không hoạt động'}

+
+
+

Ghi chú:

+

{data.note}

+
+
+

Ngày tham gia:

+

{data.date}

diff --git a/src/pages/detailPlayer/BoxInfoHero.tsx b/src/pages/detailPlayer/BoxInfoHero.tsx new file mode 100644 index 0000000..56fa501 --- /dev/null +++ b/src/pages/detailPlayer/BoxInfoHero.tsx @@ -0,0 +1,105 @@ +/* eslint-disable react/jsx-no-bind */ +import React from 'react' +import BoxComponent, { Info } from '@app/components/boxComponent' +import SearchBox from '@app/components/searchbox/SearchBox' +import { Table } from 'antd'; + +const dataSource = [ + { + key: '1', + Level: '1', + NameInGame: '32', + Nation: 'Việt Nam', + AcitonLast: '13:00 - 01/01/2022', + Day: '01/01/2022', + }, + { + key: '2', + Level: '2', + NameInGame: '32', + Nation: 'Việt Nam', + AcitonLast: '13:00 - 01/01/2022', + Day: '01/01/2022', + }, + { + key: '3', + Level: '3', + NameInGame: '32', + Nation: 'Việt Nam', + AcitonLast: '13:00 - 01/01/2022', + Day: '01/01/2022', + }, + { + key: '4', + Level: '4', + NameInGame: '32', + Nation: 'Việt Nam', + AcitonLast: '13:00 - 01/01/2022', + Day: '01/01/2022', + }, +]; + +const columns = [ + { + title: 'Level', + dataIndex: 'Level', + key: 'Level', + }, + { + title: 'Số sao đạt được', + dataIndex: 'NameInGame', + key: 'NameInGame', + }, + { + title: 'Tổng lần chơi', + dataIndex: 'Nation', + key: 'Nation', + }, + { + title: 'số Token kiếm được', + dataIndex: 'Level', + key: 'Level', + }, + { + title: 'số Gold kiếm được', + dataIndex: 'AcitonLast', + key: 'AcitonLast', + }, + { + title: 'Lần chơi gần nhất', + dataIndex: 'Day', + key: 'Day', + }, +]; + +const BoxInfoHero = () => { + + + const fakeDataInfoHero: Info[] = + [ + { name: 'Số lượng hero:', value: 100 }, + { name: 'Hero có rank cao nhất:', value: 'BE+' }, + { name: 'Giới hạn reward kiếm được 1 ngày:', value: '10000 MXY, 100000 Golds' }, + ] + return ( +
+ +
+

Danh sách hero của người chơi

+
+
+ +
+
+

abc

+
+
+
+ + + + + ) +} + +export default BoxInfoHero diff --git a/src/pages/detailPlayer/BoxInfoHistory.tsx b/src/pages/detailPlayer/BoxInfoHistory.tsx new file mode 100644 index 0000000..32716ea --- /dev/null +++ b/src/pages/detailPlayer/BoxInfoHistory.tsx @@ -0,0 +1,20 @@ +import BoxComponent, { Info } from '@app/components/boxComponent' +import React from 'react' + + + + +const BoxInfoHistory = () => { + const fakeDataInfoHero: Info[] = + [ + { name: 'Tổng giao dịch thực hiện::', value: '506 lần' }, + { name: 'Khối lượng giao dịch:', value: '10000 BUSD, 1000 MXY' }, + ] + return ( +
+ +
+ ) +} + +export default BoxInfoHistory diff --git a/src/pages/detailPlayer/BoxInfoInGame.tsx b/src/pages/detailPlayer/BoxInfoInGame.tsx new file mode 100644 index 0000000..813fe5c --- /dev/null +++ b/src/pages/detailPlayer/BoxInfoInGame.tsx @@ -0,0 +1,43 @@ +import React from 'react' +import { Tabs } from 'antd'; +import BoxInfoHero from './BoxInfoHero'; +import BoxInfoStoryMode from './BoxInfoStoryMode'; +import BoxInfoItemIngame from './BoxInfoItemInGame'; +import BoxInfoHistory from './BoxInfoHistory'; +import BoxHistoryClaim from './BoxHistoryClaim'; +import BoxDetectError from './BoxDetectError'; + +const { TabPane } = Tabs; + +function hanndleChangeTab(key: any) { + console.log(key); +} +const BoxInfoInGame = () => { + + return ( +
+ + + + + + + + + + + + + + + + + + + + +
+ ) +} + +export default BoxInfoInGame diff --git a/src/pages/detailPlayer/BoxInfoItemInGame.tsx b/src/pages/detailPlayer/BoxInfoItemInGame.tsx new file mode 100644 index 0000000..8d1516f --- /dev/null +++ b/src/pages/detailPlayer/BoxInfoItemInGame.tsx @@ -0,0 +1,21 @@ +import BoxComponent, { Info } from '@app/components/boxComponent' +import React from 'react' + + + + +const BoxInfoItemIngame = () => { + const fakeDataBoxInfoStory: Info[] = + [ + { name: 'Số MXY trong game:', value: '10000 MXY' }, + { name: 'Số Gold trong game:', value: '1000000 Gold' }, + { name: 'Số Soul trong game:', value: '100 Soul' }, + ] + return ( +
+ +
+ ) +} + +export default BoxInfoItemIngame diff --git a/src/pages/detailPlayer/BoxInfoStoryMode.tsx b/src/pages/detailPlayer/BoxInfoStoryMode.tsx new file mode 100644 index 0000000..3440040 --- /dev/null +++ b/src/pages/detailPlayer/BoxInfoStoryMode.tsx @@ -0,0 +1,111 @@ +/* eslint-disable react/jsx-no-bind */ +import React from 'react' +import { DatePicker, Table } from 'antd' +import BoxComponent, { Info } from '@app/components/boxComponent' +import SearchBox from '@app/components/searchbox/SearchBox' + +const dataSource = [ + { + key: '1', + Level: '1', + NameInGame: '32', + Nation: 'Việt Nam', + AcitonLast: '13:00 - 01/01/2022', + Day: '01/01/2022', + }, + { + key: '2', + Level: '2', + NameInGame: '32', + Nation: 'Việt Nam', + AcitonLast: '13:00 - 01/01/2022', + Day: '01/01/2022', + }, + { + key: '3', + Level: '3', + NameInGame: '32', + Nation: 'Việt Nam', + AcitonLast: '13:00 - 01/01/2022', + Day: '01/01/2022', + }, + { + key: '4', + Level: '4', + NameInGame: '32', + Nation: 'Việt Nam', + AcitonLast: '13:00 - 01/01/2022', + Day: '01/01/2022', + }, +]; + +const columns = [ + { + title: 'Level', + dataIndex: 'Level', + key: 'Level', + }, + { + title: 'Số sao đạt được', + dataIndex: 'NameInGame', + key: 'NameInGame', + }, + { + title: 'Tổng lần chơi', + dataIndex: 'Nation', + key: 'Nation', + }, + { + title: 'số Token kiếm được', + dataIndex: 'Level', + key: 'Level', + }, + { + title: 'số Gold kiếm được', + dataIndex: 'AcitonLast', + key: 'AcitonLast', + }, + { + title: 'Lần chơi gần nhất', + dataIndex: 'Day', + key: 'Day', + }, +]; + + +const BoxInfoStoryMode = () => { + + function onChange(date: any, dateString: any) { + console.log(date, dateString); + } + + const fakeDataBoxInfoStory: Info[] = + [ + { name: 'Level chơi cao nhất:', value: 506 }, + { name: 'Tổng sao đạt được:', value: 1000 }, + { name: 'Tổng số reward kiếm được:', value: '10000 MXY, 100000 Golds' }, + { name: 'Lần chơi gần nhất:', value: '13:00 - 01/01/2022' }, + ] + return ( +
+ +
+

Danh sách level người chơi đã chơi

+
+
+ +
+
+ + +
+
+
+ + + + + ) +} + +export default BoxInfoStoryMode diff --git a/src/pages/detailPlayer/index.tsx b/src/pages/detailPlayer/index.tsx index d4ecf98..a450339 100644 --- a/src/pages/detailPlayer/index.tsx +++ b/src/pages/detailPlayer/index.tsx @@ -4,6 +4,7 @@ import { DataBasicInfo, DataHeaderInfo } from '@app/utils/types'; import { Tabs } from 'antd'; import BoxInfoBasic from './BoxInfoBasic'; import BoxInfoHeader from './BoxInfoHeader'; +import BoxInfoInGame from './BoxInfoInGame'; const { TabPane } = Tabs; @@ -13,31 +14,32 @@ function callback(key: any) { function DetailPlayer() { - const fakeData1: DataHeaderInfo = + const DataHeaderInfo: DataHeaderInfo = { - name: 'abc', + name: 'Ltrannnn', address: '0x7ef6c419ecabcmdksc9ee', nation: 'Việt Nam', role: 'Người chơi', } - const fakeData2: DataBasicInfo = + const DataBasicInfo: DataBasicInfo = { - name: 'abc', - address: '0x7ef6c419ecabcmdksc9ee', - nation: 'Việt Nam', - role: 'Người chơi', + timeActive: '1200 giờ', + latestInGame: '13:00 - 01/01/2022', + statusActive: true, + note: 'Chưa cập nhật', + date: '01/01/2022', } return (
- -
- + +
+ - + - Content of Tab Pane 2 +
diff --git a/src/pages/managePlayer/index.tsx b/src/pages/managePlayer/index.tsx index b992341..13470f8 100644 --- a/src/pages/managePlayer/index.tsx +++ b/src/pages/managePlayer/index.tsx @@ -96,7 +96,7 @@ const ManagePlayer = () => {
-
+
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss index 5225034..4ddf50f 100644 --- a/src/styles/components/_index.scss +++ b/src/styles/components/_index.scss @@ -1,6 +1,7 @@ +@import "./common"; @import "./more-action"; @import "./table"; @import "./modal"; @import "./empty-data"; @import "./btn-create"; -@import "./common"; +@import "./tabs"; \ No newline at end of file diff --git a/src/styles/components/_tabs.scss b/src/styles/components/_tabs.scss new file mode 100644 index 0000000..c471656 --- /dev/null +++ b/src/styles/components/_tabs.scss @@ -0,0 +1,100 @@ +.tabs { + .tabs--outbox { + .ant-tabs { + &-nav { + margin: 30px 0; + margin-bottom: 10px; + + &::before { + border: none; + } + + &-list { + display: flex; + } + } + + &-tab { + padding: 10px 30px; + border: 1px solid #404B50; + border-radius: 8px; + + &:hover { + color: #404B50; + } + } + + &-tab-active { + background-color: #404B50; + + + .ant-tabs-tab-btn { + color: #fff; + font-weight: 600; + font-size: 16px; + line-height: 20px; + } + } + + &-ink-bar { + background: none; + } + } + + .tabs--inbox { + .ant-tabs { + &-nav { + margin: 0; + + &::before { + border: none; + } + + &-wrap { + display: flex; + justify-content: space-around; + width: 100%; + margin-bottom: 20px; + } + + &-list { + display: flex; + justify-content: space-between; + width: 100%; + } + + &-more { + display: none; + } + } + + &-tab { + padding: 10px 30px; + border: none; + border-radius: 8px; + margin: 0; + + &:hover { + color: #404B50; + } + } + + &-tab-active { + background: none; + + + .ant-tabs-tab-btn { + color: #404B50; + font-weight: 600; + font-size: 16px; + line-height: 20px; + } + } + + &-ink-bar { + border: 1px solid rgba(0, 0, 0, 0.5); + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/pages/_detail-player.scss b/src/styles/pages/_detail-player.scss index d2a01de..04b217a 100644 --- a/src/styles/pages/_detail-player.scss +++ b/src/styles/pages/_detail-player.scss @@ -1,6 +1,8 @@ .detail-player { + margin: 0 30px; + .box-information { - margin: 0 30px; + border: 1px solid #d3d9dc; box-sizing: border-box; border-radius: 8px; diff --git a/src/utils/types.ts b/src/utils/types.ts index 55191b8..f67bd87 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -18,15 +18,11 @@ export interface DataHeaderInfo { nation: string; role: string; } -export interface DataHeaderInfo { - name: string; - address: string; - nation: string; - role: string; -} + export interface DataBasicInfo { - name: string; - address: string; - nation: string; - role: string; -} \ No newline at end of file + timeActive: string; + latestInGame: string; + statusActive: boolean; + note: string; + date: string; +} From 889aa6983397088e1634609c99b9410ce6398ea9 Mon Sep 17 00:00:00 2001 From: sinhnt Date: Wed, 16 Mar 2022 13:48:27 +0700 Subject: [PATCH 04/20] coding manage player detail & merge --- src/pages/detailPlayer/BoxInfoHero.tsx | 18 +-- src/pages/managePlayer/index.tsx | 210 +++++++++++++++---------- src/styles/components/_table.scss | 29 ++++ src/styles/main.scss | 28 ++++ src/styles/pages/_list-user.scss | 26 +-- 5 files changed, 198 insertions(+), 113 deletions(-) diff --git a/src/pages/detailPlayer/BoxInfoHero.tsx b/src/pages/detailPlayer/BoxInfoHero.tsx index 56fa501..148ede0 100644 --- a/src/pages/detailPlayer/BoxInfoHero.tsx +++ b/src/pages/detailPlayer/BoxInfoHero.tsx @@ -41,19 +41,19 @@ const dataSource = [ const columns = [ { - title: 'Level', - dataIndex: 'Level', - key: 'Level', + title: 'Hero ID', + dataIndex: 'heroId', + key: 'heroId', }, { - title: 'Số sao đạt được', - dataIndex: 'NameInGame', - key: 'NameInGame', + title: 'Hero', + dataIndex: 'hero', + key: 'hero', }, { - title: 'Tổng lần chơi', - dataIndex: 'Nation', - key: 'Nation', + title: 'Rank', + dataIndex: 'rank', + key: 'rank', }, { title: 'số Token kiếm được', diff --git a/src/pages/managePlayer/index.tsx b/src/pages/managePlayer/index.tsx index 13470f8..a64825a 100644 --- a/src/pages/managePlayer/index.tsx +++ b/src/pages/managePlayer/index.tsx @@ -1,92 +1,140 @@ -import React from 'react' +import React, { useState } from 'react' import { ContentHeader } from '@app/components' import SearchBox from '@app/components/searchbox/SearchBox' import { Table } from 'antd'; +import ThreeDot, { ItemMoreOption } from '@app/components/btnThreeDot'; +import { useNavigate } from 'react-router-dom'; +import DeleteUserTypeModal from '@app/components/modal/DeleteTypeUser'; +import changeStatusIcon from "../../static/icon/change-status.svg"; +import watchmoreIcon from "../../static/icon/watch-more.svg"; -const dataSource = [ - { - key: '1', - AddressWallet: '0x7ef6c419ec...c9ee', - NameInGame: '32', - Nation: 'Việt Nam', - Level: 500, - AcitonLast: '13:00 - 01/01/2022', - Day: '01/01/2022', - Status: true, - }, - { - key: '2', - AddressWallet: '0x7ef6c419ec...c9ee', - NameInGame: '32', - Nation: 'Việt Nam', - Level: 500, - AcitonLast: '13:00 - 01/01/2022', - Day: '01/01/2022', - Status: true, - }, - { - key: '3', - AddressWallet: '0x7ef6c419ec...c9ee', - NameInGame: '32', - Nation: 'Việt Nam', - Level: 500, - AcitonLast: '13:00 - 01/01/2022', - Day: '01/01/2022', - Status: true, - }, - { - key: '4', - AddressWallet: '0x7ef6c419ec...c9ee', - NameInGame: '32', - Nation: 'Việt Nam', - Level: 500, - AcitonLast: '13:00 - 01/01/2022', - Day: '01/01/2022', - Status: false, - }, -]; -const columns = [ - { - title: 'Địa chí ví', - dataIndex: 'AddressWallet', - key: 'AddressWallet', - }, - { - title: 'Tên trong game', - dataIndex: 'NameInGame', - key: 'NameInGame', - }, - { - title: 'Quốc Gia', - dataIndex: 'Nation', - key: 'Nation', - }, - { - title: 'Level Cao nhất', - dataIndex: 'Level', - key: 'Level', - }, - { - title: 'Lần Hoạt động gần nhất', - dataIndex: 'AcitonLast', - key: 'AcitonLast', - }, - { - title: 'Ngày tham gia', - dataIndex: 'Day', - key: 'Day', - }, - { - title: 'Trạng thái', - dataIndex: 'Status', - key: 'Status', - }, -]; +const ManagePlayer = () => { + const dataSource = [ + { + key: '1', + AddressWallet: '0x7ef6c419ec...c9ee', + NameInGame: '32', + Nation: 'Việt Nam', + Level: 500, + AcitonLast: '13:00 - 01/01/2022', + Day: '01/01/2022', + Status: true, + }, + { + key: '2', + AddressWallet: '0x7ef6c419ec...c9ee', + NameInGame: '32', + Nation: 'Việt Nam', + Level: 500, + AcitonLast: '13:00 - 01/01/2022', + Day: '01/01/2022', + Status: true, + }, + { + key: '3', + AddressWallet: '0x7ef6c419ec...c9ee', + NameInGame: '32', + Nation: 'Việt Nam', + Level: 500, + AcitonLast: '13:00 - 01/01/2022', + Day: '01/01/2022', + Status: true, + }, + { + key: '4', + AddressWallet: '0x7ef6c419ec...c9ee', + NameInGame: '32', + Nation: 'Việt Nam', + Level: 500, + AcitonLast: '13:00 - 01/01/2022', + Day: '01/01/2022', + Status: false, + }, + ]; + const navigate = useNavigate(); + // state for modal detail + const [isShowModalDelete, setIsShowModalDelete] = useState(false); + const handleOpenModalDelete = () => { + setIsShowModalDelete(true); + }; + const handleOk = () => { + setIsShowModalDelete(false); + }; + const handleCancel = () => { + setIsShowModalDelete(false); + }; + const listItem: ItemMoreOption[] = [ + { + key: 'detailInfo', name: 'Xem chi tiết', icon: watchmoreIcon, onClick: () => { + navigate('/nguoi-choi/chi-tiet-nguoi-choi') + } + }, + { key: 'delete', name: 'Đổi Trạng thái', icon: changeStatusIcon, onClick: handleOpenModalDelete } + ] + + const columns = [ + { + title: 'Địa chí ví', + dataIndex: 'AddressWallet', + key: 'AddressWallet', + }, + { + title: 'Tên trong game', + dataIndex: 'NameInGame', + key: 'NameInGame', + }, + { + title: 'Quốc Gia', + dataIndex: 'Nation', + key: 'Nation', + }, + { + title: 'Level Cao nhất', + dataIndex: 'Level', + key: 'Level', + }, + { + title: 'Lần Hoạt động gần nhất', + dataIndex: 'AcitonLast', + key: 'AcitonLast', + }, + { + title: 'Ngày tham gia', + dataIndex: 'Day', + key: 'Day', + }, + { + title: 'Trạng thái', + dataIndex: 'Status', + key: 'Status', + render: (status: boolean) => ( + <> + {status ? ( +
Đang hoạt động
+ ) : ( +
Dừng hoạt động
+ )} + + ) + }, + { + + title: "", + dataIndex: "key", + render: () => + } + /> + } + ] -const ManagePlayer = () => { return (
diff --git a/src/styles/components/_table.scss b/src/styles/components/_table.scss index 398dc9c..a4c53a9 100644 --- a/src/styles/components/_table.scss +++ b/src/styles/components/_table.scss @@ -8,6 +8,34 @@ .table-custom { .ant-table { + .ant-table-thead { + .ant-table-cell { + background: none; + text-align: center; + border-bottom: 1px solid #8C8C8C; + + &::before { + content: none !important; + } + } + } + + .ant-table-tbody { + + .ant-table-cell { + text-align: center; + border: none; + + } + + .ant-table-row { + &:last-child { + .ant-table-cell { + border-bottom: 1px solid #8C8C8C; + } + } + } + } } } @@ -18,6 +46,7 @@ line-height: 20px; letter-spacing: -0.05em; color: #8b9aa2; + span { color: #000000; } diff --git a/src/styles/main.scss b/src/styles/main.scss index 4d1b586..dbabbd5 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -16,3 +16,31 @@ ul { ul li { list-style-type: none; } + +.status-actived { + font-style: normal; + font-weight: bold; + font-size: 10px; + line-height: 13px; + color: #187c0a; + background: #93e088; + border-radius: 20px; + padding: 5px 10px; + text-align: center; +} + +.status-not-active { + font-style: normal; + font-weight: bold; + font-size: 10px; + line-height: 13px; + color: #969117; + background: #ffdc61; + border-radius: 20px; + padding: 5px 10px; + text-align: center; +} + +.content-wrapper { + background-color: #ffffff !important; +} \ No newline at end of file diff --git a/src/styles/pages/_list-user.scss b/src/styles/pages/_list-user.scss index 675f737..ea7ed53 100644 --- a/src/styles/pages/_list-user.scss +++ b/src/styles/pages/_list-user.scss @@ -3,30 +3,10 @@ margin-top: 20px; display: flex; align-items: center; + &__left { margin-right: 20px; } } - .status-actived { - font-style: normal; - font-weight: bold; - font-size: 10px; - line-height: 13px; - color: #187c0a; - background: #93e088; - border-radius: 20px; - padding: 5px 10px; - text-align: center; - } - .status-not-active { - font-style: normal; - font-weight: bold; - font-size: 10px; - line-height: 13px; - color: #969117; - background: #ffdc61; - border-radius: 20px; - padding: 5px 10px; - text-align: center; - } -} + +} \ No newline at end of file From b536afdaf25318e609c4e3f784b88087a8b6b16c Mon Sep 17 00:00:00 2001 From: sinhnt Date: Fri, 18 Mar 2022 13:55:21 +0700 Subject: [PATCH 05/20] coding manage player --- src/components/modal/DetailErrorModal.tsx | 36 ++++ src/pages/detailPlayer/BoxDetectError.tsx | 186 ++++++++++++++++++- src/pages/detailPlayer/BoxHistoryClaim.tsx | 83 ++++++++- src/pages/detailPlayer/BoxInfoHero.tsx | 158 +++++++++++++--- src/pages/detailPlayer/BoxInfoHistory.tsx | 135 +++++++++++++- src/pages/detailPlayer/BoxInfoItemInGame.tsx | 75 ++++++++ src/pages/listUsers/index.tsx | 60 +++--- src/styles/components/_tabs.scss | 1 - src/styles/main.scss | 16 ++ 9 files changed, 689 insertions(+), 61 deletions(-) create mode 100644 src/components/modal/DetailErrorModal.tsx diff --git a/src/components/modal/DetailErrorModal.tsx b/src/components/modal/DetailErrorModal.tsx new file mode 100644 index 0000000..bb76f0d --- /dev/null +++ b/src/components/modal/DetailErrorModal.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import { Modal, Button } from "antd"; + +interface propsDeleteModal { + isModalVisible: boolean; + handleOk?: () => void; + handleCancel?: () => void; +} +const DetailErrorModal = (props: propsDeleteModal) => { + + const { isModalVisible, handleOk, handleCancel } = props; + return ( + +
+

Chi tiết nghi vấn

+

abc

+
+
+ + +
+ + ); +}; + +export default DetailErrorModal; diff --git a/src/pages/detailPlayer/BoxDetectError.tsx b/src/pages/detailPlayer/BoxDetectError.tsx index 87f8f3b..e092639 100644 --- a/src/pages/detailPlayer/BoxDetectError.tsx +++ b/src/pages/detailPlayer/BoxDetectError.tsx @@ -1,10 +1,181 @@ -import React from 'react' +import React, { useState } from 'react' +import { useNavigate } from 'react-router-dom'; import BoxComponent, { Info } from '@app/components/boxComponent' +import { DatePicker, Table } from 'antd' +import ThreeDot, { ItemMoreOption } from '@app/components/btnThreeDot'; +import DetailErrorModal from '@app/components/modal/DetailErrorModal'; +import watchmoreIcon from "../../static/icon/watch-more.svg"; +import changeStatusIcon from "../../static/icon/change-status.svg"; - +const { RangePicker } = DatePicker; const BoxDetectError = () => { + + const navigate = useNavigate(); + // state for modal detail + const [isShowModal, setIsShowModal] = useState(); + const handleOpenModal = (value?: string) => { + setIsShowModal(value); + }; + const handleOk = () => { + setIsShowModal(''); + }; + const handleCancel = () => { + setIsShowModal(''); + }; + + const listItem: ItemMoreOption[] = [ + { + key: 'detailError', name: 'Xem chi tiết', icon: watchmoreIcon, onClick: handleOpenModal + }, + { + key: 'editInfo', name: 'Xem Lịch sử thay đổi', icon: watchmoreIcon, onClick: () => { + navigate('/nguoi-dung/chi-tiet-nguoi-dung') + } + }, + { key: 'resetPass', name: 'Cấp mật khẩu', icon: '', onClick: handleOpenModal }, + { + name: 'Đổi Trạng thái', icon: changeStatusIcon, onClick: () => { + navigate('/nguoi-dung/chi-tiet-nguoi-dung') + } + }, + ] + + const dataSource = [ + { + key: '1', + numberKey: '#001', + title: ' Kiếm quá nhiều MXY', + date: '13:00 - 01/01/2022', + confirmSolution: 'notConfirm', + statusSolution: false, + action: '', + note: 'Chờ đánh giá', + lastUpdate: '13:00 - 01/01/2022, Longtt', + + }, + { + key: '2', + numberKey: '#002', + title: ' Claim quá nhiều MXY', + date: '13:00 - 01/01/2022', + confirmSolution: 'notConfirm', + statusSolution: false, + action: '', + note: 'An toàn', + lastUpdate: '13:00 - 01/01/2022, Longtt', + }, + { + key: '3', + numberKey: '#003', + title: ' Kiếm quá nhiều Gold', + date: '13:00 - 01/01/2022', + confirmSolution: 'bug', + statusSolution: true, + action: 'Đã cảnh Báo user', + note: '', + lastUpdate: '13:00 - 01/01/2022, Longtt', + }, + { + key: '4', + numberKey: '#004', + title: ' Chi tiêu quá nhiều', + date: '13:00 - 01/01/2022', + confirmSolution: 'bug', + statusSolution: true, + action: 'đã fix bug #1234', + note: '', + lastUpdate: '13:00 - 01/01/2022, Longtt', + }, + { + key: '5', + numberKey: '#005', + title: ' Đạt level cao ', + date: '13:00 - 01/01/2022', + confirmSolution: 'clear', + statusSolution: true, + action: '', + note: 'An toàn', + lastUpdate: '13:00 - 01/01/2022, Longtt', + }, + ]; + + const columns = [ + { + title: 'Mã nghi vấn', + dataIndex: 'numberKey', + key: 'numberKey', + }, + { + title: 'Nghi vấn', + dataIndex: 'title', + key: 'title', + }, + { + title: 'Thời gian phát hiện', + dataIndex: 'date', + key: 'date', + }, + { + title: 'đánh giá nghi vấn', + dataIndex: 'confirmSolution', + key: 'confirmSolution', + render: (event: string) => { + if (event === 'notConfirm') { + return
Chưa đánh giá
+ } + if (event === 'bug') { + return
Chưa đánh giá
+ } + return
An toàn
+ + }, + + }, + { + title: 'trạng thái xử lí', + dataIndex: 'statusSolution', + key: 'statusSolution', + render: (event: boolean) => { + if (event) { + return
Đã xử lí
+ } + return
Chưa xử lí
+ + }, + }, + { + title: 'Phương án xử lí', + dataIndex: 'action', + key: 'action', + }, + { + title: 'Ghi chú', + dataIndex: 'note', + key: 'note', + }, + { + title: 'Lần Cuối sửa', + dataIndex: 'lastUpdate', + key: 'lastUpdate', + }, + { + title: "", + dataIndex: "key", + render: () => + + + } + /> + } + ]; + const fakeDataInfoHero: Info[] = [ { name: 'Trạng thái hoạt động:', value: true }, @@ -15,6 +186,17 @@ const BoxDetectError = () => { return (
+
+

Danh sách nghi vấn vi phạm của người chơi

+
+
+ +
+
+
+ + + ) } diff --git a/src/pages/detailPlayer/BoxHistoryClaim.tsx b/src/pages/detailPlayer/BoxHistoryClaim.tsx index 011292d..e175bf1 100644 --- a/src/pages/detailPlayer/BoxHistoryClaim.tsx +++ b/src/pages/detailPlayer/BoxHistoryClaim.tsx @@ -1,10 +1,80 @@ import React from 'react' import BoxComponent, { Info } from '@app/components/boxComponent' +import { DatePicker, Table } from 'antd' - +const { RangePicker } = DatePicker; const BoxHistoryClaim = () => { + + const dataSource = [ + { + key: '1', + event: 'Deposit', + totalToken: '250 MXY', + transactionHash: '0x7ca7e8...572af33f', + date: '13:00 - 01/01/2022' + }, + { + key: '2', + event: 'Deposit', + totalToken: '250 MXY', + transactionHash: '0x7ca7e8...572af33f', + date: '13:00 - 01/01/2022' + }, + { + key: '3', + event: 'Deposit', + totalToken: '250 MXY', + transactionHash: '0x7ca7e8...572af33f', + date: '13:00 - 01/01/2022' + }, + { + key: '4', + event: 'Claim', + totalToken: '250 MXY', + transactionHash: '0x7ca7e8...572af33f', + date: '13:00 - 01/01/2022' + }, + { + key: '5', + event: 'Claim', + totalToken: '250 MXY', + transactionHash: '0x7ca7e8...572af33f', + date: '13:00 - 01/01/2022' + }, + ]; + + const columns = [ + { + title: 'Sự kiện', + dataIndex: 'event', + key: 'event', + render: (event: string) => { + if (event === 'Deposit') { + return
Deposit
+ } + return
Claim
+ + }, + }, + { + title: 'Tổng Số Token', + dataIndex: 'totalToken', + key: 'totalToken', + }, + { + title: 'Mã Giao Dịch', + dataIndex: 'transactionHash', + key: 'transactionHash', + }, + { + title: 'Ngày', + dataIndex: 'date', + key: 'date', + }, + ]; + const fakeDataInfoHero: Info[] = [ { name: 'Tổng giao dịch thực hiện:', value: '506 lần' }, @@ -13,6 +83,17 @@ const BoxHistoryClaim = () => { return (
+
+

Danh sách giao dịch của người chơi

+
+
+ +
+
+
+ + + ) } diff --git a/src/pages/detailPlayer/BoxInfoHero.tsx b/src/pages/detailPlayer/BoxInfoHero.tsx index 148ede0..934ae00 100644 --- a/src/pages/detailPlayer/BoxInfoHero.tsx +++ b/src/pages/detailPlayer/BoxInfoHero.tsx @@ -7,35 +7,101 @@ import { Table } from 'antd'; const dataSource = [ { key: '1', - Level: '1', - NameInGame: '32', - Nation: 'Việt Nam', - AcitonLast: '13:00 - 01/01/2022', - Day: '01/01/2022', + heroId: '#1000', + hero: 'Sabe', + rank: 'BE+', + level: '1,250', + levelEvolve: '10', + bp: '1,000,000', + attack: '1,000,000', + hp: '1,000,000', + speed: '1,000,000', + energy: '1,000,000', + status: true, }, { key: '2', - Level: '2', - NameInGame: '32', - Nation: 'Việt Nam', - AcitonLast: '13:00 - 01/01/2022', - Day: '01/01/2022', + heroId: '#1000', + hero: 'Sabe', + rank: 'BE+', + level: '1,250', + levelEvolve: '10', + bp: '1,000,000', + attack: '1,000,000', + hp: '1,000,000', + speed: '1,000,000', + energy: '1,000,000', + status: true, }, { key: '3', - Level: '3', - NameInGame: '32', - Nation: 'Việt Nam', - AcitonLast: '13:00 - 01/01/2022', - Day: '01/01/2022', + heroId: '#1000', + hero: 'Sabe', + rank: 'BE+', + level: '1,250', + levelEvolve: '10', + bp: '1,000,000', + attack: '1,000,000', + hp: '1,000,000', + speed: '1,000,000', + energy: '1,000,000', + status: true, }, { key: '4', - Level: '4', - NameInGame: '32', - Nation: 'Việt Nam', - AcitonLast: '13:00 - 01/01/2022', - Day: '01/01/2022', + heroId: '#1000', + hero: 'Sabe', + rank: 'BE+', + level: '1,250', + levelEvolve: '10', + bp: '1,000,000', + attack: '1,000,000', + hp: '1,000,000', + speed: '1,000,000', + energy: '1,000,000', + status: false, + }, + { + key: '5', + heroId: '#1000', + hero: 'Sabe', + rank: 'BE+', + level: '1,250', + levelEvolve: '10', + bp: '1,000,000', + attack: '1,000,000', + hp: '1,000,000', + speed: '1,000,000', + energy: '1,000,000', + status: false, + }, + { + key: '6', + heroId: '#1000', + hero: 'Sabe', + rank: 'BE+', + level: '1,250', + levelEvolve: '10', + bp: '1,000,000', + attack: '1,000,000', + hp: '1,000,000', + speed: '1,000,000', + energy: '1,000,000', + status: false, + }, + { + key: '7', + heroId: '#1000', + hero: 'Sabe', + rank: 'BE+', + level: '1,250', + levelEvolve: '10', + bp: '1,000,000', + attack: '1,000,000', + hp: '1,000,000', + speed: '1,000,000', + energy: '1,000,000', + status: false, }, ]; @@ -56,19 +122,53 @@ const columns = [ key: 'rank', }, { - title: 'số Token kiếm được', - dataIndex: 'Level', - key: 'Level', + title: 'Level', + dataIndex: 'level', + key: 'level', + }, + { + title: 'Level Evolve', + dataIndex: 'levelEvolve', + key: 'LevelEvolve', + }, + { + title: 'BP', + dataIndex: 'bp', + key: 'bp', + }, + { + title: 'Attack', + dataIndex: 'attack', + key: 'attack', + }, + { + title: 'HP', + dataIndex: 'hp', + key: 'hp', + }, + { + title: 'Speed', + dataIndex: 'speed', + key: 'speed', }, { - title: 'số Gold kiếm được', - dataIndex: 'AcitonLast', - key: 'AcitonLast', + title: 'Energy', + dataIndex: 'energy', + key: 'energy', }, { - title: 'Lần chơi gần nhất', - dataIndex: 'Day', - key: 'Day', + title: 'Trạng thái', + dataIndex: 'status', + key: 'status', + render: (status: boolean) => ( + <> + {status ? ( +
Đang chơi
+ ) : ( +
Đang bán
+ )} + + ) }, ]; diff --git a/src/pages/detailPlayer/BoxInfoHistory.tsx b/src/pages/detailPlayer/BoxInfoHistory.tsx index 32716ea..0d6c7c1 100644 --- a/src/pages/detailPlayer/BoxInfoHistory.tsx +++ b/src/pages/detailPlayer/BoxInfoHistory.tsx @@ -1,10 +1,132 @@ import BoxComponent, { Info } from '@app/components/boxComponent' +import { DatePicker, Table } from 'antd' import React from 'react' - +const { RangePicker } = DatePicker; const BoxInfoHistory = () => { + + const dataSource = [ + { + key: '1', + event: 'buy', + itemName: 'Deluxe Chest', + codeHero: '', + level: '', + price: '250 BUSD', + from: '0x7ca7e8...5e08f33f', + to: '0x7ca7e8...5e08f33f', + transactionHash: '0x7ca7e8...572af33f', + date: '13:00 - 01/01/2022' + }, + { + key: '2', + event: 'buy', + itemName: 'Starter Chest', + codeHero: '', + level: '', + price: '250 BUSD', + from: '0x7ca7e8...5e08f33f', + to: '0x7ca7e8...5e08f33f', + transactionHash: '0x7ca7e8...572af33f', + date: '13:00 - 01/01/2022' + }, + { + key: '3', + event: 'buy', + itemName: 'Zigu', + codeHero: '#1001', + level: '10', + price: '250 BUSD', + from: '0x7ca7e8...5e08f33f', + to: '0x7ca7e8...5e08f33f', + transactionHash: '0x7ca7e8...572af33f', + date: '13:00 - 01/01/2022' + }, + { + key: '4', + event: 'sell', + itemName: 'Zogu', + codeHero: '#1001', + level: '10', + price: '250 BUSD', + from: '0x7ca7e8...5e08f33f', + to: '0x7ca7e8...5e08f33f', + transactionHash: '0x7ca7e8...572af33f', + date: '13:00 - 01/01/2022' + }, + { + key: '5', + event: 'claim', + itemName: '', + codeHero: '', + level: '', + price: '250 MXY', + from: '0x7ca7e8...5e08f33f', + to: '0x7ca7e8...5e08f33f', + transactionHash: '0x7ca7e8...572af33f', + date: '13:00 - 01/01/2022' + }, + ]; + + const columns = [ + { + title: 'Sự kiện', + dataIndex: 'event', + key: 'event', + render: (event: string) => { + if (event === 'buy') { + return
Mua
+ } if (event === 'sell') { + return
Bán
+ } + return
Claim
+ + }, + }, + { + title: 'Vật Phẩm', + dataIndex: 'itemName', + key: 'itemName', + }, + { + title: 'Mã Hero', + dataIndex: 'codeHero', + key: 'codeHero', + }, + { + title: 'Level', + dataIndex: 'level', + key: 'level', + }, + { + title: 'Giá', + dataIndex: 'price', + key: 'price', + }, + { + title: 'Từ', + dataIndex: 'from', + key: 'from', + }, + { + title: 'Đến', + dataIndex: 'to', + key: 'to', + }, + { + title: 'Mã Giao Dịch', + dataIndex: 'transactionHash', + key: 'transactionHash', + }, + { + title: 'Ngày', + dataIndex: 'date', + key: 'date', + }, + ]; + const fakeDataInfoHero: Info[] = [ { name: 'Tổng giao dịch thực hiện::', value: '506 lần' }, @@ -13,6 +135,17 @@ const BoxInfoHistory = () => { return (
+
+

Danh sách giao dịch của người chơi

+
+
+ +
+
+
+ + + ) } diff --git a/src/pages/detailPlayer/BoxInfoItemInGame.tsx b/src/pages/detailPlayer/BoxInfoItemInGame.tsx index 8d1516f..e8502f9 100644 --- a/src/pages/detailPlayer/BoxInfoItemInGame.tsx +++ b/src/pages/detailPlayer/BoxInfoItemInGame.tsx @@ -1,10 +1,75 @@ import BoxComponent, { Info } from '@app/components/boxComponent' +import { Table } from 'antd' import React from 'react' const BoxInfoItemIngame = () => { + + const dataSource = [ + { + key: '1', + itemName: 'Soul', + level: '1', + amount: '10', + }, + { + key: '2', + itemName: 'Soul', + level: '1', + amount: '10', + }, + { + key: '3', + itemName: 'Soul', + level: '1', + amount: '10', + }, + { + key: '4', + itemName: 'Soul', + level: '1', + amount: '10', + }, + { + key: '5', + itemName: 'Soul', + level: '1', + amount: '10', + }, + { + key: '6', + itemName: 'Soul', + level: '1', + amount: '10', + }, + { + key: '7', + itemName: 'Soul', + level: '1', + amount: '10', + }, + ]; + + const columns = [ + { + title: 'Vật Phẩm', + dataIndex: 'itemName', + key: 'itemName', + }, + { + title: 'Level', + dataIndex: 'level', + key: 'level', + }, + { + title: 'Số lượng', + dataIndex: 'amount', + key: 'amount', + }, + ]; + const fakeDataBoxInfoStory: Info[] = [ { name: 'Số MXY trong game:', value: '10000 MXY' }, @@ -14,6 +79,16 @@ const BoxInfoItemIngame = () => { return (
+
+
+
+

abc

+
+
+
+ + + ) } diff --git a/src/pages/listUsers/index.tsx b/src/pages/listUsers/index.tsx index a379db8..a2d20d6 100644 --- a/src/pages/listUsers/index.tsx +++ b/src/pages/listUsers/index.tsx @@ -1,12 +1,12 @@ /* eslint-disable react/react-in-jsx-scope */ /* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable react/jsx-no-bind */ -import {ContentHeader} from "@components"; +import { ContentHeader } from "@components"; import TableCustom from "@app/components/table/Table"; import SearchBox from "@app/components/searchbox/SearchBox"; import BtnCreate from "@app/components/btnCreate"; -import {DataListUserProp} from "@app/utils/types"; -import {Select} from "antd"; +import { DataListUserProp } from "@app/utils/types"; +import { Select } from "antd"; import ThreeDot, { ItemMoreOption } from "@app/components/btnThreeDot"; import { useNavigate } from "react-router-dom"; import DeleteUserModal from "@app/components/modal/DeleteUser"; @@ -18,7 +18,7 @@ import deleteIcon from "../../static/icon/delete.svg"; import resetPassIcon from "../../static/icon/reset-pass.svg"; import changeStatusIcon from "../../static/icon/change-status.svg"; -const {Option} = Select; +const { Option } = Select; const ListUser = () => { function handleChange(value: string) { @@ -66,19 +66,25 @@ const ListUser = () => { }; // status warning change password -const listItem: ItemMoreOption[] = [ - {key: 'detailInfo' ,name: 'Xem chi tiết', icon: watchmoreIcon, onClick: () => { - navigate('/nguoi-dung/chi-tiet-nguoi-dung') - }}, - {key: 'editInfo', name: 'Chỉnh sửa', icon: editIcon, onClick: () => { - navigate('/nguoi-dung/chi-tiet-nguoi-dung') - }}, - {key: 'resetPass', name: 'Cấp mật khẩu', icon: resetPassIcon, onClick: handleOpenModal}, - {name: 'Đổi Trạng thái', icon: changeStatusIcon, onClick: () => { - navigate('/nguoi-dung/chi-tiet-nguoi-dung') - }}, - {key: 'delete',name: 'Xóa', icon: deleteIcon, onClick: handleOpenModal} -] + const listItem: ItemMoreOption[] = [ + { + key: 'detailInfo', name: 'Xem chi tiết', icon: watchmoreIcon, onClick: () => { + navigate('/nguoi-dung/chi-tiet-nguoi-dung') + } + }, + { + key: 'editInfo', name: 'Chỉnh sửa', icon: editIcon, onClick: () => { + navigate('/nguoi-dung/chi-tiet-nguoi-dung') + } + }, + { key: 'resetPass', name: 'Cấp mật khẩu', icon: resetPassIcon, onClick: handleOpenModal }, + { + name: 'Đổi Trạng thái', icon: changeStatusIcon, onClick: () => { + navigate('/nguoi-dung/chi-tiet-nguoi-dung') + } + }, + { key: 'delete', name: 'Xóa', icon: deleteIcon, onClick: handleOpenModal } + ] const columns = [ { title: "Họ và tên", @@ -113,21 +119,21 @@ const listItem: ItemMoreOption[] = [ { title: "", dataIndex: "key", - render: () => + render: () => - + - - } - /> + /> + + } + /> } ]; return ( @@ -149,7 +155,7 @@ const listItem: ItemMoreOption[] = [
diff --git a/src/styles/components/_tabs.scss b/src/styles/components/_tabs.scss index c471656..c038e7f 100644 --- a/src/styles/components/_tabs.scss +++ b/src/styles/components/_tabs.scss @@ -3,7 +3,6 @@ .ant-tabs { &-nav { margin: 30px 0; - margin-bottom: 10px; &::before { border: none; diff --git a/src/styles/main.scss b/src/styles/main.scss index dbabbd5..06a30c5 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -41,6 +41,22 @@ ul li { text-align: center; } +.status-error { + font-style: normal; + font-weight: bold; + font-size: 10px; + line-height: 13px; + color: #7C330A; + background: #FF7875; + border-radius: 20px; + padding: 5px 10px; + text-align: center; +} + .content-wrapper { background-color: #ffffff !important; +} + +.ant-modal-mask { + background-color: rgba(196, 196, 196, 0.6) !important; } \ No newline at end of file From ee12b5aa42d5810a8e4c2ea31d52aef8b7bb1398 Mon Sep 17 00:00:00 2001 From: sinhnt Date: Fri, 18 Mar 2022 14:00:32 +0700 Subject: [PATCH 06/20] coding manage player & merge --- .env.dev | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.env.dev b/.env.dev index 2613dc0..04d4634 100644 --- a/.env.dev +++ b/.env.dev @@ -1,2 +1,2 @@ NODE_ENV=development -REACT_APP_GATEKEEPER_URL=https://api-cms.metaxy.game/api/docs/ \ No newline at end of file +REACT_APP_GATEKEEPER_URL=https://api-cms.metaxy.game/ \ No newline at end of file From 6c5be5eaab82de3da1eaf6e2279c2a47ad7b900a Mon Sep 17 00:00:00 2001 From: sinhnt Date: Mon, 21 Mar 2022 10:21:59 +0700 Subject: [PATCH 07/20] coding manage player --- src/components/modal/DetailErrorModal.tsx | 46 ++++- src/components/modal/EditErrorModal.tsx | 74 ++++++++ src/pages/detail-player/BoxDetectError.tsx | 11 +- src/pages/detailPlayer/BoxDetectError.tsx | 206 +++++++++++++++++++++ src/pages/list-bug-report/index.tsx | 40 ++-- src/styles/components/_modal.scss | 56 ++++++ src/styles/main.scss | 2 +- 7 files changed, 407 insertions(+), 28 deletions(-) create mode 100644 src/components/modal/EditErrorModal.tsx create mode 100644 src/pages/detailPlayer/BoxDetectError.tsx diff --git a/src/components/modal/DetailErrorModal.tsx b/src/components/modal/DetailErrorModal.tsx index bb76f0d..c231ccb 100644 --- a/src/components/modal/DetailErrorModal.tsx +++ b/src/components/modal/DetailErrorModal.tsx @@ -20,12 +20,50 @@ const DetailErrorModal = (props: propsDeleteModal) => { width={450} >
-

Chi tiết nghi vấn

-

abc

+

Chi tiết nghi vấn

+

Thông tin cơ bản

+
+

Tên in-game:

+

Ltrannnn

+
+
+

Địa chỉ ví:

+

0x7ef6c419ecabcmdksc9ee

+
+
+

Trạng thái:

+

Đang hoạt động

+
+

Chi tiết

+
+

Mã nghi vấn:

+

#001

+
+
+

Nghi vấn:

+

Chi tiêu nhiều trên 1 giao dịch

+
+
+

Thời gian phát hiện:

+

13:00 - 01/01/2022

+
+
+

Giá trị giao dịch:

+

100000 MXY

+
+
+

Đánh giá nghi vấn:

+

0x7ca7e8...572af33f

+
+
+

Lần cuối sửa:

+

Chưa cập nhật

+
+
- - +
diff --git a/src/components/modal/EditErrorModal.tsx b/src/components/modal/EditErrorModal.tsx new file mode 100644 index 0000000..e512419 --- /dev/null +++ b/src/components/modal/EditErrorModal.tsx @@ -0,0 +1,74 @@ +import React from "react"; +import { Modal, Button } from "antd"; + +interface propsDeleteModal { + isModalVisible: boolean; + handleOk?: () => void; + handleCancel?: () => void; +} +const EditErrorModal = (props: propsDeleteModal) => { + + const { isModalVisible, handleOk, handleCancel } = props; + return ( + +
+

Chỉnh sửa nghi vấn

+

Thông tin cơ bản

+
+

Tên in-game:

+

Ltrannnn

+
+
+

Địa chỉ ví:

+

0x7ef6c419ecabcmdksc9ee

+
+
+

Trạng thái:

+

Đang hoạt động

+
+

Chi tiết

+
+

Mã nghi vấn:

+

#001

+
+
+

Nghi vấn:

+

Chi tiêu nhiều trên 1 giao dịch

+
+
+

Thời gian phát hiện:

+

13:00 - 01/01/2022

+
+
+

Giá trị giao dịch:

+

100000 MXY

+
+
+

Đánh giá nghi vấn:

+

0x7ca7e8...572af33f

+
+
+

Lần cuối sửa:

+

Chưa cập nhật

+
+ +
+
+ + +
+ + ); +}; + +export default EditErrorModal; diff --git a/src/pages/detail-player/BoxDetectError.tsx b/src/pages/detail-player/BoxDetectError.tsx index e092639..75c4eb4 100644 --- a/src/pages/detail-player/BoxDetectError.tsx +++ b/src/pages/detail-player/BoxDetectError.tsx @@ -4,6 +4,7 @@ import BoxComponent, { Info } from '@app/components/boxComponent' import { DatePicker, Table } from 'antd' import ThreeDot, { ItemMoreOption } from '@app/components/btnThreeDot'; import DetailErrorModal from '@app/components/modal/DetailErrorModal'; +import EditErrorModal from '@app/components/modal/EditErrorModal'; import watchmoreIcon from "../../static/icon/watch-more.svg"; import changeStatusIcon from "../../static/icon/change-status.svg"; @@ -34,11 +35,8 @@ const BoxDetectError = () => { navigate('/nguoi-dung/chi-tiet-nguoi-dung') } }, - { key: 'resetPass', name: 'Cấp mật khẩu', icon: '', onClick: handleOpenModal }, { - name: 'Đổi Trạng thái', icon: changeStatusIcon, onClick: () => { - navigate('/nguoi-dung/chi-tiet-nguoi-dung') - } + key: 'editError', name: 'Chỉnh sửa', icon: changeStatusIcon, onClick: handleOpenModal }, ] @@ -170,6 +168,11 @@ const BoxDetectError = () => { handleOk={handleOk} handleCancel={handleCancel} /> + } /> diff --git a/src/pages/detailPlayer/BoxDetectError.tsx b/src/pages/detailPlayer/BoxDetectError.tsx new file mode 100644 index 0000000..c7e6a2e --- /dev/null +++ b/src/pages/detailPlayer/BoxDetectError.tsx @@ -0,0 +1,206 @@ +import React, { useState } from 'react' +import BoxComponent, { Info } from '@app/components/boxComponent' +import { DatePicker, Table } from 'antd' +import ThreeDot, { ItemMoreOption } from '@app/components/btnThreeDot'; +import { useNavigate } from 'react-router-dom'; +import DeleteUserModal from '@app/components/modal/DeleteUser'; +import watchmoreIcon from "../../static/icon/watch-more.svg"; +import resetPassIcon from "../../static/icon/reset-pass.svg"; + +const { RangePicker } = DatePicker; + + +const BoxDetectError = () => { + + const navigate = useNavigate(); + // state for modal detail + const [isShowModal, setIsShowModal] = useState(); + const handleOpenModal = (value?: string) => { + setIsShowModal(value); + }; + const handleOk = () => { + setIsShowModal(''); + }; + const handleCancel = () => { + setIsShowModal(''); + }; + + const listItem: ItemMoreOption[] = [ + { + key: 'detailInfo', name: 'Xem chi tiết', icon: watchmoreIcon, onClick: () => { + navigate('/nguoi-dung/chi-tiet-nguoi-dung') + } + }, + { + key: 'editInfo', name: 'Xem Lịch sử thay đổi', icon: watchmoreIcon, onClick: () => { + navigate('/nguoi-dung/chi-tiet-nguoi-dung') + } + }, + { key: 'resetPass', name: 'Cấp mật khẩu', icon: '', onClick: handleOpenModal }, + { + name: 'Đổi Trạng thái', icon: resetPassIcon, onClick: () => { + navigate('/nguoi-dung/chi-tiet-nguoi-dung') + } + }, + ] + + const dataSource = [ + { + key: '1', + numberKey: '#001', + title: ' Kiếm quá nhiều MXY', + date: '13:00 - 01/01/2022', + confirmSolution: 'notConfirm', + statusSolution: false, + action: '', + note: 'Chờ đánh giá', + lastUpdate: '13:00 - 01/01/2022, Longtt', + + }, + { + key: '2', + numberKey: '#002', + title: ' Claim quá nhiều MXY', + date: '13:00 - 01/01/2022', + confirmSolution: 'notConfirm', + statusSolution: false, + action: '', + note: 'An toàn', + lastUpdate: '13:00 - 01/01/2022, Longtt', + }, + { + key: '3', + numberKey: '#003', + title: ' Kiếm quá nhiều Gold', + date: '13:00 - 01/01/2022', + confirmSolution: 'bug', + statusSolution: true, + action: 'Đã cảnh Báo user', + note: '', + lastUpdate: '13:00 - 01/01/2022, Longtt', + }, + { + key: '4', + numberKey: '#004', + title: ' Chi tiêu quá nhiều', + date: '13:00 - 01/01/2022', + confirmSolution: 'bug', + statusSolution: true, + action: 'đã fix bug #1234', + note: '', + lastUpdate: '13:00 - 01/01/2022, Longtt', + }, + { + key: '5', + numberKey: '#005', + title: ' Đạt level cao ', + date: '13:00 - 01/01/2022', + confirmSolution: 'clear', + statusSolution: true, + action: '', + note: 'An toàn', + lastUpdate: '13:00 - 01/01/2022, Longtt', + }, + ]; + + const columns = [ + { + title: 'Mã nghi vấn', + dataIndex: 'numberKey', + key: 'numberKey', + }, + { + title: 'Nghi vấn', + dataIndex: 'title', + key: 'title', + }, + { + title: 'Thời gian phát hiện', + dataIndex: 'date', + key: 'date', + }, + { + title: 'đánh giá nghi vấn', + dataIndex: 'confirmSolution', + key: 'confirmSolution', + render: (event: string) => { + if (event === 'notConfirm') { + return
Chưa đánh giá
+ } + if (event === 'bug') { + return
Chưa đánh giá
+ } + return
An toàn
+ + }, + + }, + { + title: 'trạng thái xử lí', + dataIndex: 'statusSolution', + key: 'statusSolution', + render: (event: boolean) => { + if (event) { + return
Đã xử lí
+ } + return
Chưa xử lí
+ + }, + }, + { + title: 'Phương án xử lí', + dataIndex: 'action', + key: 'action', + }, + { + title: 'Ghi chú', + dataIndex: 'note', + key: 'note', + }, + { + title: 'Lần Cuối sửa', + dataIndex: 'lastUpdate', + key: 'lastUpdate', + }, + { + title: "", + dataIndex: "key", + render: () => + + + } + /> + } + ]; + + const fakeDataInfoHero: Info[] = + [ + { name: 'Trạng thái hoạt động:', value: true }, + { name: 'Tổng số nghi vấn vị phạm:', value: 100 }, + { name: 'Nghi vấn phát hiện nhiều nhất:', value: 'Claim quá nhiều MXY, Chi tiêu lớn trong game' }, + { name: 'Lần phát hiện gần nhất:', value: '13:00 - 01/01/2022' }, + ] + return ( +
+ +
+

Danh sách nghi vấn vi phạm của người chơi

+
+
+ +
+
+
+ + + + + ) +} + +export default BoxDetectError diff --git a/src/pages/list-bug-report/index.tsx b/src/pages/list-bug-report/index.tsx index 2257511..d576d54 100644 --- a/src/pages/list-bug-report/index.tsx +++ b/src/pages/list-bug-report/index.tsx @@ -1,15 +1,15 @@ /* eslint-disable react/react-in-jsx-scope */ /* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable react/jsx-no-bind */ -import {ContentHeader} from "@components"; +import { ContentHeader } from "@components"; import TableCustom from "@app/components/table/Table"; -import {DataListBugProp} from "@app/utils/types"; -import {DatePicker, Input, Select} from "antd"; +import { DataListBugProp } from "@app/utils/types"; +import { DatePicker, Input, Select } from "antd"; import ThreeDot, { ItemMoreOption } from "@app/components/btnThreeDot"; import { useNavigate } from "react-router-dom"; import watchmoreIcon from "../../static/icon/watch-more.svg"; -const {Option} = Select; +const { Option } = Select; const ListBugReport = () => { function handleChange(value: string) { console.log(`selected ${value}`); @@ -20,7 +20,7 @@ const ListBugReport = () => { id: '#001', type: 'Tải Game', brief: 'Tải game lỗi', - address:'0x7ef6c419ecabcmdksc9ee', + address: '0x7ef6c419ecabcmdksc9ee', nameInGame: 'Ltrannn', datePublished: '13:00 - 01/01/2022', status: true @@ -29,7 +29,7 @@ const ListBugReport = () => { id: '#002', type: 'Tải Game', brief: 'Tải game lỗi', - address:'0x7ef6c419ecabcmdksc9ee', + address: '0x7ef6c419ecabcmdksc9ee', nameInGame: 'Ltrannn', datePublished: '13:00 - 01/01/2022', status: false @@ -38,7 +38,7 @@ const ListBugReport = () => { id: '#003', type: 'Tải Game', brief: 'Tải game lỗi', - address:'0x7ef6c419ecabcmdksc9ee', + address: '0x7ef6c419ecabcmdksc9ee', nameInGame: 'Ltrannn', datePublished: '13:00 - 01/01/2022', status: false @@ -47,11 +47,13 @@ const ListBugReport = () => { const navigate = useNavigate(); -const listItem: ItemMoreOption[] = [ - {key: 'detailInfo' ,name: 'Xem chi tiết', icon: watchmoreIcon, onClick: () => { - navigate('/quan-li-bao-cao-loi/xem-chi-tiet') - }}, -] + const listItem: ItemMoreOption[] = [ + { + key: 'detailInfo', name: 'Xem chi tiết', icon: watchmoreIcon, onClick: () => { + navigate('/quan-li-bao-cao-loi/xem-chi-tiet') + } + }, + ] const columns = [ { title: "Mã lỗi", @@ -94,7 +96,7 @@ const listItem: ItemMoreOption[] = [ { title: "", dataIndex: "key", - render: () => + render: () => } ]; return ( @@ -105,14 +107,14 @@ const listItem: ItemMoreOption[] = [
- - - + + +
@@ -133,7 +135,7 @@ const listItem: ItemMoreOption[] = [
- +
diff --git a/src/styles/components/_modal.scss b/src/styles/components/_modal.scss index 91a1ec6..fe3f344 100644 --- a/src/styles/components/_modal.scss +++ b/src/styles/components/_modal.scss @@ -2,6 +2,7 @@ .ant-modal-content { border-radius: 20px !important; overflow: hidden; + .ant-modal-header { .ant-modal-title { padding-top: 10px; @@ -12,6 +13,7 @@ letter-spacing: -0.05em; } } + .ant-modal-body { display: flex; flex-direction: column; @@ -19,20 +21,24 @@ justify-content: center; } } + // spread modal css // delete type user modal .modal-delete-type-user { &__body { margin: 0 auto; + p { font-size: 16px; line-height: 20px; color: #404b50; + span { font-size: 16px; color: red; } } + .btn-control { margin: 30px auto 0; display: flex; @@ -40,6 +46,7 @@ } } } + // modal-delete-user .modal-delete-user { &__body { @@ -57,6 +64,7 @@ color: #404b50; margin: 10px 0; } + .des { font-style: normal; font-weight: normal; @@ -67,6 +75,7 @@ } } } + // modal-confirm-change-pass .modal-confirm-change-pass { &__body { @@ -75,13 +84,16 @@ align-items: center; justify-content: center; } + .input-pass { margin-top: 15px; } + .btn-control { margin: 15px auto; } } + // modal-confirm-change-pass .modal-edit-bug-report { &__body { @@ -92,11 +104,14 @@ color: red; } } + display: flex; flex-direction: column; } + &--method { margin-top: 15px; + label { span { font-weight: 600; @@ -104,11 +119,52 @@ } } } + &--note { margin-top: 15px; } } + .btn-control { margin: 15px auto; } } + +.modal__wrapper { + min-width: 600px; + + .modal-detail-error { + &__body { + width: 100%; + padding: 0 40px; + } + + &__title { + text-align: center; + font-size: 20px; + line-height: 25px; + } + + &__sub-title { + text-align: center; + font-style: italic; + } + + &__content { + display: flex; + justify-content: space-between; + + .title { + font-weight: 600; + color: #404B50; + } + } + } + + .button-custom { + font-weight: 600; + font-size: 16px; + line-height: 20px; + border-radius: 8px; + } +} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 06a30c5..e15d94a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -58,5 +58,5 @@ ul li { } .ant-modal-mask { - background-color: rgba(196, 196, 196, 0.6) !important; + background-color: rgba(196, 196, 196, 0.1) !important; } \ No newline at end of file From e82118a8fe4f98eea727e1934c1aebe1ef8077df Mon Sep 17 00:00:00 2001 From: sinhnt Date: Tue, 22 Mar 2022 09:52:28 +0700 Subject: [PATCH 08/20] coding manage player --- src/components/modal/ChangeHistoryModal.tsx | 74 ++++++++ src/components/modal/EditErrorModal.tsx | 34 +++- src/pages/detail-player/BoxDetectError.tsx | 102 +++++++++- src/pages/detail-player/index.tsx | 2 +- src/pages/detailPlayer/BoxDetectError.tsx | 195 -------------------- src/styles/components/_modal.scss | 10 + src/styles/pages/_detail-player.scss | 5 + src/styles/pages/_index.scss | 1 + 8 files changed, 215 insertions(+), 208 deletions(-) create mode 100644 src/components/modal/ChangeHistoryModal.tsx delete mode 100644 src/pages/detailPlayer/BoxDetectError.tsx create mode 100644 src/styles/pages/_detail-player.scss diff --git a/src/components/modal/ChangeHistoryModal.tsx b/src/components/modal/ChangeHistoryModal.tsx new file mode 100644 index 0000000..f77e4a3 --- /dev/null +++ b/src/components/modal/ChangeHistoryModal.tsx @@ -0,0 +1,74 @@ +import React from "react"; +import { Modal, Table } from "antd"; + +export interface dataHistoryItem { + key: string; + numberChange: string; + title: string; + statusSolution: boolean; + action: string; + note: string; + lastUpdate: string; + userChange: string; +} + + +interface propsChangeHistoryModal { + isModalVisible: boolean; + handleOk?: () => void; + handleCancel?: () => void; + dataHistory: dataHistoryItem[]; + columnHistory: any; + +} +const ChangeHistoryModal = (props: propsChangeHistoryModal) => { + + const { isModalVisible, handleOk, handleCancel, dataHistory, columnHistory } = props; + return ( + +
+

Lịch sử thay đổi

+

Thông tin cơ bản

+
+

Tên in-game:

+

Ltrannnn

+
+
+

Địa chỉ ví:

+

0x7ef6c419ecabcmdksc9ee

+
+
+

Trạng thái:

+

Đang hoạt động

+
+

Chi tiết

+
+

Mã nghi vấn:

+

#001

+
+
+

Nghi vấn:

+

Chi tiêu nhiều trên 1 giao dịch

+
+
+

Thời gian phát hiện:

+

13:00 - 01/01/2022

+
+
+

Thông tin cơ bản

+
+
+ + + ); +}; + +export default ChangeHistoryModal; diff --git a/src/components/modal/EditErrorModal.tsx b/src/components/modal/EditErrorModal.tsx index e512419..63977e0 100644 --- a/src/components/modal/EditErrorModal.tsx +++ b/src/components/modal/EditErrorModal.tsx @@ -1,5 +1,6 @@ +/* eslint-disable react/jsx-no-bind */ import React from "react"; -import { Modal, Button } from "antd"; +import { Modal, Button, Select, Input } from "antd"; interface propsDeleteModal { isModalVisible: boolean; @@ -7,6 +8,11 @@ interface propsDeleteModal { handleCancel?: () => void; } const EditErrorModal = (props: propsDeleteModal) => { + const { Option } = Select; + + function handleChange(value: any) { + console.log(`selected ${value}`); + } const { isModalVisible, handleOk, handleCancel } = props; return ( @@ -59,7 +65,29 @@ const EditErrorModal = (props: propsDeleteModal) => {

Lần cuối sửa:

Chưa cập nhật

- +
+

Đánh giá nghi vấn (*)

+ +
+
+

Trạng thái xử lí (*)

+ +
+
+

Phương án xử lí (*)

+ +
+
+

Ghi chú

+ +
@@ -67,7 +95,7 @@ const EditErrorModal = (props: propsDeleteModal) => { Đồng ý
- + ); }; diff --git a/src/pages/detail-player/BoxDetectError.tsx b/src/pages/detail-player/BoxDetectError.tsx index 18edecc..dc97f46 100644 --- a/src/pages/detail-player/BoxDetectError.tsx +++ b/src/pages/detail-player/BoxDetectError.tsx @@ -1,9 +1,10 @@ import React, { useState } from 'react' -import { useNavigate } from 'react-router-dom'; import BoxComponent, { Info } from '@app/components/boxComponent' import { DatePicker, Table } from 'antd' import ThreeDot, { ItemMoreOption } from '@app/components/btnThreeDot'; import DetailErrorModal from '@app/components/modal/DetailErrorModal'; +import EditErrorModal from '@app/components/modal/EditErrorModal'; +import ChangeHistoryModal, { dataHistoryItem } from '@app/components/modal/ChangeHistoryModal'; import watchmoreIcon from "../../static/icon/watch-more.svg"; import changeStatusIcon from "../../static/icon/change-status.svg"; @@ -12,7 +13,6 @@ const { RangePicker } = DatePicker; const BoxDetectError = () => { - const navigate = useNavigate(); // state for modal detail const [isShowModal, setIsShowModal] = useState(); const handleOpenModal = (value?: string) => { @@ -30,15 +30,87 @@ const BoxDetectError = () => { key: 'detailError', name: 'Xem chi tiết', icon: watchmoreIcon, onClick: handleOpenModal }, { - key: 'editInfo', name: 'Xem Lịch sử thay đổi', icon: watchmoreIcon, onClick: () => { - navigate('/nguoi-dung/chi-tiet-nguoi-dung') - } + key: 'changeHistory', name: 'Xem Lịch sử thay đổi', icon: watchmoreIcon, onClick: handleOpenModal + }, + { key: 'editError', name: 'Chỉnh sửa', icon: changeStatusIcon, onClick: handleOpenModal }, + + ] + + const dataHistory: dataHistoryItem[] = [ + { + key: '1', + numberChange: '1', + title: ' bug', + statusSolution: true, + action: 'Đã cảnh Báo user', + note: '', + lastUpdate: '13:00 - 01/01/2022', + userChange: 'Long Tran Thanh', + }, + { + key: '2', + numberChange: '2', + title: ' notConfirm', + statusSolution: false, + action: '', + note: 'Chờ đánh giá', + lastUpdate: '13:00 - 01/01/2022', + userChange: 'Long Tran Thanh', + }, + ] + + const columnHistory = [ + { + title: 'Lần thay đổi', + dataIndex: 'numberChange', + key: 'numberChange', + }, + { + title: 'đánh giá nghi vấn', + dataIndex: 'title', + key: 'title', + render: (title: string) => { + if (title === 'notConfirm') { + return
Chưa đánh giá
+ } + if (title === 'bug') { + return
Chưa đánh giá
+ } + return
An toàn
+ + }, }, - { key: 'resetPass', name: 'Cấp mật khẩu', icon: '', onClick: handleOpenModal }, { - name: 'Đổi Trạng thái', icon: changeStatusIcon, onClick: () => { - navigate('/nguoi-dung/chi-tiet-nguoi-dung') - } + title: 'Trạng thái', + dataIndex: 'statusSolution', + key: 'statusSolution', + render: (event: boolean) => { + if (event) { + return
Đã xử lí
+ } + return
Chưa xử lí
+ + }, + }, + { + title: 'Phương án xử lí', + dataIndex: 'action', + key: 'action', + }, + { + title: 'Ghi chú', + dataIndex: 'note', + key: 'note', + }, + { + title: 'Thời gian thay đổi', + dataIndex: 'lastUpdate', + key: 'lastUpdate', + }, + { + title: 'Người thay đổi', + dataIndex: 'userChange', + key: 'userChange', }, ] @@ -182,6 +254,18 @@ const BoxDetectError = () => { handleOk={handleOk} handleCancel={handleCancel} /> + +

Danh sách nghi vấn vi phạm của người chơi

diff --git a/src/pages/detail-player/index.tsx b/src/pages/detail-player/index.tsx index 3003bb3..84e97b1 100644 --- a/src/pages/detail-player/index.tsx +++ b/src/pages/detail-player/index.tsx @@ -33,7 +33,7 @@ function DetailPlayer() { return (
-
+
diff --git a/src/pages/detailPlayer/BoxDetectError.tsx b/src/pages/detailPlayer/BoxDetectError.tsx deleted file mode 100644 index 1acb375..0000000 --- a/src/pages/detailPlayer/BoxDetectError.tsx +++ /dev/null @@ -1,195 +0,0 @@ -import React, { useState } from 'react' -import BoxComponent, { Info } from '@app/components/boxComponent' -import { DatePicker, Table } from 'antd' -import ThreeDot, { ItemMoreOption } from '@app/components/btnThreeDot'; -import DetailErrorModal from '@app/components/modal/DetailErrorModal'; -import EditErrorModal from '@app/components/modal/EditErrorModal'; -import watchmoreIcon from "../../static/icon/watch-more.svg"; - -const { RangePicker } = DatePicker; - - -const BoxDetectError = () => { - - // state for modal detail - const [isShowModal, setIsShowModal] = useState(); - const handleOpenModal = (value?: string) => { - setIsShowModal(value); - }; - const handleOk = () => { - setIsShowModal(''); - }; - const handleCancel = () => { - setIsShowModal(''); - }; - - const listItem: ItemMoreOption[] = [ - { - key: 'detailInfo', name: 'Xem chi tiết', icon: watchmoreIcon, onClick: handleOpenModal - }, - { key: 'editInfo', name: 'Xem Lịch sử thay đổi', icon: '', onClick: handleOpenModal }, - { key: 'resetPass', name: 'Cấp mật khẩu', icon: 'resetPassIcon', onClick: handleOpenModal }, - ] - - const dataSource = [ - { - key: '1', - numberKey: '#001', - title: ' Kiếm quá nhiều MXY', - date: '13:00 - 01/01/2022', - confirmSolution: 'notConfirm', - statusSolution: false, - action: '', - note: 'Chờ đánh giá', - lastUpdate: '13:00 - 01/01/2022, Longtt', - - }, - { - key: '2', - numberKey: '#002', - title: ' Claim quá nhiều MXY', - date: '13:00 - 01/01/2022', - confirmSolution: 'notConfirm', - statusSolution: false, - action: '', - note: 'An toàn', - lastUpdate: '13:00 - 01/01/2022, Longtt', - }, - { - key: '3', - numberKey: '#003', - title: ' Kiếm quá nhiều Gold', - date: '13:00 - 01/01/2022', - confirmSolution: 'bug', - statusSolution: true, - action: 'Đã cảnh Báo user', - note: '', - lastUpdate: '13:00 - 01/01/2022, Longtt', - }, - { - key: '4', - numberKey: '#004', - title: ' Chi tiêu quá nhiều', - date: '13:00 - 01/01/2022', - confirmSolution: 'bug', - statusSolution: true, - action: 'đã fix bug #1234', - note: '', - lastUpdate: '13:00 - 01/01/2022, Longtt', - }, - { - key: '5', - numberKey: '#005', - title: ' Đạt level cao ', - date: '13:00 - 01/01/2022', - confirmSolution: 'clear', - statusSolution: true, - action: '', - note: 'An toàn', - lastUpdate: '13:00 - 01/01/2022, Longtt', - }, - ]; - - const columns = [ - { - title: 'Mã nghi vấn', - dataIndex: 'numberKey', - key: 'numberKey', - }, - { - title: 'Nghi vấn', - dataIndex: 'title', - key: 'title', - }, - { - title: 'Thời gian phát hiện', - dataIndex: 'date', - key: 'date', - }, - { - title: 'đánh giá nghi vấn', - dataIndex: 'confirmSolution', - key: 'confirmSolution', - render: (event: string) => { - if (event === 'notConfirm') { - return
Chưa đánh giá
- } - if (event === 'bug') { - return
Chưa đánh giá
- } - return
An toàn
- - }, - - }, - { - title: 'trạng thái xử lí', - dataIndex: 'statusSolution', - key: 'statusSolution', - render: (event: boolean) => { - if (event) { - return
Đã xử lí
- } - return
Chưa xử lí
- - }, - }, - { - title: 'Phương án xử lí', - dataIndex: 'action', - key: 'action', - }, - { - title: 'Ghi chú', - dataIndex: 'note', - key: 'note', - }, - { - title: 'Lần Cuối sửa', - dataIndex: 'lastUpdate', - key: 'lastUpdate', - }, - { - title: "", - dataIndex: "key", - render: () => - } - ]; - - const fakeDataInfoHero: Info[] = - [ - { name: 'Trạng thái hoạt động:', value: true }, - { name: 'Tổng số nghi vấn vị phạm:', value: 100 }, - { name: 'Nghi vấn phát hiện nhiều nhất:', value: 'Claim quá nhiều MXY, Chi tiêu lớn trong game' }, - { name: 'Lần phát hiện gần nhất:', value: '13:00 - 01/01/2022' }, - ] - return ( -
- - - -
-

Danh sách nghi vấn vi phạm của người chơi

-
-
- -
-
-
- - - - - ) -} - -export default BoxDetectError diff --git a/src/styles/components/_modal.scss b/src/styles/components/_modal.scss index fe3f344..e11fdf4 100644 --- a/src/styles/components/_modal.scss +++ b/src/styles/components/_modal.scss @@ -159,6 +159,16 @@ color: #404B50; } } + + &--select { + flex-direction: column; + + .ant-select { + width: 100%; + padding: 0; + margin-bottom: 20px; + } + } } .button-custom { diff --git a/src/styles/pages/_detail-player.scss b/src/styles/pages/_detail-player.scss new file mode 100644 index 0000000..0f381cb --- /dev/null +++ b/src/styles/pages/_detail-player.scss @@ -0,0 +1,5 @@ +.detail-player { + &__content { + margin: 0 30px; + } +} \ No newline at end of file diff --git a/src/styles/pages/_index.scss b/src/styles/pages/_index.scss index 1f7fe5b..b35abe0 100644 --- a/src/styles/pages/_index.scss +++ b/src/styles/pages/_index.scss @@ -5,3 +5,4 @@ @import "./create-type-user"; @import "./create-user"; @import "./list-bug-report"; +@import "./detail-player"; \ No newline at end of file From e4c5f189625c39d30023b698a8a4d52ec29487cd Mon Sep 17 00:00:00 2001 From: sinhnt Date: Thu, 24 Mar 2022 13:28:18 +0700 Subject: [PATCH 09/20] coding manage player --- src/App.tsx | 42 ++-- src/components/boxComponent/index.tsx | 3 +- src/components/modal/ChangePassword.tsx | 54 +++++ src/components/modal/ChangePlayerModal.tsx | 54 +++++ src/components/modal/ChangeStatusPlayer.tsx | 43 ++-- src/modules/main/header/Header.tsx | 36 +--- .../header/user-dropdown/UserDropdown.tsx | 47 +---- src/pages/bug-details-report/index.tsx | 28 +-- src/pages/create-user/index.tsx | 6 +- src/pages/detail-player/BoxInfoBasic.tsx | 179 ++++++++++++---- src/pages/detail-player/BoxInfoHeader.tsx | 76 ++++--- src/pages/detail-player/index.tsx | 35 ++-- src/pages/edit-user/index.tsx | 103 ++++++++++ src/pages/manage-player/index.tsx | 19 +- src/pages/profile/Profile.tsx | 191 ++++-------------- src/static/icon/fi-rr-refresh.svg | 11 + src/styles/components/_header.scss | 16 ++ src/styles/components/_index.scss | 3 +- src/styles/components/_modal.scss | 2 +- src/styles/pages/_edit-user.scss | 52 +++++ src/styles/pages/_index.scss | 3 +- 21 files changed, 627 insertions(+), 376 deletions(-) create mode 100644 src/components/modal/ChangePassword.tsx create mode 100644 src/components/modal/ChangePlayerModal.tsx create mode 100644 src/pages/edit-user/index.tsx create mode 100644 src/static/icon/fi-rr-refresh.svg create mode 100644 src/styles/components/_header.scss create mode 100644 src/styles/pages/_edit-user.scss diff --git a/src/App.tsx b/src/App.tsx index c4ca9b6..70adbe9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -31,6 +31,7 @@ import BugDetailsReport from './pages/bug-details-report'; import NotificationInGame from './pages/notification-manager/ingame'; import NotificationType from './pages/notification-manager/type'; import NotificationUsers from './pages/notification-manager/users'; +import EditUser from './pages/edit-user'; const App = () => { const windowSize = useWindowSize(); @@ -58,26 +59,27 @@ const App = () => { } /> }> - }> - } /> - } /> - }/> - }/> - }/> - } /> - } /> - } /> - } /> - } /> - }/> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - + }> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + diff --git a/src/components/boxComponent/index.tsx b/src/components/boxComponent/index.tsx index 3c389fe..b209aa8 100644 --- a/src/components/boxComponent/index.tsx +++ b/src/components/boxComponent/index.tsx @@ -12,6 +12,7 @@ export interface BoxComponentProps { title: string; listInfo: Info[]; handleEdit?: () => void; + } const BoxComponent = (props: BoxComponentProps) => { @@ -23,7 +24,7 @@ const BoxComponent = (props: BoxComponentProps) => { {handleEdit &&

Chỉnh sửa

-
} + }
{listInfo.map((item) => { diff --git a/src/components/modal/ChangePassword.tsx b/src/components/modal/ChangePassword.tsx new file mode 100644 index 0000000..2d6ae4b --- /dev/null +++ b/src/components/modal/ChangePassword.tsx @@ -0,0 +1,54 @@ +/* eslint-disable prettier/prettier */ +import React from "react"; +import { Select, Modal, Button, Input } from "antd"; + +const { Option } = Select; +interface propsDeleteModal { + isModalVisible: boolean; + handleOk?: () => void; + handleCancel?: () => void; +} +const ChangePasswordModal = (props: propsDeleteModal) => { + const handleChange = (value: string) => { + console.log(`selected ${value}`); + }; + + const { isModalVisible, handleOk, handleCancel } = props; + return ( + +
+
+

Ghi chú

+ +
+
+

Trạng thái (*)

+ +
+
+

Lí do (*)

+ +
+
+
+ + +
+ + ); +}; + +export default ChangePasswordModal; diff --git a/src/components/modal/ChangePlayerModal.tsx b/src/components/modal/ChangePlayerModal.tsx new file mode 100644 index 0000000..cdfbfef --- /dev/null +++ b/src/components/modal/ChangePlayerModal.tsx @@ -0,0 +1,54 @@ +/* eslint-disable prettier/prettier */ +import React from "react"; +import { Select, Modal, Button, Input } from "antd"; + +const { Option } = Select; +interface propsDeleteModal { + isModalVisible: boolean; + handleOk?: () => void; + handleCancel?: () => void; +} +const ChangePlayerModal = (props: propsDeleteModal) => { + const handleChange = (value: string) => { + console.log(`selected ${value}`); + }; + + const { isModalVisible, handleOk, handleCancel } = props; + return ( + +
+
+

Ghi chú

+ +
+
+

Trạng thái (*)

+ +
+
+

Lí do (*)

+ +
+
+
+ + +
+ + ); +}; + +export default ChangePlayerModal; diff --git a/src/components/modal/ChangeStatusPlayer.tsx b/src/components/modal/ChangeStatusPlayer.tsx index e90627a..e8bf0f6 100644 --- a/src/components/modal/ChangeStatusPlayer.tsx +++ b/src/components/modal/ChangeStatusPlayer.tsx @@ -1,6 +1,6 @@ /* eslint-disable prettier/prettier */ import React from "react"; -import { Select, Modal, Button } from "antd"; +import { Select, Modal, Button, Input } from "antd"; const { Option } = Select; interface propsDeleteModal { @@ -16,35 +16,34 @@ const ChangeStatusModal = (props: propsDeleteModal) => { const { isModalVisible, handleOk, handleCancel } = props; return ( -
-

- Kiểu người dùng thay thế (*) -

- -
- - +
+
+

Trạng thái (*)

+
+
+

Lí do (*)

+ +
+
+
+ +
- + ); }; diff --git a/src/modules/main/header/Header.tsx b/src/modules/main/header/Header.tsx index eb10969..2327326 100644 --- a/src/modules/main/header/Header.tsx +++ b/src/modules/main/header/Header.tsx @@ -1,16 +1,9 @@ -import React, {useCallback} from 'react'; -import {Link} from 'react-router-dom'; -import {useTranslation} from 'react-i18next'; -import {useDispatch, useSelector} from 'react-redux'; -import {toggleControlSidebar, toggleSidebarMenu} from '@app/store/reducers/ui'; -import {Button} from '@app/components'; -import MessagesDropdown from '@app/modules/main/header/messages-dropdown/MessagesDropdown'; -import NotificationsDropdown from '@app/modules/main/header/notifications-dropdown/NotificationsDropdown'; -import LanguagesDropdown from '@app/modules/main/header/languages-dropdown/LanguagesDropdown'; +import React, { useCallback } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { toggleSidebarMenu } from '@app/store/reducers/ui'; import UserDropdown from '@app/modules/main/header/user-dropdown/UserDropdown'; const Header = () => { - const [t] = useTranslation(); const dispatch = useDispatch(); const navbarVariant = useSelector((state: any) => state.ui.navbarVariant); const headerBorder = useSelector((state: any) => state.ui.headerBorder); @@ -19,12 +12,9 @@ const Header = () => { dispatch(toggleSidebarMenu()); }; - const handleToggleControlSidebar = () => { - dispatch(toggleControlSidebar()); - }; const getContainerClasses = useCallback(() => { - let classes = `main-header navbar navbar-expand ${navbarVariant}`; + let classes = `main-header navbar navbar-expand ${navbarVariant} header-custom`; if (headerBorder) { classes = `${classes} border-bottom-0`; } @@ -43,27 +33,9 @@ const Header = () => { -
  • - - {t('header.label.home')} - -
    • -
  • - - {t('header.label.contact')} - -
      • - - - -
    • - -
    ); diff --git a/src/modules/main/header/user-dropdown/UserDropdown.tsx b/src/modules/main/header/user-dropdown/UserDropdown.tsx index 2553a3a..5e4a7e4 100644 --- a/src/modules/main/header/user-dropdown/UserDropdown.tsx +++ b/src/modules/main/header/user-dropdown/UserDropdown.tsx @@ -1,10 +1,8 @@ -import React, {useState} from 'react'; -import {useNavigate, Link} from 'react-router-dom'; -import {useDispatch, useSelector} from 'react-redux'; -import {DateTime} from 'luxon'; -import {useTranslation} from 'react-i18next'; -import {logoutUser} from '@store/reducers/auth'; -import {Dropdown} from '@components'; +import React, { useState } from 'react'; +import { useNavigate, } from 'react-router-dom'; +import { useDispatch, useSelector } from 'react-redux'; +import { logoutUser } from '@store/reducers/auth'; +import { Dropdown } from '@components'; import styled from 'styled-components'; const StyledUserImage = styled.img` @@ -16,7 +14,6 @@ const StyledUserImage = styled.img` const UserDropdown = () => { const navigate = useNavigate(); - const [t] = useTranslation(); const dispatch = useDispatch(); const user = useSelector((state: any) => state.auth.currentUser); const [dropdownOpen, setDropdownOpen] = useState(false); @@ -49,49 +46,21 @@ const UserDropdown = () => { } menuTemplate={ <> -
  • - User -

    - {user.email} - - Member since - - {DateTime.fromISO(user.createdAt).toFormat('dd LLL yyyy')} - - -

    -
    • -
  • -
    -
    - {t('header.user.followers')} -
    -
    - {t('header.user.sales')} -
    -
    - {t('header.user.friends')} -
    -
    -
    • +
    • diff --git a/src/pages/bug-details-report/index.tsx b/src/pages/bug-details-report/index.tsx index d587b5e..1eb06d4 100644 --- a/src/pages/bug-details-report/index.tsx +++ b/src/pages/bug-details-report/index.tsx @@ -1,12 +1,12 @@ /* eslint-disable jsx-a11y/alt-text */ import React, { useState } from 'react'; -import BoxComponent, { Info } from '@app/components/boxComponent'; +import BoxComponent, { Info } from '@app/components/boxComponent'; import EditBugReportModal from '@app/components/modal/EditBugReport'; import img from '../../static/images/404.png' function DetailPlayer() { - const dataInfo:Info[] = [ + const dataInfo: Info[] = [ { name: 'Mã lỗi:', value: '#001' @@ -39,7 +39,7 @@ function DetailPlayer() { }, { name: 'Ảnh lỗi:', - value: img-bug + value: img-bug }, { name: 'Trạng thái xử lí:', @@ -69,17 +69,17 @@ function DetailPlayer() { setIsModalVisible(false); }; - return ( -
    - - - -
    - ); + return ( +
    + + + +
    + ); } export default DetailPlayer; diff --git a/src/pages/create-user/index.tsx b/src/pages/create-user/index.tsx index f643eff..3d63e05 100644 --- a/src/pages/create-user/index.tsx +++ b/src/pages/create-user/index.tsx @@ -1,12 +1,12 @@ /* eslint-disable jsx-a11y/label-has-associated-control */ /* eslint-disable prettier/prettier */ /* eslint-disable react/jsx-no-bind */ -import {ContentHeader} from "@app/components"; -import {Button, Input, Select} from "antd"; +import { ContentHeader } from "@app/components"; +import { Button, Input, Select } from "antd"; import TextArea from "antd/lib/input/TextArea"; import React from "react"; -const {Option} = Select; +const { Option } = Select; function CreateUser() { function handleChange(value: string) { diff --git a/src/pages/detail-player/BoxInfoBasic.tsx b/src/pages/detail-player/BoxInfoBasic.tsx index 2c0c034..d66957c 100644 --- a/src/pages/detail-player/BoxInfoBasic.tsx +++ b/src/pages/detail-player/BoxInfoBasic.tsx @@ -1,45 +1,148 @@ -import { DataBasicInfo } from '@app/utils/types' -import React from 'react' -import { ReactComponent as EditIcon } from '../../static/icon/edit.svg'; +import BoxComponent, { Info } from '@app/components/boxComponent'; +import ChangeHistoryModal, { dataHistoryItem } from '@app/components/modal/ChangeHistoryModal'; +import React, { useState } from 'react' -interface DataBasicInfoProps { - data: DataBasicInfo -} -const BoxInfoBasic = (props: DataBasicInfoProps) => { - const { data } = props + +const BoxInfoBasic = () => { + + + const dataHistory: dataHistoryItem[] = [ + { + key: '1', + numberChange: '1', + title: ' bug', + statusSolution: true, + action: 'Đã cảnh Báo user', + note: '', + lastUpdate: '13:00 - 01/01/2022', + userChange: 'Long Tran Thanh', + }, + { + key: '2', + numberChange: '2', + title: ' notConfirm', + statusSolution: false, + action: '', + note: 'Chờ đánh giá', + lastUpdate: '13:00 - 01/01/2022', + userChange: 'Long Tran Thanh', + }, + ] + + const columnHistory = [ + { + title: 'Lần thay đổi', + dataIndex: 'numberChange', + key: 'numberChange', + }, + { + title: 'đánh giá nghi vấn', + dataIndex: 'title', + key: 'title', + render: (title: string) => { + if (title === 'notConfirm') { + return
    Chưa đánh giá
    + } + if (title === 'bug') { + return
    Chưa đánh giá
    + } + return
    An toàn
    + + }, + }, + { + title: 'Trạng thái', + dataIndex: 'statusSolution', + key: 'statusSolution', + render: (event: boolean) => { + if (event) { + return
    Đã xử lí
    + } + return
    Chưa xử lí
    + + }, + }, + { + title: 'Phương án xử lí', + dataIndex: 'action', + key: 'action', + }, + { + title: 'Ghi chú', + dataIndex: 'note', + key: 'note', + }, + { + title: 'Thời gian thay đổi', + dataIndex: 'lastUpdate', + key: 'lastUpdate', + }, + { + title: 'Người thay đổi', + dataIndex: 'userChange', + key: 'userChange', + }, + ] + + const dataInfo: Info[] = [ + { + name: 'Tổng thời gian hoạt động:', + value: '1200 giờ' + }, + { + name: 'Lần hoạt động gần nhất:', + value: '13:00 - 01/01/2022' + }, + { + name: 'Trạng thái:', + value: 'Dừng hoạt động' + }, + { + name: 'Lí do:', + value: 'Người chơi vi phạm nhiều lần' + }, + { + name: 'Lần cuối sửa đổi:', + value: '13:30 - 01/01/2022, Long Tran Thanh' + }, + { + name: 'Ghi chú:', + value: 'Chưa cập nhật' + }, + { + name: 'Ngày tham gia:', + value: '01/01/2022' + }, + ] + + + // status modal + const [isModalVisible, setIsModalVisible] = useState(false); + + const showModal = () => { + setIsModalVisible(true); + }; + + const handleOk = () => { + setIsModalVisible(false); + }; + + const handleCancel = () => { + setIsModalVisible(false); + }; + return ( -
    -
    -

    Thông tin cơ bản

    -
    - -

    Chỉnh sửa

    -
    -
    -
    -
    -

    Tổng thời gian hoạt động:

    -

    {data.timeActive}

    -
    -
    -

    Lần hoạt động gần nhất:

    -

    {data.latestInGame}

    -
    -
    -

    Trạng thái hoạt động:

    -

    {data.statusActive ? 'Đang hoạt động' : 'Không hoạt động'}

    -
    -
    -

    Ghi chú:

    -

    {data.note}

    -
    -
    -

    Ngày tham gia:

    -

    {data.date}

    -
    -
    +
    + +
    ) } diff --git a/src/pages/detail-player/BoxInfoHeader.tsx b/src/pages/detail-player/BoxInfoHeader.tsx index b5df770..ea8872c 100644 --- a/src/pages/detail-player/BoxInfoHeader.tsx +++ b/src/pages/detail-player/BoxInfoHeader.tsx @@ -1,36 +1,52 @@ -import React from 'react' -import { DataHeaderInfo1 } from '@app/utils/types'; -import { ReactComponent as EditIcon } from '../../static/icon/edit.svg'; +import BoxComponent, { Info } from '@app/components/boxComponent' +import ChangePlayerModal from '@app/components/modal/ChangePlayerModal'; +import React, { useState } from 'react' + + + +const BoxInfoHeader = () => { + + + const dataInfo: Info[] = [ + { + name: 'Địa chỉ ví:', + value: '0x7ef6c419ecabcmdksc9ee' + }, + { + name: 'Quốc gia:', + value: 'Việt Nam' + }, + { + name: 'Vai trò:', + value: 'Người chơi' + }, + + ] + + // status modal + const [isModalVisible, setIsModalVisible] = useState(false); + + const showModal = () => { + setIsModalVisible(true); + }; + + const handleOk = () => { + setIsModalVisible(false); + }; + + const handleCancel = () => { + setIsModalVisible(false); + }; -interface BoxInfoHeaderProps { - data: DataHeaderInfo1 -} -const BoxInfoHeader = (props: BoxInfoHeaderProps) => { - const { data } = props return ( -
    -
    -

    {data.name}

    -
    - -

    Chỉnh sửa

    -
    -
    -
    -
    -

    Địa chỉ ví:

    -

    {data.address}

    -
    -
    -

    Quốc gia:

    -

    {data.nation}

    -
    -
    -

    Vai trò:

    -

    {data.role}

    -
    -
    +
    + +
    ) } diff --git a/src/pages/detail-player/index.tsx b/src/pages/detail-player/index.tsx index 84e97b1..b914d31 100644 --- a/src/pages/detail-player/index.tsx +++ b/src/pages/detail-player/index.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { DataBasicInfo, DataHeaderInfo1 } from '@app/utils/types'; import { Tabs } from 'antd'; import BoxInfoBasic from './BoxInfoBasic'; import BoxInfoHeader from './BoxInfoHeader'; @@ -14,29 +13,29 @@ function callback(key: any) { function DetailPlayer() { - const DataHeaderInfo: DataHeaderInfo1 = - { - name: 'Ltrannnn', - address: '0x7ef6c419ecabcmdksc9ee', - nation: 'Việt Nam', - role: 'Người chơi', - } - const DataBasicInfo: DataBasicInfo = - { - timeActive: '1200 giờ', - latestInGame: '13:00 - 01/01/2022', - statusActive: true, - note: 'Chưa cập nhật', - date: '01/01/2022', - } + // const DataHeaderInfo: DataHeaderInfo1 = + // { + // name: 'Ltrannnn', + // address: '0x7ef6c419ecabcmdksc9ee', + // nation: 'Việt Nam', + // role: 'Người chơi', + // } + // const DataBasicInfo: DataBasicInfo = + // { + // timeActive: '1200 giờ', + // latestInGame: '13:00 - 01/01/2022', + // statusActive: true, + // note: 'Chưa cập nhật', + // date: '01/01/2022', + // } return (
    - +
    - + diff --git a/src/pages/edit-user/index.tsx b/src/pages/edit-user/index.tsx new file mode 100644 index 0000000..447aaac --- /dev/null +++ b/src/pages/edit-user/index.tsx @@ -0,0 +1,103 @@ +/* eslint-disable react/jsx-no-bind */ +import React, { useState } from 'react' +import { ContentHeader } from '@app/components' +import { Button, Input, Select } from 'antd' +import TextArea from 'antd/lib/input/TextArea' +import ChangePasswordModal from '@app/components/modal/ChangePassword'; +import { ReactComponent as ChangeIcon } from "../../static/icon/fi-rr-refresh.svg"; + +const { Option } = Select; + + +const EditUser = () => { + + function handleChange(value: string) { + console.log(`selected ${value}`); + } + + // status modal + const [isModalVisible, setIsModalVisible] = useState(false); + + const showModal = () => { + setIsModalVisible(true); + }; + + const handleOk = () => { + setIsModalVisible(false); + }; + + const handleCancel = () => { + setIsModalVisible(false); + }; + return ( +
    + + +
    +
    +
    +

    Họ tên (*)

    + +
    +
    +

    Email (*)

    + +
    +
    +

    Số điện thoại

    + +
    +
    +
    +
    +

    Vai trò (*)

    + +
    +
    +

    Email (*)

    + +
    +
    +
    +
    +

    Mật khẩu

    +
    + +

    Đổi mật khẩu

    +
    +
    +
    +
    +
    +

    Số điện thoại

    +