ticketfrei/ticketfrei3
8
1
Fork 0
Code Issues 11 Pull requests 2 Projects 1 Releases Wiki Activity

[frontend] Add custom design for email

Browse source
This commit is contained in:
Cathy Hu 2020-08-28 17:34:07 +02:00
parent 0d902cb9f8
commit 2d6689ac5a
12 changed files with 221 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.html Normal file
View file

@ -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>

0
kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.scss Normal file
View file

24
kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.spec.ts Normal file
View file

@ -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();
});
});

54
kibicara-frontend/src/app/platforms/email/email-dialog/email-dialog.component.ts Normal file
View file

@ -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,
});
}
);
}
}

1
kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.html Normal file
View file

@ -0,0 +1 @@
<p>email-info-dialog works!</p>

0
kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.scss Normal file
View file

24
kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.spec.ts Normal file
View file

@ -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();
});
});

12
kibicara-frontend/src/app/platforms/email/email-info-dialog/email-info-dialog.component.ts Normal file
View file

@ -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 {}
}

32
kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html
View file

@ -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-list-item>
</mat-list>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<button mat-menu-item (click)="onDelete(email.id)">
<mat-icon>delete</mat-icon>
<span>Delete</span>
</button>
<button mat-menu-item>
<button mat-menu-item (click)="onCreate()">
<mat-icon>add</mat-icon>
<span>Add another</span>
</button>
</mat-menu>
</mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>

25
kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.scss
View file

@ -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;
}

29
kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.ts
View file

@ -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]);
// }
});
}
}

4
kibicara-frontend/src/styles.scss
View file

@ -12,3 +12,7 @@ body {
.mat-tab-body-content {
overflow: hidden !important;
}
.info-button {
color: #9e9e9e;
}