I have a small task board like trello with tasks to be done, doing and done. All the tasks are stored on 3 separate arrays in one service called TaskService
. To show the task and change task state I have implemented angular’s cdk
drag n drop.
My goal now is to subscribe to the the task arrays so when the array changes send the changes to an api. For now I’m just trying to console.log
the events but I’m not understanding what’s happening it seemly to work but I can’t get the arrays updates.
This is my component controller:
doing: any[];
constructor(private taskService: TaskService) {}
ngOnInit(): void {
this.getTodoTasks();
// this.getDoingTasks();
this.getDoneTasks();
const obs$ = this.taskService.getDoing();
obs$.subscribe({
next: (data: any[]) => {
this.doing = data;
console.log(data);
},
});
}
todo: any[];
// doing: Subscriber<any[]>;
done: any[];
newTaskText: string = '';
isModalShown: boolean = false;
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer == event.container) {
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex
);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
}
}
newTask() {
console.log(`Click Modal!`);
this.isModalShown
? (this.isModalShown = false)
: (this.isModalShown = true);
}
getTodoTasks() {
this.taskService.getTodos().subscribe((data) => {
this.todo = data;
console.log(`Se ha aƱadido Tak a : Todo`);
});
}
This is my view:
<app-modal *ngIf="isModalShown" (close)="newTask()">
<div class="modalContent">
<textarea
name=""
id=""
cols="30"
rows="10"
class="newTask"
[(ngModel)]="newTaskText"
></textarea>
<div class="modalButtons">
<input
type="button"
value="Cancel"
class="btn btn-secondary"
(click)="cancelTask()"
/>
<input type="button" value="Save" class="btn btn-primary" (click)="saveTask()" />
</div>
</div>
</app-modal>
<div class="container">
<div class="list">
<h2>TO DO</h2>
<input type="button" value="Modal" (click)="newTask()" />
<div
class="tasks"
cdkDropList
#todoList="cdkDropList"
[cdkDropListData]="todo"
[cdkDropListConnectedTo]="[doingList, doneList]"
(cdkDropListDropped)="drop($event)"
>
<div class="task" *ngFor="let item of todo" cdkDrag>{{ item }}</div>
</div>
</div>
<div
class="list"
cdkDropList
#doingList="cdkDropList"
[cdkDropListData]="doing"
[cdkDropListConnectedTo]="[doneList, todoList]"
(cdkDropListDropped)="drop($event)"
>
<h2>DOING</h2>
<div class="tasks">
<div class="task" *ngFor="let item of doing" cdkDrag>{{ item }}</div>
</div>
</div>
<div
class="list"
cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="done"
[cdkDropListConnectedTo]="[doingList, todoList]"
(cdkDropListDropped)="drop($event)"
>
<h2>DONE</h2>
<div class="tasks">
<div class="task" *ngFor="let item of done" cdkDrag>{{ item }}</div>
</div>
</div>
</div>
And my service:
constructor() {}
todo = ['task 1', 'task 2', 'task 3'];
doing = [];
done = [];
getTodos(): Observable<any[]> {
return of(this.todo);
}
getDoing(): Observable<any[]> {
return new Observable((subscriber) => {
subscriber.next();
})
}
getDone(): Observable<any[]> {
return of(this.done);
}