frontend-inversiones/src/app/components/incomes/general-form/general-form.component.html

<h2 class="floating-title">{{ title }}</h2>

<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 align-right">
        <div class="align-container">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <a [routerLink]="['/']">Dashboard</a>
              </li>
              <li class="breadcrumb-item">
                <a [routerLink]="['/investment-incomes']">
                  Ingresos
                </a>
              </li>
              <li class="breadcrumb-item">Formulario general</li>
            </ol>
          </nav>
        </div>
      </div>

      <div class="col-12">
        <div class="align-container">
          <div class="card borderless card-wrapper">
            <div class="wrapper-costs">
              <h4 class="card-title">
                Información de la proyección para la fecha: {{ projectionDate }}
              </h4>

              <div class="alert alert-customized" *ngIf="projection_exists">
                <h4>Estado:</h4>
                <div class="field">
                  {{ projectionRes.estado }}
                </div>
              </div>

              <div class="income-summary" *ngIf="projection_exists">
                <div class="row">
                  <div class="col-lg-3 col-md-4 col-sm-6">
                    <h4>Codigo de la inversión:</h4>
                    <div class="field">
                      {{ projectionRes.codigo_inversion }}
                    </div>
                  </div>

                  <div class="col-lg-3 col-md-4 col-sm-6">
                    <h4>Empresa:</h4>
                    <div class="field">
                      {{ projectionRes.empresa }}
                    </div>
                  </div>

                  <div class="col-lg-3 col-md-4 col-sm-6">
                    <h4>Tipo instrumento:</h4>
                    <div class="field">
                      {{ projectionRes.tipo_instrumento }}
                    </div>
                  </div>

                  <div class="col-lg-3 col-md-4 col-sm-6">
                    <h4>Capital:</h4>
                    <div class="field">
                      $USD {{ projectionRes.capital | number: "1.2-4" }}
                    </div>
                  </div>
                  <div class="col-lg-3 col-md-4 col-sm-6">
                    <h4>Ingreso bruto:</h4>
                    <div class="field">
                      $USD {{ projectionRes.ingreso_bruto | number: "1.2-4" }}
                    </div>
                  </div>
                  <div class="col-lg-3 col-md-4 col-sm-6">
                    <h4>Renta:</h4>
                    <div class="field">
                      $USD {{ projectionRes.renta | number: "1.2-4" }}
                    </div>
                  </div>
                  <div class="col-lg-3 col-md-4 col-sm-6">
                    <h4>Ingreso neto:</h4>
                    <div class="field">
                      $USD {{ projectionRes.ingreso_neto | number: "1.2-4" }}
                    </div>
                  </div>
                </div>
              </div>

              <br />
              <br />
              <div>
                <h4 class="card-title" *ngIf="showIncomeForm">
                  Formulario para ingreso
                </h4>

                <div class="align-container">
                  <form
                    class="form-auth-small ng-untouched ng-pristine ng-valid"
                    [formGroup]="investmentProposalForm"
                    *ngIf="showIncomeForm"
                  >
                    <div class="row">
                      <!-- Valor nominal -->
                      <div class="col-lg-6 col-sm-12 pr-xl-3">
                        <div class="form-group">
                          <label for="capital">Capital: </label>
                          <div class="input-box-container">
                            <p>
                              <i class="fas fa-dollar-sign"></i>
                            </p>
                            <input
                              type="text"
                              formControlName="capital"
                              class="form-control"
                              [value]="
                                investmentProposalForm.get('capital').value
                                  | numberPipe
                              "
                              (input)="inputValidator($event)"
                              [ngClass]="{
                                'is-invalid': submitted && f.capital.errors
                              }"
                            />
                            <div
                              *ngIf="submitted && f.capital.errors"
                              class="invalid-feedback"
                            >
                              <div *ngIf="f.capital.errors.required">
                                Campo requerido
                              </div>
                              <div *ngIf="f.capital.errors.pattern">
                                Debe ingresar una cifra válida
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- Valor nominal -->
                      <div class="col-lg-6 col-sm-12 pr-xl-3">
                        <div class="form-group">
                          <label for="ingreso_bruto">Ingreso bruto: </label>
                          <div class="input-box-container">
                            <p>
                              <i class="fas fa-dollar-sign"></i>
                            </p>
                            <input
                              type="text"
                              formControlName="ingreso_bruto"
                              [value]="
                                investmentProposalForm.get('ingreso_bruto')
                                  .value | numberPipe
                              "
                              (input)="inputValidator($event)"
                              class="form-control"
                              [ngClass]="{
                                'is-invalid':
                                  submitted && f.ingreso_bruto.errors
                              }"
                            />
                            <div
                              *ngIf="submitted && f.ingreso_bruto.errors"
                              class="invalid-feedback"
                            >
                              <div *ngIf="f.ingreso_bruto.errors.required">
                                Campo requerido
                              </div>
                              <div *ngIf="f.ingreso_bruto.errors.pattern">
                                Debe ingresar una cifra válida
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- Valor nominal -->
                      <div class="col-lg-6 col-sm-12 pr-xl-3">
                        <div class="form-group">
                          <label for="ingreso_neto">Ingreso neto: </label>
                          <div class="input-box-container">
                            <p>
                              <i class="fas fa-dollar-sign"></i>
                            </p>
                            <input
                              type="text"
                              formControlName="ingreso_neto"
                              [value]="
                                investmentProposalForm.get('ingreso_neto')
                                  .value | numberPipe
                              "
                              (input)="inputValidator($event)"
                              class="form-control"
                              [ngClass]="{
                                'is-invalid': submitted && f.ingreso_neto.errors
                              }"
                            />
                            <div
                              *ngIf="submitted && f.ingreso_neto.errors"
                              class="invalid-feedback"
                            >
                              <div *ngIf="f.ingreso_neto.errors.required">
                                Campo requerido
                              </div>
                              <div *ngIf="f.ingreso_neto.errors.pattern">
                                Debe ingresar una cifra válida
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <br />
                    <div class="row">
                      <div class="col-12">
                        <div class="custom-control custom-switch">
                          <input
                            type="checkbox"
                            class="custom-control-input"
                            id="customSwitch1"
                            (click)="toggle()"
                          />
                          <label
                            class="custom-control-label"
                            for="customSwitch1"
                            >Ingreso parcial</label
                          >
                        </div>
                      </div>
                      <div class="col-lg-6 col-sm-12 pr-xl-3" *ngIf="partial">
                        <div class="form-group">
                          <label for="fecha_inicio">Fecha inicio: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i
                                  class="far fa-calendar"
                                  aria-hidden="true"
                                ></i>
                              </p>
                              <input
                                class="input-box form-control"
                                placeholder="Seleccione una fecha"
                                angular-mydatepicker
                                formControlName="fecha_inicio"
                                (click)="dp0.toggleCalendar()"
                                [options]="myDpOptions"
                                #dp0="angular-mydatepicker"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-lg-6 col-sm-12 pr-xl-3" *ngIf="partial">
                        <div class="form-group">
                          <label for="fecha_vencimiento"
                            >Fecha vencimiento:
                          </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i
                                  class="far fa-calendar"
                                  aria-hidden="true"
                                ></i>
                              </p>
                              <input
                                class="input-box form-control"
                                placeholder="Seleccione una fecha"
                                angular-mydatepicker
                                formControlName="fecha_vencimiento"
                                (click)="dp0.toggleCalendar()"
                                [options]="myDpOptions"
                                #dp0="angular-mydatepicker"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-6 col-sm-12 pr-xl-3">
                        <div class="form-group">
                          <label for="payment_types">Tipo pago: </label>

                          <select
                            class="custom-select"
                            formControlName="tipo_pago"
                            [ngClass]="{
                              'is-invalid': submitted && f.tipo_pago.errors
                            }"
                          >
                            <option
                              *ngFor="let item of payment_types"
                              [value]="item.id_tipo_pago"
                            >
                              {{ item.nombre }}</option
                            >
                          </select>
                          <div
                            *ngIf="submitted && f.tipo_pago.errors"
                            class="invalid-feedback"
                          >
                            <div *ngIf="f.tipo_pago.errors.required">
                              Campo requerido
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-lg-6 col-sm-12 pr-xl-3">
                        <div class="form-group">
                          <label for="cuenta_bancaria"
                            >Cuenta bancaria destino:
                          </label>

                          <select
                            class="custom-select"
                            formControlName="cuenta_bancaria"
                          >
                            <option
                              *ngFor="let item of accounts_destination"
                              [value]="item.id_cuenta_bancaria"
                            >
                              {{ item.nombre }}</option
                            >
                          </select>

                          <div
                            *ngIf="submitted && f.cuenta_bancaria.errors"
                            class="invalid-feedback"
                          >
                            <div *ngIf="f.cuenta_bancaria.errors.required">
                              Campo requerido
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="col-lg-6 col-sm-12 pr-xl-3">
                        <div class="form-group">
                          <label for="comentario">Comentarios: </label>

                          <textarea
                            rows="2"
                            class="form-control"
                            formControlName="comentario"
                            [ngClass]="{
                              'is-invalid': submitted && f.comentario.errors
                            }"
                          ></textarea>
                          <div
                            *ngIf="submitted && f.comentario.errors"
                            class="invalid-feedback"
                          >
                            <div *ngIf="f.comentario.errors.required">
                              Campo requerido
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                  <div class="row">
                    <div class="col-lg-12 col-sm-12 pr-xl-12">
                      <br />
                      <button
                        class="btn btn-primary center-component float-left"
                        type="button"
                        [disabled]="cantConciliate"
                        (click)="conciliateIncome()"
                      >
                        Conciliar ingreso
                      </button>
                      <button
                        class="btn btn-success center-component float-right"
                        type="submit"
                        (click)="submitIncome(investmentProposalForm)"
                        *ngIf="showIncomeForm"
                      >
                        Guardar información de ingreso
                      </button>
                    </div>
                  </div>
                  <br />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <br />
    </div>
  </div>
</div>