Merge pull request #26 from jogaec22/Dev-JE

Loader and combo for state proform

package.json

@@ -17,13 +17,15 @@
     "@angular/compiler": "~9.0.7",
     "@angular/core": "~9.0.7",
     "@angular/forms": "~9.0.7",
+    "@angular/localize": "^9.1.12",
     "@angular/material": "^9.2.2",
     "@angular/platform-browser": "~9.0.7",
     "@angular/platform-browser-dynamic": "~9.0.7",
     "@angular/router": "~9.0.7",
     "@auth0/auth0-spa-js": "^1.11.0",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@handsontable/angular": "^5.1.1",
+    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
     "@ng-select/ng-select": "^4.0.0",
     "@ngtools/webpack": "^9.1.0",
     "@ngx-formly/bootstrap": "^5.0.0",

src/app/admin/login/login.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./login.component.css']
 })
 export class LoginComponent implements OnInit {
-
+  
   constructor() { }
 
   ngOnInit(): void {

src/app/admin/menu/menu.component.html

@@ -56,6 +56,7 @@ <h2 class="brand-text mb-0">Santillana</h2>
             <li class=" nav-item"><a ><i class="bx bx-file"></i><span class="menu-title" data-i18n="Invoice">Proformas</span></a>
                 <ul class="menu-content">
                     <li><a [routerLink]="['/proform-list']"><i class="bx bx-right-arrow-alt"></i><span class="menu-item" data-i18n="Invoice List">Lista de Proformas</span></a></li>
+                    <li><a [routerLink]="['/proform-state']"><i class="bx bx-right-arrow-alt"></i><span class="menu-item" data-i18n="Invoice List">Estado de Proformas</span></a></li>
                     <li><a [routerLink]="['/proform']" ><i class="bx bx-right-arrow-alt"></i><span class="menu-item" data-i18n="Invoice Add">Ingresar</span></a></li>
                 </ul>
             </li>

src/app/app.keys.ts

@@ -224,4 +224,8 @@ export const ValidatesPattern = {
 export declare interface TransformColumns { 
 
   namesToProps(json): any;
+}
+
+export namespace LoaderIds {
+  export const LOADER_PROJECT = 'loader-project';  
 }

src/app/configuration/client/client.component.ts

@@ -1,14 +1,15 @@
 'use strict';
 
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { ClientColumns, TransformColumns } from '../../app.keys';
+import { ClientColumns, LoaderIds, TransformColumns } from '../../app.keys';
 import { COLUMNS_CLIENT } from './clientColumns';
 import { ProjectComponent } from '../../shared/components/project/project.component';
 import { ExcelExportService } from '../../shared/service/export-excel.service';
 import * as _ from 'lodash';
 import { ClientService } from 'src/app/shared/service/client.service';
 import { Router, ActivatedRoute } from '@angular/router';
 import { forkJoin } from 'rxjs';
+import { NgxUiLoaderService } from 'ngx-ui-loader';
 
 //const dataVal = require('./client.json');
 
@@ -30,22 +31,22 @@ export class ClientComponent implements OnInit, TransformColumns {
     private clientService: ClientService,
     private router: Router,
     private route: ActivatedRoute,
-    ) {
-
+    private loaderService: NgxUiLoaderService
+  ) {
   }
 
   ngOnInit(): void {
-    const self = this;  
+    const self = this;
 
     this.enabledTitle = true;
     this.allowExcelExport = true;
 
     this.getDataClient().subscribe(data => {
-      self.data = data;        
-     });
+      self.data = data;
+    });
   }
 
-  
+
   public onExportExcel(excelData): any {
     if (!_.isNil(excelData.data) && !_.isEmpty(excelData.data)) {
       this.excelExportService.generateExcelFromJson(
@@ -60,32 +61,36 @@ export class ClientComponent implements OnInit, TransformColumns {
     let jsonEditClient: any[] = [];
     let jsonAddClient: any[] = [];
     let jsonFinal = this.namesToProps(jsonData);
-    for ( const row of jsonFinal ){
-      if( !_.isNil(row['id']) ){
+    for (const row of jsonFinal) {
+      if (!_.isNil(row['id'])) {
         jsonEditClient.push(row);
       } else {
         jsonAddClient.push(row);
       }
     }
 
-    for ( const row of jsonAddClient )
+    for (const row of jsonAddClient)
       delete row['id'];
 
-      const self = this;
-      forkJoin(
-        this.clientService.createClient(JSON.stringify(jsonAddClient)),
-        this.clientService.updateClient(JSON.stringify(jsonEditClient))
-      ).subscribe( ([addClient, editClient ]) => {
-        alert('Se ha guardado correctamente los clientes');
-        this.router.navigateByUrl('/client', { skipLocationChange: true }).then(() => {
-          this.router.navigate(['/client']);
-      }); 
-        setTimeout(() => {}, 1000);        
-      });  
+    const self = this;
+    forkJoin(
+      this.clientService.createClient(JSON.stringify(jsonAddClient)),
+      this.clientService.updateClient(JSON.stringify(jsonEditClient))
+    ).subscribe(([addClient, editClient]) => {
+      alert('Se ha guardado correctamente los clientes');
+      this.loaderService.stopLoader(LoaderIds.LOADER_PROJECT);
+      this.router.navigateByUrl('/client', { skipLocationChange: true }).then(() => {
+        this.router.navigate(['/client']);
+      });
+      setTimeout(() => { }, 1000);
+    }, err => {
+      alert('Ha ocurrido un error al guardar los clientes');
+      this.loaderService.stopLoader(LoaderIds.LOADER_PROJECT);
+    });
   }
 
-  public namesToProps(json){
-    return json.map(key => {      
+  public namesToProps(json) {
+    return json.map(key => {
       let res = {};
       res[`${ClientColumns.ID.prop}`] = key[ClientColumns.ID.name];
       res[`${ClientColumns.COD_CLIENT.prop}`] = key[ClientColumns.COD_CLIENT.name];
@@ -94,7 +99,7 @@ export class ClientComponent implements OnInit, TransformColumns {
       res[`${ClientColumns.NAME.prop}`] = key[ClientColumns.NAME.name];
       res[`${ClientColumns.NICKNAME.prop}`] = key[ClientColumns.NICKNAME.name];
       res[`${ClientColumns.TYPE.prop}`] = key[ClientColumns.TYPE.name];
-      res[`${ClientColumns.STATUS.prop}`] = key[ClientColumns.STATUS.name];      
+      res[`${ClientColumns.STATUS.prop}`] = key[ClientColumns.STATUS.name];
       return res;
     });
   }

src/app/configuration/colleges/colleges.component.ts

@@ -1,14 +1,15 @@
 'use strict';
 
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { ClientColumns, CollegesColumns, TransformColumns, TypeRegion } from '../../app.keys';
+import { ClientColumns, CollegesColumns, LoaderIds, TransformColumns, TypeRegion } from '../../app.keys';
 import { COLUMNS_COLLEGES } from './collegesColumns';
 import { ProjectComponent } from '../../shared/components/project/project.component';
 import { ExcelExportService } from '../../shared/service/export-excel.service';
 import * as _ from 'lodash';
 import { forkJoin } from 'rxjs';
 import { CollegeService } from 'src/app/shared/service/college.service';
 import { Router } from '@angular/router';
+import { NgxUiLoaderService } from 'ngx-ui-loader';
 
 //const dataVal = require('./colleges.json');
 
@@ -29,6 +30,7 @@ export class CollegesComponent implements OnInit, TransformColumns {
     private excelExportService: ExcelExportService,
     private collegeService: CollegeService,
     private router: Router,
+    private loaderService: NgxUiLoaderService
     ) { }
 
   ngOnInit(): void {
@@ -79,6 +81,7 @@ export class CollegesComponent implements OnInit, TransformColumns {
         this.collegeService.updateCollege(JSON.stringify(jsonEditCollege))
       ).subscribe( ([addCollege, editCollege ]) => {
         alert('Se ha guardado correctamente los colegios');
+        this.loaderService.stopLoader(LoaderIds.LOADER_PROJECT);
         this.router.navigateByUrl('/college', { skipLocationChange: true }).then(() => {
           this.router.navigate(['/college']);
       }); 

src/app/configuration/product/product.component.ts

@@ -1,15 +1,17 @@
 'use strict';
 
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { ProductColumns, TypeRegion, TransformColumns } from '../../app.keys';
+import { ProductColumns, TypeRegion, TransformColumns, LoaderIds } from '../../app.keys';
 import { ProjectComponent } from '../../shared/components/project/project.component';
 import { COLUMNS_PRODUCT, COLUMNS_PINNED_TOP_DATA } from './productColumns';
 import { ExcelExportService } from '../../shared/service/export-excel.service';
 import * as _ from 'lodash';
 import { ProductService } from 'src/app/shared/service/product.service';
+import { ExcelImportService } from 'src/app/shared/service/import-excel.service';
 import { forkJoin, pipe } from 'rxjs';
 import { Router, NavigationStart, ActivatedRoute, NavigationEnd } from '@angular/router';
 import { filter } from 'rxjs/operators';
+import { NgxUiLoaderService } from 'ngx-ui-loader';
 
 //const dataVal = require('./product.json');
 
@@ -30,15 +32,17 @@ export class ProductComponent implements OnInit, TransformColumns {
   public pinnedTopRowDataVal: any;
   public pinnedBottomRowDataVal: any;
   public defaultColDefVal: any;
+
 
 
   constructor(
     private excelExportService: ExcelExportService, 
+    private excelImportService: ExcelImportService,
     private productService: ProductService,
     private router: Router,
     private route: ActivatedRoute,
+    private loaderService: NgxUiLoaderService
     ) {
-
   }
 
   ngOnInit() {
@@ -106,6 +110,7 @@ export class ProductComponent implements OnInit, TransformColumns {
         this.productService.updateProduct('1', JSON.stringify(jsonEditProduct))
       ).subscribe( ([addProduct, editProduct ]) => {
         alert('Se ha guardado correctamente los productos');
+        this.loaderService.stopLoader(LoaderIds.LOADER_PROJECT);
         this.router.navigateByUrl('/product', { skipLocationChange: true }).then(() => {
           this.router.navigate(['/product']);
       }); 

src/app/shared/components/project/project.component.html

@@ -29,4 +29,6 @@
         [processDataFromClipboard]="processDataFromClipboard" (gridReady)="onGridReady($event)">
     </ag-grid-angular>
 
-</content>
+</content>
+
+<ngx-ui-loader [loaderId]="loaderProject" ></ngx-ui-loader>

src/app/shared/components/project/project.component.ts

@@ -1,14 +1,16 @@
 'use strict';
 import { Component, OnInit, Input, ViewChild, Output, EventEmitter, ElementRef } from '@angular/core';
 import { ExcelExportService } from '../../service/export-excel.service';
-import { AppKeys, ExcelKeys } from 'src/app/app.keys';
+import { AppKeys, ExcelKeys, LoaderIds } from 'src/app/app.keys';
 import { Module } from 'ag-grid-community';
 
 
 import * as _ from 'lodash';
 import { selectionRenderComponent } from '../../render/selection-render.component';
 import { SelectProjectRendererComponent } from './select-project-renderer.component';
 import { ExcelImportService } from '../../service/import-excel.service';
+import { NgxUiLoaderService } from 'ngx-ui-loader';
+import { ProformOptionsStateComponent } from 'src/app/ui/proform-state/proform-options-state/proform-options-state.component';
 
 @Component({
   selector: 'app-project',
@@ -25,6 +27,7 @@ export class ProjectComponent implements OnInit {
   public context; // ag-grid's parent context
   public frameworkComponents; // framework component
   public uploadFile: boolean = true;
+  public loaderProject: string;
 
   @Input()
   public gridColumns;
@@ -51,12 +54,18 @@ export class ProjectComponent implements OnInit {
 
   public file: File;
 
-  constructor(private excelExportService: ExcelExportService, private excelImportService: ExcelImportService) {
+  constructor(
+    private excelExportService: ExcelExportService,
+    private excelImportService: ExcelImportService,
+    private loaderService: NgxUiLoaderService) {
     this.context = { componentParent: this };
     this.frameworkComponents = {
       selectionRender: selectionRenderComponent,
       selectProjectRenderer: SelectProjectRendererComponent,
+      proformOptionsStateRenderer: ProformOptionsStateComponent
+
     };
+    this.loaderProject = LoaderIds.LOADER_PROJECT;
   }
 
   ngOnInit() {
@@ -112,20 +121,25 @@ export class ProjectComponent implements OnInit {
 
   public onGridReady(params) {
     this.gridApi = params.api;
-    this.gridColumnApi = params.columnApi;    
+    this.gridColumnApi = params.columnApi;
   }
 
 
   changeFile(event) {
     this.file = event.target.files[0];
   }
 
-  upload() {        
-    this.excelImportService.excelToJson(this.file).subscribe((jsonData: any[]): void => {            
+  upload() {
+    this.loaderService.startLoader(this.loaderProject);
+    this.excelImportService.excelToJson(this.file).subscribe((jsonData: any[]): void => {
       this.emitJsonData.emit(jsonData);
       this.changeView();
     });
   }
+
+  getProformState(valueState) {
+    alert(valueState);
+  }
 }
 //  https://www.ag-grid.com/javascript-grid-clipboard/
 

src/app/shared/service/auth.service.ts

@@ -12,8 +12,8 @@ export class AuthService {
   // Create an observable of Auth0 instance of client
   auth0Client$ = (from(
     createAuth0Client({
-      domain: "YOUR_DOMAIN",
-      client_id: "YOUR_CLIENT_ID",
+      domain: "dev-eo7zm-kx.us.auth0.com",
+      client_id: "y8Nlf3Dr1He3eWYmoesSxmehs8wtdNVw",
       redirect_uri: `${window.location.origin}`
     })
   ) as Observable<Auth0Client>).pipe(

src/app/shared/service/import-excel.service.ts

@@ -40,4 +40,15 @@ export class ExcelImportService {
     });
   }
 
+  public setDataToPostOrPatch(json){
+    /*const a = json.filter( j => j.id );
+    const b = json.filter( j => !j.id );
+    console.log('a es', a);
+    console.log('b es', b);*/
+    return {
+      POST: json.filter( j => !j.id ),
+      PATCH: json.filter( j => j.id )
+    }
+  }
+
 }

src/app/shared/shared.module.ts

@@ -15,6 +15,8 @@ import { FormlyFieldNgbTimePicker  } from './components/form/ngb-time-picker.typ
 import { BrowserModule } from '@angular/platform-browser';
 import { SelectProjectRendererComponent } from './components/project/select-project-renderer.component';
 import { NgxUiLoaderModule } from 'ngx-ui-loader';
+import { NgbDropdownModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { ProformOptionsStateComponent } from '../ui/proform-state/proform-options-state/proform-options-state.component';
 
 @NgModule({
   imports: [
@@ -23,7 +25,7 @@ import { NgxUiLoaderModule } from 'ngx-ui-loader';
     FormsModule,
     ReactiveFormsModule,
     NgxUiLoaderModule,
-    AgGridModule.withComponents([selectionRenderComponent, SelectProjectRendererComponent]),
+    AgGridModule.withComponents([selectionRenderComponent, SelectProjectRendererComponent, ProformOptionsStateComponent]),
     HotTableModule.forRoot(),
     FormlyModule.forRoot({
       types: [
@@ -34,6 +36,8 @@ import { NgxUiLoaderModule } from 'ngx-ui-loader';
         { name: 'required', message: 'Este campo es requerido' },
       ]
     }),
+    NgbModule,
+    NgbDropdownModule
   ],
   declarations: [
     ProjectComponent,

src/app/ui/proform-state/proform-options-state/options.ts

@@ -0,0 +1,15 @@
+export const options = {
+    EnCurso: {
+        id: '1', label: 'En curso'
+    },
+    PorEditar: {
+        id:'2', label: 'Por editar'
+    },
+    Anulado: {
+        id:'3', label: 'Anulado'
+    },
+    Aprobado: {
+        id:'4', label: 'Aprobado'
+    },
+
+};

src/app/ui/proform-state/proform-options-state/proform-options-state.component.css

@@ -0,0 +1,3 @@
+.custom-container {
+    margin-left: 2vh;    
+}