Ontica/Empiria.Land.Intranet

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

  <div class="fx-column-container fx-gap-half">

    <div class="fx-row-container sm-fx-column-container">

      <div class="fx-item-quarter sm-fx-item">
        <label>Tipo:</label>
        <emp-ng-select formControlName="serviceType"
          [items]="providedServiceTypeList"
          [showError]="formHelper.isControlInvalid(form.controls.serviceType)"
          (changes)="onServiceTypeChanges($event)">
        </emp-ng-select>
      </div>

      <div class="fx-item-half sm-fx-item">
        <label>Concepto:</label>
        <emp-ng-select formControlName="service"
          [items]="providedServiceList"
          [placeholder]="form.controls.serviceType.invalid ? 'Seleccione el tipo de concepto' : 'Seleccione'"
          [showError]="formHelper.isControlInvalid(form.controls.service)"
          (changes)="onServiceChanges($event)">
        </emp-ng-select>
      </div>

      <div class="fx-item-quarter sm-fx-item">
        <label>Fundamento:</label>
        <emp-ng-select formControlName="feeConcept"
          [bindLabel]="'legalBasis'"
          [config]="{ autoSelect: true }"
          [items]="serviceSelected.feeConcepts"
          [placeholder]="form.controls.service.invalid ? 'Seleccione el concepto' : 'Seleccione'"
          [showError]="formHelper.isControlInvalid(form.controls.feeConcept)"
          (changes)="onFeeConceptChanges($event)">
        </emp-ng-select>
      </div>

    </div>

    <div class="fx-row-container sm-fx-column-container">

      <div class="fx-item-quarter sm-fx-item">
        <label>Unidad:</label>
        <input formControlName="unit"
          type="text"
          class="text-box"
          placeholder="Seleccione el concepto">
      </div>

      <div class="fx-item-half sm-fx-item">

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

          <div *ngIf="feeConceptSelected.requiresTaxableBase"
            class="fx-item-size" style="--size: 60%">
            <label>Base gravable:</label>
            <input formControlName="taxableBase" empNgCurrency
              type="text"
              class="text-box"
              [class.invalid-control]="formHelper.isControlInvalid(form.controls.taxableBase)">
          </div>

          <div class="fx-item-size" style="--size: 40%">
            <label>Cantidad:</label>
            <input formControlName="quantity" empNgInteger
              type="text"
              class="text-box"
              [class.invalid-control]="formHelper.isControlInvalid(form.controls.quantity)">
          </div>

        </div>

      </div>

    </div>

    <div class="fx-row-container sm-fx-column-container">

      <div class="fx-item">
        <label>Observaciones:</label>
        <textarea formControlName="notes" empNgTextareaAutoresize
          rows="1"
          class="text-area uppercase">
        </textarea>
      </div>

    </div>

    <mat-divider class="horizontal-slim"></mat-divider>

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

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

    </div>

  </div>

</form>