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,
-  Button, Form, FormGroup, Label, Input, Col, Row
+	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'
@@ -9,112 +9,109 @@ 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 [name, setName] = 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)
-      setName(dataEdit.name)
-
-    } else {
-      setId(0)
-    }
-  }, [dataEdit, openDialog])
-
-  const handleSave = () => {
-    let data = '';
-    if (typeDialog === "Save") {
-      data = {
-        name: name,
-        description
-      }
-
-      closeDialog('save', data);
-    } else {
-      data = {
-        id,
-        name: name,
-        description
-      }
-      closeDialog('edit', data);
-    }
-    setId(0)
-    setDescription('')
-
-  }
-
-  const handleCancel = () => {
-    closeDialog('cancel', 'none')
-    setId(0)
-
-    setDescription('')
-
-  }
-
-
-
-
-
-
-  const renderForm = () => {
-    return (
-      <Form>
-        <Row>
-          <Col md={6}>
-            <FormGroup>
-              <Label className="capitalize">Name</Label>
-              <Input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={`Input name...`} />
-            </FormGroup>
-          </Col>
-          <Col md={6}>
-            <FormGroup>
-              <Label className="capitalize">Description</Label>
-              <Input row="4" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={`Description ...`} />
-            </FormGroup>
-          </Col>
-        </Row>
-      </Form>
-    )
-  }
-
-
-  return (
-    <>
-      <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
-        <ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Resource</ModalHeader>
-        <ModalBody>
-          {renderForm()}
-        </ModalBody>
-        <ModalFooter>
-          <Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
-          <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
-        </ModalFooter>
-      </Modal>
-
-      {/* <DialogMap
-      openDialog={openDialogMap}
-      closeDialog={handleCloseDialogMap}
-      toggleDialog={() => toggleMapDialog}
-      dataEdit={dataEdit}
-      workArea_={workArea}
-      lat_={lat}
-      lon_={lon}
-      radius_={radius}
-    /> */}
-    </>
-  )
+const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataDivisions }) => {
+	const [id, setId] = useState(0)
+	const [name, setName] = useState('')
+	const [parent, setParent] = useState(null)
+	const [description, setDescription] = useState('')
+
+	const onChangeParent = (val) => {
+		setParent(val)
+	}
+
+	useEffect(() => {
+		if (typeDialog === "Edit") {
+			setId(dataEdit.id)
+			setDescription(dataEdit.description)
+			setName(dataEdit.name)
+			setParent(dataEdit.parent)
+		} else {
+			setId(0)
+		}
+	}, [dataEdit, openDialog])
+
+	const handleSave = () => {
+		let data = '';
+		if (typeDialog === "Save") {
+			data = {
+				name: name,
+				description,
+				parent
+			}
+			closeDialog('save', data);
+		} else {
+			data = {
+				id,
+				name: name,
+				description,
+				parent
+			}
+			closeDialog('edit', data);
+		}
+		setId(0)
+		setDescription('')
+	}
+	const handleCancel = () => {
+		closeDialog('cancel', 'none')
+		setId(0)
+		setDescription('')
+	}
+
+	const renderForm = () => {
+		return (
+			<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>
+				<Row>
+					<Col md={6}>
+						<FormGroup>
+							<Label className="capitalize">Parent</Label>
+								<Select showSearch
+									value={parent}
+									onChange={onChangeParent}
+									style={{ width: '100%' }}
+									filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
+								>
+								{dataDivisions.map((res, idx) => (
+									<Option key={idx} value={idx}>{res}</Option>
+								))}
+							</Select>
+						</FormGroup>
+					</Col>
+				</Row>
+				<Row>
+					<Col md={6}>
+						<FormGroup>
+							<Label className="capitalize">Description</Label>
+							<Input row="4" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)}/>
+						</FormGroup>
+					</Col>
+				</Row>
+			</Form>
+		)
+	}
+
+
+	return (
+		<>
+			<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
+				<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Resource</ModalHeader>
+				<ModalBody>
+					{renderForm()}
+				</ModalBody>
+				<ModalFooter>
+					<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
+					<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
+				</ModalFooter>
+			</Modal>
+		</>
+	)
 
 }
 

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