Ontica/Empiria.Land.Intranet

<form [formGroup]="form" empNgFormKeyDownEnter autocomplete="off"
  class="form-section fx-column-container">

  <mat-divider class="horizontal">

  </mat-divider>

  <div class="fx-column-container fx-gap-three-quarter sm-fx-gap-none">
    <div class="fx-row-container sm-fx-column-container">
      <div class="fx-item-one">
        <label>{{ isPerson ? 'Nombre Completo:' : 'Nombre o razón social' }}</label>
        <input formControlName="fullName"
          type="text"
          class="text-box uppercase"
          [class.invalid-control]="formHelper.isControlInvalid(form.controls.fullName)">
      </div>
    </div>

    <div class="fx-row-container sm-fx-column-container">
      <div *ngIf="isPerson" class="fx-item-half sm-fx-item">
        <label>CURP:</label>
        <input formControlName="curp"
          type="text"
          class="text-box uppercase"
          [class.invalid-control]="formHelper.isControlInvalid(form.controls.curp)">
      </div>

      <div class="fx-item-half sm-fx-item">
        <label>RFC:</label>
        <input formControlName="rfc"
          type="text"
          class="text-box uppercase"
          [class.invalid-control]="formHelper.isControlInvalid(form.controls.rfc)">
      </div>
    </div>

    <div class="fx-row-container sm-fx-column-container">
      <div class="fx-item-one">
        <label>Otra información:</label>
        <textarea class="text-area uppercase" empNgTextareaAutoresize [maxHeightTextarea]="null" rows="1"
          formControlName="partyNotes">

        </textarea>
      </div>
    </div>

    <div class="fx-row-container sm-fx-column-container">
      <div class="fx-item-size sm-fx-item" style="--size: 40%">
        <label>Participa como:</label>
        <emp-ng-select
          [config]="{groupBy: 'items'}"
          [placeholder]="'( Seleccionar rol )'"
          [items]="rolesList"
          [showError]="formHelper.isControlInvalid(form.controls.roleUID)"
          formControlName="roleUID"
          (changes)="onRoleChanges($event)">
        </emp-ng-select>
      </div>

      <ng-container [ngSwitch]="getRoleTypeSelected()">
        <ng-container *ngSwitchCase="'Primary'">
          <div class="fx-item-size sm-fx-item" style="--size: 40%">
            <label>Sobre:</label>
            <emp-ng-select
              [items]="partUnits"
              [config]="{clearable: true}"
              [placeholder]="'( U de M )'"
              [showError]="formHelper.isControlInvalid(form.controls.partUnitUID)"
              formControlName="partUnitUID"
              (changes)="onPartUnitChanges($event)">
            </emp-ng-select>
          </div>

          <div *ngIf="isAmountRequired"
            class="fx-item-size sm-fx-item" style="--size: 20%">
            <label>Cantidad:</label>
            <input formControlName="partAmount" *ngIf="!isPartAmountFraction"
              type="number"
              class="text-box"
              [class.invalid-control]="formHelper.isControlInvalid(form.controls.partAmount)">
            <input formControlName="partAmount" *ngIf="isPartAmountFraction"
              empNgFraction
              type="text"
              class="text-box"
              [class.invalid-control]="formHelper.isControlInvalid(form.controls.partAmount)">
          </div>
        </ng-container>
        <ng-container *ngSwitchCase="'Secondary'">
          <div class="fx-item-size sm-fx-item" style="--size: 60%">
            <label>De:</label>
            <emp-ng-select
              bindLabel="fullName"
              [placeholder]="'Seleccionar una persona u organización'"
              [items]="partiesInRecordingActList"
              [showError]="formHelper.isControlInvalid(form.controls.associatedWithUID)"
              formControlName="associatedWithUID">
            </emp-ng-select>
          </div>
        </ng-container>
        <ng-container *ngSwitchDefault>
          <div class="fx-item-size sm-fx-item fx-center fx-items-end" style="--size: 60%">
            <p style="height: 28px;">Primero Seleccione un rol de la lista de la izquierda</p>
          </div>
        </ng-container>
      </ng-container>
    </div>

    <div class="fx-row-container sm-fx-column-container">
      <div class="fx-item-one">
        <label>Observaciones:</label>
        <textarea class="text-area" empNgTextareaAutoresize [maxHeightTextarea]="null" rows="1"
          formControlName="notes">
        </textarea>
      </div>
    </div>
  </div>

  <mat-divider class="horizontal">

  </mat-divider>

  <div class="fx-row-container fx-end">

    <div class="fx-item-none">

      <button
        (click)="onSubmitClicked()"
        [class.btn]="!formHelper.isFormReady(form)"
        [class.btn-action]="formHelper.isFormReady(form)">
        Agregar
      </button>

    </div>

  </div>

</form>