diff --git a/contact-us/contact-us.component.html b/contact-us/contact-us.component.html index 4d09f21a..4ab42840 100644 --- a/contact-us/contact-us.component.html +++ b/contact-us/contact-us.component.html @@ -1,62 +1,69 @@

{{formTitle}}

- -
-
- +
+ -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
-
-
+
+
-
-
- - -
-
- -
+
+
+ + +
+
+ +
diff --git a/contact-us/contact-us.component.ts b/contact-us/contact-us.component.ts index ebbdc9b1..04e05047 100644 --- a/contact-us/contact-us.component.ts +++ b/contact-us/contact-us.component.ts @@ -1,8 +1,7 @@ -import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; import {FormGroup} from '@angular/forms'; import {EnvProperties} from "../utils/properties/env-properties"; -import {Observable} from "rxjs"; -import {map, startWith} from "rxjs/operators"; +import {properties} from "../../../environments/environment"; @Component({ selector: 'contact-us', @@ -10,18 +9,16 @@ import {map, startWith} from "rxjs/operators"; }) export class ContactUsComponent { - @Input() - public contactForm: FormGroup; - @Input() formTitle: string; - @Input() properties: EnvProperties; + @Input() public contactForm: FormGroup; + @Input() public formTitle: string; + @Input() public organizationTypes: string[]; + @Input() public buttonClass: string; + @Input() public alignButton: "left" | "right" | "center" = "left"; + @Input() public sendButton: string = "Send"; + @Input() public smallForm: boolean = false; + @Input() public sending: boolean = false; @Output() sendEmitter: EventEmitter = new EventEmitter(); - @Input() errorMessage; - @Input() - public organizationTypes: string[]; - @Input() - public right: boolean = true; - @Input() - public buttonClass: string; + public properties: EnvProperties = properties; public send() { this.sendEmitter.emit({ diff --git a/contact-us/contact-us.module.ts b/contact-us/contact-us.module.ts index 21def708..a365baa1 100644 --- a/contact-us/contact-us.module.ts +++ b/contact-us/contact-us.module.ts @@ -7,11 +7,12 @@ import {ReactiveFormsModule} from "@angular/forms"; import {MatAutocompleteModule} from "@angular/material/autocomplete"; import {RecaptchaModule} from "ng-recaptcha"; import {SafeHtmlPipeModule} from "../utils/pipes/safeHTMLPipe.module"; +import {LoadingModule} from "../utils/loading/loading.module"; @NgModule({ imports: [ CommonModule, RouterModule, - ReactiveFormsModule, MatAutocompleteModule, RecaptchaModule, SafeHtmlPipeModule], + ReactiveFormsModule, MatAutocompleteModule, RecaptchaModule, SafeHtmlPipeModule, LoadingModule], declarations: [ ContactUsComponent ], diff --git a/sharedComponents/quick-contact/quick-contact.component.css b/sharedComponents/quick-contact/quick-contact.component.css index 92bafd42..11492c4d 100644 --- a/sharedComponents/quick-contact/quick-contact.component.css +++ b/sharedComponents/quick-contact/quick-contact.component.css @@ -8,6 +8,10 @@ border-radius: 4px 4px 0 0; } +.uk-drop { + width: 380px; +} + .avatars > img { width: 50px; height: 50px; diff --git a/sharedComponents/quick-contact/quick-contact.component.html b/sharedComponents/quick-contact/quick-contact.component.html index c7690a09..7f133589 100644 --- a/sharedComponents/quick-contact/quick-contact.component.html +++ b/sharedComponents/quick-contact/quick-contact.component.html @@ -1,10 +1,10 @@
- - + + Contact -
+
Send a message @@ -23,24 +23,9 @@
- TODO: Contact form
- Name
- Email
- Organization
- Type
- Comments
- Send button
- TODO: Contact form
- Name
- Email
- Organization
- Type
- Comments
- Send button
- Organization
- Type
- Comments
- Send button
+ +
diff --git a/sharedComponents/quick-contact/quick-contact.component.ts b/sharedComponents/quick-contact/quick-contact.component.ts index 03a4aa06..490abd02 100644 --- a/sharedComponents/quick-contact/quick-contact.component.ts +++ b/sharedComponents/quick-contact/quick-contact.component.ts @@ -1,14 +1,55 @@ -import {Component, Input, OnDestroy, OnInit} from '@angular/core'; +import {Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild} from '@angular/core'; +import {FormGroup} from "@angular/forms"; +import {Subscriber} from "rxjs"; + +declare var UIkit; @Component({ - selector: 'quick-contact', - templateUrl: 'quick-contact.component.html', - styleUrls: ['quick-contact.component.css'] + selector: 'quick-contact', + templateUrl: 'quick-contact.component.html', + styleUrls: ['quick-contact.component.css'] }) -export class QuickContactComponent { - public showModal: boolean = false; - - public toggleModal() { - this.showModal = !this.showModal; - } -} \ No newline at end of file +export class QuickContactComponent implements OnInit, OnDestroy { + public showForm: boolean = false; + @Input() + public contactForm: FormGroup; + @Input() + public sending = false; + @Input() + public organizationTypes: string[] = []; + @Output() sendEmitter: EventEmitter = new EventEmitter(); + private subscriptions: any[] = []; + @ViewChild('drop') drop: ElementRef; + + ngOnInit() { + if (document !== undefined) { + this.subscriptions.push(UIkit.util.on(document, 'beforehide', '#quick-contact', (event) => { + if(this.sending) { + event.preventDefault(); + } + })); + } + } + + ngOnDestroy() { + this.subscriptions.forEach(value => { + if (value instanceof Subscriber) { + value.unsubscribe(); + } else if (value instanceof Function) { + value(); + } + }); + } + + public close() { + UIkit.drop(this.drop.nativeElement).hide(); + } + + public send(event) { + this.sendEmitter.emit(event); + } + + public toggleModal() { + this.showForm = !this.showForm; + } +} diff --git a/sharedComponents/quick-contact/quick-contact.module.ts b/sharedComponents/quick-contact/quick-contact.module.ts index 68392656..e793c4cd 100644 --- a/sharedComponents/quick-contact/quick-contact.module.ts +++ b/sharedComponents/quick-contact/quick-contact.module.ts @@ -4,10 +4,12 @@ import {FormsModule} from '@angular/forms'; import {QuickContactComponent} from './quick-contact.component'; import {IconsModule} from '../../utils/icons/icons.module'; +import {ContactUsModule} from "../../contact-us/contact-us.module"; +import {LoadingModule} from "../../utils/loading/loading.module"; @NgModule({ imports: [ - CommonModule, FormsModule, IconsModule + CommonModule, FormsModule, IconsModule, ContactUsModule, LoadingModule ], declarations: [ QuickContactComponent diff --git a/utils/email/composer.ts b/utils/email/composer.ts index 67f6b0cf..a80ba169 100644 --- a/utils/email/composer.ts +++ b/utils/email/composer.ts @@ -62,7 +62,7 @@ export class Composer { return email; } - public static composeEmailForMonitor(contactForm: any, admins: any): Email { + public static composeEmailForMonitor(contactForm: any, admins: string[]): Email { let email: Email = new Email(); email.subject = "OpenAIRE - Monitor"; diff --git a/utils/email/email.service.ts b/utils/email/email.service.ts index 92db0aed..2dab2857 100644 --- a/utils/email/email.service.ts +++ b/utils/email/email.service.ts @@ -7,7 +7,9 @@ import {Observable} from "rxjs"; import {EnvProperties} from "../properties/env-properties"; import {properties} from "../../../../environments/environment"; -@Injectable() +@Injectable({ + providedIn: 'root' +}) export class EmailService { constructor(private http:HttpClient) { diff --git a/utils/notification-handler.ts b/utils/notification-handler.ts new file mode 100644 index 00000000..ee9a175a --- /dev/null +++ b/utils/notification-handler.ts @@ -0,0 +1,18 @@ +declare var UIkit; + +export type Status = 'danger' | 'success' | 'warning'; +export type Position = 'bottom-right' | 'bottom-left' | 'bottom-center'; + +export class NotificationHandler { + private static DEFAULT_TIMEOUT: number = 60000; + private static DEFAULT_STATUS: Status = 'success'; + private static DEFAULT_POSITION: Position = 'bottom-right'; + + public static rise(message: string, status: Status = this.DEFAULT_STATUS, position: Position = this.DEFAULT_POSITION) { + UIkit.notification(message, { + status: status, + timeout: this.DEFAULT_TIMEOUT, + pos: position + }); + } +} diff --git a/utils/string-utils.class.ts b/utils/string-utils.class.ts index 97796017..e597a3a7 100644 --- a/utils/string-utils.class.ts +++ b/utils/string-utils.class.ts @@ -315,6 +315,15 @@ export class StringUtils { return Validators.pattern(StringUtils.urlRegex); } + public static validatorType(options: string[]): ValidatorFn { + return (control: AbstractControl): { [key: string]: boolean } | null => { + if (options.filter(type => type === control.value).length === 0) { + return {'type': false}; + } + return null; + } + } + public static validRoute(pages: any[], field: string, initial: string = null): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { if(control.value) {