Pending Appointments

khadedraturner · September 24, 2021, 4:32am

I tweaked the code from the Quick booking and pending appoints example.
(https://www.wix.com/velo/example/quick-book-and-pending-appointments)
To only move data from the requests repeater to the approved or dismissed repeater, when you click the approve or decline buttons.

Nothing happens when i click the buttons. I have set up the repeaters exactly like the example this is just the published view
please help!!!

//-------------Imports-------------//

// Import the wix-data module for working with collections.
import wixData from "wix-data";
import wixBookings from 'wix-bookings';
// Import the wix-location module for sending emails for dismissed appointments.
import wixLocation from "wix-location";

//-------------Page Setup-------------//

$w.onReady(function () {
    // When the pending requests dataset is ready:
    $w("#pendingRequestsDataset").onReady(() => {
        // If there are no pending requests:
        if ($w("#pendingRequestsDataset").getTotalCount() === 0) {
            // Show the no pending requests message.
            $w("#noPendingRequests").show();
        }
    });
});

//-------------Repeater Setup-------------//

// Set up each item in the requests repeater as it is loaded.
export function requestsRepeater_itemReady($item, itemData, index) {
    
    // Populate the date field with the slot's start date.
    $item("#date").text = getDate;
    $item("#email").text
    

    // Set the dismiss button to dismiss the appointment request when clicked.
    $item("#dismissButton").onClick(async () => {
        // Disable the dismiss and approve buttons.
        $item("#dismissButton").disable();
        $item("#approveButton").disable();
        // Dismiss the appointment request.
        await dismissRequest(itemData, index, $w);
    });

    // Set the approve button to approve the appointment request when clicked.
    $item("#approveButton").onClick(async () => {
        // Disable the dismiss and approve buttons.
        $item("#dismissButton").disable();
        $item("#approveButton").disable();
        // Approve the appointment request.
        await approveRequest(itemData, index);
    });
}

// Set up each item in the dismissed requests repeater as it is loaded.
export function dismissedRequests_itemReady($item, itemData, index) {
    // Set the contact button to create an email to the user whose request was dismissed.
    $item("#emailButton").onClick(() => {
        const subject = "Thanks For Getting in Touch";
        wixLocation.to(`mailto:${itemData.email}?subject=${subject}`);
    });
}

// Set up each item in the approved requests repeater as it is loaded.
export function approvedRequests_itemReady($item, itemData, index) {
    // Set the contact button to create an email to the user whose request was dismissed.
    $item("#emailButton2").onClick(() => {
        const subject = "Thank you for Booking";
        wixLocation.to(`mailto:${itemData.email}?subject=${subject}`);
    });
}
//-------------Request Dismissal-------------//

// Dismiss the requested appointment.
async function dismissRequest(pendingRequest, index, $w) {
    // Dismiss the requested appointment.
    // Set the requested appointment's status to dismissed.
    pendingRequest.status = "DISMISSED";
    // Update the requested appointment in the pendingAppointments collection.
    await wixData.update("Customers", pendingRequest);
    // Refresh the page's data and update page elements.
    
}

// Approve the requested appointment.
async function approveRequest(pendingRequest, index, $w) {
    // Dismiss the requested appointment.
    // Set the requested appointment's status to dismissed.
    pendingRequest.status = "APPROVED";
    // Update the requested appointment in the pendingAppointments collection.
    await wixData.update("Customers", pendingRequest);
    // Refresh the page's data and update page elements.
    refreshData();

//-------------Page Update-------------//

// Refresh the page's datasets and update all the elements that are connected to them.
function refreshData() {
    // Refresh the pending requests dataset and update all the elements that are connected to it.
    $w("#pendingRequestsDataset").refresh().then(() => {
        // If there are no pending requests:
        if ($w("#pendingRequestsDataset").getTotalCount() === 0) {
            // Show the no pending requests message.
            $w("#noPendingRequests").show();
        }
    });
    // Refresh the dismissed requests dataset and update all the elements that are connected to it.
    $w("#dismissedRequestsDataset").refresh();
}

    // Refresh the approved requests dataset and update all the elements that are connected to it.
    $w("#approvedRequestsDataset").refresh();
}
//-------------Date Helpers-------------//

// Get the time of the given date formatted as HH:MM am/pm.
function getTimeOfDay(date) {
    return date.toLocaleTimeString("en-GB", {hour: "2-digit", minute:"2-digit",  hour12: true});
}

// Get the date of the given date formatted as DD/MM/YYYY.
function getDate(date) {
    return  date.toLocaleDateString("en-GB", {day: "numeric", month: "numeric", year: "numeric" });
}

v/r
Kee

CODE-NINJA · September 24, 2021, 5:06am

Try to code this way… & also try to use more console-logs!
CONSOLE = your BEST-FRIEND !!!

Sorry → i did cut off some parts to simplify code…

// Import the wix-data module for working with collections.
import wixData from "wix-data";
import wixBookings from 'wix-bookings';
// Import the wix-location module for sending emails for dismissed appointments.
import wixLocation from "wix-location";


// ----------------- USER-INTERFACE----------------------
var requestRepeater = "#requestsRepeater"
var requestDataset = "#pendingRequestsDataset"
// ----------------- USER-INTERFACE----------------------

//-------------Page Setup-------------//
$w.onReady(function () {
 // When the pending requests dataset is ready:
  $w(requestDataset).onReady(() => {console.log("Dataset is READY!")
    $w(REPEATER).onItemReady(($item, itemData, index)=>{   
     // Populate the date field with the slot's start date.
      $item("#date").text = new Date();
      $item("#email").text = "Email-text here"
      // Set the dismiss button to dismiss the appointment request when clicked.
      
      $item("#dismissButton").onClick(async()=> {console.log("Dismiss-Button clicked!");
        $item("#dismissButton, #approveButton").disable();
        console.log("Item-Data: ", itemData); console.log("Index: ", index);
        itemData.status = "DISMISSED"; console.log("Status: ", itemData.status)
        wixData.update("Customers", itemData)
        .then((res)=>{console.log("RESULTS: ", res); refreshData();});
     });

     $item("#emailButton").onClick(()=> {console.log("Email-Button clicked!");
       const subject = "Thanks For Getting in Touch";
       wixLocation.to(`mailto:${itemData.email}?subject=${subject}`);
     });

    // Set the approve button to approve the appointment request when clicked.
     $item("#approveButton").onClick(async()=> {console.log("Approve-Button clicked!");
       console.log("Item-Data: ", itemData); console.log("Index: ", index);
       $item("#dismissButton, #approveButton").disable();
       itemData.status = "APPROVED"; console.log("Status: ", itemData.status)
       wixData.update("Customers", itemData)
       .then((res)=>{console.log("RESULTS: ", res); refreshData();});          
     });

        $item("#emailButton2").onClick(() => {console.log("Email-Button2 clicked!");
          const subject = "Thank you for Booking";
          wixLocation.to(`mailto:${itemData.email}?subject=${subject}`);
        });
      });

        if ($w(requestDataset).getTotalCount()===0) {
          $w("#noPendingRequests").show();
        }
        else {console.log("Do something else!")
          $w("#noPendingRequests").hide();
        }
    });
});


//-------------Page Update-------------//
function refreshData() {
    $w(requestDataset).refresh()
    $w("#dismissedRequestsDataset").refresh();
    $w("#approvedRequestsDataset").refresh();
}

khadedraturner · September 24, 2021, 10:24pm

Thank you so much! IT WORKED
…

Is there any way to make the pending request disappear after a button is clicked?

khadedraturner · September 24, 2021, 10:29pm

Thank you so much! IT WORKED

CODE-NINJA · September 24, 2021, 10:44pm

Now try to solve it by your own.

Which ELEMENT do you want to show or hide?
Which would be the states for show and hide for the related element(s)?
Do you need to use an if-else-statement?
At which part of code do you want to have your functionality (where to add additional code)?
What was your BEST-FRIEND one more time? —> use it

khadedraturner · September 24, 2021, 10:54pm

@russian-dima Alright this may take me a while… I am new to javascript, i will give it a shot! Thanks for the help and tips

CODE-NINJA · September 24, 2021, 10:59pm

@khadedraturner The best way of learning is??? RIGHT! → Learning by doing
So give it a try by your own. I am sure you will be able to solve it, even if you will have to read your code more than once

khadedraturner · September 24, 2021, 11:22pm

@russian-dima I figured it out! Thank you for believing in me

CODE-NINJA · September 24, 2021, 11:34pm

@khadedraturner I just new it ! And do not forget to like it, if you really liked it
BTW: It took you just a few minutes to find a solution → good result!

Topic		Replies	Views
Quick Book and Pending Appointments example not work Ask the community code , wix-stores , wix-bookings , question	2	100	July 25, 2022
Help with Velo example Quick Book and Pending Appointments (requestedSlot & Approve button) Ask the community code , wix-bookings , question	0	69	May 3, 2022
Quick book and pending requests Ask the community code , question	17	546	June 5, 2020
Issues with wixData.update( ... ) Ask the community code , wix-bookings , question	2	114	October 5, 2020
Need help with Velo example Quick Book and Pending Appointments Ask the community code , wix-bookings , question	10	194	May 4, 2022

Pending Appointments

Related topics