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:

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:
// use pg types to override the default date handling
var types = require('pg').types
types.setTypeParser(1082, (val) => val)
module.exports = {
development: {
client: 'postgresql',
Now after refreshing, the data should look like this:

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.
import { refresh, times } from 'svelte-awesome/icons'
Then down in the markup section, we can add a blank <th>
tag
and add a <td>
for the <Icon data="{times}" />
:
<thead>
<tr>
<th>Week Of</th>
<th>Published</th>
<!--add a placeholder th -->
<th></th>
</tr>
</thead>
{#each lunchWeekList as lunchWeek}
<tr class="has-text-link" style="cursor: pointer" on:click="{openLunchWeekDetails(lunchWeek)}">
<td>{lunchWeek.weekOf}</td>
<td>{lunchWeek.isPublished}</td>
<!--add the icon td -->
<td>
<Icon data="{times}" />
</td>
</tr>
{/each}
At this point, the X button should look like this:

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.
This page is a preview of Fullstack Svelte