Merge branch 'developer' of http://git.tbs.com:8888/ByteBot/web/bytebot-workspace into developer

projects/bytebot-html/src/app/app-routing.module.ts

@@ -34,7 +34,6 @@ const routes: Routes = [
   { path: '**', component: NotFoundComponent}
 ];
 
-
 @NgModule({
   imports: [RouterModule.forRoot(routes, {
     scrollPositionRestoration: 'enabled',

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

@@ -16,6 +16,7 @@ import { AgentDetailComponent } from './view/agent-detail/agent-detail.component
 import { EsStepsProcessorsModalComponent } from './view/components/es-steps-processors-modal/es-steps-processors-modal.component';
 import { DynamicTranslatePipe } from './pipe/dynamic-translate.pipe';
 import { CaGeneralInformationComponent } from './view/components/ca-general-information/ca-general-information.component';
+import { CaFrequentQuestionsComponent } from './view/components/ca-frequent-questions/ca-frequent-questions.component';
 import { CaDeploymentChannelsComponent } from './view/components/ca-deployment-channels/ca-deployment-channels.component';
 import { AgentListComponent } from './view/agent-list/agent-list.component';
 import { CaDeploymentChannelsModalComponent } from './view/components/ca-deployment-channels-modal/ca-deployment-channels-modal.component';
@@ -34,6 +35,7 @@ import { AgentStatusPipe } from './pipe/agent-status.pipe';
     EsStepsProcessorsModalComponent,
     DynamicTranslatePipe,
     CaGeneralInformationComponent,
+    CaFrequentQuestionsComponent,
     CaDeploymentChannelsComponent,
     CaDeploymentChannelsModalComponent,
     AgentStatusPipe

projects/bytebot-html/src/app/modules/agent/view/agent/agent.component.html

@@ -17,17 +17,16 @@
                 </ng-template>
                 <byte-ca-general-information [stepper]="stepper"></byte-ca-general-information>
               </mat-step>
-              <!--
-              <mat-step state="connections">
+              
+              <mat-step state="questions">
                 <ng-template matStepLabel>
-                  <span class="font-bold">{{'label.connections.title' | translate}}</span>
-                  <div class="font-size-description" [title]="'label.connections.description' | translate">
-                    {{'label.connections.description' | translate}}
+                  <span class="font-bold">{{'label.questions.title' | translate}}</span>
+                  <div class="font-size-description" [title]="'label.questions.description' | translate">
+                    {{'label.questions.description' | translate}}
                   </div>
                 </ng-template>
-                <byte-es-connections [stepper]="stepper" (onDeleteConnection)="onDeleteConnection($event)"></byte-es-connections>
+                <byte-ca-frequent-questions [stepper]="stepper"></byte-ca-frequent-questions>
               </mat-step>
-            -->
   
               <mat-step state="deployment-channels">
                 <ng-template matStepLabel>
@@ -52,12 +51,10 @@
   
               <ng-template matStepperIcon="info">
                 <mat-icon>info</mat-icon>
-              </ng-template>
-              <!--
-              <ng-template matStepperIcon="connections">
+              </ng-template>              
+              <ng-template matStepperIcon="questions">
                 <mat-icon>dns</mat-icon>
               </ng-template>
-            -->
               <ng-template matStepperIcon="deployment-channels">
                 <mat-icon>chat</mat-icon>
               </ng-template>              

projects/bytebot-html/src/app/modules/agent/view/agent/agent.component.ts

@@ -11,6 +11,7 @@ import { NavigationService } from '@xdf/layouts';
 import { IDirty } from '@xdf/gallery';
 //import { ExternalSystemService } from '../../service/external-system.service';
 import { first } from 'rxjs/operators';
+import { CaFrequentQuestionsComponent } from '../components/ca-frequent-questions/ca-frequent-questions.component';
 import { MatStepper } from '@angular/material';
 
 
@@ -23,11 +24,14 @@ import { MatStepper } from '@angular/material';
   }]
 
 })
-export class AgentComponent implements OnInit {
+export class AgentComponent implements OnInit, IDirty {
 
   @ViewChild(CaGeneralInformationComponent, { static: true })
   generalInformationComponent: CaGeneralInformationComponent;
 
+  @ViewChild(CaFrequentQuestionsComponent, { static: true })
+  frequentQuestionsComponent: CaFrequentQuestionsComponent;
+  
   @ViewChild('stepper', { static: true }) stepper: MatStepper;
 
   externalSystemDetail: any;
@@ -54,6 +58,7 @@ export class AgentComponent implements OnInit {
     let dirty = false;
 
     dirty = this.generalInformationComponent.isDirty()
+      || this.frequentQuestionsComponent.isDirty()
       ;
 
     /* if (dirty) {
@@ -95,12 +100,12 @@ export class AgentComponent implements OnInit {
 
     let dataForWizard = this._activatedRoute.snapshot.data.dataForWizard;
 
-    //this.connectionsComponent.setDataForWizard(dataForWizard);
+    this.frequentQuestionsComponent.setDataForWizard(dataForWizard);
     //this.stepsComponent.setDataForWizard(dataForWizard);
     //this.entitiesComponent.setDataForWizard(dataForWizard);
 
     this.generalInformationComponent.buildForm(this.externalSystemDetail);
-    //this.connectionsComponent.buildForm(this.externalSystemDetail, this.resourceAuth);
+    this.frequentQuestionsComponent.buildForm(this.externalSystemDetail);
     //this.stepsComponent.buildForm(this.externalSystemDetail, this.resourceAuth);
     //this.entitiesComponent.buildForm(this.externalSystemDetail);
     //this.summaryComponent.buildForm(this.externalSystemDetail);

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

+<div class="panel-viewer-wrapper">
+  <div class="panel-viewer-title">
+    <i class="fa fa-info-circle"></i>
+    {{'label.frequent-questions.title' | translate}}
+  </div>
+
+  <div class="panel-viewer-body">
+    <div class="row pt-3 pb-4">
+      <div class="col-2"></div>
+      <div class="col-8 border-all">
+        <div class="row pt-2">
+          <div class="col-12">
+            <button mat-mini-fab color="primary" (click)="fileUpload.click()" class="pull-right">
+              <mat-icon>file_upload</mat-icon>
+            </button>
+            <input type="file" #fileUpload name="fileUpload" (change)="uploadFiles($event.target.files)"
+              accept="{{accept}}" style="display:none;">
+          </div>
+        </div>
+
+        <div class="row pt-2">
+          <div class="col-12" style="padding-bottom:15px;">
+            <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+              <!-- Load ID -->
+              <ng-container matColumnDef="idLoad">
+                <th mat-header-cell *matHeaderCellDef style="width: 15%;"> ID de carga </th>
+                <td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.idLoad}} </td>
+              </ng-container>
+
+              <!-- Filename -->
+              <ng-container matColumnDef="filename">
+                <th mat-header-cell *matHeaderCellDef style="width: 20%;"> Nombre del archivo </th>
+                <td mat-cell *matCellDef="let element" style="width: 20%;"> {{element.filename}} </td>
+              </ng-container>
+
+              <!-- Status -->
+              <ng-container matColumnDef="status">
+                <th mat-header-cell *matHeaderCellDef style="width: 15%;"> Estado </th>
+                <td mat-cell *matCellDef="let element" style="width: 15%;">
+                  <span [ngClass]="getClassStatus(element.status)">{{ getTextStatus(element.status) }}</span>
+                </td>
+              </ng-container>
+
+              <!-- User -->
+              <ng-container matColumnDef="user">
+                <th mat-header-cell *matHeaderCellDef style="width: 15%;"> Usuario </th>
+                <td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.user}} </td>
+              </ng-container>
+
+              <!-- Fecha de carga -->
+              <ng-container matColumnDef="dateLoad">
+                <th mat-header-cell *matHeaderCellDef style="width: 15%;"> Fecha de carga </th>
+                <td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.dateLoad}} </td>
+              </ng-container>
+
+              <!-- Actions -->
+              <ng-container matColumnDef="actions">
+                <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>
+                      <span class="visible-md-inline visible-lg-inline visible-xl-inline">
+                        {{'btn.delete' | translate}}
+                      </span>
+                    </button>
+                  </div>
+                </td>
+              </ng-container>
+              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div class="col-2"></div>
+    </div>
+  </div>
+
+  <div class="footer-bar">
+    <div class="row">
+      <div class="col-12">
+        <button mat-stroked-button matStepperPrevious class="pull-left">
+          <i class="fa fa-chevron-left"></i>
+          <span class="pl-1">{{'btn.previous' | translate}}</span>
+        </button>
+        <button mat-stroked-button (click)="next()" class="pull-right" [disabled]="!dataSource.length">
+          <span class="pr-1">{{'btn.next' | translate}}</span>
+          <i class="fa fa-chevron-right"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+
+</div>
\ No newline at end of file

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

+table {
+    width: 100%;
+}
+
+$fontcolor: #676a6c;
+.content {
+    width: 100%;
+    display: flex;
+    padding-right: 0px !important;
+    .grid-container, .filter-panel {
+        .crud-table {
+            margin-bottom: 0px;
+            width: 100%;
+        }
+    }
+
+    .filter-panel {
+        margin-bottom: 10px;
+    }
+
+    .toolbar-option {
+        margin-left: 10px;
+        margin-right: -10px;
+    }
+}
+
+.grid-ibox-content {
+    // width: calc(100% - 35px);
+    width: 100%;
+}
+
+.grid-ibox-content-options {
+    width: calc(100% - 35px);
+}
+
+.btn-actions {
+    .btn {
+        font-size: 10px;
+        white-space: nowrap;
+    }
+}
+
+
+.spinner-container {
+    height: 100%;
+    width: 100%;
+    padding-top: 50px;
+    position: fixed;
+}
+.spinner-container {
+    height: 100%;
+    width: 100%;
+    padding-top: 50px;
+    position: fixed;
+}
+  
+.spinner-container mat-spinner {
+    margin: -10px auto 0 auto;
+}
+  
+th.mat-column-actions {
+    width: 1px !important;
+    padding-right: 0px !important;
+}
+
+td.mat-column-actions {
+    padding-right: 20px !important;
+    cursor: default !important;
+}
+
+td {
+    vertical-align: middle !important;
+    color: $fontcolor;
+    font-size: 12px;
+}
+th {
+    vertical-align: middle !important;
+}
+tr.mat-header-row {
+    height: 50px !important;
+}
+  
+tr.mat-footer-row, tr.mat-row:not(.inner-detail-row) {
+    height: 40px;
+}
+
+.table-toolbar {
+    right: 10px;
+    top: 10px;
+    button {
+        font-size: 12px; 
+    }
+}
+  
+.status-button-bar {
+    button {
+        font-size: 16px;
+    }
+    padding-top: 8px;
+    padding-left: 15px;
+}
+  
+.mat-raised-button {
+    padding: 0px 10px;
+  }
+  
+.icon-centered-button span.mat-button-wrapper {
+    display: flex;
+}
+
+.icon-centered-button mat-icon {
+    font-size: 15px;
+    padding-top: 2px;
+}
+
+::ng-deep .mat-sort-header-arrow {
+    visibility: hidden;
+}
+
+::ng-deep .mat-sort-header-button {
+    .mat-icon {
+        padding-left: 10px;
+        font-size: 12px;
+        padding-top: 5px;
+    }
+}
+
+@media (min-width: 576px)  {
+    ::ng-deep .d-sm-block {
+        display: table-cell !important;
+    }
+}
+
+@media (max-width: 576px)  {
+    ::ng-deep .mat-paginator-page-size-label {
+        display: none !important;
+    }
+}
+
+
+tr.inner-detail-row {
+    height: 0;
+    .mat-column-expandedDetail {
+        padding: 0 10px;
+    }
+}
+
+.inner-element-detail {
+    overflow: hidden;
+    display: flex;
+}
+
+//@extend
+tr.inner-detail-row {
+    td {
+        border-bottom: 1px solid #dee2e6;
+        border-top: 0px;
+    }
+}
+
+tr.inner-element-row.odd, tr.inner-detail-row.odd {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+// tr.inner-detail-row {
+//     cursor: pointer !important;
+// }
+
+tr.mat-row-auth:not(.inner-expanded-row):hover {
+    background-color:#f8f9fa;
+    cursor: pointer !important;
+}
+
+tr.mat-row-auth.inner-expanded-row:hover {
+    cursor: pointer !important;
+}
+
+tr.inner-element-row-expanded td {
+    border-top: 0px;
+    border-bottom: 0px;
+}
+
+.additional-options-section {
+    padding: 0;
+    width: 100%;
+    display: inline-grid;
+    button {
+        margin: 1px 0;
+        color: inherit;
+    font-size: inherit;
+        border-radius: 0px;
+    }
+    
+}
+
+::ng-deep .mat-menu-item {
+    padding: 0 10px;
+}
+
+@media (min-width: 992px) {
+.d-t-lg-block {
+    display: table-cell !important;
+}
+}
\ No newline at end of file

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

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

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 { ActivatedRoute, Router } from '@angular/router';
+import { animate, trigger, state, transition, style } from '@angular/animations';
+import { DomSanitizer } from '@angular/platform-browser';
+import { AuthorizationService } from '@xdf/security';
+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: '' }
+];
+
+@Component({
+  selector: 'byte-ca-frequent-questions',
+  templateUrl: './ca-frequent-questions.component.html',
+  styleUrls: ['./ca-frequent-questions.component.scss'],
+  animations: [
+    trigger('fadeInOut', [
+      state('in', style({ opacity: 100 })),
+      transition('* => void', [
+        animate(300, style({ opacity: 0 }))
+      ])
+    ])
+  ]
+})
+export class CaFrequentQuestionsComponent implements OnInit {
+
+  @Input() stepper: MatStepper;
+
+  viewMode: boolean;
+
+  questions: any;
+
+  public resourceAuth = new Object();
+
+
+  displayedColumns: string[] = ['idLoad', 'filename', 'status', 'user', 'dateLoad', 'actions'];
+  dataSource = ELEMENT_DATA;
+
+  mapStatus = {
+    "LO": {
+      "text": "label.status.loaded",
+      "class": "label label-primary"
+    },
+    "AC": {
+      "text": "label.status.active",
+      "class": "label label-info"
+    }
+  };
+
+  files = [];
+
+  constructor(protected route: ActivatedRoute,
+    protected router: Router,
+    protected vcRef: ViewContainerRef,
+    protected authorizationService: AuthorizationService,
+    private translate: TranslateService,
+    private uploadService: UploadService,
+    private formBuilder: FormBuilder,
+    private _activatedRoute: ActivatedRoute,
+  ) {
+
+    this.viewMode = this._activatedRoute.snapshot.data.mode === 'view';
+
+   }
+
+  ngOnInit() {
+    const keyAuthorization = 'authorization';
+    const authList = this.route.snapshot.paramMap[keyAuthorization];
+    if (authList) {
+      this.resourceAuth = new Object();
+      authList.forEach(option => {
+        this.resourceAuth[option] = true;
+      });
+    }
+
+  }
+
+  isDirty() {
+    return false;
+  }
+
+  buildForm(questions: any) {
+    this.questions = questions;
+    if (questions) {
+      /*
+      this.formGroup.patchValue({
+        name: agentDetail.name,
+        description: agentDetail.description
+      });
+      */
+    }
+  }
+
+  setDataForWizard(result: any) {
+    console.log(result)
+    /*
+    this.protocols = result.connectionProtocolOptions;
+    this.generalProperties = result.generalProperties;
+    this.alias = result.alias;
+    this.maxNumberOfConnectionsByExternalSystem = result.maxNumberOfConnectionsByExternalSystem;
+    this.columnsForEntity = result.columnsForEntity;
+    */
+  }
+
+  getClassStatus(status) {
+    return this.mapStatus[status].class;
+  }
+
+  getTextStatus(status) {
+    return this.translate.instant(this.mapStatus[status].text);
+  }
+
+  uploadFiles(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]);
+
+        this.files.push({
+          data: event[i], state: 'in',
+          inProgress: false, progress: 0, canRetry: false
+        });
+      }
+    }
+    /*
+    this.files.forEach(file => {
+      this.uploadFile(file);
+    });
+    */
+  }
+
+  uploadFile(file) {
+    const formData = new FormData();
+    formData.append('file', file.data);
+
+    file.inProgress = true;
+    
+    this.uploadService.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);
+      }
+    });
+  }
+
+  saveQuestions(validateForm: boolean) {
+    let success = true;
+    
+    return success;
+  }
+
+  next() {
+    if (!this.dataSource.length) {
+      return;
+    }
+
+    if (this.viewMode) {
+      this.stepper.next();
+      return;
+    }
+
+    if (this.saveQuestions(true)) {
+      this.stepper.next();
+    }
+  }
+
+}

projects/bytebot-html/src/app/modules/agent/view/components/ca-general-information/ca-general-information.component.scss

@@ -99,4 +99,12 @@ li {
   .without-image {
     text-align: inherit;
     height: calc(100% - 36px);
+  }
+
+  .h-85 {
+    height: 85%;
+  }
+
+  .h-100 {
+    height: 85%;
   }
\ No newline at end of file

projects/bytebot-html/src/app/modules/agent/view/components/ca-general-information/ca-general-information.component.ts

@@ -30,7 +30,6 @@ export class CaGeneralInformationComponent implements OnInit {
   agentDetail: any;
   formGroup: FormGroup;
 
-  types: any;
   viewMode: boolean;
 
   allowDragAndDrop = false;
@@ -41,6 +40,44 @@ export class CaGeneralInformationComponent implements OnInit {
   //urlBase = './service/file/download/';
   urlBase = '';
 
+  countries = [
+    {
+      "name": "Perú",
+      "timezones": [
+        "GMT-5"
+      ]
+    },
+    {
+      "name": "Argentina",
+      "timezones": [
+        "GMT-3"
+      ]
+    },
+    {
+      "name": "Brazil",
+      "timezones": [
+        "GMT-5",
+        "GMT-4",
+        "GMT-3",
+        "GMT-2"
+      ]
+    }
+  ];
+
+  timezones = [];
+
+  languages = [
+    {
+      "name" : "Español"
+    }
+  ];
+
+  types = [
+    {
+      "name" : "Agente de preguntas frecuentes"
+    }
+  ];
+
   constructor(
     private formBuilder: FormBuilder,
     private _activatedRoute: ActivatedRoute,
@@ -53,7 +90,11 @@ export class CaGeneralInformationComponent implements OnInit {
       name: new FormControl({ value: "", disabled: this.viewMode }),
       description: new FormControl({ value: "", disabled: this.viewMode }),
       version: new FormControl({ value: "", disabled: this.viewMode }),
-      imageAvatar: new FormControl({ value: "", disabled: this.viewMode })
+      imageAvatar: new FormControl({ value: "", disabled: this.viewMode }),
+      country: new FormControl({ value: "", disabled: this.viewMode }),
+      timezone: new FormControl({ value: "", disabled: this.viewMode }),
+      language: new FormControl({ value: "", disabled: this.viewMode }),
+      type: new FormControl({ value: "", disabled: this.viewMode })
     });
 
   }
@@ -151,6 +192,48 @@ export class CaGeneralInformationComponent implements OnInit {
     }
   }
 
+  onCountryChange(obj) {
+    console.log('Country changed...');
+    let selectedCountry = obj.value;
+    console.log(selectedCountry);
+    this.timezones = [];
+    console.log(this.formGroup.controls['timezone'].value);
+    this.formGroup.controls['timezone'].setValue(null);
+    if (selectedCountry) {
+      this.timezones = selectedCountry.timezones;
+    } 
+  }
+
+  saveConnection(validateForm: boolean): boolean {
+    if (validateForm && !this.formGroup.valid) {
+      return false;
+    }
+
+    /*
+    this.externalSystemDetail.abbreviation = this.formGroup.controls.abbreviation.value;
+    this.externalSystemDetail.name = this.formGroup.controls.name.value;
+    this.externalSystemDetail.description = this.formGroup.controls.description.value;
+    this.externalSystemDetail.status = this.formGroup.controls.status.value ? 'AC' : 'IN';
+    this.externalSystemDetail.inputType = this.formGroup.controls.inputType.value;
+    this.externalSystemDetail.type = this.formGroup.controls.type.value;
+    */
+    return true;
+  }
+
+
+  next() {
+    if (this.viewMode) {
+      this.stepper.next();
+      return;
+    }
+
+    if (this.saveConnection(true)) {
+      this.stepper.next();
+    }
+  }
+
+
+
 }
 
 export class FileUploadModel {

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

+import { TestBed } from '@angular/core/testing';
+
+import { UploadService } from './upload.service';
+
+describe('UploadService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: UploadService = TestBed.get(UploadService);
+    expect(service).toBeTruthy();
+  });
+});

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

+import { HttpClient, HttpEvent, HttpErrorResponse, HttpEventType } from  '@angular/common/http';  
+import { map } from  'rxjs/operators';
+import { Injectable } from '@angular/core';
+
+@Injectable({  
+  providedIn: 'root'  
+})  
+export class UploadService { 
+    SERVER_URL: string = "https://file.io/";  
+    
+    constructor(private httpClient: HttpClient) { }
+    
+    public upload(formData) {
+      return this.httpClient.post<any>(this.SERVER_URL, formData, {  
+         reportProgress: true,  
+         observe: 'events'  
+      });  
+   }
+}

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

@@ -2,7 +2,6 @@
     "home.subtitle": "Bienvenido al proyecto XDF",
     "home.comments": "Este proyecto presenta una aplicación web típica. Puede usarlo como un marco de referencia para el desarrollo de sus aplicaciones web.",
     "btn.previous": "Atrás",
-    "btn.accept": "Aceptar",
     "label.agent": "Agentes",
     "agent_avatar": "Avatar",
     "agent_code": "ID",
@@ -11,6 +10,8 @@
     "agent_status": "Estado",
     "agent_country": "País",
     "agent_timezone": "Zona horaria",
+    "btn.file.upload" : "Cargar",
+    "btn.accept": "Aceptar",
     "label.deployment-channels.title": "Canales de despliegue",
     "label.deployment-channels.description": "Configure los canales de mensajería por los cuáles interactuará el agente",
     "label.channels": "Canales configurados",
@@ -18,5 +19,8 @@
     "label.inactive": "Inactivo",
     "label.name": "Nombre",
     "label.deployment-channels.configuration": "Canales de despliegue",
-    "label.deployment-channels.configuration.description": "Seleccione un canal de despliegue"
+    "label.deployment-channels.configuration.description": "Seleccione un canal de despliegue",
+    "label.status.active" : "Activo",
+    "label.status.loaded" : "Cargado",
+    "label.status.off" : "En Baja"
 }
\ No newline at end of file