@masterkeymaterial/ui 0.0.1 → 0.0.2

package/src/fields/Base/BaseFieldsForm/BaseFieldsForm.component.ts

@@ -0,0 +1,113 @@
+import { Component, computed, HostBinding, input, OnDestroy, OnInit, output, Signal } from '@angular/core';
+import { LibUtil, LOG } from '../../../util/util';
+import { Formulario, IFieldComponent, IFields, Regra } from '../../Formulario/Formulario';
+
+@Component({ selector: 'app-BaseFieldsForm', template: '' })
+export class BaseFieldsForm implements OnInit, OnDestroy {
+
+  readonly form = input.required<Formulario>()
+  readonly name = input.required<keyof IFields<any>>();
+  change = output<string>();
+
+  readonly value = computed(() => this.form().values()[this.name()]);
+  readonly campo: Signal<IFieldComponent<any> | undefined> = computed(() => this.form().campos()[this.name()]);
+
+  ngOnInit(): void {
+    this.form().registredFields.update(old => ({ ...old, [this.name()]: this }));
+  }
+  ngOnDestroy(): void {
+    this.form().registredFields.update(old => {
+      const updated = { ...old };
+      delete updated[this.name()];
+      return updated;
+    });
+  }
+
+  updateCampo(newCampoData: Partial<IFieldComponent<any>>) {
+    this.form().updateCampo(this.name(), newCampoData);
+  }
+
+  updateValue(newValue: any, touch: boolean = true) {
+    if (touch) this.tocarCampo();
+    this.form().updateValues({ [this.name()]: newValue })
+  }
+
+  tocarCampo() {
+    this.updateCampo({ touched: true });
+  }
+
+  onClickLabel() {
+    LOG(2, "Valor:", this.value());
+    LOG(2, "Campo: ", this.campo());
+    LOG(2, "ClassOf: ", LibUtil.classof(this.value()));
+    LOG(2, "Opcoes: ", this.campo()?.options?.());
+  }
+
+  @HostBinding('style.grid-area')
+  get gridArea() {
+    return this.campo()?.area ?? 'auto';
+  }
+
+  onClickEmit() {
+    this.campo()?.onClick?.(this.form());
+  }
+
+  // Executa o onChange com delay para utilizar o valor após ter executado o effect do empty.
+  async onChangeEmit() {
+    setTimeout(async () => {
+      await this.executarValidacoes();
+      this.campo()?.onChange?.(this.form());
+      this.change.emit(this.value());
+    }, 1)
+  }
+
+  async executarValidacoes() {
+    // Padrão para todos os campos
+    this.validarRequired();
+    // Validações específicas
+    await this.validarRegrasDoCampo();
+
+  }
+
+  validarRequired() {
+    let isEmpty = this.campo()?.empty;
+    if (this.campo()?.need && isEmpty) {
+      LOG(1, `Campo '${this.name()}' é obrigatório e está vazio.`, this.campo());
+      this.adicionaErro(Regra.mensagens.obrigatorio);
+    } else {
+      this.removerErro(Regra.mensagens.obrigatorio);
+    }
+  }
+
+  async validarRegrasDoCampo() {
+    let regrasDefinidas = this.campo()?.regras ?? [];
+    if (!regrasDefinidas.length) return;
+    for (const regra of regrasDefinidas) {
+      if (regra) {
+        let isValid = await regra.validar(this.value());
+        if (!isValid) {
+          this.adicionaErro(regra.mensagem);
+        } else {
+          this.removerErro(regra.mensagem);
+        }
+      } else {
+        console.warn(`Regra de validação não encontrada para o campo "${this.name()}".`);
+      }
+    }
+  }
+
+  adicionaErro(erroNovo: string) {
+    let errosAtuais = this.campo()?.errors ?? [];
+    if (!errosAtuais.includes(erroNovo)) {
+      this.updateCampo({ errors: [...errosAtuais, erroNovo] });
+    }
+  }
+
+  removerErro(erroRemover: string) {
+    let errosAtuais = this.campo()?.errors ?? [];
+    if (errosAtuais.includes(erroRemover)) {
+      this.updateCampo({ errors: errosAtuais.filter(e => e !== erroRemover) });
+    }
+  }
+
+}

package/src/fields/Base/BaseFieldsValues/BaseFieldsValues.ts

@@ -0,0 +1,112 @@
+import { Component, computed, effect, input, model, OnInit, output, signal } from '@angular/core';
+import { Formulario, IFaseCamposAgrupados, IFases, IFieldComponent, IFields } from '../../Formulario/Formulario';
+import { LOG } from '../../../util/util';
+
+interface IFaseCampoGrupo {
+  tipo: 'campo' | 'grupo',
+  faseIndex: number,
+  nome?: string,
+  campo?: IFieldComponent<any>,
+  grupo?: IFaseCamposAgrupados<any>,
+}
+
+@Component({
+  selector: 'fields-base-fields-values',
+  template: '',
+})
+export abstract class BaseFieldsValues<T> implements OnInit {
+
+  abstract onSave(): Promise<any>;
+
+  form!: Formulario;
+
+  values = model<Partial<T>>();
+  campos = input.required<IFields<T>>();
+  fases = input<IFases<T>>();
+
+  gmin = input<string | undefined>();
+  gmax = input<string | undefined>();
+  showFormControls = input<boolean>(false);
+  camposNaoEncontrados = new Set<string>();
+  gruposNaoEncontrados = new Set<string>();
+
+  formulario = output<Formulario>();
+
+  isFaseado = computed(() => {
+    let fases = this.fases()?.fases;
+    return fases !== undefined && fases.length > 0;
+  });
+  isDisabledAction = signal<boolean>(true);
+  isLoadingActive = signal<boolean>(false);
+  faseIndex = signal<number>(0);
+
+  listaFase = computed(() => {
+    return this.fases()?.fases ?? [];
+  });
+  faseGrupo = computed<IFaseCampoGrupo[]>(() => {
+    let listaFase = this.listaFase();
+    if (!listaFase || listaFase.length === 0) {
+      return [];
+    }
+    let resultado: IFaseCampoGrupo[] = [];
+    for (let i = 0; i < listaFase.length; i++) {
+      for (let campoOrGrupo of listaFase[i].campos) {
+        if (typeof campoOrGrupo === 'string') {
+          let campo = this.form.campos()[campoOrGrupo];
+          if (!campo) {
+            this.camposNaoEncontrados.add(campoOrGrupo);
+          }
+          resultado = [...resultado, { tipo: 'campo', nome: campoOrGrupo, campo: campo, grupo: undefined, faseIndex: i }];
+        } else {
+          if (campoOrGrupo.area === undefined) {
+            // Para cada campo deste grupo encontrado em this.form.campos(), deve retornar a area de algum dos campos ou undefined
+            let areaEncontrada = undefined;
+            for (let campoNome of campoOrGrupo.campos) {
+              let campo = this.form.campos()[campoNome];
+              if (campo && campo.area) {
+                areaEncontrada = campo.area;
+                break;
+              }
+            }
+            campoOrGrupo.area = areaEncontrada;
+          }
+          if (!campoOrGrupo) {
+            this.gruposNaoEncontrados.add(campoOrGrupo);
+          }
+          resultado = [...resultado, { tipo: 'grupo', campo: undefined, grupo: campoOrGrupo, faseIndex: i }];
+        }
+      }
+    }
+    return resultado;
+  });
+
+  constructor() {
+    effect(() => {
+      let faseIndex = this.faseIndex();
+      this.updateDisabledAction();
+    });
+  }
+  ngOnInit(): void {
+    this.form = new Formulario(this.campos(), this.values(), this);
+    this.formulario.emit(this.form);
+
+    // Verifica campos e grupos não encontrados após um pequeno delay para garantir que todos os cálculos foram feitos
+    setTimeout(() => {
+      if (this.camposNaoEncontrados.size > 0) LOG(1, "❌ Campos não encontrados nas fases:", Array.from(this.camposNaoEncontrados));
+      if (this.gruposNaoEncontrados.size > 0) LOG(1, "❌ Grupos não encontrados nas fases:", Array.from(this.gruposNaoEncontrados));
+    }, 1)
+  }
+
+  updateDisabledAction(forcedDisabled: boolean = false) {
+    if (forcedDisabled) return this.isDisabledAction.set(true);
+
+    let isFaseado = this.isFaseado();
+    if (!isFaseado) return this.isDisabledAction.set(false);
+
+    let isLinear = this.fases()?.isLinear ?? false;
+    if (!isLinear) return this.isDisabledAction.set(false);
+
+    let isUltimaFase = this.faseIndex() >= (this.listaFase().length - 1);
+    this.isDisabledAction.set(!isUltimaFase);
+  }
+}