feat(rich-text): adiciona eventos de mudança de valores

Definidas propriedades relacionadas aos eventos change e changeModel.

Fixes DTHFUI-1719

Author: Samir Hassan Ayoub

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text-base.component.ts

@@ -1,5 +1,5 @@
 import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms';
-import { Input } from '@angular/core';
+import { EventEmitter, Input, Output } from '@angular/core';
 
 import { convertToBoolean } from '../../../utils/util';
 import { requiredFailed } from '../validators';
@@ -139,6 +139,12 @@ export abstract class PoRichTextBaseComponent implements ControlValueAccessor, V
     return this._required;
   }
 
+  /** Evento disparado ao deixar o campo e que recebe como parâmetro o valor alterado. */
+  @Output('p-change') change?: EventEmitter<any> = new EventEmitter();
+
+  /** Evento disparado ao modificar valor do model e que recebe como parâmetro o valor alterado. */
+  @Output('p-change-model') changeModel?: EventEmitter<any> = new EventEmitter();
+
   // Função implementada do ControlValueAccessor
   // Usada para interceptar as mudanças e não atualizar automaticamente o Model
   registerOnChange(func: any): void {

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text-body/po-rich-text-body.component.html

@@ -3,8 +3,10 @@
   [attr.contenteditable]="!readonly"
   [attr.data-placeholder]="placeholder"
   [style.height.px]="height"
+  (blur)="onBlur()"
   (click)="onClick()"
   (cut)="update()"
+  (focus)="onFocus()"
   (keyup)="onKeyUp()"
   (paste)="update()">
 </div>

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text-body/po-rich-text-body.component.spec.ts

@@ -162,6 +162,54 @@ describe('PoRichTextBodyComponent:', () => {
       expect(component.bodyElement.nativeElement.insertAdjacentHTML).toHaveBeenCalledWith('afterbegin', component.modelValue);
     });
 
+    it('onFocus: should set a value to `valueBeforeChange`', () => {
+      component.modelValue = 'value';
+
+      component.onFocus();
+
+      expect(component['valueBeforeChange']).toBe('value');
+    });
+
+    it('onBlur: should emit modelValue change', fakeAsync((): void => {
+      const fakeThis = {
+        modelValue: 'value',
+        valueBeforeChange: '1',
+        change: component.change,
+        bodyElement: {
+          nativeElement: {
+            innerHTML: 'value'
+          }
+        }
+      };
+
+      spyOn(fakeThis.change, 'emit');
+      component.onBlur.call(fakeThis);
+      tick(250);
+
+      expect(fakeThis.change.emit).toHaveBeenCalledWith(fakeThis.modelValue);
+    }));
+
+    it('onBlur: shouldn`t emit change value doesn`t changed', fakeAsync((): void => {
+      const fakeThis = {
+        modelValue: 'value',
+        valueBeforeChange: 'value',
+        change: {
+          emit: () => {}
+        },
+        bodyElement: {
+          nativeElement: {
+            innerHTML: 'value'
+          }
+        }
+      };
+
+      spyOn(fakeThis.change, 'emit');
+      component.onBlur.call(fakeThis);
+      tick(250);
+
+      expect(fakeThis.change.emit).not.toHaveBeenCalled();
+    }));
+
   });
 
   describe('Templates: ', () => {

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text-body/po-rich-text-body.component.ts

@@ -10,6 +10,9 @@ const poRichTextBodyCommands = [
 })
 export class PoRichTextBodyComponent implements OnInit {
 
+  private timeoutChange: any;
+  private valueBeforeChange: any;
+
   @ViewChild('bodyElement', { static: true }) bodyElement: ElementRef;
 
   @Input('p-height') height?: string;
@@ -20,6 +23,8 @@ export class PoRichTextBodyComponent implements OnInit {
 
   @Input('p-readonly') readonly?: string;
 
+  @Output('p-change') change = new EventEmitter<any>();
+
   @Output('p-commands') commands = new EventEmitter<any>();
 
   @Output('p-value') value = new EventEmitter<any>();
@@ -38,10 +43,23 @@ export class PoRichTextBodyComponent implements OnInit {
     this.value.emit(this.modelValue);
   }
 
+  onBlur() {
+    if (this.modelValue !== this.valueBeforeChange) {
+      clearTimeout(this.timeoutChange);
+      this.timeoutChange = setTimeout(() => {
+        this.change.emit(this.modelValue);
+      }, 200);
+    }
+  }
+
   onClick() {
     this.emitSelectionCommands();
   }
 
+  onFocus() {
+    this.valueBeforeChange = this.modelValue;
+  }
+
   onKeyUp() {
     // Tratamento necessário para eliminar a tag <br> criada no firefox quando o body for limpo.
     const bodyElement = this.bodyElement.nativeElement;

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text.component.html

@@ -10,6 +10,7 @@
       [p-model-value]="value"
       [p-placeholder]="placeholder"
       [p-readonly]="readonly"
+      (p-change)="onChangeValue($event)"
       (p-commands)="richTextToolbar.setButtonsStates($event)"
       (p-value)="updateValue($event)">
     </po-rich-text-body>

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text.component.spec.ts

@@ -128,12 +128,14 @@ describe('PoRichTextComponent:', () => {
 
     it('updateValue: should apply values to value, invalid and call updateModel', () => {
       spyOn(component, <any>'updateModel');
+      spyOn(component, <any>'controlChangeModelEmitter');
 
       component.updateValue('value');
 
       expect(component.value).toBe('value');
       expect(component.invalid).toBeFalsy();
       expect(component['updateModel']).toHaveBeenCalledWith(component.value);
+      expect(component['controlChangeModelEmitter']).toHaveBeenCalledWith(component.value);
     });
 
     it('validateClassesForRequired: should add ng-invalid and dirty classes if value is null and is required', fakeAsync(() => {
@@ -167,5 +169,36 @@ describe('PoRichTextComponent:', () => {
 
       expect(nativeElement.classList).not.toContain('ng-invalid');
     }));
+
+    it('onChangeValue: should emit change', () => {
+      spyOn(component.change, 'emit');
+
+      component.onChangeValue('value');
+
+      expect(component.change.emit).toHaveBeenCalledWith('value');
+    });
+
+    it('controlChangeModelEmitter: should emit changeModel and set modelLastUpdate value', () => {
+      const value = 'value';
+      component['modelLastUpdate'] = '1';
+
+      spyOn(component.changeModel, 'emit');
+
+      component['controlChangeModelEmitter'](value);
+
+      expect(component.changeModel.emit).toHaveBeenCalledWith(value);
+      expect(component['modelLastUpdate']).toBe(value);
+    });
+
+    it('controlChangeModelEmitter: shouldn`t emit changeModel if modelLastValue and value have same value', () => {
+      const value = 'value';
+      component['modelLastUpdate'] = 'value';
+
+      spyOn(component.changeModel, 'emit');
+
+      component['controlChangeModelEmitter'](value);
+
+      expect(component.changeModel.emit).not.toHaveBeenCalled();
+    });
   });
 });

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text.component.ts

@@ -42,6 +42,7 @@ import { PoRichTextBaseComponent } from './po-rich-text-base.component';
 export class PoRichTextComponent extends PoRichTextBaseComponent implements AfterViewInit, OnDestroy {
 
   private listener = this.validateClassesForRequired.bind(this);
+  private modelLastUpdate: any;
 
   get errorMsg() {
     return (this.errorMessage !== '' && !this.value && this.required && this.invalid) ? this.errorMessage : '';
@@ -68,12 +69,24 @@ export class PoRichTextComponent extends PoRichTextBaseComponent implements Afte
     }
   }
 
+  onChangeValue(value: any) {
+    this.change.emit(value);
+  }
+
   updateValue(value: string) {
     this.value = value;
     this.invalid = !value;
+    this.controlChangeModelEmitter(this.value);
     this.updateModel(this.value);
   }
 
+  private controlChangeModelEmitter(value: any) {
+    if (this.modelLastUpdate !== value) {
+      this.changeModel.emit(value);
+      this.modelLastUpdate = value;
+    }
+  }
+
   private validateClassesForRequired() {
     setTimeout(() => {
       const value = this.value;

projects/ui/src/lib/components/po-field/po-rich-text/samples/sample-po-rich-text-labs/sample-po-rich-text-labs.component.html

@@ -8,7 +8,9 @@
   [p-optional]="properties.includes('optional')"
   [p-placeholder]="placeholder"
   [p-readonly]="properties.includes('readonly')"
-  [p-required]="properties.includes('required')">
+  [p-required]="properties.includes('required')"
+  (p-change)="changeEvent('p-change')"
+  (p-change-model)="changeEvent('p-change-model')">
 </po-rich-text>
 
 <po-divider></po-divider>
@@ -19,6 +21,12 @@
     p-label="Model"
     [p-value]="richText">
   </po-info>
+
+  <po-info
+    class="po-md-6"
+    p-label="Event"
+    [p-value]="event">
+  </po-info>
 </div>
 
 <po-divider p-label="Properties"></po-divider>

projects/ui/src/lib/components/po-field/po-rich-text/samples/sample-po-rich-text-labs/sample-po-rich-text-labs.component.ts

@@ -8,6 +8,7 @@ import { PoCheckboxGroupOption } from '@portinari/portinari-ui';
 })
 export class SamplePoRichTextLabsComponent implements OnInit {
   errorMessage: string;
+  event: string;
   help: string;
   height: number;
   label: string;
@@ -25,6 +26,10 @@ export class SamplePoRichTextLabsComponent implements OnInit {
     this.restore();
   }
 
+  changeEvent(event: string) {
+    this.event = event;
+  }
+
   restore() {
     this.errorMessage = '';
     this.help = '';