This is the content of my db.json document
{
"tasks": [
{
"id": 1,
"text": "Doctors Appointment",
"day": "May 5th at 2:30pm",
"reminder": true
},
{
"id": 2,
"text": "Meeting at School",
"day": "May 6th at 10:30pm",
"reminder": true
},
{
"id": 3,
"text": "Food Shopping",
"day": "May 7th at 12:30pm",
"reminder": false
},
{
"id": 4,
"text": "Jogging",
"day": "May 8th at 4:30pm",
"reminder": true
},
{
"text": "Test Task",
"day": "May 9th at 11:30pm",
"reminder": false,
"id": 5
}
]
}
The following section displays information related to tasks.component.html
<app-add-task (on_add_task)="add_task($event)"></app-add-task>
<div cdkDropList (cdkDropListDropped)="drop_task($event)">
<app-task-item *ngFor="let task of tasks" [task]="task" (on_delete_task)="delete_task(task)" (on_toggle_reminder)="toggle_reminder(task)" cdkDrag></app-task-item>
</div>
Subsequently, we have tasks.components.ts
import { Component, OnInit } from '@angular/core';
import { TaskService } from "../../services/task.service";
import { Task } from "../../Task";
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
@Component({
selector: 'app-tasks',
templateUrl: './tasks.component.html',
styleUrls: ['./tasks.component.css']
})
export class TasksComponent implements OnInit {
tasks: Task[] = []
name: any;
constructor(private task_service: TaskService) { }
ngOnInit(): void {
this.task_service.get_tasks().subscribe((tasks) => (this.tasks = tasks));
}
delete_task(task: Task) {
this.task_service.delete_task(task).subscribe(() => (this.tasks = this.tasks.filter(t => t.id !== task.id)));
}
toggle_reminder(task: Task) {
task.reminder = !task.reminder;
this.task_service.update_task_reminder(task).subscribe()
}
add_task(task: Task) {
this.task_service.add_task(task).subscribe((task) => (this.tasks.push(task)));
}
drop_task(event: CdkDragDrop<string[]>) {
moveItemInArray(this.tasks, event.previousIndex, event.currentIndex);
// this.name = this.tasks[event.currentIndex];
// console.log(this.name.text);
console.log(this.tasks)
}
}
The next script pertains to task.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from "rxjs";
import { Task } from "../Task";
const http_options = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
}
@Injectable({
providedIn: 'root'
})
export class TaskService {
private api_url = 'http://localhost:5000/tasks'
constructor(private http:HttpClient) { }
get_tasks(): Observable<Task[]> {
return this.http.get<Task[]>(this.api_url)
}
delete_task(task: Task): Observable<Task> {
const url = `${this.api_url}/${task.id}`;
return this.http.delete<Task>(url);
}
update_task_reminder(task: Task): Observable<Task> {
const url = `${this.api_url}/${task.id}`;
return this.http.put<Task>(url, task, http_options);
}
add_task(task: Task): Observable<Task> {
return this.http.post<Task>(this.api_url, task, http_options)
}
}
Last up is task-item.component.html
<div [ngClass]="{ reminder: task.reminder}" class="task" (dblclick)="on_toggle(task)">
<h3>{{ task.text }} <fa-icon (click)="on_delete(task)" [ngStyle]="{color:'red'}" [icon]="faTimes"></fa-icon></h3>
<p>{{task.day}}</p>
</div>
And finally, we have task-item.component.ts
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Task } from "../../Task";
import { faTimes } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-task-item',
templateUrl: './task-item.component.html',
styleUrls: ['./task-item.component.css']
})
export class TaskItemComponent implements OnInit {
@Input() task!: Task;
@Output() on_delete_task: EventEmitter<Task> = new EventEmitter();
@Output() on_toggle_reminder: EventEmitter<Task> = new EventEmitter();
faTimes = faTimes;
constructor() { }
ngOnInit(): void {
}
on_delete(task: any){
this.on_delete_task.emit(task);
}
on_toggle(task: any){
this.on_toggle_reminder.emit(task);
}
}
While everything functions smoothly with the Angular CDK drag-drop feature allowing me to rearrange tasks, I am interested in permanently saving this new order to the db.json file. Is it possible to update the entire db.json with the newly shuffled sequence?