Skip to content

Commit 738be63

Browse files
swapnamol-abrahamswapnamol-abraham
committed
TD-5764: Bookmarks subpage - implementation
1 parent 26100fe commit 738be63

File tree

2 files changed

+114
-87
lines changed

2 files changed

+114
-87
lines changed

‎LearningHub.Nhs.WebUI/Models/SideMenu/SideNavigationConfiguration.cs‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -58,33 +58,33 @@ public static IEnumerable<SideNavigationGroup> GetGroupedMenus()
5858
GroupTitle = "Activity",
5959
Items = new List<SideNavigationItem>
6060
{
61-
new SideNavigationItem
61+
new SideNavigationItem
6262
{
6363
Text = "Recent learning",
6464
Controller = "MyLearning",
6565
Action = "Index",
66-
IsActive = route => MatchRoute(route, "Activity", "Recent"),
66+
IsActive = route => MatchRoute(route, "MyLearning", "Index"),
6767
},
68-
new SideNavigationItem
68+
new SideNavigationItem
6969
{
7070
Text = "Bookmarks",
71-
Controller = "MyLearning",
72-
Action = "Bookmark",
73-
IsActive = route => MatchRoute(route, "Activity", "Bookmark"),
71+
Controller = "Bookmark",
72+
Action = "Index",
73+
IsActive = route => MatchRoute(route, "Bookmark", "Index"),
7474
},
75-
new SideNavigationItem
75+
new SideNavigationItem
7676
{
7777
Text = "Certificates",
7878
Controller = "MyLearning",
7979
Action = "Certificates",
8080
IsActive = route => MatchRoute(route, "Activity", "Certificates"),
8181
},
82-
new SideNavigationItem
82+
new SideNavigationItem
8383
{
8484
Text = "Learning history",
8585
Controller = "MyLearning",
8686
Action = "LearningHistory",
87-
IsActive = route => MatchRoute(route, "Activity", "LearningHistory"),
87+
IsActive = route => MatchRoute(route, "MyLearning", "LearningHistory"),
8888
},
8989
},
9090
},

‎LearningHub.Nhs.WebUI/Views/Bookmark/Index.cshtml‎

Lines changed: 105 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@using LearningHub.Nhs.WebUI.Models.Bookmark
33
@model List<LearningHub.Nhs.Models.Bookmark.UserBookmarkViewModel>
44

5-
@section styles{
5+
@section styles {
66
<link rel="stylesheet" type="text/css" href="~/css/nhsuk/pages/bookmark.css" asp-append-version="true" />
77
}
88

@@ -25,102 +25,129 @@
2525
};
2626
}
2727
}
28+
@section NavBreadcrumbs {
2829

29-
<div class="bg-white">
30-
<div class="nhsuk-width-container app-width-container nhsuk-u-padding-bottom-9">
31-
<vc:back-link asp-controller="Home" asp-action="Index" link-text="Back to: Learning Hub" />
32-
33-
<h1>@ViewData["Title"]</h1>
34-
35-
<div class="nhsuk-grid-row">
36-
<div class="nhsuk-grid-column-full">
37-
<p class="nhsuk-body-l nhsuk-u-reading-width">Save and organise your learning resources as bookmarks.</p>
38-
39-
<p class="nhsuk-u-reading-width">Bookmarks can be displayed individually or you can create folders to organise your learning resources.</p>
40-
41-
<details class="nhsuk-details nhsuk-u-margin-bottom-6">
42-
<summary class="nhsuk-details__summary">
43-
<span class="nhsuk-details__summary-text">
44-
Learn how to manage your bookmarks
45-
</span>
46-
</summary>
47-
<div class="nhsuk-details__text nhsuk-u-reading-width">
48-
<p>You can add as many learning resources as required to your bookmark manager, and have the option to rename, move or delete each one.</p>
49-
<p>To move a bookmark into a folder, select the learning resource and select ‘Move’.</p>
30+
<section class="nhsuk-hero">
31+
<div class="nhsuk-width-container app-width-container">
32+
<div class="nhsuk-grid-row">
33+
<div class="nhsuk-grid-column-full">
34+
35+
<div class="nhsuk-u-padding-top-3 nhsuk-u-padding-bottom-3">
36+
<a href="/">Home</a>
37+
<i class="fa-solid fa-chevron-right nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-1 nhsuk-u-padding-left-2 nhsuk-u-padding-right-2"></i>
5038
</div>
51-
</details>
39+
<div class="nhsuk-u-padding-top-4 nhsuk-u-padding-bottom-7">
40+
<h1 class="nhsuk-heading-xl">My learning activity</h1>
41+
</div>
42+
</div>
5243
</div>
5344
</div>
45+
</section>
46+
}
5447

55-
<span id="bookmark-table"></span>
56-
<a class="nhsuk-button" asp-controller="Bookmark" asp-action="BookmarkAddFolder" asp-route-returnUrl="/bookmark">Add a folder</a>
5748

58-
<div class="nhsuk-expander-group">
49+
<div class="bg-white">
50+
<div class="nhsuk-width-container app-width-container">
51+
<div class="nhsuk-grid-row nhsuk-u-padding-top-7 nhsuk-u-padding-bottom-9">
5952

60-
<table role="table" class="nhsuk-table-responsive tree-table-parent">
61-
<thead role="rowgroup" class="nhsuk-table__head">
62-
<tr role="row">
63-
<th role="columnheader" class="" scope="col">Learning resource</th>
64-
<th role="columnheader" class="col-type" scope="col">Type</th>
65-
<th role="columnheader" class="col-organise" scope="col">Organise your bookmarks</th>
66-
</tr>
67-
</thead>
68-
<tbody role="rowgroup" class="nhsuk-table__body">
53+
<!-- Left column: SideNav -->
54+
<div class="nhsuk-grid-column-one-quarter">
55+
@await Component.InvokeAsync("SideNav", new { groupTitle = "Activity" })
56+
</div>
57+
<div class="nhsuk-grid-column-three-quarters">
58+
<div>
59+
<h2 class="nhsuk-heading-l">Bookmarks</h2>
60+
</div>
6961

70-
@{
71-
var topLevelBookmarks = Model.Where(m => m.ParentId == null).ToList();
62+
<div>
63+
<p class="nhsuk-body-l nhsuk-u-reading-width">Save and organise your learning resources as bookmarks.</p>
64+
65+
<details class="nhsuk-details nhsuk-u-margin-bottom-6">
66+
<summary class="nhsuk-details__summary">
67+
<span class="nhsuk-details__summary-text">
68+
Learn how to manage your bookmarks
69+
</span>
70+
</summary>
71+
<div class="nhsuk-details__text nhsuk-u-reading-width">
72+
<p>You can add as many learning resources as required to your bookmark manager, and have the option to rename, move or delete each one.</p>
73+
<p>To move a bookmark into a folder, select the learning resource and select ‘Move’.</p>
74+
</div>
75+
</details>
76+
</div>
77+
<div>
7278

73-
if (!topLevelBookmarks.Any())
74-
{
75-
<tr role="row" class="nhsuk-table__row bookmark-item">
76-
<td role="cell" class="nhsuk-table__cell" colspan="3">
77-
Your bookmarks will appear here.
78-
</td>
79+
<span id="bookmark-table"></span>
80+
<a class="nhsuk-button" asp-controller="Bookmark" asp-action="BookmarkAddFolder" asp-route-returnUrl="/bookmark">Add a folder</a>
81+
</div>
82+
83+
<div class="nhsuk-expander-group">
84+
85+
<table role="table" class="nhsuk-table-responsive tree-table-parent">
86+
<thead role="rowgroup" class="nhsuk-table__head">
87+
<tr role="row">
88+
<th role="columnheader" class="" scope="col">Learning resource</th>
89+
<th role="columnheader" class="col-type" scope="col">Type</th>
90+
<th role="columnheader" class="col-organise" scope="col">Organise your bookmarks</th>
7991
</tr>
80-
}
81-
else
82-
{
83-
for (var i = 0; i < topLevelBookmarks.Count; i++)
84-
{
85-
var bookmark = topLevelBookmarks[i];
86-
var bookmarkAction = GetBookmarkAction(bookmark, i, topLevelBookmarks.Count);
92+
</thead>
93+
<tbody role="rowgroup" class="nhsuk-table__body">
8794

88-
@if (bookmark.BookmarkTypeId == 1) // Folder.
89-
{
90-
var childBookmarks = Model.Where(m => m.ParentId == bookmark.Id).ToList();
91-
var bookmarkFolderViewModel = new BookmarkFolderViewModel()
92-
{
93-
FolderBookmark = new BookmarkItemViewModel { Bookmark = bookmark, Action = bookmarkAction },
94-
ChildBookmarkItems = childBookmarks.Select((item, j) => new BookmarkItemViewModel
95-
{
96-
Bookmark = item,
97-
Action = GetBookmarkAction(item, j, childBookmarks.Count),
98-
IsChild = true,
99-
}).ToList()
100-
};
95+
@{
96+
var topLevelBookmarks = Model.Where(m => m.ParentId == null).ToList();
10197

102-
<partial name="_BookmarkFolder" model="bookmarkFolderViewModel" />
98+
if (!topLevelBookmarks.Any())
99+
{
100+
<tr role="row" class="nhsuk-table__row bookmark-item">
101+
<td role="cell" class="nhsuk-table__cell" colspan="3">
102+
Your bookmarks will appear here.
103+
</td>
104+
</tr>
103105
}
104106
else
105107
{
106-
<partial name="_BookmarkItem" model="new BookmarkItemViewModel{ Bookmark = bookmark, Action = bookmarkAction}" />
108+
for (var i = 0; i < topLevelBookmarks.Count; i++)
109+
{
110+
var bookmark = topLevelBookmarks[i];
111+
var bookmarkAction = GetBookmarkAction(bookmark, i, topLevelBookmarks.Count);
112+
113+
@if (bookmark.BookmarkTypeId == 1) // Folder.
114+
{
115+
var childBookmarks = Model.Where(m => m.ParentId == bookmark.Id).ToList();
116+
var bookmarkFolderViewModel = new BookmarkFolderViewModel()
117+
{
118+
FolderBookmark = new BookmarkItemViewModel { Bookmark = bookmark, Action = bookmarkAction },
119+
ChildBookmarkItems = childBookmarks.Select((item, j) => new BookmarkItemViewModel
120+
{
121+
Bookmark = item,
122+
Action = GetBookmarkAction(item, j, childBookmarks.Count),
123+
IsChild = true,
124+
}).ToList()
125+
};
126+
127+
<partial name="_BookmarkFolder" model="bookmarkFolderViewModel" />
128+
}
129+
else
130+
{
131+
<partial name="_BookmarkItem" model="new BookmarkItemViewModel{ Bookmark = bookmark, Action = bookmarkAction}" />
132+
}
133+
}
107134
}
108135
}
109-
}
110-
}
111136

112-
</tbody>
113-
</table>
114-
</div>
115-
116-
<div class="nhsuk-grid-row">
117-
<div class="nhsuk-grid-column-two-thirds">
118-
<div class="help-panel nhsuk-u-padding-5">
119-
<h3>Get help</h3>
120-
<p>
121-
Find further guidance and support on how to manage bookmarks at the <a href="@ViewBag.BookmarksHelpUrl" target="_blank">Learning Hub help centre</a>.
122-
</p>
137+
</tbody>
138+
</table>
123139
</div>
140+
141+
@* <div class="nhsuk-grid-row">
142+
<div class="nhsuk-grid-column-two-thirds">
143+
<div class="help-panel nhsuk-u-padding-5">
144+
<h3>Get help</h3>
145+
<p>
146+
Find further guidance and support on how to manage bookmarks at the <a href="@ViewBag.BookmarksHelpUrl" target="_blank">Learning Hub help centre</a>.
147+
</p>
148+
</div>
149+
</div>
150+
</div> *@
124151
</div>
125152
</div>
126153
</div>

0 commit comments

Comments
 (0)