24 changed files with 1436 additions and 736 deletions
|
After Width: | Height: | Size: 35 KiB |
@ -1,6 +1,7 @@
|
||||
import i18n from "../const/i18n"; |
||||
|
||||
export const handleChangeLng = (lng) => { |
||||
console.log("Changing language to:", lng); |
||||
i18n.changeLanguage(lng); |
||||
localStorage.setItem("lng", lng); |
||||
}; |
||||
}; |
||||
|
||||
@ -0,0 +1,265 @@
|
||||
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') |
||||
|
||||
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, |
||||
password: newPassword, |
||||
} |
||||
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 || nameProp} onChange={(e) => setName(e.target.value)} /> |
||||
</FormGroup> |
||||
|
||||
<FormGroup> |
||||
<Label className="capitalize">ID Number</Label> |
||||
<Input type="text" value={idNumber || idNumberProp} onChange={(e) => setIdnumber(e.target.value)} /> |
||||
</FormGroup> |
||||
|
||||
<FormGroup> |
||||
<Label className="capitalize">Alamat</Label> |
||||
<Input type="text" value={address || addressProp} onChange={(e) => setAddres(e.target.value)} /> |
||||
</FormGroup> |
||||
|
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">Nomor Handphone</Label> |
||||
<Input type="text" value={noHp || noHpProp} onChange={(e) => setNohp(e.target.value)} /> |
||||
</FormGroup> |
||||
|
||||
<FormGroup> |
||||
<Label className="capitalize">Gender</Label> |
||||
<Input type="select" value={gender || genderProp} 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 || birthdayPlaceProp} onChange={(e) => setBirthdayplace(e.target.value)} /> |
||||
</FormGroup> |
||||
|
||||
<FormGroup> |
||||
<Label className="capitalize">Tanggal Lahir</Label> |
||||
<DatePicker style={{ width: "100%" }} value={birthdayDate} defaultValue={birthdayDateProp} 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 || userNameProp} onChange={(e) => setUserName(e.target.value)} /> |
||||
</FormGroup> |
||||
|
||||
<FormGroup> |
||||
<Label className="capitalize">Email</Label> |
||||
|
||||
<Input type="text" value={email || emailProp} 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> |
||||
) |
||||
} |
||||
|
||||
const renderFormSetting = () => { |
||||
return ( |
||||
<Form> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">Username</Label> |
||||
<Input type="text" value={userName || userNameProp} onChange={(e) => setUserName(e.target.value)} /> |
||||
</FormGroup> |
||||
|
||||
<FormGroup> |
||||
<Label className="capitalize">Email</Label> |
||||
|
||||
<Input type="text" value={email || emailProp} onChange={(e) => setEmail(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> |
||||
<NavItem> |
||||
<NavLink |
||||
onClick={() => { |
||||
setActiveTab("tab3"); |
||||
setTypeDialog("Setting"); |
||||
}} |
||||
active={activeTab === "tab3"} |
||||
> |
||||
Setting |
||||
</NavLink> |
||||
</NavItem> |
||||
</Nav> |
||||
<TabContent activeTab={activeTab}> |
||||
<TabPane tabId="tab1"> |
||||
{renderForm()} |
||||
</TabPane> |
||||
<TabPane tabId="tab2"> |
||||
{renderFormAccount()} |
||||
</TabPane> |
||||
<TabPane tabId="tab3"> |
||||
{renderFormSetting()} |
||||
</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,257 @@
|
||||
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 Setting = ({ 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("") |
||||
|
||||
|
||||
console.log('divisi', divisi) |
||||
console.log('divisi', role) |
||||
console.log('divisi', email) |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// console.log('userProfile', userProfile)
|
||||
|
||||
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.name);
|
||||
// setRole(userProfile?.role.name);
|
||||
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 result = await axios |
||||
.get(url, config) |
||||
.then((res) => res) |
||||
.catch((error) => error.response); |
||||
console.log("data User :", 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 </b></td> |
||||
<td> : {divisi}</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 Setting; |
||||
Loading…
Reference in new issue