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

(Todo app) ongoing..

Browse Source
This commit is contained in:
mustafahlvc 2017-07-28 17:40:11 +03:00
parent 1f8b1a3f27
commit 0339874110
13 changed files with 147 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/core/fuseUtils.ts
View File

@ -84,4 +84,14 @@ export class FuseUtils
}
return false;
}
public static genearateGUID()
{
function S4()
{
return (((1 + Math.random()) * 0x10000) || 0).toString(16).substring(1);
}
return (S4() + S4());
}
}

4
src/app/main/apps/calendar/event-form/event-form.component.html
View File

@ -115,7 +115,7 @@
md-raised-button
(click)="dialogRef.close(eventForm)"
class="save-button mat-accent"
[disabled]="eventForm.pristine"
[disabled]="eventForm.invalid"
aria-label="SAVE">
SAVE
</button>
@ -124,7 +124,7 @@
md-raised-button
(click)="dialogRef.close(['save',eventForm])"
class="save-button mat-accent"
[disabled]="eventForm.pristine"
[disabled]="eventForm.invalid"
aria-label="SAVE">
SAVE
</button>

17
src/app/main/apps/chat/chat.service.ts
View File

@ -4,6 +4,7 @@ import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { FuseUtils } from '../../../core/fuseUtils';
@Injectable()
export class ChatService implements Resolve<any>
@ -80,7 +81,7 @@ export class ChatService implements Resolve<any>
return item.id === contactId;
});
const chatId = this.guidGenerator();
const chatId = FuseUtils.genearateGUID();
const chat = {
id : chatId,
@ -243,18 +244,4 @@ export class ChatService implements Resolve<any>
}, reject);
});
}
/**
* Random ID Generator
* @returns {string}
*/
guidGenerator()
{
function S4()
{
return (((1 + Math.random()) * 0x10000) || 0).toString(16).substring(1);
}
return (S4() + S4());
}
}

9
src/app/main/apps/todo/sidenavs/main/main-sidenav.component.html
View File

@ -22,6 +22,15 @@
<!-- SIDENAV CONTENT -->
<div class="content" perfect-scrollbar>
<div class="p-24" fxFlexAlign="row" fxLayoutAlign="center center">
<button md-raised-button
class="mat-accent add-todo-button"
(click)="newTodo()"
aria-label="ADD TASK">
ADD TASK
</button>
</div>
<div class="nav">
<div class="nav-item">

4
src/app/main/apps/todo/sidenavs/main/main-sidenav.component.scss
View File

@ -26,5 +26,9 @@
.content {
padding: 0 !important;
.add-todo-button {
width: 100%;
}
}
}

12
src/app/main/apps/todo/sidenavs/main/main-sidenav.component.ts
View File

@ -1,6 +1,7 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { TodoService } from '../../todo.service';
import { Subscription } from 'rxjs/Subscription';
import { Router } from '@angular/router';
@Component({
selector : 'fuse-todo-main-sidenav',
@ -18,7 +19,7 @@ export class MainSidenavComponent implements OnInit, OnDestroy
onFiltersChanged: Subscription;
onTagsChanged: Subscription;
constructor(private todoService: TodoService)
constructor(private todoService: TodoService, private router: Router)
{
// Data
this.accounts = {
@ -49,4 +50,13 @@ export class MainSidenavComponent implements OnInit, OnDestroy
this.onFiltersChanged.unsubscribe();
this.onTagsChanged.unsubscribe();
}
newTodo()
{
this.router.navigate(['/apps/todo/all']).then(() => {
setTimeout(() => {
this.todoService.onNewTodoClicked.next('');
});
});
}
}

11
src/app/main/apps/todo/todo-details/todo-details.component.html
View File

@ -46,14 +46,16 @@
<div class="todo-content">
<form [formGroup]="todoForm">
<form [formGroup]="todoForm" (submit)="addTodo()">
<md-input-container class="title mt-8" floatPlaceholder="never" fxFill>
<textarea mdInput
#titleInput
name="title"
formControlName="title"
placeholder="Title"
mdTextareaAutosize>
mdTextareaAutosize
required>
</textarea>
</md-input-container>
@ -96,6 +98,11 @@
mdAutosizeMinRows="6">
</textarea>
</md-input-container>
<button *ngIf="formType === 'new'"
md-raised-button class="mat-accent"
[disabled]="todoForm.invalid">SAVE
</button>
</form>
</div>

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

@ -1,8 +1,9 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { AfterViewInit, Component, OnDestroy, OnInit, ViewChildren } from '@angular/core';
import { TodoService } from '../todo.service';
import { Todo } from '../todo.model';
import { Subscription } from 'rxjs/Subscription';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { FuseUtils } from '../../../../core/fuseUtils';
@Component({
selector : 'fuse-todo-details',
@ -13,17 +14,19 @@ export class TodoDetailsComponent implements OnInit, OnDestroy
{
todo: Todo;
tags: any[];
formType: string;
todoForm: FormGroup;
@ViewChildren('titleInput') titleInputField;
onFormChange: any;
onCurrentTodoChanged: Subscription;
onTagsChanged: Subscription;
onNewTodoClicked: Subscription;
constructor(private todoService: TodoService,
private formBuilder: FormBuilder)
{
}
ngOnInit()
@ -31,12 +34,16 @@ export class TodoDetailsComponent implements OnInit, OnDestroy
// Subscribe to update the current todo
this.onCurrentTodoChanged =
this.todoService.onCurrentTodoChanged
.subscribe(currentTodo => {
this.todo = currentTodo;
.subscribe(todo => {
this.formType = 'edit';
this.todo = todo;
if ( this.todo )
{
this.todoForm = this.createTodoForm();
this.onFormChange = this.todoForm.valueChanges
.debounceTime(500)
.distinctUntilChanged()
@ -52,6 +59,23 @@ export class TodoDetailsComponent implements OnInit, OnDestroy
.subscribe(labels => {
this.tags = labels;
});
// Subscribe to update on tag change
this.onNewTodoClicked = this.todoService.onNewTodoClicked
.subscribe(() => {
this.todo = new Todo({});
this.todo.id = FuseUtils.genearateGUID();
this.formType = 'new';
this.todoForm = this.createTodoForm();
this.focusTitleField();
});
}
focusTitleField()
{
setTimeout(() => {
this.titleInputField.first.nativeElement.focus();
});
}
createTodoForm()
@ -120,12 +144,20 @@ export class TodoDetailsComponent implements OnInit, OnDestroy
this.todoService.toggleTagOnTodo(tagId, this.todo);
}
addTodo()
{
this.todoService.updateTodo(this.todoForm.getRawValue());
}
ngOnDestroy()
{
if ( this.onFormChange )
{
this.onFormChange.unsubscribe();
}
this.onCurrentTodoChanged.unsubscribe();
this.onNewTodoClicked.unsubscribe();
}
}

6
src/app/main/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss
View File

@ -24,6 +24,12 @@
user-select: none;
}
&.move-disabled {
.handle {
display: none;
}
}
.tags {
font-size: 12px;

10
src/app/main/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts
View File

@ -2,6 +2,7 @@ import { Component, HostBinding, Input, OnDestroy, OnInit, ViewEncapsulation } f
import { Todo } from '../../todo.model';
import { TodoService } from '../../todo.service';
import { Subscription } from 'rxjs/Subscription';
import { ActivatedRoute, ActivatedRouteSnapshot, Route, Router } from '@angular/router';
@Component({
selector : 'fuse-todo-list-item',
@ -15,12 +16,19 @@ export class TodoListItemComponent implements OnInit, OnDestroy
tags: any[];
@HostBinding('class.selected') selected: boolean;
@HostBinding('class.completed') completed: boolean;
@HostBinding('class.move-disabled') moveDisabled: boolean;
onSelectedTodosChanged: Subscription;
onTagsChanged: Subscription;
constructor(private todoService: TodoService)
constructor(private todoService: TodoService,
private route: ActivatedRoute)
{
// Disable move if path is not /all
if ( route.snapshot.url[0].path !== 'all' )
{
this.moveDisabled = true;
}
}
ngOnInit()

2
src/app/main/apps/todo/todo-list/todo-list.component.html
View File

@ -1,7 +1,7 @@
<div *ngIf="todos.length === 0" fxLayout="column" fxLayoutAlign="center center" fxFlex>
<span class="hint-text mat-h3">There are no todos!</span>
</div>
<div class="todo-list" ngxDroppable [model]="todos" (out)="log($event)">
<div class="todo-list" ngxDroppable [model]="todos" (out)="onDrop($event)">
<fuse-todo-list-item class="todo-list-item has-handle"
*ngFor="let todo of todos" [todo]="todo"
ngxDraggable

21
src/app/main/apps/todo/todo-list/todo-list.component.ts
View File

@ -74,29 +74,12 @@ export class TodoListComponent implements OnInit, OnDestroy
*/
readTodo(todoId)
{
const tagHandle = this.route.snapshot.params.tagHandle,
filterHandle = this.route.snapshot.params.filterHandle;
if ( tagHandle )
{
this.location.go('apps/todo/tag/' + tagHandle + '/' + todoId);
}
else if ( filterHandle )
{
this.location.go('apps/todo/filter/' + filterHandle + '/' + todoId);
}
else
{
this.location.go('apps/todo/all/' + todoId);
}
// Set current todo
this.todoService.setCurrentTodo(todoId);
}
log(ev)
onDrop(ev)
{
console.info(this.todos);
console.info(ev);
this.todoService.updateTodos(this.todos);
}
}

52
src/app/main/apps/todo/todo.service.ts
View File

@ -4,8 +4,9 @@ import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import { Todo } from './todo.model';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Subscription } from 'rxjs/Subscription';
import { FuseUtils } from '../../../core/fuseUtils';
import { Subject } from 'rxjs/Subject';
import { Location } from '@angular/common';
@Injectable()
export class TodoService implements Resolve<any>
@ -26,8 +27,10 @@ export class TodoService implements Resolve<any>
onFiltersChanged: BehaviorSubject<any> = new BehaviorSubject([]);
onTagsChanged: BehaviorSubject<any> = new BehaviorSubject([]);
onSearchTextChanged: BehaviorSubject<any> = new BehaviorSubject('');
onNewTodoClicked: Subject<any> = new Subject();
constructor(private http: Http)
constructor(private http: Http,
private location: Location)
{
this.selectedTodos = [];
}
@ -317,6 +320,23 @@ export class TodoService implements Resolve<any>
});
this.onCurrentTodoChanged.next(this.currentTodo);
const tagHandle = this.routeParams.tagHandle,
filterHandle = this.routeParams.filterHandle;
if ( tagHandle )
{
this.location.go('apps/todo/tag/' + tagHandle + '/' + id);
}
else if ( filterHandle )
{
this.location.go('apps/todo/filter/' + filterHandle + '/' + id);
}
else
{
this.location.go('apps/todo/all/' + id);
}
}
/**
@ -360,10 +380,7 @@ export class TodoService implements Resolve<any>
this.getTodos().then(todos => {
if ( todos && this.currentTodo )
{
this.setCurrentTodo(this.currentTodo.id);
}
this.setCurrentTodo(todo.id);
resolve(todos);
@ -371,4 +388,27 @@ export class TodoService implements Resolve<any>
});
});
}
/**
* Update the todo
* @param todo
* @returns {Promise<any>}
*/
updateTodos(todos)
{
/* return new Promise((resolve, reject) => {
this.http.post('api/todo-todos/', {...todos})
.subscribe(response => {
this.getTodos().then(_todos => {
console.log(response);
resolve(_todos);
}, reject);
});
});*/
}
}