Merge pull request #32 from casejs/feature/truncate

truncate text yields

packages/case/client/src/app/dynamic-entity/dynamic-entity.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core'
 import { ReactiveFormsModule } from '@angular/forms'
 
 import { AppRoutingModule } from '../app-routing.module'
+import { TruncatePipe } from '../pipes/truncate.pipe'
 import { SettingsService } from '../services/settings.service'
 import { DynamicEntityCreateEditComponent } from './components/dynamic-entity-create-edit/dynamic-entity-create-edit.component'
 import { DynamicEntityDetailComponent } from './components/dynamic-entity-detail/dynamic-entity-detail.component'
@@ -49,6 +50,7 @@ import { YieldComponent } from './yields/yield.component'
  CurrencyYieldComponent,
  DateYieldComponent,
  EmailYieldComponent,
+ TruncatePipe,
  FilterComponent,
  MultiSelectInputComponent
  ],

packages/case/client/src/app/dynamic-entity/yields/text-yield/text-yield.component.ts

@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'
 
 @Component({
  selector: 'app-text-yield',
- template: `{{ value }}`,
+ template: `{{ value | truncate : ['30'] }}`,
  styleUrls: ['./text-yield.component.scss']
 })
 export class TextYieldComponent {

packages/case/client/src/app/pipes/truncate.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+@Pipe({
+ name: 'truncate'
+})
+export class TruncatePipe implements PipeTransform {
+ transform(value: string, args: string[]): string {
+ const limit = args.length > 0 ? parseInt(args[0], 10) : 20
+ const trail = args.length > 1 ? args[1] : '...'
+ return value.length > limit ? value.substring(0, limit) + trail : value
+ }
+}