From 35887e32d0c4068767ded10aa024432cdcda8517 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 12 Dec 2024 16:13:57 +0100 Subject: [PATCH] base data create edit location --- .../_abstract/abstract-data-form-component.ts | 60 ++++++++++++++++--- .../app/_components/list/list.component.html | 4 +- .../app/_components/list/list.component.ts | 3 +- .../src/app/_helpers/app-helper.service.ts | 5 +- .../location-detail.component.html | 10 +--- .../location-detail.component.ts | 52 ++++++---------- .../location-form.component.html | 15 ++++- .../location-form/location-form.component.ts | 35 ++++++----- .../shipping-company-form.component.html | 2 +- .../shipping-company-form.component.ts | 2 +- .../vessel-form/vessel-form.component.html | 2 +- .../vessel-form/vessel-form.component.ts | 2 +- .../zone/zone-form/zone-form.component.html | 4 +- .../zone/zone-form/zone-form.component.ts | 3 - 14 files changed, 115 insertions(+), 84 deletions(-) diff --git a/angular/src/app/_components/_abstract/abstract-data-form-component.ts b/angular/src/app/_components/_abstract/abstract-data-form-component.ts index 01b4574..c98052f 100644 --- a/angular/src/app/_components/_abstract/abstract-data-form-component.ts +++ b/angular/src/app/_components/_abstract/abstract-data-form-component.ts @@ -1,29 +1,41 @@ import { Directive, EventEmitter, Input, Output, OnInit } from '@angular/core'; import { FormGroup } from '@angular/forms'; -import { ModalStatus } from '@app/_helpers/modal.states'; import { Observable } from 'rxjs'; +import { Router } from '@angular/router'; +import { TranslateService } from '@ngx-translate/core'; +import {ModalStatus} from "@app/_helpers/modal.states"; export type SaveFunction = (item: T) => Observable; export type UpdateFunction = (id: string | number, item: T) => Observable; +export type DeleteFunction = (id: string | number) => Observable; export enum FormMode { Create = 'create', Edit = 'edit' } +export interface FormSubmitEvent { + status: ModalStatus; + data: T | null; +} + @Directive() export abstract class AbstractDataFormComponent implements OnInit { @Input() data?: T; @Input() mode: FormMode = FormMode.Create; @Input() id?: string | number; - @Output() submit: EventEmitter = new EventEmitter(); - + @Input() redirectAfterDelete?: string; + @Output() submit = new EventEmitter>(); + @Output() deleted: EventEmitter = new EventEmitter(); protected form!: FormGroup; constructor( protected formConfig: FormGroup, protected createFn: SaveFunction, - protected updateFn: UpdateFunction + protected updateFn: UpdateFunction, + protected deleteFn?: DeleteFunction, + protected translateService?: TranslateService, + protected router?: Router ) { this.form = formConfig; } @@ -32,12 +44,14 @@ export abstract class AbstractDataFormComponent { - // this.form.reset(); - this.submit.emit(ModalStatus.Submitted); + next: (response) => { + this.submit.emit({ + status: ModalStatus.Submitted, + data: response + }); }, error: (error) => { console.error('Error saving data:', error); + this.submit.emit({ + status: ModalStatus.Cancelled, // Statt Error verwenden wir Cancelled + data: null + }); + } + }); + } + + onDelete(): void { + if (!this.isEditMode() || !this.deleteFn || !this.id || !this.translateService) { + return; + } + + this.translateService.get('basic.delete_confirm').subscribe((confirmMessage: string) => { + if (confirm(confirmMessage)) { + this.deleteFn!(this.id!).subscribe({ + next: () => { + this.deleted.emit(); + if (this.redirectAfterDelete && this.router) { + this.router.navigate([this.redirectAfterDelete]); + } + }, + error: (error) => { + console.error('Error deleting data:', error); + } + }); } }); } diff --git a/angular/src/app/_components/list/list.component.html b/angular/src/app/_components/list/list.component.html index ed327f4..e424417 100644 --- a/angular/src/app/_components/list/list.component.html +++ b/angular/src/app/_components/list/list.component.html @@ -118,14 +118,14 @@ class="btn btn-primary spt-icon-details" data-type="user-tool" data-action="edit" - target="_blank" + [target]="detailLinkNewTab ? '_blank' : '_self'" [routerLink]="[appHelperService.getLink(element, column.url)]"> diff --git a/angular/src/app/_components/list/list.component.ts b/angular/src/app/_components/list/list.component.ts index 0b6b3b0..a3f1449 100644 --- a/angular/src/app/_components/list/list.component.ts +++ b/angular/src/app/_components/list/list.component.ts @@ -38,6 +38,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy { @Input() public displayOptions!: { [key: string]: string }; @Input() public defaultDisplayOption!: string; @Input() public refreshIntervalSeconds?: number; + @Input() public detailLinkNewTab?: boolean; @ViewChild(MatSort) sort; @ViewChild("pagingComponent", {static: false}) protected pagingComponent!: PagingComponent; @ViewChild("filterBarComponent", {static: false}) protected filterBarComponent!: FilterBarComponent; @@ -90,7 +91,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy { this.hidePageSize = false; this.dataSource = new MatTableDataSource(); this.filterConfig = null; - + this.detailLinkNewTab = false; } ngOnInit(): void { diff --git a/angular/src/app/_helpers/app-helper.service.ts b/angular/src/app/_helpers/app-helper.service.ts index 0e1f240..49ee190 100644 --- a/angular/src/app/_helpers/app-helper.service.ts +++ b/angular/src/app/_helpers/app-helper.service.ts @@ -2,6 +2,7 @@ import {DomSanitizer, SafeHtml} from "@angular/platform-browser"; import {Injectable} from "@angular/core"; import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap"; import {ModalStatus} from "@app/_helpers/modal.states"; +import {FormSubmitEvent} from "@app/_components/_abstract/abstract-data-form-component"; @Injectable({providedIn: 'root'}) export class AppHelperService { @@ -50,8 +51,8 @@ export class AppHelperService { modalRef.componentInstance[key] = data[key]; } - return modalRef.componentInstance.submit.subscribe((modalStatus: ModalStatus) => { - if (modalStatus === ModalStatus.Submitted) { + return modalRef.componentInstance.submit.subscribe((event: FormSubmitEvent) => { + if (event.status === ModalStatus.Submitted) { modalRef.dismiss(); if (callback) { callback(callbackParam); diff --git a/angular/src/app/_views/location/location-detail/location-detail.component.html b/angular/src/app/_views/location/location-detail/location-detail.component.html index 6434539..70ab25e 100644 --- a/angular/src/app/_views/location/location-detail/location-detail.component.html +++ b/angular/src/app/_views/location/location-detail/location-detail.component.html @@ -4,13 +4,7 @@ [data]="location" [mode]="FormMode.Edit" [id]="appHelperService.extractId(location.id!)" - (submit)="onFormSubmit()" + (submit)="onFormUpdate($event)" > - -
- -
-} +} \ No newline at end of file diff --git a/angular/src/app/_views/location/location-detail/location-detail.component.ts b/angular/src/app/_views/location/location-detail/location-detail.component.ts index c57e8a2..6d24699 100644 --- a/angular/src/app/_views/location/location-detail/location-detail.component.ts +++ b/angular/src/app/_views/location/location-detail/location-detail.component.ts @@ -1,10 +1,9 @@ -import {Component, OnInit} from '@angular/core'; -import {LocationJsonld, LocationService} from "@app/core/api/v1"; -import {AppHelperService} from "@app/_helpers/app-helper.service"; -import {ActivatedRoute, Router} from "@angular/router"; -import {ROUTE_LOCATIONS} from "@app/app-routing.module"; -import {TranslateService} from "@ngx-translate/core"; -import {FormMode} from "@app/_components/_abstract/abstract-data-form-component"; +import { Component, OnInit } from '@angular/core'; +import { LocationJsonld, LocationService } from "@app/core/api/v1"; +import { AppHelperService } from "@app/_helpers/app-helper.service"; +import { ActivatedRoute } from "@angular/router"; +import { FormMode, FormSubmitEvent } from "@app/_components/_abstract/abstract-data-form-component"; +import {ModalStatus} from "@app/_helpers/modal.states"; @Component({ selector: 'app-location-detail', @@ -17,39 +16,22 @@ export class LocationDetailComponent implements OnInit { constructor( private locationService: LocationService, protected appHelperService: AppHelperService, - protected translateService: TranslateService, - private route: ActivatedRoute, - protected router: Router + private route: ActivatedRoute ) {} ngOnInit() { this.route.params.subscribe(params => { - this.apiGetLocationData(params['id']); + this.locationService.locationsIdGet(params['id']).subscribe( + data => { + this.location = data; + } + ); }); } - apiGetLocationData(locationId: string) { - this.locationService.locationsIdGet(locationId).subscribe( - data => { - console.log(data); - this.location = data; - } - ); + onFormUpdate(event: FormSubmitEvent) { + if (event.status === ModalStatus.Submitted && event.data) { + this.location = event.data; + } } - - apiDeleteLocation() { - this.translateService.get('basic.delete_confirm').subscribe((confirmMessage: string) => { - if (confirm(confirmMessage)) { - this.locationService.locationsIdDelete( - this.appHelperService.extractId(this.location.id!) - ).subscribe(() => { - this.router.navigate(['/' + ROUTE_LOCATIONS]); - }); - } - }); - } - - onFormSubmit() { - this.apiGetLocationData(this.appHelperService.extractId(this.location.id!)); - } -} +} \ No newline at end of file diff --git a/angular/src/app/_views/location/location-form/location-form.component.html b/angular/src/app/_views/location/location-form/location-form.component.html index fdc2b92..b01aa9f 100644 --- a/angular/src/app/_views/location/location-form/location-form.component.html +++ b/angular/src/app/_views/location/location-form/location-form.component.html @@ -23,8 +23,17 @@ - + +
+ + + @if (isEditMode()) { + + } +
\ No newline at end of file diff --git a/angular/src/app/_views/location/location-form/location-form.component.ts b/angular/src/app/_views/location/location-form/location-form.component.ts index 948394f..9b02346 100644 --- a/angular/src/app/_views/location/location-form/location-form.component.ts +++ b/angular/src/app/_views/location/location-form/location-form.component.ts @@ -1,10 +1,13 @@ import { Component } from '@angular/core'; -import {AbstractDataFormComponent} from "@app/_components/_abstract/abstract-data-form-component"; -import {LocationJsonld, LocationService, ZoneService} from "@app/core/api/v1"; -import {SearchSelectComponent} from "@app/_components/search-select/search-select.component"; -import {ListColDefinition} from "@app/_components/list/list-col-definition"; -import {locationForm} from "@app/_forms/apiForms"; -import {ListGetDataFunctionType} from "@app/_components/list/list-get-data-function-type"; +import { AbstractDataFormComponent } from "@app/_components/_abstract/abstract-data-form-component"; +import { LocationJsonld, LocationService, ZoneService } from "@app/core/api/v1"; +import { SearchSelectComponent } from "@app/_components/search-select/search-select.component"; +import { ListColDefinition } from "@app/_components/list/list-col-definition"; +import { locationForm } from "@app/_forms/apiForms"; +import { ListGetDataFunctionType } from "@app/_components/list/list-get-data-function-type"; +import { TranslateService } from "@ngx-translate/core"; +import { Router } from "@angular/router"; +import { ROUTE_BASE_DATA } from "@app/app-routing.module"; @Component({ selector: 'app-location-form', @@ -16,22 +19,24 @@ export class LocationFormComponent extends AbstractDataFormComponent locationService.locationsPost(data), - (id: string | number, data: LocationJsonld) => locationService.locationsIdPatch(id.toString(), data) + locationForm, + (data: LocationJsonld) => this.locationService.locationsPost(data), + (id: string | number, data: LocationJsonld) => this.locationService.locationsIdPatch(id.toString(), data), + (id: string | number) => this.locationService.locationsIdDelete(id.toString()), + translateService, + router ); + this.redirectAfterDelete = '/' + ROUTE_BASE_DATA; this.zoneColDefinitions = SearchSelectComponent.getDefaultColDefZones(); } - protected override getInitialData(): LocationJsonld { - return {} as LocationJsonld; - } - getZones: ListGetDataFunctionType = (index: number, pageSize: number, term?: string) => { return this.zoneService.zonesGetCollection(index, pageSize, term); } -} +} \ No newline at end of file diff --git a/angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.html b/angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.html index b422d6a..ce4ac04 100644 --- a/angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.html +++ b/angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.html @@ -20,6 +20,6 @@ \ No newline at end of file diff --git a/angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.ts b/angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.ts index 44e1956..b810261 100644 --- a/angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.ts +++ b/angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.ts @@ -18,7 +18,7 @@ export class ShippingCompanyFormComponent extends AbstractDataFormComponent - {{ (isEditMode() ? 'basic.save' : 'basic.create') | translate }} + {{ 'basic.save' | translate }} \ No newline at end of file diff --git a/angular/src/app/_views/vessel/vessel-form/vessel-form.component.ts b/angular/src/app/_views/vessel/vessel-form/vessel-form.component.ts index add9f15..8b8cfb5 100644 --- a/angular/src/app/_views/vessel/vessel-form/vessel-form.component.ts +++ b/angular/src/app/_views/vessel/vessel-form/vessel-form.component.ts @@ -27,7 +27,7 @@ export class VesselFormComponent extends AbstractDataFormComponent this.shippingCompanyColDefinitions = SearchSelectComponent.getDefaultColDefShippingCompanies(); } - protected override getInitialData(): VesselJsonld { + protected override getNewDataSet(): VesselJsonld { return {} as VesselJsonld; } diff --git a/angular/src/app/_views/zone/zone-form/zone-form.component.html b/angular/src/app/_views/zone/zone-form/zone-form.component.html index b7b4e0a..80e3538 100644 --- a/angular/src/app/_views/zone/zone-form/zone-form.component.html +++ b/angular/src/app/_views/zone/zone-form/zone-form.component.html @@ -1,4 +1,4 @@ -

{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.location' | translate }}

+

{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.zone' | translate }}

@@ -10,7 +10,7 @@
\ No newline at end of file diff --git a/angular/src/app/_views/zone/zone-form/zone-form.component.ts b/angular/src/app/_views/zone/zone-form/zone-form.component.ts index 3b26ee9..c1e8213 100644 --- a/angular/src/app/_views/zone/zone-form/zone-form.component.ts +++ b/angular/src/app/_views/zone/zone-form/zone-form.component.ts @@ -22,8 +22,5 @@ export class ZoneFormComponent extends AbstractDataFormComponent { ); } - protected override getInitialData(): ZoneJsonld { - return {} as ZoneJsonld; - } }