src/app/views/recordable-subjects/real-estate/real-estate-editor.component.html
<emp-ng-spinner #spinner [visible]="isLoading"></emp-ng-spinner>
<form [formGroup]="form" [empNgSpinnerHost]="spinner" empNgFormKeyDownEnter
autocomplete="off" class="form-section">
<div class="fx-column-container fx-gap-half sm-fx-gap-none">
<div class="fx-row-container sm-fx-column-container">
<div class="fx-item-size sm-fx-item-none" style="--size: 255px">
<label>Folio real:</label>
<div class="fx-row-container">
<input type="text"
class="text-box fx-item-size" [ngStyle]="{'--size': showElectronicHistoryButton ? '159px': '247px'}"
formControlName="electronicID">
<button type="button" *ngIf="showElectronicHistoryButton"
class="btn fx-item-size" style="--size: 80px"
[style.marginTop.px]="2" (click)="onElectronicHistoryClicked()">Historia</button>
</div>
</div>
<div class="fx-item-size sm-fx-item fx-row-container" style="--size: calc(100% - 255px)">
<div class="fx-item">
<label>Clave catastral:</label>
<input type="text" class="text-box" formControlName="cadastralID"
[class.invalid-control]="formHelper.isControlInvalid(form.controls.cadastralID)">
</div>
<div class="fx-item-size sm-fx-item-none" style="--size: 100px">
<label>Vinculado el:</label>
<input type="text" class="text-box" formControlName="cadastreLinkingDate">
</div>
<div class="fx-item-none" *ngIf="!readonly">
<label>
<a class="link" (click)="onCadastralCertificateClicked()">Cédula catastral:</a>
</label>
<button type="button" class="btn" disabled
[style.marginTop.px]="2"
(click)="onCadastralClicked()">
{{realEstate.cadastralID ? 'Desvincular' : 'Vincular'}}
</button>
</div>
</div>
</div>
<div class="fx-row-container sm-fx-column-container">
<div class="fx-item-size sm-fx-item" style="--size: 255px">
<label>Oficialía:</label>
<emp-ng-select #districtControl formControlName="recorderOfficeUID"
[items]="recorderOfficeList"
[showError]="formHelper.isControlInvalid(form.controls.recorderOfficeUID)"
(changes)="onRecorderOfficeChanges($event)">
</emp-ng-select>
</div>
<div class="fx-item-size sm-fx-item" style="--size: calc(100% - 255px)">
<label>Municipio:</label>
<emp-ng-select formControlName="municipalityUID"
[items]="municipalityList"
[placeholder]="municipalityList.length === 0 ? 'Seleccione la oficialía' : 'Seleccione'"
[showError]="formHelper.isControlInvalid(form.controls.municipalityUID)">
</emp-ng-select>
</div>
</div>
<div class="fx-row-container sm-fx-column-container">
<div class="fx-item-size sm-fx-item" style="--size: 255px">
<label>Tipo de predio:</label>
<emp-ng-select formControlName="kind"
[bindValue]="'name'"
[items]="realEstateKindList"
[showError]="formHelper.isControlInvalid(form.controls.kind)">
</emp-ng-select>
</div>
<div class="fx-item-size sm-fx-item fx-row-container" style="--size: calc(100% - 255px)">
<div class="fx-item-half">
<label class="ellipsis">Superficie total:</label>
<div class="fx-row-container">
<div class="fx-item-half">
<input type="number" class="text-box" formControlName="lotSize"
[class.invalid-control]="formHelper.isControlInvalid(form.controls.lotSize)">
</div>
<div class="fx-item-half">
<emp-ng-select formControlName="lotSizeUnitUID"
[items]="lotSizeUnitList"
[showError]="formHelper.isControlInvalid(form.controls.lotSizeUnitUID)"
[style.width.%]="100">
</emp-ng-select>
</div>
</div>
</div>
<div class="fx-item-quarter">
<label class="ellipsis">Superficie construida (m2):</label>
<input type="number" class="text-box" formControlName="buildingArea"
[class.invalid-control]="formHelper.isControlInvalid(form.controls.buildingArea)">
</div>
<div class="fx-item-quarter">
<label class="ellipsis">Indiviso (%):</label>
<input type="number" class="text-box" formControlName="undividedPct"
[class.invalid-control]="formHelper.isControlInvalid(form.controls.undividedPct)">
</div>
</div>
</div>
<div class="fx-row-container sm-fx-column-container">
<div class="fx-item-size sm-fx-item" style="--size: 255px">
<label class="ellipsis">Lote:</label>
<input type="text" class="text-box" formControlName="lot">
</div>
<div class="fx-item-size sm-fx-item fx-row-container" style="--size: calc(100% - 255px)">
<div class="fx-item-quarter">
<label class="ellipsis">Manzana:</label>
<input type="text" class="text-box" formControlName="block">
</div>
<div class="fx-item-quarter">
<label class="ellipsis">Sección:</label>
<input type="text" class="text-box" formControlName="section">
</div>
</div>
</div>
<div class="fx-row-container sm-fx-column-container">
<div class="fx-item-one">
<label>Descripción del predio (denominación y ubicación):</label>
<textarea class="text-area" empNgTextareaAutoresize [maxHeightTextarea]="null" rows="1"
formControlName="description"
[class.invalid-control]="formHelper.isControlInvalid(form.controls.description)">
</textarea>
</div>
</div>
<div class="fx-row-container sm-fx-column-container">
<div class="fx-item-one">
<label>Medidas y colindancias:</label>
<textarea class="text-area" empNgTextareaAutoresize [maxHeightTextarea]="null" rows="1"
formControlName="metesAndBounds"
[class.invalid-control]="formHelper.isControlInvalid(form.controls.metesAndBounds)">
</textarea>
</div>
</div>
<mat-divider class="horizontal-slim"></mat-divider>
<div class="fx-row-container">
<div class="fx-item fx-start fx-items-center">
<button *ngIf="editionMode" (click)="enableEditor(false)" class="btn">
Descartar Cambios
</button>
</div>
<div class="fx-item fx-center fx-items-center">
<ng-container>
<span class="pr-1">{{editionMode ? 'Marcar el predio como:' : 'Marcado como:'}}</span>
<emp-ng-select
formControlName="status"
bindLabel="statusName"
bindValue="status"
[items]="statusList"
[showError]="formHelper.isControlInvalid(form.controls.status)"
[style.width.px]="125"
(changes)="onStatusChanges($event)">
</emp-ng-select>
</ng-container>
</div>
<div class="fx-item fx-end fx-items-center">
<button *ngIf="!readonly && !editionMode"
class="btn-action"
(click)="enableEditor(true)">
Editar
</button>
<button *ngIf="editionMode"
[class.btn]="!formHelper.isFormReady(form)"
[class.btn-action]="formHelper.isFormReady(form)"
(click)="onSubmitClicked()">
Guardar
</button>
</div>
</div>
</div>
</form>