feat(admin-ui): Automatically populate shipping method code

admin-ui/src/app/settings/components/shipping-method-detail/shipping-method-detail.component.html

@@ -22,12 +22,17 @@
     </vdr-ab-right>
 </vdr-action-bar>
 
-<form class="form" [formGroup]="detailForm">
-    <vdr-form-field [label]="'common.code' | translate" for="code">
-        <input id="code" type="text" formControlName="code" />
-    </vdr-form-field>
+<form class="form" [formGroup]="detailForm" *ngIf="entity$ | async as shippingMethod">
     <vdr-form-field [label]="'common.description' | translate" for="description">
-        <input id="description" type="text" formControlName="description" />
+        <input
+            id="description"
+            type="text"
+            formControlName="description"
+            (input)="updateCode(shippingMethod.code, $event.target.value)"
+        />
+    </vdr-form-field>
+    <vdr-form-field [label]="'common.code' | translate" for="code" [readOnlyToggle]="true">
+        <input id="code" type="text" formControlName="code" />
     </vdr-form-field>
 
     <div class="clr-row">

admin-ui/src/app/settings/components/shipping-method-detail/shipping-method-detail.component.ts

@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { combineLatest, merge, Observable, of, Subject } from 'rxjs';
 import { mergeMap, switchMap, take, takeUntil } from 'rxjs/operators';
+import { normalizeString } from 'shared/normalize-string';
 
 import { BaseDetailComponent } from '../../../common/base-detail.component';
 import {
@@ -120,6 +121,15 @@ export class ShippingMethodDetailComponent extends BaseDetailComponent<ShippingM
         this.destroy();
     }
 
+    updateCode(currentCode: string, nameValue: string) {
+        if (!currentCode) {
+            const codeControl = this.detailForm.get(['code']);
+            if (codeControl && codeControl.pristine) {
+                codeControl.setValue(normalizeString(nameValue, '-'));
+            }
+        }
+    }
+
     selectChecker(checker: ConfigurableOperationDefinition) {
         this.selectedCheckerDefinition = checker;
         this.selectedChecker = this.configurableDefinitionToInstance(checker);