This video is available to students only

The Lunch Week Details Component

The Lunch Week Details Component

The Lunch Week Details Component#

The next big feature we need to add is a Lunch Week Details adminstration component. This component allows admin users to view and edit the daily lunch details for a given week.

We already added a placeholder component called LunchMenuAdminDetails that we render when a user clicks on a Lunch Week row from the Lunch Week list table. We'll be working with that component now.

Here's what the final product will look like:

to-be-lunch-week-details

Initializing the Component#

To get going, we can start with a loading flag and the onMount lifecycle function. We'll fetch the lunchWeek object for the given lunchWeekId specified in the route and set it to a state variable called lunchWeek.

Then add the loading refresh icon logic to the markup using an {#if} block. For early testing purposes, we can stringify lunchWeek and show it in the DOM. This will give us a way to watch the state while we are testing:

If everything works, you should see something like this:

lunch-week-stringify

Nesting the Lunch Days List#

Currently our GET /lunch-week endpoint only returns the main lunchWeek object. Since our component needs to work with both the lunchWeek and the child lunchDay list, we can update the backend endpoint to nest the lunchDay list in the response payload.

To get a lunch day list for a given week, we can create a getLunchDayList helper function:

Change the backend GET /lunch-week endpoint in lunch-week.js to the following, using the new helper function to nest the lunch day list:

Now if we test the front end again, we should see a lunchDays list in the JSON response:

Seeding the Lunch Days List#

In this section, we are going to do some date parsing, formatting and manipulation. Install the package date-fns in the frontend project. This makes working with dates easier.

In the earlier screenshot of the week-details page, we saw five text areas - one for each school day of the given week. We will manage the creation and binding of these text areas by seeding and then iterating the lunchDays list.

We need to handle two different scenarios:

  1. A lunchDay entity does not exist for the given day that we want to seed

  2. A lunchDay entity already exists for the day we want to seed

Here's a seedLunchDay function that populates a list of five objects on the lunchDayList property, where they don't already exist for a given day:

Then call seedLunchDays in the onMount function:

Now the list in the returned JSON is populated with lunch days:

Adding Buttons and Text Areas to the Markup#

Now that our JSON is in good shape, we can add buttons and text areas to the markup. First add a couple of buttons so the user can save and publish or unpublish the Lunch Week:

 

This page is a preview of Fullstack Svelte

No discussions yet