Fehlerbehebung & Start Vector Search

bizmatch/src/app/components/message/message-container.component.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { MessageComponent } from './message.component';
+import { Message, MessageService } from './message.service';
+
+@Component({
+  selector: 'app-message-container',
+  standalone: true,
+  imports: [CommonModule, MessageComponent],
+  template: `
+    <div class="fixed top-5 right-5 z-50 flex flex-col items-end">
+      <app-message *ngFor="let message of messages" [message]="message" (close)="removeMessage(message)"> </app-message>
+    </div>
+  `,
+})
+export class MessageContainerComponent implements OnInit {
+  messages: Message[] = [];
+
+  constructor(private messageService: MessageService) {}
+
+  ngOnInit(): void {
+    this.messageService.messages$.subscribe(messages => {
+      this.messages = messages;
+    });
+  }
+
+  removeMessage(message: Message): void {
+    this.messageService.removeMessage(message);
+  }
+}

bizmatch/src/app/components/message/message.component.ts

@@ -1,32 +1,25 @@
-import { Component } from '@angular/core';
-
-import { AsyncPipe, NgIf } from '@angular/common';
-import { MessageService } from './message.service';
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Message } from './message.service';
 
 @Component({
   selector: 'app-message',
   standalone: true,
-  imports: [AsyncPipe, NgIf],
+  imports: [CommonModule],
   template: `
-    <div
-      *ngIf="messageService.modalVisible$ | async"
-      id="toast-success"
-      class="fixed top-[0.5rem] right-[1rem] flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-slate-200 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
-      role="alert"
-    >
-      <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
+    <div [ngClass]="getClasses()" role="alert">
+      <div [ngClass]="getIconClasses()">
         <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-          <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
+          <path [attr.d]="getIconPath()" />
         </svg>
-        <span class="sr-only">Check icon</span>
+        <span class="sr-only">{{ getSrText() }}</span>
       </div>
-      <div class="ms-3 text-sm font-normal">{{ messageService.message$ | async }}</div>
+      <div class="ms-3 text-sm font-normal">{{ message.text }}</div>
       <button
         type="button"
+        (click)="onClose()"
         class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
-        data-dismiss-target="#toast-success"
         aria-label="Close"
-        (click)="messageService.reject()"
       >
         <span class="sr-only">Close</span>
         <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
@@ -37,5 +30,59 @@ import { MessageService } from './message.service';
   `,
 })
 export class MessageComponent {
-  constructor(public messageService: MessageService) {}
+  @Input() message!: Message;
+  @Output() close = new EventEmitter<void>();
+
+  onClose(): void {
+    this.close.emit();
+  }
+
+  getClasses(): string {
+    return `flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 ${this.getSeverityClasses()}`;
+  }
+
+  getIconClasses(): string {
+    const baseClasses = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 rounded-lg';
+    switch (this.message.severity) {
+      case 'success':
+        return `${baseClasses} text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200`;
+      case 'danger':
+        return `${baseClasses} text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200`;
+      case 'warning':
+        return `${baseClasses} text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200`;
+    }
+  }
+
+  getIconPath(): string {
+    switch (this.message.severity) {
+      case 'success':
+        return 'M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z';
+      case 'danger':
+        return 'M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z';
+      case 'warning':
+        return 'M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z';
+    }
+  }
+
+  getSrText(): string {
+    switch (this.message.severity) {
+      case 'success':
+        return 'Check icon';
+      case 'danger':
+        return 'Error icon';
+      case 'warning':
+        return 'Warning icon';
+    }
+  }
+
+  private getSeverityClasses(): string {
+    switch (this.message.severity) {
+      case 'success':
+        return 'border-green-500';
+      case 'danger':
+        return 'border-red-500';
+      case 'warning':
+        return 'border-orange-500';
+    }
+  }
 }

bizmatch/src/app/components/message/message.service.ts

@@ -1,32 +1,30 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 
+export interface Message {
+  severity: 'success' | 'danger' | 'warning';
+  text: string;
+  duration: number;
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class MessageService {
-  private modalVisibleSubject = new BehaviorSubject<boolean>(false);
-  private messageSubject = new BehaviorSubject<string>('');
-  private resolvePromise!: (value: boolean) => void;
+  private messagesSubject = new BehaviorSubject<Message[]>([]);
+  messages$: Observable<Message[]> = this.messagesSubject.asObservable();
 
-  modalVisible$: Observable<boolean> = this.modalVisibleSubject.asObservable();
-  message$: Observable<string> = this.messageSubject.asObservable();
+  addMessage(message: Message): void {
+    const currentMessages = this.messagesSubject.value;
+    this.messagesSubject.next([...currentMessages, message]);
 
-  showMessage(message: string): Promise<boolean> {
-    this.messageSubject.next(message);
-    this.modalVisibleSubject.next(true);
-    return new Promise<boolean>(resolve => {
-      this.resolvePromise = resolve;
-    });
+    if (message.duration > 0) {
+      setTimeout(() => this.removeMessage(message), message.duration);
+    }
   }
 
-  accept(): void {
-    this.modalVisibleSubject.next(false);
-    this.resolvePromise(true);
-  }
-
-  reject(): void {
-    this.modalVisibleSubject.next(false);
-    this.resolvePromise(false);
+  removeMessage(messageToRemove: Message): void {
+    const currentMessages = this.messagesSubject.value;
+    this.messagesSubject.next(currentMessages.filter(msg => msg !== messageToRemove));
   }
 }