wip

angular/src/app/_components/_abstract/abstract-data-form-component.ts

@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import {ModalStatus} from "@app/_helpers/modal.states";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 
 export type SaveFunction<T> = (item: T) => Observable<T>;
 export type UpdateFunction<T> = (id: string | number, item: T) => Observable<T>;
@@ -23,29 +24,32 @@ export interface FormSubmitEvent<T> {
 export abstract class AbstractDataFormComponent<T extends { [key: string]: any }> implements OnInit, AfterViewInit {
     @Input() data?: T;
     @Input() mode: FormMode = FormMode.Create;
-    @Input() id?: string | number;
     @Input() redirectAfterDelete?: string;
     @Output() submit = new EventEmitter<FormSubmitEvent<T>>();
     @Output() deleted: EventEmitter<void> = new EventEmitter<void>();
+    protected id?: string;
     protected form!: FormGroup;
 
-    constructor(
+    protected constructor(
         protected formConfig: FormGroup,
+        protected appHelperService: AppHelperService,
         protected createFn?: SaveFunction<T>,
         protected updateFn?: UpdateFunction<T>,
         protected deleteFn?: DeleteFunction,
         protected translateService?: TranslateService,
-        protected router?: Router
+        protected router?: Router,
     ) {
         this.form = formConfig;
     }
 
     ngOnInit(): void {
         this.form.reset();
-
         if (this.data) {
+            this.id = this.appHelperService.extractId(this.data?.['id'])
+            this.mode = FormMode.Edit;
             this.form.patchValue(this.data);
-        } else if (this.mode === FormMode.Create) {
+        } else {
+            this.mode = FormMode.Create;
             this.data = this.getNewDataSet();
             this.form.patchValue(this.data);
         }
@@ -60,7 +64,6 @@ export abstract class AbstractDataFormComponent<T extends { [key: string]: any }
 
     onSubmit(): void {
         if (!this.form.valid) return;
-
         const formData = this.form.value as T;
         const request$ = this.mode === FormMode.Create
             ? (this.createFn ? this.createFn(formData) : undefined)

angular/src/app/_components/_abstract/abstract-image-form-component.ts

@@ -4,6 +4,7 @@ import { FormGroup } from '@angular/forms';
 import { ImageUploadComponent } from '@app/_components/image-upload/image-upload.component';
 import { ImageUploadService } from '@app/_services/image-upload.service';
 import { ModalStatus } from '@app/_helpers/modal.states';
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 
 @Directive()
 export abstract class AbstractImageFormComponent<T extends { [key: string]: any }> extends AbstractDataFormComponent<T> {
@@ -16,6 +17,7 @@ export abstract class AbstractImageFormComponent<T extends { [key: string]: any
     constructor(
         protected imageUploadService: ImageUploadService,
         formGroup: FormGroup,
+        appHelperService: AppHelperService,
         createFunction: ((data: T) => any) | undefined,
         updateFunction: (id: string | number, data: T) => any,
         deleteFunction: (id: string | number) => any,
@@ -23,7 +25,7 @@ export abstract class AbstractImageFormComponent<T extends { [key: string]: any
         protected imageDbIdPath: string,
         ...args: any[]
     ) {
-        super(formGroup, createFunction, updateFunction, deleteFunction, ...args);
+        super(formGroup, appHelperService, createFunction, updateFunction, deleteFunction, ...args);
 
         this.submit.subscribe((event: FormSubmitEvent<T>) => {
             if (event.status === ModalStatus.Submitted) {

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

@@ -94,12 +94,11 @@
                             </ng-container>
 
                             <ng-container *ngSwitchCase="COLUMN_TYPE_BTN_EDIT">
-                                <span class="btn btn-primary bi bi-pencil p-2-4"
-                                    data-type="user-tool" data-action="edit" (click)="onEditFunction(element)"></span>
+                                <span class="spt-icon-edit" data-type="user-tool" data-action="edit" (click)="onEditData(element)"></span>
                             </ng-container>
 
                             <ng-container *ngSwitchCase="COLUMN_TYPE_DATE">
-                                {{ getElementValue(element, column) | date:'dd.MM.YYYY - HH:mm':'GMT+0200' }}
+                                {{ getElementValue(element, column) | date:'dd.MM.YYYY - HH:mm':'GMT+0000' }}
                             </ng-container>
 
                             <ng-container *ngSwitchCase="COLUMN_TYPE_EMAIL">

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

@@ -32,6 +32,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
     @Input() public dataFormComponentData?: any;
     @Input() public searchable: boolean;
     @Input() public showDetailButton: boolean;
+    @Input() public showEditButton: boolean;
     @Input() public showPosition: boolean;
     @Input() public showFilterBar: boolean;
     @Input() public listColDefinitions!: ListColDefinition[];
@@ -83,8 +84,9 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
         private router: Router,
     ) {
         this.searchable = true;
-        this.showDetailButton = true;
         this.showPosition = true;
+        this.showDetailButton = true;
+        this.showEditButton = true;
         this.showFilterBar = true;
         this.filterExists = false;
         this.filterObj = {};
@@ -93,6 +95,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
         this.dataSource = new MatTableDataSource<any>();
         this.filterConfig = null;
         this.detailLinkNewTab = false;
+        this.dataFormComponentData = {};
     }
 
     ngOnInit(): void {
@@ -100,6 +103,9 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
         if (this.showPosition) {
             this.listColDefinitions.unshift(ListComponent.getDefaultColPosition());
         }
+        if (this.showEditButton) {
+            this.listColDefinitions.unshift(ListComponent.getDefaultColEditBtn());
+        }
         if (this.showDetailButton) {
             const url = this.getCustomDetailLinkFunction !== undefined ? '' : this.router.routerState.snapshot.url;
             this.listColDefinitions.unshift(ListComponent.getDefaultColDetailBtnLink(url));
@@ -299,7 +305,6 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
         return "/assets/images/icons/dummy-person.png"
     }
 
-
     getColCssClass(column: ListColDefinition): string {
         switch (column.type) {
             case ListComponent.COLUMN_TYPE_DETAIL:
@@ -338,6 +343,14 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
         } as ListColDefinition;
     }
 
+    public static getDefaultColEditBtn(): ListColDefinition {
+        return {
+            name: 'edit',
+            text: '',
+            type: ListComponent.COLUMN_TYPE_BTN_EDIT
+        } as ListColDefinition;
+    }
+
     public static getDefaultColPosition(): ListColDefinition {
         return {
             name: 'pos',
@@ -398,6 +411,15 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
         );
     }
 
+    public onEditData(element: any) {
+        this.dataFormComponentData.data = element;
+        this.appHelperService.openModal(
+            this.dataFormComponent,
+            this.dataFormComponentData,
+            this.getData
+        );
+    }
+
     public getFilterJsonString(): any {
         return JSON.stringify(this.filterObj);
     }

angular/src/app/_helpers/app-helper.service.ts

@@ -47,7 +47,6 @@ export class AppHelperService {
 
     public openModal(component: any, data: any, callback?: (callbackParam?: any) => void, callbackParam?: any): Promise<ModalStatus> {
         const modalRef = this.modalService.open(component);
-        console.log(data);
         for (const key in data) {
             modalRef.componentInstance[key] = data[key];
         }
@@ -114,4 +113,8 @@ export class AppHelperService {
         return result as T;
     }
 
+    public getDateTimeWithoutTimezone(date?: Date) {
+        const res: Date = date ?? new Date();
+        return `${res.getFullYear()}-${String(res.getMonth() + 1).padStart(2, '0')}-${String(res.getDate()).padStart(2, '0')} ${String(res.getHours()).padStart(2, '0')}:${String(res.getMinutes()).padStart(2, '0')}:${String(res.getSeconds()).padStart(2, '0')}`;
+    }
 }

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

@@ -2,8 +2,6 @@
     <div class="spt-container">
         <app-location-form
             [data]="location"
-            [mode]="FormMode.Edit"
-            [id]="appHelperService.extractId(location.id!)"
             (submit)="onFormUpdate($event)"
         ></app-location-form>
     </div>

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

@@ -1,7 +1,13 @@
 <div class="spt-container">
-    <div class="spt-headline d-flex justify-content-between align-items-start">
-        <h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.location' | translate }}</h2>
-    </div>
+    @if (!isEditMode()) {
+        <div class="spt-headline d-flex justify-content-between align-items-start">
+            <h2>{{ ('basic.create') | translate }} {{ 'model.location' | translate }}</h2>
+        </div>
+    } @else {
+        <div class="spt-headline d-flex justify-content-between align-items-start">
+            <h2>{{ ('basic.edit') | translate }} {{ 'model.location' | translate }}: {{ data?.name }}</h2>
+        </div>
+    }
     <div class="spt-form">
         <form [formGroup]="locationForm" (ngSubmit)="onSubmit()">
             <div class="row">

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

@@ -9,7 +9,6 @@ import { TranslateService } from "@ngx-translate/core";
 import { Router } from "@angular/router";
 import { ROUTE_BASE_DATA } from "@app/app-routing.module";
 import {AppHelperService} from "@app/_helpers/app-helper.service";
-import {Validators} from "@angular/forms";
 
 @Component({
     selector: 'app-location-form',
@@ -23,12 +22,13 @@ export class LocationFormComponent extends AbstractDataFormComponent<LocationJso
     constructor(
         private locationService: LocationService,
         private zoneService: ZoneService,
-        private appHelperService: AppHelperService,
+        appHelperService: AppHelperService,
         translateService: TranslateService,
         router: Router
     ) {
         super(
             locationForm,
+            appHelperService,
             (data: LocationJsonld) => this.locationService.locationsPost(data),
             (id: string | number, data: LocationJsonld) => this.locationService.locationsIdPatch(
                 id.toString(),

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

@@ -2,8 +2,6 @@
     <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-form/shipping-company-form.component.html

@@ -1,7 +1,13 @@
 <div class="spt-container">
-    <div class="spt-headline d-flex justify-content-between align-items-start">
-        <h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.shipping_company' | translate }}</h2>
-    </div>
+    @if (!isEditMode()) {
+        <div class="spt-headline d-flex justify-content-between align-items-start">
+            <h2>{{ ('basic.create') | translate }} {{ 'model.shipping_company' | translate }}</h2>
+        </div>
+    } @else {
+        <div class="spt-headline d-flex justify-content-between align-items-start">
+            <h2>{{ ('basic.edit') | translate }} {{ 'model.shipping_company' | translate }}: {{ data?.name }}</h2>
+        </div>
+    }
     <div class="spt-form">
         <form [formGroup]="form" (ngSubmit)="onSubmit()">
             <div class="row">

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

@@ -5,6 +5,7 @@ import { AbstractDataFormComponent } from "@app/_components/_abstract/abstract-d
 import { TranslateService } from "@ngx-translate/core";
 import { Router } from "@angular/router";
 import { ROUTE_BASE_DATA } from "@app/app-routing.module";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 
 @Component({
     selector: 'app-shipping-company-form',
@@ -13,11 +14,13 @@ import { ROUTE_BASE_DATA } from "@app/app-routing.module";
 export class ShippingCompanyFormComponent extends AbstractDataFormComponent<ShippingCompanyJsonld> {
     constructor(
         private shippingCompanyService: ShippingCompanyService,
+        appHelperService: AppHelperService,
         translateService: TranslateService,
         router: Router
     ) {
         super(
             shippingCompanyForm,
+            appHelperService,
             (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()),

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

@@ -8,8 +8,6 @@
         <mat-tab label="{{ 'trip.view_single' | translate }}">
             <app-trip-form
                 [data]="trip"
-                [mode]="FormMode.Edit"
-                [id]="appHelperService.extractId(trip.id!)"
                 (submit)="onFormUpdate($event)"
             ></app-trip-form>
         </mat-tab>

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

@@ -1,7 +1,11 @@
 <div class="spt-container">
     @if (!isEditMode()) {
         <div class="spt-headline d-flex justify-content-between align-items-start">
-            <h2>{{ ('basic.new') | translate }} {{ 'model.trip' | translate }}</h2>
+            <h2>{{ ('basic.create') | translate }} {{ 'model.trip' | translate }}</h2>
+        </div>
+    } @else {
+        <div class="spt-headline d-flex justify-content-between align-items-start">
+            <h2>{{ ('basic.edit') | translate }} {{ 'model.trip' | translate }}: {{ data?.pilotageReference }}</h2>
         </div>
     }
     <div class="spt-form">

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

@@ -33,12 +33,13 @@ export class TripFormComponent extends AbstractDataFormComponent<TripJsonld> {
         private tripService: TripService,
         private vesselService: VesselService,
         private locationService: LocationService,
-        private appHelperService: AppHelperService,
+        appHelperService: AppHelperService,
         translateService: TranslateService,
         router: Router
     ) {
         super(
             tripForm,
+            appHelperService,
             (data: TripJsonld) => {
                 data.completed = false;
                 return this.tripService.tripsPost(data);

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

@@ -1,6 +1,7 @@
 <div class="spt-container">
     <app-list #listComponent
               [listId]="'tripList'"
+              [showEditButton]="true"
               [getDataFunction]="getData"
               [listColDefinitions]="listColDefinitions"
               [dataFormComponent]="tripFormComponent"

angular/src/app/_views/trip/trip-location-form/trip-location-form.component.html

@@ -1,7 +1,11 @@
 <div class="spt-container">
     @if (!isEditMode()) {
         <div class="spt-headline d-flex justify-content-between align-items-start">
-            <h2>{{ ('basic.new') | translate }} {{ 'model.trip_location' | translate }}</h2>
+            <h2>{{ ('basic.create') | translate }} {{ 'model.trip_location' | translate }}</h2>
+        </div>
+    } @else {
+        <div class="spt-headline d-flex justify-content-between align-items-start">
+            <h2>{{ ('basic.edit') | translate }} {{ 'model.trip_location' | translate }}: {{ data?.location?.name }}</h2>
         </div>
     }
     <div class="spt-form">

angular/src/app/_views/trip/trip-location-form/trip-location-form.component.ts

@@ -21,21 +21,22 @@ import {SearchSelectComponent} from "@app/_components/search-select/search-selec
 })
 export class TripLocationFormComponent extends AbstractDataFormComponent<TripLocationJsonld> {
 
-    @Input() public trip!: TripJsonld;
-    @Input() public arrivalDateTime?: string;
-    @Input() public departureDateTime?: string;
+    protected trip!: TripJsonld;
+    protected arrivalDateTime?: string;
+    protected departureDateTime?: string;
     protected readonly SearchSelectComponent = SearchSelectComponent;
     protected locationColDefinitions: ListColDefinition[];
 
     constructor(
         private tripLocationService: TripLocationService,
         private locationService: LocationService,
-        private appHelperService: AppHelperService,
+        appHelperService: AppHelperService,
         translateService: TranslateService,
         router: Router
     ) {
         super(
             tripLocationForm,
+            appHelperService,
             (data: TripLocationJsonld) => {
                 return this.tripLocationService.tripLocationsPost(data);
             },
@@ -68,5 +69,9 @@ export class TripLocationFormComponent extends AbstractDataFormComponent<TripLoc
         );
     }
 
+    override onSubmit() {
+        super.onSubmit();
+    }
+
     protected readonly tripLocationForm = tripLocationForm;
 }

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

@@ -1,6 +1,7 @@
 <div class="spt-container">
     <app-list #listComponent
               [listId]="'tripLocationList'"
+              [showEditButton]="true"
               [getDataFunction]="getData"
               [listColDefinitions]="listColDefinitions"
               [dataFormComponent]="tripLocationFormComponent"

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

@@ -1,4 +1,4 @@
-import {Component, Input, Type, ViewChild} from '@angular/core';
+import {Component, Input, ViewChild} from '@angular/core';
 import {ListComponent} from "@app/_components/list/list.component";
 import {ListColDefinition} from "@app/_components/list/list-col-definition";
 import {TripJsonld, TripLocationService} from "@app/core/api/v1";
@@ -99,25 +99,25 @@ export class TripLocationListComponent {
         ).pipe(
             map(response => {
                 // Set default arrival and departure time before return
-                let arrivalDateTime = new Date().toISOString();
-                let departureDateTime = new Date(new Date().setHours(new Date().getHours() + 1)).toISOString();
+                let arrivalDateTime = this.appHelperService.getDateTimeWithoutTimezone();
+                console.log(arrivalDateTime);
+                let departureDateTime = this.appHelperService.getDateTimeWithoutTimezone(new Date(new Date().setHours(new Date().getHours() + 1)));
                 if (response.member && response.member.length > 0) {
                     const lastEntry = response.member[response.member.length - 1];
                     if (lastEntry.departureDateTime) {
                         const departureDate = new Date(lastEntry.departureDateTime);
                         departureDate.setDate(departureDate.getDate() + 1);
-                        arrivalDateTime = departureDate.toISOString();
+                        arrivalDateTime = this.appHelperService.getDateTimeWithoutTimezone(departureDate);
 
                         const arrivalDate = new Date(arrivalDateTime);
                         arrivalDate.setHours(arrivalDate.getHours() + 1);
-                        departureDateTime = arrivalDate.toISOString();
+                        departureDateTime = this.appHelperService.getDateTimeWithoutTimezone(arrivalDate);
                     }
                 }
                 this.dataFormComponentData = {
                     trip: this.trip,
                     arrivalDateTime: arrivalDateTime,
                     departureDateTime: departureDateTime
-
                 };
 
                 return response;

angular/src/app/_views/user-trip/user-trip-detail/user-trip-detail.component.html

@@ -9,8 +9,6 @@
         <mat-tab label="{{ 'model.user_trip' | translate }}">
             <app-user-trip-form
                 [data]="userTrip"
-                [mode]="FormMode.Edit"
-                [id]="appHelperService.extractId(userTrip.id!)"
                 (submit)="onFormUpdate($event)"
             >
             </app-user-trip-form>

angular/src/app/_views/user-trip/user-trip-form/user-trip-form.component.ts

@@ -20,13 +20,14 @@ export class UserTripFormComponent extends AbstractImageFormComponent<UserTripJs
     constructor(
         private userTripService: UserTripService,
         imageUploadService: ImageUploadService,
-        private appHelperService: AppHelperService,
+        appHelperService: AppHelperService,
         translateService: TranslateService,
         router: Router
     ) {
         super(
             imageUploadService,
             userTripForm,
+            appHelperService,
             undefined,
             (id: string | number, data: UserTripJsonld) =>
                 this.userTripService.userTripsIdPatch(

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

@@ -6,8 +6,6 @@
         <mat-tab label="{{ 'basic.details' | translate }}">
             <app-user-form
                 [data]="user"
-                [mode]="FormMode.Edit"
-                [id]="appHelperService.extractId(user.id!)"
                 (submit)="onFormUpdate($event)"
             >
             </app-user-form>

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

@@ -1,7 +1,11 @@
 <div class="spt-container">
     @if (!isEditMode()) {
         <div class="spt-headline d-flex justify-content-between align-items-start">
-            <h2>{{ ('basic.new') | translate }} {{ 'model.user' | translate }}</h2>
+            <h2>{{ ('basic.create') | translate }} {{ 'model.user' | translate }}</h2>
+        </div>
+    } @else {
+        <div class="spt-headline d-flex justify-content-between align-items-start">
+            <h2>{{ ('basic.edit') | translate }} {{ 'model.user' | translate }}: {{ data?.fullName }}</h2>
         </div>
     }
     <div class="spt-form">

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

@@ -42,13 +42,14 @@ export class UserFormComponent extends AbstractImageFormComponent<UserJsonld> {
     constructor(
         private userService: UserService,
         imageUploadService: ImageUploadService,
-        private appHelperService: AppHelperService,
+        appHelperService: AppHelperService,
         translateService: TranslateService,
         router: Router
     ) {
         super(
             imageUploadService,
             userForm,
+            appHelperService,
             (data: UserJsonld) => userService.usersPost(data),
             (id: string | number, data: UserJsonld) =>
                 userService.usersIdPatch(

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

@@ -2,8 +2,6 @@
     <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-form/vessel-form.component.html

@@ -1,7 +1,13 @@
 <div class="spt-container">
-    <div class="spt-headline d-flex justify-content-between align-items-start">
-        <h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.vessel' | translate }}</h2>
-    </div>
+    @if (!isEditMode()) {
+        <div class="spt-headline d-flex justify-content-between align-items-start">
+            <h2>{{ ('basic.create') | translate }} {{ 'model.vessel' | translate }}</h2>
+        </div>
+    } @else {
+        <div class="spt-headline d-flex justify-content-between align-items-start">
+            <h2>{{ ('basic.edit') | translate }} {{ 'model.vessel' | translate }}: {{ data?.name }}</h2>
+        </div>
+    }
     <div class="spt-form">
         <form [formGroup]="form" (ngSubmit)="onSubmit()">
             <div class="row">

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

@@ -21,12 +21,13 @@ export class VesselFormComponent extends AbstractDataFormComponent<VesselJsonld>
     constructor(
         private vesselService: VesselService,
         private shippingCompanyService: ShippingCompanyService,
-        private appHelperService: AppHelperService,
+        appHelperService: AppHelperService,
         translateService: TranslateService,
         router: Router
     ) {
         super(
             vesselForm,
+            appHelperService,
             (data: VesselJsonld) => this.vesselService.vesselsPost(data),
             (id: string | number, data: VesselJsonld) =>
                 this.vesselService.vesselsIdPatch(

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

@@ -2,8 +2,6 @@
     <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-form/zone-form.component.html

@@ -1,7 +1,13 @@
 <div class="spt-container">
-    <div class="spt-headline d-flex justify-content-between align-items-start">
-        <h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.zone' | translate }}</h2>
-    </div>
+    @if (!isEditMode()) {
+        <div class="spt-headline d-flex justify-content-between align-items-start">
+            <h2>{{ ('basic.create') | translate }} {{ 'model.zone' | translate }}</h2>
+        </div>
+    } @else {
+        <div class="spt-headline d-flex justify-content-between align-items-start">
+            <h2>{{ ('basic.edit') | translate }} {{ 'model.zone' | translate }}: {{ data?.name }}</h2>
+        </div>
+    }
     <div class="spt-form">
         <form [formGroup]="form" (ngSubmit)="onSubmit()">
             <div class="row">

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

@@ -5,6 +5,7 @@ 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";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
 
 @Component({
     selector: 'app-zone-form',
@@ -13,11 +14,13 @@ import {ROUTE_BASE_DATA} from "@app/app-routing.module";
 export class ZoneFormComponent extends AbstractDataFormComponent<ZoneJsonld> {
     constructor(
         private zoneService: ZoneService,
+        appHelperService: AppHelperService,
         translateService: TranslateService,
         router: Router
     ) {
         super(
             zoneForm,
+            appHelperService,
             (data: ZoneJsonld) => this.zoneService.zonesPost(data),
             (id: string | number, data: ZoneJsonld) => this.zoneService.zonesIdPatch(id.toString(), data),
             (id: string | number) => zoneService.zonesIdDelete(id.toString()),

angular/src/assets/i18n/en.json

@@ -106,7 +106,7 @@
     "logout": "Logout",
     "company_name": "Imaq Pilotage",
     "users": "Users / Pilots",
-    "new": "New",
+    "create": "Create",
     "edit_before": "",
     "edit_after": "Edit",
     "details": "Details",

angular/src/assets/images/icons/icon-edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="100px" height="100px"><path d="M 43.050781 1.9746094 C 41.800781 1.9746094 40.549609 2.4503906 39.599609 3.4003906 L 38.800781 4.1992188 L 45.699219 11.099609 L 46.5 10.300781 C 48.4 8.4007812 48.4 5.3003906 46.5 3.4003906 C 45.55 2.4503906 44.300781 1.9746094 43.050781 1.9746094 z M 37.482422 6.0898438 A 1.0001 1.0001 0 0 0 36.794922 6.3925781 L 4.2949219 38.791016 A 1.0001 1.0001 0 0 0 4.0332031 39.242188 L 2.0332031 46.742188 A 1.0001 1.0001 0 0 0 3.2578125 47.966797 L 10.757812 45.966797 A 1.0001 1.0001 0 0 0 11.208984 45.705078 L 43.607422 13.205078 A 1.0001 1.0001 0 1 0 42.191406 11.794922 L 9.9921875 44.09375 L 5.90625 40.007812 L 38.205078 7.8085938 A 1.0001 1.0001 0 0 0 37.482422 6.0898438 z"/></svg>

angular/src/assets/scss/_button.scss

@@ -102,6 +102,19 @@ body {
   }
 }
 
+.spt-icon-edit {
+  display: block;
+  width: 32px;
+  height: 32px;
+  background: #2e3a43 url("/assets/images/icons/icon-edit.svg") no-repeat center center;
+  background-size: 20px auto;
+  border-color: #2e3a43;
+  &:hover {
+    background-color: #6d757c !important;
+    border-color: #6d757c !important;
+  }
+}
+
 .spt-icon-unassign {
   display: inline-block;
   width: 20px;

httpdocs/src/Mapper/ShippingCompanyApiToEntityMapper.php

@@ -6,7 +6,6 @@ use App\Entity\ShippingCompany;
 use App\Repository\ShippingCompanyRepository;
 use Symfonycasts\MicroMapper\AsMapper;
 use Symfonycasts\MicroMapper\MapperInterface;
-use Symfonycasts\MicroMapper\MicroMapperInterface;
 
 #[AsMapper(from: ShippingCompanyApi::class, to: ShippingCompany::class)]
 class ShippingCompanyApiToEntityMapper implements MapperInterface