purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Scrumboard) board settings added + some refinements.

Browse Source
This commit is contained in:
mustafahlvc 2017-08-30 14:21:14 +03:00
parent a0da9bd81e
commit 0bf158f8a5
17 changed files with 255 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
package.json
View File

@ -1,69 +1,70 @@
{ {
"name": "fuse2", "name": "fuse2",
"version": "1.0.2", "version": "1.0.2",
"license": "", "license": "",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve", "start": "ng serve",
"build": "ng build", "build": "ng build",
"test": "ng test", "test": "ng test",
"lint": "ng lint", "lint": "ng lint",
"e2e": "ng e2e" "e2e": "ng e2e"
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "4.3.6", "@angular/animations": "4.3.6",
"@angular/cdk": "2.0.0-beta.10", "@angular/cdk": "2.0.0-beta.10",
"@angular/common": "4.3.6", "@angular/common": "4.3.6",
"@angular/compiler": "4.3.6", "@angular/compiler": "4.3.6",
"@angular/core": "4.3.6", "@angular/core": "4.3.6",
"@angular/flex-layout": "2.0.0-beta.9", "@angular/flex-layout": "2.0.0-beta.9",
"@angular/forms": "4.3.6", "@angular/forms": "4.3.6",
"@angular/http": "4.3.6", "@angular/http": "4.3.6",
"@angular/material": "2.0.0-beta.10", "@angular/material": "2.0.0-beta.10",
"@angular/platform-browser": "4.3.6", "@angular/platform-browser": "4.3.6",
"@angular/platform-browser-dynamic": "4.3.6", "@angular/platform-browser-dynamic": "4.3.6",
"@angular/router": "4.3.6", "@angular/router": "4.3.6",
"@swimlane/ngx-charts": "6.0.2", "@swimlane/ngx-charts": "6.0.2",
"@swimlane/ngx-datatable": "9.3.1", "@swimlane/ngx-datatable": "9.3.1",
"@swimlane/ngx-dnd": "3.0.0", "@swimlane/ngx-dnd": "3.0.0",
"angular-calendar": "0.19.0", "angular-calendar": "0.19.0",
"angular-in-memory-web-api": "0.3.2", "angular-in-memory-web-api": "0.3.2",
"classlist.js": "1.1.20150312", "classlist.js": "1.1.20150312",
"core-js": "2.5.0", "core-js": "2.5.0",
"d3": "4.10.0", "d3": "4.10.0",
"hammerjs": "2.0.8", "hammerjs": "2.0.8",
"highlight.js": "9.12.0", "highlight.js": "9.12.0",
"intl": "1.2.5", "intl": "1.2.5",
"moment": "2.18.1", "md2": "0.0.28",
"ngx-color-picker": "4.3.1", "moment": "2.18.1",
"ngx-cookie-service": "1.0.7", "ngx-color-picker": "4.3.1",
"ngx-perfect-scrollbar": "4.5.6", "ngx-cookie-service": "1.0.7",
"rxjs": "5.4.3", "ngx-perfect-scrollbar": "4.5.6",
"web-animations-js": "2.3.1", "rxjs": "5.4.3",
"zone.js": "0.8.17" "web-animations-js": "2.3.1",
}, "zone.js": "0.8.17"
"devDependencies": { },
"@angular/cli": "^1.3.2", "devDependencies": {
"@angular/compiler-cli": "4.3.6", "@angular/cli": "^1.3.2",
"@angular/language-service": "4.3.6", "@angular/compiler-cli": "4.3.6",
"@ngtools/webpack": "^1.6.2", "@angular/language-service": "4.3.6",
"@types/jasmine": "^2.5.54", "@ngtools/webpack": "^1.6.2",
"@types/jasminewd2": "^2.0.2", "@types/jasmine": "^2.5.54",
"@types/node": "^6.0.88", "@types/jasminewd2": "^2.0.2",
"codelyzer": "~3.0.1", "@types/node": "^6.0.88",
"jasmine-core": "~2.6.2", "codelyzer": "~3.0.1",
"jasmine-spec-reporter": "~4.1.0", "jasmine-core": "~2.6.2",
"karma": "~1.7.0", "jasmine-spec-reporter": "~4.1.0",
"karma-chrome-launcher": "~2.1.1", "karma": "~1.7.0",
"karma-cli": "~1.0.1", "karma-chrome-launcher": "~2.1.1",
"karma-coverage-istanbul-reporter": "^1.2.1", "karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0", "karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine-html-reporter": "^0.2.2", "karma-jasmine": "~1.1.0",
"node-sass": "^4.5.3", "karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2", "node-sass": "^4.5.3",
"ts-node": "~3.0.4", "protractor": "~5.1.2",
"tslint": "~5.3.2", "ts-node": "~3.0.4",
"typescript": "~2.3.3" "tslint": "~5.3.2",
} "typescript": "~2.3.3"
}
} }

6
src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts
View File

@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core'; import { Component, EventEmitter, OnInit, Output, ViewChild} from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms'; import { FormBuilder, FormGroup } from '@angular/forms';
@Component({ @Component({
@ -11,7 +11,7 @@ export class FuseScrumboardBoardAddListComponent implements OnInit
formActive = false; formActive = false;
form: FormGroup; form: FormGroup;
@Output() onlistAdd = new EventEmitter(); @Output() onlistAdd = new EventEmitter();
@ViewChildren('nameInput') nameInputField; @ViewChild('nameInput') nameInputField;
constructor( constructor(
private formBuilder: FormBuilder private formBuilder: FormBuilder
@ -41,7 +41,7 @@ export class FuseScrumboardBoardAddListComponent implements OnInit
focusNameField() focusNameField()
{ {
setTimeout(() => { setTimeout(() => {
this.nameInputField.first.nativeElement.focus(); this.nameInputField.nativeElement.focus();
}); });
} }

4
src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
View File

@ -74,8 +74,8 @@
<form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()" <form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()"
fxLayout="column" fxLayoutAlign="start end"> fxLayout="column" fxLayoutAlign="start end">
<md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex #newCheckListTitleField> <md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex >
<input mdInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required> <input #newCheckListTitleField mdInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
</md-input-container> </md-input-container>
<button md-raised-button class="mat-accent" aria-label="Add Checklist" [disabled]="!newChecklistForm.valid">Add Checklist</button> <button md-raised-button class="mat-accent" aria-label="Add Checklist" [disabled]="!newChecklistForm.valid">Add Checklist</button>

2
src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts
View File

@ -213,7 +213,7 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy
onChecklistMenuOpen() onChecklistMenuOpen()
{ {
setTimeout(() => { setTimeout(() => {
this.newCheckListTitleField._mdInputChild.focus(); this.newCheckListTitleField.nativeElement.focus();
}); });
} }

6
src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts
View File

@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core'; import { Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms'; import { FormBuilder, FormGroup } from '@angular/forms';
@Component({ @Component({
@ -12,7 +12,7 @@ export class FuseScrumboardEditBoardNameComponent implements OnInit
form: FormGroup; form: FormGroup;
@Input() board; @Input() board;
@Output() onNameChanged = new EventEmitter(); @Output() onNameChanged = new EventEmitter();
@ViewChildren('nameInput') nameInputField; @ViewChild('nameInput') nameInputField;
constructor( constructor(
private formBuilder: FormBuilder private formBuilder: FormBuilder
@ -42,7 +42,7 @@ export class FuseScrumboardEditBoardNameComponent implements OnInit
focusNameField() focusNameField()
{ {
setTimeout(() => { setTimeout(() => {
this.nameInputField.first.nativeElement.focus(); this.nameInputField.nativeElement.focus();
}); });
} }

4
src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html
View File

@ -11,8 +11,8 @@
<form [formGroup]="form" (submit)="onFormSubmit()" class="add-card-form" fxLayout="column"> <form [formGroup]="form" (submit)="onFormSubmit()" class="add-card-form" fxLayout="column">
<md-input-container fxFlex floatPlaceholder="never" #nameInput> <md-input-container fxFlex floatPlaceholder="never" >
<input mdInput formControlName="name" placeholder="Card title" autocomplete="off" required> <input #nameInput mdInput formControlName="name" placeholder="Card title" autocomplete="off" required>
</md-input-container> </md-input-container>
<div class="pl-8" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pl-8" fxLayout="row" fxLayoutAlign="space-between center">

6
src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.ts
View File

@ -1,4 +1,4 @@
import { Component, ContentChildren, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core'; import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms'; import { FormBuilder, FormGroup } from '@angular/forms';
@Component({ @Component({
@ -11,7 +11,7 @@ export class FuseScrumboardBoardAddCardComponent implements OnInit
formActive = false; formActive = false;
form: FormGroup; form: FormGroup;
@Output() onCardAdd = new EventEmitter(); @Output() onCardAdd = new EventEmitter();
@ViewChildren('nameInput') nameInputField; @ViewChild('nameInput') nameInputField;
constructor( constructor(
private formBuilder: FormBuilder private formBuilder: FormBuilder
@ -40,7 +40,7 @@ export class FuseScrumboardBoardAddCardComponent implements OnInit
focusNameField() focusNameField()
{ {
setTimeout(() => { setTimeout(() => {
this.nameInputField.first._mdInputChild.focus(); this.nameInputField.nativeElement.focus();
}); });
} }

6
src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts
View File

@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core'; import { Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms'; import { FormBuilder, FormGroup } from '@angular/forms';
@Component({ @Component({
@ -12,7 +12,7 @@ export class FuseScrumboardBoardEditListNameComponent implements OnInit
form: FormGroup; form: FormGroup;
@Input() list; @Input() list;
@Output() onNameChanged = new EventEmitter(); @Output() onNameChanged = new EventEmitter();
@ViewChildren('nameInput') nameInputField; @ViewChild('nameInput') nameInputField;
constructor( constructor(
private formBuilder: FormBuilder private formBuilder: FormBuilder
@ -42,7 +42,7 @@ export class FuseScrumboardBoardEditListNameComponent implements OnInit
focusNameField() focusNameField()
{ {
setTimeout(() => { setTimeout(() => {
this.nameInputField.first.nativeElement.focus(); this.nameInputField.nativeElement.focus();
}); });
} }

1
src/app/main/content/apps/scrumboard/board/list/list.component.html
View File

@ -40,7 +40,6 @@
<div class="list-footer"> <div class="list-footer">
<fuse-scrumboard-board-add-card (onCardAdd)="onCardAdd($event)"> <fuse-scrumboard-board-add-card (onCardAdd)="onCardAdd($event)">
</fuse-scrumboard-board-add-card> </fuse-scrumboard-board-add-card>
<!--<ms-sb-add-card ms-list-id="list.id"></ms-sb-add-card>-->
</div> </div>
<!-- / NEW CARD BUTTON--> <!-- / NEW CARD BUTTON-->

18
src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html
View File

@ -1,3 +1,15 @@
<p> <md-list class="colors">
board-color-selector works! <!-- COLORS -->
</p> <md-list-item class="color m-8 mat-elevation-z1"
[ngClass]="'md-'+color.key+'-bg'"
*ngFor="let color of (colors | keys)"
(click)="setColor(color.key)"
md-ripple>
<p fxFlex>{{color.key}}</p>
<md-icon class="s-16" *ngIf="color.key === board.settings.color">check</md-icon>
<button md-icon-button *ngIf="color.key === board.settings.color" (click)="$event.stopPropagation();setColor('')">
<md-icon class="s-16">delete</md-icon>
</button>
</md-list-item>
<!-- / COLORS -->
</md-list>

10
src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.scss
View File

@ -0,0 +1,10 @@
:host {
.colors {
.color {
position: relative;
cursor: pointer;
}
}
}

44
src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts
View File

@ -1,15 +1,43 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnDestroy, OnInit } from '@angular/core';
import { MatColors } from '../../../../../../../../core/matColors';
import { ScrumboardService } from '../../../../scrumboard.service';
import { Subscription } from 'rxjs/Subscription';
@Component({ @Component({
selector: 'app-board-color-selector', selector : 'fuse-scrumboard-board-color-selector',
templateUrl: './board-color-selector.component.html', templateUrl: './board-color-selector.component.html',
styleUrls: ['./board-color-selector.component.scss'] styleUrls : ['./board-color-selector.component.scss']
}) })
export class BoardColorSelectorComponent implements OnInit { export class FuseScrumboardBoardColorSelectorComponent implements OnInit, OnDestroy
{
colors: any;
board: any;
onBoardChanged: Subscription;
constructor() { } constructor(
private scrumboardService: ScrumboardService
)
{
this.colors = MatColors.all;
}
ngOnInit() { ngOnInit()
} {
this.onBoardChanged =
this.scrumboardService.onBoardChanged
.subscribe(board => {
this.board = board;
});
}
setColor(color)
{
this.board.settings.color = color;
this.scrumboardService.updateBoard();
}
ngOnDestroy()
{
this.onBoardChanged.unsubscribe();
}
} }

104
src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html
View File

@ -1,52 +1,76 @@
<!-- SIDENAV HEADER --> <div [ngSwitch]="view" class="views" (click)="$event.stopPropagation()">
<div class="header p-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
<div>Settings</div>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT --> <div class="view" *ngSwitchCase="'main'" [@slideInLeft]>
<div class="content py-16" perfect-scrollbar>
<div class="nav"> <!-- SIDENAV HEADER -->
<div class="header md-accent-bg p-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
<div>Settings</div>
</div>
<!-- / SIDENAV HEADER -->
<div class="nav-item"> <!-- SIDENAV CONTENT -->
<div class="nav-link" md-ripple> <div class="content py-16" perfect-scrollbar>
<md-icon class="nav-link-icon">format_color_fill</md-icon>
<p class="title">Board Color</p> <div class="nav">
<div class="nav-item">
<div class="nav-link" md-ripple (click)="view = 'board-color'">
<md-icon class="nav-link-icon">format_color_fill</md-icon>
<p class="title">Board Color</p>
</div>
</div>
<div class="nav-item">
<div class="nav-link" md-ripple (click)="toggleCardCover()">
<md-icon class="nav-link-icon">photo</md-icon>
<p fxFlex class="title">Card Cover Images</p>
<md-icon *ngIf="board.settings.cardCoverImages" class="s-18">check</md-icon>
</div>
</div>
<div class="nav-item">
<div class="nav-link" md-ripple (click)="toggleSubcription()">
<md-icon class="nav-link-icon">remove_red_eye</md-icon>
<p fxFlex class="title">Subscribe</p>
<md-icon *ngIf="board.settings.subscribed" class="s-18">check</md-icon>
</div>
</div>
<div class="nav-item">
<div class="nav-link" md-ripple>
<md-icon class="nav-link-icon">content_copy</md-icon>
<p class="title">Copy Board</p>
</div>
</div>
<div class="nav-item">
<div class="nav-link" md-ripple>
<md-icon class="nav-link-icon">delete</md-icon>
<p class="title">Delete Board</p>
</div>
</div>
<md-divider></md-divider>
</div> </div>
</div> </div>
<!-- / SIDENAV CONTENT -->
</div>
<div class="nav-item"> <div class="view" *ngSwitchCase="'board-color'" [@slideInRight]>
<div class="nav-link" md-ripple (click)="toggleCardCover()">
<md-icon class="nav-link-icon">photo</md-icon> <!-- SIDENAV HEADER -->
<p fxFlex class="title">Card Cover Images</p> <div class="header md-accent-bg p-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="row" fxLayoutAlign="space-between center">
<md-icon *ngIf="board.settings.cardCoverImages" class="s-18">check</md-icon> <div>Background Color</div>
</div> <button md-icon-button (click)="view ='main'">
<md-icon class="s-16">arrow_back</md-icon>
</button>
</div> </div>
<!-- / SIDENAV HEADER -->
<div class="nav-item"> <!-- SIDENAV CONTENT -->
<div class="nav-link" md-ripple (click)="toggleSubcription()"> <div class="content p-8" perfect-scrollbar>
<md-icon class="nav-link-icon">remove_red_eye</md-icon> <fuse-scrumboard-board-color-selector></fuse-scrumboard-board-color-selector>
<p fxFlex class="title">Subscribe</p>
<md-icon *ngIf="board.settings.subscribed" class="s-18">check</md-icon>
</div>
</div> </div>
<!-- / SIDENAV CONTENT -->
<div class="nav-item">
<div class="nav-link" md-ripple>
<md-icon class="nav-link-icon">content_copy</md-icon>
<p class="title">Copy Board</p>
</div>
</div>
<div class="nav-item">
<div class="nav-link" md-ripple>
<md-icon class="nav-link-icon">delete</md-icon>
<p class="title">Delete Board</p>
</div>
</div>
<md-divider></md-divider>
</div> </div>
</div> </div>
<!-- / SIDENAV CONTENT -->

31
src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.scss
View File

@ -4,8 +4,33 @@
flex: 1 0 auto; flex: 1 0 auto;
height: 100%; height: 100%;
> .header { .views {
flex: 0 1 auto; display: flex;
border-bottom: 1px solid rgba(0, 0, 0, 0.12); flex-direction: column;
position: relative;
overflow: hidden;
height: 100%;
.view {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
right: 0;
top: 0;
display: flex;
flex-direction: column;
> .header {
flex: 0 1 auto;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
> .content {
flex: 1 1 auto;
overflow-y: auto;
}
}
} }
} }

21
src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts
View File

@ -1,15 +1,18 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { ScrumboardService } from '../../../scrumboard.service'; import { ScrumboardService } from '../../../scrumboard.service';
import { Animations } from '../../../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-scrumboard-board-settings', selector : 'fuse-scrumboard-board-settings',
templateUrl: './settings.component.html', templateUrl: './settings.component.html',
styleUrls : ['./settings.component.scss'] styleUrls : ['./settings.component.scss'],
animations : [Animations.slideInLeft, Animations.slideInRight]
}) })
export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit, OnDestroy
{ {
board: any; board: any;
view = 'main';
onBoardChanged: Subscription; onBoardChanged: Subscription;
constructor( constructor(
@ -31,19 +34,17 @@ export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit
toggleCardCover() toggleCardCover()
{ {
this.board.settings.cardCoverImages = !this.board.settings.cardCoverImages; this.board.settings.cardCoverImages = !this.board.settings.cardCoverImages;
this.updateBoard(); this.scrumboardService.updateBoard();
} }
toggleSubcription() toggleSubcription()
{ {
this.board.settings.subscribed = !this.board.settings.subscribed; this.board.settings.subscribed = !this.board.settings.subscribed;
this.updateBoard();
}
updateBoard()
{
this.scrumboardService.onBoardChanged.next(this.board);
this.scrumboardService.updateBoard(); this.scrumboardService.updateBoard();
} }
ngOnDestroy()
{
this.onBoardChanged.unsubscribe();
}
} }

4
src/app/main/content/apps/scrumboard/scrumboard.module.ts
View File

@ -13,6 +13,7 @@ import { FuseScrumboardCardDialogComponent } from './board/dialogs/card/card.com
import { FuseScrumboardLabelSelectorComponent } from './board/dialogs/card/label-selector/label-selector.component'; import { FuseScrumboardLabelSelectorComponent } from './board/dialogs/card/label-selector/label-selector.component';
import { FuseScrumboardEditBoardNameComponent } from './board/edit-board-name/edit-board-name.component'; import { FuseScrumboardEditBoardNameComponent } from './board/edit-board-name/edit-board-name.component';
import { FuseScrumboardBoardSettingsSidenavComponent } from './board/sidenavs/settings/settings.component'; import { FuseScrumboardBoardSettingsSidenavComponent } from './board/sidenavs/settings/settings.component';
import { FuseScrumboardBoardColorSelectorComponent } from './board/sidenavs/settings/board-color-selector/board-color-selector.component';
const routes: Routes = [ const routes: Routes = [
{ {
@ -47,7 +48,8 @@ const routes: Routes = [
FuseScrumboardCardDialogComponent, FuseScrumboardCardDialogComponent,
FuseScrumboardLabelSelectorComponent, FuseScrumboardLabelSelectorComponent,
FuseScrumboardEditBoardNameComponent, FuseScrumboardEditBoardNameComponent,
FuseScrumboardBoardSettingsSidenavComponent FuseScrumboardBoardSettingsSidenavComponent,
FuseScrumboardBoardColorSelectorComponent
], ],
imports : [ imports : [
SharedModule, SharedModule,

6
src/app/main/content/apps/todo/todo-details/todo-details.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnDestroy, OnInit, ViewChildren } from '@angular/core'; import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { TodoService } from '../todo.service'; import { TodoService } from '../todo.service';
import { Todo } from '../todo.model'; import { Todo } from '../todo.model';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
@ -16,7 +16,7 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
tags: any[]; tags: any[];
formType: string; formType: string;
todoForm: FormGroup; todoForm: FormGroup;
@ViewChildren('titleInput') titleInputField; @ViewChild('titleInput') titleInputField;
onFormChange: any; onFormChange: any;
onCurrentTodoChanged: Subscription; onCurrentTodoChanged: Subscription;
@ -77,7 +77,7 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
focusTitleField() focusTitleField()
{ {
setTimeout(() => { setTimeout(() => {
this.titleInputField.first.nativeElement.focus(); this.titleInputField.nativeElement.focus();
}); });
} }