Skip to content

Commit

Permalink
revert revert of templated mail refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
dweinholz committed Jul 15, 2024
1 parent 84f9717 commit 7912532
Show file tree
Hide file tree
Showing 15 changed files with 426 additions and 171 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,7 @@
</button>
</div>
<div class="col-md-2">
<input type="file" accept=".csv" style="display: none" #fileInput (change)="onCsvFileSelected($event)" />
<button type="button " class="btn btn-outline-primary" (click)="fileInput.click()">
<button type="button " class="btn btn-outline-primary" (click)="openProjectCSVMailModal()">
Send CSV Templated Email
</button>
</div>
Expand Down
32 changes: 6 additions & 26 deletions src/app/facility_manager/facilityprojectsoverview.component.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {
Component, Input, OnInit, QueryList, ViewChildren, inject,
} from '@angular/core';
import { Observable, Subject, take } from 'rxjs';
import { Observable, take } from 'rxjs';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
import { MatomoTracker } from 'ngx-matomo-client';
import { ProjectMember } from '../projectmanagement/project_member.model';
Expand All @@ -19,10 +19,10 @@ import {
import { ProjectSortService } from '../shared/shared_modules/services/project-sort.service';
import { AbstractBaseClass } from '../shared/shared_modules/baseClass/abstract-base-class';
import { ProjectEmailModalComponent } from '../shared/modal/email/project-email-modal/project-email-modal.component';
import { NotificationModalComponent } from '../shared/modal/notification-modal';
import { MembersListModalComponent } from '../shared/modal/members/members-list-modal.component';
import { EmailService } from '../api-connector/email.service';
import { CsvMailTemplateModel } from '../shared/classes/csvMailTemplate.model';
import { ProjectCsvTemplatedEmailModalComponent } from '../shared/modal/email/project-csv-templated-email-modal/project-csv-templated-email-modal.component';

/**
* Facility Project overview component.
Expand All @@ -43,9 +43,7 @@ export class FacilityProjectsOverviewComponent extends AbstractBaseClass impleme
public memberFilter: string = '';
filteredMembers: object[] = [];
selectedMember: object[] = [];
facility_members: object[] = [];

filterChanged: Subject<string> = new Subject<string>();
isLoaded: boolean = false;
projects: Application[] = [];
projectsCopy: Application[] = [];
Expand Down Expand Up @@ -183,7 +181,11 @@ export class FacilityProjectsOverviewComponent extends AbstractBaseClass impleme
);
}
}
openProjectCSVMailModal(): void {
console.log('show');

this.bsModalRef = this.modalService.show(ProjectCsvTemplatedEmailModalComponent, { class: 'modal-lg' });
}
onSort({ column, direction }: SortEvent) {
// resetting other headers
this.headers.forEach(header => {
Expand All @@ -196,10 +198,6 @@ export class FacilityProjectsOverviewComponent extends AbstractBaseClass impleme
this.sortProjectService.sortDirection = direction;
}

searchForUserInFacility(searchString: string): void {
this.facilityService.getFilteredMembersOfFacility(searchString);
}

filterMembers(bare_searchString: string): void {
this.filteredMembers = [];
const searchString: string = bare_searchString.toLowerCase();
Expand Down Expand Up @@ -516,24 +514,6 @@ export class FacilityProjectsOverviewComponent extends AbstractBaseClass impleme
initialState = { selectedProjects: this.selectedEmailProjects };
}
this.bsModalRef = this.modalService.show(ProjectEmailModalComponent, { initialState, class: 'modal-lg' });
this.bsModalRef.content.event.subscribe((sent_successfully: boolean) => {
if (sent_successfully) {
const initialStateNotification = {
notificationModalTitle: 'Success',
notificationModalType: 'success',
notificationModalMessage: 'Mails were successfully sent',
};

this.modalService.show(NotificationModalComponent, { initialState: initialStateNotification });
} else {
const initialStateNotification = {
notificationModalTitle: 'Failed',
notificationModalType: 'danger',
notificationModalMessage: 'Failed to send mails!',
};
this.modalService.show(NotificationModalComponent, { initialState: initialStateNotification });
}
});
}

setFacilitySupportMails(supportMails: string): void {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ export class WithdrawModalComponent {
this.event.emit(true);
});
break;
default:
this.event.emit(false);
}
}

Expand Down
2 changes: 2 additions & 0 deletions src/app/projectmanagement/projectmanagement.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { ResultComponent } from './modals/result/result.component';
import { SharedModuleModule } from '../shared/shared_modules/shared-module.module';
import { AdjustLifetimeRequestComponent } from './modals/adjust-lifetime/adjust-lifetime-request.component';
import { AdjustApplicationComponent } from './modals/adjust-application/adjust-application.component';
import { WithdrawModalComponent } from './modals/withdraw/withdraw-modal.component';

/**
* Projectmanagment module.
Expand Down Expand Up @@ -59,6 +60,7 @@ import { AdjustApplicationComponent } from './modals/adjust-application/adjust-a
ExtensionEntryComponent,
AdjustLifetimeRequestComponent,
AdjustApplicationComponent,
WithdrawModalComponent,
],
exports: [ProjectOsDetailsComponent, ExtensionEntryComponent],
})
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<div class="modal-header">
<h4 class="modal-title" data-test-id="confirmation_modal_title">Sent Mail to specific projects</h4>
<button
type="button"
class="btn-close"
style="cursor: pointer"
(click)="bsModalRef.hide()"
aria-label="Close"
></button>
</div>

<div class="modal-body">
@if (!csvFile || csvMailTemplate?.errors?.length > 0) {
<div class="valid-example">
<p class="valid-example-heading">
<strong>Valid Example:</strong>
</p>
<pre class="valid-example-content">{{ validCSVExample }}</pre>
<div class="templates-container">
<p>The following template keys would be provided by this CSV file:</p>
<div class="templates-list">
<span>&#123;VM&#125;</span><br />
<span>&#123;LOCATION&#125;</span>
</div>
</div>
</div>
}
</div>

<div class="modal-body">
@if (csvMailTemplate?.errors?.length > 0) {
<div class="alert alert-danger">
<p><strong>Error!</strong> Unable to use the CSV file "{{ csvFile.name }}". The following errors occurred:</p>

<ul>
<li *ngFor="let err of csvMailTemplate?.errors">{{ err }}</li>
</ul>
</div>
}
@if (csvMailTemplate?.warnings?.length > 0) {
<div class="alert alert-warning">
<p>
<strong>Warning!</strong> The following issues were found in the CSV file, but sending emails is still possible:
</p>

<ul>
<li *ngFor="let war of csvMailTemplate?.warnings">{{ war }}</li>
</ul>
</div>
}

@if (csvMailTemplate?.valid_projects?.length > 0) {
<div class="templates-container">
<label class="col-md-12 control-label"><strong>Send Mail to:</strong></label>
<ul>
<li *ngFor="let pr of csvMailTemplate?.valid_projects">{{ pr.project_application_shortname }}</li>
</ul>
</div>
}

<form class="form-horizontal" id="email_form" #f="ngForm">
@if (csvMailTemplate) {
<div class="form-group row">
<div class="col-md-auto">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
name="emailAdminsOnly"
[(ngModel)]="emailAdminsOnly"
id="adminOnlyCheckbox"
[disabled]="csvMailTemplate?.errors?.length > 0"
/>
<label class="form-check-label" for="adminOnlyCheckbox"> Group administrators only </label>
</div>
</div>
</div>
<div
class="form-group row"
[ngClass]="{
'has-danger': emailSub.invalid && (emailSub.dirty || emailSub.touched),
'has-success': emailSub.valid && (emailSub.dirty || emailSub.touched)
}"
>
<label class="col-md-12 control-label"><strong>Email subject*</strong></label>
<div class="col-md-12">
<input
required
id="emailSubject"
name="emailSub"
placeholder="Subject"
class="form-control"
type="text"
[(ngModel)]="emailSubject"
[disabled]="csvMailTemplate?.errors?.length > 0"
minlength="1"
#emailSub="ngModel"
[ngClass]="{
'is-invalid': emailSub.invalid && (emailSub.dirty || emailSub.touched),
'is-valid': emailSub.valid && (emailSub.dirty || emailSub.touched)
}"
/>
</div>
</div>

<div class="form-group row">
<label class="col-md-12 control-label"><strong>Reply to (optional)</strong></label>
<div class="col-md-12">
<input
id="reply_to"
name="emailReply"
placeholder=""
class="form-control"
type="text"
[(ngModel)]="emailReply"
[disabled]="csvMailTemplate?.errors.length > 0"
#emailRep="ngModel"
pattern="([ ]*)(?!(^[.-].*|[^@]*[.-]@|.*\.{2,}.*)|^.{254}.)([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@)(?!-.*|.*-\.)([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,15}([ ]*)"
[ngClass]="{
'is-invalid': emailRep.invalid && (emailRep.dirty || emailRep.touched),
'is-valid': emailRep.valid && (emailRep.dirty || emailRep.touched)
}"
/>
</div>
</div>
<!-- Textarea -->
<div class="form-group row">
<label class="col-md-12 control-label"><strong>Email text*</strong></label>
<div class="col-md-12">
<textarea
minlength="1"
required
class="form-control"
id="emailText"
name="emailText"
[(ngModel)]="emailText"
[disabled]="csvMailTemplate?.errors?.length > 0"
type="text"
#emailT="ngModel"
[ngClass]="{
'is-invalid': emailT.invalid && (emailT.dirty || emailT.touched),
'is-valid': emailT.valid && (emailT.dirty || emailT.touched)
}"
></textarea>
</div>
</div>
}
</form>
@if (csvFile) {
<div class="templates-container">
<p>
The following keys were provided by the CSV file: <strong>{{ csvFile.name }}</strong>
</p>
<div class="templates-list">
<span *ngFor="let template of csvMailTemplate?.keys">{{ '{' + template + '}' }} </span>
</div>
</div>

<div class="templates-container">
<p>You can use the following keys as variables:</p>
<div class="templates-list">
<span *ngFor="let template of templates">{{ '{' + template + '}' }} </span>
</div>
</div>

<div class="alert alert-info">
Please consider: In case any dates are part of the sent E-Mails, they will be formatted in the german
<strong>TT.MM.YYYY</strong>-format.
</div>
}

<div class="modal-footer">
<input type="file" accept=".csv" style="display: none" #fileInput (change)="onCsvFileSelected($event)" />
<button type="button" class="btn btn-secondary col-md-4" (click)="fileInput.click()">Choose CSV File</button>
@if (csvMailTemplate && csvFile) {
<button
class="btn btn-success col-md-4"
[disabled]="f.invalid || csvMailTemplate?.errors?.length > 0"
data-test-id="confirm_confirmation_modal_btn"
(click)="sentProjectsTemplatedMail(); bsModalRef.hide()"
>
Send Mail
</button>
}
<button
class="btn btn-danger col-md-4"
type="reset"
data-test-id="close_confirmation_modal_btn"
(click)="bsModalRef.hide()"
>
Abort & Close
</button>
</div>
</div>
Loading

0 comments on commit 7912532

Please sign in to comment.