Fusion de Desarrollos

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

@@ -22,14 +22,9 @@ const routes: Routes = [
         loadChildren: () => import('./modules/settings/settings.module').then(m => m.SettingsModule)
       },
       {
-        path: 'config', data: { breadcrumb: 'Agentes' }, canLoad: [AuthGuard],
+        path: 'configuration', data: { breadcrumb: 'Agentes' }, canLoad: [AuthGuard],
         loadChildren: () => import('./modules/agent/agent.module').then(m => m.AgentModule)
       },
-      {
-        path: 'configuration', canLoad: [AuthGuard],
-        loadChildren: () => import('./modules/configuration/configuration.module').then(m => m.ConfigurationModule)
-      }
-
     ],
     canActivate: [AuthGuard]
   },

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

@@ -36,6 +36,7 @@ import {
   MAT_MOMENT_DATE_ADAPTER_OPTIONS,
 } from '@angular/material-moment-adapter';
 import { CustomProgramsFakeBackendInterceptor } from './interceptors/custom-programs-fake-backend.interceptor';
+import { AgentFakeBackendInterceptor } from './interceptors/agent-fake-backend.interceptor';
 
 const INITIAL_LANGUAGE = 'es';
 
@@ -110,19 +111,19 @@ export function createTranslateLoader(http: HttpClient) {
     { provide: ResourceAuthGuard, useClass: ResourceAuthGuard},
 
     // descomentar estas lineas para OAUTH
-    { provide: AuthGuard, useClass: OAuthGuard},
-    { provide: AuthenticationService, useClass: OAuthAuthenticationService },
-    { provide: APP_INITIALIZER, useFactory: loginLoaderFactory, deps: [AuthenticationService], multi: true },
+    //{ provide: AuthGuard, useClass: OAuthGuard},
+    //{ provide: AuthenticationService, useClass: OAuthAuthenticationService },
+    //{ provide: APP_INITIALIZER, useFactory: loginLoaderFactory, deps: [AuthenticationService], multi: true },
 
     // Para probar mantenimientos
 
     // comentar estas lineas para OAUTH
-    // { provide: AuthGuard, useClass: AuthGuard},
-    // { provide: AuthenticationService, useClass: ByteAuthenticationService },
-    // { provide: HTTP_INTERCEPTORS, useClass: AuthenticationFakeBackendInterceptor, multi: true},
-    // { provide: HTTP_INTERCEPTORS, useClass: SettingsFakeBackendInterceptor, multi: true},    
+     { provide: AuthGuard, useClass: AuthGuard},
+     { provide: AuthenticationService, useClass: ByteAuthenticationService },
+     { provide: HTTP_INTERCEPTORS, useClass: AuthenticationFakeBackendInterceptor, multi: true},
+     { provide: HTTP_INTERCEPTORS, useClass: SettingsFakeBackendInterceptor, multi: true},    
     { provide: HTTP_INTERCEPTORS, useClass: CustomProgramsFakeBackendInterceptor, multi: true},
-    //{ provide: HTTP_INTERCEPTORS, useClass: EntidadFakeFakeBackendInterceptor, multi: true},
+    { provide: HTTP_INTERCEPTORS, useClass: AgentFakeBackendInterceptor, multi: true},
     
     
 

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

@@ -47,6 +47,17 @@ const tableData: Array<any> = [
     }
 ];
 
+const data: Array<any> = [
+    {
+        id: 361,
+        name: 'BANCO DE CREDITO DEL PERU',
+        version: '0.0.1',
+        status: 'Activo',
+        country: 'Perú',
+        timezone: 'GMT-5',
+        avatar: 'https://www.w3schools.com/howto/img_avatar.png'
+    }
+];
 
 @Injectable()
 export class AgentFakeBackendInterceptor implements HttpInterceptor {
@@ -64,6 +75,10 @@ export class AgentFakeBackendInterceptor implements HttpInterceptor {
             switch (true) {
                 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 + '/') !== -1 && method === 'GET':
+                    return ok(data);
                 default:
                     // pass through any requests not handled above
                     return next.handle(request);

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

@@ -6,22 +6,21 @@ import { AgentComponent } from './view/agent/agent.component';
 import { AgentDetailComponent } from './view/agent-detail/agent-detail.component';
 import { AgentDataForWizardResolver } from './resolver/agent-data-wizard.resolver';
 import { AgentDetailResolver } from './resolver/agent-detail.resolver';
+import { AgentListComponent } from './view/agent-list/agent-list.component';
 
 
 const routes: Routes = [
   {
-    path: 'agent',
-    component: AgentComponent,
-    canActivate: [AuthGuard, ResourceAuthGuard],
-    data:
-    {
+    path: 'agent', component: AgentListComponent, canActivate: [AuthGuard, ResourceAuthGuard], 
+    data: {
       program: 'CONVERSATIONAL_AGENT',
-      breadcrumb: 'Agentes'
+      breadcrumb: 'breadcrumb.agent'
     }
   },
   {
     path: 'agent/detail/new',
-    component: AgentDetailComponent,
+    //component: AgentDetailComponent,
+    component: AgentComponent,
     resolve: {
       dataForWizard: AgentDataForWizardResolver
     },
@@ -36,7 +35,8 @@ const routes: Routes = [
   },
   {
     path: 'agent/detail/edit/:code',
-    component: AgentDetailComponent,
+    //component: AgentDetailComponent,
+    component: AgentComponent,
     resolve: {
       externalSystemDetail: AgentDetailResolver,
       dataForWizard: AgentDataForWizardResolver
@@ -51,7 +51,8 @@ const routes: Routes = [
     }
   },{
     path: 'agent/detail/view/:code',
-    component: AgentDetailComponent,
+    //component: AgentDetailComponent,
+    component: AgentComponent,
     resolve: {
       externalSystemDetail: AgentDetailResolver,
       dataForWizard: AgentDataForWizardResolver

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

@@ -17,19 +17,27 @@ import { EsStepsProcessorsModalComponent } from './view/components/es-steps-proc
 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';
 
 
 @NgModule({
   entryComponents: [
-    EsStepsProcessorsModalComponent
+    EsStepsProcessorsModalComponent,
+    CaDeploymentChannelsModalComponent
   ],
   declarations: [    
     AgentComponent,    
+    AgentListComponent,    
     AgentDetailComponent, 
     EsStepsProcessorsModalComponent,
     DynamicTranslatePipe,
     CaGeneralInformationComponent,
-    CaFrequentQuestionsComponent],
+    CaFrequentQuestionsComponent,
+    CaDeploymentChannelsComponent,
+    CaDeploymentChannelsModalComponent
+  ],
   imports: [
     FormsModule,
     ReactiveFormsModule,

projects/bytebot-html/src/app/modules/agent/pipe/dynamic-translate.pipe.ts

@@ -12,9 +12,15 @@ export class DynamicTranslatePipe implements PipeTransform {
 
   transform(value: any, ...args: any[]): any {
     let lang = this.translateService.currentLang ? this.translateService.currentLang : this.translateService.defaultLang;
-    let traductions = JSON.parse(args[0].param);
 
-    if (traductions[lang]) {
+    let traductions;
+    if (typeof args[0].param === 'string') {
+      traductions = JSON.parse(args[0].param);
+    } else {
+      traductions = args[0].param;
+    }
+
+    if (traductions && traductions[lang]) {
       return traductions[lang];
     } else {
       return value;

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

@@ -12,19 +12,6 @@ export class AgentService extends DynaDataService {
   constructor(private httpClient: HttpClient) {
     super(httpClient);
   }
-
-  isExternalSystemWithDeliverableConnection() {
-    return this.httpClient.get(this.serviceURL + '/isExternalSystemWithDeliverableConnection');
-  }
-
-  existEntityTableWithTableName(tablename: string) {
-    return this.httpClient.get(this.serviceURL + '/existEntityTableWithTableName', {
-      params: {
-        tablename: tablename
-      }
-    });
-  }
-
   getDataForWizard(agentId: number) {
     let params = {};
 
@@ -38,8 +25,4 @@ export class AgentService extends DynaDataService {
     });
   }
 
-  validateQuartz(value: string) {
-    return this.httpClient.get(this.serviceURL + '/connection/validate/quartz?param=' + value);
-  } 
-
 }

projects/bytebot-html/src/app/modules/configuration/view/agent/agent.component.spec.ts → projects/bytebot-html/src/app/modules/agent/view/agent-list/agent-list.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AgentComponent } from './agent.component';
+import { AgentListComponent } from './agent-list.component';
 
 describe('AgentComponent', () => {
-  let component: AgentComponent;
-  let fixture: ComponentFixture<AgentComponent>;
+  let component: AgentListComponent;
+  let fixture: ComponentFixture<AgentListComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AgentComponent ]
+      declarations: [ AgentListComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AgentComponent);
+    fixture = TestBed.createComponent(AgentListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -6,7 +6,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { tap } from 'rxjs/operators';
 import { TagFilter } from '@xdf/gallery/lib/views/gallery/ngx-tags-input/model/tag-filter';
 import { TranslateService } from '@ngx-translate/core';
-import { AgentService } from '../../services/agent.service';
+import { AgentService } from '../../service/agent.service';
 
 
 
@@ -140,11 +140,11 @@ const fieldFilters = [
 ];
 
 @Component({
-  selector: 'byte-agent',
-  templateUrl: './agent.component.html',
-  styleUrls: ['./agent.component.scss']
+  selector: 'byte-agent-list',
+  templateUrl: './agent-list.component.html',
+  styleUrls: ['./agent-list.component.scss']
 })
-export class AgentComponent implements OnInit {
+export class AgentListComponent implements OnInit {
 
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: false }) sort: MatSort;
@@ -304,14 +304,14 @@ export class AgentComponent implements OnInit {
   }
 
   edit(item) {
-    this.router.navigate(['/etl/external-system/detail/edit/' + item.id]);
+    this.router.navigate(['/configuration/agent/detail/edit/' + item.id]);
   }
 
   view(item) {
-    this.router.navigate(['/etl/external-system/detail/view/' + item.id]);
+    this.router.navigate(['/configuration/agent/detail/view/' + item.id]);
   }
 
   create() {
-    this.router.navigate(['/etl/external-system/detail/new']);
+    this.router.navigate(['/configuration/agent/detail/new']);
   }
 }

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

@@ -27,17 +27,17 @@
                 </ng-template>
                 <byte-ca-frequent-questions [stepper]="stepper"></byte-ca-frequent-questions>
               </mat-step>
-              <!--
-              <mat-step state="steps">
+  
+              <mat-step state="deployment-channels">
                 <ng-template matStepLabel>
-                  <span class="font-bold">{{'label.steps.title' | translate}}</span>
-                  <div class="font-size-description" [title]="'label.steps.description' | translate">
-                    {{'label.steps.description' | translate}}
+                  <span class="font-bold">{{'label.deployment-channels.title' | translate}}</span>
+                  <div class="font-size-description" [title]="'label.deployment-channels.description' | translate">
+                    {{'label.deployment-channels.description' | translate}}
                   </div>
                 </ng-template>
-                <byte-es-steps [stepper]="stepper"></byte-es-steps>
+                <byte-ca-deployment-channels [stepper]="stepper"></byte-ca-deployment-channels>
               </mat-step>
-
+<!--
               <mat-step state="summary">
                 <ng-template matStepLabel>
                   <span class="font-bold">{{'label.summary.title' | translate}}</span>
@@ -55,10 +55,10 @@
               <ng-template matStepperIcon="questions">
                 <mat-icon>dns</mat-icon>
               </ng-template>
-              <!--
-              <ng-template matStepperIcon="steps">
-                <mat-icon>device_hub</mat-icon>
+              <ng-template matStepperIcon="deployment-channels">
+                <mat-icon>chat</mat-icon>
               </ng-template>              
+              <!--
               <ng-template matStepperIcon="summary">
                 <mat-icon>done_all</mat-icon>
               </ng-template>

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

@@ -12,6 +12,7 @@ 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';
 
 
 @Component({
@@ -30,6 +31,8 @@ export class AgentComponent implements OnInit, IDirty {
 
   @ViewChild(CaFrequentQuestionsComponent, { static: true })
   frequentQuestionsComponent: CaFrequentQuestionsComponent;
+  
+  @ViewChild('stepper', { static: true }) stepper: MatStepper;
 
   externalSystemDetail: any;
 
@@ -71,6 +74,8 @@ export class AgentComponent implements OnInit, IDirty {
 
   ngOnInit() {
 
+    this.stepper.selectedIndex = 0;
+
     const authList = this._activatedRoute.snapshot.paramMap['authorization'];
 
     this.resourceAuth = new Object();

projects/bytebot-html/src/app/modules/agent/view/components/ca-deployment-channels-modal/ca-deployment-channels-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.deployment-channels.configuration' | translate}} </span>
+        </h2>
+    </div>
+</div>
+
+<mat-dialog-content>
+    <h4>
+        {{'label.deployment-channels.configuration.description' | translate}} 
+        <!--  -->
+    </h4>
+
+    <div>
+        <mat-card class="channel-card" *ngFor="let channel of channels" (click)="selectChannel(channel)"
+            [ngClass]="{ 'active': selectedChannel === channel}">
+            <mat-card-header>
+                <img [src]="channel.channelImage" mat-card-avatar>
+                <mat-card-title>{{channel.channelName}}</mat-card-title>
+            </mat-card-header>
+        </mat-card>
+    </div>
+
+</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-deployment-channels-modal/ca-deployment-channels-modal.component.scss

+.icon {
+    vertical-align: middle;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+::ng-deep .mat-card-header .mat-card-title {
+    margin-bottom: 12px;
+    margin-top: 10px;
+}
+
+.channel-card {
+    cursor: pointer;
+    margin-bottom: 8px;
+    transition: border-left 0.125s ease-in;
+    border-left: solid 0px #3f51b5;
+
+    &.active {
+        border-left: solid 5px #3F51B5 !important;
+    }
+}
+

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

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

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

+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+
+@Component({
+  selector: 'byte-ca-deployment-channels-modal',
+  templateUrl: './ca-deployment-channels-modal.component.html',
+  styleUrls: ['./ca-deployment-channels-modal.component.scss']
+})
+export class CaDeploymentChannelsModalComponent implements OnInit {
+
+  channels: Array<any>;
+  selectedChannel: any;
+
+  constructor(
+    public dialogRef: MatDialogRef<CaDeploymentChannelsModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+
+    this.channels = data.channels;
+
+  }
+
+  ngOnInit() {
+  }
+
+  ok() {
+    this.dialogRef.close(this.selectedChannel);
+  }
+
+  selectChannel(channel: any) {
+    this.selectedChannel = channel;
+  }
+
+}

projects/bytebot-html/src/app/modules/agent/view/components/ca-deployment-channels/ca-deployment-channels.component.html

+<div class="panel-viewer-wrapper">
+
+    <div class="panel-viewer-title">
+        <mat-icon>chat</mat-icon>
+        {{'label.deployment-channels.title' | translate}}
+    </div>
+
+    <div class="panel-viewer-body">
+
+        <!-- <div class="row pb-2 text-center">
+
+            <div class="col-12">
+                <h1>{{'label.deployment-channels' | translate}}</h1>
+            </div>
+        </div> -->
+        <div class="row pb-2  justify-content-center">
+            <div class="col-md-6 col-sm-12">
+
+                <!-- <div class="alert alert-warning" *ngIf="!viewMode">
+                    <i class="fa fa-warning"></i>&nbsp;&nbsp;<span
+                        [innerHTML]="'label.summary.warning' | translate"></span>
+                </div> -->
+
+                <h4 class="mt-3">
+                    <button class="pull-right" mat-icon-button (click)="addChannel()">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                    <b>{{'label.channels' | translate}}</b>
+                </h4>
+
+                <mat-accordion>
+                    <mat-expansion-panel *ngFor="let channel of agentChannels; let i = index" [expanded]="step === i"
+                        (opened)="setStep(i)">
+                        <mat-expansion-panel-header class="right-aligned-header" [collapsedHeight]="'60px'">
+                            <mat-panel-title>
+                                <img [src]="channel.channelImage" class="icon">
+                                <div>
+                                    <span style="margin-right: 8px;">{{ channel.channelName }}</span>
+                                    <small class="text-muted">{{ channel.name }}</small>
+                                </div>
+                            </mat-panel-title>
+                            <mat-panel-description>
+                                <label class="label label-success"
+                                    *ngIf="channel.active">{{'label.active' | translate}}</label>
+                                <label class="label label-default"
+                                    *ngIf="!channel.active">{{'label.inactive' | translate}}</label>
+                            </mat-panel-description>
+                        </mat-expansion-panel-header>
+
+                        <div>
+                            <form role="form" novalidate (ngSubmit)="ok()" #myForm="ngForm" autocomplete="off">
+                                <div class="row">
+                                    <div class="col-6">
+                                        <mat-form-field class="amd-form-control">
+                                            <mat-label>{{'label.name' | translate}}</mat-label>
+                                            <input matInput [attr.maxlength]="80" [type]="text" required="true"
+                                                [(ngModel)]="channel.name" [ngModelOptions]="{standalone: true}">
+                                        </mat-form-field>
+                                    </div>
+                                    <div class="col-6">
+                                        <mat-slide-toggle [(ngModel)]="channel.active"
+                                            [ngModelOptions]="{standalone: true}">
+                                            {{'label.active' | translate}}
+                                        </mat-slide-toggle>
+                                    </div>
+                                </div>
+                                <div class="row" *ngFor="let field of channel.fields">
+                                    <div class="col-12">
+                                        <mat-form-field class="amd-form-control">
+                                            <mat-label>{{field.label | dynamicTranslate: {param: field.traductions } }}:
+                                            </mat-label>
+                                            <!-- 
+                                                [pattern]="field.regex"
+                                            -->
+                                            <input matInput [attr.maxlength]="field.maxlength" [ngModel]="field.value"
+                                                [ngModelOptions]="{standalone: true}"
+                                                [type]="(field.type ? field.type : 'text')" [required]="field.required">
+                                        </mat-form-field>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+
+                    </mat-expansion-panel>
+                </mat-accordion>
+            </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 color="primary" (click)="next()" class="pull-right" *ngIf="!viewMode">
+                    <span class="pr-1">{{'btn.save' | translate}}</span>
+                    <i class="fa fa-chevron-right"></i>
+                </button>
+                <button mat-stroked-button (click)="exit()" class="pull-right" *ngIf="viewMode">
+                    <span class="pr-1">{{'application.options.exit' | translate}}</span>
+                    <i class="fa fa-logout"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+
+</div>
\ No newline at end of file

projects/bytebot-html/src/app/modules/agent/view/components/ca-deployment-channels/ca-deployment-channels.component.scss

+.icon {
+    vertical-align: middle;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+::ng-deep .right-aligned-header > .mat-content {
+    justify-content: space-between;
+}
+
+::ng-deep .mat-content > mat-panel-title {
+    flex: 0 0 auto;
+}
+
+::ng-deep .mat-content > mat-panel-description {
+    flex: 0 0 auto;
+}
+
+::ng-deep .mat-expansion-indicator {
+    margin-bottom: 10px;
+}
+
+::ng-deep mat-slide-toggle {
+    margin-top: 14px;
+}

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

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

projects/bytebot-html/src/app/modules/agent/view/components/ca-deployment-channels/ca-deployment-channels.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+import { MatStepper, MatDialog } from '@angular/material';
+import { CaDeploymentChannelsModalComponent } from '../ca-deployment-channels-modal/ca-deployment-channels-modal.component';
+
+@Component({
+  selector: 'byte-ca-deployment-channels',
+  templateUrl: './ca-deployment-channels.component.html',
+  styleUrls: ['./ca-deployment-channels.component.scss']
+})
+export class CaDeploymentChannelsComponent implements OnInit {
+
+  @Input() stepper: MatStepper;
+
+  agentChannels: Array<any> = new Array<any>();
+  channels: Array<any> = new Array<any>();
+  step = -1;
+
+  constructor(
+    private matDialog: MatDialog
+  ) { }
+
+  ngOnInit() {
+    this.channels = [
+      {
+        channelId: 101,
+        channelName: 'Facebook Messenger',
+        channelImage: 'https://img.icons8.com/color/452/facebook-messenger.png',
+        fields: [
+          {
+            name: 'webhook',
+            label: 'webhook',
+            maxlength: 200,
+            required: true,
+            traductions: { 'es': 'URL de devolución de llamada', 'en': 'Webhook' }
+          },
+          {
+            name: 'verification-token',
+            label: 'verification-token',
+            maxlength: 80,
+            required: true,
+            traductions: { 'es': 'Token de verificación', 'en': 'Verification token' }
+          },
+          {
+            name: 'access-token',
+            label: 'access-token',
+            maxlength: 80,
+            required: true,
+            traductions: { 'es': 'Token de acceso', 'en': 'Access token' }
+          }
+        ]
+      },
+
+      {
+        channelId: 103,
+        channelName: 'WhatsApp',
+        channelImage: 'https://img.icons8.com/color/452/whatsapp.png',
+        name: 'Canal de wasap',
+        fields: [
+          {
+            name: 'account-identifier',
+            label: 'account-identifier',
+            maxlength: 80,
+            type: 'text',
+            required: true,
+            traductions: { 'es': 'Identificador de cuenta', 'en': 'Account identifier' }
+          },
+          {
+            name: 'authentication-token',
+            label: 'authentication-token',
+            maxlength: 80,
+            type: 'text',
+            required: true,
+            traductions: { 'es': 'Token de autenticación', 'en': 'Authentication token' }
+          },
+          {
+            name: 'twillio-number',
+            label: 'account-identifier',
+            type: 'number',
+            required: true,
+            traductions: { 'es': 'Número de Twillio', 'en': 'Twillio number' }
+          }
+        ]
+      }
+    ]
+
+    this.agentChannels = [
+      {
+        id: 1,
+        channelId: 101,
+        channelName: 'Facebook Messenger',
+        channelImage: 'https://img.icons8.com/color/452/facebook-messenger.png',
+        name: 'Canal de mesenyer',
+        active: false,
+        fields: [
+          {
+            id: 306,
+            name: 'webhook',
+            label: 'webhook',
+            value: 'https://developers.facebook.com/docs/messenger-platform/webhook/',
+            maxlength: 200,
+            required: true,
+            traductions: { 'es': 'URL de devolución de llamada', 'en': 'Webhook' }
+          },
+          {
+            id: 305,
+            name: 'verification-token',
+            label: 'verification-token',
+            value: 'a50a01069bd00e0e269ff639d9ca7def',
+            maxlength: 80,
+            required: true,
+            traductions: { 'es': 'Token de verificación', 'en': 'Verification token' }
+          },
+          {
+            id: 304,
+            name: 'access-token',
+            label: 'access-token',
+            value: 'bd01-0e0e-269f-f639',
+            maxlength: 80,
+            required: true,
+            traductions: { 'es': 'Token de acceso', 'en': 'Access token' }
+          }
+        ]
+      },
+
+      {
+        id: 3,
+        channelId: 103,
+        channelName: 'WhatsApp',
+        channelImage: 'https://img.icons8.com/color/452/whatsapp.png',
+        name: 'Canal de wasap',
+        active: true,
+        fields: [
+          {
+            id: 303,
+            name: 'account-identifier',
+            label: 'account-identifier',
+            value: 'my-msn-account',
+            maxlength: 80,
+            type: 'text',
+            required: true,
+            traductions: { 'es': 'Identificador de cuenta', 'en': 'Account identifier' }
+          },
+          {
+            id: 302,
+            name: 'authentication-token',
+            label: 'authentication-token',
+            value: 'a50a01069bd00e0e269ff639d9ca7def',
+            maxlength: 80,
+            type: 'text',
+            required: true,
+            traductions: { 'es': 'Token de autenticación', 'en': 'Authentication token' }
+          },
+          {
+            id: 301,
+            name: 'twillio-number',
+            label: 'account-identifier',
+            value: '957355738',
+            type: 'number',
+            required: true,
+            traductions: { 'es': 'Número de Twillio', 'en': 'Twillio number' }
+          }
+        ]
+      }
+    ]
+  }
+
+  addChannel() {
+    let dialog = this.matDialog.open(CaDeploymentChannelsModalComponent, {
+      width: '500px',
+      data: {
+        message: '',
+        channels: this.channels
+      }
+    });
+
+    dialog.afterClosed().subscribe(result => {
+      if (result) {
+        this.agentChannels.push({ ...result });
+        this.setStep(this.agentChannels.length - 1);
+      }
+    });
+  }
+
+  setStep(step) {
+    this.step = step;
+  }
+
+}

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

-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { AuthGuard } from '@xdf/security';
-import { TemplateResolver, CrudDetailComponent, DirtyGuard, GridViewComponent, CrudGridComponent, RecordResolver } from '@xdf/gallery';
-import { ResourceAuthGuard } from '@xdf/security';
-import { UserRoleFormComponent, AccessDetailResolver } from '@xdf/settings';
-import { AgentComponent } from './view/agent/agent.component';
-
-const routes: Routes = [
-  {
-    path: 'agent', component: AgentComponent, canActivate: [AuthGuard, ResourceAuthGuard], 
-    data: {
-      program: 'agent',
-      breadcrumb: 'breadcrumb.agent'
-    }
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class ConfigurationRoutingModule { }

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

-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { TranslateModule } from '@ngx-translate/core';
-import { ConfigurationRoutingModule } from './configuration-routing.module';
-import { AgentComponent } from './view/agent/agent.component';
-import { XdfGalleryModule } from '@xdf/gallery';
-import { MatProgressSpinnerModule, MatTableModule, MatSortModule, MatIconModule, MatTooltipModule, MatPaginatorModule, MatButtonModule } from '@angular/material';
-
-
-
-@NgModule({
-  declarations: [
-    AgentComponent
-  ],
-  imports: [
-    CommonModule,
-    ConfigurationRoutingModule,
-    FormsModule,
-    MatButtonModule,
-    MatIconModule,
-    MatPaginatorModule,
-    MatProgressSpinnerModule,
-    MatSortModule,
-    MatTableModule,
-    MatTooltipModule,
-    ReactiveFormsModule,
-    TranslateModule,
-    XdfGalleryModule
-  ]
-})
-export class ConfigurationModule { }

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

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

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

-import { Injectable } from '@angular/core';
-import { DynaDataService } from '@xdf/gallery';
-import { HttpClient } from '@angular/common/http';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class AgentService extends DynaDataService {
-
-  serviceURL = './service/agent';
-
-  constructor(private httpClient: HttpClient) {
-    super(httpClient);
-  }
-  
-}

projects/bytebot-html/src/assets/data/navigation.json

@@ -32,11 +32,11 @@
     },
     {
         "id": 37,
-        "name": "agent",
+        "name": "CONVERSATIONAL_AGENT",
         "label": "menu.parent.agent",
         "icon": "<i class=\"fa fa-cog\"></i>",
-        "fullPath": "/config/agent",
-        "singlePath": "config",
+        "fullPath": "/configuration/agent",
+        "singlePath": "configuration",
         "isProgram": true,
         "children": []
     }

projects/bytebot-html/src/assets/fake-data/programs-data.json

@@ -7,5 +7,5 @@
     "estados",
     "motivos",
     "categoria_motivo",
-    "agent"
+    "CONVERSATIONAL_AGENT"
 ]
\ No newline at end of file

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

 {
     "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",
     "etl_avatar": "Avatar",
     "etl_code": "ID",
     "etl_name": "Nombre",
     "etl_version": "Versión",
     "etl_status": "Estado",
     "etl_country": "País",
-    "etl_timezone": "Zona horaria"
+    "etl_timezone": "Zona horaria",
+    "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",
+    "label.active": "Activo",
+    "label.inactive": "Inactivo",
+    "label.name": "Nombre",
+    "label.deployment-channels.configuration": "Canales de despliegue",
+    "label.deployment-channels.configuration.description": "Seleccione un canal de despliegue"
 }
\ No newline at end of file