Merge branch 'feat/alinhamento-editor' into develop

.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
       experimentalObjectRestSpread: true,
     },
   },
+  ignorePatterns: ['**/*.js'],
   plugins: ['@typescript-eslint', 'import', 'html'],
   extends: [
     'eslint:recommended',

demo/components/demoview.ts

@@ -91,7 +91,7 @@ export class DemoView extends LitElement {
   constructor() {
     super();
     this.emendaConfig = new LexmlEmendaConfig();
-    this.emendaConfig.urlComissoes = 'https://run.mocky.io/v3/18146f46-003c-4f6f-b00f-6e290de175dd';
+    this.emendaConfig.urlComissoes = 'https://run.mocky.io/v3/fee83f1d-e204-4746-adf6-c0f617156a6a';
   }
 
   createRenderRoot(): LitElement {
@@ -202,6 +202,7 @@ export class DemoView extends LitElement {
           }
           params.emendarTextoSubstitutivo = false;
           params.motivo = 'Motivo da emenda de texto livre';
+          // params.casaLegislativa = 'SF';
           this.elLexmlEmenda.inicializarEdicao(params);
 
           this.atualizarProposicaoCorrente(this.projetoNorma);

src/components/destino/destino.component.ts

@@ -1,33 +1,39 @@
 import { LitElement, html, TemplateResult } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { Option } from '../editor/autocomplete-async';
-import { LexmlAutocomplete } from '../lexml-autocomplete';
+import { AutocompleteAsync, Option } from '../editor/autocomplete-async';
 import { ColegiadoApreciador, RefProposicaoEmendada } from '../../model/emenda/emenda';
 import { Comissao } from './comissao';
+import { rootStore } from '../../redux/store';
+import { adicionarAlerta } from '../../model/alerta/acao/adicionarAlerta';
+import { removerAlerta } from '../../model/alerta/acao/removerAlerta';
 
 @customElement('lexml-destino')
 export class DestinoComponent extends LitElement {
   @query('#auto-complete-async')
-  private _autocomplete!: LexmlAutocomplete;
+  private _autocomplete!: AutocompleteAsync;
 
   @state()
   private _comissoesAutocomplete: Option[] = [];
 
-  @state()
-  private comissaoSelecionada = '';
   private isMPV = false;
+
   private isPlenario = false;
+
   private tipoColegiadoPlenario = false;
+
   public isMateriaOrcamentaria = false;
 
+  @state()
+  private isErroComissaoSelecionada = false;
+
   private _proposicao!: RefProposicaoEmendada;
+
   @property({ type: RefProposicaoEmendada })
   set proposicao(value: RefProposicaoEmendada) {
-    // this._autocomplete.value = '';
     this._proposicao = value;
     this.isMPV = false;
     if (this._proposicao.sigla === 'MPV') {
-      this._colegiadoApreciador.siglaCasaLegislativa = 'CN';
+      this.isMPV = true;
       this._colegiadoApreciador.tipoColegiado = 'Comissão';
       if (this.isMateriaOrcamentaria) {
         this._colegiadoApreciador.siglaComissao = 'CMO';
@@ -36,7 +42,6 @@ export class DestinoComponent extends LitElement {
         this._colegiadoApreciador.siglaComissao = `CMMPV ${this._proposicao.numero}/${this._proposicao.ano}`;
         this._autocomplete.value = `${this._colegiadoApreciador.siglaComissao} - COMISSÃO MISTA DA MEDIDA PROVISÓRIA N° ${this._proposicao.numero}, DE ${this._proposicao.ano}`;
       }
-      this.isMPV = true;
     }
 
     this.requestUpdate();
@@ -53,6 +58,7 @@ export class DestinoComponent extends LitElement {
     if (!this._comissoes || this._comissoes.length === 0) {
       this._comissoes = value ? value : [];
       this._comissoesOptions = this.comissoes.map(comissao => new Option(comissao.sigla, `${comissao.sigla} - ${comissao.nome}`));
+      this.ajustarValorAutocomplete();
       this.requestUpdate();
     }
     if (typeof value === 'undefined') {
@@ -66,17 +72,29 @@ export class DestinoComponent extends LitElement {
 
   private _comissoesOptions: Option[] = [];
 
+  private ajustarValorAutocomplete(): void {
+    if (this._colegiadoApreciador?.siglaComissao) {
+      const option: Option = this._comissoesOptions.find(op => op.value === this._colegiadoApreciador.siglaComissao) || new Option('', '');
+      this._selecionarComissao(option);
+      this._autocomplete.value = option.description || this._colegiadoApreciador.siglaComissao;
+    }
+  }
+
   private _colegiadoApreciador!: ColegiadoApreciador;
   @property({ type: Object, state: true })
   set colegiadoApreciador(value: ColegiadoApreciador | undefined) {
     this._colegiadoApreciador = value ? value : new ColegiadoApreciador();
-    this.tipoColegiadoPlenario = this._colegiadoApreciador.tipoColegiado === 'Plenário' ? true : false;
-    if (this._colegiadoApreciador.siglaComissao) {
-      const option: Option = this._comissoesOptions.find(op => op.value === this._colegiadoApreciador.siglaComissao) || new Option('', '');
-      this._autocomplete.value = option.description || this._colegiadoApreciador.siglaComissao;
+    this.tipoColegiadoPlenario = this._colegiadoApreciador.tipoColegiado === 'Plenário';
+    if (this.tipoColegiadoPlenario) {
+      this.ajustarTipoColegiadoPlenario();
+    } else if (this._colegiadoApreciador.siglaComissao) {
+      this.ajustarValorAutocomplete();
     } else {
       this._autocomplete.value = '';
     }
+    if (!this.tipoColegiadoPlenario && !this._colegiadoApreciador.siglaComissao) {
+      this.criarAlertaErroComissao();
+    }
     this.requestUpdate();
   }
 
@@ -108,6 +126,24 @@ export class DestinoComponent extends LitElement {
           padding: 2px 5px;
           box-shadow: var(--sl-shadow-small);
         }
+
+        .mensagem {
+          font-size: 0.8em;
+          font-weight: normal;
+          text-align: left;
+          border: 1px solid;
+          padding: 4px 10px;
+          margin: 10px 0;
+          display: inline-block;
+          border-radius: 2px;
+          font-family: var(--sl-font-sans);
+        }
+
+        .mensagem--danger {
+          color: #721c24;
+          background-color: #f8d7da;
+          border-color: #f5c6cb;
+        }
       </style>
       <fieldset class="lexml-destino">
         <legend>Destino</legend>
@@ -152,24 +188,54 @@ export class DestinoComponent extends LitElement {
             .items=${this._comissoesAutocomplete}
             .onSearch=${value => this._filtroComissao(value)}
             .onSelect=${value => this._selecionarComissao(value)}
+            .onChange="${() => true}"
+            .onClick="${() => this._exibirComissoes()}"
             @blur=${this._blurAutoComplete}
             ?disabled=${this.isMPV || this.isPlenario || this.tipoColegiadoPlenario || !this.comissoes?.length}
           ></autocomplete-async>
+          ${this.isErroComissaoSelecionada ? html` <div class="mensagem mensagem--danger">A comissão de destino deve ser selecionada.</div> ` : ''}
         </div>
       </fieldset>
     `;
   }
 
+  private _exibirComissoes() {
+    this._autocomplete.value = '';
+    this._comissoesAutocomplete = [];
+  }
+
+  private criarAlertaErroComissao(): void {
+    this.isErroComissaoSelecionada = true;
+    const alerta = {
+      id: 'alerta-global-comissao-nao-selecionada',
+      tipo: 'error',
+      mensagem: 'A comissão de destino deve ser selecionada.',
+      podeFechar: false,
+    };
+    rootStore.dispatch(adicionarAlerta(alerta));
+  }
+
+  private removerAlertaErroComissao(): void {
+    this.isErroComissaoSelecionada = false;
+    rootStore.dispatch(removerAlerta('alerta-global-comissao-nao-selecionada'));
+  }
+
   private updateTipoColegiado(value: any): void {
     if (!this.isMPV && !this.isPlenario) {
       this._colegiadoApreciador.tipoColegiado = value;
       this.tipoColegiadoPlenario = this._colegiadoApreciador.tipoColegiado === 'Plenário';
+      if (this.tipoColegiadoPlenario) this.ajustarTipoColegiadoPlenario();
       this.requestUpdate();
     }
   }
 
   private _selecionarComissao(item: Option): void {
-    this._colegiadoApreciador.siglaComissao = item.value;
+    const comissaoSelecionada: Comissao = this._comissoes.find(op => op.sigla === item.value)!;
+    if (comissaoSelecionada) {
+      this._colegiadoApreciador.siglaCasaLegislativa = comissaoSelecionada.siglaCasaLegislativa;
+      this._colegiadoApreciador.siglaComissao = comissaoSelecionada.sigla;
+      this.removerAlertaErroComissao();
+    }
   }
 
   private _filtroComissao(query: string): void {
@@ -179,13 +245,15 @@ export class DestinoComponent extends LitElement {
 
   private _blurAutoComplete(): void {
     if (!this.comissoes?.length) return;
+
     setTimeout(() => {
       const comissao = this._autocomplete.value ?? '';
       const comissaoSelecionada = this._comissoesOptions.find(comissaoOp => comissao === comissaoOp.description);
 
       if (!comissaoSelecionada) {
+        this._colegiadoApreciador.siglaComissao = '';
+        this.criarAlertaErroComissao();
         this._autocomplete.value = '';
-        this.comissaoSelecionada = '';
       }
     }, 200);
   }
@@ -201,6 +269,12 @@ export class DestinoComponent extends LitElement {
       })
     );
   }
+
+  private ajustarTipoColegiadoPlenario(): void {
+    this._autocomplete.value = '';
+    this._colegiadoApreciador.siglaComissao = '';
+    this.removerAlertaErroComissao();
+  }
 }
 
 declare global {

src/components/editor-texto-rico/editor-texto-rico.component.ts

@@ -575,6 +575,8 @@ export class EditorTextoRicoComponent extends connect(rootStore)(LitElement) {
       (this.quill as any).notasRodape.associar(notasRodape);
     }, 100); // A linha anterior gera um history, então é necessário limpar novamente.
 
+    if (!textoAjustado) this.quill.format('align', 'justify');
+
     this.atualizaStatusElementosRevisao();
   };
 
@@ -669,6 +671,19 @@ export class EditorTextoRicoComponent extends connect(rootStore)(LitElement) {
     this.anexos = [...anexo];
   };
 
+  isEditorVazio = (): boolean => {
+    const delta = this.quill?.getContents();
+    if (!delta || !delta.ops || delta.ops.length === 0) {
+      return true;
+    }
+    for (let i = 0; i < delta.ops.length; i++) {
+      if (delta.ops[i]?.insert.trim() !== '') {
+        return false;
+      }
+    }
+    return true;
+  };
+
   private getNomeSwitch = (): string => {
     return this.modo === Modo.JUSTIFICATIVA ? 'chk-em-revisao-justificativa' : 'chk-em-revisao-texto-livre';
   };

src/components/editor/autocomplete-async.ts

@@ -31,6 +31,9 @@ export class AutocompleteAsync extends LitElement {
   @property({ type: Function })
   onChange = (value: string): void => console.log('Mudança texto:', value);
 
+  @property({ type: Function })
+  onClick = (value: string): void => console.log('Click:', value);
+
   _interval = 1000;
 
   _timer: any;
@@ -115,6 +118,7 @@ export class AutocompleteAsync extends LitElement {
           placeholder=${this.placeholder}
           .value=${this.value?.description || ''}
           @change=${e => this._handleChange(e.target.value)}
+          @click=${e => this._handleClick(e.target.value)}
           ?disabled=${this.disabled}
         ></sl-input>
       </slot>
@@ -162,19 +166,22 @@ export class AutocompleteAsync extends LitElement {
 
   firstUpdated(): void {
     this._suggestionEl = this.shadowRoot!.getElementById('suggestions');
+    this._suggestionEl.style = 'max-height: 250px; overflow: scroll';
     this._suggestionEl.style.width = `${this.contentElement.getBoundingClientRect().width}px`;
 
     this._bound.onKeyDown = this._handleKeyDown.bind(this);
     this._bound.onKeyUp = this._handleKeyUp.bind(this);
     this._bound.onFocus = this._handleFocus.bind(this);
     this._bound.onBlur = this._handleBlur.bind(this);
     this._bound.onChange = this._handleChange.bind(this);
+    this._bound.onClick = this._handleClick.bind(this);
 
     this.contentElement.addEventListener('keydown', this._bound.onKeyDown);
     this.contentElement.addEventListener('keyup', this._bound.onKeyUp);
     this.contentElement.addEventListener('focus', this._bound.onFocus);
     this.contentElement.addEventListener('blur', this._bound.onBlur);
     this.contentElement.addEventListener('sl-input', this._bound.onChange);
+    this.contentElement.addEventListener('click', this._bound.onClick);
 
     if (this._tempValue !== undefined) {
       this.contentElement.value = this._tempValue;
@@ -188,6 +195,7 @@ export class AutocompleteAsync extends LitElement {
     this.contentElement.removeEventListener('focus', this._bound.onFocus);
     this.contentElement.removeEventListener('blur', this._bound.onBlur);
     this.contentElement.removeEventListener('sl-input', this._bound.onChange);
+    this.contentElement.removeEventListener('click', this._bound.onClick);
   }
 
   focus(options?: FocusOptions): void {
@@ -318,6 +326,10 @@ export class AutocompleteAsync extends LitElement {
     // eslint-disable-next-line no-unused-expressions
     this._blur && setTimeout(() => this.close(), 500); // Give user some slack before closing
   }
+
+  _handleClick(value: string): void {
+    this.onClick(value);
+  }
 }
 
 export class Option {

src/components/editor/editor.component.ts

@@ -1296,6 +1296,7 @@ export class EditorComponent extends connect(rootStore)(LitElement) {
 
   private carregarArticulacao(elementos: Elemento[]): void {
     setTimeout(() => {
+      if (!this.quill) return;
       this.quill.getLine(0)[0].remove();
       elementos.forEach((elemento: Elemento) => {
         const etaContainerTable = EtaQuillUtil.criarContainerLinha(elemento);