fix(editor): fix data field not receiver value in first change

TemainfoSoftware · Mar 13, 2021 · 7864ef0 · 7864ef0
1 parent 8fa3975
commit 7864ef0
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 47 deletions.
diff --git a/projects/truly-ui/src/components/editor/editor.ts b/projects/truly-ui/src/components/editor/editor.ts
@@ -20,7 +20,7 @@
  SOFTWARE.
  */
 import {
-  AfterContentInit,
+  AfterContentInit, ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -36,7 +36,7 @@ import {trigger, transition, style, animate} from '@angular/animations';
 import {ToolbarConfigModel} from './model/toolbar-config.model';
 import {ToolbarConfig} from './interfaces/toolbar-config';
 import {I18nService} from '../i18n/i18n.service';
-import {ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl} from '@angular/forms';
+import {ControlValueAccessor, NgControl} from '@angular/forms';
 import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
 import {Subscription} from 'rxjs';
 import {EditorService} from './services/editor.service';
@@ -154,6 +154,7 @@ export class TlEditor implements ControlValueAccessor, AfterContentInit, OnChang
               private renderer: Renderer2,
               private editorService: EditorService,
               private sanitizer: DomSanitizer,
+              private cd: ChangeDetectorRef,
               @Optional() @Self() public ngControl: NgControl) {
     this.setControl();
     this.fontCollection = [
@@ -195,18 +196,18 @@ export class TlEditor implements ControlValueAccessor, AfterContentInit, OnChang
   listenChangeControl() {
     if ( this.control ) {
       this.subscription.add(this.control.valueChanges.subscribe(( values ) => {
-        if (!this.listenerRegistered) {
-          this.handleFieldsPropagation();
-        }
+
       }));
     }
   }
 
   handleFieldsPropagation() {
-    const fields = this.contentEditor.nativeElement.querySelectorAll('.ui-field');
-    for (const item of fields) {
-      this.preventPropagation(item);
-    }
+    setTimeout(() => {
+      const fields = this.contentEditor.nativeElement.querySelectorAll('.ui-field');
+      for (const item of fields) {
+        this.preventPropagation(item);
+      }
+    }, 100);
   }
 
   alignContent(align) {
@@ -581,7 +582,10 @@ export class TlEditor implements ControlValueAccessor, AfterContentInit, OnChang
 
   writeValue(value: any): void {
     this.content = this.sanitizer.bypassSecurityTrustHtml(value);
+    this.handleFieldsPropagation();
     this.recoverCursorPosition();
+    this.cd.detectChanges();
+
   }
 
   registerOnChange(fn: any): void {

diff --git a/projects/truly-ui/src/components/editor/parts/editor-header/editor-header.html b/projects/truly-ui/src/components/editor/parts/editor-header/editor-header.html
@@ -1,95 +1,95 @@
 <div class="ui-editor-header">
   <ul class="ui-tools-list">
-     <li class="dropdown" [tooltip]="{text: toolbarConfig.font?.family?.tooltipText, placement: 'top-center'}"
-         *ngIf="toolbarConfig.font?.family?.show">
+     <li class="dropdown" [tooltip]="{text: toolbarConfig?.font?.family?.tooltipText, placement: 'top-center'}"
+         *ngIf="toolbarConfig?.font?.family?.show">
        <select class="select" [(ngModel)]="fontSelected" (ngModelChange)="changeFont.emit($event)">
          <option *ngFor="let item of fontCollection" [ngValue]="item.value">{{ item?.description }}</option>
        </select>
      </li>
-        <li class="dropdown" [tooltip]="{text: toolbarConfig.font?.size?.tooltipText, placement: 'top-center'}"
-            *ngIf="toolbarConfig.font.size?.show">
+        <li class="dropdown" [tooltip]="{text: toolbarConfig?.font?.size?.tooltipText, placement: 'top-center'}"
+            *ngIf="toolbarConfig?.font.size?.show">
           <select class="select" [(ngModel)]="fontSizeSelected" (ngModelChange)="changeFontSize.emit($event)">
             <option *ngFor="let item of fontSizeCollection" [ngValue]="item.value">{{ item?.description }}</option>
           </select>
         </li>
-    <li [tooltip]="{text: toolbarConfig.font?.bold?.tooltipText, placement: 'top-center'}"
-        *ngIf="toolbarConfig.font.bold?.show">
+    <li [tooltip]="{text: toolbarConfig?.font?.bold?.tooltipText, placement: 'top-center'}"
+        *ngIf="toolbarConfig?.font.bold?.show">
       <button class="ui-command fa fa-bold" [ngClass]="{'ui-active-tool': activeTools.bold}"
               (click)="clickBold.emit()"></button>
     </li>
-    <li [tooltip]="{text: toolbarConfig.font.italic?.tooltipText, placement: 'top-center'}"
-        *ngIf="toolbarConfig.font.italic?.show">
+    <li [tooltip]="{text: toolbarConfig?.font.italic?.tooltipText, placement: 'top-center'}"
+        *ngIf="toolbarConfig?.font.italic?.show">
       <button class="ui-command fa fa-italic" [ngClass]="{'ui-active-tool': activeTools.italic}"
               (click)="clickItalic.emit()"></button>
     </li>
-    <li [tooltip]="{text: toolbarConfig.font.underline?.tooltipText, placement: 'top-center'}"
-        *ngIf="toolbarConfig.font.underline?.show">
+    <li [tooltip]="{text: toolbarConfig?.font.underline?.tooltipText, placement: 'top-center'}"
+        *ngIf="toolbarConfig?.font.underline?.show">
       <button class="ui-command fa fa-underline" [ngClass]="{'ui-active-tool': activeTools.underline}"
               (click)="clickUnderline.emit()"></button>
     </li>
     <li [style.border-bottom]="'2px solid ' + colorSelected" #button
-        [tooltip]="{text: toolbarConfig.font.color?.tooltipText, placement: 'top-center'}"
-        *ngIf="toolbarConfig.font.color?.show">
+        [tooltip]="{text: toolbarConfig?.font.color?.tooltipText, placement: 'top-center'}"
+        *ngIf="toolbarConfig?.font.color?.show">
       <button class="ui-command fa fa-font"></button>
       <tl-colorpicker [mode]="'fromOrigin'" [elementOrigin]="button" [recentColors]="true"
                       [(ngModel)]="colorSelected" [returnFormatColor]="true"
                       (selectColor)="changeColor.emit($event)"></tl-colorpicker>
     </li>
-    <li *ngIf="toolbarConfig.font.highlight?.show"
-        [tooltip]="{text: toolbarConfig.font.highlight?.tooltipText, placement: 'top-center'}">
+    <li *ngIf="toolbarConfig?.font.highlight?.show"
+        [tooltip]="{text: toolbarConfig?.font.highlight?.tooltipText, placement: 'top-center'}">
       <button class="ui-command fas fas fa-pen-alt" [ngClass]="{'ui-active-tool': cursorHighlight}"
               (click)="clickHighlight.emit()"></button>
     </li>
-    <li *ngIf="toolbarConfig.alignment?.left?.show"
-        [tooltip]="{text: toolbarConfig.alignment?.left?.tooltipText, placement: 'top-center'}">
+    <li *ngIf="toolbarConfig?.alignment?.left?.show"
+        [tooltip]="{text: toolbarConfig?.alignment?.left?.tooltipText, placement: 'top-center'}">
       <button class="ui-command fa fa-align-left" [ngClass]="{'ui-active-tool': activeTools.alignLeft}"
               (click)="clickAlignContent.emit('justifyLeft')"></button>
     </li>
-    <li *ngIf="toolbarConfig.alignment?.center?.show"
-        [tooltip]="{text: toolbarConfig.alignment?.center?.tooltipText, placement: 'top-center'}">
+    <li *ngIf="toolbarConfig?.alignment?.center?.show"
+        [tooltip]="{text: toolbarConfig?.alignment?.center?.tooltipText, placement: 'top-center'}">
       <button class="ui-command fa fa-align-center" [ngClass]="{'ui-active-tool': activeTools.alignCenter}"
               (click)="clickAlignContent.emit('justifyCenter')"></button>
     </li>
-    <li *ngIf="toolbarConfig.alignment?.right?.show"
-        [tooltip]="{text: toolbarConfig.alignment?.right?.tooltipText, placement: 'top-center'}">
+    <li *ngIf="toolbarConfig?.alignment?.right?.show"
+        [tooltip]="{text: toolbarConfig?.alignment?.right?.tooltipText, placement: 'top-center'}">
       <button class="ui-command fa fa-align-right" [ngClass]="{'ui-active-tool': activeTools.alignRight}"
               (click)="clickAlignContent.emit('justifyRight')"></button>
     </li>
-    <li *ngIf="toolbarConfig.alignment?.justify?.show"
-        [tooltip]="{text: toolbarConfig.alignment?.justify?.tooltipText, placement: 'top-center'}">
+    <li *ngIf="toolbarConfig?.alignment?.justify?.show"
+        [tooltip]="{text: toolbarConfig?.alignment?.justify?.tooltipText, placement: 'top-center'}">
       <button class="ui-command fa fa-align-justify" [ngClass]="{'ui-active-tool': activeTools.alignJustify}"
               (click)="clickAlignContent.emit('justifyFull')"></button>
     </li>
-    <li *ngIf="toolbarConfig.lists?.ordered?.show"
-        [tooltip]="{text: toolbarConfig.lists?.ordered?.tooltipText, placement: 'top-center'}">
+    <li *ngIf="toolbarConfig?.lists?.ordered?.show"
+        [tooltip]="{text: toolbarConfig?.lists?.ordered?.tooltipText, placement: 'top-center'}">
       <button class="ui-command fa fa-list-ul" [ngClass]="{'ui-active-tool': activeTools.listUnordered}"
               (click)="clickUnorderedList.emit()"></button>
     </li>
-    <li *ngIf="toolbarConfig.lists?.unordered?.show"
-        [tooltip]="{text: toolbarConfig.lists?.unordered?.tooltipText, placement: 'top-center'}">
+    <li *ngIf="toolbarConfig?.lists?.unordered?.show"
+        [tooltip]="{text: toolbarConfig?.lists?.unordered?.tooltipText, placement: 'top-center'}">
       <button class="ui-command fa fa-list-ol" [ngClass]="{'ui-active-tool': activeTools.listOrdered}"
               (click)="clickOrderedList.emit()"></button>
     </li>
-    <li *ngIf="toolbarConfig.others?.link?.show"
-        [tooltip]="{text: toolbarConfig.others?.link?.tooltipText, placement: 'top-center'}">
+    <li *ngIf="toolbarConfig?.others?.link?.show"
+        [tooltip]="{text: toolbarConfig?.others?.link?.tooltipText, placement: 'top-center'}">
       <button class="ui-command fa fa-link" (click)="clickLink.emit()"></button>
     </li>
-    <li *ngIf="toolbarConfig.others?.imageLink?.show"
-        [tooltip]="{text: toolbarConfig.others?.imageLink?.tooltipText, placement: 'top-center'}">
+    <li *ngIf="toolbarConfig?.others?.imageLink?.show"
+        [tooltip]="{text: toolbarConfig?.others?.imageLink?.tooltipText, placement: 'top-center'}">
       <button class="ui-command far fa-image" (click)="clickImage.emit()"></button>
     </li>
-    <li *ngIf="toolbarConfig.others?.quote?.show"
-        [tooltip]="{text: toolbarConfig.others?.quote?.tooltipText, placement: 'top-center'}">
+    <li *ngIf="toolbarConfig?.others?.quote?.show"
+        [tooltip]="{text: toolbarConfig?.others?.quote?.tooltipText, placement: 'top-center'}">
       <button class="ui-command fas fa-quote-right" [ngClass]="{'ui-active-tool': activeTools.blockQuote}"
               (click)="clickQuote.emit()"></button>
     </li>
-    <li *ngIf="toolbarConfig.others?.clear?.show"
-        [tooltip]="{text: toolbarConfig.others?.clear?.tooltipText, placement: 'top-center'}">
+    <li *ngIf="toolbarConfig?.others?.clear?.show"
+        [tooltip]="{text: toolbarConfig?.others?.clear?.tooltipText, placement: 'top-center'}">
       <button class="ui-command far fa-trash-alt"
               (click)="clickClear.emit()"></button>
     </li>
     <li class="dropdown">
-      <select class="select" *ngIf="toolbarConfig?.others?.field" [tooltip]="{text: toolbarConfig.others?.field?.tooltipText, placement: 'top-center'}"
+      <select class="select" *ngIf="toolbarConfig?.others?.field" [tooltip]="{text: toolbarConfig?.others?.field?.tooltipText, placement: 'top-center'}"
               [(ngModel)]="defaultField" (ngModelChange)="onChangeField($event)">
         <option default>{{ labelAddField }}</option>
         <option *ngFor="let item of fields" [ngValue]="item.field">{{ item?.field }}</option>

diff --git a/src/app/components/editor/editordemo.component.ts b/src/app/components/editor/editordemo.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
 import * as json from './editordemo-dataproperties.json';
 import * as jsonEvents from './editordemo-dataevents.json';
 import {FormControl, FormGroup} from '@angular/forms';
@@ -26,12 +26,24 @@ export class EditorDemoComponent implements OnInit {
     editor: new FormControl('TESTE')
   });
 
-  constructor(  ) {
+  public textTemplate = '<div>Declaro para fins de ausência escolar, a pedido, do responsável legal, que o sr.(a)\n' +
+    '  <span class="ui-hashtag" id="#nome_paciente" contenteditable="false">#nome_paciente</span>, inscrito no CPF sob nº&nbsp;\n' +
+    '  <span class="ui-hashtag" id="#cpf" contenteditable="false">#cpf</span> , paciente sob meus cuidados, foi atendido (a)\n' +
+    '  na data&nbsp;\n' +
+    '  <span class="ui-hashtag" id="#dt_atendimento" contenteditable="false">#dt_atendimento</span>&nbsp;, as&nbsp;\n' +
+    '  <span class="ui-hashtag" id="#hora" contenteditable="false">#hora</span> , necessitando ficar afastado(a) de suas\n' +
+    '  atividades escolares pelo período de&nbsp;\n' +
+    '  <input type="text" value="" class="ui-field" id="$periodo" placeholder="">&nbsp;dias a partir da presente data.\n' +
+    '</div>';
+
+  constructor( private cd: ChangeDetectorRef ) {
     this.dataTableProperties = json.dataProperties;
     this.dataEvents = jsonEvents.dataProperties;
+    this.form.get('editor').valueChanges.subscribe(console.log);
     setTimeout(() => {
-      this.form.get('editor').patchValue( 'TESTE123',
+      this.form.get('editor').patchValue( this.textTemplate,
         { onlySelf: true, emitEvent: false });
+      this.cd.detectChanges();
     }, 4000);
   }