Skip to content

Commit dea1766

Browse files
rshrirohitrshrirohit
authored
Merge pull request #2891 from TechnologyEnhancedLearning/Develop/fixes/TD-4920-Fix-optional-competency-frontend
TD-4920 Fix optional competency frontend
2 parents 7629b85 + fa0fe0d commit dea1766

File tree

3 files changed

+87
-107
lines changed

3 files changed

+87
-107
lines changed

‎DigitalLearningSolutions.Web/Scripts/learningPortal/selfAssessment.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as Checkboxes from '../checkboxes';
2-
31
function onSliderUpdate(inputElement: HTMLInputElement) {
42
const selectedRatio = parseInt(inputElement.value, 10) / parseInt(inputElement.max, 10);
53
// eslint-disable-next-line no-param-reassign
@@ -15,5 +13,3 @@ inputs.forEach((e) => onSliderUpdate(e));
1513
inputs.forEach((e) => {
1614
e.addEventListener('change', () => onSliderUpdate(e));
1715
});
18-
19-
Checkboxes.default.setUpSelectAndDeselectInGroupButtons();

‎DigitalLearningSolutions.Web/Styles/learningPortal/selfAssessment.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,6 @@ details.nhsuk-details {
5454
}
5555
}
5656

57-
.nhsuk-details__summary-text {
58-
text-decoration: none;
59-
}
60-
6157
.score {
6258
margin-left: 48px;
6359
color: $color_nhsuk-black;
@@ -247,3 +243,7 @@ details.nhsuk-details {
247243
.text-area-edit-90 {
248244
height: 90px
249245
}
246+
247+
.heading-checkboxes__label {
248+
padding: 4px 12px 4px;
249+
}

‎DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml‎

Lines changed: 83 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,7 @@
88
ViewData["SelfAssessmentTitle"] = @Model.SelfAssessment.Name;
99
var backLinkData = Html.GetRouteValues();
1010
}
11-
<style>
12-
.nhsuk-details__summary-text {
13-
padding: 10px;
14-
}
15-
</style>
11+
1612
@if (ViewBag.FromAddOptionalPage != null)
1713
{
1814
@section breadcrumbs {
@@ -62,66 +58,91 @@ else
6258
}
6359

6460
<link rel="stylesheet" href="@Url.Content("~/css/learningPortal/selfAssessment.css")" asp-append-version="true">
65-
<h1>Choose optional @Model.VocabPlural().ToLower()</h1>
61+
<h1>Optional @Model.VocabPlural().ToLower()</h1>
6662
@if (errorHasOccurred)
6763
{
6864
<vc:error-summary order-of-property-names="@(new[] { nameof(Model.IncludedSelfAssessmentStructureIds) })" />
6965
}
70-
<h2>
71-
<small>Which optional @Model.VocabPlural().ToLower() would you like to include in your self-assessment?</small>
72-
</h2>
73-
@if (Model.SelfAssessment.ManageOptionalCompetenciesPrompt != null)
74-
{
75-
<div class="nhsuk-warning-callout">
76-
<h3 class="nhsuk-warning-callout__label">
77-
<span role="text">
78-
<span class="nhsuk-u-visually-hidden">Important: </span>
79-
How to choose your optional @Model.VocabPlural().ToLower()
80-
</span>
81-
</h3>
82-
<div>@Html.Raw(Model.SelfAssessment.ManageOptionalCompetenciesPrompt)</div>
83-
</div>
84-
}
85-
<form method="post">
86-
<nhs-form-group nhs-validation-for="IncludedSelfAssessmentStructureIds">
87-
@foreach (var competencyGroup in Model.CompetencyGroups)
88-
{
89-
<fieldset class="nhsuk-fieldset nhsuk-u-margin-bottom-4">
66+
<div class="nhsuk-u-reading-width">
67+
@if (Model.SelfAssessment.ManageOptionalCompetenciesPrompt != null)
68+
{
69+
<div class="nhsuk-warning-callout">
70+
<h2 class="nhsuk-warning-callout__label">
71+
<span role="text">
72+
<span class="nhsuk-u-visually-hidden">Important: </span>
73+
How to choose your optional @Model.VocabPlural().ToLower()
74+
</span>
75+
</h2>
76+
<div>@Html.Raw(Model.SelfAssessment.ManageOptionalCompetenciesPrompt)</div>
77+
</div>
78+
}
79+
<form method="post">
80+
<nhs-form-group nhs-validation-for="IncludedSelfAssessmentStructureIds">
81+
<fieldset class="nhsuk-fieldset">
82+
<legend class="nhsuk-fieldset__legend">
83+
<h2>
84+
Select your optional @Model.VocabPlural().ToLower()
85+
</h2>
86+
</legend>
87+
9088

91-
@if (competencyGroup.Count() > 1)
89+
@foreach (var competencyGroup in Model.CompetencyGroups)
9290
{
93-
@if (competencyGroup.Any(x => x.GroupOptionalCompetencies))
91+
@if (competencyGroup.Count() > 1)
9492
{
95-
96-
<div class="nhsuk-checkboxes__item">
97-
<input data-group="@competencyGroup.Key" class="nhsuk-checkboxes__input select-all-checkbox" id="[email protected]" name="groupOptionalCompetenciesChecked" checked="@(competencyGroup.Any(x => x.IncludedInSelfAssessment == true) ? true : false)" type="checkbox" value="@competencyGroup.Key">
98-
<label class="nhsuk-label nhsuk-checkboxes__label nhsuk-u-font-size-16" for="[email protected]">
99-
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
100-
<span class="nhsuk-fieldset__heading">
93+
@if (competencyGroup.Any(x => x.GroupOptionalCompetencies))
94+
{
95+
<div class="nhsuk-checkboxes__item nhsuk-u-margin-bottom-6">
96+
<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">
97+
<label class="nhsuk-label nhsuk-checkboxes__label heading-checkboxes__label" for="[email protected]" aria-details="@competencyGroup.Key-details">
98+
<h3 class="nhsuk-u-margin-bottom-2">
10199
@competencyGroup.Key
102-
</span>
103-
</legend>
104-
</label>
105-
</div>
106-
<details class="nhsuk-details">
107-
<summary class="nhsuk-details__summary nhsuk-u-padding-0">
108-
<h3 class="nhsuk-details__summary-text nhsuk-u-margin-bottom-0">
109-
<span class="nhsuk-u-margin-bottom-0">
110-
<span class="nhsuk-details__summary-text" id="@competencyGroup.Key">
111-
What&rsquo;s included in the @competencyGroup.Key
112-
</span>
113-
</span>
100+
</h3>
101+
</label>
102+
<div class="nhsuk-checkboxes__description" id="@competencyGroup.Key-details">
103+
<details class="nhsuk-details">
104+
<summary class="nhsuk-details__summary">
105+
<span class="nhsuk-details__summary-text" role="button">
106+
What&rsquo;s included in the <span class="nhsuk-u-visually-hidden"> @competencyGroup.Key </span>group
107+
</span>
108+
</summary>
114109

115-
</h3>
116-
</summary>
110+
<div class="nhsuk-details__text">
111+
<ul>
117112

118-
<div class="nhsuk-details__text nhsuk-card">
119-
<dl class="nhsuk-summary-list">
113+
@foreach (var competency in competencyGroup)
114+
{
115+
<li>
116+
@foreach (var flag in competency.CompetencyFlags)
117+
{
118+
<span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
119+
<strong class="nhsuk-tag @flag.FlagTagClass">
120+
@flag.FlagName
121+
</strong>
122+
</span>
123+
}
124+
@competency.Name
125+
</li>
126+
}
127+
</ul>
128+
</div>
129+
</details>
130+
</div>
131+
</div>
120132

133+
}
134+
else
135+
{
136+
<div class="nhsuk-u-margin-bottom-6">
137+
<h3>
138+
@competencyGroup.Key
139+
</h3>
140+
<div class="nhsuk-checkboxes">
121141
@foreach (var competency in competencyGroup)
122-
{ <div class="nhsuk-summary-list__row">
123-
124-
<dd class="nhsuk-summary-list__value">
142+
{
143+
<div class="nhsuk-checkboxes__item">
144+
<input class="nhsuk-checkboxes__input" data-group="@competencyGroup.Key" id="[email protected]" name="IncludedSelfAssessmentStructureIds" checked="@(Model.IncludedSelfAssessmentStructureIds != null ? Model.IncludedSelfAssessmentStructureIds.Contains((int)competency.SelfAssessmentStructureId) : false)" type="checkbox" value="@competency.SelfAssessmentStructureId">
145+
<label class="nhsuk-label nhsuk-checkboxes__label" for="[email protected]">
125146
@foreach (var flag in competency.CompetencyFlags)
126147
{
127148
<span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
@@ -130,56 +151,23 @@ else
130151
</strong>
131152
</span>
132153
}
154+
133155
@competency.Name
134-
</dd>
156+
</label>
135157
</div>
158+
136159
}
137-
</dl>
160+
</div>
138161
</div>
139-
</details>
162+
}
140163
}
141-
else
142-
{
143-
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
144-
<span class="nhsuk-fieldset__heading">
145-
@competencyGroup.Key
146-
</span>
147-
</legend>
148-
<div class="nhsuk-grid-row nhsuk-u-margin-top-3 nhsuk-u-margin-bottom-1 js-only-block">
149-
<div class="nhsuk-grid-column-full">
150-
<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>
151-
<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>
152-
</div>
153-
</div>
154-
<div class="nhsuk-checkboxes">
155-
@foreach (var competency in competencyGroup)
156-
{
157-
<div class="nhsuk-checkboxes__item">
158-
<input class="nhsuk-checkboxes__input select-all-checkbox" data-group="@competencyGroup.Key" id="[email protected]" name="IncludedSelfAssessmentStructureIds" checked="@(Model.IncludedSelfAssessmentStructureIds != null ? Model.IncludedSelfAssessmentStructureIds.Contains((int)competency.SelfAssessmentStructureId) : false)" type="checkbox" value="@competency.SelfAssessmentStructureId">
159-
<label class="nhsuk-label nhsuk-checkboxes__label" for="[email protected]">
160-
@foreach (var flag in competency.CompetencyFlags)
161-
{
162-
<span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
163-
<strong class="nhsuk-tag @flag.FlagTagClass">
164-
@flag.FlagName
165-
</strong>
166-
</span>
167-
}
168164

169-
@competency.Name
170-
</label>
171-
</div>
172-
173-
}
174-
</div>
175-
}
176165
}
177166
</fieldset>
178-
}
179-
</nhs-form-group>
180-
<button class="nhsuk-button" type="submit">Submit</button>
181-
</form>
182-
167+
</nhs-form-group>
168+
<button class="nhsuk-button" type="submit">Submit</button>
169+
</form>
170+
</div>
183171
<div class="nhsuk-back-link">
184172
<a class="nhsuk-back-link__link"
185173
asp-action="SelfAssessmentOverview"
@@ -190,7 +178,3 @@ else
190178
Cancel
191179
</a>
192180
</div>
193-
194-
@section scripts {
195-
<script src="@Url.Content("~/js/learningPortal/selfAssessment.js")" asp-append-version="true"></script>
196-
}

0 commit comments

Comments
 (0)