WIP: division, implement hierarchy

src/views/SimproV2/Divisi/DialogForm.js

@@ -9,25 +9,22 @@ 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 [name, setName] = useState('')
-  const [uom, setUom] = useState('')
+	const [parent, setParent] = useState(null)
 	const [description, setDescription] = useState('')
-  const [unitPrice, setUnitPrice] = useState()
-
-
 
+	const onChangeParent = (val) => {
+		setParent(val)
+	}
 
 	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)
-
+			setParent(dataEdit.parent)
 		} else {
 			setId(0)
 		}
@@ -38,36 +35,28 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
 		if (typeDialog === "Save") {
 			data = {
 				name: name,
-        description
+				description,
+				parent
 			}
-
 			closeDialog('save', data);
 		} else {
 			data = {
 				id,
 				name: name,
-        description
+				description,
+				parent
 			}
 			closeDialog('edit', data);
 		}
 		setId(0)
 		setDescription('')
-
 	}
-
 	const handleCancel = () => {
 		closeDialog('cancel', 'none')
 		setId(0)
-
 		setDescription('')
-
 	}
 
-
-
-
-
-
 	const renderForm = () => {
 		return (
 			<Form>
@@ -75,13 +64,32 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
 					<Col md={6}>
 						<FormGroup>
 							<Label className="capitalize">Name</Label>
-              <Input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={`Input name...`} />
+							<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)} placeholder={`Description ...`} />
+							<Input row="4" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)}/>
 						</FormGroup>
 					</Col>
 				</Row>
@@ -102,17 +110,6 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
 					<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}
-    /> */}
 		</>
 	)
 

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