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 - + ); 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..08d47ed 100644 --- a/hotel-management/src/components/Form/styled.ts +++ b/hotel-management/src/components/Form/styled.ts @@ -1,5 +1,8 @@ import styled from 'styled-components'; +// Styled +import Button from '@commonStyle/Button'; + const StyledForm = styled.form` display: flex; flex-direction: column; @@ -35,4 +38,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 };