Manage albums

Let's start by adding manage to our View module:

View.fs

  60: 
  61: 
  62: 
  63: 
  64: 
  65: 
  66: 
  67: 
  68: 
  69: 
  70: 
  71: 
  72: 
  73: 
  74: 
  75: 
  76: 

let manage (albums : Db.AlbumDetails list) = [ 
    h2 "Index"
    table [
        yield tr [
            for t in ["Artist";"Title";"Genre";"Price"] -> th [ Text t ]
        ]

        for album in albums -> 
        tr [
            for t in [ truncate 25 album.Artist
                       truncate 25 album.Title
                       album.Genre
                       album.Price.ToString("0.##") ] ->
                td [ Text t ]
        ]
    ]
]

The view requires a few of new helper functions for table HTML markup:

View.fs

  10: 
  11: 
  12: 
  13: 

let table x = tag "table" [] x
let th x = tag "th" [] x
let tr x = tag "tr" [] x
let td x = tag "td" [] x

as well as a truncate function that will ensure our cell content doesn't span over a maximum number of characters:

View.fs

  55: 
  56: 
  57: 
  58: 

let truncate k (s : string) =
    if s.Length > k then
        s.Substring(0, k - 3) + "..."
    else s

Remarks:

• our HTML table consists of first row (tr) containing column headers (th) and a set of rows for each album with cells (td) to display specific values.
• we used the yield keyword for the first time. It is required here because we're using it in conjunction with the for album in albums -> list comprehension syntax inside the same list. The rule of thumb is that whenever you use the list comprehension syntax, then you need the yield keyword for any other item not contained in the comprehension syntax. This might seem hard to remember, but don't worry - the compiler is helpful here and will issue a warning if you forget the yield keyword.
• for the sake of saving a few keystrokes we used a nested list comprehension syntax to output ths and tds. Again, it's just a matter of taste, and could be also solved by enumerating each element separately

We are going to need to fetch the list of all AlbumDetails from the database. For this reason, let's create following query in Db module:

Db.fs

  45: 
  46: 
  47: 
  48: 

let getAlbumsDetails (ctx : DbContext) : AlbumDetails list = 
    ctx.Public.Albumdetails
    |> Seq.toList
    |> List.sortBy (fun a -> a.Artist)

We'll fetch all the albums, sorted by artist's name.

Now we're ready to define an actual handler to display the list of albums. Let's add a new sub-module to Path:

Path.fs

  16: 
  17: 

module Admin =
    let manage = "/admin/manage"

The Admin sub-module will contain all album management paths or routes if you will.

manage WebPart in App module can be implemented in following way:

App.fs

  37: 
  38: 
  39: 
  40: 
  41: 

let manage = warbler (fun _ ->
    Db.getContext()
    |> Db.getAlbumsDetails
    |> View.manage
    |> html)

and used in the main choose WebPart:

App.fs

  43: 
  44: 
  45: 
  46: 
  47: 
  48: 
  49: 
  50: 
  51: 
  52: 
  53: 
  54: 

let webPart = 
    choose [
        path Path.home >=> html View.home
        path Path.Store.overview >=> overview
        path Path.Store.browse >=> browse
        pathScan Path.Store.details details

        path Path.Admin.manage >=> manage

        pathRegex "(.*)\.(css|png|gif)" >=> Files.browseHome
        html View.notFound
    ]

Don't forget about the warbler for manage WebPart - we don't use any parameters for this WebPart, so we need to prevent it's eager evaluation.

If you navigate to the /admin/manage url in the application now, you should be presented the grid with every album in the store.

Show code from this section on GitHub