detail, create & edit

angular/src/app/_components/list/list.component.ts

@@ -20,7 +20,7 @@ import {AbstractDataFormComponent} from "@app/_components/_abstract/abstract-dat
 export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
     @Input() public listId!: string;
     @Input() public getDataFunction!: ListGetDataFunctionType;
-    @Input() public onSortFunction!: Function;
+    @Input() public onSortFunction?: Function;
     @Input() public onNavigateToDetailsFunction!: Function;
     @Input() public getCustomDetailLinkFunction!: Function;
     @Input() public onRemoveItemFunction!: Function;
@@ -226,7 +226,9 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
         this.sortObj = sortState;
         this.sortObj['listColDefinition'] = listColDefinition;
         this.pagingComponent.resetPageIndex();
-        this.onSortFunction(sortState);
+        if (this.onSortFunction) {
+            this.onSortFunction(sortState);
+        }
         this.getData();
     }
 

angular/src/app/_components/search-select/search-select.component.html

@@ -12,7 +12,6 @@
                   [listColDefinitions]="listColDefinitions"
                   [showDetailButton]="false"
                   [showFilterBar]="false"
-                  [onSortFunction]="onSortChange"
         >
         </app-list>
     </div>

angular/src/app/_components/search-select/search-select.component.ts

@@ -95,9 +95,6 @@ export class SearchSelectComponent implements OnInit, AfterViewInit {
         return this.listComponent.getPageSize();
     }
 
-    onSortChange = (sortState: Sort) => {
-    }
-
     public static getDefaultColDefZones(subResource?: string): ListColDefinition[] {
         return  [
             {

angular/src/app/_views/location/location-list/location-list.component.html

@@ -3,7 +3,6 @@
               [listId]="'locationList'"
               [getDataFunction]="getData"
               [getCustomDetailLinkFunction]="getCustomDetailLink"
-              [onSortFunction]="onSortChange"
               [listColDefinitions]="listColDefinitions"
               [dataFormComponent]="LocationFormComponent"
     ></app-list>

angular/src/app/_views/location/location-list/location-list.component.ts

@@ -85,9 +85,6 @@ export class LocationListComponent implements OnInit, AfterViewInit {
         );
     }
 
-    onSortChange = (sortState: Sort) => {
-    }
-
     getCustomDetailLink(element: LocationJsonld) {
         return ROUTE_LOCATIONS + '/' + this.appHelperService.extractId(element?.id);
     }

angular/src/app/_views/shipping-company/shipping-company-detail/shipping-company-detail.component.html

@@ -1 +1,9 @@
-<p>shipping-company-detail works!</p>
+@if (shippingCompany) {
+    <div class="spt-container">
+        <app-shipping-company-form
+            [data]="shippingCompany"
+            [mode]="FormMode.Edit"
+            [id]="appHelperService.extractId(shippingCompany.id!)"
+        ></app-shipping-company-form>
+    </div>
+}

angular/src/app/_views/shipping-company/shipping-company-detail/shipping-company-detail.component.ts

@@ -1,10 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ShippingCompanyJsonld, ShippingCompanyService } from "@app/core/api/v1";
+import { AppHelperService } from "@app/_helpers/app-helper.service";
+import { ActivatedRoute } from "@angular/router";
+import { FormMode } from "@app/_components/_abstract/abstract-data-form-component";
 
 @Component({
-  selector: 'app-shipping-company-detail',
-  templateUrl: './shipping-company-detail.component.html',
-  styleUrl: './shipping-company-detail.component.scss'
+    selector: 'app-shipping-company-detail',
+    templateUrl: './shipping-company-detail.component.html'
 })
-export class ShippingCompanyDetailComponent {
+export class ShippingCompanyDetailComponent implements OnInit {
+    protected shippingCompany!: ShippingCompanyJsonld;
+    protected readonly FormMode = FormMode;
 
-}
+    constructor(
+        private shippingCompanyService: ShippingCompanyService,
+        protected appHelperService: AppHelperService,
+        private route: ActivatedRoute
+    ) {}
+
+    ngOnInit() {
+        this.route.params.subscribe(params => {
+            this.shippingCompanyService.shippingCompaniesIdGet(params['id']).subscribe(
+                data => {
+                    this.shippingCompany = data;
+                }
+            );
+        });
+    }
+}

angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.html

@@ -1,25 +1,34 @@
 <h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.shipping_company' | translate }}</h2>
+<div class="spt-form">
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+        <div class="mb-3">
+            <label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
+            <input type="text"
+                   class="form-control"
+                   id="name"
+                   formControlName="name"
+                   required/>
+        </div>
 
-<form [formGroup]="form" (ngSubmit)="onSubmit()">
-    <div class="mb-3">
-        <label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
-        <input type="text"
-               class="form-control"
-               id="name"
-               formControlName="name">
-    </div>
+        <div class="mb-3">
+            <label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
+            <input type="text"
+                   class="form-control"
+                   id="code"
+                   formControlName="code"
+                   required/>
+        </div>
 
-    <div class="mb-3">
-        <label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
-        <input type="text"
-               class="form-control"
-               id="code"
-               formControlName="code">
-    </div>
+        <div class="flex gap-2">
+            <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
+                {{ 'basic.save' | translate }}
+            </button>
 
-    <button type="submit"
-            class="btn btn-primary"
-            [disabled]="form.invalid">
-        {{ 'basic.save' | translate }}
-    </button>
-</form>
+            @if (isEditMode()) {
+                <button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
+                    {{ 'basic.delete' | translate }} {{ 'model.shipping_company' | translate }}
+                </button>
+            }
+        </div>
+    </form>
+</div>

angular/src/app/_views/shipping-company/shipping-company-form/shipping-company-form.component.ts

@@ -1,7 +1,10 @@
 import { Component } from '@angular/core';
 import { ShippingCompanyJsonld, ShippingCompanyService } from "@app/core/api/v1";
 import { shippingCompanyForm } from "@app/_forms/apiForms";
-import {AbstractDataFormComponent} from "@app/_components/_abstract/abstract-data-form-component";
+import { AbstractDataFormComponent } from "@app/_components/_abstract/abstract-data-form-component";
+import { TranslateService } from "@ngx-translate/core";
+import { Router } from "@angular/router";
+import { ROUTE_BASE_DATA } from "@app/app-routing.module";
 
 @Component({
     selector: 'app-shipping-company-form',
@@ -9,16 +12,19 @@ import {AbstractDataFormComponent} from "@app/_components/_abstract/abstract-dat
 })
 export class ShippingCompanyFormComponent extends AbstractDataFormComponent<ShippingCompanyJsonld> {
     constructor(
-        private shippingCompanyService: ShippingCompanyService
+        private shippingCompanyService: ShippingCompanyService,
+        translateService: TranslateService,
+        router: Router
     ) {
         super(
             shippingCompanyForm,
-            (data: ShippingCompanyJsonld) => shippingCompanyService.shippingCompaniesPost(data),
-            (id: string | number, data: ShippingCompanyJsonld) => shippingCompanyService.shippingCompaniesIdPatch(id.toString(), data)
+            (data: ShippingCompanyJsonld) => this.shippingCompanyService.shippingCompaniesPost(data),
+            (id: string | number, data: ShippingCompanyJsonld) => this.shippingCompanyService.shippingCompaniesIdPatch(id.toString(), data),
+            (id: string | number) => this.shippingCompanyService.shippingCompaniesIdDelete(id.toString()),
+            translateService,
+            router
         );
-    }
 
-    protected override getNewDataSet(): ShippingCompanyJsonld {
-        return {} as ShippingCompanyJsonld;
+        this.redirectAfterDelete = '/' + ROUTE_BASE_DATA;
     }
 }

angular/src/app/_views/shipping-company/shipping-company-list/shipping-company-list.component.html

@@ -2,8 +2,7 @@
     <app-list #listComponent
               [listId]="'shippingCompanyList'"
               [getDataFunction]="getData"
-              [onNavigateToDetailsFunction]="navigateToZoneDetail"
-              [onSortFunction]="onSortChange"
+              [getCustomDetailLinkFunction]="getCustomDetailLink"
               [listColDefinitions]="listColDefinitions"
               [dataFormComponent]="ShippingCompanyFormComponent"
     ></app-list>

angular/src/app/_views/shipping-company/shipping-company-list/shipping-company-list.component.ts

@@ -2,6 +2,7 @@ import {Component, ViewChild} from '@angular/core';
 import {ListComponent} from "@app/_components/list/list.component";
 import {ListColDefinition} from "@app/_components/list/list-col-definition";
 import {
+    LocationJsonld,
     ShippingCompanyJsonld,
     ShippingCompanyService,
 } from "@app/core/api/v1";
@@ -10,7 +11,7 @@ import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {FilterBarComponent} from "@app/_components/filter-bar/filter-bar.component";
 import {ListGetDataFunctionType} from "@app/_components/list/list-get-data-function-type";
 import {Sort} from "@angular/material/sort";
-import {ROUTE_SHIPPING_COMPANIES} from "@app/app-routing.module";
+import {ROUTE_LOCATIONS, ROUTE_SHIPPING_COMPANIES} from "@app/app-routing.module";
 import {
     ShippingCompanyFormComponent
 } from "@app/_views/shipping-company/shipping-company-form/shipping-company-form.component";
@@ -83,11 +84,7 @@ export class ShippingCompanyListComponent {
         );
     }
 
-    onSortChange = (sortState: Sort) => {
-    }
-
-    navigateToZoneDetail = (element: any) => {
-        const shippingCompany: ShippingCompanyJsonld = element as ShippingCompanyJsonld;
-        this.router.navigate(['/' + ROUTE_SHIPPING_COMPANIES, this.appHelperService.extractId(shippingCompany.id)]);
+    getCustomDetailLink(element: LocationJsonld) {
+        return ROUTE_SHIPPING_COMPANIES + '/' + this.appHelperService.extractId(element?.id);
     }
 }

angular/src/app/_views/vessel/vessel-detail/vessel-detail.component.html

@@ -1 +1,9 @@
-<p>vessel-detail works!</p>
+@if (vessel) {
+    <div class="spt-container">
+        <app-vessel-form
+            [data]="vessel"
+            [mode]="FormMode.Edit"
+            [id]="appHelperService.extractId(vessel.id!)"
+        ></app-vessel-form>
+    </div>
+}

angular/src/app/_views/vessel/vessel-detail/vessel-detail.component.ts

@@ -1,10 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { VesselJsonld, VesselService } from "@app/core/api/v1";
+import { AppHelperService } from "@app/_helpers/app-helper.service";
+import { ActivatedRoute } from "@angular/router";
+import { FormMode } from "@app/_components/_abstract/abstract-data-form-component";
 
 @Component({
-  selector: 'app-vessel-detail',
-  templateUrl: './vessel-detail.component.html',
-  styleUrl: './vessel-detail.component.scss'
+    selector: 'app-vessel-detail',
+    templateUrl: './vessel-detail.component.html'
 })
-export class VesselDetailComponent {
+export class VesselDetailComponent implements OnInit {
+    protected vessel!: VesselJsonld;
+    protected readonly FormMode = FormMode;
 
-}
+    constructor(
+        private vesselService: VesselService,
+        protected appHelperService: AppHelperService,
+        private route: ActivatedRoute
+    ) {}
+
+    ngOnInit() {
+        this.route.params.subscribe(params => {
+            this.vesselService.vesselsIdGet(params['id']).subscribe(
+                data => {
+                    this.vessel = data;
+                }
+            );
+        });
+    }
+}

angular/src/app/_views/vessel/vessel-form/vessel-form.component.html

@@ -1,37 +1,48 @@
 <h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.vessel' | translate }}</h2>
+<div class="spt-form">
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+        <div class="mb-3">
+            <label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
+            <input type="text"
+                   class="form-control"
+                   id="name"
+                   formControlName="name"
+                   required/>
+        </div>
 
-<form [formGroup]="form" (ngSubmit)="onSubmit()">
-    <div class="mb-3">
-        <label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
-        <input type="text"
-               class="form-control"
-               id="name"
-               formControlName="name">
-    </div>
+        <div class="mb-3">
+            <label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
+            <input type="text"
+                   class="form-control"
+                   id="code"
+                   formControlName="code"
+                   required/>
+        </div>
 
-    <div class="mb-3">
-        <label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
-        <input type="text"
-               class="form-control"
-               id="code"
-               formControlName="code">
-    </div>
+        <div class="mb-3">
+            <label for="company" class="form-label">{{ 'model.shipping_company' | translate }}:</label>
+            <app-search-select #shippingCompanySearchSelect
+                               [formId]="'company'"
+                               [formLabelLangKey]="'model.shipping_company'"
+                               [documentForm]="form"
+                               [getDataFunction]="getShippingCompanies"
+                               [displayedDataField]="'name'"
+                               [listColDefinitions]="shippingCompanyColDefinitions"
+                               [dataSet]="data?.company">
+            </app-search-select>
+            <input id="company" type="hidden" formControlName="company"/>
+        </div>
 
-    <div class="mb-3">
-        <label for="company" class="form-label">{{ 'model.shipping_company' | translate }}:</label>
-        <app-search-select #shippingCompanySearchSelect
-                           [formId]="'company'"
-                           [formLabelLangKey]="'model.shipping_company'"
-                           [documentForm]="form"
-                           [getDataFunction]="getShippingCompanies"
-                           [displayedDataField]="'name'"
-                           [listColDefinitions]="shippingCompanyColDefinitions">
-        </app-search-select>
-    </div>
+        <div class="flex gap-2">
+            <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
+                {{ 'basic.save' | translate }}
+            </button>
 
-    <button type="submit"
-            class="btn btn-primary"
-            [disabled]="form.invalid">
-        {{ 'basic.save' | translate }}
-    </button>
-</form>
+            @if (isEditMode()) {
+                <button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
+                    {{ 'basic.delete' | translate }} {{ 'model.vessel' | translate }}
+                </button>
+            }
+        </div>
+    </form>
+</div>

angular/src/app/_views/vessel/vessel-form/vessel-form.component.ts

@@ -4,7 +4,10 @@ import { vesselForm } from "@app/_forms/apiForms";
 import { SearchSelectComponent } from "@app/_components/search-select/search-select.component";
 import { ListGetDataFunctionType } from "@app/_components/list/list-get-data-function-type";
 import { ListColDefinition } from "@app/_components/list/list-col-definition";
-import {AbstractDataFormComponent} from "@app/_components/_abstract/abstract-data-form-component";
+import { AbstractDataFormComponent } from "@app/_components/_abstract/abstract-data-form-component";
+import { TranslateService } from "@ngx-translate/core";
+import { Router } from "@angular/router";
+import { ROUTE_BASE_DATA } from "@app/app-routing.module";
 
 @Component({
     selector: 'app-vessel-form',
@@ -16,14 +19,20 @@ export class VesselFormComponent extends AbstractDataFormComponent<VesselJsonld>
 
     constructor(
         private vesselService: VesselService,
-        private shippingCompanyService: ShippingCompanyService
+        private shippingCompanyService: ShippingCompanyService,
+        translateService: TranslateService,
+        router: Router
     ) {
         super(
             vesselForm,
-            (data: VesselJsonld) => vesselService.vesselsPost(data),
-            (id: string | number, data: VesselJsonld) => vesselService.vesselsIdPatch(id.toString(), data)
+            (data: VesselJsonld) => this.vesselService.vesselsPost(data),
+            (id: string | number, data: VesselJsonld) => this.vesselService.vesselsIdPatch(id.toString(), data),
+            (id: string | number) => this.vesselService.vesselsIdDelete(id.toString()),
+            translateService,
+            router
         );
 
+        this.redirectAfterDelete = '/' + ROUTE_BASE_DATA;
         this.shippingCompanyColDefinitions = SearchSelectComponent.getDefaultColDefShippingCompanies();
     }
 

angular/src/app/_views/vessel/vessel-list/vessel-list.component.html

@@ -2,8 +2,7 @@
     <app-list #listComponent
               [listId]="'vesselList'"
               [getDataFunction]="getData"
-              [onNavigateToDetailsFunction]="navigateToVesselDetail"
-              [onSortFunction]="onSortChange"
+              [getCustomDetailLinkFunction]="getCustomDetailLink"
               [listColDefinitions]="listColDefinitions"
               [dataFormComponent]="VesselFormComponent"
     ></app-list>

angular/src/app/_views/vessel/vessel-list/vessel-list.component.ts

@@ -1,13 +1,13 @@
 import {Component, ViewChild} from '@angular/core';
 import {ListComponent} from "@app/_components/list/list.component";
 import {ListColDefinition} from "@app/_components/list/list-col-definition";
-import {VesselJsonld, VesselService} from "@app/core/api/v1";
+import {VesselJsonld, VesselService, ZoneJsonld} from "@app/core/api/v1";
 import {Router} from "@angular/router";
 import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {FilterBarComponent} from "@app/_components/filter-bar/filter-bar.component";
 import {ListGetDataFunctionType} from "@app/_components/list/list-get-data-function-type";
 import {Sort} from "@angular/material/sort";
-import {ROUTE_VESSELS} from "@app/app-routing.module";
+import {ROUTE_VESSELS, ROUTE_ZONES} from "@app/app-routing.module";
 import {VesselFormComponent} from "@app/_views/vessel/vessel-form/vessel-form.component";
 
 @Component({
@@ -86,12 +86,7 @@ export class VesselListComponent {
         );
     }
 
-    onSortChange = (sortState: Sort) => {
+    getCustomDetailLink(element: ZoneJsonld) {
+        return ROUTE_VESSELS + '/' + this.appHelperService.extractId(element?.id);
     }
-
-    navigateToVesselDetail = (element: any) => {
-        const vessel: VesselJsonld = element as VesselJsonld;
-        this.router.navigate(['/' + ROUTE_VESSELS, this.appHelperService.extractId(vessel.id)]);
-    }
-
 }

angular/src/app/_views/zone/zone-detail/zone-detail.component.html

@@ -1 +1,9 @@
-<p>zone-detail works!</p>
+@if (zone) {
+    <div class="spt-container">
+        <app-zone-form
+            [data]="zone"
+            [mode]="FormMode.Edit"
+            [id]="appHelperService.extractId(zone.id!)"
+        ></app-zone-form>
+    </div>
+}

angular/src/app/_views/zone/zone-detail/zone-detail.component.ts

@@ -1,59 +1,30 @@
-import {Component, OnInit} from '@angular/core';
-import {ZoneJsonld, ZoneService} from "@app/core/api/v1";
-import {AppHelperService} from "@app/_helpers/app-helper.service";
-import {TranslateService} from "@ngx-translate/core";
-import {ActivatedRoute, Router} from "@angular/router";
-import {ROUTE_LOCATIONS} from "@app/app-routing.module";
+import { Component, OnInit } from '@angular/core';
+import { ZoneJsonld, ZoneService } from "@app/core/api/v1";
+import { AppHelperService } from "@app/_helpers/app-helper.service";
+import { ActivatedRoute } from "@angular/router";
+import { FormMode } from "@app/_components/_abstract/abstract-data-form-component";
 
 @Component({
-  selector: 'app-zone-detail',
-  templateUrl: './zone-detail.component.html',
-  styleUrl: './zone-detail.component.scss'
+    selector: 'app-zone-detail',
+    templateUrl: './zone-detail.component.html'
 })
 export class ZoneDetailComponent implements OnInit {
-
     protected zone!: ZoneJsonld;
+    protected readonly FormMode = FormMode;
 
     constructor(
         private zoneService: ZoneService,
         protected appHelperService: AppHelperService,
-        protected translateService: TranslateService,
-        private route: ActivatedRoute,
-        protected router: Router
-    ) {
-    }
+        private route: ActivatedRoute
+    ) {}
 
     ngOnInit() {
         this.route.params.subscribe(params => {
-            this.apiGetZoneData(params['id']);
-        });
-    }
-
-    apiGetZoneData(locationId: string)
-    {
-        this.zoneService.zonesIdGet(
-            locationId
-        ).subscribe(
-            data => {
-                this.zone = data;
-            }
-        )
-    }
-
-    apiDeleteZone()
-    {
-        let confirmMessage = "";
-        this.translateService.get('basic.delete_confirm').subscribe((translation: string) => {
-            confirmMessage = translation;
+            this.zoneService.zonesIdGet(params['id']).subscribe(
+                data => {
+                    this.zone = data;
+                }
+            );
         });
-
-        if (confirm(confirmMessage)) {
-            this.zoneService.zonesIdDelete(this.appHelperService.extractId(this.zone.id!))
-                .subscribe(
-                    data => {
-                        this.router.navigate(['/' + ROUTE_LOCATIONS]);
-                    }
-                );
-        }
     }
-}
+}

angular/src/app/_views/zone/zone-form/zone-form.component.html

@@ -5,12 +5,17 @@
             <label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
             <input type="text" class="form-control" id="name" formControlName="name" required/>
         </div>
-        <div class="mb-3">
-            <label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
-            <input type="text" class="form-control" id="code" formControlName="code" required/>
+
+        <div class="flex gap-2">
+            <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
+                {{ 'basic.save' | translate }}
+            </button>
+
+            @if (isEditMode()) {
+                <button type="button" class="spt-button spt-button-danger" (click)="onDelete()">
+                    {{ 'basic.delete' | translate }} {{ 'model.zone' | translate }}
+                </button>
+            }
         </div>
-        <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
-            {{ 'basic.save' | translate }}
-        </button>
     </form>
 </div>

angular/src/app/_views/zone/zone-form/zone-form.component.ts

@@ -1,26 +1,30 @@
 import { Component } from '@angular/core';
-import {AbstractDataFormComponent} from "@app/_components/_abstract/abstract-data-form-component";
-import {ZoneJsonld, ZoneService} from "@app/core/api/v1";
-import {zoneForm} from "@app/_forms/apiForms";
-import {SearchSelectComponent} from "@app/_components/search-select/search-select.component";
+import { AbstractDataFormComponent } from "@app/_components/_abstract/abstract-data-form-component";
+import { ZoneJsonld, ZoneService } from "@app/core/api/v1";
+import { zoneForm } from "@app/_forms/apiForms";
+import { TranslateService } from "@ngx-translate/core";
+import { Router } from "@angular/router";
+import {ROUTE_BASE_DATA} from "@app/app-routing.module";
 
 @Component({
-  selector: 'app-zone-form',
-  templateUrl: './zone-form.component.html',
-  styleUrl: './zone-form.component.scss'
+    selector: 'app-zone-form',
+    templateUrl: './zone-form.component.html'
 })
 export class ZoneFormComponent extends AbstractDataFormComponent<ZoneJsonld> {
-    protected readonly SearchSelectComponent = SearchSelectComponent;
-
     constructor(
-        private zoneService: ZoneService
+        private zoneService: ZoneService,
+        translateService: TranslateService,
+        router: Router
     ) {
         super(
             zoneForm,
-            (data: ZoneJsonld) => zoneService.zonesPost(data),
-            (id: string | number, data: ZoneJsonld) => zoneService.zonesIdPatch(id.toString(), data)
+            (data: ZoneJsonld) => this.zoneService.zonesPost(data),
+            (id: string | number, data: ZoneJsonld) => this.zoneService.zonesIdPatch(id.toString(), data),
+            (id: string | number) => zoneService.zonesIdDelete(id.toString()),
+            translateService,
+            router
         );
-    }
 
-
-}
+        this.redirectAfterDelete = '/' + ROUTE_BASE_DATA;
+    }
+}

angular/src/app/_views/zone/zone-list/zone-list.component.html

@@ -2,8 +2,7 @@
     <app-list #listComponent
               [listId]="'zoneList'"
               [getDataFunction]="getData"
-              [onNavigateToDetailsFunction]="navigateToZoneDetail"
-              [onSortFunction]="onSortChange"
+              [getCustomDetailLinkFunction]="getCustomDetailLink"
               [listColDefinitions]="listColDefinitions"
               [dataFormComponent]="ZoneFormComponent"
     ></app-list>

angular/src/app/_views/zone/zone-list/zone-list.component.ts

@@ -1,12 +1,12 @@
 import {Component, ViewChild} from '@angular/core';
 import {ListComponent} from "@app/_components/list/list.component";
 import {ListColDefinition} from "@app/_components/list/list-col-definition";
-import {ZoneJsonld, ZoneService} from "@app/core/api/v1";
+import {LocationJsonld, ZoneJsonld, ZoneService} from "@app/core/api/v1";
 import {Router} from "@angular/router";
 import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {ListGetDataFunctionType} from "@app/_components/list/list-get-data-function-type";
 import {Sort} from "@angular/material/sort";
-import {ROUTE_ZONES} from "@app/app-routing.module";
+import {ROUTE_LOCATIONS, ROUTE_ZONES} from "@app/app-routing.module";
 import {SearchSelectComponent} from "@app/_components/search-select/search-select.component";
 import {ZoneFormComponent} from "@app/_views/zone/zone-form/zone-form.component";
 
@@ -17,7 +17,7 @@ import {ZoneFormComponent} from "@app/_views/zone/zone-form/zone-form.component"
 })
 export class ZoneListComponent {
     @ViewChild("listComponent", {static: false}) listComponent!: ListComponent;
-
+    protected readonly ZoneFormComponent = ZoneFormComponent;
     protected listColDefinitions!: ListColDefinition[];
 
     constructor(
@@ -50,13 +50,7 @@ export class ZoneListComponent {
         );
     }
 
-    onSortChange = (sortState: Sort) => {
-    }
-
-    navigateToZoneDetail = (element: any) => {
-        const zone: ZoneJsonld = element as ZoneJsonld;
-        this.router.navigate(['/' + ROUTE_ZONES, this.appHelperService.extractId(zone.id)]);
+    getCustomDetailLink(element: ZoneJsonld) {
+        return ROUTE_ZONES + '/' + this.appHelperService.extractId(element?.id);
     }
-
-    protected readonly ZoneFormComponent = ZoneFormComponent;
 }

httpdocs/migrations/Version20241212154759.php

@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20241212154759 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE location CHANGE code code VARCHAR(255) NOT NULL');
+        $this->addSql('ALTER TABLE shipping_company CHANGE code code VARCHAR(255) NOT NULL');
+        $this->addSql('ALTER TABLE vessel CHANGE code code VARCHAR(255) NOT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE vessel CHANGE code code VARCHAR(20) NOT NULL');
+        $this->addSql('ALTER TABLE shipping_company CHANGE code code VARCHAR(20) NOT NULL');
+        $this->addSql('ALTER TABLE location CHANGE code code VARCHAR(10) NOT NULL');
+    }
+}

httpdocs/src/Entity/Location.php

@@ -22,7 +22,7 @@ class Location
     #[ORM\JoinColumn(nullable: false)]
     private Zone $zone;
 
-    #[ORM\Column(length: 10)]
+    #[ORM\Column(length: 255)]
     private string $code;
 
     #[ORM\Column(length: 255)]

httpdocs/src/Entity/ShippingCompany.php

@@ -21,7 +21,7 @@ class ShippingCompany
     #[ORM\Column(length: 255)]
     private string $name;
 
-    #[ORM\Column(length: 20, unique: true)]
+    #[ORM\Column(length: 255, unique: true)]
     private string $code;
 
     #[ORM\Column]

httpdocs/src/Entity/Vessel.php

@@ -25,7 +25,7 @@ class Vessel
     #[ORM\Column(length: 255)]
     private string $name;
 
-    #[ORM\Column(length: 20, unique: true)]
+    #[ORM\Column(length: 255, unique: true)]
     private string $code;
 
     #[ORM\Column]