From 81b39a16ec71012f376a9654bdfc7dc11f7d8d6d Mon Sep 17 00:00:00 2001 From: farhantock Date: Thu, 15 Feb 2024 11:12:07 +0700 Subject: [PATCH] update divisi parent and childern --- src/views/SimproV2/Divisi/DialogForm.js | 34 +++-- src/views/SimproV2/Divisi/index.js | 180 ++++++++++++++++-------- 2 files changed, 145 insertions(+), 69 deletions(-) diff --git a/src/views/SimproV2/Divisi/DialogForm.js b/src/views/SimproV2/Divisi/DialogForm.js index 3c59e8a..547b0c6 100644 --- a/src/views/SimproV2/Divisi/DialogForm.js +++ b/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) => ( - + ))} diff --git a/src/views/SimproV2/Divisi/index.js b/src/views/SimproV2/Divisi/index.js index 382c1a3..68b1825 100644 --- a/src/views/SimproV2/Divisi/index.js +++ b/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) => + <> + + handleDelete(text.id)}> + + + handleAddChild(text)}> + + + handleEdit(text)}> + + + , + }, + ...(role_name === 'Super Admin' ? [ + { + title: t('company'), + dataIndex: "join_first_company_name", + key: "join_first_company_name", + render: (text, record) => ( + {record.join_first_company_name} + ) + }] : []), + { 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 ( + + + + ); + } else { + return ( + No color set + ); + } + } + } + ]; + + return ( + + + + record.children && record.children.length > 0 ? + expanded ? ( + + onExpand(record, e)}> + + ) : ( + onExpand(record, e)}> + + ) + : ( + onExpand(record, e)}> + ) + + }} + dataSource={dataTable} + pagination={false} + > +
+ + ) + }, [dataTable, loading]) + return (
@@ -428,51 +520,17 @@ const ProjectType = ({ params, ...props }) => { - - - - - {column.map((i, index) => { - return ( - - ) - })} - - - - {dataNotAvailable()} - {dataTable.map((n, index) => { - return ( - - - {role_name === 'Super Admin' && - ( - - ) - } - - - {n.color != null ? ( - - ) : ( - - )} - - ) - })} - -
Aksi{i.name}
- - handleDelete(n.id)}> - - - handleEdit(n)}> - - {n.join_first_company_name}{n.name}{n.description ?? '-'} - - - - No color set
+ {renderTable} +