Skip to content

Commit 6eebd12

Browse files
MehranQadriMehranQadri
committed
AC-357322: Added code snippets and AI prompt to the repository for the Building Custom Control with AI Ascent session
1 parent 6b93a09 commit 6eebd12

9 files changed

Lines changed: 884 additions & 0 deletions

File tree

‎ModernUI/BuildingCustomControls/CodeSnippets/Lesson1.1/Step2/record-insights-panel.ts‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { EventAggregator } from "aurelia-event-aggregator";
2+
import { bindable, Disposable } from "aurelia-framework";
3+
import { autoinject, IScreenApiResult } from "client-controls";
4+
5+
export class RecordInsightsPanelCustomElement {
6+
@bindable title: string = "Record Insights Panel";
7+
@bindable status: string = "";
8+
@bindable warningMessage: string = "";
9+
@bindable details: string = "";
10+
@bindable collapsed: boolean = false;
11+
@bindable accent: string = "neutral";
12+
13+
screenCaption: string = "";
14+
lastScreenUpdate: string = "";
15+
hasWarning: boolean = false;
16+
17+
@autoinject
18+
public eventAggregator!: EventAggregator;
19+
20+
private subscriptions: Disposable[] = [];
21+
22+
attached() {
23+
this.hasWarning = !!this.warningMessage?.trim();
24+
25+
this.subscriptions.push(
26+
this.eventAggregator.subscribe(
27+
"screen-updated",
28+
(screenData: IScreenApiResult) => {
29+
this.screenCaption = `Screen ${screenData.screenID}`;
30+
this.lastScreenUpdate = new Date().toLocaleTimeString();
31+
}
32+
)
33+
);
34+
}
35+
36+
detached() {
37+
this.subscriptions.forEach(s => s?.dispose());
38+
this.subscriptions = [];
39+
}
40+
41+
warningMessageChanged(newValue: string) {
42+
this.hasWarning = !!newValue?.trim();
43+
}
44+
45+
toggleDetails() {
46+
this.collapsed = !this.collapsed;
47+
}
48+
49+
dismissWarning() {
50+
this.warningMessage = "";
51+
this.hasWarning = false;
52+
}
53+
54+
get statusClass(): string {
55+
switch ((this.accent || "").toLowerCase()) {
56+
case "success":
57+
return "accent-success";
58+
case "warning":
59+
return "accent-warning";
60+
case "danger":
61+
return "accent-danger";
62+
default:
63+
return "accent-neutral";
64+
}
65+
}
66+
67+
get badgeClass(): string {
68+
switch ((this.accent || "").toLowerCase()) {
69+
case "success":
70+
return "badge-success";
71+
case "warning":
72+
return "badge-warning";
73+
case "danger":
74+
return "badge-danger";
75+
default:
76+
return "badge-neutral";
77+
}
78+
}
79+
}

‎ModernUI/BuildingCustomControls/CodeSnippets/Lesson1.1/Step3/record-insights-panel.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<require from="./record-insights-panel.scss"></require>
3+
4+
<section class="record-insights-panel ${statusClass}">
5+
<header class="panel-header">
6+
<div class="panel-header-main">
7+
<div class="panel-title-row">
8+
<h3 class="panel-title">${title}</h3>
9+
<span if.bind="status" class="status-badge ${badgeClass}">
10+
${status}
11+
</span>
12+
</div>
13+
14+
<div class="panel-subtitle">
15+
<span if.bind="screenCaption">${screenCaption}</span>
16+
<span if.bind="lastScreenUpdate">
17+
• Updated ${lastScreenUpdate}
18+
</span>
19+
</div>
20+
</div>
21+
22+
<qp-button
23+
class="toggle-button"
24+
caption.bind="collapsed ? 'Show Details' : 'Hide Details'"
25+
click.capture="toggleDetails()">
26+
</qp-button>
27+
</header>
28+
29+
<div if.bind="hasWarning" class="warning-box">
30+
<span>${warningMessage}</span>
31+
<qp-button
32+
class="dismiss-button"
33+
caption="Dismiss"
34+
click.capture="dismissWarning()">
35+
</qp-button>
36+
</div>
37+
38+
<div if.bind="!collapsed" class="panel-body">
39+
<div if.bind="details" class="details-block">${details}</div>
40+
</div>
41+
</section>
42+
</template>

‎ModernUI/BuildingCustomControls/CodeSnippets/Lesson1.1/Step4/record-insights-panel.scss‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
.record-insights-panel {
2+
position: relative;
3+
box-sizing: border-box;
4+
border: 1px solid #d6d9de;
5+
border-left-width: 5px;
6+
border-radius: 8px;
7+
padding: 14px 16px;
8+
margin: 0 0 16px 0;
9+
background: #fff;
10+
}
11+
12+
.record-insights-panel.accent-warning {
13+
border-left-color: #b26a00;
14+
}
15+
16+
.record-insights-panel.accent-success {
17+
border-left-color: #2e8540;
18+
}
19+
20+
.record-insights-panel.accent-danger {
21+
border-left-color: #c62828;
22+
}
23+
24+
.record-insights-panel.accent-neutral {
25+
border-left-color: #7a869a;
26+
}
27+
28+
.panel-header {
29+
display: flex;
30+
justify-content: space-between;
31+
align-items: flex-start;
32+
gap: 16px;
33+
}
34+
35+
.panel-header-main {
36+
flex: 1 1 auto;
37+
min-width: 0;
38+
}
39+
40+
.panel-title-row {
41+
display: flex;
42+
align-items: center;
43+
gap: 8px;
44+
margin-bottom: 6px;
45+
}
46+
47+
.panel-title {
48+
margin: 0;
49+
font-size: 16px;
50+
font-weight: 600;
51+
line-height: 1.25;
52+
}
53+
54+
.panel-subtitle {
55+
font-size: 12px;
56+
line-height: 1.4;
57+
color: #5f6b7a;
58+
}
59+
60+
.status-badge {
61+
display: inline-block;
62+
padding: 2px 8px;
63+
border-radius: 999px;
64+
font-size: 12px;
65+
font-weight: 600;
66+
line-height: 1.2;
67+
white-space: nowrap;
68+
}
69+
70+
.badge-neutral {
71+
background: #eef2f7;
72+
color: #5f6b7a;
73+
}
74+
75+
.badge-success {
76+
background: #e6f4ea;
77+
color: #2e8540;
78+
}
79+
80+
.badge-warning {
81+
background: #fff4db;
82+
color: #b26a00;
83+
}
84+
85+
.badge-danger {
86+
background: #fdecea;
87+
color: #c62828;
88+
}
89+
90+
.warning-box {
91+
margin-top: 12px;
92+
padding: 10px 12px;
93+
background: #fff4db;
94+
display: flex;
95+
align-items: center;
96+
justify-content: space-between;
97+
gap: 12px;
98+
}
99+
100+
.panel-body {
101+
margin-top: 12px;
102+
}
103+
104+
.details-block {
105+
margin: 0;
106+
line-height: 1.5;
107+
}
108+
109+
.toggle-button,
110+
.dismiss-button {
111+
white-space: nowrap;
112+
}

0 commit comments

Comments
 (0)