search implemented

crni99 · Jan 2, 2025 · 7448115 · 7448115
1 parent c8767a1
commit 7448115
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 41 deletions.
diff --git a/src/components/airline/AirlinesList.jsx b/src/components/airline/AirlinesList.jsx
@@ -7,18 +7,19 @@ import ListHeader from "../common/ListHeader";
 import AirlinesListTable from "./AirlinesListTable";
 import { Entities } from '../../utils/const.js';
 
-// Make search working
 export default function AirlineList() {
     const [pageNumber, setPageNumber] = useState(1);
     const [totalPages, setTotalPages] = useState(1);
     const [airlines, setAirlines] = useState([]);
-    const { data, dataExist, error, isLoading, isError } = useFetch(Entities.AIRLINES, null, pageNumber);
+    const [triggerFetch, setTriggerFetch] = useState(false);
+    const { data, dataExist, error, isLoading, isError } = useFetch(Entities.AIRLINES, null, pageNumber, triggerFetch);
 
     useEffect(() => {
         if (data) {
             setAirlines(data.data);
             setPageNumber(data.pageNumber);
             setTotalPages(data.totalPages);
+            setTriggerFetch(false);
         }
     }, [data]);
 
@@ -28,7 +29,7 @@ export default function AirlineList() {
 
     return (
         <>
-            <ListHeader dataExist={dataExist} dataType={Entities.AIRLINES} createButtonTitle="Create Airline" />
+            <ListHeader dataExist={dataExist} dataType={Entities.AIRLINES} createButtonTitle="Create Airline" setTriggerFetch={setTriggerFetch} />
             <br />
             {isLoading && <LoadingSpinner />}
             {isError && error && <Alert alertType="error" alertText={error.message} />}

diff --git a/src/components/apiUser/ApiUsersList.jsx b/src/components/apiUser/ApiUsersList.jsx
@@ -4,21 +4,22 @@ import { Pagination } from '../common/pagination/Pagination';
 import LoadingSpinner from '../common/LoadingSpinner';
 import Alert from '../common/Alert';
 import ApiUsersListTable from "./ApiUsersListTable";
-import PageTitle from '../common/PageTitle';
+import ListHeader from "../common/ListHeader";
 import { Entities } from '../../utils/const.js';
 
-// Make search working
 export default function ApiUsersList() {
     const [pageNumber, setPageNumber] = useState(1);
     const [totalPages, setTotalPages] = useState(1);
     const [apiUsers, setApiUsers] = useState([]);
-    const { data, error, isLoading, isError } = useFetch(Entities.API_USERS, null, pageNumber);
+    const [triggerFetch, setTriggerFetch] = useState(false);
+    const { data, dataExist, error, isLoading, isError } = useFetch(Entities.API_USERS, null, pageNumber, triggerFetch);
 
     useEffect(() => {
         if (data) {
             setApiUsers(data.data);
             setPageNumber(data.pageNumber);
             setTotalPages(data.totalPages);
+            setTriggerFetch(false);
         }
     }, [data]);
 
@@ -28,7 +29,7 @@ export default function ApiUsersList() {
 
     return (
         <>
-            <PageTitle title='Api Users' />
+            <ListHeader dataExist={dataExist} dataType={Entities.API_USERS} setTriggerFetch={setTriggerFetch} />
             <br />
             {isLoading && <LoadingSpinner />}
             {isError && error && <Alert alertType="error" alertText={error.message} />}

diff --git a/src/components/common/ListHeader.jsx b/src/components/common/ListHeader.jsx
@@ -2,8 +2,9 @@ import React from 'react';
 import CreateButton from "../common/CreateButton";
 import SearchInputWithButton from "../common/SearchInputWithButton";
 import { getRole } from "../../utils/auth";
+import { Entities } from '../../utils/const.js';
 
-export default function ListHeader({ dataExist, dataType, createButtonTitle }) {
+export default function ListHeader({ dataExist, dataType, createButtonTitle, setTriggerFetch }) {
 
     const isUser = getRole();
 
@@ -12,12 +13,12 @@ export default function ListHeader({ dataExist, dataType, createButtonTitle }) {
             <div className="row justify-content-between">
                 <div className="col-md-12">
                     <div className="d-flex justify-content-between align-items-center" style={{ width: '100%' }}>
-                        {isUser !== 'User' && (
+                        {isUser !== 'User' && dataType !== Entities.API_USERS && (
                             <CreateButton destination={`/${dataType}/Create`} title={createButtonTitle} />
                         )}
                         {dataExist && (
                             <div className="d-flex">
-                                <SearchInputWithButton type={dataType} />
+                                <SearchInputWithButton type={dataType} setTriggerFetch={setTriggerFetch} />
                             </div>
                         )}
                     </div>

diff --git a/src/components/common/SearchInputWithButton.jsx b/src/components/common/SearchInputWithButton.jsx
@@ -1,7 +1,12 @@
 import React from 'react';
 import { Entities } from '../../utils/const';
 
-export default function SearchInputWithButton({ type }) {
+export default function SearchInputWithButton({ type, setTriggerFetch }) {
+
+    const handleSearch = () => {
+        setTriggerFetch(true);
+    };
+
     const renderInput = () => {
         switch (type) {
             case Entities.AIRLINES:
@@ -15,7 +20,21 @@ export default function SearchInputWithButton({ type }) {
                             placeholder="Air Serbia"
                             required
                         />
-                        <button id="searchButton" className="btn btn-primary">Search</button>
+                        <button id="searchButton" className="btn btn-primary" onClick={handleSearch}>Search</button>
+                    </div>
+                );
+
+            case Entities.API_USERS:
+                return (
+                    <div className="input-group me-3">
+                        <label htmlFor="roleSelect" className="input-group-text">Role:</label>
+                        <select id="roleSelect" className="form-control" required>
+                            <option value="" disabled selected>Select a role</option>
+                            <option value="User">User</option>
+                            <option value="Admin">Admin</option>
+                            <option value="SuperAdmin">Super Admin</option>
+                        </select>
+                        <button id="searchButton" className="btn btn-primary" onClick={handleSearch}>Search</button>
                     </div>
                 );
 
@@ -39,7 +58,7 @@ export default function SearchInputWithButton({ type }) {
                                 className="form-control"
                                 placeholder="Belgrade Nikola Tesla"
                                 required />
-                            <button id="searchButton" className="btn btn-primary">Search</button>
+                            <button id="searchButton" className="btn btn-primary" onClick={handleSearch}>Search</button>
                         </div>
                     </>
                 );
@@ -53,7 +72,7 @@ export default function SearchInputWithButton({ type }) {
                                 type="text"
                                 id="startDate"
                                 className="form-control"
-                                placeholder="10.06.2023."
+                                placeholder="2023-06-07"
                                 required />
                         </div>
                         <div className="input-group me-3">
@@ -62,9 +81,9 @@ export default function SearchInputWithButton({ type }) {
                                 type="text"
                                 id="endDate"
                                 className="form-control"
-                                placeholder="14.06.2023."
+                                placeholder="2023-14-06"
                                 required />
-                            <button id="searchButton" className="btn btn-primary">Search</button>
+                            <button id="searchButton" className="btn btn-primary" onClick={handleSearch}>Search</button>
                         </div>
                     </>
                 );
@@ -89,7 +108,7 @@ export default function SearchInputWithButton({ type }) {
                                 className="form-control"
                                 placeholder="Andjelic"
                                 required />
-                            <button id="searchButton" className="btn btn-primary">Search</button>
+                            <button id="searchButton" className="btn btn-primary" onClick={handleSearch}>Search</button>
                         </div>
                     </>
                 );
@@ -114,7 +133,7 @@ export default function SearchInputWithButton({ type }) {
                                 className="form-control"
                                 placeholder="Andjelic"
                                 required />
-                            <button id="searchButton" className="btn btn-primary">Search</button>
+                            <button id="searchButton" className="btn btn-primary" onClick={handleSearch}>Search</button>
                         </div>
                     </>
                 );
@@ -139,7 +158,7 @@ export default function SearchInputWithButton({ type }) {
                                 className="form-control"
                                 placeholder="600"
                                 required />
-                            <button id="searchButton" className="btn btn-primary">Search</button>
+                            <button id="searchButton" className="btn btn-primary" onClick={handleSearch}>Search</button>
                         </div>
                     </>
                 );

diff --git a/src/components/destination/DestinationsList.jsx b/src/components/destination/DestinationsList.jsx
@@ -7,18 +7,19 @@ import ListHeader from "../common/ListHeader";
 import DestinationsListTable from "./DestinationsListTable";
 import { Entities } from '../../utils/const.js';
 
-// Make search working
 export default function DestinationsList() {
     const [pageNumber, setPageNumber] = useState(1);
     const [totalPages, setTotalPages] = useState(1);
     const [destinations, setDestinations] = useState([]);
-    const { data, dataExist, error, isLoading, isError } = useFetch(Entities.DESTINATIONS, null, pageNumber);
+    const [triggerFetch, setTriggerFetch] = useState(false);
+    const { data, dataExist, error, isLoading, isError } = useFetch(Entities.DESTINATIONS, null, pageNumber, triggerFetch);
 
     useEffect(() => {
         if (data) {
             setDestinations(data.data);
             setPageNumber(data.pageNumber);
             setTotalPages(data.totalPages);
+            setTriggerFetch(false);
         }
     }, [data]);
 
@@ -28,7 +29,7 @@ export default function DestinationsList() {
 
     return (
         <>
-            <ListHeader dataExist={dataExist} dataType={Entities.DESTINATIONS} createButtonTitle="Create Destination" searchText="Search by Name:" />
+            <ListHeader dataExist={dataExist} dataType={Entities.DESTINATIONS} createButtonTitle="Create Destination" searchText="Search by Name:" setTriggerFetch={setTriggerFetch} />
             <br />
             {isLoading && <LoadingSpinner />}
             {isError && error && <Alert alertType="error" alertText={error.message} />}

diff --git a/src/components/flight/FlightsList.jsx b/src/components/flight/FlightsList.jsx
@@ -7,18 +7,19 @@ import ListHeader from "../common/ListHeader";
 import FlightsListTable from "./FlightsListTable";
 import { Entities } from '../../utils/const.js';
 
-// Make search working
 export default function FlightsList() {
     const [pageNumber, setPageNumber] = useState(1);
     const [totalPages, setTotalPages] = useState(1);
     const [flights, setFlights] = useState([]);
-    const { data, dataExist, error, isLoading, isError } = useFetch(Entities.FLIGHTS, null, pageNumber);
+    const [triggerFetch, setTriggerFetch] = useState(false);
+    const { data, dataExist, error, isLoading, isError } = useFetch(Entities.FLIGHTS, null, pageNumber, triggerFetch);
 
     useEffect(() => {
         if (data) {
             setFlights(data.data);
             setPageNumber(data.pageNumber);
             setTotalPages(data.totalPages);
+            setTriggerFetch(false);
         }
     }, [data]);
 
@@ -28,7 +29,7 @@ export default function FlightsList() {
 
     return (
         <>
-            <ListHeader dataExist={dataExist} dataType={Entities.FLIGHTS} createButtonTitle="Create Flight" />
+            <ListHeader dataExist={dataExist} dataType={Entities.FLIGHTS} createButtonTitle="Create Flight" setTriggerFetch={setTriggerFetch} />
             <br />
             {isLoading && <LoadingSpinner />}
             {isError && error && <Alert alertType="error" alertText={error.message} />}

diff --git a/src/components/passenger/PassengersList.jsx b/src/components/passenger/PassengersList.jsx
@@ -7,18 +7,19 @@ import ListHeader from "../common/ListHeader";
 import PassengersListTable from "./PassengersListTable";
 import { Entities } from '../../utils/const.js';
 
-// Make search working
 export default function PassengersList() {
     const [pageNumber, setPageNumber] = useState(1);
     const [totalPages, setTotalPages] = useState(1);
     const [passengers, setPassengers] = useState([]);
-    const { data, dataExist, error, isLoading, isError } = useFetch(Entities.PASSENGERS, null, pageNumber);
+    const [triggerFetch, setTriggerFetch] = useState(false);
+    const { data, dataExist, error, isLoading, isError } = useFetch(Entities.PASSENGERS, null, pageNumber, triggerFetch);
 
     useEffect(() => {
         if (data) {
             setPassengers(data.data);
             setPageNumber(data.pageNumber);
             setTotalPages(data.totalPages);
+            setTriggerFetch(false);
         }
     }, [data]);
 
@@ -28,7 +29,7 @@ export default function PassengersList() {
 
     return (
         <>
-            <ListHeader dataExist={dataExist} dataType={Entities.PASSENGERS} createButtonTitle="Create Passenger" />
+            <ListHeader dataExist={dataExist} dataType={Entities.PASSENGERS} createButtonTitle="Create Passenger" setTriggerFetch={setTriggerFetch} />
             <br />
             {isLoading && <LoadingSpinner />}
             {isError && error && <Alert alertType="error" alertText={error.message} />}

diff --git a/src/components/pilot/PilotsList.jsx b/src/components/pilot/PilotsList.jsx
@@ -7,18 +7,19 @@ import ListHeader from "../common/ListHeader";
 import PilotsListTable from "./PilotsListTable";
 import { Entities } from '../../utils/const.js';
 
-// Make search working
 export default function PilotsList() {
     const [pageNumber, setPageNumber] = useState(1);
     const [totalPages, setTotalPages] = useState(1);
     const [pilots, setPilots] = useState([]);
-    const { data, dataExist, error, isLoading, isError } = useFetch(Entities.PILOTS, null, pageNumber);
+    const [triggerFetch, setTriggerFetch] = useState(false);
+    const { data, dataExist, error, isLoading, isError } = useFetch(Entities.PILOTS, null, pageNumber, triggerFetch);
 
     useEffect(() => {
         if (data) {
             setPilots(data.data);
             setPageNumber(data.pageNumber);
             setTotalPages(data.totalPages);
+            setTriggerFetch(false);
         }
     }, [data]);
 
@@ -28,7 +29,7 @@ export default function PilotsList() {
 
     return (
         <>
-            <ListHeader dataExist={dataExist} dataType={Entities.PILOTS} createButtonTitle="Create Pilot" />
+            <ListHeader dataExist={dataExist} dataType={Entities.PILOTS} createButtonTitle="Create Pilot" setTriggerFetch={setTriggerFetch} />
             <br />
             {isLoading && <LoadingSpinner />}
             {isError && error && <Alert alertType="error" alertText={error.message} />}

diff --git a/src/components/planeTicket/PlaneTicketsList.jsx b/src/components/planeTicket/PlaneTicketsList.jsx
@@ -7,18 +7,19 @@ import ListHeader from "../common/ListHeader";
 import PlaneTicketsListTable from "./PlaneTicketsListTable";
 import { Entities } from '../../utils/const.js';
 
-// Make search working
 export default function PlaneTicketsList() {
     const [pageNumber, setPageNumber] = useState(1);
     const [totalPages, setTotalPages] = useState(1);
     const [planeTickets, setPlaneTickets] = useState([]);
-    const { data, dataExist, error, isLoading, isError } = useFetch(Entities.PLANE_TICKETS, null, pageNumber);
+    const [triggerFetch, setTriggerFetch] = useState(false);
+    const { data, dataExist, error, isLoading, isError } = useFetch(Entities.PLANE_TICKETS, null, pageNumber, triggerFetch);
 
     useEffect(() => {
         if (data) {
             setPlaneTickets(data.data);
             setPageNumber(data.pageNumber);
             setTotalPages(data.totalPages);
+            setTriggerFetch(false);
         }
     }, [data]);
 
@@ -28,7 +29,7 @@ export default function PlaneTicketsList() {
 
     return (
         <>
-            <ListHeader dataExist={dataExist} dataType={Entities.PLANE_TICKETS} createButtonTitle="Create Plane Ticket" />
+            <ListHeader dataExist={dataExist} dataType={Entities.PLANE_TICKETS} createButtonTitle="Create Plane Ticket" setTriggerFetch={setTriggerFetch} />
             <br />
             {isLoading && <LoadingSpinner />}
             {isError && error && <Alert alertType="error" alertText={error.message} />}