New Angular based web version #1
@@ -19,6 +19,7 @@ import { SelectModule } from 'primeng/select';
|
|||||||
import { SkeletonModule } from 'primeng/skeleton';
|
import { SkeletonModule } from 'primeng/skeleton';
|
||||||
import { catchError, combineLatest, EMPTY, filter, map, Observable, switchMap, tap, throwError } from 'rxjs';
|
import { catchError, combineLatest, EMPTY, filter, map, Observable, switchMap, tap, throwError } from 'rxjs';
|
||||||
import { RequiredMarkerComponent } from './components/required-marker.component';
|
import { RequiredMarkerComponent } from './components/required-marker.component';
|
||||||
|
import { SelectedCarService } from '../services/selected-car.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-edit-entry',
|
selector: 'app-edit-entry',
|
||||||
@@ -46,6 +47,7 @@ export class EditEntryComponent implements OnInit {
|
|||||||
private readonly routingService = inject(RoutingService);
|
private readonly routingService = inject(RoutingService);
|
||||||
private readonly destroyRef = inject(DestroyRef);
|
private readonly destroyRef = inject(DestroyRef);
|
||||||
private readonly messageService = inject(MessageService);
|
private readonly messageService = inject(MessageService);
|
||||||
|
private readonly selectedCarService = inject(SelectedCarService);
|
||||||
|
|
||||||
protected readonly id = input<string | undefined>(undefined);
|
protected readonly id = input<string | undefined>(undefined);
|
||||||
|
|
||||||
@@ -79,13 +81,38 @@ export class EditEntryComponent implements OnInit {
|
|||||||
.getAll()
|
.getAll()
|
||||||
.pipe(
|
.pipe(
|
||||||
takeUntilDestroyed(),
|
takeUntilDestroyed(),
|
||||||
map(response => response.cars)
|
map(response => response.cars),
|
||||||
|
tap(cars => {
|
||||||
|
const selectedCarId = this.selectedCarService.getSelectedCarId();
|
||||||
|
|
||||||
|
if (selectedCarId === null) {
|
||||||
|
const firstCar = cars[0];
|
||||||
|
this.formGroup.controls[this.formFieldNames.car].setValue(firstCar);
|
||||||
|
this.selectedCarService.setSelectedCarId(firstCar?.id ?? null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedCar = cars.find(car => car.id === selectedCarId);
|
||||||
|
this.formGroup.controls[this.formFieldNames.car].setValue(selectedCar ?? null);
|
||||||
|
this.selectedCarService.setSelectedCarId(selectedCar?.id ?? null);
|
||||||
|
}),
|
||||||
);
|
);
|
||||||
this.cars = toSignal(this.cars$);
|
this.cars = toSignal(this.cars$);
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.loadEntryDetailsAndEnableControls();
|
this.loadEntryDetailsAndEnableControls();
|
||||||
|
|
||||||
|
this.formGroup.controls[this.formFieldNames.car]
|
||||||
|
.valueChanges
|
||||||
|
.pipe(
|
||||||
|
takeUntilDestroyed(this.destroyRef),
|
||||||
|
tap((car) => {
|
||||||
|
console.log('Selected car changed (edit entry):', car);
|
||||||
|
this.selectedCarService.setSelectedCarId(car?.id ?? null);
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.subscribe();
|
||||||
}
|
}
|
||||||
|
|
||||||
private loadEntryDetailsAndEnableControls() {
|
private loadEntryDetailsAndEnableControls() {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { AsyncPipe, CommonModule } from '@angular/common';
|
import { AsyncPipe, CommonModule } from '@angular/common';
|
||||||
import { Component, inject } from '@angular/core';
|
import { Component, DestroyRef, inject, OnInit } from '@angular/core';
|
||||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||||
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
||||||
import { RouterLink } from '@angular/router';
|
import { RouterLink } from '@angular/router';
|
||||||
@@ -17,6 +17,7 @@ import {
|
|||||||
map,
|
map,
|
||||||
Observable,
|
Observable,
|
||||||
startWith,
|
startWith,
|
||||||
|
tap,
|
||||||
throwError
|
throwError
|
||||||
} from 'rxjs';
|
} from 'rxjs';
|
||||||
import { EntriesOverviewService } from './services/entries-overview.service';
|
import { EntriesOverviewService } from './services/entries-overview.service';
|
||||||
@@ -26,6 +27,7 @@ import {
|
|||||||
} from '@ng-icons/material-icons/sharp';
|
} from '@ng-icons/material-icons/sharp';
|
||||||
import { NgIconComponent, provideIcons } from '@ng-icons/core';
|
import { NgIconComponent, provideIcons } from '@ng-icons/core';
|
||||||
import { HttpErrorResponse } from '@angular/common/http';
|
import { HttpErrorResponse } from '@angular/common/http';
|
||||||
|
import { SelectedCarService } from '../services/selected-car.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-entries',
|
selector: 'app-entries',
|
||||||
@@ -51,9 +53,11 @@ import { HttpErrorResponse } from '@angular/common/http';
|
|||||||
templateUrl: './entries.component.html',
|
templateUrl: './entries.component.html',
|
||||||
styleUrl: './entries.component.scss'
|
styleUrl: './entries.component.scss'
|
||||||
})
|
})
|
||||||
export class EntriesComponent {
|
export class EntriesComponent implements OnInit {
|
||||||
private readonly entriesOverviewService = inject(EntriesOverviewService);
|
private readonly entriesOverviewService = inject(EntriesOverviewService);
|
||||||
private readonly messageService = inject(MessageService);
|
private readonly messageService = inject(MessageService);
|
||||||
|
private readonly selectedCarService = inject(SelectedCarService);
|
||||||
|
private readonly destroyRef = inject(DestroyRef);
|
||||||
|
|
||||||
protected readonly consumptionEntries$: Observable<ConsumptionEntry[]>;
|
protected readonly consumptionEntries$: Observable<ConsumptionEntry[]>;
|
||||||
protected readonly cars$: Observable<Car[]>;
|
protected readonly cars$: Observable<Car[]>;
|
||||||
@@ -93,7 +97,35 @@ export class EntriesComponent {
|
|||||||
);
|
);
|
||||||
|
|
||||||
this.cars$ = this.entriesOverviewService.getCars()
|
this.cars$ = this.entriesOverviewService.getCars()
|
||||||
.pipe(takeUntilDestroyed());
|
.pipe(
|
||||||
|
takeUntilDestroyed(),
|
||||||
|
tap((cars) => {
|
||||||
|
const selectedCarId = this.selectedCarService.getSelectedCarId();
|
||||||
|
|
||||||
|
if (selectedCarId === null) {
|
||||||
|
const firstCar = cars[0];
|
||||||
|
this.selectedCar.setValue(firstCar);
|
||||||
|
this.selectedCarService.setSelectedCarId(firstCar?.id ?? null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedCar = cars.find(car => car.id === selectedCarId);
|
||||||
|
this.selectedCar.setValue(selectedCar ?? null);
|
||||||
|
this.selectedCarService.setSelectedCarId(selectedCar?.id ?? null);
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.selectedCar.valueChanges
|
||||||
|
.pipe(
|
||||||
|
takeUntilDestroyed(this.destroyRef),
|
||||||
|
tap((car) => {
|
||||||
|
console.log('Selected car changed (entries):', car);
|
||||||
|
this.selectedCarService.setSelectedCarId(car?.id ?? null);
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.subscribe();
|
||||||
}
|
}
|
||||||
|
|
||||||
onEntryDeleted(entry: ConsumptionEntry): void {
|
onEntryDeleted(entry: ConsumptionEntry): void {
|
||||||
|
|||||||
@@ -0,0 +1,33 @@
|
|||||||
|
import { Injectable } from "@angular/core";
|
||||||
|
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
|
||||||
|
import { BehaviorSubject, tap } from "rxjs";
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: "root",
|
||||||
|
})
|
||||||
|
export class SelectedCarService {
|
||||||
|
static readonly SELECTED_CAR_ID_KEY = "SELECTED_CAR_ID";
|
||||||
|
|
||||||
|
private selectedCarId: string | null = null;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.loadStoredCarId();
|
||||||
|
}
|
||||||
|
|
||||||
|
private loadStoredCarId(): void {
|
||||||
|
this.selectedCarId = localStorage.getItem(SelectedCarService.SELECTED_CAR_ID_KEY);
|
||||||
|
}
|
||||||
|
|
||||||
|
getSelectedCarId() {
|
||||||
|
return this.selectedCarId;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelectedCarId(carId: string | null): void {
|
||||||
|
this.selectedCarId = carId;
|
||||||
|
if (carId === null) {
|
||||||
|
localStorage.removeItem(SelectedCarService.SELECTED_CAR_ID_KEY);
|
||||||
|
} else {
|
||||||
|
localStorage.setItem(SelectedCarService.SELECTED_CAR_ID_KEY, carId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user