search gantt

src/views/SimproV2/CreatedProyek/DialogGantt.js

@@ -1,19 +1,19 @@
 import React, { useEffect, useState, useMemo } from 'react'
-import { Modal, ModalHeader, ModalBody, ModalFooter, Breadcrumb, BreadcrumbItem } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody, Col, Row, Breadcrumb, BreadcrumbItem } from 'reactstrap';
 import { Button } from 'reactstrap';
-import { Table, Tooltip, Spin } from 'antd';
+import { Select, Table, Tooltip, Spin } from 'antd';
 import 'antd/dist/antd.css';
 import moment from 'moment';
 import SweetAlert from 'react-bootstrap-sweetalert';
-import { VERSION_GANTT_DELETE, VERSION_GANTT_SEARCH, USER_LIST } from '../../../const/ApiConst';
+import { VERSION_GANTT_DELETE, VERSION_GANTT_SEARCH } from '../../../const/ApiConst';
 import axios from "../../../const/interceptorApi"
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import DialogForm from './DialogFormGantt';
 import DialogUserGantt from './DialogUserGantt';
-
 import { Link } from 'react-router-dom';
 
-const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName, hierarchyId, hierarchyName, openDialogHierarchy, isLogin, token, role_id, user_id }) => {
+const { Option } = Select
+const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName, hierarchyId, hierarchyName, openDialogHierarchy, isLogin, token, role_id, user_id, dataViewStartDate }) => {
   if (role_id && user_id && token && isLogin) {
     role_id = role_id;
     user_id = user_id;
@@ -38,10 +38,10 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
   const [alertDelete, setAlertDelete] = useState(false)
   const [idDelete, setIdDelete] = useState(0)
   const [idGantt, setIdGantt] = useState(0)
-  const [humanResource, setHumanResource] = useState([])
   const [dataEdit, setDataEdit] = useState([])
   const [typeDialog, setTypeDialog] = useState('')
   const [loading, setLoading] = useState(true);
+  const [searchGantt, setSearchGantt] = useState(null);
 
   useEffect(() => {
     if (openDialog && hierarchyId > 0 || idTask > 0 && !openDialogHierarchy) {
@@ -51,33 +51,7 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
     if (!openDialog) {
       setDataGantt([]);
     }
-  }, [hierarchyId, idTask, openDialog])
-
-  const getDataHumanResource = async () => {
-    const result = await axios
-      .get(USER_LIST, HEADER)
-      .then(res => res)
-      .catch((error) => error.response);
-
-    if (result && result.status == 200) {
-      setTransferUser(result.data.data);
-    } else {
-
-    }
-  }
-
-  const setTransferUser = (data) => {
-    const finalData = []
-    data.map((val, index) => {
-      let data = {
-        key: val.id,
-        title: val.name
-      }
-      finalData.push(data)
-    });
-    setHumanResource(finalData)
-  }
-
+  }, [hierarchyId, idTask, openDialog, searchGantt])
 
   const getdataGantt = async () => {
     let payload;
@@ -85,7 +59,8 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
       payload = {
         "select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"],
         "columns": [
-          { "name": "hierarchy_ftth_id", "logic_operator": "=", "value": hierarchyId, "operator": "AND" }
+          { "name": "hierarchy_ftth_id", "logic_operator": "=", "value": hierarchyId, "operator": "AND" },
+          { "name": "id", "logic_operator": "=", "value": searchGantt, "operator": "AND" }
         ],
         "orders": { "columns": ["name_version"], "ascending": true }
       }
@@ -93,7 +68,8 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
       payload = {
         "select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"],
         "columns": [
-          { "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" }
+          { "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" },
+          { "name": "id", "logic_operator": "=", "value": searchGantt, "operator": "AND" }
         ],
         "orders": { "columns": ["name_version"], "ascending": true },
       }
@@ -168,6 +144,7 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
                 token: token,
                 role_id: role_id,
                 user_id: user_id,
+                dataViewStartDate: dataViewStartDate
               }
             }}>
               <Tooltip title="Gantt">
@@ -262,17 +239,36 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
     <>
       <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
         <ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}>
-          {hierarchyName ?
+          {hierarchyName ? (
             <Breadcrumb>
               <BreadcrumbItem><a href="/projects">Project</a></BreadcrumbItem>
               <BreadcrumbItem active>{hierarchyName}</BreadcrumbItem>
             </Breadcrumb>
-            :
-            <div>Gantt Project {proyekName} </div>
-          }
-          {!hierarchyId && (<> <Button onClick={handleOpenDialogForm} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
-          </>
+          ) : (
+            <div>Gantt Project {proyekName}</div>
+          )}
+          <Select
+            placeholder='Search Gantt Name'
+            showSearch
+            filterOption={(inputValue, option) =>
+              option.children.toLowerCase().includes(inputValue.toLowerCase())
+            }
+            onChange={(val) => setSearchGantt(val)}
+            style={{ width: 200 }}
+          >
+            {dataGantt.map((res) => (
+              <Option key={res.id} value={res.id}>
+                {res.name_version}
+              </Option>
+            ))}
+          </Select>
+
+          {!hierarchyId && (
+            <Button onClick={handleOpenDialogForm} size='sm' color="primary">
+              <i className='fa fa-plus'></i>
+            </Button>
           )}
+
         </ModalHeader>
         <ModalBody>
           <div style={{ width: '100%', overflow: "auto" }}>
@@ -281,10 +277,8 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
             </Spin>
           </div>
         </ModalBody>
-        {/* <ModalFooter>
-          <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
-        </ModalFooter> */}
-      </Modal>
+      </Modal >
+
       <NotificationContainer />
       <SweetAlert
         show={alertDelete}