Browse Source

Merge branch 'staging' of https://git.oslog.id/ibnu/generic-ospro-frontend into dev-wahyun

pull/1/head
wahyun 7 months ago
parent
commit
ca752e05cd
  1. 34
      src/views/SimproV2/Divisi/DialogForm.js
  2. 180
      src/views/SimproV2/Divisi/index.js

34
src/views/SimproV2/Divisi/DialogForm.js

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

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

Loading…
Cancel
Save