Skip to content

Commit

Permalink
feat(board-page.component): Invite collaborators button
Browse files Browse the repository at this point in the history
Display a loading spinner while waiting for a server response from the invite collaborators form

closes #1
  • Loading branch information
andreasonny83 committed May 20, 2017
1 parent 18a6ed5 commit 0f65f98
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 19 deletions.
2 changes: 2 additions & 0 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
MdSnackBarModule,
MdListModule,
MdIconModule,
MdProgressSpinnerModule,
} from '@angular/material';

import { AppComponent } from './app.component';
Expand Down Expand Up @@ -54,6 +55,7 @@ import { Keyobject } from './pipes';
MdSnackBarModule,
MdListModule,
MdIconModule,
MdProgressSpinnerModule,
// App Modules
HeaderModule,
AppRoutingModule,
Expand Down
10 changes: 8 additions & 2 deletions src/app/board-page/board-page.component.css
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,8 @@ md-list-item.color-1 {
}
.cards-column-title {
display: flex;
flex-direction: row;
align-items: center;
font-size: 40px;
justify-content: center;
font-family: WhateverItTakes, helvetica;
}

Expand Down Expand Up @@ -124,6 +123,13 @@ md-list-item.color-1 {
margin-right: -20px;
}

.loading-spinner {
width: 26px;
height: 26px;
margin-left: 4px;
display: inline-block;
}

@media only screen
and (min-device-width: 768px)
and (-webkit-min-device-pixel-ratio: 1) {
Expand Down
31 changes: 21 additions & 10 deletions src/app/board-page/board-page.component.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<div class="block-xxl">
<h3 class="board-name">{{board?.name}}</h3>
<h3 class="board-name">{{ boardName }}</h3>

<div class="item-list-container notes-board">
<div class="item-list notes-column"
*ngFor="let column of columns | async">
<div class="cards-column-title">
<span>{{column.title}}</span>
<md-icon>{{cardEmoticon(column.title)}}</md-icon>
<span>{{ column.title }}</span>
<md-icon>{{ cardEmoticon(column.title) }}</md-icon>
</div>

<md-card [style.background]="column.color"
Expand All @@ -29,16 +29,19 @@ <h3 class="board-name">{{board?.name}}</h3>
<textarea mdInput
#newItem
placeholder="Write your feedback"
mdTextareaAutosize></textarea>
mdTextareaAutosize>
</textarea>
</md-input-container>

<button md-button
type="submit"
name="new-item"
class="pin-me-btn">
<span class="pin-me-text"> Pin me</span>
<!-- <svg src="../../assets/images/pushpin.svg"></svg> -->
<img class="pin-icon" src="../../assets/images/pushpin.png" alt="">
<span class="pin-me-text">Pin me</span>

<img class="pin-icon"
src="../../assets/images/pushpin.png"
alt="Pin me">
</button>
</form>
</md-card>
Expand All @@ -48,7 +51,9 @@ <h3 class="board-name">{{board?.name}}</h3>

<div class="item-list-container">
<md-card>
<md-card-title>Invite more collaborators to this board:</md-card-title>
<md-card-title>
Invite more collaborators to this board:
</md-card-title>

<md-card-content>
<form [formGroup]="collaboratorsForm"
Expand All @@ -67,8 +72,14 @@ <h3 class="board-name">{{board?.name}}</h3>
<button md-raised-button
type="submit"
name="new-board"
[disabled]="!collaboratorsForm.valid"
color="accent">Invite</button>
[disabled]="!collaboratorsForm.valid || sendingInvite"
color="accent">
<span>Invite</span>
<md-spinner color="primary"
strokeWidth="8"
*ngIf="sendingInvite"
class="loading-spinner"></md-spinner>
</button>
</md-card-actions>
</form>
</md-card-content>
Expand Down
18 changes: 11 additions & 7 deletions src/app/board-page/board-page.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,10 @@ export class BoardPageComponent implements OnInit {
boardID: string;
boardName: string;
board: FirebaseListObservable<any[]>;
boardObj: FirebaseObjectObservable<any>;
columns: FirebaseListObservable<any[]>;
collaboratorsForm: FormGroup;
sendingInvite: boolean;

constructor(
private fireBase: FirebaseService,
Expand All @@ -44,16 +46,14 @@ export class BoardPageComponent implements OnInit {

ngOnInit() {
this.route.params
.switchMap((params: Params) => {
this.boardID = params['id'];
return this.fireBase.getBoardObject(this.boardID);
})
.subscribe((res: IBoardObj) => {
.subscribe((res: {id: string}) => {
this.boardID = res.id;
this.board = this.fireBase.getBoard(this.boardID);
this.columns = this.fireBase.getBoard(`${this.boardID}/columns`);
this.boardObj = this.fireBase.getBoardObject(this.boardID);
});

this.fireBase.getBoardObject(this.boardID)
this.boardObj
.subscribe((res: IBoardObj) => {
this.boardName = res.name;
});
Expand Down Expand Up @@ -125,6 +125,8 @@ export class BoardPageComponent implements OnInit {
html: html,
};

self.sendingInvite = true;

const headers = new Headers({ 'Content-Type': 'application/json' }); // Set content type to JSON
const options = new RequestOptions({ headers: headers }); // Create a request option

Expand All @@ -142,7 +144,7 @@ export class BoardPageComponent implements OnInit {
);

self.collaboratorsForm.reset();

self.sendingInvite = false;
self.snackBar.open('Your message has been correctly delivered.', null, { duration: 6000 });
} else {
self.errorHandler();
Expand All @@ -163,6 +165,8 @@ export class BoardPageComponent implements OnInit {
}

errorHandler(): Observable<any> {
this.sendingInvite = false;

this.snackBar.open(`Is not possible to send the email at the moment.
Please, try again later or contact the support.`,
null, { duration: 6000 });
Expand Down

0 comments on commit 0f65f98

Please sign in to comment.