Skip to content

Commit 7ec6e86

Browse files
author
mashm
committed
mashup code changes
1 parent 6fe0c00 commit 7ec6e86

File tree

8 files changed

+240
-222
lines changed

8 files changed

+240
-222
lines changed
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div class="progress-box" *ngIf="isProgress$">
2+
<mat-spinner class="progress-spinner"></mat-spinner>
3+
</div>
4+
5+
<div>
6+
<app-header [applicationLabel]="applicationLabel"></app-header>
7+
</div>
8+
9+
<div *ngIf="bLoggedIn$ == true && bHasPConnect$ == true">
10+
<app-main-screen [pConn$]="pConn$"></app-main-screen>
11+
</div>
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.progress-box {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100%;
7+
width: 100%;
8+
background-color: var(--app-background-color);
9+
position: fixed;
10+
z-index: 99999;
11+
top: 0px;
12+
left: 0px;
13+
opacity: 0.5;
14+
}
15+
16+
.progress-spinner {
17+
text-align: center;
18+
}
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2+
3+
import { EmbeddedComponent } from './embedded.component';
4+
5+
describe('EmbeddedComponent', () => {
6+
let component: EmbeddedComponent;
7+
let fixture: ComponentFixture<EmbeddedComponent>;
8+
9+
beforeEach(waitForAsync(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [EmbeddedComponent]
12+
}).compileComponents();
13+
}));
14+
15+
beforeEach(() => {
16+
fixture = TestBed.createComponent(EmbeddedComponent);
17+
component = fixture.componentInstance;
18+
fixture.detectChanges();
19+
});
20+
21+
it('should create', () => {
22+
expect(component).toBeTruthy();
23+
});
24+
});
Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
import { Component, OnInit, ChangeDetectorRef, OnDestroy } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { Title } from '@angular/platform-browser';
4+
import { MatButtonModule } from '@angular/material/button';
5+
import { MatIconModule } from '@angular/material/icon';
6+
import { MatToolbarModule } from '@angular/material/toolbar';
7+
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
8+
import { Subscription } from 'rxjs';
9+
import { loginIfNecessary, logout, sdkSetAuthHeader, sdkSetCustomTokenParamsCB } from '@pega/auth/lib/sdk-auth-manager';
10+
11+
import { ProgressSpinnerService } from '../../../../../../../packages/angular-sdk-components/src/lib/_messages/progress-spinner.service';
12+
import { endpoints } from '../../../../../../../packages/angular-sdk-components/src/lib/_services/endpoints';
13+
import { ServerConfigService } from '../../../../../../../packages/angular-sdk-components/src/lib/_services/server-config.service';
14+
import { Utils } from '../../../../../../../packages/angular-sdk-components/src/lib/_helpers/utils';
15+
import { compareSdkPCoreVersions } from '../../../../../../../packages/angular-sdk-components/src/lib/_helpers/versionHelpers';
16+
import { HeaderComponent } from '../header/header.component';
17+
import { MainScreenComponent } from '../main-screen/main-screen.component';
18+
19+
import { getSdkComponentMap } from '../../../../../../../packages/angular-sdk-components/src/lib/_bridge/helpers/sdk_component_map';
20+
import localSdkComponentMap from '../../../../../../../packages/angular-sdk-components/src/sdk-local-component-map';
21+
22+
declare global {
23+
interface Window {
24+
myLoadMashup: Function;
25+
}
26+
}
27+
28+
@Component({
29+
selector: 'app-embedded',
30+
templateUrl: './embedded.component.html',
31+
styleUrls: ['./embedded.component.scss'],
32+
providers: [Utils],
33+
standalone: true,
34+
imports: [CommonModule, MatProgressSpinnerModule, MatToolbarModule, MatIconModule, MatButtonModule, HeaderComponent, MainScreenComponent]
35+
})
36+
export class EmbeddedComponent implements OnInit, OnDestroy {
37+
starterPackVersion$: string = endpoints.SP_VERSION;
38+
pConn$: typeof PConnect;
39+
40+
applicationLabel: string | undefined = '';
41+
bLoggedIn$ = false;
42+
bPConnectLoaded$ = false;
43+
bHasPConnect$ = false;
44+
isProgress$ = false;
45+
46+
progressSpinnerSubscription: Subscription;
47+
48+
bootstrapShell: any;
49+
50+
constructor(
51+
private cdRef: ChangeDetectorRef,
52+
private psservice: ProgressSpinnerService,
53+
private titleService: Title,
54+
private scservice: ServerConfigService
55+
) {}
56+
57+
ngOnInit() {
58+
this.scservice.readSdkConfig().then(() => {
59+
this.initialize();
60+
});
61+
}
62+
63+
ngOnDestroy() {
64+
this.progressSpinnerSubscription.unsubscribe();
65+
}
66+
67+
async initialize() {
68+
this.titleService.setTitle('Media Co');
69+
70+
sessionStorage.clear();
71+
72+
// handle showing and hiding the progress spinner
73+
this.progressSpinnerSubscription = this.psservice.getMessage().subscribe(message => {
74+
this.showHideProgress(message.show);
75+
});
76+
77+
// Add event listener for when logged in and constellation bootstrap is loaded
78+
document.addEventListener('SdkConstellationReady', () => {
79+
this.bLoggedIn$ = true;
80+
// start the portal
81+
this.startMashup();
82+
});
83+
84+
// Add event listener for when logged out
85+
document.addEventListener('SdkLoggedOut', () => {
86+
this.bLoggedIn$ = false;
87+
});
88+
89+
const sdkConfigAuth = await this.scservice.getSdkConfigAuth();
90+
91+
if ((sdkConfigAuth.mashupGrantType === 'none' || !sdkConfigAuth.mashupClientId) && sdkConfigAuth.customAuthType === 'Basic') {
92+
// Service package to use custom auth with Basic
93+
const sB64 = window.btoa(`${sdkConfigAuth.mashupUserIdentifier}:${window.atob(sdkConfigAuth.mashupPassword)}`);
94+
sdkSetAuthHeader(`Basic ${sB64}`);
95+
}
96+
97+
if ((sdkConfigAuth.mashupGrantType === 'none' || !sdkConfigAuth.mashupClientId) && sdkConfigAuth.customAuthType === 'BasicTO') {
98+
const now = new Date();
99+
const expTime = new Date(now.getTime() + 5 * 60 * 1000);
100+
let sISOTime = `${expTime.toISOString().split('.')[0]}Z`;
101+
const regex = /[-:]/g;
102+
sISOTime = sISOTime.replace(regex, '');
103+
// Service package to use custom auth with Basic
104+
const sB64 = window.btoa(`${sdkConfigAuth.mashupUserIdentifier}:${window.atob(sdkConfigAuth.mashupPassword)}:${sISOTime}`);
105+
sdkSetAuthHeader(`Basic ${sB64}`);
106+
}
107+
108+
if (sdkConfigAuth.mashupGrantType === 'customBearer' && sdkConfigAuth.customAuthType === 'CustomIdentifier') {
109+
// Use custom bearer with specific custom parameter to set the desired operator via
110+
// a userIdentifier property. (Caution: highly insecure...being used for simple demonstration)
111+
sdkSetCustomTokenParamsCB(() => {
112+
return { userIdentifier: sdkConfigAuth.mashupUserIdentifier };
113+
});
114+
}
115+
116+
// Login if needed, without doing an initial main window redirect
117+
// eslint-disable-next-line no-restricted-globals
118+
const sAppName = location.pathname.substring(location.pathname.indexOf('/') + 1);
119+
loginIfNecessary({ appName: sAppName, mainRedirect: false });
120+
}
121+
122+
startMashup() {
123+
PCore.onPCoreReady(renderObj => {
124+
console.log('PCore ready!');
125+
// Check that we're seeing the PCore version we expect
126+
compareSdkPCoreVersions();
127+
this.applicationLabel = PCore.getEnvironmentInfo().getApplicationLabel();
128+
129+
this.titleService.setTitle(this.applicationLabel ?? '');
130+
131+
// Initialize the SdkComponentMap (local and pega-provided)
132+
getSdkComponentMap(localSdkComponentMap).then((theComponentMap: any) => {
133+
console.log(`SdkComponentMap initialized`, theComponentMap);
134+
135+
// Don't call initialRender until SdkComponentMap is fully initialized
136+
this.initialRender(renderObj);
137+
});
138+
});
139+
140+
window.myLoadMashup('app-root', false); // this is defined in bootstrap shell that's been loaded already
141+
}
142+
143+
initialRender(renderObj) {
144+
// Need to register the callback function for PCore.registerComponentCreator
145+
// This callback is invoked if/when you call a PConnect createComponent
146+
PCore.registerComponentCreator(c11nEnv => {
147+
return c11nEnv;
148+
});
149+
150+
// Change to reflect new use of arg in the callback:
151+
const { props } = renderObj;
152+
153+
this.pConn$ = props.getPConnect();
154+
155+
this.bHasPConnect$ = true;
156+
this.bPConnectLoaded$ = true;
157+
158+
this.showHideProgress(false);
159+
160+
sessionStorage.setItem('pCoreUsage', 'AngularSDKMashup');
161+
}
162+
163+
showHideProgress(bShow: boolean) {
164+
this.isProgress$ = bShow;
165+
// causing failure on actions buttons in emebedded mode
166+
// this.cdRef.detectChanges();
167+
}
168+
169+
logOff() {
170+
logout().then(() => {
171+
// Reload the page to kick off the login
172+
window.location.reload();
173+
});
174+
}
175+
}
Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
<div class="progress-box" *ngIf="isProgress$">
2-
<mat-spinner class="progress-spinner"></mat-spinner>
3-
</div>
4-
51
<mat-toolbar color="primary" class="mc-toolbar">
62
<mat-toolbar-row class="mc-toolbar-row">
73
{{ applicationLabel }}
@@ -12,7 +8,3 @@
128
<button mat-button>v {{ starterPackVersion$ }}</button>
139
</mat-toolbar-row>
1410
</mat-toolbar>
15-
16-
<div *ngIf="bLoggedIn$ == true && bHasPConnect$ == true">
17-
<app-main-screen [pConn$]="pConn$"></app-main-screen>
18-
</div>

projects/angular-test-app/src/app/_samples/embedded/header/header.component.scss

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,6 @@
22
flex: 1 1 auto;
33
}
44

5-
.progress-box {
6-
display: flex;
7-
flex-direction: column;
8-
justify-content: center;
9-
align-items: center;
10-
height: 100%;
11-
width: 100%;
12-
background-color: var(--app-background-color);
13-
position: fixed;
14-
z-index: 99999;
15-
top: 0px;
16-
left: 0px;
17-
opacity: 0.5;
18-
}
19-
20-
.progress-spinner {
21-
text-align: center;
22-
}
23-
245
.example-container {
256
min-height: 100%;
267
height: 100%;
@@ -63,11 +44,3 @@
6344
height: 80px;
6445
width: 60px;
6546
}
66-
67-
/*
68-
.mc-header-svg-icon {
69-
width: 1.4rem;
70-
display: inline-block;
71-
filter: $app-primary-color-filter;
72-
}
73-
*/

0 commit comments

Comments
 (0)