Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI mail-log and mail-detail #1252

Open
wants to merge 16 commits into
base: master
Choose a base branch
from
5 changes: 4 additions & 1 deletion frontend/projects/admin/src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
@@ -78,7 +78,10 @@ const routes: Routes = [

@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules,
paramsInheritanceStrategy: 'always',
}),
],
exports: [RouterModule],
})
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Empty file.
Original file line number Diff line number Diff line change
@@ -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) {}
}
Original file line number Diff line number Diff line change
@@ -1 +1,71 @@
<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">
<input
type="text"
class="form-control"
placeholder="Filter table"
aria-label="Filter table"
aria-describedby="Filter table"
[(ngModel)]="searchText"
autofocus
(keydown.enter)="search()"
/>
<button
class="btn btn-outline-secondary"
type="button"
(click)="search()"
translate="admin.common.search"
></button>
</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>
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.text-overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100px;
}
Original file line number Diff line number Diff line change
@@ -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();
}
}
Loading