seeseemelk/allowance_planner_2000
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

add funcionality to edit allowance
Some checks failed
Backend Build and Test / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Huffle
2025-05-26 09:48:00 +02:00
parent 550933db11
commit 2678280400
6 changed files with 56 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html
View File

@@ -2,30 +2,38 @@
<ion-toolbar>
<div class="toolbar">
<ion-title *ngIf="isAddMode">Create Goal</ion-title>
<ion-title *ngIf="!isAddMode">Edit Goal</ion-title>
<ion-title *ngIf="!isAddMode && goalId != 0">Edit Goal</ion-title>
<ion-title *ngIf="!isAddMode && goalId == 0">Edit Allowance</ion-title>
</div>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<form [formGroup]="form">
<label>Goal Name</label>
<input id="name" type="text" formControlName="name"/>
<div class="item" *ngIf="isAddMode || goalId != 0">
<label>Goal Name</label>
<input id="name" type="text" formControlName="name"/>
</div>
<label>Target</label>
<input id="target" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="target"/>
<div class="item" *ngIf="isAddMode || goalId != 0">
<label>Target</label>
<input id="target" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="target"/>
</div>
<label>Weight</label>
<input id="weight" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="weight"/>
<label>Colour</label>
<select formControlName="color">
<option *ngFor="let color of possibleColors" [value]="color" [style.--background]="color">{{color}}</option>
</select>
<div class="item" *ngIf="isAddMode || goalId != 0">
<label>Colour</label>
<select formControlName="color">
<option *ngFor="let color of possibleColors" [value]="color" [style.--background]="color">{{color}}</option>
</select>
</div>
<button type="button" [disabled]="!form.valid" (click)="submit()">
<span *ngIf="isAddMode">Add Goal</span>
<span *ngIf="!isAddMode">Update Goal</span>
<span *ngIf="!isAddMode && goalId != 0">Update Goal</span>
<span *ngIf="!isAddMode && goalId == 0">Update Allowance</span>
</button>
</form>
</ion-content>

6
frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss
View File

@@ -3,10 +3,14 @@
}
form {
height: 100%;
}
form,
.item {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
label {

23
frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts
View File

@@ -34,7 +34,7 @@ export class EditAllowancePage implements OnInit {
private router: Router
) {
this.userId = this.route.snapshot.params['id'];
this.goalId = this.route.snapshot.params['goalId'];
this.goalId = +this.route.snapshot.params['goalId'];
this.isAddMode = !this.goalId;
this.allowanceService.getAllowanceList(this.userId).subscribe((list) => {
@@ -55,6 +55,25 @@ export class EditAllowancePage implements OnInit {
}
ngOnInit() {
if (!this.isAddMode) {
this.allowanceService.getAllowanceById(this.goalId, this.userId).subscribe((allowance) => {
if (this.goalId === 0) {
this.form.setValue({
name: 'Main Allowance',
target: 0,
weight: allowance.weight,
color: '#9C4BE4'
});
} else {
this.form.setValue({
name: allowance.name,
target: allowance.target,
weight: allowance.weight,
color: allowance.colour
});
}
});
}
}
submit() {
@@ -68,6 +87,8 @@ export class EditAllowancePage implements OnInit {
if (this.isAddMode) {
this.allowanceService.createAllowance(allowance, this.userId);
} else {
this.allowanceService.updateAllowance(allowance, this.goalId, this.userId);
}
this.router.navigate(['/tabs/allowance', this.userId]);