From 2d6689ac5a723aca1841d05da3537750914fa1a8 Mon Sep 17 00:00:00 2001
From: Cathy Hu <cathy.hu@fau.de>
Date: Fri, 28 Aug 2020 17:34:07 +0200
Subject: [PATCH] [frontend] Add custom design for email
---
.../email-dialog/email-dialog.component.html | 21 ++++++++
.../email-dialog/email-dialog.component.scss | 0
.../email-dialog.component.spec.ts | 24 +++++++++
.../email-dialog/email-dialog.component.ts | 54 +++++++++++++++++++
.../email-info-dialog.component.html | 1 +
.../email-info-dialog.component.scss | 0
.../email-info-dialog.component.spec.ts | 24 +++++++++
.../email-info-dialog.component.ts | 12 +++++
.../email-settings.component.html | 44 +++++++++------
.../email-settings.component.scss | 25 ++++++++-
.../email-settings.component.ts | 29 +++++++++-
kibicara-frontend/src/styles.scss | 4 ++
12 files changed, 221 insertions(+), 17 deletions(-)
create mode 100644 kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.html
create mode 100644 kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.scss
create mode 100644 kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.spec.ts
create mode 100644 kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.ts
create mode 100644 kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.html
create mode 100644 kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.scss
create mode 100644 kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.spec.ts
create mode 100644 kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.ts
diff --git a/kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.html b/kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.html
new file mode 100644
index 0000000..ff17739
--- /dev/null
+++ b/kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.html
@@ -0,0 +1,21 @@
+<h2 mat-dialog-title>Create new inbox</h2>
+
+<mat-dialog-content class="mat-typography">
+ <form class="input" [formGroup]="form">
+ <mat-form-field>
+ <mat-label>New inbox address</mat-label>
+ <input matInput formControlName="name" />
+ <mat-error
+ *ngIf="form.controls.name.errors && form.controls.name.errors.required"
+ >Inbox address is required</mat-error
+ >
+ </mat-form-field>
+ </form>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+ <button mat-button (click)="onCancel()">Cancel</button>
+ <button mat-button (click)="onSubmit()" cdkFocusInitial>
+ Create address
+ </button>
+</mat-dialog-actions>
diff --git a/kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.scss b/kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.spec.ts b/kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.spec.ts
new file mode 100644
index 0000000..3b75ce8
--- /dev/null
+++ b/kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmailDialogComponent } from './email-dialog.component';
+
+describe('EmailDialogComponent', () => {
+ let component: EmailDialogComponent;
+ let fixture: ComponentFixture<EmailDialogComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [EmailDialogComponent],
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(EmailDialogComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.ts b/kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.ts
new file mode 100644
index 0000000..b1873fb
--- /dev/null
+++ b/kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { Validators, FormBuilder } from '@angular/forms';
+import { EmailService } from 'src/app/core/api';
+import { first } from 'rxjs/operators';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+ selector: 'app-email-dialog',
+ templateUrl: './email-dialog.component.html',
+ styleUrls: ['./email-dialog.component.scss'],
+})
+export class EmailDialogComponent implements OnInit {
+ @Input() hoodId;
+ form;
+
+ constructor(
+ public dialogRef: MatDialogRef<EmailDialogComponent>,
+ private formBuilder: FormBuilder,
+ private emailService: EmailService,
+ private snackBar: MatSnackBar
+ ) {}
+
+ ngOnInit(): void {
+ this.form = this.formBuilder.group({
+ name: ['', Validators.required],
+ });
+ }
+
+ onCancel() {
+ this.dialogRef.close();
+ }
+
+ onSubmit() {
+ if (this.form.invalid) {
+ return;
+ }
+ this.emailService
+ .createEmail(this.hoodId, {
+ name: this.form.controls.name.value,
+ })
+ .pipe(first())
+ .subscribe(
+ () => {
+ this.dialogRef.close();
+ },
+ (error) => {
+ this.snackBar.open('Address already taken', 'Close', {
+ duration: 2000,
+ });
+ }
+ );
+ }
+}
diff --git a/kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.html b/kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.html
new file mode 100644
index 0000000..87c143e
--- /dev/null
+++ b/kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.html
@@ -0,0 +1 @@
+<p>email-info-dialog works!</p>
diff --git a/kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.scss b/kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.spec.ts b/kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.spec.ts
new file mode 100644
index 0000000..de6271f
--- /dev/null
+++ b/kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmailInfoDialogComponent } from './email-info-dialog.component';
+
+describe('EmailInfoDialogComponent', () => {
+ let component: EmailInfoDialogComponent;
+ let fixture: ComponentFixture<EmailInfoDialogComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [EmailInfoDialogComponent],
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(EmailInfoDialogComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.ts b/kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.ts
new file mode 100644
index 0000000..5944b08
--- /dev/null
+++ b/kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-email-info-dialog',
+ templateUrl: './email-info-dialog.component.html',
+ styleUrls: ['./email-info-dialog.component.scss'],
+})
+export class EmailInfoDialogComponent implements OnInit {
+ constructor() {}
+
+ ngOnInit(): void {}
+}
diff --git a/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html b/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html
index d439400..cc0495a 100644
--- a/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html
+++ b/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html
@@ -1,20 +1,34 @@
<mat-card>
<mat-card-header>
- <mat-card-title>E-Mails</mat-card-title>
+ <mat-card-title class="platform-title">
+ <div class="platform-heading">
+ E-Mails
+ </div>
+ <button mat-icon-button aria-label="How to use">
+ <mat-icon matTooltip="How to use" class="info-button">info</mat-icon>
+ </button>
+ </mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-list *ngIf="emails$ | async as emails">
- <mat-list-item *ngIf="emails.length === 0">
- <button mat-menu-item>
+ <mat-list-item *ngIf="emails.length === 0; else startButton">
+ <button mat-menu-item (click)="onCreate()">
<mat-icon>add</mat-icon>
<span> Add a platform connection!</span>
</button>
<mat-divider></mat-divider>
</mat-list-item>
+ <ng-template #startButton>
+ <mat-list-item>
+ <div class="toggle-container">
+ <mat-slide-toggle class="toggle"></mat-slide-toggle>
+ </div>
+ <mat-divider></mat-divider>
+ </mat-list-item>
+ </ng-template>
<mat-list-item *ngFor="let email of emails">
<div class="entry">
- Telegramdummy
- <mat-slide-toggle></mat-slide-toggle>
+ {{ email.name }}
<button
mat-icon-button
[matMenuTriggerFor]="menu"
@@ -24,17 +38,17 @@
</button>
</div>
<mat-divider></mat-divider>
+ <mat-menu #menu="matMenu">
+ <button mat-menu-item (click)="onDelete(email.id)">
+ <mat-icon>delete</mat-icon>
+ <span>Delete</span>
+ </button>
+ <button mat-menu-item (click)="onCreate()">
+ <mat-icon>add</mat-icon>
+ <span>Add another</span>
+ </button>
+ </mat-menu>
</mat-list-item>
</mat-list>
- <mat-menu #menu="matMenu">
- <button mat-menu-item>
- <mat-icon>delete</mat-icon>
- <span>Delete</span>
- </button>
- <button mat-menu-item>
- <mat-icon>add</mat-icon>
- <span>Add another</span>
- </button>
- </mat-menu>
</mat-card-content>
</mat-card>
diff --git a/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.scss b/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.scss
index b76aeea..a08e4c4 100644
--- a/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.scss
+++ b/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.scss
@@ -1,6 +1,29 @@
.entry {
display: grid;
- grid-template-columns: 4fr 40px 20px;
+ grid-template-columns: 4fr 20px;
width: 100%;
align-items: center;
}
+
+.platform-title {
+ display: grid;
+ grid-template-columns: 1fr 40px;
+ width: 100%;
+ align-items: center;
+}
+
+.platform-heading {
+ align-self: flex-end;
+}
+
+.toggle-container {
+ display: grid;
+ grid-template-columns: 4fr 30px;
+ width: 100%;
+ align-items: center;
+}
+
+.toggle {
+ grid-column-start: 2;
+ align-self: flex-start;
+}
diff --git a/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.ts b/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.ts
index 78cb972..1df4ae3 100644
--- a/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.ts
+++ b/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.ts
@@ -1,6 +1,9 @@
import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs/internal/Observable';
import { EmailService } from 'src/app/core/api';
+import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { EmailDialogComponent } from '../email-dialog/email-dialog.component';
@Component({
selector: 'app-email-settings',
@@ -11,9 +14,33 @@ export class EmailSettingsComponent implements OnInit {
@Input() hoodId;
emails$: Observable<Array<any>>;
- constructor(private emailService: EmailService) {}
+ constructor(
+ private emailService: EmailService,
+ public dialog: MatDialog,
+ private router: Router
+ ) {}
ngOnInit(): void {
+ this.reload();
+ }
+
+ private reload() {
this.emails$ = this.emailService.getEmails(this.hoodId);
}
+
+ onDelete(emailId) {
+ this.emailService.deleteEmail(emailId, this.hoodId).subscribe(() => {
+ this.reload();
+ });
+ }
+
+ onCreate() {
+ const dialogRef = this.dialog.open(EmailDialogComponent);
+
+ dialogRef.afterClosed().subscribe((hood) => {
+ // if (hood && hood.id) {
+ // this.router.navigate(['/dashboard/hoods', hood.id]);
+ // }
+ });
+ }
}
diff --git a/kibicara-frontend/src/styles.scss b/kibicara-frontend/src/styles.scss
index 5cf94e0..56ad8fa 100644
--- a/kibicara-frontend/src/styles.scss
+++ b/kibicara-frontend/src/styles.scss
@@ -12,3 +12,7 @@ body {
.mat-tab-body-content {
overflow: hidden !important;
}
+
+.info-button {
+ color: #9e9e9e;
+}