src/app/views/recordable-subjects/instrument/instrument-editor.component.html
<form [formGroup]="form" [empNgSpinnerHost]="spinner" empNgFormKeyDownEnter
autocomplete="off" class="form-section">
<emp-ng-spinner #spinner [visible]="isLoading"></emp-ng-spinner>
<div class="section-title" *ngIf="title">{{ title }}</div>
<div class="fx-column-container fx-gap-three-quarter sm-fx-gap-none">
<div class="fx-row-container sm-fx-column-container">
<div class="fx-item-third sm-fx-item">
<label>Tipo de instrumento:</label>
<emp-ng-select formControlName="type"
[bindLabel]="'typeName'"
[bindValue]="'type'"
[items]="instrumentTypesList"
[showError]="formHelper.isControlInvalid(form.controls.type)"
(changes)="onInstrumentTypeChanges($event)">
</emp-ng-select>
</div>
<ng-container *ngIf="!validateTypeSelected([InstrumentTypes.Resumen])">
<div class="fx-item-third">
<label>Fecha:</label>
<emp-ng-datepicker formControlName="issueDate">
</emp-ng-datepicker>
</div>
<div class="fx-item-third sm-fx-item fx-row-container fx-end">
<div class="fx-item-size" style="--size: 100px">
<label>Número de hojas:</label>
<input formControlName="sheetsCount" type="number" class="text-box"
[class.invalid-control]="formHelper.isControlInvalid(form.controls.sheetsCount)">
</div>
</div>
</ng-container>
</div>
<ng-container *ngIf="typeSelected">
<div class="fx-row-container sm-fx-column-container" *ngIf="!validateTypeSelected([InstrumentTypes.Resumen])">
<div class="fx-item-size" style="--size: 100%">
<ng-container [ngSwitch]="typeSelected">
<label *ngSwitchCase="InstrumentTypes.DocumentoJuzgado">Autoridad:</label>
<label *ngSwitchCase="InstrumentTypes.DocumentoTerceros">Expedido por:</label>
<label *ngSwitchCase="InstrumentTypes.TituloPropiedad">Expedido por C.:</label>
<label *ngSwitchDefault>Notaría:</label>
</ng-container>
<emp-ng-select formControlName="issuer"
[config]="{ clearable: true, hideSelected: true, minTermLength: issuerMinTermLength }"
[items]="issuerList$ | async"
[typeahead]="issuerInput$"
[loading]="issuerLoading">
<ng-template #labelTemplate let-item="item">
<ng-container *ngIf="validateTypeSelected([InstrumentTypes.EscrituraPublica,
InstrumentTypes.OficioNotaria])">
<span class="ng-value-label">
<strong>{{item.entity}}, {{item.place}} - </strong>
{{item.officialPosition}} - {{item.name}}
</span>
</ng-container>
<ng-container *ngIf="validateTypeSelected([InstrumentTypes.DocumentoJuzgado])">
<span class="ng-value-label">
<strong>{{item.place}} - </strong>
{{item.officialPosition}} - {{item.name}}
</span>
</ng-container>
<ng-container *ngIf="validateTypeSelected([InstrumentTypes.DocumentoTerceros,
InstrumentTypes.TituloPropiedad])">
<span class="ng-value-label">
<strong>{{item.name}} - </strong>
{{item.officialPosition}}
</span>
</ng-container>
</ng-template>
<ng-template #optionTemplate let-item="item">
<ng-container *ngIf="validateTypeSelected([InstrumentTypes.EscrituraPublica,
InstrumentTypes.OficioNotaria])">
<div class="ng-option item-template">
{{item.entity}}, {{item.place}}<br>
<span class="item-text-sm">
<strong>{{item.officialPosition}}</strong>
{{item.name}}
</span>
</div>
</ng-container>
<ng-container *ngIf="validateTypeSelected([InstrumentTypes.DocumentoJuzgado])">
<div class="ng-option item-template">
<strong>{{item.place}},</strong> {{item.officialPosition}}<br>
{{item.name}}
</div>
</ng-container>
<ng-container *ngIf="validateTypeSelected([InstrumentTypes.DocumentoTerceros,
InstrumentTypes.TituloPropiedad])">
<div class="ng-option item-template">
<strong>{{item.name}}</strong> <br>
{{item.officialPosition}}
</div>
</ng-container>
</ng-template>
</emp-ng-select>
</div>
</div>
<div class="fx-row-container sm-fx-column-container">
<div class="fx-item-third sm-fx-item"
*ngIf="validateTypeSelected([InstrumentTypes.OficioNotaria,
InstrumentTypes.DocumentoJuzgado,
InstrumentTypes.DocumentoTerceros,
InstrumentTypes.Resumen])">
<ng-container [ngSwitch]="typeSelected">
<label *ngSwitchCase="InstrumentTypes.DocumentoTerceros">Tipo de documento:</label>
<label *ngSwitchCase="InstrumentTypes.Resumen">Tipo de documento:</label>
<label *ngSwitchDefault>Tipo de oficio:</label>
</ng-container>
<emp-ng-select formControlName="kind"
[items]="instrumentKindsList"
[config]="{clearable: true}"
[bindValue]="'name'"
[showError]="formHelper.isControlInvalid(form.controls.kind)">
</emp-ng-select>
</div>
<div class="fx-item-third sm-fx-item" *ngIf="!validateTypeSelected([InstrumentTypes.Resumen])">
<ng-container [ngSwitch]="typeSelected">
<label *ngSwitchCase="InstrumentTypes.EscrituraPublica">Escritura:</label>
<label *ngSwitchCase="InstrumentTypes.OficioNotaria">No. Oficio:</label>
<label *ngSwitchCase="InstrumentTypes.DocumentoJuzgado">Oficio:</label>
<label *ngSwitchCase="InstrumentTypes.DocumentoTerceros">No. Documento:</label>
<label *ngSwitchCase="InstrumentTypes.TituloPropiedad">Título de propiedad No.:</label>
</ng-container>
<input formControlName="instrumentNo"
type="text"
class="text-box uppercase">
</div>
<div class="fx-item-third sm-fx-item"
*ngIf="validateTypeSelected([InstrumentTypes.EscrituraPublica,
InstrumentTypes.DocumentoJuzgado])">
<ng-container [ngSwitch]="typeSelected">
<label *ngSwitchCase="InstrumentTypes.EscrituraPublica">Volumen / libro:</label>
<label *ngSwitchDefault>Expediente:</label>
</ng-container>
<input formControlName="binderNo"
type="text"
class="text-box uppercase">
</div>
<div class="fx-item-third sm-fx-item fx-row-container fx-end"
*ngIf="validateTypeSelected([InstrumentTypes.EscrituraPublica])">
<div class="fx-item-size" style="--size: 100px">
<label>Folio del:</label>
<input formControlName="folio"
type="text"
class="text-box uppercase"
style="width: 90px;">
</div>
<div class="fx-item-size" style="--size: 100px">
<label>al:</label>
<input formControlName="endFolio"
type="text"
class="text-box uppercase"
style="width: 90px;">
</div>
</div>
<div class="fx-item-third sm-fx-item"
*ngIf="validateTypeSelected([InstrumentTypes.TituloPropiedad])">
<label>Folio:</label>
<input formControlName="folio"
type="text"
class="text-box uppercase">
</div>
</div>
</ng-container>
<div class="fx-row-container sm-fx-column-container">
<div class="fx-item">
<label>Descripción del instrumento:</label>
<emp-ng-text-editor formControlName="summary">
</emp-ng-text-editor>
</div>
</div>
<mat-divider *ngIf="actions.can.editInstrument || actions.show.registrationStamps || addMode"
class="horizontal-slim" >
</mat-divider>
<div class="fx-row-container">
<div class="fx-item-third fx-start">
<button *ngIf="actions.can.editInstrument && !addMode"
(click)="enableEditor(!editionMode)"
[ngClass]="editionMode ? 'btn' : 'btn-action'">
{{editionMode ? 'Descartar Cambios' : 'Editar Documento'}}
</button>
</div>
<div class="fx-item-third fx-center fx-items-center" *ngIf="showStatusField && editionMode">
<span class="pr-1">Marcar la inscripción como:</span>
<emp-ng-select
formControlName="status"
[items]="statusList"
[showError]="formHelper.isControlInvalid(form.controls.status)">
</emp-ng-select>
</div>
<div class="fx-item fx-row-container fx-end">
<button *ngIf="editionMode && ( actions.can.editInstrument || addMode )"
(click)="onSubmitClicked()"
class="btn-action">
{{ submitButtonText }}
</button>
<ng-container *ngIf="!editionMode">
<button *ngIf="actions.can.openInstrument"
(click)="onOpenRegistrationClicked()"
class="btn-action">
Abrir registro
</button>
<button *ngIf="actions.can.closeInstrument"
(click)="onCloseRegistrationClicked()"
class="btn-action">
Cerrar registro
</button>
<button *ngIf="actions.show.registrationStamps"
(click)="onPrintRegistrationStampMediaClicked()"
class="btn-action">
Imprimir sello interesado
</button>
</ng-container>
</div>
</div>
</div>
</form>