Notes

import { Component, signal, OnInit, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthServiceService, AppInfo } from '../../services/auth/auth-service.service';
import { Router, RouterLink } from '@angular/router';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { ManageComponentsService } from '../../services/manage-components/manage-components.service';

@Component({
selector: 'app-all-applications',
imports: [MatCardModule, MatButtonModule, CommonModule, RouterLink],
templateUrl: './all-applications.component.html',
styleUrl: './all-applications.component.scss'
})
export class AllApplicationsComponent implements OnInit {
allApps = signal<AppInfo[]>([]);
filteredApps = signal<AppInfo[]>([]);
activeButton = signal<string>('ALL');
letters = signal<string[]>(['ALL', ...'ABCDEFGHIJKLMNOPQRSTUVWXYZ', '#']);
availableLetters = computed(() => {
const apps = this.allApps();
const lettersSet = new Set<string>();
apps.forEach(app => {
const firstChar = app.app_name.charAt(0).toUpperCase();
if (/[A-Z]/.test(firstChar)) {
lettersSet.add(firstChar);
} else {
lettersSet.add('#');
}
});
lettersSet.add('ALL');
return lettersSet;
})

constructor(
private router: Router,
private authService: AuthServiceService,
public manageService: ManageComponentsService
) { }

ngOnInit(): void {
this.authService.appData.subscribe((apps: AppInfo[]) => {
if (apps) {
const visibleApps = apps.filter(app => app.is_app_visible);
const processedApps = visibleApps.map(app => ({
...app,
processedLogoUrl: this.manageService.getImageUrl(app.app_logo_url)
}));
this.allApps.set(processedApps);
this.filteredApps.set(processedApps);
}
});
}

trackByAppId(index: number, app: AppInfo): string {
return app.unique_id;
}

openMail() {
const email = '[email protected]';
//const subject = 'Help with GenAI Application';
//const body = 'Dear Helpdesk Team,%0D%0A%0D%0AI would like to request assistance with a GenAI application. Please provide the necessary support.%0D%0A%0D%0AThank you.%0D%0A';

//const mailToUrl = `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
const mailToUrl = `mailto:${email}`;
window.open(mailToUrl, '_blank');
}
filterdAppsByLetter(letter: string) {
const apps = this.allApps();
this.activeButton.set(letter);
if (letter === 'ALL') {
this.filteredApps.set(apps);
} else if (letter === '#') {
this.filteredApps.set(apps.filter(app => !/^[A-Z]/i.test(app.app_name.charAt(0))));
} else {
this.filteredApps.set(apps.filter(app => app.app_name.toLowerCase().startsWith(letter.toLowerCase())
));
}
}
}

<div class="all-application-container">
<div class="all-apps-header d-flex justify-space-between">
<h3 class="heading-bar">All Application and agents ({{ filteredApps().length }})</h3>
<button type="button" (click)="openMail()" class="primary-btn">Support <img src="./assets/support-icon.svg" alt="Support" class="support-icon" /></button>
</div>

<div class="alphabet-bar">
@for(letter of letters(); track letter) {
<button (click)="filterdAppsByLetter(letter)" [class.active]="!activeButton() || activeButton() === letter" [disabled]="!availableLetters().has(letter)">
{{ letter }}
</button>
}
</div>

<div class="app-list">
@for(app of filteredApps(); track trackByAppId($index, app)) {
@if(app.app_category.trim() === 'External app') {
<a target="_blank" href="{{app.app_url}}">
<mat-card class="app-card" appearance="outlined">
<img [src]="app.processedLogoUrl" alt="{{app.app_name}}" width="24" height="24">
<mat-card-title>{{ app.app_name }}</mat-card-title>
</mat-card>
</a>
} @else {
<a routerLink="{{app.app_url}}">
<mat-card class="app-card" appearance="outlined">
<img [src]="app.processedLogoUrl" alt="{{app.app_name}}" width="24" height="24">
<mat-card-title>{{ app.app_name }}</mat-card-title>
</mat-card>
</a>
}

<!-- <a [routerLink]="[app.app_url]" class="app-button">{{ app.app_name }}</a> -->
}
</div>
@if(filteredApps().length === 0) {
<p class="text-center">No application found.</p>
}
</div>