frontend-inversiones/src/app/components/investment-proposals/general-info/general-info.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-proposals']">
                  Propuestas de inversión
                </a>
              </li>
              <li class="breadcrumb-item">Nueva</li>
            </ol>
          </nav>
        </div>
      </div>

      <br />
    </div>
    <br />
    <div class="row justify-content-center">
      <div class="col-12">
        <div class="align-container">
          <inv-proposal-navbar
            [activeLink]="'general'"
            [investmentID]="investmentProposalID"
          ></inv-proposal-navbar>
          <div class="card borderless card-wrapper">
            <div class="card-header card-header-icon card-header-rose">
              <h4 class="card-title">
                Propuesta de inversión
              </h4>
            </div>
            <div class="card-body">
              <div class="align-container">
                <form
                  class="form-auth-small ng-untouched ng-pristine ng-valid"
                  [formGroup]="investmentProposalForm"
                >
                  <div class="row">
                    <div class="col-lg-6 col-sm-12 pr-xl-3">
                      <div class="form-group">
                        <label for="asunto">Asunto: </label>
                        <div class="input-box-container">
                          <p>
                            <i class="far fa-keyboard"></i>
                          </p>
                          <input
                            type="text"
                            formControlName="asunto"
                            class="form-control"
                            [ngClass]="{
                              'is-invalid': submitted && f.asunto.errors
                            }"
                          />
                          <div
                            *ngIf="submitted && f.asunto.errors"
                            class="invalid-feedback"
                          >
                            <div *ngIf="f.asunto.errors.required">
                              Campo requerido
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-6 col-sm-12 pr-xl-3">
                      <div class="form-group">
                        <label for="origenes_fondo">Orígenes de fondo: </label>

                        <select
                          class="custom-select"
                          formControlName="origenes_fondo"
                          [ngClass]="{
                            'is-invalid': submitted && f.origenes_fondo.errors
                          }"
                        >
                          <option
                            *ngFor="let item of funds"
                            [value]="item.id_origen_fondo"
                            [selected]="
                              item.id_origen_fondo == general.origenes_fondo
                            "
                          >
                            {{ item.nombre }}</option
                          >
                        </select>
                        <div
                          *ngIf="submitted && f.origenes_fondo.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.origenes_fondo.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="name">Nombre: </label>

                        <div class="input-box-container">
                          <p>
                            <i class="far fa-keyboard"></i>
                          </p>
                          <input
                            type="text"
                            formControlName="name"
                            class="form-control"
                            [ngClass]="{
                              'is-invalid': submitted && f.name.errors
                            }"
                          />
                          <div
                            *ngIf="submitted && f.name.errors"
                            class="invalid-feedback"
                          >
                            <div *ngIf="f.name.errors.required">
                              Campo requerido
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-lg-6 col-sm-12 pr-xl-3">
                      <div class="form-group">
                        <label for="instrumentos">Instrumentos: </label>
                        <ng-container
                          *ngIf="
                            investmentProposalID == undefined;
                            else elseTemplate
                          "
                        >
                          <ng-select
                            #instrumentType
                            [options]="instrumentTypes"
                            formControlName="instrumentos"
                            [ngClass]="{
                              'is-invalid': submitted && f.instrumentos.errors
                            }"
                            (selected)="pre_filled_fields($event)"
                          >
                          </ng-select>
                        </ng-container>
                        <ng-template #elseTemplate>
                          <input
                            type="text"
                            [value]="instrumentValue"
                            name="x"
                            class="form-control"
                            readonly
                          />
                          <input
                            type="hidden"
                            formControlName="instrumentos"
                            class="form-control"
                            [value]="general.instrumentos"
                            readonly
                          />
                        </ng-template>
                        <div
                          *ngIf="submitted && f.instrumentos.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.instrumentos.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="tipo_tasa">Tipo Tasa: </label>

                        <select
                          class="custom-select"
                          formControlName="tipo_tasa"
                          [ngClass]="{
                            'is-invalid': submitted && f.tipo_tasa.errors
                          }"
                        >
                          <option
                            *ngFor="let item of rates"
                            [value]="item.id_tipo_tasa"
                            [selected]="item.id_tipo_tasa == general.tipo_tasa"
                            >{{ item.nombre }}</option
                          >
                        </select>
                        <div
                          *ngIf="submitted && f.tipo_tasa.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.tipo_tasa.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="tipo_renta">Tipo Renta: </label>

                        <select
                          class="custom-select"
                          formControlName="tipo_renta"
                          [ngClass]="{
                            'is-invalid': submitted && f.tipo_renta.errors
                          }"
                        >
                          <option
                            *ngFor="let item of revenues"
                            [value]="item.id_tipo_renta"
                            [selected]="
                              item.id_tipo_renta == general.tipo_renta
                            "
                            >{{ item.nombre }}</option
                          >
                        </select>
                        <div
                          *ngIf="submitted && f.tipo_renta.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.tipo_renta.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="periodicidad">Periodicidad: </label>

                        <select
                          class="custom-select"
                          formControlName="periodicidad"
                          [ngClass]="{
                            'is-invalid': submitted && f.periodicidad.errors
                          }"
                        >
                          <option
                            *ngFor="let item of periodicities"
                            [value]="item.id_periodicidad"
                            [selected]="
                              item.id_periodicidad == general.periodicidad
                            "
                          >
                            {{ item.nombre }}</option
                          >
                        </select>
                        <div
                          *ngIf="submitted && f.periodicidad.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.periodicidad.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="base_anual">Año base: </label>

                        <select
                          class="custom-select"
                          formControlName="base_anual"
                          [ngClass]="{
                            'is-invalid': submitted && f.base_anual.errors
                          }"
                        >
                          <option
                            *ngFor="let item of base_types"
                            [value]="item.id_tipo_base"
                            [selected]="item.id_tipo_base == general.base_anual"
                            >{{ item.tipo_base_dias }}/{{
                              item.tipo_base
                            }}</option
                          >
                        </select>
                        <div
                          *ngIf="submitted && f.base_anual.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.base_anual.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="casa">Casa: </label>
                        <ng-select
                          #casaSelect
                          [options]="financials"
                          formControlName="casa"
                          [ngClass]="{
                            'is-invalid': submitted && f.casa.errors
                          }"
                        >
                        </ng-select>

                        <div
                          *ngIf="submitted && f.casa.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.casa.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="formato_ingreso"
                          >Formato de ingreso:
                        </label>

                        <select
                          class="custom-select"
                          formControlName="formato_ingreso"
                          [ngClass]="{
                            'is-invalid': submitted && f.formato_ingreso.errors
                          }"
                        >
                          <option
                            *ngFor="let item of format_incomes"
                            [value]="item.id_formato_ingreso"
                            [selected]="
                              item.id_formato_ingreso == general.formato_ingreso
                            "
                          >
                            {{ item.nombre }}</option
                          >
                        </select>
                        <div
                          *ngIf="submitted && f.formato_ingreso.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.formato_ingreso.errors.required">
                            Campo requerido
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <br />
                  <div class="form-group text-center space-20">
                    <button
                      type="submit"
                      class="btn btn-primary center-component margin-right"
                      (click)="goToNext(investmentProposalForm)"
                    >
                      Siguiente
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>