|
1 | | -import { Component, OnDestroy, OnInit } from '@angular/core'; |
2 | | -import { CommonModule } from '@angular/common'; |
| 1 | +import { Component, OnInit } from '@angular/core'; |
| 2 | +import { RouterOutlet } from '@angular/router'; |
3 | 3 | import { AppShellConfiguration as AppShellConfig } from './appshell.configuration'; |
4 | | -import { AppShellLinksGroup, AppShellLink, AppShellUser, AppShellPlatformLayoutComponent, AppShellPicker, AppShellToastService, AppShellToastsComponent, AppShellNotification } from 'ngx-appshell'; |
5 | | -import { Subject, Subscription } from 'rxjs'; |
6 | | -import { AzureService } from './services/azure.service'; |
7 | | -import { NatsService } from './services/nats.service'; |
| 4 | +import { AppShellToastsComponent } from 'ngx-appshell'; |
8 | 5 | import { MatIconRegistry } from '@angular/material/icon'; |
9 | | -import { AppConfigService } from './services/app-config.service'; |
10 | 6 |
|
11 | 7 | @Component({ |
12 | 8 | selector: 'app-root', |
13 | | - imports: [CommonModule, AppShellPlatformLayoutComponent, AppShellToastsComponent], |
| 9 | + imports: [RouterOutlet, AppShellToastsComponent], |
14 | 10 | templateUrl: './app.component.html', |
15 | 11 | styleUrl: './app.component.scss' |
16 | 12 | }) |
17 | | -export class AppComponent implements OnInit, OnDestroy { |
| 13 | +export class AppComponent implements OnInit { |
18 | 14 |
|
19 | | - headerVariant: string = AppShellConfig.headerVariant; |
20 | | - applicationSymbol?: string = AppShellConfig.applicationSymbol; |
21 | | - applicationLogo?: string = AppShellConfig.applicationLogo; |
22 | | - applicationName: string = AppShellConfig.applicationName; |
23 | | - applicationNameLink: string = AppShellConfig.applicationNameLink; |
24 | | - appShellHelpLink: AppShellLink = AppShellConfig.appShellHelpLink; |
25 | | - headerLinks: AppShellLink[] = AppShellConfig.headerLinks; |
26 | | - sidenavSections: AppShellLinksGroup[] = AppShellConfig.sidenavSections; |
27 | | - sidenavLinks: AppShellLinksGroup = AppShellConfig.sidenavLinks; |
28 | 15 | toastLimitInScreen: number = AppShellConfig.toastLimitInScreen; |
29 | | - headerProjectPicker: AppShellPicker; |
30 | | - headerSecondaryPicker: AppShellPicker; |
31 | | - loggedUser: AppShellUser|null = null; |
32 | | - appShellNotificationsLink: AppShellLink = AppShellConfig.appShellNotificationsLink; |
33 | | - appShellNotificationsCount: number = 0; |
34 | | - |
35 | | - private readonly _destroying$ = new Subject<void>(); |
36 | | - private natsUrl: string | undefined; |
37 | | - private unreadMessagesCountSubscription!: Subscription; |
38 | | - private liveMessageSubscription!: Subscription; |
39 | 16 |
|
40 | | - constructor( |
41 | | - private azureService: AzureService, |
42 | | - private toastService: AppShellToastService, |
43 | | - private natsService: NatsService, |
44 | | - private readonly appConfigService :AppConfigService, |
45 | | - private matIconReg: MatIconRegistry |
46 | | - ) { |
47 | | - this.headerSecondaryPicker = { |
48 | | - label: 'Catalog: ', |
49 | | - options: ['Option 1', 'Option 2', 'Option 3'], |
50 | | - selected: 'Option 2' |
51 | | - }; |
52 | | - this.headerProjectPicker = { |
53 | | - label: 'Project: ', |
54 | | - options: ['Value 1', 'Project 2', 'Project 3', |
55 | | - 'Project 4', 'Project 5', 'Project 6', |
56 | | - 'Project 7', 'Project 8', 'Project 9', |
57 | | - 'Project 10', 'Project 11', 'Project 12', |
58 | | - 'Project 13', 'Project 14', 'Project 15'], |
59 | | - selected: 'Project 2', |
60 | | - noOptionsMessage: 'You don\'t have access to any projects in the Marketplace.<br/><br/>You can either <a href="#" target="_blank">create a project</a> or <a href="#" target="_blank">request access</a> to an existing project.', |
61 | | - noFilteredOptionsMessage: 'No projects match the search term.' |
62 | | - }; |
63 | | - this.natsUrl = this.appConfigService.getConfig()?.natsUrl; |
64 | | - } |
| 17 | + constructor(private matIconReg: MatIconRegistry) {} |
65 | 18 |
|
66 | | - async ngOnInit(): Promise<void> { |
| 19 | + ngOnInit(): void { |
67 | 20 | this.matIconReg.setDefaultFontSetClass('material-symbols-outlined'); |
68 | | - await this.natsService.initialize(this.natsUrl!); |
69 | | - this.azureService.initialize(); |
70 | | - this.azureService.loggedUser$.subscribe((user) => { |
71 | | - this.loggedUser = user; |
72 | | - this.initUserNotifications(user); |
73 | | - }); |
74 | | - this.initializeNatsListeners(); |
75 | | - } |
76 | | - |
77 | | - login() { |
78 | | - this.azureService.login(); |
79 | | - } |
80 | | - |
81 | | - logout() { |
82 | | - this.azureService.logout(); |
83 | | - } |
84 | | - |
85 | | - ngOnDestroy(): void { |
86 | | - this._destroying$.next(undefined); |
87 | | - this._destroying$.complete(); |
88 | | - this.liveMessageSubscription.unsubscribe(); |
89 | | - this.unreadMessagesCountSubscription.unsubscribe(); |
90 | | - } |
91 | | - |
92 | | - private initUserNotifications(user: AppShellUser|null) { |
93 | | - if(user) { |
94 | | - // We convert the username to a valid NATS user name based on their validations: |
95 | | - // validBucketRe = regexp.MustCompile(`^[a-zA-Z0-9_-]+$`) |
96 | | - // validKeyRe = regexp.MustCompile(`^[-/_=\.a-zA-Z0-9]+$`) |
97 | | - const natsUser = user.username.split('@')[0].replace(/[^a-zA-Z0-9_-]/g, '_') |
98 | | - this.natsService.initializeUser(natsUser); |
99 | | - |
100 | | - // On login, leave 4 seconds for the NATS connection to be established and show a toast with the unread messages count |
101 | | - setTimeout(() => { |
102 | | - if(this.appShellNotificationsCount > 0) { |
103 | | - const notification = { |
104 | | - id: new Date().getTime().toString() + `-logged`, |
105 | | - title: `You have ${this.appShellNotificationsCount} unread notifications`, |
106 | | - read: false, |
107 | | - subject: 'only-toast' |
108 | | - } as AppShellNotification; |
109 | | - this.toastService.showToast(notification, 8000); |
110 | | - } |
111 | | - }, 4000); |
112 | | - } |
113 | | - } |
114 | | - |
115 | | - private initializeNatsListeners() { |
116 | | - this.unreadMessagesCountSubscription = this.natsService.unreadMessagesCount$.subscribe((count) => { |
117 | | - this.appShellNotificationsCount = count; |
118 | | - }); |
119 | | - this.liveMessageSubscription = this.natsService.liveMessage$.subscribe((message) => { |
120 | | - if (!message || !message.data) { |
121 | | - return; |
122 | | - } |
123 | | - try { |
124 | | - if (this.natsService.isValidMessage(message.data)) { |
125 | | - console.log('Received valid message:', message); |
126 | | - const notification = { |
127 | | - id: message.id, |
128 | | - type: message.data.type, |
129 | | - title: `You have 1 new notification`, |
130 | | - date: new Date(message.data.date), |
131 | | - read: message.read, |
132 | | - subject: message.subject |
133 | | - }; |
134 | | - // If you want to show the actual notification, you can show message.data instead of notification |
135 | | - this.toastService.showToast(notification, 8000); |
136 | | - } else { |
137 | | - console.log('Invalid message format:', message); |
138 | | - } |
139 | | - } catch (error) { |
140 | | - console.log('Invalid message format:', message); |
141 | | - } |
142 | | - }); |
143 | | - } |
144 | | - |
145 | | - projectPickerChanged(option: string) { |
146 | | - console.log(option); |
147 | | - } |
148 | | - |
149 | | - secondaryPickerChanged(option: string) { |
150 | | - console.log(option); |
151 | 21 | } |
152 | 22 | } |
0 commit comments