Wahyu Ramadhan
2 years ago
5 changed files with 560 additions and 59 deletions
@ -0,0 +1,244 @@
|
||||
import React, { useEffect, useState } from 'react' |
||||
import { |
||||
Modal, ModalHeader, ModalBody, ModalFooter, |
||||
Button, Form, FormGroup, Label, Input, Col, Row, |
||||
Nav, NavItem, NavLink, TabContent, TabPane |
||||
} from 'reactstrap'; |
||||
|
||||
import { Select, DatePicker } from 'antd'; |
||||
|
||||
const { Option } = Select |
||||
|
||||
|
||||
|
||||
const DialogForm = ({ |
||||
openDialog, |
||||
closeDialog, |
||||
toggleDialog, |
||||
typeDialogProp, |
||||
roleList, |
||||
nameProp, |
||||
noHpProp, |
||||
idNumberProp, |
||||
genderProp, |
||||
birthdayPlaceProp, |
||||
birthdayDateProp, |
||||
addressProp, |
||||
emailProp, |
||||
userNameProp, |
||||
}) => { |
||||
const token = window.localStorage.getItem('token'); |
||||
const [typeDialog, setTypeDialog] = useState(typeDialogProp) |
||||
const [userName, setUserName] = useState(userNameProp) |
||||
const [name, setName] = useState(nameProp) |
||||
const [noHp, setNohp] = useState(noHpProp) |
||||
const [gender, setGender] = useState(genderProp) |
||||
const [address, setAddres] = useState(addressProp) |
||||
const [birthdayPlace, setBirthdayplace] = useState(birthdayPlaceProp) |
||||
const [birthdayDate, setBirthdaydate] = useState(birthdayDateProp) |
||||
const [idNumber, setIdnumber] = useState(idNumberProp) |
||||
const [email, setEmail] = useState(emailProp) |
||||
const [password, setPassword] = useState('') |
||||
const [oldPassword, setOldPassword] = useState('') |
||||
const [newPassword, setNewPassword] = useState('') |
||||
const [newPasswordConfirm, setNewPasswordConfirm] = useState('') |
||||
const [activeTab, setActiveTab] = useState('tab1') |
||||
|
||||
useEffect(() => { |
||||
setUserName(userNameProp); |
||||
setName(nameProp); |
||||
setNohp(noHpProp); |
||||
setGender(genderProp); |
||||
setAddres(addressProp); |
||||
setBirthdayplace(birthdayPlaceProp); |
||||
setIdnumber(idNumberProp); |
||||
setEmail(emailProp); |
||||
}, [userNameProp, nameProp, noHpProp, genderProp, addressProp, birthdayPlaceProp, idNumberProp, emailProp]); |
||||
|
||||
const handleSave = () => { |
||||
let data = ''; |
||||
if (typeDialog === "Personal") { |
||||
data = { |
||||
name: name, |
||||
phone_number: noHp, |
||||
gender: gender, |
||||
ktp_number: idNumber, |
||||
birth_place: birthdayPlace, |
||||
address: address, |
||||
}; |
||||
if (birthdayDate) { |
||||
data.birth_date = birthdayDate; |
||||
} |
||||
closeDialog('profile', data) |
||||
} else if (typeDialog === "Account") { |
||||
data = { |
||||
username: userName, |
||||
email: email, |
||||
}; |
||||
if (newPassword) { |
||||
data.password = newPassword; |
||||
} |
||||
console.log(data); |
||||
closeDialog('profile', data) |
||||
} |
||||
} |
||||
|
||||
const handleCancel = () => { |
||||
closeDialog('cancel', 'none') |
||||
} |
||||
|
||||
const setupSelectRole = () => { |
||||
return ( |
||||
<> |
||||
{roleList.map((val, index) => { |
||||
return ( |
||||
<Option key={index} value={val.id}>{val.name}</Option> |
||||
) |
||||
})} |
||||
</> |
||||
) |
||||
} |
||||
|
||||
|
||||
const renderForm = () => { |
||||
return ( |
||||
<Form> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">Nama</Label> |
||||
<Input type="text" value={name} onChange={(e) => setName(e.target.value)} /> |
||||
</FormGroup> |
||||
|
||||
<FormGroup> |
||||
<Label className="capitalize">ID Number</Label> |
||||
<Input type="text" value={idNumber} onChange={(e) => setIdnumber(e.target.value)} /> |
||||
</FormGroup> |
||||
|
||||
<FormGroup> |
||||
<Label className="capitalize">Alamat</Label> |
||||
<Input type="text" value={address} onChange={(e) => setAddres(e.target.value)} /> |
||||
</FormGroup> |
||||
|
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">Nomor Handphone</Label> |
||||
<Input type="text" value={noHp} onChange={(e) => setNohp(e.target.value)} /> |
||||
</FormGroup> |
||||
|
||||
<FormGroup> |
||||
<Label className="capitalize">Gender</Label> |
||||
<Input type="select" value={gender} onChange={(e) => setGender(e.target.value)}> |
||||
<option value="">Please select</option> |
||||
<option value="Laki-laki">Male</option> |
||||
<option value="Perempuan">Female</option> |
||||
</Input> |
||||
</FormGroup> |
||||
|
||||
<FormGroup> |
||||
<Label className="capitalize">Tempat Lahir</Label> |
||||
<Input type="text" value={birthdayPlace} onChange={(e) => setBirthdayplace(e.target.value)} /> |
||||
</FormGroup> |
||||
|
||||
<FormGroup> |
||||
<Label className="capitalize">Tanggal Lahir</Label> |
||||
<DatePicker style={{ width: "100%" }} value={birthdayDate} defaultValue={birthdayDate} onChange={(date, dateString) => setBirthdaydate(date)} /> |
||||
</FormGroup> |
||||
|
||||
</Col> |
||||
</Row> |
||||
</Form> |
||||
) |
||||
} |
||||
|
||||
const renderFormAccount = () => { |
||||
return ( |
||||
<Form> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">Username</Label> |
||||
<Input type="text" value={userName} onChange={(e) => setUserName(e.target.value)} /> |
||||
</FormGroup> |
||||
|
||||
<FormGroup> |
||||
<Label className="capitalize">Email</Label> |
||||
|
||||
<Input type="text" value={email} onChange={(e) => setEmail(e.target.value)} /> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">Old password</Label> |
||||
<Input type="text" value={oldPassword} onChange={(e) => setOldPassword(e.target.value)} /> |
||||
</FormGroup> |
||||
|
||||
<FormGroup> |
||||
<Label className="capitalize">New password</Label> |
||||
<Input type="text" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} /> |
||||
</FormGroup> |
||||
|
||||
<FormGroup> |
||||
<Label className="capitalize">Confirm new password</Label> |
||||
<Input type="text" value={newPasswordConfirm} onChange={(e) => setNewPasswordConfirm(e.target.value)} /> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</Form> |
||||
) |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize" toggle={closeDialog}> |
||||
Update {typeDialog == "Personal" ? `Personal` : "Account"} Data |
||||
</ModalHeader> |
||||
<ModalBody> |
||||
<Nav tabs> |
||||
<NavItem> |
||||
<NavLink |
||||
onClick={() => { |
||||
setActiveTab("tab1"); |
||||
setTypeDialog("Personal"); |
||||
}} |
||||
active={activeTab === "tab1"} |
||||
> |
||||
Personal |
||||
</NavLink> |
||||
</NavItem> |
||||
<NavItem> |
||||
<NavLink |
||||
onClick={() => { |
||||
setActiveTab("tab2"); |
||||
setTypeDialog("Account"); |
||||
}} |
||||
active={activeTab === "tab2"} |
||||
> |
||||
Account |
||||
</NavLink> |
||||
</NavItem> |
||||
</Nav> |
||||
<TabContent activeTab={activeTab}> |
||||
<TabPane tabId="tab1"> |
||||
{renderForm()} |
||||
</TabPane> |
||||
<TabPane tabId="tab2"> |
||||
{renderFormAccount()} |
||||
</TabPane> |
||||
</TabContent> |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => handleSave()}>{typeDialog == "Profile" ? `Profile` : "Save"}</Button> {' '} |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</> |
||||
) |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
export default DialogForm; |
||||
@ -0,0 +1,260 @@
|
||||
import * as XLSX from 'xlsx'; |
||||
import React, { useState, useEffect, useMemo } from 'react'; |
||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||
import axios from "../../../const/interceptorApi" |
||||
import { Card, CardBody, CardHeader, Col, Row, Input, Table, Button } from 'reactstrap'; |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
import { Pagination, Tooltip } from 'antd'; |
||||
import { USER_EDIT, SATUAN_ADD, SATUAN_EDIT, SATUAN_DELETE, SATUAN_SEARCH } from '../../../const/ApiConst'; |
||||
import profile from '../../../assets/img/profile.png' |
||||
import DialogForm from './DialogForm' |
||||
import { ROLE_SEARCH, BASE_OSPRO } from '../../../const/ApiConst' |
||||
|
||||
|
||||
|
||||
|
||||
const Profile = ({ params }) => { |
||||
const token = localStorage.getItem("token") |
||||
const config = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
|
||||
const pageName = params.name; |
||||
|
||||
|
||||
|
||||
|
||||
const [openDialog, setOpenDialog] = useState(false) |
||||
const [typeDialog, setTypeDialog] = useState('Personal') |
||||
const [id, setId] = useState(0) |
||||
const [roleList, setRoleList] = useState([]) |
||||
const [userProfile, setUserprofile] = useState(null) |
||||
const [userName, setUserName] = useState("") |
||||
const [name, setName] = useState('') |
||||
const [noHp, setNohp] = useState("") |
||||
const [gender, setGender] = useState("") |
||||
const [address, setAddres] = useState("") |
||||
const [birthdayPlace, setBirthdayplace] = useState("") |
||||
const [birthdayDate, setBirthdaydate] = useState("") |
||||
const [idNumber, setIdnumber] = useState("") |
||||
const [divisi, setDivisi] = useState("") |
||||
const [role, setRole] = useState("") |
||||
const [email, setEmail] = useState("") |
||||
const [employeeType, setEmployeeType] = useState("") |
||||
|
||||
useEffect(() => { |
||||
getDataProfileUser(); |
||||
getRoleList() |
||||
}, []) |
||||
|
||||
useEffect(() => { |
||||
if (userProfile && userProfile != {}) { |
||||
setId(userProfile?.id) |
||||
setUserName(userProfile?.username); |
||||
setName(userProfile?.name); |
||||
setEmail(userProfile?.email); |
||||
setNohp(userProfile?.phone_number); |
||||
setAddres(userProfile?.address); |
||||
setIdnumber(userProfile?.ktp_number); |
||||
setGender(userProfile?.gender); |
||||
setDivisi(userProfile?.divisi_id); |
||||
setRole(userProfile?.role_id); |
||||
setBirthdayplace(userProfile?.birth_place); |
||||
setBirthdaydate(userProfile?.birth_date); |
||||
setEmployeeType(userProfile?.employee_type); |
||||
|
||||
} |
||||
}, [userProfile]) |
||||
|
||||
const handleOpenDialog = (type) => { |
||||
setOpenDialog(true) |
||||
setTypeDialog(type) |
||||
} |
||||
|
||||
const handleCloseDialog = (type, data) => { |
||||
if (type === "profile") { |
||||
saveProfile(data); |
||||
} |
||||
setOpenDialog(false) |
||||
} |
||||
|
||||
const saveProfile = async (data) => { |
||||
|
||||
let urlEdit = USER_EDIT(id) |
||||
const formData = data |
||||
|
||||
const result = await axios.put(urlEdit, formData, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
getDataProfileUser(); |
||||
NotificationManager.success(`Data resource berhasil diedit`, 'Success!!'); |
||||
} else { |
||||
NotificationManager.error(`Data resource gagal di edit`, `Failed!!`); |
||||
} |
||||
} |
||||
|
||||
const toggleAddDialog = () => { |
||||
setOpenDialog(!openDialog) |
||||
} |
||||
|
||||
const getRoleList = async () => { |
||||
const formData = { |
||||
"paging": { "start": 0, "length": -1 }, |
||||
"orders": { "columns": ["id"], "ascending": false } |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(ROLE_SEARCH, formData, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
setRoleList(result.data.data); |
||||
} |
||||
} |
||||
|
||||
const getDataProfileUser = async () => { |
||||
const id = localStorage.getItem("user_id") |
||||
|
||||
const url = `${BASE_OSPRO}/api/human-resource/edit/${id}` |
||||
// const payload = {
|
||||
// columns: [
|
||||
// {
|
||||
// name: "name",
|
||||
// logic_operator: "ilike",
|
||||
// value: 'admin',
|
||||
// operator: "AND",
|
||||
// },
|
||||
// ],
|
||||
// joins: [
|
||||
// {
|
||||
// name: "m_divisi",
|
||||
// column_join: "id",
|
||||
// column_results: ["name"],
|
||||
// },
|
||||
// ]
|
||||
// };
|
||||
|
||||
const result = await axios |
||||
.get(url, config) |
||||
.then((res) => res) |
||||
.catch((error) => error.response); |
||||
console.log(result); |
||||
if (result && result.data && result.data.code == 200) { |
||||
let dataRes = result.data.data; |
||||
setUserprofile(dataRes); |
||||
} else { |
||||
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); |
||||
} |
||||
}; |
||||
|
||||
|
||||
|
||||
return ( |
||||
<div> |
||||
<NotificationContainer /> |
||||
<DialogForm |
||||
openDialog={openDialog} |
||||
closeDialog={handleCloseDialog} |
||||
toggleDialog={() => toggleAddDialog} |
||||
typeDialogProp={typeDialog} |
||||
roleList={roleList} |
||||
nameProp={name} |
||||
noHpProp={noHp} |
||||
idNumberProp={idNumber} |
||||
genderProp={gender} |
||||
divisiProp={divisi} |
||||
birthdayPlaceProp={birthdayPlace} |
||||
birthdayDateProp={birthdayDate} |
||||
addressProp={address} |
||||
emailProp={email} |
||||
userNameProp={userName} |
||||
/> |
||||
|
||||
<Card> |
||||
<Row style={{ padding: '10px' }}> |
||||
<Col md={11}> |
||||
<img src={profile} height="80" width="80" /> |
||||
</Col> |
||||
<Col md={1}> |
||||
<Button color="primary" onClick={() => handleOpenDialog('Personal')}>Edit Profil</Button> |
||||
</Col> |
||||
</Row> |
||||
</Card> |
||||
|
||||
<Card> |
||||
<Col> |
||||
<tr> |
||||
<td><b>Profile Setting</b></td> |
||||
</tr> |
||||
</Col> |
||||
<Col> |
||||
<tbody> |
||||
<tr> |
||||
<td><b>Nama </b> </td> |
||||
<td> : {name}</td> |
||||
</tr> |
||||
<tr> |
||||
<td><b>Username </b> </td> |
||||
<td> : {userName}</td> |
||||
</tr> |
||||
<tr> |
||||
<td><b>Email </b></td> |
||||
<td>: {email}</td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td><b>Password </b> </td> |
||||
<td> : **********</td> |
||||
|
||||
</tr> |
||||
<tr> |
||||
<td><b>Nomor Handphone </b></td> |
||||
<td>: {noHp}</td> |
||||
</tr> |
||||
<tr> |
||||
<td><b>Alamat </b></td> |
||||
<td>: {address}</td> |
||||
</tr> |
||||
<tr> |
||||
<td><b>ID Number </b></td> |
||||
<td>: {idNumber}</td> |
||||
</tr> |
||||
<tr> |
||||
<td><b>Gender </b></td> |
||||
<td> : {gender}</td> |
||||
</tr> |
||||
<tr> |
||||
<td><b>Divisi </b></td> |
||||
<td> : {divisi}</td> |
||||
</tr> |
||||
<tr> |
||||
<td><b>Employee Type </b></td> |
||||
<td> : {employeeType}</td> |
||||
</tr> |
||||
<tr> |
||||
<td><b>Role </b></td> |
||||
<td>: {role}</td> |
||||
</tr> |
||||
<tr> |
||||
<td><b>Tempat Lahir </b></td> |
||||
<td>: {birthdayPlace}</td> |
||||
</tr> |
||||
<tr> |
||||
<td><b>Tanggal Lahir </b></td> |
||||
<td>: {birthdayDate}</td> |
||||
</tr> |
||||
</tbody> |
||||
<br /> |
||||
</Col> |
||||
</Card> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default Profile; |
||||
Loading…
Reference in new issue