seccion 2 avances

package-lock.json

@@ -8988,6 +8988,14 @@
         "tslib": "^1.9.0"
       }
     },
+    "ngx-material-file-input": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-material-file-input/-/ngx-material-file-input-2.0.0.tgz",
+      "integrity": "sha512-E8JyFbAZRzCNC96lbkzg+LS4xmcfoZ3Mh4jhuWfAeBngMLlLxdMW2dgZSu8MFO9V2ZQytb1DPjgmvGhJo5TJHg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "ngx-moment": {
       "version": "3.5.0",
       "resolved": "http://192.168.27.7:4873/ngx-moment/-/ngx-moment-3.5.0.tgz",

package.json

@@ -63,6 +63,7 @@
     "ngx-bootstrap": "^4.3.0",
     "ngx-color": "^4.1.1",
     "ngx-echarts": "^4.2.2",
+    "ngx-material-file-input": "^2.0.0",
     "ngx-moment": "^3.5.0",
     "ngx-scrollbar": "^7.1.0",
     "ngx-slick-carousel": "^0.5.1",

projects/bytebot-html/src/app/interceptors/agent-fake-backend.interceptor.ts

@@ -59,7 +59,6 @@ const data: Array<any> = [
     }
 ];
 
-
 const countries: Array<any> = [
     {
         "id": 1,
@@ -87,6 +86,54 @@ const countries: Array<any> = [
     }
 ];
 
+const fakeAgentData = {
+    id: 361,
+    name: 'BANCO DE CREDITO DEL PERU',
+    description: 'El mejor banco que te roba la plata con intereses',
+    version: '0.0.1',
+    status: 'Activo',
+    countryId: 1,
+    timezone: 'GMT-5',
+    avatar: '',
+    frequentQuestions : [
+        {
+            id: 1,
+            filename: 'questions-opt.xlsx',
+            status: 'PS',
+            user: '',
+            uploadDate: ''
+        },
+        {
+            id: 2,
+            filename: 'questions-training.xlsx',
+            status: 'PS',
+            user: '',
+            uploadDate: ''
+        },
+        {
+            id: 3,
+            filename: 'questions-brainstorming.xlsx',
+            status: 'PS',
+            user: '',
+            uploadDate: ''
+        },
+        {
+            id: 4,
+            filename: 'questions-onu.xlsx',
+            status: 'PS',
+            user: '',
+            uploadDate: ''
+        },
+        {
+            id: 5,
+            filename: 'questions-byte.xlsx',
+            status: 'PS',
+            user: '',
+            uploadDate: ''
+        }
+    ]
+};
+
 @Injectable()
 export class AgentFakeBackendInterceptor implements HttpInterceptor {
     intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
@@ -101,14 +148,14 @@ export class AgentFakeBackendInterceptor implements HttpInterceptor {
         function handleRoute() {
 
             switch (true) {
-                //case url.endsWith(basePath + '/page') && method === 'POST':
-                //    return pagination(body);
+                case url.endsWith(basePath + '/page') && method === 'POST':
+                    return pagination(body);
                 case url.indexOf(basePath + '/connection/data') !== -1 && method === 'GET ':
                     return ok({});
-                // case url.indexOf(basePath + '/country') !== -1 && method === 'GET':
-                //     return ok(countries);
-                // case url.indexOf(basePath + '/') !== -1 && method === 'GET':
-                //    return ok(data);
+                case url.indexOf(basePath + '/countries') !== -1 && method === 'GET':
+                    return ok(countries);
+                case url.indexOf(basePath + '/') !== -1 && method === 'GET':
+                    return ok(fakeAgentData);
                 default:
                     // pass through any requests not handled above
                     return next.handle(request);

projects/bytebot-html/src/app/modules/agent/agent.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 
 import { TranslateModule } from '@ngx-translate/core';
 import {NgxTributeModule} from 'ngx-tribute';
+import { MaterialFileInputModule } from 'ngx-material-file-input';
 
 import { XdfGalleryModule } from '@xdf/gallery';
 import { MatProgressSpinnerModule, MatDividerModule, MatSidenavModule, MatListModule, MatStepperModule, MatDialogModule, MatMenuModule, MatIconModule, MatSlideToggleModule, MatCheckboxModule, MatRippleModule, MatNativeDateModule, MatChipsModule, MatExpansionModule, MatTooltipModule, MatToolbarModule, MatTabsModule, MatTableModule, MatSortModule, MatSelectModule, MatRadioModule, MatPaginatorModule, MatInputModule, MatFormFieldModule, MatButtonToggleModule, MatButtonModule, MatCardModule, MatAutocompleteModule, MatSnackBarModule, MatProgressBarModule } from '@angular/material';
@@ -21,12 +22,15 @@ import { CaDeploymentChannelsComponent } from './view/components/ca-deployment-c
 import { AgentListComponent } from './view/agent-list/agent-list.component';
 import { CaDeploymentChannelsModalComponent } from './view/components/ca-deployment-channels-modal/ca-deployment-channels-modal.component';
 import { AgentStatusPipe } from './pipe/agent-status.pipe';
+import { CaFileUploadModalComponent } from './view/components/ca-file-upload-modal/ca-file-upload-modal.component';
+
 
 
 @NgModule({
   entryComponents: [
     EsStepsProcessorsModalComponent,
-    CaDeploymentChannelsModalComponent
+    CaDeploymentChannelsModalComponent,
+    CaFileUploadModalComponent
   ],
   declarations: [    
     AgentComponent,    
@@ -38,7 +42,8 @@ import { AgentStatusPipe } from './pipe/agent-status.pipe';
     CaFrequentQuestionsComponent,
     CaDeploymentChannelsComponent,
     CaDeploymentChannelsModalComponent,
-    AgentStatusPipe
+    AgentStatusPipe,
+    CaFileUploadModalComponent
   ],
   imports: [
     FormsModule,
@@ -80,7 +85,8 @@ import { AgentStatusPipe } from './pipe/agent-status.pipe';
     CommonModule,
     AceEditorModule,
     NgxTributeModule,
-    MatProgressBarModule
+    MatProgressBarModule,
+    MaterialFileInputModule
   ],
   exports: [
 

projects/bytebot-html/src/app/modules/agent/service/agent.service.ts

@@ -29,4 +29,11 @@ export class AgentService extends DynaDataService {
     return this.httpClient.get(this.serviceURL + '/countries');
   }
 
+  upload(formData) {
+    return this.httpClient.post<any>(this.serviceURL + '/file-upload', formData, {  
+       reportProgress: true,  
+       observe: 'events'  
+    });  
+ }
+
 }

projects/bytebot-html/src/app/modules/agent/view/components/ca-file-upload-modal/ca-file-upload-modal.component.html

+<div class="title_section divider">
+    <div class="hidden-xs" *ngIf="applicationSettings?.logoBase64">
+        <img class="logo_header_popup"
+            src="data:image/{{applicationSettings.tipo}};base64,{{applicationSettings.logoBase64}}" />
+    </div>
+    <div class="title_header_popup">
+        <h2 mat-dialog-title>
+            <span> {{'label.file-upload.title' | translate}} </span>
+        </h2>
+    </div>
+</div>
+
+<mat-dialog-content>
+    <h4>
+        {{'label.file-upload.description' | translate}}
+    </h4>
+
+    <form [formGroup]="formGroup" autocomplete="off">
+        <div class="row pt-2">
+            <div class="col-12">
+                <mat-form-field class="amd-form-control">
+                    <input matInput [placeholder]="'label.description' | translate" formControlName="description"
+                        maxlength="50" required>
+                </mat-form-field>
+            </div>
+        </div>
+        <div class="row pt-2">
+            <div class="col-12">
+                <mat-form-field class="amd-form-control">
+                    <ngx-mat-file-input formControlName="file" [placeholder]="'label.file' | translate"
+                        [accept]="'.xls,.xlsx'" required (change)="uploadFile($event.target.files)">
+                    </ngx-mat-file-input>
+                    <mat-icon matSuffix>folder</mat-icon>
+                </mat-form-field>
+            </div>
+        </div>
+    </form>
+
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close>{{'btn.cancel' | translate}}</button>
+    <button mat-button (click)="ok()" cdkFocusInitial
+        [disabled]="!selectedChannel">{{'btn.accept' | translate}}</button>
+</mat-dialog-actions>
\ No newline at end of file

projects/bytebot-html/src/app/modules/agent/view/components/ca-file-upload-modal/ca-file-upload-modal.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CaFileUploadModalComponent } from './ca-file-upload-modal.component';
+
+describe('CaFileUploadModalComponent', () => {
+  let component: CaFileUploadModalComponent;
+  let fixture: ComponentFixture<CaFileUploadModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CaFileUploadModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CaFileUploadModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/bytebot-html/src/app/modules/agent/view/components/ca-file-upload-modal/ca-file-upload-modal.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { HttpEventType, HttpErrorResponse } from '@angular/common/http';
+import { of } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+import { AgentService } from '../../../service/agent.service';
+
+@Component({
+  selector: 'byte-ca-file-upload-modal',
+  templateUrl: './ca-file-upload-modal.component.html',
+  styleUrls: ['./ca-file-upload-modal.component.scss']
+})
+export class CaFileUploadModalComponent implements OnInit {
+
+  formGroup: FormGroup;
+
+  accept = '.xls,.xlsx';
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private agentService: AgentService
+  ) {
+    this.formGroup = this.formBuilder.group({
+      description: new FormControl({ value: "", disabled: false}),
+      file: new FormControl({value: '', disabled: false})
+    });
+  }
+
+  ngOnInit() {
+  }
+
+  uploadFile(event) {
+    for (const i in event) {
+      if (event[i] instanceof File) {
+        const reader = new FileReader();
+        reader.onload = () => {
+          //this.formGroup.controls['imageAvatar'].setValue(reader.result as string);
+        };
+        reader.readAsDataURL(event[i]);
+
+        let fileSelected = {
+          data: event[i],
+          state: 'in',
+          inProgress: false,
+          progress: 0,
+          canRetry: false
+        }
+
+        this.validateFile(fileSelected);
+      }
+    }
+  }
+
+  validateFile(file) {
+    const formData = new FormData();
+    formData.append('file', file.data);
+
+    file.inProgress = true;
+
+    this.agentService.upload(formData).pipe(
+      map(event => {
+        switch (event.type) {
+          case HttpEventType.UploadProgress:
+            file.progress = Math.round(event.loaded * 100 / event.total);
+            break;
+          case HttpEventType.Response:
+            return event;
+        }
+      }),
+      catchError((error: HttpErrorResponse) => {
+        file.inProgress = false;
+        return of(`${file.data.name} upload failed.`);
+      })
+    ).subscribe((event: any) => {
+      if (typeof (event) === 'object') {
+        console.log(event.body);
+      }
+    });
+  }
+
+}

projects/bytebot-html/src/app/modules/agent/view/components/ca-frequent-questions/ca-frequent-questions.component.html

@@ -10,6 +10,9 @@
       <div class="col-8 border-all">
         <div class="row pt-2">
           <div class="col-12">
+            <button mat-mini-fab color="warn" (click)="addFile()" class="pull-right">
+              <mat-icon>file_upload</mat-icon>
+            </button>
             <button mat-mini-fab color="primary" (click)="fileUpload.click()" class="pull-right">
               <mat-icon>file_upload</mat-icon>
             </button>
@@ -22,9 +25,9 @@
           <div class="col-12" style="padding-bottom:15px;">
             <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
               <!-- Load ID -->
-              <ng-container matColumnDef="idLoad">
+              <ng-container matColumnDef="id">
                 <th mat-header-cell *matHeaderCellDef style="width: 15%;"> ID de carga </th>
-                <td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.idLoad}} </td>
+                <td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.id}} </td>
               </ng-container>
 
               <!-- Filename -->
@@ -48,9 +51,9 @@
               </ng-container>
 
               <!-- Fecha de carga -->
-              <ng-container matColumnDef="dateLoad">
+              <ng-container matColumnDef="uploadDate">
                 <th mat-header-cell *matHeaderCellDef style="width: 15%;"> Fecha de carga </th>
-                <td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.dateLoad}} </td>
+                <td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.uploadDate}} </td>
               </ng-container>
 
               <!-- Actions -->
@@ -58,14 +61,6 @@
                 <th mat-header-cell *matHeaderCellDef style="width: 20%;"></th>
                 <td mat-cell *matCellDef="let element" style="width: 20%;" class="text-center">
                   <div class="btn-group">
-                    <button type="button" class="btn btn-default btn-sm" (click)="onRowEdited(element)"
-                      [disabled]="!resourceAuth['edit']">
-                      <i class="fa fa-upload"></i>
-                      <span class="visible-md-inline visible-lg-inline visible-xl-inline">
-                        {{'btn.file.upload' | translate}}
-                      </span>
-                    </button>
-
                     <button type="button" class="btn btn-default btn-sm" (click)="onDeleteRecord(element)"
                       [disabled]="!resourceAuth['delete']">
                       <i class="fa fa-trash"></i>

projects/bytebot-html/src/app/modules/agent/view/components/ca-frequent-questions/ca-frequent-questions.component.ts

 import { Component, OnInit, Input, ViewContainerRef, ElementRef, ViewChild } from '@angular/core';
 import { Subscription, of } from 'rxjs';
 import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
-import { MatStepper } from '@angular/material';
+import { MatStepper, MatDialog } from '@angular/material';
 import { ActivatedRoute, Router } from '@angular/router';
 import { animate, trigger, state, transition, style } from '@angular/animations';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -10,23 +10,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { catchError, map } from 'rxjs/operators';
 import { HttpEventType, HttpErrorResponse } from '@angular/common/http';
 import { UploadService } from '../upload.service';
-
-export interface QuestionFile {
-  idLoad: number;
-  filename: string;
-  status: string;
-  user: string;
-  dateLoad: string;
-}
-
-const ELEMENT_DATA: QuestionFile[] = [
-  { idLoad: 1, filename: 'Questions-1.xlsx', status: 'LO', user: 'lortiz', dateLoad: '09-09-2020' },
-  { idLoad: 2, filename: 'Questions-2.xlsx', status: 'LO', user: 'lortiz', dateLoad: '09-09-2020' },
-  { idLoad: 3, filename: 'Questions-3.xlsx', status: 'LO', user: 'lortiz', dateLoad: '08-09-2020' },
-  { idLoad: 4, filename: 'Questions-4.xlsx', status: 'AC', user: '', dateLoad: '' },
-  { idLoad: 5, filename: 'Questions-5.xlsx', status: 'AC', user: '', dateLoad: '' },
-  { idLoad: 6, filename: 'Questions-6.xlsx', status: 'AC', user: '', dateLoad: '' }
-];
+import { CaFileUploadModalComponent } from '../ca-file-upload-modal/ca-file-upload-modal.component';
 
 @Component({
   selector: 'byte-ca-frequent-questions',
@@ -51,18 +35,19 @@ export class CaFrequentQuestionsComponent implements OnInit {
 
   public resourceAuth = new Object();
 
+  accept = '.xls,.xlsx';
 
-  displayedColumns: string[] = ['idLoad', 'filename', 'status', 'user', 'dateLoad', 'actions'];
-  dataSource = ELEMENT_DATA;
+  displayedColumns: string[] = ['id', 'filename', 'status', 'user', 'uploadDate', 'actions'];
+  dataSource = [];
 
   mapStatus = {
     "LO": {
       "text": "label.status.loaded",
       "class": "label label-primary"
     },
-    "AC": {
-      "text": "label.status.active",
-      "class": "label label-info"
+    "PS": {
+      "text": "label.status.pending",
+      "class": "label label-warning"
     }
   };
 
@@ -76,6 +61,7 @@ export class CaFrequentQuestionsComponent implements OnInit {
     private uploadService: UploadService,
     private formBuilder: FormBuilder,
     private _activatedRoute: ActivatedRoute,
+    private matDialog: MatDialog
   ) {
 
     this.viewMode = this._activatedRoute.snapshot.data.mode === 'view';
@@ -98,16 +84,8 @@ export class CaFrequentQuestionsComponent implements OnInit {
     return false;
   }
 
-  buildForm(questions: any) {
-    this.questions = questions;
-    if (questions) {
-      /*
-      this.formGroup.patchValue({
-        name: agentDetail.name,
-        description: agentDetail.description
-      });
-      */
-    }
+  buildForm(agentDetail: any) {
+    this.dataSource = agentDetail.frequentQuestions;
   }
 
   setDataForWizard(result: any) {
@@ -139,16 +117,14 @@ export class CaFrequentQuestionsComponent implements OnInit {
         reader.readAsDataURL(event[i]);
 
         this.files.push({
-          data: event[i], state: 'in',
-          inProgress: false, progress: 0, canRetry: false
+          data: event[i],
+          state: 'in',
+          inProgress: false,
+          progress: 0,
+          canRetry: false
         });
       }
     }
-    /*
-    this.files.forEach(file => {
-      this.uploadFile(file);
-    });
-    */
   }
 
   uploadFile(file) {
@@ -178,6 +154,19 @@ export class CaFrequentQuestionsComponent implements OnInit {
     });
   }
 
+  addFile() {
+    let dialog = this.matDialog.open(CaFileUploadModalComponent, {
+      width: '500px'
+    });
+
+    dialog.afterClosed().subscribe(result => {
+      if (result) {
+        //this.agentChannels.push({ ...result });
+        //this.setStep(this.agentChannels.length - 1);
+      }
+    });
+  }
+
   saveQuestions(validateForm: boolean) {
     let success = true;
 

projects/bytebot-html/src/app/modules/agent/view/components/upload.service.ts

@@ -6,7 +6,7 @@ import { Injectable } from '@angular/core';
   providedIn: 'root'  
 })  
 export class UploadService { 
-    SERVER_URL: string = "https://file.io/";  
+    SERVER_URL: string = "./service/agent";  
     
     constructor(private httpClient: HttpClient) { }
     

projects/bytebot-html/src/assets/i18n/es.json

@@ -20,7 +20,7 @@
     "label.name": "Nombre",
     "label.deployment-channels.configuration": "Canales de despliegue",
     "label.deployment-channels.configuration.description": "Seleccione un canal de despliegue",
-    "label.status.active" : "Activo",
+    "label.status.pending" : "Pendiente",
     "label.status.loaded" : "Cargado",
     "label.status.off" : "En Baja",
     "label.created": "Creado",