Commit 296d54d2 authored by Janik Münzenberger's avatar Janik Münzenberger
Browse files

Fixed email modal

parent d5f0445e
.default-message{
max-height: 12rem;
overflow-y: scroll;
overflow-x: hidden;
overflow-x: scroll;
}
.modal-dialog {
margin-top: 1rem;
width: 100%;
max-width: 85%;
}
\ No newline at end of file
<div class="alert alert-success" *ngIf="sent" role="alert"><i class="fas fa-check mr-2"></i>{{"EMAIL.SUCCESS" | translate}}</div>
<div class="alert alert-danger" *ngIf="!sent && error" role="alert">{{"EMAIL.FAILED" | translate}}</div>
<!-- Modal -->
<button type="button" data-toggle="modal" data-target="#emailModal" hidden="true" #open></button>
<form [formGroup]="emailForm" *ngIf="!sent">
<div class="form-group row">
<label for="email_sender" class="col-sm-2 col-form-label">{{"EMAIL.SENDER" | translate}}:</label>
<div class="col-sm-10">
<input type="email" autocomplete="email" class="form-control" formControlName="email_sender" id="email_sender" placeholder="Sender email" required>
</div>
</div>
<div class="form-group row">
<label for="email_receiver" class="col-sm-2 col-form-label">{{"EMAIL.RECEIVER" | translate}}:</label>
<div class="col-sm-10">
<select *ngIf="receivers" type="email" autocomplete="email" class="form-control" formControlName="email_receiver" id="email_receiver" placeholder="Receiver email" required>
<option *ngFor="let recv of receivers" [value]="recv?.email">{{recv?.name}}</option>
</select>
<input *ngIf="!receivers || receivers.length === 0" type="email" autocomplete="email" class="form-control" formControlName="email_receiver" id="email_receiver" placeholder="Receiver email">
</div>
</div>
<div class="form-group row">
<label for="email_message" class="col-sm-2 col-form-label">{{"EMAIL.MESSAGE" | translate}}:</label>
<div class="col-sm-10">
<textarea type="email" rows="5" class="form-control" formControlName="email_message" id="email_message" required></textarea>
</div>
</div>
<div class="form-group row" *ngIf="message">
<label for="email_attachment" class="col-sm-2 col-form-label">{{"EMAIL.ATTACHMENT" | translate}}:</label>
<div class="col-sm-10">
<pre type="email" rows="6" id="email_attachment" class="form-control default-message" readonly disabled>{{message}}</pre>
<div class="modal fade" id="emailModal" tabindex="-1" role="dialog" aria-labelledby="emailModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="emailModalLabel">{{"RESULT.EMAIL" | translate}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-success" *ngIf="sent" role="alert">
<i class="fas fa-check mr-2"></i>{{"EMAIL.SUCCESS" | translate}}</div>
<div class="alert alert-danger" *ngIf="!sent && error" role="alert">{{"EMAIL.FAILED" | translate}}</div>
<form [formGroup]="emailForm" *ngIf="!sent">
<div class="form-group row">
<label for="email_sender" class="col-sm-2 col-form-label">{{"EMAIL.SENDER" | translate}}:</label>
<div class="col-sm-10">
<input type="email" autocomplete="email" class="form-control" formControlName="email_sender" id="email_sender" placeholder="Sender email"
required>
</div>
</div>
<div class="form-group row">
<label for="email_receiver" class="col-sm-2 col-form-label">{{"EMAIL.RECEIVER" | translate}}:</label>
<div class="col-sm-10">
<select *ngIf="receivers" type="email" autocomplete="email" class="form-control" formControlName="email_receiver" id="email_receiver"
placeholder="Receiver email" required>
<option *ngFor="let recv of receivers" [value]="recv?.email">{{recv?.name}}</option>
</select>
<input *ngIf="!receivers || receivers.length === 0" type="email" autocomplete="email" class="form-control" formControlName="email_receiver"
id="email_receiver" placeholder="Receiver email">
</div>
</div>
<div class="form-group row">
<label for="email_message" class="col-sm-2 col-form-label">{{"EMAIL.MESSAGE" | translate}}:</label>
<div class="col-sm-10">
<textarea type="email" rows="5" class="form-control" formControlName="email_message" id="email_message" required></textarea>
</div>
</div>
<div class="form-group row" *ngIf="message">
<label for="email_attachment" class="col-sm-2 col-form-label">{{"EMAIL.ATTACHMENT" | translate}}:</label>
<div class="col-sm-10">
<pre type="email" rows="6" id="email_attachment" class="form-control default-message" readonly disabled>{{message}}</pre>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" (click)="send()" [hidden]="sent">Send</button>
</div>
</div>
</div>
</form>
</div>
import { Component, OnInit, Input } from '@angular/core';
import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { FormGroup, Validators, FormControl } from '@angular/forms';
import { EmailService } from '../../services/email.service';
import { IEmail } from '../../model/IEmail';
......@@ -14,10 +14,13 @@ export class EmailComponent implements OnInit {
@Input() receivers: {email: string, name: string}[];
@Input() message: string = "";
emailForm: FormGroup;
sent: boolean = false;
error: boolean = false;
@ViewChild('open') openButton: ElementRef;
constructor(private emailService: EmailService,
private userService: UserService) { }
......@@ -49,4 +52,8 @@ export class EmailComponent implements OnInit {
});
}
}
open(){
this.openButton.nativeElement.click();
}
}
......@@ -2,11 +2,6 @@
cursor: pointer;
}
.modal-dialog {
width: 100%;
max-width: 85%;
}
.cover {
z-index: 999;
width: 100%;
......
......@@ -22,23 +22,4 @@
<h3 class="mx-4 text-center">{{"ANALYSIS.PROGRESS" | translate}}</h3>
</div>
<!-- Modal -->
<div class="modal fade" id="emailModal" tabindex="-1" role="dialog" aria-labelledby="emailModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="emailModalLabel">{{"RESULT.EMAIL" | translate}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<app-email #email [receivers]="gardeners" [message]="job?.result | stringify"></app-email>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" (click)="sendEmail()">Send</button>
</div>
</div>
</div>
</div>
<app-email [receivers]="gardeners" [message]="job?.result | stringify" #email></app-email>
\ No newline at end of file
......@@ -22,7 +22,7 @@ export class ResultComponent implements OnInit {
@ViewChild('loader') loader;
@ViewChild("email") emailModal: EmailComponent;
@ViewChild('email') email: EmailComponent;
constructor(private router: Router,
private route: ActivatedRoute,
......@@ -38,6 +38,10 @@ export class ResultComponent implements OnInit {
this.getGardeners();
}
openEmail(){
this.email.open();
}
startAnalysis() { this.loader.nativeElement.style.display = 'flex'; }
stopAnalysis() { this.loader.nativeElement.style.display = 'none'; }
......@@ -62,8 +66,4 @@ export class ResultComponent implements OnInit {
.then(gardeners => this.gardeners = gardeners)
.catch(err => console.error("Fehler"));
}
sendEmail() {
this.emailModal.send();
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment