Skip to content

[1078] refactor organization-contact to reactive-form #1081

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
stanislawK wants to merge 10 commits into
base: master
Choose a base branch
from
Open

[1078] refactor organization-contact to reactive-form #1081

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
760de24
add password confirmation in register
stanislawK Oct 3, 2018
424a6be
fix checkPasswords() return
stanislawK Oct 3, 2018
959a6fa
Merge branch 'master' of https://github.com/stanislawK/volontulo into…
stanislawK Oct 4, 2018
ecef9ac
organization contact form changed to reactive form
stanislawK Oct 5, 2018
e6a3df9
organization contact form changed to reactive form
stanislawK Oct 5, 2018
2100d30
organization contact form changed to reactive form
stanislawK Oct 5, 2018
f826c08
Merge branch 'master' of https://github.com/stanislawK/volontulo into…
stanislawK Oct 10, 2018
1159e84
Merge remote-tracking branch 'upstream/master' into 1078_refactoring_…
stanislawK Oct 13, 2018
854a432
organization contact form changed to reactive form
stanislawK Oct 13, 2018
951c2cd
organization contact form changed to reactive form
stanislawK Oct 31, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 28 additions & 77 deletions frontend/src/app/organization/organization-contact/organization-contact.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,91 +1,42 @@
<div class="container">
<h2>Formularz kontaktowy</h2>
<div *ngIf="!alertSuccessClosed">
<ngb-alert type="success" (close)="alertSuccessClosed = true">

<ngb-alert *ngIf="success === true" type="success" (close)="success = null">
Twoja wiadomość została wysłana. <strong>Dziękujemy!</strong>
</ngb-alert>
</div>
<div *ngIf="!alertErrorClosed">
<ngb-alert type="danger" (close)="alertErrorClosed = true">
<ngb-alert *ngIf="success === false" type="danger" (close)="success = null">
Przesłano niepoprawne dane.
</ngb-alert>
</div>
<form (ngSubmit)="onSubmit()" #contactForm="ngForm">

<form id="organization_contact_form" [formGroup]="fg">
<div class="form-group row">
<label for="id_name" class="col-md-2 col-form-label">Twoje imię i nazwisko</label>
<label for="name" class="col-md-2 col-form-label">Twoje imię i nazwisko</label>
<div class="col-md-4">
<input
type="text"
name="name"
class="form-control form-control-lg"
[ngClass]="{'is-invalid': name.invalid && name.touched}"
id="id_name"
[ngModel]="getFullName(user$ | async)"
required
minlength="2"
maxlength="150"
#name="ngModel" />
<div
class="invalid-feedback"
*ngIf="name.invalid && name.touched">Proszę podać imię i nazwisko</div>
<input type="text" class="form-control" id="name" placeholder="Imię i nazwisko" formControlName="name">
<volontulo-form-error [fc]="fg.controls.name" [minLength]="3" [maxLength]="30" [customError]="'Proszę podać imię i nazwisko'"></volontulo-form-error>
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label" for="id_email">Twój email</label>
<label class="col-md-2 col-form-label" for="email">Twój email</label>
<div class="col-md-4">
<input
type="email"
name="email"
class="form-control form-control-lg"
[ngClass]="{'is-invalid': email.invalid && email.touched}"
id="id_email"
[ngModel]="(user$ | async).email"
required
maxlength="150"
email
pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$"
#email="ngModel" />
<div
class="invalid-feedback"
*ngIf="email.invalid && email.touched">Proszę podać adres email w poprawnym formacie.</div>
<input type="text" class="form-control" id="email" placeholder="email" formControlName="email"/>
<volontulo-form-error [fc]="fg.controls.email"></volontulo-form-error>
</div>
<label class="col-md-2 col-form-label" for="id_phone_no">Telefon</label>
<label class="col-md-2 col-form-label" for="phone_no">Telefon</label>
<div class="col-md-4">
<input
type="tel"
name="phone_no"
class="form-control form-control-lg"
[ngClass]="{'is-invalid': phoneNo.invalid && phoneNo.touched}"
id="id_phone_no"
[ngModel]="(user$ | async).phoneNo"
required
minlength="9"
maxlength="15"
#phoneNo="ngModel"
[imask]="{mask: '+48 000-000-000'}"
[unmask]="true"/>
<div
class="invalid-feedback"
*ngIf="phoneNo.invalid && phoneNo.touched">Proszę podać numer telefonu.</div>
<input type="text" class="form-control" id="phone_no" placeholder="Numer telefonu"
formControlName="phone_no"
[imask]="{mask: '+48 000-000-000'}"
[unmask]="true"
(complete)="onComplete">
<volontulo-form-error [fc]="fg.controls.phone_no" [minLength]="9" [customError]="'Wprowadź poprawny numer np. +48 111-222-333'"></volontulo-form-error>
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label" for="id_message">Opis</label>
<label class="col-md-2 col-form-label" for="message">Opis</label>
<div class="col-md-10">
<textarea
name="message"
class="form-control"
[ngClass]="{'is-invalid': message.invalid && message.touched}"
rows="5"
id="id_message"
ngModel
required
minlength="2"
#message="ngModel">
</textarea>
<div
class="invalid-feedback"
*ngIf="message.invalid && message.touched">Wiadomość nie może być pusta.</div>
<textarea class="form-control" rows="5" id="message" formControlName="message"></textarea>
<volontulo-form-error [fc]="fg.controls.message" [minLength]="10" [maxLength]="2000"></volontulo-form-error>
</div>
</div>
<div class="form-group row d-none">
Expand All @@ -94,19 +45,19 @@ <h2>Formularz kontaktowy</h2>
<input
type="text"
id="id_honey"
ngModel
name="honeyBunny"
formControlName="honeyBunny"
class="form-control"
#honeyBunny="ngModel" />
/>
</div>
</div>
<div class="form-group row">
<div class="col-md-9 offset-md-3">
<button
type="submit"
name="submit"
class="btn btn-primary"
[disabled]="contactForm.invalid || submitDisabled">
[disabled]="fg.invalid || submitDisabled"
type="submit"
name="submit"
class="btn btn-primary"
(click)="onSubmit()">
Wyślij
</button>
</div>
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/app/organization/organization-contact/organization-contact.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ label {
font-weight: 700;
text-align: right;
}
button {
cursor: pointer;
}
@include media-breakpoint-down(sm) {
label {
text-align: left;
Expand Down
64 changes: 45 additions & 19 deletions frontend/src/app/organization/organization-contact/organization-contact.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,72 @@
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Component, OnInit, OnChanges, SimpleChanges, EventEmitter, Output, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { Observable } from 'rxjs/Observable';
import { filter, take } from 'rxjs/operators';

import { OrganizationContactPayload } from '../organization.model';
import { ContactStatus } from '../organization.interfaces';
import {AuthService} from '../../auth.service';
import {Observable} from 'rxjs/Observable';
import {User} from '../../user';
import {UserService} from '../../user.service';

import { AuthService } from '../../auth.service';
import { User } from '../../user';
import { UserService } from '../../user.service';

@Component({
selector: 'volontulo-organization-contact',
templateUrl: './organization-contact.component.html',
styleUrls: ['./organization-contact.component.scss']
})
export class OrganizationContactComponent implements OnChanges {
@ViewChild('contactForm') contactForm: NgForm;
@Output() contact = new EventEmitter<OrganizationContactPayload>();

export class OrganizationContactComponent implements OnInit, OnChanges {
@Input() contactStatus: ContactStatus;
@Output() contact = new EventEmitter<OrganizationContactPayload>();
submitDisabled = false;
alertSuccessClosed = true;
alertErrorClosed = true;
user$: Observable<User> = this.authService.user$;
getFullName = this.userService.getFullName;

constructor(private authService: AuthService, private userService: UserService) {
public fg: FormGroup = this.fb.group({
name: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(30)]],
email: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(30), Validators.email]],
phone_no: ['', [Validators.required, Validators.minLength(9), Validators.maxLength(9), Validators.pattern(/^[0-9]{9}$/)]],

@ghost ghost Oct 24, 2018

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This regex will fail for the given example. Please refactor checking phone number to a service or just accept anything here.

@stanislawK stanislawK Oct 31, 2018

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why would it fail? I made simple live example of this regex validation pattern there: https://stackblitz.com/edit/angular-xhr4qe and it seems to work fine. According to imask docs https://www.npmjs.com/package/angular-imask, unmasked value should be exactly nine digits, like in this regex.

@ghost ghost Oct 31, 2018

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about phone number which includes the plus sign, no-exactly 9 digits, spaces and so on?
try: +48 111-222-333

message: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(2000)]],
honeyBunny: ['']
});
public success: null | boolean = null;


constructor(
private fb: FormBuilder,
private authService: AuthService,
private userService: UserService
) { }

ngOnInit() {
this.user$
.pipe(
filter(user => user !== null),
take(1),
)
.subscribe(user => {
this.fg.controls.name.setValue(this.getFullName(user));
this.fg.controls.email.setValue(user.email);
this.fg.controls.phone_no.setValue(user.phoneNo);
});
}

ngOnChanges(changes: SimpleChanges) {
if (changes.contactStatus.currentValue && changes.contactStatus.currentValue.status === 'success') {
this.alertSuccessClosed = false;
this.contactForm.reset();
this.success = true;
this.fg.controls.message.reset();
} else if (changes.contactStatus.currentValue && changes.contactStatus.currentValue.status === 'error') {
this.alertErrorClosed = false;
this.success = false;
}
this.submitDisabled = false;
}

onSubmit() {
if (!this.contactForm.value.honeyBunny) {
this.contact.emit(this.contactForm.value as OrganizationContactPayload);
if (this.fg.valid && !this.fg.value.honeyBunny) {
this.submitDisabled = true;
delete this.fg.value.honeyBunny;
this.contact.emit(this.fg.value as OrganizationContactPayload);

@ghost ghost Oct 24, 2018

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this.contact event emitter for?

@stanislawK stanislawK Oct 31, 2018

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't change component structure, and how it handles sending value from contact form. If I understood it correctly, form is send not from child component directly, but from parent component:
organization.component.ts:

  onContact(organizationContact: OrganizationContactPayload) {
    this.organization$.pipe(take(1))
      .subscribe(org => this.organizationService.sendContactForm(org, organizationContact));
  }

organization.component.html:
<volontulo-organization-contact *ngIf="!(isUserOrgMember$ | async)" (contact)="onContact($event)" [contactStatus]="contactStatus$ | async"> </volontulo-organization-contact>

@ghost ghost Oct 31, 2018 •
edited by ghost
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry - I didn't notice it was moved not added 👍

}
}
}
}