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,7 +25,7 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
   }
 
   useEffect(() => {
-    if(!openDialog){
+    if (!openDialog) {
       handleCLearData()
     } else {
       getDataHumanResource();
@@ -33,7 +33,7 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
   }, [openDialog])
 
   useEffect(() => {
-    if(idGantt && idGantt > 0){
+    if (idGantt && idGantt > 0) {
       getUserGantt()
     }
   }, [idGantt])
@@ -64,6 +64,7 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
   }
 
   const getUserGantt = async () => {
+    setLoading(true)
     const payload = {
       "columns": [
         { "name": "version_gantt_id", "logic_operator": "=", "value": idGantt, "operator": "AND" }
@@ -74,17 +75,18 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
       .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)=> {
+    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')
     }
   }
@@ -135,6 +137,9 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
       }}>
         <Transfer
           showSearch
+          filterOption={(inputValue, option) =>
+            option.title.toLowerCase().includes(inputValue.toLowerCase())
+          }
           titles={['Available HR', 'Granted to']}
           dataSource={humanResource}
           targetKeys={targetKeys}
@@ -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>
+          <Spin tip="Loading..." spinning={loading}>
             {renderForm()}
+          </Spin>
         </ModalBody>
         <ModalFooter>
           <Button color="primary" onClick={() => handleSave()}>Save</Button>{' '}