ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update divisi parent and childern

pull/1/head
farhantock 10 months ago
parent
cb5d3b00b3
commit
81b39a16ec
2 changed files with 145 additions and 69 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      src/views/SimproV2/Divisi/DialogForm.js
  2. 180
      src/views/SimproV2/Divisi/index.js

34
src/views/SimproV2/Divisi/DialogForm.js
Unescape View File

@ -30,10 +30,18 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
setName(dataEdit.name)
setParent(dataEdit.parent)
setColor(dataEdit.color)
setParent(dataEdit.parent);
setSelectedCompany(dataEdit.company_id);
} else if (typeDialog === "addChild") {
setParent(dataEdit.id);
setColor(dataEdit.color)
setSelectedCompany(dataEdit.company_id);
} else {
setId(0)
setColor('')
setDescription('')
setParent(null)
setSelectedCompany(null)
}
}, [dataEdit, openDialog])
@ -43,15 +51,16 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
return true;
}
}
const handleSave = () => {
let data = '';
const err = validation();
if (!err) {
if (role_name === 'Super Admin') {
company_id = selectedCompany
}
if (typeDialog === "Save") {
if (role_name === 'Super Admin') {
company_id = selectedCompany
}
data = {
name,
description,
@ -60,10 +69,18 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
company_id: company_id
}
closeDialog('save', data);
} else {
if (role_name === 'Super Admin') {
company_id = selectedCompany
}
} else if (typeDialog === "addChild") {
data = {
parent: parent,
name: name,
description,
color,
company_id: company_id
};
closeDialog('save', data);
} else if (typeDialog === "Edit") {
data = {
id,
name,
@ -82,6 +99,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
setSelectedCompany(null)
}
}
const handleCancel = () => {
closeDialog('cancel', 'none')
setId(0)
@ -125,7 +143,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
>
{dataDivisions.map((res, idx) => (
<Option key={res['id']} value={res['id']}>{res['displayName']}</Option>
<Option key={res['id']} value={res['id']}>{res['name']}</Option>
))}
</Select>
</FormGroup>

180
src/views/SimproV2/Divisi/index.js
Unescape View File

@ -1,12 +1,12 @@
import * as XLSX from 'xlsx';
import DialogForm from './DialogForm';
import React, { useState, useEffect } from 'react';
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 } from 'reactstrap';
import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
import { DIVISI_LIST, DIVISI_ADD, DIVISI_EDIT, DIVISI_DELETE, DIVISI_SEARCH, COMPANY_MANAGEMENT_LIST } from '../../../const/ApiConst';
import { NotificationContainer, NotificationManager } from 'react-notifications';
import { Pagination, Button, Tooltip } from 'antd';
import { Pagination, Button, Tooltip, Table, Spin } from 'antd';
import { useTranslation } from 'react-i18next';
@ -48,6 +48,7 @@ const ProjectType = ({ params, ...props }) => {
const [typeDialog, setTypeDialog] = useState('Save')
const [dataDivisions, setDataDivisions] = useState([])
const [listCompany, setListCompany] = useState([])
const [loading, setLoading] = useState(true)
const { t } = useTranslation()
const column = [
role_name === 'Super Admin' ? { name: t('company') } : null,
@ -56,7 +57,7 @@ const ProjectType = ({ params, ...props }) => {
{ name: t('color') },
].filter(column => column && column.name);
useEffect(() => {
getDataProjectType();
getDataDivisi();
}, [currentPage, rowsPerPage, search])
useEffect(() => {
@ -93,20 +94,19 @@ const ProjectType = ({ params, ...props }) => {
}
]
},
columns: [],
"columns": [],
"orders": {
"ascending": true,
"columns": [
'name'
'id'
]
},
"paging": {
"length": 0,
"start": -1
"length": -1,
"start": 0
},
'joins': []
}
if (role_name !== "Super Admin") {
payload.columns.push(
{ "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" },
@ -122,6 +122,7 @@ const ProjectType = ({ params, ...props }) => {
{ name: "company_name", logic_operator: "~*", value: search, table_name: "m_company" }
)
}
const listDivions = await axios
.post(DIVISI_SEARCH, payload, HEADER)
.then(res => res)
@ -139,7 +140,7 @@ const ProjectType = ({ params, ...props }) => {
NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
}
}
const getDataProjectType = async () => {
const getDataDivisi = async () => {
let start = 0;
if (currentPage !== 1 && currentPage > 1) {
start = currentPage * rowsPerPage - rowsPerPage;
@ -156,11 +157,11 @@ const ProjectType = ({ params, ...props }) => {
}
]
},
columns: [],
"columns": [],
"orders": {
"ascending": true,
"columns": [
'name'
'id'
]
},
"paging": {
@ -169,7 +170,6 @@ const ProjectType = ({ params, ...props }) => {
},
'joins': []
}
if (role_name !== "Super Admin") {
payload.columns.push(
{ "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" },
@ -185,6 +185,7 @@ const ProjectType = ({ params, ...props }) => {
{ name: "company_name", logic_operator: "~*", value: search, table_name: "m_company" }
)
}
const result = await axios
.post(DIVISI_SEARCH, payload, HEADER)
.then(res => res)
@ -194,8 +195,10 @@ const ProjectType = ({ params, ...props }) => {
let dataRes = result.data.data || [];
setDatatable(dataRes);
setTotalPage(result.data.totalRecord);
setLoading(false)
} else {
NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
setLoading(false)
}
}
const handleExportExcel = async () => {
@ -315,7 +318,7 @@ const ProjectType = ({ params, ...props }) => {
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataProjectType()
getDataDivisi()
NotificationManager.success(`Data berhasil ditambahkan`, 'Success!!');
} else {
NotificationManager.error(`Data gagal ditambahkan`, 'Failed!!');
@ -329,7 +332,7 @@ const ProjectType = ({ params, ...props }) => {
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataProjectType();
getDataDivisi();
NotificationManager.success(`Data berhasil diubah`, 'Success!!');
} else {
NotificationManager.error(`Data gagal diubah`, `Failed!!`);
@ -347,7 +350,7 @@ const ProjectType = ({ params, ...props }) => {
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataProjectType()
getDataDivisi()
setIdDelete(0)
setAlertDelete(false)
NotificationManager.success(`Data berhasil dihapus!`, 'Success!!');
@ -381,6 +384,95 @@ const ProjectType = ({ params, ...props }) => {
}
}
const handleAddChild = (data) => {
setDataEdit(data)
handleOpenDialog('addChild');
}
const renderTable = useMemo(() => {
const columns = [
{
title: 'Action',
dataIndex: '',
key: 'id',
className: "nowrap",
render: (text, record) =>
<>
<Tooltip title="Hapus">
<i id="TooltipDelete" className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => handleDelete(text.id)}></i>
</Tooltip>
<Tooltip title="Add">
<i id="TooltipEdit" className="cil-level-down fa-sm" style={{ color: 'blue', marginRight: 10, cursor: "pointer" }} onClick={() => handleAddChild(text)}></i>
</Tooltip>
<Tooltip title="Edit">
<i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(text)}></i>
</Tooltip>
</>
,
},
...(role_name === 'Super Admin' ? [
{
title: t('company'),
dataIndex: "join_first_company_name",
key: "join_first_company_name",
render: (text, record) => (
<span>{record.join_first_company_name}</span>
)
}] : []),
{ title: 'Nama', dataIndex: 'name', key: 'name' },
{ title: 'Nama', dataIndex: 'name', key: 'name' },
{ title: 'Deskripsi', dataIndex: 'description', key: 'description' },
{
title: 'Color',
dataIndex: 'color',
key: 'color',
render: (text) => {
if (text != null) {
return (
<Tooltip title={text}>
<span className="fa fa-square" style={{ color: text }}></span>
</Tooltip>
);
} else {
return (
<small style={{ color: "grey", fontStyle: "italic" }}>No color set</small>
);
}
}
}
];
return (
<Spin tip="Loading..." spinning={loading}>
<Table
size="small"
columns={columns}
expandable={{
expandIcon: ({ expanded, onExpand, record }) =>
record.children && record.children.length > 0 ?
expanded ? (
<Tooltip title="Add">
<i id="TooltipEdit" className="fa fa-chevron-down fa-sm" style={{ color: 'grey', marginRight: 10, cursor: "pointer" }} onClick={e => onExpand(record, e)}></i>
</Tooltip>
) : (
<i id="TooltipEdit" className="fa fa-chevron-right fa-sm" style={{ color: 'grey', marginRight: 10, cursor: "pointer" }} onClick={e => onExpand(record, e)}></i>
)
: (
<i id="TooltipEdit" className="fa fa-chevron-right fa-sm" style={{ color: 'white', marginRight: 10, cursor: "pointer" }} onClick={e => onExpand(record, e)}></i>
)
}}
dataSource={dataTable}
pagination={false}
>
</Table>
</Spin>
)
}, [dataTable, loading])
return (
<div>
<NotificationContainer />
@ -428,51 +520,17 @@ const ProjectType = ({ params, ...props }) => {
</Row>
</CardHeader>
<CardBody>
<Table responsive striped hover>
<thead>
<tr>
<th>Aksi</th>
{column.map((i, index) => {
return (
<th key={index} scope="row">{i.name}</th>
)
})}
</tr>
</thead>
<tbody>
{dataNotAvailable()}
{dataTable.map((n, index) => {
return (
<tr key={n.id}>
<td className='nowrap'>
<Tooltip title={t('delete')}>
<i id="TooltipDelete" className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => handleDelete(n.id)}></i>
</Tooltip>
<Tooltip title={t('edit')}>
<i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(n)}></i>
</Tooltip>
</td>
{role_name === 'Super Admin' &&
(
<td>{n.join_first_company_name}</td>
)
}
<td>{n.name}</td>
<td>{n.description ?? '-'}</td>
{n.color != null ? (
<td>
<Tooltip title={n.color}>
<span className="fa fa-square" style={{ color: n.color }}></span>
</Tooltip>
</td>
) : (
<td><small style={{ color: "grey", fontStyle: "italic" }}>No color set</small></td>
)}
</tr>
)
})}
</tbody>
</Table>
{renderTable}
<Pagination
style={{ marginTop: "25px" }}
showSizeChanger
onShowSizeChange={onShowSizeChange}
onChange={onPagination}
current={currentPage}
pageSize={rowsPerPage}
total={totalPage}
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]}
/>
</CardBody>
</Card>
</div>

Write Preview
Loading…
Cancel
Save