brainloper-ui 1.0.13 → 1.0.14

package/fesm2020/brainloper-ui.mjs

@@ -51,9 +51,11 @@ import { MatTableModule } from '@angular/material/table';
 import * as i1$3 from '@ng-bootstrap/ng-bootstrap';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i10 from '@angular/forms';
-import { FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/common/http';
 import { HttpParams, HttpClientModule } from '@angular/common/http';
+import { forkJoin } from 'rxjs';
+import { map } from 'rxjs/operators';
 import Swal from 'sweetalert2';
 import * as i5 from 'mat-select-filter';
 import { MatSelectFilterModule } from 'mat-select-filter';
@@ -441,83 +443,71 @@ class TableModalComponent {
         this.data = data;
         this.formBuilder = formBuilder;
         this.http = http;
-        this.modalForm = {};
+        this.modalForm = new FormGroup({});
         this.dataCombo = {};
     }
     onNoClick() {
         this.dialogRef.close();
     }
     ngOnInit() {
-        let columns = this.data.columns;
-        //console.log('data columns', this.data.columns);
+        let group = {};
+        let httpRequests = [];
         this.data.columns.forEach((element, index) => {
-            let text = `{"${element.ID}":""}`;
-            let json = JSON.parse(text);
-            Object.assign(this.modalForm, json);
+            if (element.disregardForAdd) {
+                return;
+            }
             if (element.type == 'combo') {
-                Object.assign(this.dataCombo, json);
+                Object.assign(this.dataCombo, { [element.ID]: '' });
             }
+            let initialValue = '';
             if (this.data.action == 'edit') {
-                this.modalForm[element.ID] = element.value;
-                if (element.type === 'date') {
-                    if (element.value) {
-                        let s = element.value.split('/');
-                        element.value = `${s[2]}-${s[1]}-${s[0]}`;
-                    }
+                initialValue = element.value;
+                if (element.type === 'date' && element.value) {
+                    let s = element.value.split('/');
+                    initialValue = `${s[2]}-${s[1]}-${s[0]}`;
                 }
             }
+            group[element.ID] = element.required ? new FormControl(initialValue, Validators.required) : new FormControl(initialValue);
             if (element.paramsCombo) {
-                //console.log(element.paramsCombo.url);
-                //console.log(element.paramsCombo.urlParams);
-                this.http
+                httpRequests.push(this.http
                     .getData(element.paramsCombo.url, element.paramsCombo.urlParams)
-                    .subscribe((res) => {
+                    .pipe(map((res) => {
                     if (res['code'] === 0) {
                         this.dataCombo[element.ID] = res['body'];
-                        //console.log(this.dataCombo);
                         this.dataCombo[element.ID].forEach((data) => {
-                            // console.log(data[element.paramsCombo.visibleField], element.value)
-                            if (data[element.paramsCombo.visibleField] == element.value) {
-                                this.modalForm[element.ID] =
-                                    data[element.paramsCombo.selectionField];
-                                this.data.columns[index].value =
-                                    data[element.paramsCombo.selectionField].toString();
+                            if (data[element.paramsCombo.selectionField] == element.value) {
+                                group[element.ID].setValue(data[element.paramsCombo.selectionField]);
                             }
                         });
                     }
-                    else {
-                        console.log('error en la consulta');
-                    }
-                }, (err) => {
-                    console.log(err);
-                });
+                })));
             }
         });
-        //console.log(this.dataCombo);
+        forkJoin(httpRequests).subscribe(() => {
+            this.modalForm = new FormGroup(group);
+        });
     }
     onSubmit() {
-        this.dialogRef.close(this.modalForm);
+        if (this.modalForm.valid) {
+            this.dialogRef.close(this.modalForm.value);
+        }
     }
     onChange(id, $event, type) {
         switch (type) {
-            // case 'date':
-            //   this.modalForm[id] = $event.target.value;
-            //   break;
             case 'combo':
-                this.modalForm[id] = $event.value;
+                this.modalForm.get(id).setValue($event.value);
                 break;
             default:
-                this.modalForm[id] = $event.target.value;
+                this.modalForm.get(id).setValue($event.target.value);
                 break;
         }
-        //console.log('onChange', $event, id);
     }
 }
 TableModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TableModalComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i10.FormBuilder }, { token: HttpService }], target: i0.ɵɵFactoryTarget.Component });
-TableModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: TableModalComponent, selector: "app-table-modal", ngImport: i0, template: "<div>\r\n    <div style='display:flex; justify-content: space-between;'>\r\n        <div>\r\n            <strong>\r\n                <h3 *ngIf='data.action==\"edit\"'> Editar </h3>\r\n                <h3 *ngIf='data.action==\"add\"'> Agregar </h3>\r\n            </strong>\r\n        </div>\r\n        <div mat-dialog-close>\r\n            <i class=\"fa fa-times-circle\" style=\"font-size: 150%; position: relative;\"></i>\r\n        </div>\r\n    </div>\r\n\r\n    <form>\r\n\r\n        <div *ngFor='let input of data.columns'>\r\n\r\n\r\n\r\n                <div *ngIf='data.action==\"edit\"; else Agregar'>\r\n                  <mat-form-field *ngIf=\"!input.disregardForEdit\">\r\n                    <div *ngIf='input.type==\"combo\"; else otherInputEdit'>\r\n\r\n                        <mat-select [value]='input.value' (selectionChange)='onChange(input.ID,$event, input.type)'\r\n                            placeholder='{{input.label}}'>\r\n                            <mat-option *ngFor='let data of dataCombo[input.ID]'\r\n                                value='{{data[input.paramsCombo.selectionField]}}'>\r\n                                {{data[input.paramsCombo.visibleField]}}</mat-option>\r\n                        </mat-select>\r\n                    </div>\r\n\r\n                    <ng-template #otherInputEdit>\r\n                        <input [type]='input.type' [name]='input.ID' [value]='input.value'\r\n                            (input)='onChange(input.ID,$event, input.type)' matInput [placeholder]='input.label' [required]=\"input.required\" />\r\n                    </ng-template>\r\n\r\n                    <mat-error>Campo Obligatorio</mat-error>\r\n                  </mat-form-field>\r\n\r\n                </div>\r\n\r\n                <ng-template #Agregar>\r\n                  <mat-form-field *ngIf=\"!input.disregardForAdd\">\r\n                    <div *ngIf='input.type==\"combo\"; else otherInput'>\r\n\r\n                        <mat-select (selectionChange)='onChange(input.ID,$event, input.type)' placeholder='{{input.label}}'>\r\n                            <mat-option *ngFor='let data of dataCombo[input.ID]'\r\n                                value='{{data[input.paramsCombo.selectionField]}}'>\r\n                                {{data[input.paramsCombo.visibleField]}}</mat-option>\r\n                        </mat-select>\r\n\r\n                    </div>\r\n\r\n                    <ng-template #otherInput>\r\n                        <input [type]='input.type' [name]='input.ID' (input)='onChange(input.ID, $event, input.type)'\r\n                            matInput [placeholder]='input.label' [required]=\"input.required\"  />\r\n\r\n                    </ng-template>\r\n                    <mat-error>Campo Obligatorio</mat-error>\r\n                  </mat-form-field>\r\n                </ng-template>\r\n\r\n\r\n\r\n\r\n        </div>\r\n\r\n        <button *ngIf='data.action==\"add\" || data.action==\"edit\"' (click)='onSubmit()' color='primary' mat-raised-button>Guardar</button>\r\n\r\n    </form>\r\n</div>\r\n\r\n", styles: ["button{width:100%}mat-form-field{width:100%}\n"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i10.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.MatError, selector: "mat-error", inputs: ["id"] }] });
+TableModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: TableModalComponent, selector: "app-table-modal", ngImport: i0, template: "<div>\r\n    <div style='display:flex; justify-content: space-between;'>\r\n        <div>\r\n            <strong>\r\n                <h3 *ngIf='data.action==\"edit\"'> Editar </h3>\r\n                <h3 *ngIf='data.action==\"add\"'> Agregar </h3>\r\n            </strong>\r\n        </div>\r\n        <div mat-dialog-close>\r\n            <i class=\"fa fa-times-circle\" style=\"font-size: 150%; position: relative;\"></i>\r\n        </div>\r\n    </div>\r\n\r\n    <form [formGroup]=\"modalForm\">\r\n\r\n        <div *ngFor='let input of data.columns'>\r\n\r\n\r\n\r\n                <div *ngIf='data.action==\"edit\"; else Agregar'>\r\n                  <mat-form-field *ngIf=\"!input.disregardForEdit\">\r\n                    <div *ngIf='input.type==\"combo\"; else otherInputEdit'>\r\n\r\n                        <mat-select [value]=\"input.value\" (selectionChange)='onChange(input.ID,$event, input.type)'\r\n                            placeholder='{{input.label}}' [required]=\"input.required\">\r\n                            <mat-option *ngFor='let data of dataCombo[input.ID]'\r\n                                [value]='data[input.paramsCombo.selectionField]'>\r\n                                {{data[input.paramsCombo.visibleField]}}</mat-option>\r\n                        </mat-select>\r\n                    </div>\r\n\r\n                    <ng-template #otherInputEdit>\r\n                        <input [type]='input.type' [name]='input.ID' [value]='input.value'\r\n                            (input)='onChange(input.ID,$event, input.type)' matInput [placeholder]='input.label' [required]=\"input.required\" />\r\n                    </ng-template>\r\n\r\n                    <mat-error>Campo Obligatorio</mat-error>\r\n                  </mat-form-field>\r\n\r\n                </div>\r\n\r\n                <ng-template #Agregar>\r\n                  <mat-form-field *ngIf=\"!input.disregardForAdd\">\r\n                    <div *ngIf='input.type==\"combo\"; else otherInput'>\r\n\r\n                        <mat-select (selectionChange)='onChange(input.ID,$event, input.type)' placeholder='{{input.label}}' [required]=\"input.required\">\r\n                            <mat-option *ngFor='let data of dataCombo[input.ID]'\r\n                                [value]='data[input.paramsCombo.selectionField]'>\r\n                                {{data[input.paramsCombo.visibleField]}}</mat-option>\r\n                        </mat-select>\r\n\r\n                    </div>\r\n\r\n                    <ng-template #otherInput>\r\n                        <input [type]='input.type' [name]='input.ID' (input)='onChange(input.ID, $event, input.type)'\r\n                            matInput [placeholder]='input.label' [required]=\"input.required\"  />\r\n\r\n                    </ng-template>\r\n                    <mat-error>Campo Obligatorio</mat-error>\r\n                  </mat-form-field>\r\n                </ng-template>\r\n\r\n\r\n\r\n\r\n        </div>\r\n\r\n        <button *ngIf='data.action==\"add\" || data.action==\"edit\"'\r\n            (click)='onSubmit()'\r\n            color='primary'\r\n            mat-raised-button\r\n            [disabled]=\"!modalForm.valid\">Guardar</button>\r\n\r\n    </form>\r\n</div>\r\n\r\n", styles: ["button{width:100%}mat-form-field{width:100%}\n"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i10.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TableModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-modal', template: "<div>\r\n    <div style='display:flex; justify-content: space-between;'>\r\n        <div>\r\n            <strong>\r\n                <h3 *ngIf='data.action==\"edit\"'> Editar </h3>\r\n                <h3 *ngIf='data.action==\"add\"'> Agregar </h3>\r\n            </strong>\r\n        </div>\r\n        <div mat-dialog-close>\r\n            <i class=\"fa fa-times-circle\" style=\"font-size: 150%; position: relative;\"></i>\r\n        </div>\r\n    </div>\r\n\r\n    <form>\r\n\r\n        <div *ngFor='let input of data.columns'>\r\n\r\n\r\n\r\n                <div *ngIf='data.action==\"edit\"; else Agregar'>\r\n                  <mat-form-field *ngIf=\"!input.disregardForEdit\">\r\n                    <div *ngIf='input.type==\"combo\"; else otherInputEdit'>\r\n\r\n                        <mat-select [value]='input.value' (selectionChange)='onChange(input.ID,$event, input.type)'\r\n                            placeholder='{{input.label}}'>\r\n                            <mat-option *ngFor='let data of dataCombo[input.ID]'\r\n                                value='{{data[input.paramsCombo.selectionField]}}'>\r\n                                {{data[input.paramsCombo.visibleField]}}</mat-option>\r\n                        </mat-select>\r\n                    </div>\r\n\r\n                    <ng-template #otherInputEdit>\r\n                        <input [type]='input.type' [name]='input.ID' [value]='input.value'\r\n                            (input)='onChange(input.ID,$event, input.type)' matInput [placeholder]='input.label' [required]=\"input.required\" />\r\n                    </ng-template>\r\n\r\n                    <mat-error>Campo Obligatorio</mat-error>\r\n                  </mat-form-field>\r\n\r\n                </div>\r\n\r\n                <ng-template #Agregar>\r\n                  <mat-form-field *ngIf=\"!input.disregardForAdd\">\r\n                    <div *ngIf='input.type==\"combo\"; else otherInput'>\r\n\r\n                        <mat-select (selectionChange)='onChange(input.ID,$event, input.type)' placeholder='{{input.label}}'>\r\n                            <mat-option *ngFor='let data of dataCombo[input.ID]'\r\n                                value='{{data[input.paramsCombo.selectionField]}}'>\r\n                                {{data[input.paramsCombo.visibleField]}}</mat-option>\r\n                        </mat-select>\r\n\r\n                    </div>\r\n\r\n                    <ng-template #otherInput>\r\n                        <input [type]='input.type' [name]='input.ID' (input)='onChange(input.ID, $event, input.type)'\r\n                            matInput [placeholder]='input.label' [required]=\"input.required\"  />\r\n\r\n                    </ng-template>\r\n                    <mat-error>Campo Obligatorio</mat-error>\r\n                  </mat-form-field>\r\n                </ng-template>\r\n\r\n\r\n\r\n\r\n        </div>\r\n\r\n        <button *ngIf='data.action==\"add\" || data.action==\"edit\"' (click)='onSubmit()' color='primary' mat-raised-button>Guardar</button>\r\n\r\n    </form>\r\n</div>\r\n\r\n", styles: ["button{width:100%}mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'app-table-modal', template: "<div>\r\n    <div style='display:flex; justify-content: space-between;'>\r\n        <div>\r\n            <strong>\r\n                <h3 *ngIf='data.action==\"edit\"'> Editar </h3>\r\n                <h3 *ngIf='data.action==\"add\"'> Agregar </h3>\r\n            </strong>\r\n        </div>\r\n        <div mat-dialog-close>\r\n            <i class=\"fa fa-times-circle\" style=\"font-size: 150%; position: relative;\"></i>\r\n        </div>\r\n    </div>\r\n\r\n    <form [formGroup]=\"modalForm\">\r\n\r\n        <div *ngFor='let input of data.columns'>\r\n\r\n\r\n\r\n                <div *ngIf='data.action==\"edit\"; else Agregar'>\r\n                  <mat-form-field *ngIf=\"!input.disregardForEdit\">\r\n                    <div *ngIf='input.type==\"combo\"; else otherInputEdit'>\r\n\r\n                        <mat-select [value]=\"input.value\" (selectionChange)='onChange(input.ID,$event, input.type)'\r\n                            placeholder='{{input.label}}' [required]=\"input.required\">\r\n                            <mat-option *ngFor='let data of dataCombo[input.ID]'\r\n                                [value]='data[input.paramsCombo.selectionField]'>\r\n                                {{data[input.paramsCombo.visibleField]}}</mat-option>\r\n                        </mat-select>\r\n                    </div>\r\n\r\n                    <ng-template #otherInputEdit>\r\n                        <input [type]='input.type' [name]='input.ID' [value]='input.value'\r\n                            (input)='onChange(input.ID,$event, input.type)' matInput [placeholder]='input.label' [required]=\"input.required\" />\r\n                    </ng-template>\r\n\r\n                    <mat-error>Campo Obligatorio</mat-error>\r\n                  </mat-form-field>\r\n\r\n                </div>\r\n\r\n                <ng-template #Agregar>\r\n                  <mat-form-field *ngIf=\"!input.disregardForAdd\">\r\n                    <div *ngIf='input.type==\"combo\"; else otherInput'>\r\n\r\n                        <mat-select (selectionChange)='onChange(input.ID,$event, input.type)' placeholder='{{input.label}}' [required]=\"input.required\">\r\n                            <mat-option *ngFor='let data of dataCombo[input.ID]'\r\n                                [value]='data[input.paramsCombo.selectionField]'>\r\n                                {{data[input.paramsCombo.visibleField]}}</mat-option>\r\n                        </mat-select>\r\n\r\n                    </div>\r\n\r\n                    <ng-template #otherInput>\r\n                        <input [type]='input.type' [name]='input.ID' (input)='onChange(input.ID, $event, input.type)'\r\n                            matInput [placeholder]='input.label' [required]=\"input.required\"  />\r\n\r\n                    </ng-template>\r\n                    <mat-error>Campo Obligatorio</mat-error>\r\n                  </mat-form-field>\r\n                </ng-template>\r\n\r\n\r\n\r\n\r\n        </div>\r\n\r\n        <button *ngIf='data.action==\"add\" || data.action==\"edit\"'\r\n            (click)='onSubmit()'\r\n            color='primary'\r\n            mat-raised-button\r\n            [disabled]=\"!modalForm.valid\">Guardar</button>\r\n\r\n    </form>\r\n</div>\r\n\r\n", styles: ["button{width:100%}mat-form-field{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]