This video is available to students only

Deleting Data with the Front End

Deleting Data with the Frontend

Back to the Frontend#

This module is supposed to be about the Svelte, so let's start up the front end and make sure everything works after our backend changes from the last module.

As a reminder, the normal local dev environment set-up is the following:

  • $ npm run nodemon from the backend directory

  • $ npm run dev from the frontend directory in a separate terminal window

In my environment, I did a good bit of testing with the POST /lunch-week endpoint, so my front end looks like this:

frontend-timestamps

The first thing I noticed is that the weekOf data looks a little funny. The back end is returning the weekOf date property as a full timestamp. This is due to the way the Postgres driver for Node.js creates JavaScript Date objects.

We can address this issue by overriding the default date type (1082) handling in knexfile.js. Add the following lines to the top of the file:

Now after refreshing, the data should look like this:

frontend-timestamps-fix

The second thing I noticed is that there are a bunch of test rows in the database. We might as well take the opportunity to add a Delete button and call the DELETE /lunch-week endpoint from Svelte.

Delete Lunch Week Function#

We need a way for users to be able to delete lunchWeek rows from the lunch_week table. Here's the plan:

  • add an X button to each table row

  • add a click handler to the X button that will open a confirmation modal

  • if confirmed, call the lunchWeek delete endpoint

To get started, open the LunchMenuAdmin.svelte file and update the svelte-awesome import to include the times (X) icon.

Then down in the markup section, we can add a blank <th> tag and add a <td> for the <Icon data="{times}" />:

At this point, the X button should look like this:

x-button-first

There are a couple of problems with this first implementation. We have our openLunchWeekDetails handler on the whole row, e.g., the <tr> tag. This means that we can't click on the X button by itself. The button also sits a little higher than the other text on the table row.

We can fix these issues with a little styling and by moving the click handler down to the <td>{lunchWeek.weekOf}</td>.

Now we'll have two clickable elements in the table, so we can add a CSS class to handle the cursor: pointer; part.

Put the <style> block between the <script> block and the markup:

Here's the markup with the changes:

We want the X button to delete the given row, so let's add an on:click handler to the <td> wrapping the X button:

Next, we need to implement the deleteLunchWeek function that the handler uses. In this function, we'll start with toggling the loading spinner and then using Axios to call the delete endpoint.

If that call is successful, we'll remove the given lunchWeek entity from the lunchWeekList using splice and Svelte will reactively update the table. Update the LunchMenuAdmin.svelte file:

 

This page is a preview of Fullstack Svelte

Please select a discussion on the left.