22/7/2023 22:55 final

conghieutk1 · Jul 22, 2023 · b478cb9 · b478cb9
1 parent d1f8061
commit b478cb9
Show file tree

Hide file tree

Showing 39 changed files with 2,038 additions and 167 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+    "plugins": ["macros"]
+}
diff --git a/babel-plugin-macros.config.js b/babel-plugin-macros.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+    "fontawesome-svg-core": {
+        license: "free",
+    },
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
         "react-flatpickr": "^3.10.7",
         "react-image-lightbox": "^5.1.1",
         "react-intl": "^5.20.2",
+        "react-loading-overlay": "1.0.1",
         "react-markdown-editor-lite": "^1.3.0",
         "react-number-format": "^4.6.4",
         "react-redux": "^7.2.4",

diff --git a/src/containers/App.js b/src/containers/App.js
@@ -21,6 +21,7 @@ import HomePage from "./HomePage/HomePage.js";
 import CustomScrollbars from "../components/CustomScrollbars";
 import DetailDoctor from "./Patient/Doctor/DetailDoctor";
 import Doctor from "../routes/Doctor";
+import VerifyEmailBooking from "./Patient/VerifyEmailBooking";
 
 class App extends Component {
     handlePersistorState = () => {
@@ -78,6 +79,10 @@ class App extends Component {
                                         path={path.DETAIL_DOCTOR}
                                         component={DetailDoctor}
                                     />
+                                    <Route
+                                        path={path.VERIFY_EMAIL_BOOKING}
+                                        component={VerifyEmailBooking}
+                                    />
                                 </Switch>
                             </CustomScrollbars>
                         </div>
@@ -105,7 +110,7 @@ class App extends Component {
                             pauseOnFocusLoss
                             draggable
                             pauseOnHover
-                            theme="dark"
+                            theme="light"
                         />
                     </div>
                 </Router>

diff --git a/src/containers/Auth/Login.js b/src/containers/Auth/Login.js
@@ -5,6 +5,7 @@ import * as actions from "../../store/actions";
 import { KeyCodeUtils } from "../../utils";
 import "./Login.scss";
 import { handleLoginApi } from "../../services/userService";
+import LoadingOverlay from "react-loading-overlay";
 
 class Login extends Component {
     constructor(props) {
@@ -14,10 +15,14 @@ class Login extends Component {
             password: "",
             showPassword: false,
             errMessage: "",
+            isShowLoading: false,
         };
     }
     componentDidMount() {
         document.addEventListener("keydown", this.handlerKeyDown);
+        this.setState({
+            isShowLoading: false,
+        });
     }
 
     componentWillUnmount() {
@@ -44,6 +49,9 @@ class Login extends Component {
     };
 
     handleLogin = async () => {
+        this.setState({
+            isShowLoading: true,
+        });
         this.setState({
             errMessage: "",
         });
@@ -64,6 +72,9 @@ class Login extends Component {
                 //Cookies.set("userInfo", data.user);
                 console.log("loging success");
             }
+            this.setState({
+                isShowLoading: false,
+            });
         } catch (e) {
             if (e.response) {
                 if (e.response.data) {
@@ -80,84 +91,92 @@ class Login extends Component {
         this.setState({
             showPassword: !this.state.showPassword,
         });
-        console.log(this.state.showPassword);
+        //console.log(this.state.showPassword);
     };
 
     render() {
         return (
-            <div className="login-background">
-                <div className="login-container">
-                    <div className="login-content row">
-                        <div className="col-12 text-center login-title">
-                            Login
-                        </div>
-                        <div className="col-12 form-group">
-                            <label>Username: </label>
-                            <input
-                                type="text"
-                                className="form-control login-input"
-                                placeholder="Enter your user name"
-                                value={this.state.username}
-                                onChange={(e) => this.handleOnChangeUserName(e)}
-                            />
-                        </div>
-                        <div className="col-12 form-group">
-                            <label>Password: </label>
-                            <div className="login-password">
+            <LoadingOverlay
+                active={this.state.isShowLoading}
+                spinner
+                text="Loading	..."
+            >
+                <div className="login-background">
+                    <div className="login-container">
+                        <div className="login-content row">
+                            <div className="col-12 text-center login-title">
+                                Login
+                            </div>
+                            <div className="col-12 form-group">
+                                <label>Username: </label>
                                 <input
-                                    type={
-                                        this.state.showPassword
-                                            ? "text"
-                                            : "password"
-                                    }
+                                    type="text"
                                     className="form-control login-input"
-                                    placeholder="Enter your password"
-                                    value={this.state.password}
+                                    placeholder="Enter your user name"
+                                    value={this.state.username}
                                     onChange={(e) =>
-                                        this.handleOnChangePassword(e)
+                                        this.handleOnChangeUserName(e)
                                     }
                                 />
-                                <span
-                                    onClick={() =>
-                                        this.handleShowHidePassword()
-                                    }
-                                >
-                                    <i
-                                        className={
+                            </div>
+                            <div className="col-12 form-group">
+                                <label>Password: </label>
+                                <div className="login-password">
+                                    <input
+                                        type={
                                             this.state.showPassword
-                                                ? "fas fa-eye show-password"
-                                                : "fas fa-eye-slash show-password"
+                                                ? "text"
+                                                : "password"
+                                        }
+                                        className="form-control login-input"
+                                        placeholder="Enter your password"
+                                        value={this.state.password}
+                                        onChange={(e) =>
+                                            this.handleOnChangePassword(e)
                                         }
-                                    ></i>
+                                    />
+                                    <span
+                                        onClick={() =>
+                                            this.handleShowHidePassword()
+                                        }
+                                    >
+                                        <i
+                                            className={
+                                                this.state.showPassword
+                                                    ? "fas fa-eye show-password"
+                                                    : "fas fa-eye-slash show-password"
+                                            }
+                                        ></i>
+                                    </span>
+                                </div>
+                            </div>
+                            <div className="col-12" style={{ color: "red" }}>
+                                {this.state.errMessage}
+                            </div>
+                            <div className="col-12">
+                                <button
+                                    className="btn-login"
+                                    onClick={() => this.handleLogin()}
+                                >
+                                    Login
+                                </button>
+                            </div>
+                            <div className="col-12">
+                                <span className="forgot-password">
+                                    Forgot your password?
                                 </span>
                             </div>
-                        </div>
-                        <div className="col-12" style={{ color: "red" }}>
-                            {this.state.errMessage}
-                        </div>
-                        <div className="col-12">
-                            <button
-                                className="btn-login"
-                                onClick={() => this.handleLogin()}
-                            >
-                                Login
-                            </button>
-                        </div>
-                        <div className="col-12">
-                            <span className="forgot-password">
-                                Forgot your password?
-                            </span>
-                        </div>
-                        <div className="col-12 text-center login-with mt-3">
-                            <span className="">Or login with:</span>
-                        </div>
-                        <div className="col-12 social-login">
-                            <i className="fab fa-facebook-f social-icon fb"></i>
-                            <i className="fab fa-google-plus-g social-icon gg"></i>
+                            <div className="col-12 text-center login-with mt-3">
+                                <span className="">Or login with:</span>
+                            </div>
+                            <div className="col-12 social-login">
+                                <i className="fab fa-facebook-f social-icon fb"></i>
+                                <i className="fab fa-google-plus-g social-icon gg"></i>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
+            </LoadingOverlay>
         );
     }
 }

diff --git a/src/containers/Header/Header.js b/src/containers/Header/Header.js
@@ -24,7 +24,7 @@ class Header extends Component {
         let { userInfo } = this.props;
         //let userInfo = Cookies.get("userInfo");
         let menu = [];
-        console.log("check userInfo = ", this.props);
+        //console.log("check userInfo = ", this.props);
         if (userInfo && !_.isEmpty(userInfo)) {
             let role = userInfo.roleId;
             if (role === USER_ROLE.ADMIN) {

diff --git a/src/containers/Header/menuApp.js b/src/containers/Header/menuApp.js
@@ -23,10 +23,14 @@ export const adminMenu = [
             },
             {
                 //Quản lý kế hoạch khám bệnh của bác sỹ
-
                 name: "menu.doctor.manage-schedule",
                 link: "/doctor/manage-schedule",
             },
+            {
+                //Quản lý lịch hẹn khám bệnh của bác sỹ
+                name: "menu.doctor.manage-booking",
+                link: "/doctor/manage-booking",
+            },
         ],
     },
     {
@@ -67,10 +71,14 @@ export const doctorMenu = [
         menus: [
             {
                 //Quản lý kế hoạch khám bệnh của bác sỹ
-
                 name: "menu.doctor.manage-schedule",
                 link: "/doctor/manage-schedule",
             },
+            {
+                //Quản lý lịch hẹn khám bệnh của bác sỹ
+                name: "menu.doctor.manage-booking",
+                link: "/doctor/manage-booking",
+            },
         ],
     },
 ];
diff --git a/src/containers/HomePage/HomeHeader.js b/src/containers/HomePage/HomeHeader.js
@@ -36,12 +36,10 @@ class HomeHeader extends Component {
                 <div
                     className="home-header-container"
                     style={{
-                        backgroundColor: this.props.isShowDetailHeader
-                            ? "white"
-                            : "#F8F6F4",
+                        backgroundColor: "white",
                         border: this.props.isShowDetailHeader
                             ? ""
-                            : "3px solid #ddd",
+                            : "1px solid #ddd",
                     }}
                 >
                     <div className="home-header-content">

diff --git a/src/containers/HomePage/HomeHeader.scss b/src/containers/HomePage/HomeHeader.scss
@@ -5,7 +5,7 @@
     position: sticky;
     top: 0;
     //background-color: white;
-    z-index: 2000;
+    z-index: 100;
     .home-header-content {
         width: 100%;
         height: 100%;

diff --git a/src/containers/Patient/DefaultClass.js b/src/containers/Patient/DefaultClass.js
@@ -0,0 +1,33 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { FormattedMessage } from "react-intl";
+
+class DefaultClass extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+
+    async componentDidMount() {}
+
+    async componentDidUpdate(prevProps, prevState, snapshot) {
+        if (prevProps.language !== this.props.language) {
+        }
+    }
+
+    render() {
+        return <div></div>;
+    }
+}
+
+const mapStateToProps = (state) => {
+    return {
+        language: state.app.language,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {};
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(DefaultClass);
diff --git a/src/containers/Patient/Doctor/DoctorExtraInfor.js b/src/containers/Patient/Doctor/DoctorExtraInfor.js
@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 import "./DoctorExtraInfor.scss";
 import NumberFormat from "react-number-format";
-import { LANGUAGES, dateFormat } from "../../../utils";
+import { LANGUAGES } from "../../../utils";
 import { getExtraInforDoctorById } from "../../../services/userService";
 import { FormattedMessage } from "react-intl";
 
@@ -61,7 +61,10 @@ class DoctorExtraInfor extends Component {
                 <div className="content-down">
                     {isShowDetailInfor === false && (
                         <div className="price-1">
-                            GIÁ KHÁM:
+                            <div className="fee">
+                                <FormattedMessage id="patient.extra-infor.price" />
+                                :
+                            </div>
                             {extraInfor &&
                                 extraInfor.priceTypeData &&
                                 language === LANGUAGES.VI && (

diff --git a/src/containers/Patient/Doctor/DoctorExtraInfor.scss b/src/containers/Patient/Doctor/DoctorExtraInfor.scss
@@ -22,12 +22,14 @@
         margin-top: 10px;
         .btn-showhide {
             color: #45c3d2;
-            margin: 4px;
+            //margin: 4px;
             cursor: pointer;
         }
         .price-1 {
+            display: flex;
             .currency {
                 margin: 0px 3px;
+                //float: right;
             }
         }
 
@@ -44,9 +46,14 @@
             padding: 5px;
             background-color: #f8f8f8;
             .price {
+                display: flex;
                 padding-bottom: 5px;
+                justify-content: space-between; /* Căn phải và căn trái */
+                align-items: center;
+
                 .right {
-                    float: right;
+                    padding-right: 5px;
+                    text-align: justify;
                 }
             }
             .note {