Showing data from a filtered table on another page

Hi,
I have a page on my wix website where clients can request a job for drone pilots. This is page is called “Opdracht plaatsen Klant”. The data filled in by the client will go after submitting into a collection called “Dronepiloot overzicht” with the id “Dronepilootoverzicht”. When a request is created, Drone pilots can see the new request in a table together with all other open requests on the page called “Dronepiloot ove… (Referentie Aanv…)”. When drone pilots click on a row, they will be redirected to another page called “Details Aanvraag”, where they can see all the information of the request. Below all the information, still on the same page, the drone pilot can create an offer for the related request by filling in input fieds. Ones the drone pilots submits his data by clicking on a button, the offer will be created in a collection called “Offers”. The ID of the related request is saved into the collection field " RequestId". The ID of the Drone pilot is saved into the collection field “createdById”. On another page, called “Overzicht offertes”, the drone pilot can see all the offers created in a table. When the drone pilot clicks on a row, he will be redirected to another page called “Details Offertes”. on this page, I want the Drone Pilot to see the details of the related offer, but also the details of the related request.

I noticed that when the table is not filtered, the input fields are shown.

Can someone please help? Below my codes:

Below all the codes from my different pages:

“Dronepiloot ove… (Referentie Aanv…)”:

import wixData from ‘wix-data’ ;
import wixLocation from ‘wix-location’ ;

$w . onReady ( function () {

$w ( ‘#myTable’ ). onRowSelect (( event ) => {
// Set the selectedRowData variable to the data of the selected row
const selectedRowData = event . rowData ;

// Use the wixLocation API to navigate to the details page with the selected row's ID as a parameter 
wixLocation . to ( `/test?id= ${ selectedRowData . _id } &name= ${ selectedRowData . name }`); 

});

})

Code for page “Details Aanvraag”:

import wixLocation from ‘wix-location’ ;
import wixData from ‘wix-data’ ;
import wixUsers from ‘wix-users’ ;

$w . onReady ( function () {
$w ( ‘#errorMessage’ ). hide ();

// Get the ID parameter from the URL 
**const**  id  =  wixLocation . query . id ; 

// Query the collection for the selected row's data 
wixData . query ( 'Dronepilootoverzicht' ) 
    . eq ( '_id' ,  id ) 
    . find () 
    . then (( results ) => { 
        // Get the first (and only) item in the results array 
        **const**  selectedRowData  =  results . items [ 0 ]; 

        // Set the value of the input fields based on the selected row's data 
        $w ( '#aanvraag' ). value  =  selectedRowData . title ; 
        $w ( '#provincie' ). value  =  selectedRowData . provincie ; 
        $w ( '#tijdstip' ). value  =  selectedRowData . tijdstip ; 
        $w ( '#datum' ). value  =  selectedRowData . datum ; 
        $w ( '#domein' ). value  =  selectedRowData . domein ; 
        $w ( '#extraInfo' ). value  =  selectedRowData . uitleg ; 
        $w ( '#stad' ). value  =  selectedRowData . stad ; 
        $w ( '#budget' ). value  =  selectedRowData . budget ; 

        // Set the requestId in the form 
        $w ( '#requestId' ). value  =  selectedRowData . _id ; 
    }) 
    . **catch** (( error ) => { 
        console . error ( error ); 
        // Show an error message to the user 
    }); 

});

// Add a submit button event handler
export function onSubmitButton_click ( event ) {
// Get the input values from the form
const preFlightPrice = $w ( ‘#preFlightPriceInput’ ). value ;
const duringFlightPrice = $w ( ‘#duringFlightPriceInput’ ). value ;
const afterFlightPrice = $w ( ‘#afterFlightPriceInput’ ). value ;
const datum = $w ( ‘#dateTimeInput’ ). value ;
const drone = $w ( ‘#droneTypeInput’ ). value ;
const extraInfo = $w ( ‘#extraInfoInput’ ). value ;
const title = $w ( ‘#referentieOfferteInput’ ). value ;
const tijdstip = $w ( ‘#tijdstipInput’ ). value ;
const status = “Open” ;

// Get the request ID from the form 
**const**  requestId  =  $w ( '#requestId' ). value ; 

// Get the ID of the logged-in member 
**const**  userId  =  wixUsers . currentUser . id ; 

// Only insert the row if the request ID is filled in 
**if**  ( requestId ) { 
    // Add the pilot's proposal to the Offers collection 
    wixData . insert ( 'Offers' , { 
            preFlightPrice , 
            duringFlightPrice , 
            afterFlightPrice , 
            datum , 
            drone , 
            extraInfo , 
            title , 
            tijdstip , 
            requestId , 
            status , 
            submittedBy :  userId ,  // add the ID of the logged-in member to the Offers collection 
            createdById :  userId ,  // add this line to set the createdById field to the current user's ID 
        }) 
        . then (( result ) => { 
            // Redirect the pilot to a success page 
            wixLocation . to ( '/success' ); 
        }) 
        . **catch** (( error ) => { 
            console . error ( error ); 
            // Show an error message to the user 
            $w ( '#errorMessage' ). text  =  error . message ; 
            $w ( '#errorMessage' ). show (); 
        }); 

} 

}

Code for page “Details Overzicht”:

import wixData from ‘wix-data’;
import wixUsers from ‘wix-users’;
import wixWindow from ‘wix-window’;
import wixLocation from ‘wix-location’;

$w.onReady(async function () {
const user = wixUsers.currentUser;

if (user.loggedIn) {
const userId = user.id;

// Set rows property of table to an empty array 
$w('#offersTable').rows = []; 

try { 
  // Query the Offers collection for open offers submitted by the logged-in member 
  const results = await wixData.query('Offers') 
    .eq('submittedBy', userId) // Filter by submittedBy field 
    .eq('status', 'Open') // Filter by status field 
    .find(); 

  const filteredResults = results.items; 
  const tableData = filteredResults.map((item) => ({ 
    title: item.title, 
    drone: item.drone, 
    preFlightPrice: item.preFlightPrice, 
    status: item.status, 
  })); 
  const table = $w('#offersTable'); 
  table.rows = tableData; 
  table.show(); 
} catch (error) { 
  console.log(error); 
} 

} else {
wixWindow.openLightbox(‘login’);
}
});

$w.onReady(function () {
$w(‘#offersTable’).onRowSelect((event) => {
// Set the selectedRowData variable to the data of the selected row
const selectedRowData = event.rowData;

// Use the wixLocation API to navigate to the details page with the selected row's ID as a parameter 
wixLocation.to(`/details-offertes?id=${selectedRowData._id}&name=${selectedRowData.name}`); 

});
});

Code for page “Details Offertes”:

import wixLocation from ‘wix-location’ ;
import wixData from ‘wix-data’ ;
import wixUsers from ‘wix-users’ ;

$w . onReady ( function () {
$w ( ‘#errorMessage’ ). hide ();

// Get the ID parameter from the URL
const id = wixLocation . query . id ;

// Get the logged-in user’s ID
const user = wixUsers . currentUser ;
if ( user . loggedIn ) {
const userId = user . id ;
// Query the collection for the selected row’s data
wixData . query ( ‘Offers’ )
. eq ( ‘_id’ , id )
. find ()
. then (( results ) => {
// Check if results.items is not empty
if ( results . items . length > 0 ) {
// Get the first (and only) item in the results array
const selectedRowData = results . items [ 0 ];

  // Check if the logged-in user's ID matches the userId in the selected row's data 
  **if**  ( selectedRowData . userId  ===  userId ) { 
    // Set the value of the input fields based on the selected row's data 
    $w ( '#preFlightPriceInput' ). value  =  selectedRowData . preFlightPrice ; 
    $w ( '#duringFlightPriceInput' ). value  =  selectedRowData . duringFlightPrice ; 
    $w ( '#afterFlightPriceInput' ). value  =  selectedRowData . afterFlightPrice ; 
    $w ( '#dateTimeInput' ). value  =  selectedRowData . datum ; 
    $w ( '#droneTypeInput' ). value  =  selectedRowData . drone ; 
    $w ( '#extraInfoInput' ). value  =  selectedRowData . extraInfo ; 
    $w ( '#referentieOfferteInput' ). value  =  selectedRowData . title ; 
    $w ( '#tijdstipInput' ). value  =  selectedRowData . tijdstip ; 

    // Get the related request ID from the offer's data 
    **const**  requestId  =  selectedRowData . requestId ; 

    // Query the Requests collection to get the related request's data 
    wixData . query ( 'Dronepilootoverzicht' ) 
      . eq ( '_id' ,  requestId ) 
      . find () 
      . then (( requestResults ) => { 
        // Check if requestResults.items is not empty 
        **if**  ( requestResults . items . length  >  0 ) { 
          // Get the first (and only) item in the request results array 
          **const**  selectedRequestData  =  requestResults . items [ 0 ]; 

          // Set the value of the input fields based on the related request's data 
          $w ( '#aanvraag' ). value  =  selectedRequestData . title ; 
          $w ( '#provincie' ). value  =  selectedRequestData . provincie ; 
          $w ( '#stad' ). value  =  selectedRequestData . stad ; 
          $w ( '#domein' ). value  =  selectedRequestData . domein ; 
        }  **else**  { 
          // Handle case where requestResults.items is empty 
          console . error ( 'Related request not found' ); 
        } 
      }) 
      . **catch** (( err ) => { 
        // Handle error in requestResults query 
        console . error ( 'Failed to query related request:' ,  err ); 
      }); 
  }  **else**  { 
    // Handle case where logged-in user's ID does not match selected row's userId 
    console . error ( 'Unauthorized access to offer' ); 
  } 
}  **else**  { 
  // Handle case where selected row is not found 
  console . error ( 'Selected row not found' ); 
} 

})
. catch (( err ) => {
// Handle error in selected row query
console . error ( ‘Failed to query selected row:’ , err );
});
} else {
// Handle case where user is not logged in
console . error ( ‘User not logged in’ );
}
});