Hey All,
I have a question about how to best accomplish something using Livewire. I am creating a site that allows managers of a restaurant to set the different times during the day when certain items are available. I would like to give them as much control as possible. The simplest scenario is pretty straight forward - just having the manager select a start and end time, which I can capture using two public variables
public $startPickup;
public $endPickup;
Where I get stuck is if I want to provide more specific control. Pickups are available every 15 minutes. Ideally, I would like the manager to be able to select the available pickup options with checkboxes. For example, checking the boxes for 8AM through 12PM but then skipping from 12:15PM to 1:30PM and then checking 1:45PM through 3:30PM. I feel that having 96 public variables declared in mount() makes no sense. Also, the time between pickup windows can change by location so it could be more or less than 96, so hardcoding it in isn't an option.
I could allow the manager to add time slots in addition to the first $startPickup and $endPickup like I describe above, but I run into the same problem, which is that I don't know how many there will be when the page is initially rendered.
Are there any best practices out there for dealing with an unknown number of variables on a page?
I hope what I have described makes sense. If anything isn't clear please let me know and I will provide more detail/information.
Thanks
Hello @mst526 If the window/break for the pickups is only once per day you could give the user the abilty to mark that period. The other value you sholud know is the pickup time (15 min by default) and give your user the ability to choose that aswell. In this way you have all the information you need to calculate the number of pickups per day for example. (if thats what you are looking for)
This would work for the simple use case, but what about the scenario where there is a gap? Wouldn't I have to know the number of gaps beforehand to know how many public variables to wire? There could be one, two or five gaps in the available time slots.
For example, the manager wants to make an item available from 8AM to 10AM but then skip 10:15, 10:30, and 11:45 and make it available from 11:00AM to 12:00PM. I could create a new set of input elements when the user clicks a button to add them (to set the 11:00AM to 12:00PM times), but how would I wire them to a variable? Can I create a new public variable after the Livewire component has already been mounted?
Use an array. You can compute the array members based on a separate variable which specifies the slot length, e.g.
public $slotLength = 15;
public function render()
{
$periods = new Carbon\CarbonPeriod(today(), 'PT' . $this->slotLength . 'M', today()->addDay());
return view(..., [
'slots' => collect($periods)->mapWithKeys(fn ($time) => [$time->format('H:i') => false])->all()
]);
}
You could move this logic into a watcher if that makes sense in the context of your app.
This was exactly what I needed. Thank you!
In general, if you're looking for Livewire best practices, I recommend https://github.com/michael-rubel/livewire-best-practices, where the author himself Livewire (@calebporzio) observes ie. gave a star
Please or to participate in this conversation.