properly display line-breaks in customer address fields

This commit is contained in:
Michael Hoennig 2019-04-09 11:33:34 +02:00
parent fe60e789d1
commit 9039fa5109
6 changed files with 62 additions and 12 deletions

View File

@ -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>

View File

@ -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>
<input type="text" class="form-control" name="contractualAddress" id="field_contractualAddress"
[(ngModel)]="customer.contractualAddress" required maxlength="400"/>
<label class="form-control-label" jhiTranslate="hsadminNgApp.customer.contractualAddress"
for="field_contractualAddress">Contractual Address X</label>
<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"
[(ngModel)]="customer.billingAddress" maxlength="400"/>
<textarea class="form-control" name="billingAddress" id="field_billingAddress" rows="3"
[(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 }">

View File

@ -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">

View File

@ -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],
exports: [HsadminNgSharedLibsModule, FindLanguageFromKeyPipe, JhiAlertComponent, JhiAlertErrorComponent]
declarations: [FindLanguageFromKeyPipe, LinebreaksPipe, JhiAlertComponent, JhiAlertErrorComponent],
exports: [HsadminNgSharedLibsModule, FindLanguageFromKeyPipe, LinebreaksPipe, JhiAlertComponent, JhiAlertErrorComponent]
})
export class HsadminNgSharedCommonModule {}

View File

@ -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);
}
}

View File

@ -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');
});
});
});