WIP: division, implement hierarchy

src/views/SimproV2/Divisi/DialogForm.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import {
-  Modal, ModalHeader, ModalBody, ModalFooter,
+	Modal, ModalHeader, ModalBody, ModalFooter,
-  Button, Form, FormGroup, Label, Input, Col, Row
+	Button, Form, FormGroup, Label, Input, Col, Row
 } from 'reactstrap';
 import { DatePicker, Tooltip, Select } from 'antd';
 import { formatRupiah, formatNumber } from '../../../const/CustomFunc'
@@ -9,113 +9,110 @@ import moment from 'moment';
 import 'antd/dist/antd.css';
 const { Option } = Select
 
-const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit }) => {
+const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataDivisions }) => {
-  const [id, setId] = useState(0)
+	const [id, setId] = useState(0)
-  const [name, setName] = useState('')
+	const [name, setName] = useState('')
-  const [uom, setUom] = useState('')
+	const [parent, setParent] = useState(null)
-  const [description, setDescription] = useState('')
+	const [description, setDescription] = useState('')
-  const [unitPrice, setUnitPrice] = useState()
+
-
+	const onChangeParent = (val) => {
-
+		setParent(val)
-
+	}
-
+
-  useEffect(() => {
+	useEffect(() => {
-    if (typeDialog === "Edit") {
+		if (typeDialog === "Edit") {
-      console.log("cel data Edit", dataEdit)
+			setId(dataEdit.id)
-      setId(dataEdit.id)
+			setDescription(dataEdit.description)
-      setDescription(dataEdit.description)
+			setName(dataEdit.name)
-      setUnitPrice(dataEdit.unit_price)
+			setParent(dataEdit.parent)
-      setUom(dataEdit.uom)
+		} else {
-      setName(dataEdit.name)
+			setId(0)
-
+		}
-    } else {
+	}, [dataEdit, openDialog])
-      setId(0)
+
-    }
+	const handleSave = () => {
-  }, [dataEdit, openDialog])
+		let data = '';
-
+		if (typeDialog === "Save") {
-  const handleSave = () => {
+			data = {
-    let data = '';
+				name: name,
-    if (typeDialog === "Save") {
+				description,
-      data = {
+				parent
-        name: name,
+			}
-        description
+			closeDialog('save', data);
-      }
+		} else {
-
+			data = {
-      closeDialog('save', data);
+				id,
-    } else {
+				name: name,
-      data = {
+				description,
-        id,
+				parent
-        name: name,
+			}
-        description
+			closeDialog('edit', data);
-      }
+		}
-      closeDialog('edit', data);
+		setId(0)
-    }
+		setDescription('')
-    setId(0)
+	}
-    setDescription('')
+	const handleCancel = () => {
-
+		closeDialog('cancel', 'none')
-  }
+		setId(0)
-
+		setDescription('')
-  const handleCancel = () => {
+	}
-    closeDialog('cancel', 'none')
+
-    setId(0)
+	const renderForm = () => {
-
+		return (
-    setDescription('')
+			<Form>
-
+				<Row>
-  }
+					<Col md={6}>
-
+						<FormGroup>
-
+							<Label className="capitalize">Name</Label>
-
+							<Input type="text" value={name} onChange={(e) => setName(e.target.value)}/>
-
+						</FormGroup>
-
+					</Col>
-
+				</Row>
-  const renderForm = () => {
+				<Row>
-    return (
+					<Col md={6}>
-      <Form>
+						<FormGroup>
-        <Row>
+							<Label className="capitalize">Parent</Label>
-          <Col md={6}>
+								<Select showSearch
-            <FormGroup>
+									value={parent}
-              <Label className="capitalize">Name</Label>
+									onChange={onChangeParent}
-              <Input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={`Input name...`} />
+									style={{ width: '100%' }}
-            </FormGroup>
+									filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
-          </Col>
+								>
-          <Col md={6}>
+								{dataDivisions.map((res, idx) => (
-            <FormGroup>
+									<Option key={idx} value={idx}>{res}</Option>
-              <Label className="capitalize">Description</Label>
+								))}
-              <Input row="4" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={`Description ...`} />
+							</Select>
-            </FormGroup>
+						</FormGroup>
-          </Col>
+					</Col>
-        </Row>
+				</Row>
-      </Form>
+				<Row>
-    )
+					<Col md={6}>
-  }
+						<FormGroup>
-
+							<Label className="capitalize">Description</Label>
-
+							<Input row="4" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)}/>
-  return (
+						</FormGroup>
-    <>
+					</Col>
-      <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
+				</Row>
-        <ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Resource</ModalHeader>
+			</Form>
-        <ModalBody>
+		)
-          {renderForm()}
+	}
-        </ModalBody>
+
-        <ModalFooter>
+
-          <Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
+	return (
-          <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
+		<>
-        </ModalFooter>
+			<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
-      </Modal>
+				<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Resource</ModalHeader>
-
+				<ModalBody>
-      {/* <DialogMap
+					{renderForm()}
-      openDialog={openDialogMap}
+				</ModalBody>
-      closeDialog={handleCloseDialogMap}
+				<ModalFooter>
-      toggleDialog={() => toggleMapDialog}
+					<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
-      dataEdit={dataEdit}
+					<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
-      workArea_={workArea}
+				</ModalFooter>
-      lat_={lat}
+			</Modal>
-      lon_={lon}
+		</>
-      radius_={radius}
+	)
-    /> */}
-    </>
-  )
 
 }
 
-export default DialogForm;
+export default DialogForm;

src/views/SimproV2/Divisi/index.js

@@ -5,7 +5,7 @@ import SweetAlert from 'react-bootstrap-sweetalert';
 import axios from "../../../const/interceptorApi"
 import moment from 'moment'
 import { Card, CardBody, CardHeader, Col, Row, Input, Table } from 'reactstrap';
-import { DIVISI_ADD, DIVISI_EDIT, DIVISI_DELETE, DIVISI_SEARCH} from '../../../const/ApiConst';
+import { DIVISI_LIST, DIVISI_ADD, DIVISI_EDIT, DIVISI_DELETE, DIVISI_SEARCH} from '../../../const/ApiConst';
 import { DownloadOutlined } from '@ant-design/icons';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import { Pagination, Button, Tooltip } from 'antd';
@@ -52,6 +52,7 @@ const ProjectType = ({ params }) => {
 	const [search, setSearch] = useState('')
 	const [totalPage, setTotalPage] = useState(0)
 	const [typeDialog, setTypeDialog] = useState('Save')
+	const [dataDivisions, setDataDivisions] = useState([])
 
 	useEffect(() => {
 		getDataProjectType()
@@ -68,6 +69,22 @@ const ProjectType = ({ params }) => {
 
 		let start = 0;
 
+		const listDivions = await axios
+			.get(DIVISI_LIST, HEADER)
+			.then(res => res)
+			.catch((error) => error.response);
+
+		if (listDivions&& listDivions.data && listDivions.data.code == 200) {
+			let arr = []
+			for (const v in listDivions.data.data) {
+				arr.push(listDivions.data.data[v])
+			}
+			console.log(arr);
+			setDataDivisions(arr);
+		} else {
+			NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+		}
+
 		if (currentPage !== 1 && currentPage > 1) {
 			start = (currentPage * rowsPerPage) - rowsPerPage
 		}
@@ -275,13 +292,14 @@ const ProjectType = ({ params }) => {
 				dataEdit={dataEdit}
 				clickOpenModal={clickOpenModal}
 				dataParent={allDataMenu}
+				dataDivisions={dataDivisions}
 			/>
 			<Card>
 				<CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
 					<h4 className="capitalize">{pageName}</h4>
 					<Row>
 						<Col>
-							<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search divisi...`} />
+							<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search`} />
 						</Col>
 						<Col>
 							<Tooltip title="Add Material Resource">