@@ -95,7 +95,7 @@ const DashboardProject = () => {
-
Company
+
Customer
{RO}
@@ -225,4 +225,4 @@ const DashboardProject = () => {
);
}
-export default DashboardProject;
\ No newline at end of file
+export default DashboardProject;
diff --git a/src/views/DashboardSimpro/index.js b/src/views/DashboardSimpro/index.js
index 8152c3c..c3be762 100644
--- a/src/views/DashboardSimpro/index.js
+++ b/src/views/DashboardSimpro/index.js
@@ -2,8 +2,8 @@ import '../../../node_modules/react-grid-layout/css/styles.css';
import '../../../node_modules/react-resizable/css/styles.css';
import '../Map/CustomScroll.css';
import './Dashboard.css';
-import Chart from 'chart.js';
-import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { Chart } from 'chart.js';
+import { ChartDataLabels } from 'chartjs-plugin-datalabels';
import ContentLoader from "react-content-loader"
import LineChart from './LineChart';
import PieChart from './PieChart';
@@ -20,18 +20,18 @@ import { Pagination, Tooltip, Tree, List, Checkbox } from 'antd';
import { getChildrenTree, formatRupiah, DATE_TIME_FORMAT } from '../../const/CustomFunc.js';
import { projectTreeConst } from '../../const/LayerTreeConst.js';
import {
- Card, Modal, ModalHeader, ModalBody, ModalFooter, Button,
- CardBody, CardHeader, Col, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Row
+ Card, Modal, ModalHeader, ModalBody, ModalFooter, Button,
+ CardBody, CardHeader, Col, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Row
} from 'reactstrap';
import {
- DONE_COLOR, IZIN_COLOR, NOT_YET_COLOR,
- PRESENT_COLOR, TOTAL_COLOR,
- RED_COLOR,
- ORANGE_COLOR,
- GREEN_COLOR,
- DARK_GREY_COLOR,
- BLUE_COLOR,
- PURPLE_COLOR
+ DONE_COLOR, IZIN_COLOR, NOT_YET_COLOR,
+ PRESENT_COLOR, TOTAL_COLOR,
+ RED_COLOR,
+ ORANGE_COLOR,
+ GREEN_COLOR,
+ DARK_GREY_COLOR,
+ BLUE_COLOR,
+ PURPLE_COLOR
} from '../../const/AppConst.js';
const id_org = window.localStorage.getItem('id_org');
const roleName = window.localStorage.getItem('role_name');
@@ -40,269 +40,269 @@ Chart.plugins.register(ChartDataLabels);
const { RangePicker } = DatePicker;
let menu = [
- {
- "id": 3,
- "title": "PANIC BUTTON",
- "key": "absent",
- "color": IZIN_COLOR
- },
- {
- "id": 4,
- "title": "WASPANG ACTIVE",
- "key": "karyawan telat",
- "color": GREEN_COLOR
- },
- {
- "id": 5,
- "title": "WASPANG ABSENT",
- "key": "karyawan tanpa keterangan",
- "color": ORANGE_COLOR
- }
+ {
+ "id": 3,
+ "title": "PANIC BUTTON",
+ "key": "absent",
+ "color": IZIN_COLOR
+ },
+ {
+ "id": 4,
+ "title": "WASPANG ACTIVE",
+ "key": "karyawan telat",
+ "color": GREEN_COLOR
+ },
+ {
+ "id": 5,
+ "title": "WASPANG ABSENT",
+ "key": "karyawan tanpa keterangan",
+ "color": ORANGE_COLOR
+ }
]
const defaultPersentaseProyek = {
- labels: [],
- datasets: [
- {
- label: 'Progress',
- data: [],
- fill: false,
- backgroundColor: 'rgb(54, 162, 235)',
- borderColor: 'rgba(54, 162, 235, 0.2)',
- yAxisID: 'y-axis-1',
- },
- ],
+ labels: [],
+ datasets: [
+ {
+ label: 'Progress',
+ data: [],
+ fill: false,
+ backgroundColor: 'rgb(54, 162, 235)',
+ borderColor: 'rgba(54, 162, 235, 0.2)',
+ yAxisID: 'y-axis-1',
+ },
+ ],
};
const defaultCostProyek = {
- labels: [],
- datasets: [
- {
- label: 'Perencanaan',
- data: [],
- fill: false,
- backgroundColor: 'rgb(255, 99, 132)',
- borderColor: 'rgba(255, 99, 132, 0.2)',
- yAxisID: 'y-axis-1',
- },
- {
- label: 'Realisasi',
- data: [],
- fill: false,
- backgroundColor: 'rgb(54, 162, 235)',
- borderColor: 'rgba(54, 162, 235, 0.2)',
- yAxisID: 'y-axis-1',
- },
- ],
+ labels: [],
+ datasets: [
+ {
+ label: 'Perencanaan',
+ data: [],
+ fill: false,
+ backgroundColor: 'rgb(255, 99, 132)',
+ borderColor: 'rgba(255, 99, 132, 0.2)',
+ yAxisID: 'y-axis-1',
+ },
+ {
+ label: 'Realisasi',
+ data: [],
+ fill: false,
+ backgroundColor: 'rgb(54, 162, 235)',
+ borderColor: 'rgba(54, 162, 235, 0.2)',
+ yAxisID: 'y-axis-1',
+ },
+ ],
};
const defaultStatusProyek = {
- labels: ['Aman', 'Alert', 'Critical'],
- datasets: [
- {
- label: '# of Votes',
- data: [],
- backgroundColor: [
- 'rgba(54, 162, 235, 0.2)',
- 'rgba(255, 206, 86, 0.2)',
- 'rgba(255, 99, 132, 0.2)',
- ],
- borderColor: [
- 'rgba(54, 162, 235, 1)',
- 'rgba(255, 206, 86, 1)',
- 'rgba(255, 99, 132, 1)',
- ],
- borderWidth: 1,
- },
- ],
+ labels: ['Aman', 'Alert', 'Critical'],
+ datasets: [
+ {
+ label: '# of Votes',
+ data: [],
+ backgroundColor: [
+ 'rgba(54, 162, 235, 0.2)',
+ 'rgba(255, 206, 86, 0.2)',
+ 'rgba(255, 99, 132, 0.2)',
+ ],
+ borderColor: [
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)',
+ 'rgba(255, 99, 132, 1)',
+ ],
+ borderWidth: 1,
+ },
+ ],
};
const DashboardSimpro = () => {
- const token = localStorage.getItem("token")
- const HEADER = {
- headers: {
- "Content-Type": "application/json",
- "Authorization": `Bearer ${token}`
- }
- }
- const [openPlanRealisasi, setopenPlanRealisasi] = useState(false);
- const [openCostPlanRealisasi, setopenCostPlanRealisasi] = useState(false);
- const [dataChart, setDataChart] = useState([]);
- const [projectTree, setProjectTree] = useState([]);
- const [allProyek, setAllProyek] = useState(true);
- const [dataStatusProyek, setDataStatusProyek] = useState(null);
- const [dataPersentaseProyek, setDataPersentaseProyek] = useState(null);
- const [dataCostProyek, setdataCostProyek] = useState(null);
- const [projectTreeVisible, setProjectTreeVisible] = useState(false);
- const [checkedKeysProjectTree, setCheckedKeysProjectTree] = useState([]);
- const [openModalTable, setOpenModalTable] = useState(false);
- const [dataDashboard, setDataDashboard] = useState(null);
+ const token = localStorage.getItem("token")
+ const HEADER = {
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": `Bearer ${token}`
+ }
+ }
+ const [openPlanRealisasi, setopenPlanRealisasi] = useState(false);
+ const [openCostPlanRealisasi, setopenCostPlanRealisasi] = useState(false);
+ const [dataChart, setDataChart] = useState([]);
+ const [projectTree, setProjectTree] = useState([]);
+ const [allProyek, setAllProyek] = useState(true);
+ const [dataStatusProyek, setDataStatusProyek] = useState(null);
+ const [dataPersentaseProyek, setDataPersentaseProyek] = useState(null);
+ const [dataCostProyek, setdataCostProyek] = useState(null);
+ const [projectTreeVisible, setProjectTreeVisible] = useState(false);
+ const [checkedKeysProjectTree, setCheckedKeysProjectTree] = useState([]);
+ const [openModalTable, setOpenModalTable] = useState(false);
+ const [dataDashboard, setDataDashboard] = useState(null);
- const handleGetDataDashboard = async () => {
- const URL = `${BASE_SIMPRO}/dashboard-proyek/search`
- const payload = {
- "columns": [
- { "name": "created_at", "logic_operator": "range", "value": "2021-11-06 00:00:00", "value1": "2021-11-06 23:59:59", "operator": "AND" }
- ],
- "paging": { "start": 0, "length": -1 }
- }
- const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response)
+ const handleGetDataDashboard = async () => {
+ const URL = `${BASE_SIMPRO}/dashboard-proyek/search`
+ const payload = {
+ "columns": [
+ { "name": "created_at", "logic_operator": "range", "value": "2021-11-06 00:00:00", "value1": "2021-11-06 23:59:59", "operator": "AND" }
+ ],
+ "paging": { "start": 0, "length": -1 }
+ }
+ const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response)
- if (result.data.code !== 200) {
- NotificationManager.error('Gaga Menambah Data!!', 'Failed');
- }
+ if (result.data.code !== 200) {
+ NotificationManager.error('Gaga Menambah Data!!', 'Failed');
+ }
- setDataDashboard(result.data.data);
- }
+ setDataDashboard(result.data.data);
+ }
- const handleGetDataDashboardChart = async () => {
- const URL = `${BASE_SIMPRO}/dashboard-status/search`
- let str = ''
+ const handleGetDataDashboardChart = async () => {
+ const URL = `${BASE_SIMPRO}/dashboard-status/search`
+ let str = ''
- checkedKeysProjectTree.map((res, idx) => {
- if (idx == 0) str += `${res}`
- if (idx != 0) str += `,${res}`
- })
+ checkedKeysProjectTree.map((res, idx) => {
+ if (idx == 0) str += `${res}`
+ if (idx != 0) str += `,${res}`
+ })
- const payload = {
- "columns": [
- { "name": "id", "logic_operator": "in", "value": str ? str : "0", "operator": "AND" }
- ],
- "orders": { "columns": ["nama"], "ascending": true }
- }
+ const payload = {
+ "columns": [
+ { "name": "id", "logic_operator": "in", "value": str ? str : "0", "operator": "AND" }
+ ],
+ "orders": { "columns": ["nama"], "ascending": true }
+ }
- const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response)
+ const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response)
- if (result.data.code !== 200) {
- NotificationManager.error('Gaga Menambah Data!!', 'Failed');
- }
+ if (result.data.code !== 200) {
+ NotificationManager.error('Gaga Menambah Data!!', 'Failed');
+ }
- const { persentase_progress, progress_cost_planning, progress_cost_realisasi, status_proyek } = result.data.data
- const labelPersentaseProyek = persentase_progress ? persentase_progress.map(res => res.label) : []
- const valuePersentaseProyek = persentase_progress ? persentase_progress.map(res => res.total) : []
- const persentaseProyek = {
- labels: labelPersentaseProyek,
- datasets: [
- {
- label: 'Progress',
- data: valuePersentaseProyek,
- fill: false,
- backgroundColor: 'rgb(54, 162, 235)',
- borderColor: 'rgba(54, 162, 235, 0.2)',
- yAxisID: 'y-axis-1',
- },
- ],
- };
- setDataPersentaseProyek(persentaseProyek)
- const labelCostPlaning = progress_cost_planning ? progress_cost_planning.map(res => res.label) : []
- const valueCostPlaning = progress_cost_planning ? progress_cost_planning.map(res => res.total) : []
- const valueCostRealisasi = progress_cost_realisasi ? progress_cost_realisasi.map(res => res.total) : []
+ const { persentase_progress, progress_cost_planning, progress_cost_realisasi, status_proyek } = result.data.data
+ const labelPersentaseProyek = persentase_progress ? persentase_progress.map(res => res.label) : []
+ const valuePersentaseProyek = persentase_progress ? persentase_progress.map(res => res.total) : []
+ const persentaseProyek = {
+ labels: labelPersentaseProyek,
+ datasets: [
+ {
+ label: 'Progress',
+ data: valuePersentaseProyek,
+ fill: false,
+ backgroundColor: 'rgb(54, 162, 235)',
+ borderColor: 'rgba(54, 162, 235, 0.2)',
+ yAxisID: 'y-axis-1',
+ },
+ ],
+ };
+ setDataPersentaseProyek(persentaseProyek)
+ const labelCostPlaning = progress_cost_planning ? progress_cost_planning.map(res => res.label) : []
+ const valueCostPlaning = progress_cost_planning ? progress_cost_planning.map(res => res.total) : []
+ const valueCostRealisasi = progress_cost_realisasi ? progress_cost_realisasi.map(res => res.total) : []
- const costProyek = {
- labels: labelCostPlaning,
- datasets: [
- {
- label: 'Perencanaan',
- data: valueCostPlaning,
- fill: false,
- backgroundColor: 'rgb(255, 99, 132)',
- borderColor: 'rgba(255, 99, 132, 0.2)',
- yAxisID: 'y-axis-1',
- },
- {
- label: 'Realisasi',
- data: valueCostRealisasi,
- fill: false,
- backgroundColor: 'rgb(54, 162, 235)',
- borderColor: 'rgba(54, 162, 235, 0.2)',
- yAxisID: 'y-axis-1',
- },
- ],
- };
- setdataCostProyek(costProyek)
+ const costProyek = {
+ labels: labelCostPlaning,
+ datasets: [
+ {
+ label: 'Perencanaan',
+ data: valueCostPlaning,
+ fill: false,
+ backgroundColor: 'rgb(255, 99, 132)',
+ borderColor: 'rgba(255, 99, 132, 0.2)',
+ yAxisID: 'y-axis-1',
+ },
+ {
+ label: 'Realisasi',
+ data: valueCostRealisasi,
+ fill: false,
+ backgroundColor: 'rgb(54, 162, 235)',
+ borderColor: 'rgba(54, 162, 235, 0.2)',
+ yAxisID: 'y-axis-1',
+ },
+ ],
+ };
+ setdataCostProyek(costProyek)
- const valueStatusProyek = status_proyek ? status_proyek.map(res => res.total) : []
+ const valueStatusProyek = status_proyek ? status_proyek.map(res => res.total) : []
- const statusProyek = {
- labels: ['Aman', 'Alert', 'Critical'],
- datasets: [
- {
- label: '# of Votes',
- data: valueStatusProyek,
- backgroundColor: [
- 'rgba(54, 162, 235, 0.2)',
- 'rgba(255, 206, 86, 0.2)',
- 'rgba(255, 99, 132, 0.2)',
- ],
- borderColor: [
- 'rgba(54, 162, 235, 1)',
- 'rgba(255, 206, 86, 1)',
- 'rgba(255, 99, 132, 1)',
- ],
- borderWidth: 1,
- },
- ],
- };
+ const statusProyek = {
+ labels: ['Aman', 'Alert', 'Critical'],
+ datasets: [
+ {
+ label: '# of Votes',
+ data: valueStatusProyek,
+ backgroundColor: [
+ 'rgba(54, 162, 235, 0.2)',
+ 'rgba(255, 206, 86, 0.2)',
+ 'rgba(255, 99, 132, 0.2)',
+ ],
+ borderColor: [
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)',
+ 'rgba(255, 99, 132, 1)',
+ ],
+ borderWidth: 1,
+ },
+ ],
+ };
- setDataStatusProyek(statusProyek)
+ setDataStatusProyek(statusProyek)
- }
+ }
- const getProyek = async () => {
- const URL = `${BASE_SIMPRO}/proyek/list?start=0&length=-1&orderby=nama&asc=true`
- const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
- if (result.data.code !== 200) {
- NotificationManager.error('Gaga Menambah Data!!', 'Failed');
- }
- setProjectTree(result.data.data);
- const arr = result.data.data.map(res => res.id)
- setCheckedKeysProjectTree(arr)
- }
+ const getProyek = async () => {
+ const URL = `${BASE_SIMPRO}/proyek/list?start=0&length=-1&orderby=nama&asc=true`
+ const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
+ if (result.data.code !== 200) {
+ NotificationManager.error('Gaga Menambah Data!!', 'Failed');
+ }
+ setProjectTree(result.data.data);
+ const arr = result.data.data.map(res => res.id)
+ setCheckedKeysProjectTree(arr)
+ }
- const renderDailyInfo = () => {
- return (
- <>
-
-
{dataDashboard ? dataDashboard.panic_button : 0}
-
PANIC BUTTON
-
-
-
{dataDashboard ? dataDashboard.waspang_status.presensi : 0}
-
WASPANG ACTIVE
-
-
-
{dataDashboard ? dataDashboard.waspang_status.absensi : 0}
-
WASPANG ABSENT
-
-
- )
- }
+ const renderDailyInfo = () => {
+ return (
+ <>
+
+
{dataDashboard ? dataDashboard.panic_button : 0}
+
PANIC BUTTON
+
+
+
{dataDashboard ? dataDashboard.waspang_status.presensi : 0}
+
WASPANG ACTIVE
+
+
+
{dataDashboard ? dataDashboard.waspang_status.absensi : 0}
+
WASPANG ABSENT
+
+
+ )
+ }
- const handleClickChart = param => {
- if (!param.length) return;
- const { _datasetIndex, _index } = param[0];
- const data = dataPersentaseProyek.datasets[_datasetIndex].label
- setOpenModalTable(true)
- }
+ const handleClickChart = param => {
+ if (!param.length) return;
+ const { _datasetIndex, _index } = param[0];
+ const data = dataPersentaseProyek.datasets[_datasetIndex].label
+ setOpenModalTable(true)
+ }
- const handleClickProyek = id => {
- const arr = [...checkedKeysProjectTree]
- const idx = arr.indexOf(id)
- if (idx == -1) {
- arr.push(id)
- } else {
- arr.splice(idx, 1)
- }
- setCheckedKeysProjectTree(arr)
- }
+ const handleClickProyek = id => {
+ const arr = [...checkedKeysProjectTree]
+ const idx = arr.indexOf(id)
+ if (idx == -1) {
+ arr.push(id)
+ } else {
+ arr.splice(idx, 1)
+ }
+ setCheckedKeysProjectTree(arr)
+ }
- return (
- <>
-
-
+ return (
+ <>
+
+
- );
+ );
}
export default DashboardSimpro;
diff --git a/src/views/Master/ProjectPhase/DialogForm.js b/src/views/Master/ProjectPhase/DialogForm.js
new file mode 100644
index 0000000..f2ea800
--- /dev/null
+++ b/src/views/Master/ProjectPhase/DialogForm.js
@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from 'react'
+import {
+ Modal, ModalHeader, ModalBody, ModalFooter,
+ Button, Form, FormGroup, Label, Input, Col, Row
+} from 'reactstrap';
+import { DatePicker, Tooltip, Select } from 'antd';
+import { formatRupiah, formatNumber } from '../../../const/CustomFunc'
+import moment from 'moment';
+import 'antd/dist/antd.css';
+const { Option } = Select
+
+const DialogForm = ({openDialog, closeDialog, toggleDialog, typeDialog, dataEdit}) => {
+ const [id, setId] = useState(0)
+ const [projectType, setProjectType] = useState('')
+ const [uom, setUom] = useState('')
+ const [description, setDescription] = useState('')
+ const [unitPrice, setUnitPrice] = useState()
+
+
+
+
+ useEffect(()=> {
+ if(typeDialog==="Edit"){
+ console.log("cel data Edit", dataEdit)
+ setId(dataEdit.id)
+ setDescription(dataEdit.description)
+ setUnitPrice(dataEdit.unit_price)
+ setUom(dataEdit.uom)
+ setProjectType(dataEdit.name)
+
+ }else{
+ setId(0)
+ }
+ },[dataEdit,openDialog])
+
+ const handleSave = () => {
+ let data = '';
+ if(typeDialog==="Save"){
+ data = {
+ name: projectType,
+ description
+ }
+
+ closeDialog('save', data);
+ }else{
+ data = {
+ id,
+ name: projectType,
+ description
+ }
+ closeDialog('edit', data);
+ }
+ setId(0)
+ setDescription('')
+
+ }
+
+ const handleCancel = () => {
+ closeDialog('cancel', 'none')
+ setId(0)
+
+ setDescription('')
+
+ }
+
+
+
+
+
+
+ const renderForm = () => {
+ return(
+
+ )
+ }
+
+
+ return (
+ <>
+
+ {typeDialog=="Save" ? `Add` : "Edit"} Resource
+
+ {renderForm()}
+
+
+ {' '}
+
+
+
+
+ {/*
toggleMapDialog}
+ dataEdit={dataEdit}
+ workArea_={workArea}
+ lat_={lat}
+ lon_={lon}
+ radius_={radius}
+ /> */}
+
+ )
+
+}
+
+export default DialogForm;
\ No newline at end of file
diff --git a/src/views/Master/ProjectPhase/DialogFormInitial.js b/src/views/Master/ProjectPhase/DialogFormInitial.js
new file mode 100644
index 0000000..ff2c506
--- /dev/null
+++ b/src/views/Master/ProjectPhase/DialogFormInitial.js
@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react'
+import {
+ Modal, ModalHeader, ModalBody, ModalFooter,
+ Button, Form, FormGroup, Label, Input, Col, Row
+} from 'reactstrap';
+
+const DialogForm = ({openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, idActivity, projectTypeId}) => {
+
+ const [id, setId] = useState(0)
+ const [activity, setActivity] = useState('')
+
+ useEffect(()=> {
+ if(typeDialog==="edit"){
+ setId(dataEdit.id)
+ setActivity(dataEdit.name_activity)
+
+ }else{
+ setId(0)
+ setActivity('')
+ }
+ },[dataEdit,openDialog])
+
+ const handleSave = () => {
+ let data = '';
+
+ if(typeDialog==="add"){
+ data = {
+ name_activity: activity,
+ proyek_type_id:projectTypeId
+ }
+
+ if(idActivity && idActivity > 0){
+ data['parent_id'] = idActivity
+ }
+ console.log("cek cek cek")
+ closeDialog('save', data);
+ }else{
+ data = {
+ id,
+ name_activity: activity,
+ proyek_type_id:projectTypeId
+ }
+
+ if(idActivity && idActivity > 0){
+ data['parent_id'] = idActivity
+ }
+ console.log("cek cek cek 2")
+ closeDialog('edit', data);
+ }
+ setId(0)
+ setActivity('')
+ }
+
+ const handleCancel = () => {
+ closeDialog('cancel', 'none')
+ setId(0)
+ setActivity('')
+ }
+
+ const renderForm = () => {
+ return(
+
+ )
+ }
+
+
+ return (
+ <>
+
+ {typeDialog=="add" ? `Add` : "Edit"} Activity
+
+ {renderForm()}
+
+
+ {' '}
+
+
+
+
+ )
+
+}
+
+export default DialogForm;
\ No newline at end of file
diff --git a/src/views/Master/ProjectPhase/DialogInitialGantt.js b/src/views/Master/ProjectPhase/DialogInitialGantt.js
new file mode 100644
index 0000000..c429e23
--- /dev/null
+++ b/src/views/Master/ProjectPhase/DialogInitialGantt.js
@@ -0,0 +1,217 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button } from 'reactstrap';
+import { Table, Tooltip } from 'antd';
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import 'antd/dist/antd.css';
+import SweetAlert from 'react-bootstrap-sweetalert';
+import { TEMPLATE_GANTT_ADD, TEMPLATE_GANTT_DELETE, TEMPLATE_GANTT_EDIT, TEMPLATE_GANTT_TREE } from '../../../const/ApiConst';
+import axios from "../../../const/interceptorApi"
+import DialogForm from './DialogFormInitial';
+
+const DialogInitialGantt = ({ openDialog, closeDialog, toggleDialog, idTypeProject }) => {
+ const token = window.localStorage.getItem('token');
+ const config = {
+ headers:
+ {
+ Authorization: `Bearer ${token}`,
+ "Content-type": `application/json`
+ }
+ };
+
+ const [dataTable, setDataTable] = useState([])
+ const [alertDelete, setAlertDelete] = useState(false)
+ const [idDelete, setIdDelete] = useState(0)
+ const [idActivity, setIdActivity] = useState(0)
+ const [openDialogForm, setOpenDialogForm] = useState(false)
+ const [typeDialog, setTypeDialog] = useState("add")
+ const [dataEdit, setDataEdit] = useState([])
+
+ useEffect(() => {
+ if (idTypeProject && idTypeProject > 0) {
+ getDataInitial();
+ }
+ }, [idTypeProject])
+
+ const getDataInitial = async () => {
+ const url = TEMPLATE_GANTT_TREE(idTypeProject)
+ const result = await axios
+ .get(url, config)
+ .then(res => res)
+ .catch((error) => error.response);
+ if (result && result.data && result.data.code == 200) {
+ setDataTable(result.data.data);
+ } else {
+ NotificationManager.error('Gagal mengambil data, Silahkan coba lagi!!', 'Failed');
+ }
+ }
+
+ const handleDelete = async (id) => {
+ await setIdDelete(id)
+ await setAlertDelete(true)
+ }
+
+ const onConfirmDelete = async () => {
+ let url = TEMPLATE_GANTT_DELETE(idDelete);
+
+ const result = await axios.delete(url, config)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code === 200) {
+ getDataInitial()
+ setIdDelete(0)
+ setAlertDelete(false)
+ NotificationManager.success(`Activity berhasil dihapus!`, 'Success!!');
+ } else {
+ setIdDelete(0)
+ setAlertDelete(false)
+ NotificationManager.error(`Activity gagal dihapus!}`, 'Failed!!');
+ }
+ }
+
+ const cancelDelete = () => {
+ setIdDelete(0)
+ setAlertDelete(false)
+ }
+
+ const handleAdd = async () => {
+ setIdActivity(0)
+ await setTypeDialog("add")
+ setOpenDialogForm(true)
+ }
+
+ const handleEdit = async (data) => {
+ await setDataEdit(data)
+ if (data.parent_id) {
+ await setIdActivity(data.parent_id);
+ }
+ await setTypeDialog("edit")
+ setOpenDialogForm(true)
+ }
+
+ const handleAddWithParent = async (id) => {
+ setIdActivity(id)
+ await setTypeDialog("add")
+ setOpenDialogForm(true)
+ }
+
+ const closeDialogForm = (type, data) => {
+ if (type == "save") {
+ saveActivity(data)
+ } else if (type == "edit") {
+ updateActivity(data)
+ }
+ setIdActivity(0)
+ setOpenDialogForm(false)
+ }
+
+ const toggleDialogForm = () => {
+ if (openDialogForm) {
+ setIdActivity(0)
+ }
+ setOpenDialogForm(!openDialogForm);
+ }
+
+ const saveActivity = async (data) => {
+ const result = await axios.post(TEMPLATE_GANTT_ADD, data, config)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code === 200) {
+ getDataInitial()
+ NotificationManager.success(`Data activity berhasil ditambah`, 'Success!!');
+ } else {
+ NotificationManager.error(`${result.data.message}`, 'Failed!!');
+ }
+ }
+
+ const updateActivity = async (data) => {
+ const url = TEMPLATE_GANTT_EDIT(data.id)
+ const result = await axios.put(url, data, config)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code === 200) {
+ getDataInitial()
+ NotificationManager.success(`Data activity berhasil diedit`, 'Success!!');
+ } else {
+ NotificationManager.error(`${result.data.message}`, 'Failed!!');
+ }
+ }
+
+ const renderTable = useMemo(() => {
+ const columns = [
+ {
+ title: 'Action',
+ dataIndex: '',
+ key: 'id',
+ className: "nowrap",
+ render: (text, record) =>
+ <>
+
+
+ {" "}
+
+ {" "}
+
+
+
+ ,
+ },
+ { title: 'Nama Activity', dataIndex: 'name_activity', key: 'name_activity' },
+ ];
+
+ return (
+
+ )
+ }, [dataTable])
+
+
+ return (<>
+
+
+ Delete this data
+
+
+
+ {/* Initial Gantt */}
+
+ Template Gantt
+
+
+ {renderTable}
+
+
+
+
+
+
+ )
+
+}
+
+export default DialogInitialGantt;
\ No newline at end of file
diff --git a/src/views/Master/ProjectPhase/index.js b/src/views/Master/ProjectPhase/index.js
new file mode 100644
index 0000000..81b4af7
--- /dev/null
+++ b/src/views/Master/ProjectPhase/index.js
@@ -0,0 +1,325 @@
+import * as XLSX from 'xlsx';
+import DialogForm from './DialogForm';
+import DialogInitialGantt from './DialogInitialGantt';
+import React, { useState, useEffect, useMemo } from 'react';
+import SweetAlert from 'react-bootstrap-sweetalert';
+import axios from "../../../const/interceptorApi"
+import moment from 'moment'
+import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import { PROJECT_PHASE_ADD, PROJECT_PHASE_EDIT, PROJECT_PHASE_DELETE, PROJECT_PHASE_SEARCH } from '../../../const/ApiConst';
+import { Pagination, Button, Tooltip, Table } from 'antd';
+
+const token = window.localStorage.getItem('token');
+const config = {
+ headers:
+ {
+ Authorization: `Bearer ${token}`,
+ "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
+ "Access-Control-Allow-Origin": `*`
+ }
+};
+
+const ProjectPhase = ({ params }) => {
+ const token = localStorage.getItem("token")
+ const HEADER = {
+ headers: {
+ "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
+ "Access-Control-Allow-Origin": "*",
+ "Authorization": `Bearer ${token}`
+ }
+ }
+ const pageName = params.name;
+
+ const [alertDelete, setAlertDelete] = useState(false)
+ const [allDataMenu, setAllDataMenu] = useState([])
+ const [clickOpenModal, setClickOpenModal] = useState(false)
+ const [currentPage, setCurrentPage] = useState(1)
+ const [dataEdit, setDataEdit] = useState([])
+ const [dataTable, setDatatable] = useState([])
+ const [idDelete, setIdDelete] = useState(0)
+ const [idPhaseProject, setIdPhaseProject] = useState(0)
+ const [openDialog, setOpenDialog] = useState(false)
+ const [openDialogIG, setOpenDialogIG] = useState(false)
+ const [rowsPerPage, setRowsPerPage] = useState(10)
+ const [search, setSearch] = useState('')
+ const [totalPage, setTotalPage] = useState(0)
+ const [typeDialog, setTypeDialog] = useState('Save')
+
+ useEffect(() => {
+ getDataProjectPhase()
+ }, [currentPage, rowsPerPage, search])
+
+ const getDataProjectPhase = async () => {
+ let start = 0;
+ if (currentPage !== 1 && currentPage > 1) {
+ start = (currentPage * rowsPerPage) - rowsPerPage
+ }
+
+ const payload = {
+ "columns": [
+ {
+ "name": "name",
+ "logic_operator": "like",
+ "value": search,
+ "operator": "AND"
+ }
+ ],
+ "orders": {
+ "ascending": true,
+ "columns": [
+ 'id'
+ ]
+ },
+ "paging": {
+ "length": rowsPerPage,
+ "start": start
+ }
+ }
+
+ const result = await axios
+ .post(PROJECT_PHASE_SEARCH, payload, config)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code == 200) {
+ setDatatable(result.data.data);
+ setTotalPage(result.data.totalRecord);
+ } else {
+ NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+ }
+ }
+
+ const handleSearch = e => {
+ const value = e.target.value
+ setSearch(value);
+ setCurrentPage(1)
+ };
+
+ const handleOpenDialog = (type) => {
+ setOpenDialog(true)
+ setTypeDialog(type)
+ }
+
+ const handleExportExcel = async () => {
+ let start = 0;
+
+ const payload = {
+ "paging": { "start": start, "length": -1 },
+ "columns": [
+ { "name": "name", "logic_operator": "ilike", "value": search, "operator": "AND" }
+ ],
+ "joins": [],
+ "orders": { "columns": ["id"], "ascending": false }
+ }
+
+ const result = await axios
+ .post(PROJECT_PHASE_SEARCH, payload)
+ .then(res => res)
+ .catch((error) => error.response);
+ }
+
+ const handleEdit = (data) => {
+ setDataEdit(data)
+ handleOpenDialog('Edit');
+ }
+
+ const handleDelete = async (id) => {
+ await setAlertDelete(true)
+ await setIdDelete(id)
+ }
+
+ const handleCloseDialog = (type, data) => {
+ if (type === "save") {
+ saveProjectPhase(data);
+ } else if (type === "edit") {
+ editMaterialR(data);
+ }
+ setDataEdit([])
+ setOpenDialog(false)
+ }
+
+ const saveProjectPhase = async (data) => {
+ const formData = data
+ const result = await axios.post(PROJECT_PHASE_ADD, formData, HEADER)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code === 200) {
+ getDataProjectPhase()
+ NotificationManager.success(`Data project type berhasil ditambah`, 'Success!!');
+ } else {
+ NotificationManager.error(`${result.data.message}`, 'Failed!!');
+ }
+ }
+
+ const editMaterialR = async (data) => {
+ let urlEdit = PROJECT_PHASE_EDIT(data.id)
+ const formData = data
+
+ const result = await axios.put(urlEdit, formData, HEADER)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code === 200) {
+ getDataProjectPhase();
+ NotificationManager.success(`Data project phase berhasil diedit`, 'Success!!');
+ } else {
+ NotificationManager.error(`Data project phase gagal di edit`, `Failed!!`);
+ }
+ }
+
+ const toggleAddDialog = () => {
+ setOpenDialog(!openDialog)
+ }
+
+ const handleDialogIg = (id) => {
+ setIdPhaseProject(id)
+ setOpenDialogIG(true)
+ }
+
+ const closeDialogIG = () => {
+ setIdPhaseProject(0)
+ setOpenDialogIG(false)
+ }
+
+ const toggleDialogIG = () => {
+ if (openDialogIG) {
+ setIdPhaseProject(0)
+ }
+ setOpenDialogIG(!openDialogIG);
+ }
+
+ const onConfirmDelete = async () => {
+ let url = PROJECT_PHASE_DELETE(idDelete);
+
+ const result = await axios.delete(url, config)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code === 200) {
+ getDataProjectPhase()
+ setIdDelete(0)
+ setAlertDelete(false)
+ NotificationManager.success(`Data project phase berhasil dihapus!`, 'Success!!');
+ } else {
+ setIdDelete(0)
+ setAlertDelete(false)
+ NotificationManager.error(`Data project phase gagal dihapus!}`, 'Failed!!');
+ }
+ }
+
+ const cancelDelete = () => {
+ setAlertDelete(false)
+ setIdDelete(0)
+ }
+
+ const onShowSizeChange = (current, pageSize) => {
+ setRowsPerPage(pageSize)
+ }
+
+ const onPagination = (current, pageSize) => {
+ setCurrentPage(current)
+ }
+
+ const dataNotAvailable = () => {
+ if (dataTable.length === 0) {
+ return (
+
+ | Tidak ada data project phase |
+
+ )
+ }
+ }
+
+ const renderTable = useMemo(() => {
+ const columns = [
+ {
+ title: 'Action',
+ dataIndex: '',
+ key: 'x',
+ className: 'nowrap',
+ render: (text, record) => <>
+
+ handleDelete(text.id)}>
+
+
+ handleEdit(text)}>
+ {" "}
+ ,
+ },
+ { title: 'Fase', dataIndex: 'name', key: 'name', className: "nowrap" },
+ { title: 'Warna', dataIndex: 'color', key: 'color' },
+ ];
+ return (
+
+ )
+ }, [dataTable])
+
+ return (
+
+
+
cancelDelete()}
+ focusCancelBtn
+ >
+ Delete this data
+
+
toggleAddDialog}
+ typeDialog={typeDialog}
+ dataEdit={dataEdit}
+ clickOpenModal={clickOpenModal}
+ dataParent={allDataMenu}
+ />
+
+
+
+ {pageName}
+
+
+
+
+
+
+
+
+
+ {renderTable}
+
+
+
+ {pageName}
-
+