Skip to content

Commit 9eebfc2

Browse files
vanessatran-ddivanessatran-ddi
committed
feat(#2885): add work side menu item popover notification
1 parent 762d405 commit 9eebfc2

39 files changed

Lines changed: 3345 additions & 208 deletions

‎apps/prs/angular/project.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,12 @@
1717
"tsConfig": "apps/prs/angular/tsconfig.app.json",
1818
"assets": [
1919
"apps/prs/angular/src/favicon.ico",
20-
"apps/prs/angular/src/assets"
20+
"apps/prs/angular/src/assets",
21+
{
22+
"glob": "tokens.css",
23+
"input": "node_modules/@abgov/design-tokens-v2/dist",
24+
"output": "/v2-tokens"
25+
}
2126
],
2227
"styles": ["apps/prs/angular/src/styles.css"],
2328
"scripts": []

‎apps/prs/angular/src/app/app.component.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div style="min-height: 100vh; display: flex; flex-direction: column">
1+
<div *ngIf="!isFullPage" style="min-height: 100vh; display: flex; flex-direction: column">
22
<section slot="header" class="width" role="header" style="flex: 0 0 auto">
33
<goab-microsite-header type="alpha" version="UAT" />
44
<goab-app-header>
@@ -73,6 +73,8 @@
7373
<a href="/features/2722">2722</a>
7474
<a href="/features/2730">2730</a>
7575
<a href="/features/2829">2829</a>
76+
<a href="/features/2885">2885 WorkSpace Notification</a>
77+
<a href="/features/2885-navigation-tabs">2885 Navigation Tabs</a>
7678
<a href="/features/3102">3102</a>
7779
<a href="/features/3306">3306</a>
7880
<a href="/features/1908">1908</a>
@@ -92,3 +94,5 @@
9294
<goab-app-footer maxContentWidth="100%" />
9395
</section>
9496
</div>
97+
98+
<router-outlet *ngIf="isFullPage"></router-outlet>

‎apps/prs/angular/src/app/app.component.ts‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
11
import { Component } from "@angular/core";
2+
import { Router, NavigationEnd } from "@angular/router";
3+
import { filter } from "rxjs/operators";
24

35
@Component({
46
selector: "abgov-root",
57
templateUrl: "./app.component.html",
68
styles: ``,
79
standalone: false,
810
})
9-
export class AppComponent {}
11+
export class AppComponent {
12+
isFullPage = false;
13+
14+
private fullPageRoutes = ["/features/2885"];
15+
16+
constructor(private router: Router) {
17+
this.router.events
18+
.pipe(filter((event) => event instanceof NavigationEnd))
19+
.subscribe((event) => {
20+
this.isFullPage = this.fullPageRoutes.includes(
21+
(event as NavigationEnd).urlAfterRedirects,
22+
);
23+
});
24+
}
25+
}

‎apps/prs/angular/src/app/app.routes.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,8 @@ import { Feat3241Component } from "../routes/features/feat3241/feat3241.componen
6363
import { FeatV2IconsComponent } from "../routes/features/featV2Icons/feat-v2-icons.component";
6464
import { Feat3137Component } from "../routes/features/feat3137/feat3137.component";
6565
import { Feat3306Component } from "../routes/features/feat3306/feat3306.component";
66+
import { Feat2885Component } from "../routes/features/feat2885/feat2885.component";
67+
import { Feat2885NavigationTabsComponent } from "../routes/features/feat2885-navigation-tabs/feat2885-navigation-tabs.component";
6668

6769
export const appRoutes: Route[] = [
6870
{ path: "everything", component: EverythingComponent },
@@ -130,4 +132,6 @@ export const appRoutes: Route[] = [
130132
{ path: "features/3137", component: Feat3137Component },
131133
{ path: "features/1908", component: Feat1908Component },
132134
{ path: "features/3306", component: Feat3306Component },
135+
{ path: "features/2885", component: Feat2885Component },
136+
{ path: "features/2885-navigation-tabs", component: Feat2885NavigationTabsComponent },
133137
];

‎apps/prs/angular/src/routes/features/feat2885/feat2885.component.html‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
<div style="display: flex; height: 100vh">
2+
<goabx-work-side-menu
3+
heading="Workspace Demo"
4+
url="/"
5+
userName="John Doe"
6+
userSecondaryText="john.doe@gov.ab.ca"
7+
[open]="menuOpen"
8+
(onToggle)="toggleMenu()"
9+
[primaryContent]="primaryTpl"
10+
[secondaryContent]="secondaryTpl"
11+
[accountContent]="accountTpl"
12+
/>
13+
14+
<ng-template #primaryTpl>
15+
<goabx-work-side-menu-item
16+
icon="grid"
17+
label="Dashboard"
18+
url="/features/2885"
19+
/>
20+
<goabx-work-side-menu-item
21+
icon="search"
22+
label="Search"
23+
url="/features/2885/search"
24+
/>
25+
<goabx-work-side-menu-item
26+
icon="list"
27+
label="Cases"
28+
url="/features/2885/cases"
29+
badge="5"
30+
type="success"
31+
/>
32+
<goabx-work-side-menu-item
33+
icon="document"
34+
label="Documents"
35+
url="/features/2885/documents"
36+
[divider]="true"
37+
/>
38+
<goabx-work-side-menu-item
39+
icon="alert-circle"
40+
label="Alerts"
41+
url="#"
42+
badge="3"
43+
type="emergency"
44+
[popoverContent]="alertsTpl"
45+
/>
46+
</ng-template>
47+
48+
<ng-template #alertsTpl>
49+
<div style="padding: 1rem; width: 280px">
50+
<h3 style="margin: 0 0 0.5rem 0; font-size: 1rem">
51+
Custom Popover Content
52+
</h3>
53+
<p style="margin: 0 0 1rem 0; color: #666; font-size: 0.875rem">
54+
This demonstrates that <code>popoverContent</code> accepts any Angular
55+
template, not just
56+
<code>GoabxWorkSideNotificationPanel</code>.
57+
</p>
58+
<ul style="margin: 0; padding-left: 1.25rem; font-size: 0.875rem">
59+
<li>Custom alerts</li>
60+
<li>Quick actions</li>
61+
<li>Mini dashboards</li>
62+
<li>Any custom UI</li>
63+
</ul>
64+
</div>
65+
</ng-template>
66+
67+
<ng-template #secondaryTpl>
68+
<goabx-work-side-menu-item
69+
icon="notifications"
70+
label="Notifications"
71+
url="#"
72+
badge="12"
73+
type="success"
74+
[popoverContent]="notificationsTpl"
75+
/>
76+
<goabx-work-side-menu-item
77+
icon="help-circle"
78+
label="Help"
79+
url="/features/2885/help"
80+
/>
81+
</ng-template>
82+
83+
<ng-template #notificationsTpl>
84+
<goabx-work-side-notification-panel
85+
heading="Notifications"
86+
activeTab="unread"
87+
(onMarkAllRead)="handleMarkAllRead()"
88+
(onViewAll)="handleViewAll()"
89+
>
90+
<goabx-work-side-notification-item
91+
*ngFor="let notif of notifications; trackBy: trackById"
92+
[title]="notif.title"
93+
[description]="notif.description"
94+
[timestamp]="notif.timestamp"
95+
[type]="notif.type"
96+
[readStatus]="notif.readStatus"
97+
[priority]="notif.priority"
98+
(onClick)="handleNotificationClick(notif.id)"
99+
/>
100+
</goabx-work-side-notification-panel>
101+
</ng-template>
102+
103+
<ng-template #accountTpl>
104+
<goabx-work-side-menu-item
105+
icon="settings"
106+
label="Settings"
107+
url="/features/2885/settings"
108+
/>
109+
<goabx-work-side-menu-item
110+
icon="log-out"
111+
label="Log out"
112+
url="/logout"
113+
/>
114+
</ng-template>
115+
116+
<main
117+
style="
118+
flex: 1;
119+
padding: 2rem;
120+
background-color: #f3f3f3;
121+
overflow: auto;
122+
"
123+
>
124+
<div class="mobile-menu-toggle">
125+
<goab-icon-button
126+
icon="menu"
127+
variant="dark"
128+
(onClick)="openMenu()"
129+
/>
130+
</div>
131+
132+
<h1>Feature #2885: Work Side Menu with Notification Popover</h1>
133+
<p>
134+
This demonstrates the <code>GoabxWorkSideMenu</code> with the new
135+
notification popover feature.
136+
</p>
137+
138+
<h2>New Features</h2>
139+
<ul>
140+
<li>
141+
<strong>Notification Popover</strong> - Click the "Notifications" menu
142+
item to see the popover panel
143+
</li>
144+
<li>
145+
<strong>Custom Popover Content</strong> - Click the "Alerts" menu item
146+
to see a custom div, demonstrating that <code>popoverContent</code>
147+
accepts any Angular template
148+
</li>
149+
<li>
150+
<strong>GoabxWorkSideNotificationPanel</strong> - Panel with tabs
151+
(Unread, Urgent, All)
152+
</li>
153+
<li>
154+
<strong>GoabxWorkSideNotificationItem</strong> - Individual notification
155+
cards with:
156+
<ul>
157+
<li>Title and description</li>
158+
<li>Smart timestamp formatting (e.g., "5 min ago", "2 h ago")</li>
159+
<li>Type badges (info, success, warning, critical)</li>
160+
<li>Read/unread status indicator (green dot)</li>
161+
<li>Urgent priority styling</li>
162+
</ul>
163+
</li>
164+
<li>
165+
<strong>Footer actions</strong> - "View all" and "Mark all as read"
166+
buttons
167+
</li>
168+
</ul>
169+
170+
<h2>Console Output</h2>
171+
<p>
172+
Open the browser console to see events when clicking notifications or
173+
footer actions.
174+
</p>
175+
</main>
176+
</div>

0 commit comments

Comments
 (0)