update filter name

src/views/SimproV2/CreatedProyek/DialogUserGantt.js

@@ -2,11 +2,11 @@ import React, { useEffect, useState } from 'react'
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { Button, Form } from 'reactstrap';
 import axios from "../../../const/interceptorApi";
-import { USER_VERSION_GANTT_ADDS, USER_VERSION_GANTT_SEARCH, USER_LIST} from '../../../const/ApiConst';
-import { Transfer } from 'antd';
+import { USER_VERSION_GANTT_ADDS, USER_VERSION_GANTT_SEARCH, USER_LIST } from '../../../const/ApiConst';
+import { Transfer, Spin } from 'antd';
 import 'antd/dist/antd.css';
 
-const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
+const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt }) => {
   const token = localStorage.getItem("token")
   const HEADER = {
     headers: {
@@ -17,7 +17,7 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
   const [id, setId] = useState(0)
   const [targetKeys, setTargetKeys] = useState([])
   const [humanResource, setHumanResource] = useState([])
-  
+  const [loading, setLoading] = useState(true);
 
   const handleCLearData = () => {
     setId(0)
@@ -25,16 +25,16 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
   }
 
   useEffect(() => {
-    if(!openDialog){
-        handleCLearData()
+    if (!openDialog) {
+      handleCLearData()
     } else {
-        getDataHumanResource();
+      getDataHumanResource();
     }
   }, [openDialog])
 
   useEffect(() => {
-    if(idGantt && idGantt > 0){
-        getUserGantt()
+    if (idGantt && idGantt > 0) {
+      getUserGantt()
     }
   }, [idGantt])
 
@@ -64,28 +64,30 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
   }
 
   const getUserGantt = async () => {
+    setLoading(true)
     const payload = {
-        "columns": [
-            { "name": "version_gantt_id", "logic_operator": "=", "value": idGantt, "operator": "AND" }
-        ]
+      "columns": [
+        { "name": "version_gantt_id", "logic_operator": "=", "value": idGantt, "operator": "AND" }
+      ]
     }
     const result = await axios
       .post(USER_VERSION_GANTT_SEARCH, payload, HEADER)
       .then(res => res)
       .catch((error) => error.response);
 
-    if(result && result.status==200){
-      console.log("cek resource get user gantt",result.data.data)
+    if (result && result.status == 200) {
+      console.log("cek resource get user gantt", result.data.data)
       setUserGantt(result.data.data);
-    }else{
+      setLoading(false)
+    } else {
 
     }
   }
 
   const setUserGantt = (data) => {
     let newTargetKeys = []
-    data.map((val,index)=> {
-        newTargetKeys.push(val.user_id)
+    data.map((val, index) => {
+      newTargetKeys.push(val.user_id)
     });
     setTargetKeys(newTargetKeys)
   }
@@ -95,11 +97,11 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
     handleCLearData()
   }
 
-  const saveVersionGantt= async () => {
+  const saveVersionGantt = async () => {
 
     const formData = {
-        user_id:targetKeys,
-        version_gantt_id:idGantt
+      user_id: targetKeys,
+      version_gantt_id: idGantt
     }
 
     const result = await axios
@@ -108,9 +110,9 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
       .catch((error) => error.response);
 
 
-    if(result && result.status==200){
+    if (result && result.status == 200) {
       closeDialog('success')
-    }else{
+    } else {
       closeDialog('failed')
     }
   }
@@ -134,16 +136,19 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
         overflow: "auto"
       }}>
         <Transfer
-            showSearch
-            titles={['Available HR', 'Granted to']}
-            dataSource={humanResource}
-            targetKeys={targetKeys}
-            onChange={handleChange}
-            render={item => item.title}
-            listStyle={{
-              width: 250,
-              height: 300,
-            }}
+          showSearch
+          filterOption={(inputValue, option) =>
+            option.title.toLowerCase().includes(inputValue.toLowerCase())
+          }
+          titles={['Available HR', 'Granted to']}
+          dataSource={humanResource}
+          targetKeys={targetKeys}
+          onChange={handleChange}
+          render={item => item.title}
+          listStyle={{
+            width: 250,
+            height: 300,
+          }}
         />
       </div>
     )
@@ -152,10 +157,12 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
 
   return (
     <>
-      <Modal size="lg" style={{maxWidth: '600px', width: '100%'}} isOpen={openDialog} toggle={toggleDialog}>
+      <Modal size="lg" style={{ maxWidth: '600px', width: '100%' }} isOpen={openDialog} toggle={toggleDialog}>
         <ModalHeader className="capitalize" toggle={closeDialog}>Gantt Permission</ModalHeader>
         <ModalBody>
-          {renderForm()}
+          <Spin tip="Loading..." spinning={loading}>
+            {renderForm()}
+          </Spin>
         </ModalBody>
         <ModalFooter>
           <Button color="primary" onClick={() => handleSave()}>Save</Button>{' '}