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.