2/2/2023

conghieutk1 · Feb 1, 2023 · 4e500af · 4e500af
1 parent 1bce3ae
commit 4e500af
Show file tree

Hide file tree

Showing 5 changed files with 285 additions and 24 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <!--
+    <head>
+        <meta charset="utf-8" />
+        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
+        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+        <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -20,13 +19,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>HoiDanIT React App</title>
-</head>
+        <title>Đặt lịch khám bệnh online</title>
+    </head>
 
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-  <!--
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -35,7 +34,5 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-</body>
-
-</html>
+    --></body>
+</html>
diff --git a/src/containers/System/ModalUser.js b/src/containers/System/ModalUser.js
@@ -0,0 +1,180 @@
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
+
+import React, { Component } from "react";
+import { FormattedMessage } from "react-intl";
+import { connect } from "react-redux";
+class ModalUser extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            email: "",
+            password: "",
+            firstName: "",
+            lastName: "",
+            address: "",
+        };
+    }
+
+    componentDidMount() {}
+
+    toggle = () => {
+        this.props.toggleFromParent();
+    };
+
+    handleOnChangeInput = (event, id) => {
+        //console.log(event.target.value, "id: ", id);
+
+        //bad code
+        // this.state[id] =event.target.value;
+        // this.setState({
+        //     ...this.state
+        // }, () => {
+        //     console.log("check bad code:", this.state);
+        // })
+
+        //good code
+        let copyState = { ...this.state };
+        copyState[id] = event.target.value;
+        this.setState({
+            ...copyState,
+        });
+    };
+    checkValidInput = () => {
+        let isValid = true;
+        let arrInput = [
+            "email",
+            "password",
+            "firstName",
+            "lastName",
+            "address",
+        ];
+        for (let i = 0; i < arrInput.length; i++) {
+            if (!this.state[arrInput[i]]) {
+                isValid = false;
+                alert("Missing parameter: " + arrInput[i]);
+                break;
+            }
+        }
+        return isValid;
+    };
+    handleAddNewUser = () => {
+        let isValid = this.checkValidInput();
+        if (isValid) {
+            this.props.createNewUserFromParent(this.state);
+            // console.log("check good state:", this.state);
+        }
+    };
+
+    render() {
+        return (
+            <Modal
+                isOpen={this.props.isOpen}
+                toggle={() => {
+                    this.toggle();
+                }}
+                className={"modal-user-container"}
+                size="lg"
+                centered
+            >
+                <ModalHeader
+                    toggle={() => {
+                        this.toggle();
+                    }}
+                >
+                    Create a new user
+                </ModalHeader>
+                <ModalBody>
+                    <div className="modal-user-body">
+                        <div className="input-container">
+                            <label>Email</label>
+                            <input
+                                type="text"
+                                onChange={(event) => {
+                                    this.handleOnChangeInput(event, "email");
+                                }}
+                                value={this.state.email}
+                            />
+                        </div>
+                        <div className="input-container">
+                            <label>Password</label>
+                            <input
+                                type="password"
+                                onChange={(event) => {
+                                    this.handleOnChangeInput(event, "password");
+                                }}
+                                value={this.state.password}
+                            />
+                        </div>
+                    </div>
+                    <div className="modal-user-body">
+                        <div className="input-container">
+                            <label>First name</label>
+                            <input
+                                type="text"
+                                onChange={(event) => {
+                                    this.handleOnChangeInput(
+                                        event,
+                                        "firstName"
+                                    );
+                                }}
+                                value={this.state.firstName}
+                            />
+                        </div>
+                        <div className="input-container">
+                            <label>Last name</label>
+                            <input
+                                type="text"
+                                onChange={(event) => {
+                                    this.handleOnChangeInput(event, "lastName");
+                                }}
+                                value={this.state.lastName}
+                            />
+                        </div>
+                    </div>
+                    <div className="modal-user-body">
+                        <div className="input-container max-width-input">
+                            <label>Address</label>
+                            <input
+                                type="text"
+                                onChange={(event) => {
+                                    this.handleOnChangeInput(event, "address");
+                                }}
+                                value={this.state.address}
+                            />
+                        </div>
+                    </div>
+                </ModalBody>
+                <ModalFooter>
+                    <Button
+                        color="primary"
+                        onClick={() => {
+                            this.handleAddNewUser();
+                        }}
+                        className="px-3"
+                    >
+                        Save
+                    </Button>{" "}
+                    <Button
+                        color="secondary"
+                        onClick={() => {
+                            this.toggle();
+                        }}
+                        className="px-3"
+                    >
+                        Close
+                    </Button>
+                </ModalFooter>
+            </Modal>
+        );
+    }
+}
+
+const mapStateToProps = (state) => {
+    return {};
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {};
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ModalUser);
diff --git a/src/containers/System/UserManage.js b/src/containers/System/UserManage.js
@@ -2,31 +2,78 @@ import React, { Component } from "react";
 import { FormattedMessage } from "react-intl";
 import { connect } from "react-redux";
 import "./UserManage.scss";
-import { getAllUsers } from "../../services/userService";
+import { getAllUsers, createNewUserByReact } from "../../services/userService";
+import ModalUser from "./ModalUser";
 
 class UserManage extends Component {
     constructor(props) {
         super(props);
         this.state = {
             arrUsers: [],
+            isOpenModalUser: false,
         };
     }
 
     async componentDidMount() {
+        await this.getAllUserFromReact();
+    }
+
+    getAllUserFromReact = async () => {
         let response = await getAllUsers("ALL");
         if (response && response.errCode === 0) {
             this.setState({
                 arrUsers: response.users,
             });
         }
-    }
+    };
+
+    handleAddNewUser = () => {
+        this.setState({
+            isOpenModalUser: true,
+        });
+    };
+
+    toggleUserModal = () => {
+        this.setState({
+            isOpenModalUser: !this.state.isOpenModalUser,
+        });
+    };
+
+    createNewUser = async (data) => {
+        try {
+            let response = await createNewUserByReact(data);
+            if (response && response.errCode !== 0) {
+                alert(response.errMessage);
+            } else {
+                await this.getAllUserFromReact();
+                this.setState({
+                    isOpenModalUser: false,
+                });
+            }
+        } catch (e) {
+            console.log(e);
+        }
+    };
 
     render() {
-        console.log("check state user 2", this.state);
+        console.log("check state user ", this.state);
         let arrUsers = this.state.arrUsers;
         return (
             <div className="users-container">
+                <ModalUser
+                    isOpen={this.state.isOpenModalUser}
+                    toggleFromParent={this.toggleUserModal}
+                    createNewUserFromParent={this.createNewUser}
+                />
                 <div className="title text-center">Manage users</div>
+                <div className="mx-1">
+                    <button
+                        className="btn btn-primary px-3"
+                        onClick={() => this.handleAddNewUser()}
+                    >
+                        <i className="fas fa-plus px-2"></i>Add new user
+                    </button>
+                </div>
                 <div className="users-table mt-4 mx-1">
                     <table id="customers">
                         <tbody>
@@ -42,7 +89,7 @@ class UserManage extends Component {
                                 arrUsers.map((item, index) => {
                                     return (
                                         <>
-                                            <tr>
+                                            <tr key={item.id}>
                                                 <td>{item.email}</td>
                                                 <td>{item.firstName}</td>
                                                 <td>{item.lastName}</td>

diff --git a/src/containers/System/UserManage.scss b/src/containers/System/UserManage.scss
@@ -49,3 +49,36 @@
         color: rgb(255, 149, 0);
     }
 }
+
+.modal-user-container {
+    .modal-content {
+        .modal-header {
+            button {
+                background-color: transparent !important;
+                color: white;
+                border: none;
+                font-size: 27px;
+            }
+        }
+    }
+
+    .modal-user-body {
+        display: flex;
+        gap: 15px;
+        .input-container {
+            display: flex;
+            flex-direction: column;
+            width: 50%;
+            &.max-width-input {
+                width: 100%;
+            }
+            input {
+                border-radius: 3px;
+                border: 1px solid grey;
+                height: 30px;
+                outline: none;
+                padding: 0 10px;
+            }
+        }
+    }
+}
diff --git a/src/services/userService.js b/src/services/userService.js
@@ -10,4 +10,8 @@ const handleLoginApi = (userEmail, userPassword) => {
 const getAllUsers = (inputId) => {
     return axios.get(`/api/get-all-users?id=${inputId}`);
 };
-export { handleLoginApi, getAllUsers };
+
+const createNewUserByReact = (data) => {
+    return axios.post("/api/create-new-user", data);
+};
+export { handleLoginApi, getAllUsers, createNewUserByReact };