Feture #52: Social Media Integration, BugFix: #89 Sates as ng-select, send Listing as EMail to friend

bizmatch/src/app/components/email/email.component.html

@@ -0,0 +1,43 @@
+<!-- Main modal -->
+<div *ngIf="eMailService.modalVisible$ | async" id="authentication-modal" tabindex="-1" class="z-40 fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center">
+  <div class="relative p-4 w-full max-w-md max-h-full">
+    <!-- Modal content -->
+    <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+      <!-- Modal header -->
+      <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
+        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Email listing to a friend</h3>
+        <button
+          (click)="eMailService.reject()"
+          type="button"
+          class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+        >
+          <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+          </svg>
+          <span class="sr-only">Close modal</span>
+        </button>
+      </div>
+      <!-- Modal body -->
+      <div class="p-4 md:p-5">
+        <form class="space-y-4" action="#">
+          <div>
+            <app-validated-input label="Your Email" name="email" [(ngModel)]="shareByEMail.email"></app-validated-input>
+          </div>
+          <div>
+            <app-validated-input label="Your Name" name="name" [(ngModel)]="shareByEMail.name"></app-validated-input>
+          </div>
+          <div>
+            <app-validated-input label="Your Friend's EMail" name="recipientEmail" [(ngModel)]="shareByEMail.recipientEmail"></app-validated-input>
+          </div>
+
+          <button
+            (click)="sendMail()"
+            class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          >
+            Send EMail
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { ShareByEMail } from '../../../../../bizmatch-server/src/models/db.model';
+import { MailService } from '../../services/mail.service';
+import { ValidatedInputComponent } from '../validated-input/validated-input.component';
+import { ValidationMessagesService } from '../validation-messages.service';
+import { EMailService } from './email.service';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-email',
+  standalone: true,
+  imports: [CommonModule, FormsModule, ValidatedInputComponent],
+  templateUrl: './email.component.html',
+  template: ``,
+})
+export class EMailComponent {
+  shareByEMail: ShareByEMail = {};
+  constructor(public eMailService: EMailService, private mailService: MailService, private validationMessagesService: ValidationMessagesService) {}
+  ngOnInit() {
+    this.eMailService.shareByEMail$.pipe(untilDestroyed(this)).subscribe(val => {
+      this.shareByEMail = val;
+    });
+  }
+  async sendMail() {
+    try {
+      const result = await this.mailService.mailToFriend(this.shareByEMail);
+      this.eMailService.accept();
+    } catch (error) {
+      if (error.error && Array.isArray(error.error?.message)) {
+        this.validationMessagesService.updateMessages(error.error.message);
+      }
+    }
+  }
+  ngOnDestroy() {
+    this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
+  }
+}

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

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { ShareByEMail } from '../../../../../bizmatch-server/src/models/db.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class EMailService {
+  private modalVisibleSubject = new BehaviorSubject<boolean>(false);
+  private shareByEMailSubject = new BehaviorSubject<ShareByEMail>({});
+  private resolvePromise!: (value: boolean) => void;
+
+  modalVisible$: Observable<boolean> = this.modalVisibleSubject.asObservable();
+  shareByEMail$: Observable<ShareByEMail> = this.shareByEMailSubject.asObservable();
+
+  showShareByEMail(shareByEMail: ShareByEMail): Promise<boolean> {
+    this.shareByEMailSubject.next(shareByEMail);
+    this.modalVisibleSubject.next(true);
+    return new Promise<boolean>(resolve => {
+      this.resolvePromise = resolve;
+    });
+  }
+
+  accept(): void {
+    this.modalVisibleSubject.next(false);
+    this.resolvePromise(true);
+  }
+
+  reject(): void {
+    this.modalVisibleSubject.next(false);
+    this.resolvePromise(false);
+  }
+}