From 50e607850d3ca1192f0f3b6b36166395e7d6e647 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Wed, 29 Nov 2023 16:48:24 +0700 Subject: [PATCH 1/3] Implement pagination for table user and room --- .../src/components/Form/index.tsx | 3 ++- .../src/components/Form/styled.ts | 12 ++++++++++- hotel-management/src/pages/Room/RoomForm.tsx | 21 ++++--------------- hotel-management/src/pages/Room/RoomTable.tsx | 6 +++++- hotel-management/src/pages/User/UserForm.tsx | 11 ++++------ hotel-management/src/pages/User/UserTable.tsx | 6 +++++- hotel-management/src/pages/User/styled.ts | 15 +------------ 7 files changed, 32 insertions(+), 42 deletions(-) diff --git a/hotel-management/src/components/Form/index.tsx b/hotel-management/src/components/Form/index.tsx index c0727ac..6dd2cc3 100644 --- a/hotel-management/src/components/Form/index.tsx +++ b/hotel-management/src/components/Form/index.tsx @@ -7,6 +7,7 @@ import { Error, Label, StyledFormRow, + FormBtn, } from './styled'; interface IFormProps { @@ -29,7 +30,6 @@ const Form = ({ children, onSubmit, id }: IFormProps) => { ); }; - const FormRow = ({ label, error, children }: IFormRow) => { return ( @@ -44,5 +44,6 @@ const FormRow = ({ label, error, children }: IFormRow) => { Form.Row = FormRow; Form.Action = StyledActionBtn; +Form.Button = FormBtn; export default Form; diff --git a/hotel-management/src/components/Form/styled.ts b/hotel-management/src/components/Form/styled.ts index 988dd38..002272c 100644 --- a/hotel-management/src/components/Form/styled.ts +++ b/hotel-management/src/components/Form/styled.ts @@ -1,3 +1,4 @@ +import Button from '@commonStyle/Button'; import styled from 'styled-components'; const StyledForm = styled.form` @@ -35,4 +36,13 @@ const Error = styled.p` width: 220px; `; -export { StyledForm, StyledActionBtn, StyledFormRow, Label, Error }; +const FormBtn = styled(Button)` + width: 100%; + + &:disabled, + &[disabled] { + background-color: var(--disabled-btn-color); + } +`; + +export { StyledForm, StyledActionBtn, StyledFormRow, Label, Error, FormBtn }; diff --git a/hotel-management/src/pages/Room/RoomForm.tsx b/hotel-management/src/pages/Room/RoomForm.tsx index d33bc64..24ba3d1 100644 --- a/hotel-management/src/pages/Room/RoomForm.tsx +++ b/hotel-management/src/pages/Room/RoomForm.tsx @@ -1,7 +1,4 @@ -import styled from 'styled-components'; - // Styled -import Button from '@commonStyle/Button.ts'; import Input from '@commonStyle/Input.ts'; // Types @@ -25,16 +22,6 @@ import { useForm } from 'react-hook-form'; import { useCreateRoom } from '@hook/rooms/useCreateRoom.ts'; import { useUpdateRoom } from '@hook/rooms/useUpdateRoom.ts'; -const FormBtn = styled(Button)` - width: 100%; - - &:disabled, - &[disabled] { - background-color: var(--disabled-btn-color); - cursor: no-drop; - } -`; - interface IRoomFormProp { onCloseModal?: () => void; room?: IRoom; @@ -115,7 +102,7 @@ const RoomForm = ({ onCloseModal, room }: IRoomFormProp) => { - { ? 'Add' : 'Save' } - - + + Close - + ); diff --git a/hotel-management/src/pages/Room/RoomTable.tsx b/hotel-management/src/pages/Room/RoomTable.tsx index daaa726..55796c2 100644 --- a/hotel-management/src/pages/Room/RoomTable.tsx +++ b/hotel-management/src/pages/Room/RoomTable.tsx @@ -22,10 +22,11 @@ import Spinner from '@commonStyle/Spinner'; // Hooks import { useRooms } from '@hook/rooms/useRooms'; +import Pagination from '@component/Pagination'; const RoomTable = () => { const columnName = ['Id', 'Name', 'Price', 'Status']; - const { isLoading, rooms } = useRooms(); + const { isLoading, rooms, count } = useRooms(); const renderRoomRow = useCallback( (room: IRoom) => , @@ -49,6 +50,9 @@ const RoomTable = () => { data={rooms} render={renderRoomRow} /> + + +
) : ( diff --git a/hotel-management/src/pages/User/UserForm.tsx b/hotel-management/src/pages/User/UserForm.tsx index 04b8b68..9ad7634 100644 --- a/hotel-management/src/pages/User/UserForm.tsx +++ b/hotel-management/src/pages/User/UserForm.tsx @@ -19,9 +19,6 @@ import { } from '@constant/formValidateMessage.ts'; import { REGEX } from '@constant/commons.ts'; -// Styled -import { FormBtn } from './styled.ts'; - // Types import { IUser } from '@type/users.ts'; @@ -106,7 +103,7 @@ const UserForm = ({ onCloseModal, user }: IUserFormProp) => { - { ? 'Add' : 'Save' } - - + + Close - + diff --git a/hotel-management/src/pages/User/UserTable.tsx b/hotel-management/src/pages/User/UserTable.tsx index f3179a8..9fc7207 100644 --- a/hotel-management/src/pages/User/UserTable.tsx +++ b/hotel-management/src/pages/User/UserTable.tsx @@ -22,10 +22,11 @@ import Spinner from '@commonStyle/Spinner'; // Hooks import { useUsers } from '@hook/users/useUsers'; +import Pagination from '@component/Pagination'; const UserTable = () => { const columnName = ['Id', 'Name', 'Phone', 'Is Booked']; - const { isLoading, users } = useUsers(); + const { isLoading, users, count } = useUsers(); const renderUserRow = useCallback( (user: IUser) => ( @@ -54,6 +55,9 @@ const UserTable = () => { data={users} render={renderUserRow} /> + + +
) : ( diff --git a/hotel-management/src/pages/User/styled.ts b/hotel-management/src/pages/User/styled.ts index 82229a4..803f1ec 100644 --- a/hotel-management/src/pages/User/styled.ts +++ b/hotel-management/src/pages/User/styled.ts @@ -1,8 +1,5 @@ import styled from 'styled-components'; -// Components -import Button from '../../commons/styles/Button'; - const StyledUser = styled.main` padding: 20px; padding-bottom: 100px; @@ -24,14 +21,4 @@ const StyledOperationTable = styled.div` justify-content: flex-end; `; -const FormBtn = styled(Button)` - width: 100%; - - &:disabled, - &[disabled] { - background-color: var(--disabled-btn-color); - cursor: no-drop; - } -`; - -export { StyledUser, Title, StyledOperationTable, FormBtn }; +export { StyledUser, Title, StyledOperationTable }; From cfe2cb72480bf2b357da02c33bb239c9da04530b Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Wed, 29 Nov 2023 16:54:37 +0700 Subject: [PATCH 2/3] Addition comments section --- hotel-management/src/components/Form/styled.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/hotel-management/src/components/Form/styled.ts b/hotel-management/src/components/Form/styled.ts index 002272c..08d47ed 100644 --- a/hotel-management/src/components/Form/styled.ts +++ b/hotel-management/src/components/Form/styled.ts @@ -1,6 +1,8 @@ -import Button from '@commonStyle/Button'; import styled from 'styled-components'; +// Styled +import Button from '@commonStyle/Button'; + const StyledForm = styled.form` display: flex; flex-direction: column; From 3d5da85fdb16f05bb3b4e838c07a286db83b4d87 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Wed, 29 Nov 2023 16:57:29 +0700 Subject: [PATCH 3/3] Fix test case --- hotel-management/src/components/Form/Form.test.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/hotel-management/src/components/Form/Form.test.tsx b/hotel-management/src/components/Form/Form.test.tsx index 795c518..7e248e6 100644 --- a/hotel-management/src/components/Form/Form.test.tsx +++ b/hotel-management/src/components/Form/Form.test.tsx @@ -4,9 +4,6 @@ import renderer from 'react-test-renderer'; import Form from '.'; import Input from '@commonStyle/Input'; -// Styled -import { FormBtn } from '@page/User/styled'; - describe('Form ', () => { const isDisable = true; const errorMessage = 'This is error message'; @@ -24,12 +21,12 @@ describe('Form ', () => { - + Confirm - - + + Close - + );