properly display line-breaks in customer address fields

src/main/webapp/app/entities/customer/customer-detail.component.html

@@ -19,7 +19,7 @@
                 </dd>
                 <dt><span jhiTranslate="hsadminNgApp.customer.contractualAddress">Contractual Address</span></dt>
                 <dd>
-                    <span>{{customer.contractualAddress}}</span>
+                    <span [innerHTML]="customer.contractualAddress | linebreaks"></span>
                 </dd>
                 <dt><span jhiTranslate="hsadminNgApp.customer.contractualSalutation">Contractual Salutation</span></dt>
                 <dd>
@@ -27,7 +27,7 @@
                 </dd>
                 <dt><span jhiTranslate="hsadminNgApp.customer.billingAddress">Billing Address</span></dt>
                 <dd>
-                    <span>{{customer.billingAddress}}</span>
+                    <span [innerHTML]="customer.billingAddress | linebreaks"></span>
                 </dd>
                 <dt><span jhiTranslate="hsadminNgApp.customer.billingSalutation">Billing Salutation</span></dt>
                 <dd>

src/main/webapp/app/entities/customer/customer-update.component.html

@@ -63,9 +63,10 @@
                     </div>
                 </div>
                 <div class="form-group">
-                    <label class="form-control-label" jhiTranslate="hsadminNgApp.customer.contractualAddress" for="field_contractualAddress">Contractual Address</label>
+                    <label class="form-control-label" jhiTranslate="hsadminNgApp.customer.contractualAddress"
-                    <input type="text" class="form-control" name="contractualAddress" id="field_contractualAddress"
+                           for="field_contractualAddress">Contractual Address X</label>
-                        [(ngModel)]="customer.contractualAddress" required maxlength="400"/>
+                    <textarea class="form-control" name="contractualAddress" id="field_contractualAddress" rows="3"
+                              [(ngModel)]="customer.contractualAddress" required maxlength="400"></textarea>
                     <div [hidden]="!(editForm.controls.contractualAddress?.dirty && editForm.controls.contractualAddress?.invalid)">
                         <small class="form-text text-danger"
                         [hidden]="!editForm.controls.contractualAddress?.errors?.required" jhiTranslate="entity.validation.required">
@@ -90,8 +91,8 @@
                 </div>
                 <div class="form-group">
                     <label class="form-control-label" jhiTranslate="hsadminNgApp.customer.billingAddress" for="field_billingAddress">Billing Address</label>
-                    <input type="text" class="form-control" name="billingAddress" id="field_billingAddress"
+                    <textarea class="form-control" name="billingAddress" id="field_billingAddress" rows="3"
-                        [(ngModel)]="customer.billingAddress" maxlength="400"/>
+                              [(ngModel)]="customer.billingAddress" maxlength="400"></textarea>
                     <div [hidden]="!(editForm.controls.billingAddress?.dirty && editForm.controls.billingAddress?.invalid)">
                         <small class="form-text text-danger"
                         [hidden]="!editForm.controls.billingAddress?.errors?.maxlength" jhiTranslate="entity.validation.maxlength" [translateValues]="{ max: 400 }">

src/main/webapp/app/entities/customer/customer.component.html

@@ -37,9 +37,9 @@
                 <td>{{customer.number}}</td>
                 <td>{{customer.prefix}}</td>
                 <td>{{customer.name}}</td>
-                <td>{{customer.contractualAddress}}</td>
+                <td>{{customer.contractualAddress | linebreaks:' | '}}</td>
                 <td>{{customer.contractualSalutation}}</td>
-                <td>{{customer.billingAddress}}</td>
+                <td>{{customer.billingAddress | linebreaks:' | '}}</td>
                 <td>{{customer.billingSalutation}}</td>
                 <td class="text-right">
                     <div class="btn-group flex-btn-group-container">

src/main/webapp/app/shared/shared-common.module.ts

@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
 
-import { HsadminNgSharedLibsModule, FindLanguageFromKeyPipe, JhiAlertComponent, JhiAlertErrorComponent } from './';
+import { FindLanguageFromKeyPipe, HsadminNgSharedLibsModule, JhiAlertComponent, JhiAlertErrorComponent } from './';
+import { LinebreaksPipe } from 'app/shared/util/linebreaks-pipe';
 
 @NgModule({
     imports: [HsadminNgSharedLibsModule],
-    declarations: [FindLanguageFromKeyPipe, JhiAlertComponent, JhiAlertErrorComponent],
+    declarations: [FindLanguageFromKeyPipe, LinebreaksPipe, JhiAlertComponent, JhiAlertErrorComponent],
-    exports: [HsadminNgSharedLibsModule, FindLanguageFromKeyPipe, JhiAlertComponent, JhiAlertErrorComponent]
+    exports: [HsadminNgSharedLibsModule, FindLanguageFromKeyPipe, LinebreaksPipe, JhiAlertComponent, JhiAlertErrorComponent]
 })
 export class HsadminNgSharedCommonModule {}

src/main/webapp/app/shared/util/linebreaks-pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'linebreaks' })
+export class LinebreaksPipe implements PipeTransform {
+    transform(text: string, as: string = '<br/>'): string {
+        if (text == null) {
+            return null;
+        }
+        return text.replace(/\n/g, as);
+    }
+}

src/test/javascript/spec/app/shared/util/linebreaks-pipe.spec.ts

@@ -0,0 +1,37 @@
+import { LinebreaksPipe } from 'app/shared/util/linebreaks-pipe';
+
+/* To run these tests in IntelliJ IDEA, you need a run configuration with
+    Configuration File:
+        ~/Projekte/Hostsharing/hsadmin-ng/src/test/javascript/jest.conf.js
+    and a Node Interpreter, e.g. if installed with nvm, this could be:
+        ~/.nvm/versions/node/v10.15.3/bin/node
+ */
+describe('LinebreaksPipe Tests', () => {
+    describe('LinebreaksPipe', () => {
+        let pipe: LinebreaksPipe;
+
+        beforeEach(() => {
+            pipe = new LinebreaksPipe();
+        });
+
+        it('converts null to null', () => {
+            expect(pipe.transform(null)).toBe(null);
+        });
+
+        it('converts empty string to empty string', () => {
+            expect(pipe.transform('')).toBe('');
+        });
+
+        it('converts string not containing line breaks to identical string', () => {
+            expect(pipe.transform('no linebreak here')).toBe('no linebreak here');
+        });
+
+        it('converts string containing line breaks to string containing <br/> by default', () => {
+            expect(pipe.transform('some\nlinebreaks\nhere')).toBe('some<br/>linebreaks<br/>here');
+        });
+
+        it('converts string containing line breaks string containing specified replacement', () => {
+            expect(pipe.transform('some\nlinebreaks\nhere', ' | ')).toBe('some | linebreaks | here');
+        });
+    });
+});