Skip to content

Commit

Permalink
2/2/2023
Browse files Browse the repository at this point in the history
  • Loading branch information
@conghieutk1
conghieutk1 committed Feb 2, 2023
1 parent 4e500af commit 57304ef
Show file tree
Hide file tree
Showing 5 changed files with 327 additions and 9 deletions.
199 changes: 199 additions & 0 deletions src/containers/System/ModalEditUser.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

import React, { Component } from "react";
import { FormattedMessage } from "react-intl";
import { connect } from "react-redux";

import _ from "lodash";
class ModalEditUser extends Component {
constructor(props) {
super(props);
this.state = {
id: "",
email: "",
password: "",
firstName: "",
lastName: "",
address: "",
};
}

componentDidMount() {
let user = this.props.currentUser;
if (user && !_.isEmpty(user)) {
this.setState({
id: user.id,
email: user.email,
password: "harcode",
firstName: user.firstName,
lastName: user.lastName,
address: user.address,
});
}
// console.log("didmount edit modal ", this.props.currentUser);
}

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;
};
handleSaveUser = () => {
let isValid = this.checkValidInput();
if (isValid) {
this.props.editUser(this.state);
// console.log("check good state:", this.state);
}
};

render() {
// console.log("check props from parent: ", this.props);
return (
<Modal
isOpen={this.props.isOpen}
toggle={() => {
this.toggle();
}}
className={"modal-user-container"}
size="lg"
centered
>
<ModalHeader
toggle={() => {
this.toggle();
}}
>
Edit 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}
disabled
/>
</div>
<div className="input-container">
<label>Password</label>
<input
type="password"
onChange={(event) => {
this.handleOnChangeInput(event, "password");
}}
value={this.state.password}
disabled
/>
</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.handleSaveUser();
}}
className="px-3"
>
Save changes
</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)(ModalEditUser);
17 changes: 16 additions & 1 deletion src/containers/System/ModalUser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import React, { Component } from "react";
import { FormattedMessage } from "react-intl";
import { connect } from "react-redux";
import { emitter } from "../../utils/emitter";

class ModalUser extends Component {
constructor(props) {
super(props);
Expand All @@ -13,6 +15,7 @@ class ModalUser extends Component {
lastName: "",
address: "",
};
this.listenToEmitter();
}

componentDidMount() {}
Expand All @@ -21,6 +24,18 @@ class ModalUser extends Component {
this.props.toggleFromParent();
};

listenToEmitter() {
emitter.on("EVENT_CLEAR_MODAL_DATA", () => {
this.setState({
email: "",
password: "",
firstName: "",
lastName: "",
address: "",
});
});
}

handleOnChangeInput = (event, id) => {
//console.log(event.target.value, "id: ", id);

Expand Down Expand Up @@ -152,7 +167,7 @@ class ModalUser extends Component {
}}
className="px-3"
>
Save
Add new
</Button>{" "}
<Button
color="secondary"
Expand Down
91 changes: 86 additions & 5 deletions src/containers/System/UserManage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,24 @@ import React, { Component } from "react";
import { FormattedMessage } from "react-intl";
import { connect } from "react-redux";
import "./UserManage.scss";
import { getAllUsers, createNewUserByReact } from "../../services/userService";
import {
getAllUsers,
createNewUserByReact,
deleteUserByReact,
editUserByReact,
} from "../../services/userService";
import ModalUser from "./ModalUser";
import ModalEditUser from "./ModalEditUser";
import { emitter } from "../../utils/emitter";

class UserManage extends Component {
constructor(props) {
super(props);
this.state = {
arrUsers: [],
isOpenModalUser: false,
isOpenModalEditUser: false,
userEdit: {},
};
}

Expand Down Expand Up @@ -39,6 +48,12 @@ class UserManage extends Component {
});
};

toggleUserEditModal = () => {
this.setState({
isOpenModalEditUser: !this.state.isOpenModalEditUser,
});
};

createNewUser = async (data) => {
try {
let response = await createNewUserByReact(data);
Expand All @@ -49,14 +64,57 @@ class UserManage extends Component {
this.setState({
isOpenModalUser: false,
});
emitter.emit("EVENT_CLEAR_MODAL_DATA");
// truyen data
// emitter.emit("EVENT_CLEAR_MODAL_DATA", {id : 'abc'});
}
} catch (e) {
console.log(e);
}
};

handleDeleteUser = async (user) => {
console.log("delete ", user);
try {
let response = await deleteUserByReact(user.id);
if (response && response.errCode === 0) {
await this.getAllUserFromReact();
} else {
alert(response.errMessage);
}
} catch (e) {
console.log(e);
}
};

handleEditUser = (user) => {
console.log("edit ", user);
this.setState({
isOpenModalEditUser: true,
userEdit: user,
});
};

doEditUser = async (user) => {
try {
let response = await editUserByReact(user);
// console.log("response ", response);
if (response && response.errCode === 0) {
await this.getAllUserFromReact();
this.setState({
isOpenModalEditUser: false,
});
} else {
alert(response.errMessage);
}
} catch (e) {
console.log(e);
}
// console.log("click save user: ", user);
};
render() {
console.log("check state user ", this.state);
// console.log("check state user ", this.state);
// console.log("id ", this.state.arrUsers);
let arrUsers = this.state.arrUsers;
return (
<div className="users-container">
Expand All @@ -65,6 +123,15 @@ class UserManage extends Component {
toggleFromParent={this.toggleUserModal}
createNewUserFromParent={this.createNewUser}
/>
{this.state.isOpenModalEditUser && (
<ModalEditUser
isOpen={this.state.isOpenModalEditUser}
toggleFromParent={this.toggleUserEditModal}
currentUser={this.state.userEdit}
editUser={this.doEditUser}
/>
)}

<div className="title text-center">Manage users</div>
<div className="mx-1">
<button
Expand All @@ -89,16 +156,30 @@ class UserManage extends Component {
arrUsers.map((item, index) => {
return (
<>
<tr key={item.id}>
<tr key={index}>
<td>{item.email}</td>
<td>{item.firstName}</td>
<td>{item.lastName}</td>
<td>{item.address}</td>
<td>
<button className="btn-edit">
<button
className="btn-edit"
onClick={() =>
this.handleEditUser(
item
)
}
>
<i className="fas fa-pencil-alt"></i>
</button>
<button className="btn-delete">
<button
className="btn-delete"
onClick={() =>
this.handleDeleteUser(
item
)
}
>
<i className="fas fa-trash"></i>
</button>
</td>
Expand Down
Loading

0 comments on commit 57304ef

Please sign in to comment.