Merge pull request 'Update Hierarchy' (#21) from Dev-Farhan into staging

Reviewed-on: ordo/adw-frontend#21
Reviewed-by: ibnu <ibnu@mail.com>

src/views/SimproV2/CreatedProyek/DIalogHierarchy.js

@@ -9,7 +9,7 @@ import { HIERARCHY_FTTH_DELETE, HIERARCHY_FTTH_TREE, VERSION_GANTT_SEARCH, HIERA
 import axios from "../../../const/interceptorApi"
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import DialogUserGantt from './DialogUserGantt';
-import DialogForm from './DIalogFormHierarchy'
+import DialogForm from './DialogFormHierarchy'
 import DialogFormGantt from './DialogFormGantt';
 import DialogGantt from './DialogGantt';
 import { useTranslation } from 'react-i18next';
@@ -195,9 +195,9 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
             <Tooltip title="Tambah Gantt">
               <Button size={"sm"} color='primary' onClick={() => handleAddGant(text.id)}><i className="fa fa-gears"></i></Button>
             </Tooltip>{" "}
-            {text.dataGantt && (<Tooltip title="Detail Gantt">
+            {text.dataGantt && (<><Tooltip title="Detail Gantt">
-              <Button size={"sm"} color='info' onClick={() => handleViewGant(text.id)}><i className="fa fa-info"></i></Button>
+              <Button size={"sm"} color='info' style={{ color: "#FFFFFF" }} onClick={() => handleViewGant(text.id)}><i className="fa fa-eye"></i></Button>
-            </Tooltip>)}
+            </Tooltip>{" "}</>)}
           </>
         ,
       },

src/views/SimproV2/CreatedProyek/DialogFormGantt.js

@@ -18,7 +18,6 @@ const DialogFormGantt = ({ openDialog, closeDialog, toggleDialog, idTask, parent
   const [name, setName] = useState("")
   const [description, setDesctription] = useState("")
   const [calculationType, setCalculationType] = useState("detail")
-  console.log('parentId', parentId);
   const handleCLearData = () => {
     setId(0)
     setName("")
@@ -44,8 +43,6 @@ const DialogFormGantt = ({ openDialog, closeDialog, toggleDialog, idTask, parent
       hierarchy_ftth_id: parentId
 
     }
-
-    console.log('formData', formData);
     const result = await axios
       .post(VERSION_GANTT_ADD, formData, HEADER)
       .then(res => res)

src/views/SimproV2/CreatedProyek/index.js

@@ -41,6 +41,7 @@ import {
 	MATERIAL_RESOURCE_SEARCH,
 	USER_SEARCH,
 	PROJECT_CHARTER_SEARCH,
+	HIERARCHY_FTTH_SEARCH,
 	TOOLS_RESOURCE_LIST,
 	MATERIAL_RESOURCE_LIST,
 	PROYEK_GET_ID,
@@ -65,7 +66,7 @@ import DialogTableTools from "./DialogTableTools";
 import DialogDocument from "./DialogDocument";
 import DialogInitDocument from "./DialogInitDocument";
 import DialogGantt from "./DialogGantt";
-import DialogHierarchy from "./DIalogHierarchy";
+import DialogHierarchy from "./DialogHierarchy";
 // import DialogAsignHr from './AsignHrProject';
 import AssignHrProject from "./AsignHrProject";
 import AssignK3Project from "./AssignK3Project";
@@ -311,7 +312,7 @@ const CreatedProyek = ({ params, ...props }) => {
 		const payload = {
 			columns: [
 				{
-					name: "proyek_id",
+					name: "project_id",
 					logic_operator: "=",
 					value: idTask,
 					operator: "AND",
@@ -319,10 +320,9 @@ const CreatedProyek = ({ params, ...props }) => {
 			],
 		};
 		const result = await axios
-			.post(VERSION_GANTT_SEARCH, payload, HEADER)
+			.post(HIERARCHY_FTTH_SEARCH, payload, HEADER)
 			.then((res) => res)
 			.catch((error) => error.response);
-
 		if (result && result.status == 200) {
 			setDataHierarchy(result.data.data);
 			setLoadHierarchy(false);
@@ -1002,13 +1002,13 @@ const CreatedProyek = ({ params, ...props }) => {
 	const popupMenuGantt = (text, record) => {
 		return (
 			<div>
-				{loadVersionGantt && (
+				{text.type_proyek_id !== 9 && loadVersionGantt && (
 					<div className="menu-list">
 						<Skeleton active />
 					</div>
 				)}
 
-				{!loadVersionGantt && (
+				{(!loadVersionGantt && text.type_proyek_id !== 9) && (
 					<>
 						{dataVersionGantt.slice(0, 8).map((res) => (
 							<Link to={`/projects/${res.id}/${text.id}/gantt`}>
@@ -1032,6 +1032,8 @@ const CreatedProyek = ({ params, ...props }) => {
 								}}
 							></div>
 						)}
+					</>
+				)}
 				{text.type_proyek_id == 9 ?
 					<div
 						className="menu-list"
@@ -1051,8 +1053,6 @@ const CreatedProyek = ({ params, ...props }) => {
 						</span>
 						<span className="menu-text">More Gantt Menu ...</span>
 					</div>}
-					</>
-				)}
 			</div>
 		);
 	};

src/views/SimproV2/Profile/DialogForm.js

@@ -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;

src/views/SimproV2/Profile/index.js

@@ -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 &nbsp; </b>  </td>
+                            <td> : &nbsp;{name}</td>
+                        </tr>
+                        <tr>
+                            <td><b>Username &nbsp; </b>  </td>
+                            <td> : &nbsp;{userName}</td>
+                        </tr>
+                        <tr>
+                            <td><b>Email &nbsp; </b></td>
+                            <td>: &nbsp;{email}</td>
+                        </tr>
+
+                        <tr>
+                            <td><b>Password &nbsp;  </b> &nbsp;</td>
+                            <td> : &nbsp;**********</td>
+
+                        </tr>
+                        <tr>
+                            <td><b>Nomor Handphone     &nbsp; </b></td>
+                            <td>: &nbsp; {noHp}</td>
+                        </tr>
+                        <tr>
+                            <td><b>Alamat      &nbsp; </b></td>
+                            <td>: &nbsp; {address}</td>
+                        </tr>
+                        <tr>
+                            <td><b>ID Number      &nbsp; </b></td>
+                            <td>: &nbsp; {idNumber}</td>
+                        </tr>
+                        <tr>
+                            <td><b>Gender      &nbsp; </b></td>
+                            <td> : &nbsp; {gender}</td>
+                        </tr>
+                        <tr>
+                            <td><b>Divisi      &nbsp; </b></td>
+                            <td> : &nbsp; {divisi}</td>
+                        </tr>
+                        <tr>
+                            <td><b>Employee Type     &nbsp; </b></td>
+                            <td> : &nbsp; {employeeType}</td>
+                        </tr>
+                        <tr>
+                            <td><b>Role      &nbsp; </b></td>
+                            <td>: &nbsp; {role}</td>
+                        </tr>
+                        <tr>
+                            <td><b>Tempat Lahir      &nbsp;</b></td>
+                            <td>: &nbsp; {birthdayPlace}</td>
+                        </tr>
+                        <tr>
+                            <td><b>Tanggal Lahir      &nbsp; </b></td>
+                            <td>: &nbsp; {birthdayDate}</td>
+                        </tr>
+                    </tbody>
+                    <br />
+                </Col>
+            </Card>
+        </div>
+    )
+}
+
+export default Profile;