-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FORM - Refactor Form Builder (#2682)
* ref(form): plex form builder * feat(form): ficha generic * feat(form): config sisa * feat(form): delete config * ref(form): size titulos * feat(forms): select multiple * fix(FORM): Se agrega control para no repetir secciones predefinidas * fix(EP): Agrega control de tipo de ficha al editar * Correcciones ui/ux --------- Co-authored-by: Pancho <martinebucarey@gmail,com> Co-authored-by: silviroa <silviroa@gmail.com> Co-authored-by: Lautaro Molina <lautaro.mlagos@gmail.com>
- Loading branch information
4 people
authored
May 17, 2023
1 parent
fe4dadb
commit 99a8f5c
Showing
17 changed files
with
531 additions
and
70 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 62 additions & 0 deletions
62
...logia/components/ficha-epidemiologica-generic/ficha-epidemiologica-generic.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <plex-layout> | ||
| <plex-layout-main> | ||
| <plex-title titulo="Ficha {{fichaName}}" main> | ||
| <plex-button type="danger" (click)="toBack()">Volver | ||
| </plex-button> | ||
| <plex-button *ngIf="editFicha" position="right" type="success" [autodisabled]="true" | ||
| (click)="registrarFicha()"> | ||
| Registrar | ||
| ficha | ||
| </plex-button> | ||
| </plex-title> | ||
| <form #form="ngForm"> | ||
|
|
||
| <ng-container *ngFor="let seccion of secciones"> | ||
| <plex-title size="sm" titulo="{{seccion.name}}"></plex-title> | ||
| <plex-grid> | ||
| <ng-container *ngFor="let field of seccion.fields" [ngSwitch]="field.type"> | ||
| <ng-container *ngIf="checkDependency(field)"> | ||
| <plex-select *ngSwitchCase="'select'" [label]="field.label?field.label:field.key" | ||
| grow="auto" name="{{ field.key }}" [(ngModel)]="seccion.fields[field.key]" | ||
| [required]="field.required" [ssSearch]="field.resources" | ||
| [readonly]="!editFicha"> | ||
| </plex-select> | ||
| <plex-text *ngSwitchCase="'string'" [label]="field.label?field.label:field.key" grow="auto" | ||
| name="{{ field.key }}" [(ngModel)]="seccion.fields[field.key]" | ||
| [required]="field.required" [readonly]="!editFicha"> | ||
| </plex-text> | ||
| <plex-int *ngSwitchCase="'int'" [label]="field.label?field.label:field.key" grow="auto" | ||
| name="{{ field.key }}" [(ngModel)]="seccion.fields[field.key]" | ||
| [required]="field.required" [readonly]="!editFicha"> | ||
| </plex-int> | ||
| <plex-datetime *ngSwitchCase="'date'" [label]="field.label?field.label:field.key" | ||
| type="date" grow="auto" name="{{ field.key }}" | ||
| [(ngModel)]="seccion.fields[field.key]" [required]="field.required" | ||
| [readonly]="!editFicha"> | ||
| </plex-datetime> | ||
| <plex-phone *ngSwitchCase="'phone'" [label]="field.label?field.label:field.key" | ||
| [(ngModel)]="seccion.fields[field.key]" [required]="field.required" | ||
| placeholder="Ej: 2990000000" name="{{ field.key }}" [readonly]="!editFicha"> | ||
| </plex-phone> | ||
| <plex-bool *ngSwitchCase="'boolean'" [label]="field.label?field.label:field.key" grow="auto" | ||
| name="{{ field.key }}" [(ngModel)]="seccion.fields[field.key]" | ||
| [required]="field.required" [readonly]="!editFicha"> | ||
| </plex-bool> | ||
| <plex-select *ngSwitchCase="'snomed'" [label]="field.label?field.label:field.key" | ||
| grow="auto" name="{{ field.key }}" [(ngModel)]="seccion.fields[field.key]" | ||
| labelField="fsn" idField="conceptId" [required]="field.required" | ||
| placeholder="Ingrese concepto..." | ||
| (getData)="getSnomed(field.snomedCodeOrQuery,$event)" [readonly]="!editFicha"> | ||
| </plex-select> | ||
| <plex-select *ngSwitchCase="'selectStatic'" [label]="field.label?field.label:field.key" | ||
| grow="auto" name="{{ field.key }}" [(ngModel)]="seccion.fields[field.key]" | ||
| [required]="field.required" [data]="field.items" [readonly]="!editFicha" | ||
| [multiple]="field.multiple"> | ||
| </plex-select> | ||
| </ng-container> | ||
| </ng-container> | ||
| </plex-grid> | ||
| </ng-container> | ||
| </form> | ||
| </plex-layout-main> | ||
| </plex-layout> |
162 changes: 162 additions & 0 deletions
162
...iologia/components/ficha-epidemiologica-generic/ficha-epidemiologica-generic.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
| import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core'; | ||
| import { IPaciente } from 'src/app/core/mpi/interfaces/IPaciente'; | ||
| import { FormsService } from '../../../forms-builder/services/form.service'; | ||
| import { NgForm } from '@angular/forms'; | ||
| import { Plex } from '@andes/plex'; | ||
| import { FormsEpidemiologiaService } from '../../services/ficha-epidemiologia.service'; | ||
| import { FormPresetResourcesService } from 'src/app/modules/forms-builder/services/preset.resources.service'; | ||
|
|
||
|
|
||
| @Component({ | ||
| selector: 'app-ficha-epidemiologica-generic', | ||
| templateUrl: './ficha-epidemiologica-generic.component.html' | ||
| }) | ||
| export class FichaEpidemiologicaGenericComponent implements OnInit, OnChanges { | ||
| @Input() fichaName: string; | ||
| @Input() paciente: IPaciente; | ||
| @Input() form: any; | ||
| @Input() fichaPaciente: any; | ||
| @Input() editFicha: boolean; | ||
| @ViewChild('form', { static: false }) ngForm: NgForm; | ||
| @Output() volver = new EventEmitter<any>(); | ||
|
|
||
|
|
||
| public ficha = []; | ||
| public secciones; | ||
| constructor( | ||
| private formsService: FormsService, | ||
| private plex: Plex, | ||
| private formsEpidemiologiaService: FormsEpidemiologiaService, | ||
| private formPresetResourceService: FormPresetResourcesService, | ||
| ) { } | ||
|
|
||
| ngOnInit(): void { } | ||
|
|
||
| ngOnChanges() { | ||
| this.formsService.search({ name: this.fichaName }).subscribe(res => { | ||
| this.secciones = res[0].sections; | ||
| if (this.fichaPaciente) { | ||
| this.fichaPaciente.secciones.map(sec => { | ||
| const buscado = this.secciones.findIndex(seccion => seccion.name === sec.name); | ||
| sec.fields.map(field => { | ||
| const key = Object.keys(field); | ||
| this.secciones[buscado].fields[key[0]] = field[key[0]]; | ||
| }); | ||
| }); | ||
| } else { | ||
| this.secciones.forEach(seccion => { | ||
| if (seccion.preset) { | ||
| this.formPresetResourceService.setResource(`${seccion.preset}`, seccion, this.paciente); | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| registrarFicha() { | ||
| if (this.ngForm.invalid) { | ||
| this.plex.info('warning', 'Hay campos obligatorios que no fueron completados', 'Atención'); | ||
| this.ngForm.control.markAllAsTouched(); | ||
| } else { | ||
| this.getValues(); | ||
| this.setFicha(); | ||
| } | ||
| } | ||
|
|
||
| getValues() { | ||
| this.secciones.map(seccion => { | ||
| const campos = []; | ||
| seccion.fields.forEach(arg => { | ||
| const params = {}; | ||
| const key = arg.key; | ||
| if (key) { | ||
| const valor = seccion.fields[key]; | ||
| if (valor !== undefined && valor !== null) { | ||
| params[key] = valor; | ||
| if (valor instanceof Date) { | ||
| params[key] = valor; | ||
| } else { | ||
| if (valor?.id) { | ||
| // caso en el que los select usan el select-search.directive que viene con los dos campos | ||
| if (valor?.nombre) { | ||
| params[key] = { | ||
| id: valor.id, | ||
| nombre: valor.nombre | ||
| }; | ||
| } else { | ||
| params[key] = valor.id; | ||
| } | ||
| } else if (valor === undefined) { | ||
| params[key] = arg.check; | ||
| } | ||
| } | ||
| campos.push(params); | ||
| } | ||
| } | ||
| }); | ||
| if (campos.length) { | ||
| this.ficha.push({ name: seccion.name, fields: campos }); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| setFicha() { | ||
| const type = this.form ? { id: this.form.id, name: this.form.name } : this.fichaPaciente.type; | ||
| const fichaFinal = { | ||
| type, | ||
| secciones: this.ficha, | ||
| config: this.form ? this.form.config : this.fichaPaciente.config, | ||
| paciente: { | ||
| id: this.paciente.id, | ||
| documento: this.paciente.documento, | ||
| nombre: this.paciente.nombre, | ||
| alias: this.paciente.alias, | ||
| apellido: this.paciente.apellido, | ||
| fechaNacimiento: this.paciente.fechaNacimiento, | ||
| estado: this.paciente.estado, | ||
| tipoIdentificacion: this.paciente.tipoIdentificacion ? this.paciente.tipoIdentificacion : this.paciente.numeroIdentificacion ? 'Passport' : null, | ||
| numeroIdentificacion: this.paciente.numeroIdentificacion ? this.paciente.numeroIdentificacion : null, | ||
| direccion: this.paciente.direccion, | ||
| sexo: this.paciente.sexo, | ||
| genero: this.paciente.genero | ||
| } | ||
| }; | ||
|
|
||
| if (this.fichaPaciente) { | ||
| this.formsEpidemiologiaService.update(this.fichaPaciente._id, fichaFinal).subscribe( | ||
| () => { | ||
| this.plex.toast('success', 'Su ficha fue actualizada correctamente'); | ||
| this.volver.emit(); | ||
| }, | ||
| () => this.plex.toast('danger', 'ERROR: La ficha no pudo ser actualizada') | ||
| ); | ||
| } else { | ||
| this.formsEpidemiologiaService.save(fichaFinal).subscribe( | ||
| () => { | ||
| this.plex.toast('success', 'Su ficha fue registrada correctamente'); | ||
| this.volver.emit(); | ||
| }, | ||
| () => this.plex.toast('danger', 'ERROR: La ficha no pudo ser registrada') | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| checkDependency(field) { | ||
| let res = true; | ||
| if (field.dependency) { | ||
| const seccion = this.secciones.find(seccion => seccion.fields[field.dependency.id]); | ||
| if (!seccion) { | ||
| const seccionBuscada = this.secciones.find(seccion => seccion.fields[field.key]); | ||
| if (seccionBuscada) { | ||
| seccionBuscada.fields[field.key] = null; | ||
| } | ||
| } | ||
| res = seccion ? true : false; | ||
| } | ||
| return res; | ||
| } | ||
|
|
||
| toBack() { | ||
| this.volver.emit(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
src/app/modules/forms-builder/components/form-config/form-config.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <plex-title titulo="Eventos SNVS" size="sm"></plex-title> | ||
| <plex-text label="ID SNVS EVENTO" [(ngModel)]="idEvento" (change)="setIdEvento()"></plex-text> | ||
| <plex-text label="ID SNVS GRUPO EVENTO" [(ngModel)]="idGrupoEvento" (change)="setIdGrupoEvento()"></plex-text> | ||
| <plex-title titulo="campos" size="sm"></plex-title> | ||
| <plex-table [columns]="columns" #table="plTable" *ngIf="form.config?.configField.length"> | ||
| <plex-table-columns></plex-table-columns> | ||
| <tr *ngFor="let item of form.config.configField"> | ||
| <td *plTableCol="'campo'">{{item.value ? item.value.nombre : item.key.nombre}}</td> | ||
| <td *plTableCol="'idEvento'">{{item.event}}</td> | ||
| <td *plTableCol="'acciones'"> | ||
| <plex-icon type="danger" name="delete" (click)="deleteConfig(item)" class="hover"></plex-icon> | ||
| </td> | ||
| </tr> | ||
| </plex-table> | ||
| <plex-select label="Seleccione un campo" size="sm" name="nombre" [(ngModel)]="nuevaConfig.campo" [data]="items" | ||
| (change)="checkStatic($event)"> | ||
| </plex-select> | ||
| <plex-select *ngIf="itemsSelect.length" label="Seleccione un item" size="sm" name="itemSelect" | ||
| [(ngModel)]="nuevaConfig.valor" [data]="itemsSelect"> | ||
| </plex-select> | ||
| <plex-text label="Ingrese numero de evento" name="idEvento" [(ngModel)]="nuevaConfig.idEvento"></plex-text> | ||
| <plex-button class="float-right mt-1" size="md" type="success" (click)="addConfig()">Agregar | ||
| </plex-button> |
Oops, something went wrong.