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