Create TaskList View, ViewComponent and Model

[akdalin-hee]

Description

Create TaskList View, ViewComponent and Model

Screenshots

Paste screenshots for all views created or changed: mobile, tablet and desktop, wave analyser showing no errors.

---

Developer checks

(Leave tasks unticked if they haven't been appropriate for your ticket.)

I have:

• Run the IDE auto formatter on all files I’ve worked on and made sure there are no IDE errors relating to them
• Written or updated tests for the changes and made sure all tests are passing
• Manually tested my work with and without JavaScript (adding notes where functionality requires JavaScript)
• Tested with Wave Chrome plugin. Addressed any valid accessibility issues and documented any invalid errors
• Scanned over my pull request in GitHub and addressed any warnings from the GitHub Build and Test checks in the GitHub PR ‘Files Changed’ tab
  Either:
• Documented my work in Confluence, updating any business rules applied or modified. Updated GitHub readme/documentation for the repository if appropriate. List of documentation links added/changed:
  • doc_1_here
    Or:
• Confirmed that none of the work that I have undertaken requires any updates to documentation
• CHANGELOG entry

[kevwhitt-hee]

See comments in code for suggestions and questions.

[kevwhitt-hee]

We need a cannot start yet state too:

This is rendered in a div of class="nhsuk-task-list__status nhsuk-task-list__status--cannot-start-yet"

[kevwhitt-hee]

I see in the Razor partial that this is covered by "UNSTARTED". It still might be worth checking with Allan that we don't need more flexibility in terms of the styling of tags inside the div.

[kevwhitt-hee]

I would suggest simplifying the Razor markup by setting up some variables:

var hasLink = task.StateStyle != TaskStateStyle.UNSTARTED;
    var statusClass = task.StateStyle switch
    {
        TaskStateStyle.COMPLETED => "nhsuk-task-list__status nhsuk-task-list__status--completed",
        TaskStateStyle.INCOMPLETE => "nhsuk-task-list__status",
        TaskStateStyle.UNSTARTED => "nhsuk-task-list__status nhsuk-task-list__status--cannot-start-yet",
        _ => "nhsuk-task-list__status"
    };

[kevwhitt-hee]

We should probably use a different id - and a variable to name it:

var statusId = task.StateStyle == TaskStateStyle.UNSTARTED
        ? $"task-list-{task.Id}-status"
        : task.Id;

[kevwhitt-hee]

If we parameterise some of the properties we can simplify this (to avoid repetition) markup to something like:

@foreach (var task in Model.ListItems)
{   
    <li class="nhsuk-task-list__item @(hasLink ? "nhsuk-task-list__item--with-link" : "")">
        <div class="nhsuk-task-list__name-and-hint">
            @if (hasLink)
            {
                <a class="nhsuk-link nhsuk-task-list__link" href="@task.Url" aria-describedby="@statusId">
                    @task.Name
                </a>
            }
            else
            {
                <div>@task.Name</div>
            }
            @if (!String.IsNullOrWhiteSpace(task.HintText))
            {
                <div id="your-health-3-hint" class="nhsuk-task-list__hint">@task.HintText</div>
            }
        </div>
        <div class="@statusClass" id="@statusId">
            @if (task.StateStyle == TaskStateStyle.INCOMPLETE)
            {
                <strong class="nhsuk-tag nhsuk-tag--blue">@task.State</strong>
            }
            else
            {
                @task.State
            }
        </div>
    </li>
}