Ontica/Empiria.Land.Intranet

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

  <emp-ng-spinner #spinner [visible]="isLoading"></emp-ng-spinner>

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

    <div class="section-title">Datos del interesado</div>

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

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

      <div class="fx-item-third sm-fx-item">
        <label>Correo electrónico:</label>
        <input formControlName="email"
          type="text"
          class="text-box lowercase"
          [class.invalid-control]="formHelper.isControlInvalid(form.controls.email)">
      </div>

    </div>

    <div class="section-title">Información del trámite solicitado</div>

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

      <div class="fx-item-third sm-fx-item">
        <label>Tipo de trámite:</label>
        <emp-ng-select formControlName="type"
          [items]="transactionTypeList"
          [showError]="formHelper.isControlInvalid(form.controls.type)"
          (changes)="onTransactionTypeChange($event)">
        </emp-ng-select>
      </div>

      <div class="fx-item-third sm-fx-item">
        <label>Tipo de documento:</label>
        <emp-ng-select formControlName="subtype"
          [placeholder]="form.controls.type.invalid ? 'Seleccione el tipo de trámite' : 'Seleccione'"
          [showError]="formHelper.isControlInvalid(form.controls.subtype)"
          [items]="transactionSubtypeList">
        </emp-ng-select>
      </div>

      <div class="fx-item-third sm-fx-item">
        <label>No. Instrumento:</label>
        <input formControlName="instrumentNo"
          type="text"
          class="text-box uppercase">
      </div>

    </div>

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

      <div class="fx-item">
        <label>Tramitado por:</label>
        <emp-ng-select formControlName="agency"
          [config]="{clearable: true}"
          [showError]="formHelper.isControlInvalid(form.controls.agency)"
          [items]="agencyList">
        </emp-ng-select>
      </div>

      <div class="fx-item-third sm-fx-item">
        <label>Oficialía:</label>
        <emp-ng-select formControlName="filingOffice"
          [items]="filingOfficeList"
          [showError]="formHelper.isControlInvalid(form.controls.filingOffice)">
        </emp-ng-select>
      </div>

    </div>

    <div class="section-title">Datos de facturación</div>

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

      <div class="fx-item-two-third sm-fx-item">
        <label>Nombre o razón social:</label>
        <input formControlName="billTo"
          type="text"
          class="text-box uppercase"
          [class.invalid-control]="formHelper.isControlInvalid(form.controls.billTo)"
          (change)="onBillingFieldsChange()">
      </div>

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

    </div>

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

    <div class="fx-row-container" *ngIf="isSaved && !editionMode">

      <div class="fx-item">
        <button (click)="onCloneButtonClicked()" type="button" class="btn-action">
          Crear una copia
        </button>
      </div>

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

        <button *ngIf="transaction.actions.can.printControlVoucher"
          type="submit" class="btn-action"
          (click)="onPrintControlVoucherButtonClicked()">
          Boleta de control
        </button>

        <button *ngIf="transaction.actions.can.generatePaymentOrder"
          type="submit" class="btn-action"
          (click)="onGeneratePaymentOrderButtonClicked()">
          Generar orden de pago
        </button>

        <button *ngIf="transaction.actions.can.editPayment && transaction.paymentOrder?.media.url"
           type="submit" class="btn-action"
           (click)="onPrintPaymentOrderButtonClicked()">
          Orden de pago
        </button>

        <button *ngIf="transaction.actions.can.cancelPaymentOrder"
          type="submit" class="btn-warning"
          (click)="onCancelPaymentOrderButtonClicked()">
          Cancelar orden de pago
        </button>

        <button *ngIf="transaction.actions.can.printSubmissionReceipt"
           type="submit" class="btn-action"
           (click)="onPrintSubmissionReceiptButtonClicked()">
          Boleta de recepción
        </button>

        <ng-container *ngIf="transaction.actions.can.edit || transaction.actions.can.delete">

          <mat-divider vertical="true" class="vertical" [style.margin]="'0 8px 0 0'"
            *ngIf="transaction.actions.can.printControlVoucher || transaction.actions.can.generatePaymentOrder ||
                   (transaction.actions.can.editPayment && transaction.paymentOrder?.media.url) ||
                   transaction.actions.can.cancelPaymentOrder || transaction.actions.can.printSubmissionReceipt">

          </mat-divider>

          <button
            type="button" class="btn-action"
            (click)="enableEditor(true)">
            Editar
          </button>

        </ng-container>

      </div>

    </div>

    <div class="fx-row-container" *ngIf="editionMode">

      <div class="fx-item">

        <button *ngIf="transaction.actions.can.delete"
           type="button" class="btn-warning"
           (click)="onDeleteButtonClicked()">
          Eliminar
        </button>

      </div>

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

        <button *ngIf="!isSaved || (isSaved && transaction.actions.can.edit)" type="submit"
          [class.btn]="!formHelper.isFormReady(form)"
          [class.btn-action]="formHelper.isFormReady(form)"
          (click)="onSubmitClicked()">
          {{isSaved ? 'Guardar la solicitud' : 'Crear la solicitud'}}
        </button>

        <button *ngIf="isSaved"
          type="button" class="btn"
          (click)="enableEditor(false)">
          Descartar Cambios
        </button>

      </div>

    </div>

  </div>

</form>