-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* preparing floating sticky note logic * feat(floating-sticky-note): floating-sticky-note implemented Implementing a floating-sticky-note to add new notes
- Loading branch information
1 parent
4aad63d
commit 980b6fe
Showing
11 changed files
with
262 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core'; | ||
|
|
||
| @Directive({ | ||
| selector: '[clickOutside]' | ||
| }) | ||
| export class ClickOutsideDirective { | ||
| @Output() | ||
| public clickOutside = new EventEmitter<MouseEvent>(); | ||
|
|
||
| @HostListener('document:click', ['$event', '$event.target']) | ||
| public onClick(event: MouseEvent, targetElement: HTMLElement): void { | ||
| if (!targetElement) { | ||
| return; | ||
| } | ||
|
|
||
| const clickedInside = this._elementRef.nativeElement.contains(targetElement); | ||
|
|
||
| if (!clickedInside) { | ||
| this.clickOutside.emit(event); | ||
| } | ||
| } | ||
|
|
||
| constructor(private _elementRef: ElementRef) { } | ||
| } |
79 changes: 79 additions & 0 deletions
79
src/app/floating-sticky-note/floating-sticky-note.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import { Component, OnInit, ViewChild } from '@angular/core'; | ||
| import { FormBuilder, FormGroup, Validators } from '@angular/forms'; | ||
| import { FirebaseService, FirebaseObjectObservable } from '../../firebase'; | ||
| import { BoardService } from '../services/board.service'; | ||
| import { MdSnackBar } from '@angular/material'; | ||
|
|
||
| @Component ({ | ||
| selector: | ||
| 'app-floating-sticky-note', | ||
| templateUrl: './floating-sticky-note.html', | ||
| styleUrls: ['./floating-sticky-note.scss'], | ||
| }) | ||
| export class FloatingStickyNoteComponent implements OnInit { | ||
| @ViewChild('textArea') | ||
| public textArea; | ||
|
|
||
| public active: boolean; | ||
| public stickyForm: FormGroup; | ||
|
|
||
| private boardObj: FirebaseObjectObservable<any>; | ||
|
|
||
| constructor( | ||
| private fb: FormBuilder, | ||
| private fireBase: FirebaseService, | ||
| private boardService: BoardService, | ||
| private snackBar: MdSnackBar, | ||
| ) { | ||
| this.stickyForm = this.fb.group({ | ||
| chose: ['', Validators.required ], | ||
| newPost: ['', Validators.required ], | ||
| }); | ||
| } | ||
|
|
||
| ngOnInit() { | ||
| this.boardObj = this.fireBase.getBoardObject(this.boardService.currentBoard.uid); | ||
| } | ||
|
|
||
| focus(): void { | ||
| if (!!this.active) { | ||
| return; | ||
| } | ||
|
|
||
| setTimeout(() => { | ||
| this.textArea.nativeElement.focus(); | ||
| this.stickyForm.controls['newPost'].setValue(''); | ||
| }, 0); | ||
| } | ||
|
|
||
| public pushPost(): void { | ||
| const authorName = this.fireBase.userInfo.name; | ||
| const authorUID = this.fireBase.userInfo.uid; | ||
|
|
||
| if (this.stickyForm.invalid) { | ||
| this.snackBar.open(` | ||
| Please, make sure the feedback is not empty | ||
| and you have selected a column in where to push this message to.`, | ||
| null, { duration: 6000 }); | ||
|
|
||
| return; | ||
| } | ||
|
|
||
| this.boardObj.$ref.ref | ||
| .child('posts') | ||
| .push({ | ||
| val: this.stickyForm.controls['newPost'].value, | ||
| author: authorName, | ||
| authorUID: authorUID, | ||
| col: this.stickyForm.controls['chose'].value.pos, | ||
| }) | ||
| .then(() => this.active = false) | ||
| .catch(err => { | ||
| this.snackBar.open(` | ||
| Error. Only collaborators have the rights to write new feedbacks.`, | ||
| null, { duration: 6000 }); | ||
| }); | ||
|
|
||
| this.stickyForm.reset(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <div class="floating-sticky-note-overlay-container" | ||
| [class.active]="active"> | ||
|
|
||
| <md-card class="note unpinned-note mat-elevation-z10" | ||
| (click)="active = true" | ||
| (clickOutside)="active = false"> | ||
| <form class="form" | ||
| novalidate | ||
| [formGroup]="stickyForm" | ||
| (ngSubmit)="pushPost()"> | ||
|
|
||
| <md-card-content (click)="focus()"> | ||
| <div class="placeholder" | ||
| [hidden]="active"> | ||
| <span> | ||
| Write your feedback | ||
| </span> | ||
| </div> | ||
|
|
||
| <md-input-container class="full-width" | ||
| [hidden]="!active"> | ||
| <textarea mdInput | ||
| mdTextareaAutosize | ||
| #textArea | ||
| class="new-item" | ||
| formControlName="newPost" | ||
| placeholder="Write your feedback" | ||
| name="item"></textarea> | ||
| </md-input-container> | ||
|
|
||
| <md-radio-group class="radio-group" | ||
| [hidden]="!active" | ||
| formControlName="chose"> | ||
| <md-radio-button *ngFor="let column of (boardObj | async)?.cols" | ||
| [value]="column">{{ column.title }}</md-radio-button> | ||
| </md-radio-group> | ||
|
|
||
| </md-card-content> | ||
|
|
||
| <md-card-actions align="end" [hidden]="!active"> | ||
|
|
||
| <button md-button | ||
| type="submit" | ||
| name="new-item" | ||
| [disabled]="!stickyForm.valid" | ||
| class="pin-me-btn"> | ||
| Pin me | ||
| <img class="pin-icon" | ||
| src="../../assets/images/pushpin.png" | ||
| alt="Pin me"> | ||
| </button> | ||
| </md-card-actions> | ||
| </form> | ||
| </md-card> | ||
|
|
||
| </div> |
Oops, something went wrong.