Skip to content

TD-4920 Fix optional competency frontend #2891

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Parent: Merging release 1.0.0 to master with .Net 8 workflows
merged 3 commits into from
Oct 28, 2024
Merged

TD-4920 Fix optional competency frontend #2891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
39c6442
TD-4920 Removes the select all/deselect all checkboxes
kevwhitt-hee Oct 18, 2024
e952060
Fixes optional competencies page markup and styling
kevwhitt-hee Oct 21, 2024
fa0fe0d
Fixes accessibility issues with use of multiple fieldsets for single …
kevwhitt-hee Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions DigitalLearningSolutions.Web/Scripts/learningPortal/selfAssessment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import * as Checkboxes from '../checkboxes';

function onSliderUpdate(inputElement: HTMLInputElement) {
const selectedRatio = parseInt(inputElement.value, 10) / parseInt(inputElement.max, 10);
// eslint-disable-next-line no-param-reassign
Expand All @@ -15,5 +13,3 @@ inputs.forEach((e) => onSliderUpdate(e));
inputs.forEach((e) => {
e.addEventListener('change', () => onSliderUpdate(e));
});

Checkboxes.default.setUpSelectAndDeselectInGroupButtons();
8 changes: 4 additions & 4 deletions DigitalLearningSolutions.Web/Styles/learningPortal/selfAssessment.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,6 @@ details.nhsuk-details {
}
}

.nhsuk-details__summary-text {
text-decoration: none;
}

.score {
margin-left: 48px;
color: $color_nhsuk-black;
Expand Down Expand Up @@ -247,3 +243,7 @@ details.nhsuk-details {
.text-area-edit-90 {
height: 90px
}

.heading-checkboxes__label {
padding: 4px 12px 4px;
}
182 changes: 83 additions & 99 deletions ...rningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,7 @@
ViewData["SelfAssessmentTitle"] = @Model.SelfAssessment.Name;
var backLinkData = Html.GetRouteValues();
}
<style>
.nhsuk-details__summary-text {
padding: 10px;
}
</style>

@if (ViewBag.FromAddOptionalPage != null)
{
@section breadcrumbs {
Expand Down Expand Up @@ -62,66 +58,91 @@ else
}

<link rel="stylesheet" href="@Url.Content("~/css/learningPortal/selfAssessment.css")" asp-append-version="true">
<h1>Choose optional @Model.VocabPlural().ToLower()</h1>
<h1>Optional @Model.VocabPlural().ToLower()</h1>
@if (errorHasOccurred)
{
<vc:error-summary order-of-property-names="@(new[] { nameof(Model.IncludedSelfAssessmentStructureIds) })" />
}
<h2>
<small>Which optional @Model.VocabPlural().ToLower() would you like to include in your self-assessment?</small>
</h2>
@if (Model.SelfAssessment.ManageOptionalCompetenciesPrompt != null)
{
<div class="nhsuk-warning-callout">
<h3 class="nhsuk-warning-callout__label">
<span role="text">
<span class="nhsuk-u-visually-hidden">Important: </span>
How to choose your optional @Model.VocabPlural().ToLower()
</span>
</h3>
<div>@Html.Raw(Model.SelfAssessment.ManageOptionalCompetenciesPrompt)</div>
</div>
}
<form method="post">
<nhs-form-group nhs-validation-for="IncludedSelfAssessmentStructureIds">
@foreach (var competencyGroup in Model.CompetencyGroups)
{
<fieldset class="nhsuk-fieldset nhsuk-u-margin-bottom-4">
<div class="nhsuk-u-reading-width">
@if (Model.SelfAssessment.ManageOptionalCompetenciesPrompt != null)
{
<div class="nhsuk-warning-callout">
<h2 class="nhsuk-warning-callout__label">
<span role="text">
<span class="nhsuk-u-visually-hidden">Important: </span>
How to choose your optional @Model.VocabPlural().ToLower()
</span>
</h2>
<div>@Html.Raw(Model.SelfAssessment.ManageOptionalCompetenciesPrompt)</div>
</div>
}
<form method="post">
<nhs-form-group nhs-validation-for="IncludedSelfAssessmentStructureIds">
<fieldset class="nhsuk-fieldset">
<legend class="nhsuk-fieldset__legend">
<h2>
Select your optional @Model.VocabPlural().ToLower()
</h2>
</legend>


@if (competencyGroup.Count() > 1)
@foreach (var competencyGroup in Model.CompetencyGroups)
{
@if (competencyGroup.Any(x => x.GroupOptionalCompetencies))
@if (competencyGroup.Count() > 1)
{

<div class="nhsuk-checkboxes__item">
<input data-group="@competencyGroup.Key" class="nhsuk-checkboxes__input select-all-checkbox" id="result-check-@competencyGroup.Key" name="groupOptionalCompetenciesChecked" checked="@(competencyGroup.Any(x => x.IncludedInSelfAssessment == true) ? true : false)" type="checkbox" value="@competencyGroup.Key">
<label class="nhsuk-label nhsuk-checkboxes__label nhsuk-u-font-size-16" for="result-check-@competencyGroup.Key">
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
<span class="nhsuk-fieldset__heading">
@if (competencyGroup.Any(x => x.GroupOptionalCompetencies))
{
<div class="nhsuk-checkboxes__item nhsuk-u-margin-bottom-6">
<input data-group="@competencyGroup.Key" class="nhsuk-checkboxes__input" id="result-check-@competencyGroup.Key" name="groupOptionalCompetenciesChecked" checked="@(competencyGroup.Any(x => x.IncludedInSelfAssessment == true) ? true : false)" type="checkbox" value="@competencyGroup.Key">
<label class="nhsuk-label nhsuk-checkboxes__label heading-checkboxes__label" for="result-check-@competencyGroup.Key" aria-details="@competencyGroup.Key-details">
<h3 class="nhsuk-u-margin-bottom-2">
@competencyGroup.Key
</span>
</legend>
</label>
</div>
<details class="nhsuk-details">
<summary class="nhsuk-details__summary nhsuk-u-padding-0">
<h3 class="nhsuk-details__summary-text nhsuk-u-margin-bottom-0">
<span class="nhsuk-u-margin-bottom-0">
<span class="nhsuk-details__summary-text" id="@competencyGroup.Key">
What&rsquo;s included in the @competencyGroup.Key
</span>
</span>
</h3>
</label>
<div class="nhsuk-checkboxes__description" id="@competencyGroup.Key-details">
<details class="nhsuk-details">
<summary class="nhsuk-details__summary">
<span class="nhsuk-details__summary-text" role="button">
What&rsquo;s included in the <span class="nhsuk-u-visually-hidden"> @competencyGroup.Key </span>group
</span>
</summary>

</h3>
</summary>
<div class="nhsuk-details__text">
<ul>

<div class="nhsuk-details__text nhsuk-card">
<dl class="nhsuk-summary-list">
@foreach (var competency in competencyGroup)
{
<li>
@foreach (var flag in competency.CompetencyFlags)
{
<span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
<strong class="nhsuk-tag @flag.FlagTagClass">
@flag.FlagName
</strong>
</span>
}
@competency.Name
</li>
}
</ul>
</div>
</details>
</div>
</div>

}
else
{
<div class="nhsuk-u-margin-bottom-6">
<h3>
@competencyGroup.Key
</h3>
<div class="nhsuk-checkboxes">
@foreach (var competency in competencyGroup)
{ <div class="nhsuk-summary-list__row">

<dd class="nhsuk-summary-list__value">
{
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" data-group="@competencyGroup.Key" id="competency-check-@competency.SelfAssessmentStructureId" name="IncludedSelfAssessmentStructureIds" checked="@(Model.IncludedSelfAssessmentStructureIds != null ? Model.IncludedSelfAssessmentStructureIds.Contains((int)competency.SelfAssessmentStructureId) : false)" type="checkbox" value="@competency.SelfAssessmentStructureId">
<label class="nhsuk-label nhsuk-checkboxes__label" for="competency-check-@competency.SelfAssessmentStructureId">
@foreach (var flag in competency.CompetencyFlags)
{
<span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
Expand All @@ -130,56 +151,23 @@ else
</strong>
</span>
}

@competency.Name
</dd>
</label>
</div>

}
</dl>
</div>
</div>
</details>
}
}
else
{
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
<span class="nhsuk-fieldset__heading">
@competencyGroup.Key
</span>
</legend>
<div class="nhsuk-grid-row nhsuk-u-margin-top-3 nhsuk-u-margin-bottom-1 js-only-block">
<div class="nhsuk-grid-column-full">
<a class="nhsuk-button select-all-button select-all status-tag nhsuk-u-margin-bottom-1" role="button" data-group="@competencyGroup.Key" name="selectAll" value="true">Select all @Model.VocabPlural().ToLower()</a>
<a class="nhsuk-button select-all-button deselect-all status-tag nhsuk-u-margin-bottom-1" role="button" data-group="@competencyGroup.Key" id="" name="selectAll" value="false">Deselect all @Model.VocabPlural().ToLower()</a>
</div>
</div>
<div class="nhsuk-checkboxes">
@foreach (var competency in competencyGroup)
{
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input select-all-checkbox" data-group="@competencyGroup.Key" id="competency-check-@competency.SelfAssessmentStructureId" name="IncludedSelfAssessmentStructureIds" checked="@(Model.IncludedSelfAssessmentStructureIds != null ? Model.IncludedSelfAssessmentStructureIds.Contains((int)competency.SelfAssessmentStructureId) : false)" type="checkbox" value="@competency.SelfAssessmentStructureId">
<label class="nhsuk-label nhsuk-checkboxes__label" for="competency-check-@competency.SelfAssessmentStructureId">
@foreach (var flag in competency.CompetencyFlags)
{
<span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
<strong class="nhsuk-tag @flag.FlagTagClass">
@flag.FlagName
</strong>
</span>
}

@competency.Name
</label>
</div>

}
</div>
}
}
</fieldset>
}
</nhs-form-group>
<button class="nhsuk-button" type="submit">Submit</button>
</form>

</nhs-form-group>
<button class="nhsuk-button" type="submit">Submit</button>
</form>
</div>
<div class="nhsuk-back-link">
<a class="nhsuk-back-link__link"
asp-action="SelfAssessmentOverview"
Expand All @@ -190,7 +178,3 @@ else
Cancel
</a>
</div>

@section scripts {
<script src="@Url.Content("~/js/learningPortal/selfAssessment.js")" asp-append-version="true"></script>
}
Loading