From 61694e340fdf0043c03459d99dbad90bfbeddb00 Mon Sep 17 00:00:00 2001 From: Huffle Date: Sun, 18 May 2025 16:15:34 +0200 Subject: [PATCH] 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 }); } }