This video is available to students only

Creating Data with the Front End

Creating Data with the Frontend

Creating Lunch Week Data#

In this lesson, we are going to create new lunchWeek entities using the backend POST /lunch-week endpoint. Here's the plan for enabling this feature in the front end:

  1. Add a New Lunch Week button to the LunchMenuAdmin component

  2. The button will open a Create Lunch Week modal that will contain a date input for the weekOf date

  3. Once the user confirms the Create Lunch Week modal, the front end will call the POST lunch week endpoint

  4. The endpoint will return a payload with the new lunchWeekId. We'll use that response payload to add a row to the lunch_week table.

Let's get started by adding some state variables and functions to the script section in LunchMenuAdmin.svelte.

We need a variable called showCreateModal and one called createWeekOfDate, and we will need openCreateModal and createLunchWeek functions:

Then in the markup, add the <button> to open the modal above the table:

 

This page is a preview of Fullstack Svelte

Start a new discussion. All notification go to the author.