81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
|
|
import { FormControl } from '@angular/forms';
|
|
import { Subscription } from 'rxjs';
|
|
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
import { Task } from 'src/app/core/entity/task';
|
|
import { TaskListService } from 'src/app/core/service/task-list.service';
|
|
|
|
|
|
@Component({
|
|
selector: 'app-task-display',
|
|
templateUrl: './task-display.component.html',
|
|
styleUrls: ['./task-display.component.scss']
|
|
})
|
|
export class TaskDisplayComponent implements AfterViewInit, OnDestroy {
|
|
@Input() task?: Task;
|
|
@ViewChild('titleInput', {static: true}) titleInput?: ElementRef<HTMLInputElement>;
|
|
@ViewChild('descriptionInput', {static: true}) descriptionInput?: ElementRef<HTMLTextAreaElement>;
|
|
titleControl = new FormControl();
|
|
descriptionControl = new FormControl();
|
|
isExpanded = false;
|
|
private _subscriptions: Subscription[] = [];
|
|
|
|
constructor(
|
|
private _taskListService: TaskListService
|
|
) {}
|
|
|
|
ngAfterViewInit(): void {
|
|
this.titleControl.setValue(this?.task?.title);
|
|
this.descriptionControl.setValue(this?.task?.description);
|
|
|
|
const titleControlSubscription = this.titleControl.valueChanges
|
|
.pipe(
|
|
distinctUntilChanged(),
|
|
debounceTime(500)
|
|
)
|
|
.subscribe(newTitle => {
|
|
if (this.task) {
|
|
this.task.title = newTitle;
|
|
this._taskListService.updateTask(this.task);
|
|
}
|
|
});
|
|
this._subscriptions.push(titleControlSubscription);
|
|
|
|
const descriptionControlSubscription = this.descriptionControl.valueChanges
|
|
.pipe(
|
|
distinctUntilChanged(),
|
|
debounceTime(500)
|
|
)
|
|
.subscribe(description => {
|
|
if (this.task) {
|
|
this.task.description = description;
|
|
this._taskListService.updateTask(this.task);
|
|
}
|
|
});
|
|
this._subscriptions.push(descriptionControlSubscription);
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
this._subscriptions.forEach(subscription => subscription.unsubscribe());
|
|
}
|
|
|
|
expand(): void {
|
|
this.isExpanded = !this.isExpanded;
|
|
}
|
|
|
|
getExpendedClass(): string {
|
|
let result = 'body';
|
|
|
|
if (this.isExpanded) {
|
|
result += ' expanded';
|
|
}
|
|
return result;
|
|
}
|
|
|
|
delete(): void {
|
|
if (this.task) {
|
|
this._taskListService.delete(this.task);
|
|
}
|
|
}
|
|
}
|