Skip to content

Latest commit

 

History

History
92 lines (48 loc) · 3.35 KB

sprint6.md

File metadata and controls

92 lines (48 loc) · 3.35 KB
Raw

Sprint 6

Overview

Now let's allow our users to update Songs. We're going to create a new modal to do this. That means, now might be a good time to take a look at the bootstrap modal documentation.

We'll create another modal in index.html. Each time someone clicks a button to edit songs we'll populate it with the current songs' information. This won't be too hard since we're just going to replace the modal body. (on the sample: #editSongsModalBody)

Here's a rough idea of what it could look like:

Edit Songs Modal

Make sure your modal's elements don't use the same ids as the other modal does. id in html must be unique!

Objectives:

  • allow songs to be edited
  • allow songs to be deleted
  • practice more with bootstrap modal's

Step 1: modalize

  1. Add a new modal to the page. You can build your own OR use the sample provided.

If you're using the sample, take a look at the unique ids created on the elements. We'll be using those later on.

  1. Add a new button 'Edit Songs' in the panel-footer of each album row.

  2. When 'Edit Songs' is clicked open the modal!

opening a modal with js

$('#fooModal').modal('show');

Step 2: form

  1. Develop a form for editing the song list. It should be able to (1) delete a song (2) edit each song. Your form will need to be put into an HTML string (write a function for this).

  2. Remember that in order to do a DELETE /api/albums/:album_id/songs/:id or a PUT /api/albums/:album_id/songs/:id you'll need those ids. Embed them in data- attributes in your form.

  3. You may want to use a GET /api/albums/:album_id/songs index route to get all songs for a particular album. This is likely easier than retrieving incomplete data from the page.

A sample HTML string for the form is provided for you.

Step 3

  1. Create the server-side routes for DELETE /api/albums/:album_id/songs/:id and PUT /api/albums/:album_id/songs/:id.

  2. Write client-side AJAX to delete items when the delete button is clicked.

  3. Make sure the deleted input is removed as well.

  4. Test delete for songs.

  5. Ensure that the song list on the page (the main album row that contains this song) is updated as well.

You may want to re-retrieve the songs rather than trying to parse the current album <li> content. It would be a good idea to make a function for this, it'll be useful in the next step.

Step 4 Update

Let's allow users to save their edits.

  1. After the user clicks a 'Save' button, make an AJAX PUT request for the edited song.

  2. Update the page with the changed song.

  3. Make sure you test everything.

  4. Make sure the modal closes when the close button is clicked.

Step 5

  1. Add functionality so that the user can create new songs and have them added to the list from within the modal.

Challenges

  1. Add a saving spinner or animation for each song when it is saving.

  2. Save each song when the user leaves the input box.

  3. Client-side validations: make sure trackNumbers are numbers & unique. In the form sort them by trackNumber.

  4. Consider using a Bootstrap theme.

  5. Consider using Font Awesome.

  6. Server-side validations: make sure track-numbers are unique per album.