From 50e607850d3ca1192f0f3b6b36166395e7d6e647 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Wed, 29 Nov 2023 16:48:24 +0700 Subject: [PATCH] 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 };