New Example: Booking List

Show and tell
, ,
21

Thanks for this tutorial, really helpful.

How would i go about displaying the Staff member associated with the bookings in the repeater?

and would i need to be filtering in the backend code if i wanted to filter by staff member as an additional feature?

22

When the booking is listed, I believe there is a field with the staff ID so you can do a query to get the staff name. Then show it into a text element

For the filtering, it is on the front end

23

@certified-code Thanks for that, will see if I can figure it out, if any other hints from the forum would much appreciate too :slight_smile:

24

Had a go with the suggestion above attempting to retrieve the staff members and display them in the status field instead for each booking. not getting any change here but attaching the code below. Any suggestions?

import { getBookings } from ‘backend/bookings.jsw’ ;
import wixUsers from ‘wix-users’ ;
import wixData from ‘wix-data’ ;

let staffMap = {};

$w . onReady ( function () {
initElements ();
});

async function initializeElements ( ) {
// Get all the staff from the Staff collection.
const staff = await getAllStaff ();
// Put the staff members in a map for easy access by ID.
staff . forEach ( member => staffMap [ member . _id ] = member );
}

async function getAllStaff ( ) {
const data = await wixData . query ( “Bookings/Staff” ). find ();
return data . items ;
}

function initElements ( ) {

$w ( '#submitButton' ). onClick (() =>  loadBookings ()); 

$w ( '#statusCheckbox' ). options  = [ 
    {  "value" :  "CONFIRMED" ,  "label" :  "CONFIRMED"  }, 
    {  "value" :  "CANCELED" ,  "label" :  "CANCELED"  }, 
    {  "value" :  "PENDING" ,  "label" :  "PENDING"  }, 
    {  "value" :  "PENDING_CHECKOUT" ,  "label" :  "PENDING CHECKOUT"  }, 
    {  "value" :  "PENDING_APPROVAL" ,  "label" :  "PENDING APPROVAL"  }, 
    {  "value" :  "DECLINED" ,  "label" :  "DECLINED"  } 
]; 

$w ( '#statusCheckbox' ). value  = [ "CONFIRMED" ,  "CANCELED" ]; 
$w ( '#dateStart' ). value  =  **new**  Date ( "2021-11-01T17:00:00.000Z" ); 
$w ( '#dateEnd' ). value  =  **new**  Date ( "2022-05-08T17:00:00.000Z" ); 

$w ( '#sessionsRepeater' ). onItemReady (( $item ,  data ,  index ) => { 
    $item ( '#sessionDateText' ). text  =  data . bookedEntity . singleSession . start . toLocaleString (); 
    $item ( '#sessionClientNameText' ). text  =  data . formInfo . contactDetails . firstName ; 
    $item ( '#sessionServiceText' ). text  =  data . bookedEntity . title ;

const staffMember = staffMap [ data . staffMemberId ]. name ;
$item ( ‘#sessionStaffText’ ). text = staffMember ;
});
$w ( ‘#sessionsRepeater’ ). data = [];
}
async function loadBookings ( ) {

$w ( '#errorText' ). hide (); 
**if**  (!( $w ( '#dateStart' ). valid  &&  $w ( '#dateEnd' ). valid  &&  $w ( '#statusCheckbox' ). valid )) { 
    $w ( '#errorText' ). show (); 
    $w ( '#errorText' ). text  =  "Error in form fields" ; 
    **return** ; 
}

// Remove the comment to limit access only to Admin members (recommended for security best practices)
if (! await isUserAdmin ()) {
$w ( ‘#errorText’ ). show ();
$w ( ‘#errorText’ ). text = “This data is accessible to admin members only” ;
return ;
}

$w ( '#submitButton' ). disable (); 
**const**  dateStart  =  $w ( '#dateStart' ). value ; 
**const**  dateEndTemp  =  $w ( '#dateEnd' ). value ; 
**const**  dateEnd  =  **new**  Date ( dateEndTemp . getTime () +  60  *  60  *  24  *  1000 );  // adding one day to the end date so bookings on that date also pass the filter 
**const**  statuses  =  $w ( '#statusCheckbox' ). value ; 

getBookings ( dateStart ,  dateEnd ,  statuses ). then (( results ) => { 
    $w ( '#sessionsRepeater' ). data  =  results ; 
    **if**  ( results . length  ==  0 ) { 
        $w ( '#errorText' ). show (); 
        $w ( '#errorText' ). text  =  "No bookings found" ; 
    }  **else**  { 
        $w ( '#titles' ). show () 
    } 
}). **catch** (( error ) => { 
    console . error ( 'loadBookings error - '  +  error . message ); 
}). **finally** (() => { 
    $w ( '#submitButton' ). enable (); 
});

}

async function isUserAdmin ( ) {
try {

    **let**  user  =  wixUsers . currentUser ; 
    **if**  (! user . loggedIn ) { 
        console . log ( 'Member is not logged in' ); 
        **return**  **false** ; 
    } 

    **let**  roles  =  **await**  user . getRoles (); 
    **if**  ( roles . find ( role  =>  role . name  ==  "Admin" )) { 
        **return**  **true** ; 
    }  **else**  { 
        console . log ( 'Member is not an Admin' ); 
        **return**  **false** ; 
    } 

}  **catch**  ( error ) { 
    console . error ( 'isUserAdmin error - '  +  error . message ); 
    **return**  **false** ; 
}

}

25

Hello - I am having a hard time grabbing the Booking ID to add to my repeater

In this code segment from the example -

$w( '#sessionsRepeater' ).onItemReady(($item, data) => { 
    $item( '#sessionDateText' ).text = 			data.bookedEntity.singleSession.start.toLocaleString(); 
    $item( '#sessionClientNameText' ).text = data.formInfo.contactDetails.firstName; 
    $item( '#sessionServiceText' ).text = data.bookedEntity.title; 
    $item( '#sessionStatusText' ).text = data.status; 
}); 
$w( '#sessionsRepeater' ).data = [];

If I try to add a booking ID
This doesn’t work -
$item(‘#sessionIdText’).text = data._id;
This also doesn’t work -
$item(‘#sessionIdText’).text = data.BookingId;

What do I need to call?
Thanks - I am VERY new to this, but I’ve tried everything