From a675d517181fd28b9c90bc05d2288b00d33d23d8 Mon Sep 17 00:00:00 2001 From: Huffle Date: Sun, 18 May 2025 08:52:20 +0200 Subject: [PATCH 1/4] AP-45 wip post request --- .../src/app/pages/tasks/tasks.page.html | 1 + .../src/app/pages/tasks/tasks.page.ts | 3 +++ .../src/app/services/task.service.ts | 12 +++++++++++- 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html index 5521342..988a00a 100644 --- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html +++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html @@ -20,4 +20,5 @@ >{{ task.reward.toFixed(2) }} SP + diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts index acec48c..37ed163 100644 --- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts +++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts @@ -21,4 +21,7 @@ export class TasksPage implements OnInit { }); } + createTask() { + this.taskService.createTask({ name: 'Created task', reward: 10, assigned: 1 }); + } } diff --git a/frontend/allowance-planner-v2/src/app/services/task.service.ts b/frontend/allowance-planner-v2/src/app/services/task.service.ts index 5d4890c..959d0b5 100644 --- a/frontend/allowance-planner-v2/src/app/services/task.service.ts +++ b/frontend/allowance-planner-v2/src/app/services/task.service.ts @@ -7,10 +7,20 @@ import { Task } from '../models/task'; providedIn: 'root' }) export class TaskService { - private url = 'http://localhost:8080/api' + private url = 'http://localhost:8080/api'; + private headers = { + "access-control-allow-origin": "*", + 'Access-Control-Allow-Headers': 'Content-Type, Authorization', + 'Access-Control-Allow-Methods': '*', + }; + constructor(private http: HttpClient) {} getTaskList(): Observable> { return this.http.get(`${this.url}/tasks`); } + + createTask(task: Partial) { + this.http.post(`${this.url}/tasks`, task, { headers: this.headers }).subscribe(t => console.log('TEST: ', t)); + } } \ No newline at end of file From 505faa95a3f5e2b7cd4e502bb5214d8168329be0 Mon Sep 17 00:00:00 2001 From: Sebastiaan de Schaetzen Date: Sun, 18 May 2025 08:54:22 +0200 Subject: [PATCH 2/4] Add different cors config --- backend/main.go | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/backend/main.go b/backend/main.go index 8e1f510..d504686 100644 --- a/backend/main.go +++ b/backend/main.go @@ -506,9 +506,11 @@ func start(ctx context.Context, config *ServerConfig) { defer db.db.MustClose() router := gin.Default() - router.Use(cors.New(cors.Config{ - AllowOrigins: []string{"*"}, - })) + + corsConfig := cors.DefaultConfig() + corsConfig.AllowAllOrigins = true + router.Use(cors.New(corsConfig)) + router.GET("/api/users", getUsers) router.GET("/api/user/:userId", getUser) router.POST("/api/user/:userId/history", postHistory) From f72cc8a8023e7555cfaa59233187ecf3871219d1 Mon Sep 17 00:00:00 2001 From: Huffle Date: Sun, 18 May 2025 10:48:52 +0200 Subject: [PATCH 3/4] test --- README.md | 9 +++- .../src/app/app-routing.module.ts | 1 + .../src/app/app.module.ts | 4 +- .../edit-task/edit-task-routing.module.ts | 17 +++++++ .../app/pages/edit-task/edit-task.module.ts | 21 +++++++++ .../app/pages/edit-task/edit-task.page.html | 21 +++++++++ .../app/pages/edit-task/edit-task.page.scss | 0 .../pages/edit-task/edit-task.page.spec.ts | 17 +++++++ .../src/app/pages/edit-task/edit-task.page.ts | 46 +++++++++++++++++++ .../src/app/pages/tabs/tabs-routing.module.ts | 2 +- .../app/pages/tasks/tasks-routing.module.ts | 4 ++ .../src/app/pages/tasks/tasks.page.ts | 11 ++++- .../src/app/services/task.service.ts | 11 ++--- 13 files changed, 153 insertions(+), 11 deletions(-) create mode 100644 frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task-routing.module.ts create mode 100644 frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.module.ts create mode 100644 frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html create mode 100644 frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.scss create mode 100644 frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.spec.ts create mode 100644 frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts diff --git a/README.md b/README.md index 4638ab0..9760ed8 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,15 @@ An improved Allowance Planner app. ## Running backend -In order to run the backend, go to the `backend directory and run: +In order to run the backend, go to the `backend` directory and run: ```bash $ go run . ``` + +## Running frontend +In order to run the frontend, go to the `allowance-planner-v2` directory in the `frontend` directory and run: + +```bash +$ ionic serve +``` diff --git a/frontend/allowance-planner-v2/src/app/app-routing.module.ts b/frontend/allowance-planner-v2/src/app/app-routing.module.ts index ffe16e8..2750f02 100644 --- a/frontend/allowance-planner-v2/src/app/app-routing.module.ts +++ b/frontend/allowance-planner-v2/src/app/app-routing.module.ts @@ -11,6 +11,7 @@ const routes: Routes = [ path: '', loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule) }, + ]; @NgModule({ imports: [ diff --git a/frontend/allowance-planner-v2/src/app/app.module.ts b/frontend/allowance-planner-v2/src/app/app.module.ts index a6c06b7..64e58db 100644 --- a/frontend/allowance-planner-v2/src/app/app.module.ts +++ b/frontend/allowance-planner-v2/src/app/app.module.ts @@ -3,11 +3,12 @@ import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; -import { Drivers, Storage } from '@ionic/storage'; +import { Drivers } from '@ionic/storage'; import { IonicStorageModule } from '@ionic/storage-angular'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [AppComponent], @@ -15,6 +16,7 @@ import { AppComponent } from './app.component'; BrowserModule, IonicModule.forRoot(), AppRoutingModule, + ReactiveFormsModule, IonicStorageModule.forRoot({ name: '__mydb', driverOrder: [Drivers.IndexedDB, Drivers.LocalStorage] diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task-routing.module.ts new file mode 100644 index 0000000..cd1cb56 --- /dev/null +++ b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { EditTaskPage } from './edit-task.page'; + +const routes: Routes = [ + { + path: '', + component: EditTaskPage, + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class EditTaskPageRoutingModule {} diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.module.ts b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.module.ts new file mode 100644 index 0000000..6e427b8 --- /dev/null +++ b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { EditTaskPageRoutingModule } from './edit-task-routing.module'; + +import { EditTaskPage } from './edit-task.page'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + EditTaskPageRoutingModule, + ReactiveFormsModule + ], + declarations: [EditTaskPage] +}) +export class EditTaskPageModule {} diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html new file mode 100644 index 0000000..012da72 --- /dev/null +++ b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html @@ -0,0 +1,21 @@ + + + Create Task + Edit Task + + + + +
+ + + + + + + +
+ diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.scss b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.scss new file mode 100644 index 0000000..e69de29 diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.spec.ts b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.spec.ts new file mode 100644 index 0000000..5887782 --- /dev/null +++ b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.spec.ts @@ -0,0 +1,17 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { EditTaskPage } from './edit-task.page'; + +describe('EditTaskPage', () => { + let component: EditTaskPage; + let fixture: ComponentFixture; + + beforeEach(() => { + fixture = TestBed.createComponent(EditTaskPage); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts new file mode 100644 index 0000000..3f464a6 --- /dev/null +++ b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts @@ -0,0 +1,46 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { ActivatedRoute } from '@angular/router'; +import { TaskService } from 'src/app/services/task.service'; + +@Component({ + selector: 'app-edit-task', + templateUrl: './edit-task.page.html', + styleUrls: ['./edit-task.page.scss'], + standalone: false, +}) +export class EditTaskPage implements OnInit { + form: FormGroup; + id: number; + isAddMode: boolean; + + constructor( + private route: ActivatedRoute, + private formBuilder: FormBuilder, + private taskService: TaskService, + ) { + console.log('Test?') + this.id = this.route.snapshot.params['id']; + this.isAddMode = !this.id; + + this.form = this.formBuilder.group({ + name: ['', Validators.required], + reward: ['', Validators.required], + assigned: ['', Validators.required] + }); + } + + ngOnInit() { + console.log('Test?') + if (!this.isAddMode) { + this.taskService.getTaskById(this.id).subscribe(task => { + this.form.setValue({ + name: task.name, + reward: task.reward, + assigned: task.assigned + }) + }); + } + } + +} diff --git a/frontend/allowance-planner-v2/src/app/pages/tabs/tabs-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs-routing.module.ts index 52d6683..60ba0ae 100644 --- a/frontend/allowance-planner-v2/src/app/pages/tabs/tabs-routing.module.ts +++ b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs-routing.module.ts @@ -17,7 +17,7 @@ const routes: Routes = [ }, { path: 'tasks', - loadChildren: () => import('../tasks/tasks.module').then(m => m.TasksPageModule) + loadChildren: () => import('../tasks/tasks.module').then(m => m.TasksPageModule), }, { path: '', diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks-routing.module.ts index a3945ac..df12f3a 100644 --- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks-routing.module.ts +++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks-routing.module.ts @@ -6,6 +6,10 @@ const routes: Routes = [ { path: '', component: TasksPage, + children: [ + { path: 'add', loadChildren: () => import('../edit-task/edit-task.module').then(m => m.EditTaskPageModule) }, + { path: 'edit/:id', loadChildren: () => import('../edit-task/edit-task.module').then(m => m.EditTaskPageModule) } + ] } ]; diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts index 37ed163..488e280 100644 --- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts +++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { TaskService } from 'src/app/services/task.service'; import { Task } from 'src/app/models/task'; +import { ActivatedRoute, Router } from '@angular/router'; @Component({ selector: 'app-tasks', @@ -12,16 +13,22 @@ export class TasksPage implements OnInit { public tasks: Array = []; constructor( - private taskService: TaskService + private taskService: TaskService, + private router: Router, + private route: ActivatedRoute ) {} ngOnInit(): void { + this.getTasks(); + } + + getTasks() { this.taskService.getTaskList().subscribe(tasks => { this.tasks = tasks; }); } createTask() { - this.taskService.createTask({ name: 'Created task', reward: 10, assigned: 1 }); + this.router.navigate(['edit', 1], { relativeTo: this.route }); } } diff --git a/frontend/allowance-planner-v2/src/app/services/task.service.ts b/frontend/allowance-planner-v2/src/app/services/task.service.ts index 959d0b5..ed1179b 100644 --- a/frontend/allowance-planner-v2/src/app/services/task.service.ts +++ b/frontend/allowance-planner-v2/src/app/services/task.service.ts @@ -8,11 +8,6 @@ import { Task } from '../models/task'; }) export class TaskService { private url = 'http://localhost:8080/api'; - private headers = { - "access-control-allow-origin": "*", - 'Access-Control-Allow-Headers': 'Content-Type, Authorization', - 'Access-Control-Allow-Methods': '*', - }; constructor(private http: HttpClient) {} @@ -20,7 +15,11 @@ export class TaskService { return this.http.get(`${this.url}/tasks`); } + getTaskById(taskId: number): Observable { + return this.http.get(`${this.url}/task/${taskId}`); + } + createTask(task: Partial) { - this.http.post(`${this.url}/tasks`, task, { headers: this.headers }).subscribe(t => console.log('TEST: ', t)); + this.http.post(`${this.url}/tasks`, task).subscribe(); } } \ No newline at end of file From 61694e340fdf0043c03459d99dbad90bfbeddb00 Mon Sep 17 00:00:00 2001 From: Huffle Date: Sun, 18 May 2025 16:15:34 +0200 Subject: [PATCH 4/4] Add functionalty to add task --- .../src/app/models/task.ts | 2 +- .../app/pages/edit-task/edit-task.page.html | 9 ++++- .../app/pages/edit-task/edit-task.page.scss | 34 +++++++++++++++++ .../src/app/pages/edit-task/edit-task.page.ts | 37 ++++++++++++++++--- .../app/pages/tasks/tasks-routing.module.ts | 8 ++-- .../src/app/pages/tasks/tasks.page.html | 34 +++++++++-------- .../src/app/pages/tasks/tasks.page.scss | 16 ++++++++ .../src/app/pages/tasks/tasks.page.ts | 19 ++++++---- 8 files changed, 124 insertions(+), 35 deletions(-) diff --git a/frontend/allowance-planner-v2/src/app/models/task.ts b/frontend/allowance-planner-v2/src/app/models/task.ts index c2a3ca4..377a5d8 100644 --- a/frontend/allowance-planner-v2/src/app/models/task.ts +++ b/frontend/allowance-planner-v2/src/app/models/task.ts @@ -2,5 +2,5 @@ export interface Task { id: number; name: string; reward: number; - assigned: number; + assigned: number | null; } \ No newline at end of file diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html index 012da72..8e046da 100644 --- a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html +++ b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html @@ -1,7 +1,7 @@ Create Task - Edit Task + Edit Task @@ -13,7 +13,12 @@ - diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.scss b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.scss index e69de29..e58999e 100644 --- a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.scss +++ b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.scss @@ -0,0 +1,34 @@ +form { + display: flex; + flex-direction: column; + align-items: center; + height: 100%; +} + +label { + color: var(--ion-color-primary); + margin-top: 25px; + margin-bottom: 10px; +} + +input, +select { + border: 1px solid var(--ion-color-primary); + border-radius: 5px; + width: 250px; +} + +button { + background-color: var(--ion-color-primary); + border-radius: 5px; + color: white; + padding: 10px; + width: 250px; + margin-top: auto; + margin-bottom: 50px; +} + +button:disabled, +button[disabled]{ + opacity: 0.5; +} \ No newline at end of file diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts index 3f464a6..65c78ce 100644 --- a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts +++ b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts @@ -1,7 +1,10 @@ +import { Location } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { ActivatedRoute } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; +import { User } from 'src/app/models/user'; import { TaskService } from 'src/app/services/task.service'; +import { UserService } from 'src/app/services/user.service'; @Component({ selector: 'app-edit-task', @@ -13,25 +16,30 @@ export class EditTaskPage implements OnInit { form: FormGroup; id: number; isAddMode: boolean; + users: Array = [{id: 0, name: 'unassigned'}]; constructor( private route: ActivatedRoute, private formBuilder: FormBuilder, private taskService: TaskService, + private userService: UserService, + private router: Router ) { - console.log('Test?') this.id = this.route.snapshot.params['id']; this.isAddMode = !this.id; this.form = this.formBuilder.group({ name: ['', Validators.required], - reward: ['', Validators.required], - assigned: ['', Validators.required] + reward: ['', [Validators.required, Validators.pattern("^[0-9]*$")]], + assigned: [0, Validators.required] }); } ngOnInit() { - console.log('Test?') + this.userService.getUserList().subscribe(users => { + this.users.push(...users); + }); + if (!this.isAddMode) { this.taskService.getTaskById(this.id).subscribe(task => { this.form.setValue({ @@ -43,4 +51,23 @@ export class EditTaskPage implements OnInit { } } + submit() { + const formValue = this.form.value; + let assigned: number | null = Number(formValue.assigned); + if (assigned === 0) { + assigned = null; + } + + const task = { + name: formValue.name, + reward: formValue.reward, + assigned + } + + if (this.isAddMode) { + this.taskService.createTask(task); + } else {} + + this.router.navigate(['/tabs/tasks']); + } } diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks-routing.module.ts index df12f3a..6ade771 100644 --- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks-routing.module.ts +++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks-routing.module.ts @@ -6,11 +6,9 @@ const routes: Routes = [ { path: '', component: TasksPage, - children: [ - { path: 'add', loadChildren: () => import('../edit-task/edit-task.module').then(m => m.EditTaskPageModule) }, - { path: 'edit/:id', loadChildren: () => import('../edit-task/edit-task.module').then(m => m.EditTaskPageModule) } - ] - } + }, + { path: 'add', loadChildren: () => import('../edit-task/edit-task.module').then(m => m.EditTaskPageModule) }, + { path: 'edit/:id', loadChildren: () => import('../edit-task/edit-task.module').then(m => m.EditTaskPageModule) } ]; @NgModule({ diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html index 988a00a..7507d9b 100644 --- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html +++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html @@ -1,24 +1,28 @@ - - Tasks - +
+ + Tasks + + +
-
- filter_alt -
-
-
- -
{{ task.name }}
-
{{ task.reward.toFixed(2) }} SP
+
+
+ filter_alt +
+
+
+ +
{{ task.name }}
+
{{ task.reward.toFixed(2) }} SP
+
- diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss index aa15767..999a793 100644 --- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss +++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss @@ -1,3 +1,13 @@ +.toolbar { + display: flex; +} + +.content { + display: flex; + flex-direction: column; + height: 100%; +} + .icon { padding: 5px; display: flex; @@ -44,4 +54,10 @@ button { border-radius: 10px; color: white; background: var(--confirm-button-color); +} + +.add-button { + background-color: var(--ion-color-primary); + margin-right: 15px; + width: 75px; } \ No newline at end of file diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts index 488e280..f5970db 100644 --- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts +++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts @@ -1,34 +1,39 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TaskService } from 'src/app/services/task.service'; import { Task } from 'src/app/models/task'; import { ActivatedRoute, Router } from '@angular/router'; +import { BehaviorSubject } from 'rxjs'; +import { ViewWillEnter } from '@ionic/angular'; @Component({ selector: 'app-tasks', templateUrl: 'tasks.page.html', styleUrls: ['tasks.page.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, }) -export class TasksPage implements OnInit { - public tasks: Array = []; +export class TasksPage implements ViewWillEnter { + public tasks$: BehaviorSubject> = new BehaviorSubject>([]); constructor( private taskService: TaskService, private router: Router, private route: ActivatedRoute - ) {} + ) { + this.getTasks(); + } - ngOnInit(): void { + ionViewWillEnter(): void { this.getTasks(); } getTasks() { this.taskService.getTaskList().subscribe(tasks => { - this.tasks = tasks; + this.tasks$.next(tasks); }); } createTask() { - this.router.navigate(['edit', 1], { relativeTo: this.route }); + this.router.navigate(['add'], { relativeTo: this.route }); } }