UI mail-log and mail-detail

frontend/projects/admin/src/app/app-routing.module.ts

@@ -78,7 +78,10 @@ const routes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
+    RouterModule.forRoot(routes, {
+      preloadingStrategy: PreloadAllModules,
+      paramsInheritanceStrategy: 'always',
+    }),
   ],
   exports: [RouterModule],
 })

frontend/projects/admin/src/app/dashboard/event-item/event-item.component.html

@@ -30,10 +30,12 @@ <h4 class="text-overflow" [title]="event.displayName">
         class="btn btn-primary btn-sm hidden-xs hidden-sm mx-1"
         *ngIf="event.visibleForCurrentUser"
       >
-        <svg-icon key="settings" size="md"></svg-icon>Settings
+        <svg-icon key="settings" size="md"></svg-icon>
+        <span translate="admin.event-item.settings"></span>
       </a>
       <a class="btn btn-primary btn-sm mx-1">
-        <svg-icon key="check" size="md"></svg-icon> Check-In
+        <svg-icon key="check" size="md"></svg-icon>
+        <span translate="admin.event-item.check-in"></span>
       </a>
       <a
         class="btn btn-warning btn-sm"
@@ -42,10 +44,9 @@ <h4 class="text-overflow" [title]="event.displayName">
           event.allowedPaymentProxies.includes('OFFLINE')
         "
       >
-        <svg-icon key="payments" size="md"></svg-icon> Pending payments<span
-          class="badge bg-secondary"
-          >{{ event.shortName }}</span
-        >
+        <svg-icon key="payments" size="md"></svg-icon>
+        <span translate="Pending payments"></span
+        ><span class="badge bg-secondary">{{ event.shortName }}</span>
       </a>
     </div>
   </div>

frontend/projects/admin/src/app/event/email-detail/email-detail.component.html

@@ -0,0 +1,35 @@
+<div class="container my-3">
+  <h1 translate="admin.event.mail-detail.title"></h1>
+  <hr />
+  <div *ngIf="mail$ | async as mail">
+    <dl data-ng-if="mail">
+      <dt translate="admin.event.mail-detail.recipient"></dt>
+      <dd>{{ mail.recipient }}</dd>
+      <dt translate="admin.event.mail-detail.subject"></dt>
+      <dd>{{ mail.subject }}</dd>
+      <dt translate="admin.event.mail-detail.message"></dt>
+      <dd>
+        <pre class="white">{{ mail.message }}</pre>
+      </dd>
+      <dt translate="admin.event.mail-detail.status"></dt>
+      <dd>{{ mail.status }}</dd>
+      <dt translate="admin.event.mail-detail.checksum"></dt>
+      <dd class="hidden-sm hidden-xs">{{ mail.checksum }}</dd>
+      <dd class="visible-sm visible-xs">
+        {{ mail.checksum | slice : 0 : 35 }}
+      </dd>
+      <dt translate="admin.event.mail-detail.requested"></dt>
+      <dd>{{ mail.requestTimestamp }}</dd>
+      <dt translate="admin.event.mail-detail.sent"></dt>
+      <dd>{{ mail.sentTimestamp }}</dd>
+    </dl>
+    <div class="text-center">
+      <a
+        class="btn btn-outline-primary"
+        href="#"
+        [routerLink]="['../']"
+        translate="admin.event.mail-detail.back-to-list"
+      ></a>
+    </div>
+  </div>
+</div>

frontend/projects/admin/src/app/event/email-detail/email-detail.component.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { MailService } from 'projects/admin/src/event/mail.service';
+import { EventService } from '../../shared/event.service';
+import { Observable, map, mergeMap, of } from 'rxjs';
+import { Mail } from '../../model/mail';
+import { EventInfo } from '../../model/event';
+
+@Component({
+  selector: 'app-email-detail',
+  templateUrl: './email-detail.component.html',
+  styleUrls: ['./email-detail.component.scss'],
+})
+export class EmailDetailComponent implements OnInit {
+  public mail$: Observable<Mail> = of();
+
+  constructor(
+    private readonly mailService: MailService,
+    private readonly route: ActivatedRoute,
+    private readonly eventService: EventService
+  ) {}
+
+  ngOnInit(): void {
+    this.loadMail();
+  }
+  loadMail() {
+    this.mail$ = this.route.paramMap.pipe(
+      mergeMap((pm) => {
+        const eventId = pm.get('eventId');
+        const mailId = pm.get('emailId');
+        if (eventId != null && mailId != null) {
+          return this.eventService
+            .getEvent(eventId)
+            .pipe(
+              map((event) => new ShortNameAndMailId(event.shortName, mailId))
+            );
+        }
+        return of();
+      }),
+      mergeMap((shortNameAndMailId) =>
+        this.mailService.getMail(
+          shortNameAndMailId.shortName,
+          shortNameAndMailId.mailId
+        )
+      )
+    );
+  }
+}
+class ShortNameAndMailId {
+  constructor(public shortName: string, public mailId: string) {}
+}

frontend/projects/admin/src/app/event/email-log/email-log.component.html

@@ -1 +1,69 @@
-<p>email-log works!</p>
+<div class="container" *ngIf="mailLog$ | async as mailLog">
+  <h1 class="my-3" translate="admin.event.mail-log.title"></h1>
+  <p translate="admin.event.mail-log.legend"></p>
+  <hr />
+  <div class="fs-2 my-3">
+    <svg-icon key="mail" size="xxl"></svg-icon>
+    <span translate="admin.event.mail-log.emails"></span>
+  </div>
+
+  <div class="input-group">
+    <button class="btn btn-outline-secondary" type="button" (click)="search()">
+      <svg-icon key="search"></svg-icon>
+    </button>
+
+    <input
+      type="text"
+      class="form-control"
+      placeholder="Filter table"
+      aria-label="Filter table"
+      aria-describedby="Filter table"
+      [(ngModel)]="searchText"
+      autofocus
+      (keydown.enter)="search()"
+    />
+  </div>
+
+  <div class="my-4">
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th scope="col" translate="admin.event.mail-log.list.recipent"></th>
+          <th scope="col" translate="admin.event.mail-log.list.subject"></th>
+          <th scope="col" translate="admin.event.mail-log.list.message"></th>
+          <th scope="col" translate="admin.event.mail-log.list.status"></th>
+          <th scope="col" translate="admin.event.mail-log.list.checksum"></th>
+          <th scope="col" translate="admin.event.mail-log.list.requested"></th>
+          <th scope="col" translate="admin.event.mail-log.list.sent"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          *ngFor="
+            let mail of mailLog.left
+              | slice : (page - 1) * pageSize : page * pageSize
+          "
+        >
+          <th scope="row">{{ mail.recipient }}</th>
+          <td class="text-overflow">{{ mail.subject }}</td>
+          <td>
+            <a [routerLink]="['./', mail.id]">{{ mail.message }}</a>
+          </td>
+          <td>{{ mail.status }}</td>
+          <td class="text-overflow">
+            {{ mail.checksum }}
+          </td>
+          <td>{{ mail.requestTimestamp | date : dateTimeFormat }}</td>
+          <td>{{ mail.sentTimestamp | date : dateTimeFormat }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="d-flex justify-content-center">
+      <ngb-pagination
+        [(page)]="page"
+        [pageSize]="pageSize"
+        [collectionSize]="mailLog.left.length"
+      ></ngb-pagination>
+    </div>
+  </div>
+</div>

frontend/projects/admin/src/app/event/email-log/email-log.component.scss

@@ -0,0 +1,6 @@
+.text-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100px;
+}

frontend/projects/admin/src/app/event/email-log/email-log.component.ts

@@ -1,15 +1,50 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { MailService } from 'projects/admin/src/event/mail.service';
+import { Observable, map, mergeMap, of, retry, tap } from 'rxjs';
+import { EventService } from '../../shared/event.service';
+import { MailLog } from '../../model/mail';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-email-log',
   templateUrl: './email-log.component.html',
-  styleUrls: ['./email-log.component.scss']
+  styleUrls: ['./email-log.component.scss'],
 })
 export class EmailLogComponent implements OnInit {
+  public searchText = '';
+  public mailLog$: Observable<MailLog> = of();
+  public page: number = 1;
+  public pageSize: number = 10;
 
-  constructor() { }
+  constructor(
+    private readonly mailService: MailService,
+    private readonly route: ActivatedRoute,
+    private readonly eventService: EventService,
+    private readonly translateService: TranslateService
+  ) {}
 
   ngOnInit(): void {
+    this.loadMails();
   }
 
+  loadMails() {
+    this.mailLog$ = this.route.paramMap.pipe(
+      map((pm) => pm.get('eventId')),
+      mergeMap((eventId) =>
+        eventId != null ? this.eventService.getEvent(eventId) : of()
+      ),
+      mergeMap((event) =>
+        this.mailService.getAllMails(event.shortName, 0, this.searchText)
+      )
+    );
+  }
+
+  get dateTimeFormat(): string {
+    return this.translateService.instant('admin.common.date-time');
+  }
+
+  search() {
+    this.loadMails();
+  }
 }