Cambios y correcciones en el wizard de agentes

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

@@ -211,16 +211,16 @@ export class AgentFakeBackendInterceptor implements HttpInterceptor {
         function handleRoute() {
 
             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 + '/countries') !== -1 && method === 'GET':
-                    return ok(countries);
-                case url.indexOf(basePath + '/') !== -1 && method === 'GET':
-                    return ok(fakeAgentData);
-                case url.indexOf(basePath + '/channels') !== -1 && method === 'GET':
-                    return ok(channels);
+                // 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 + '/countries') !== -1 && method === 'GET':
+                //     return ok(countries);
+                // case url.indexOf(basePath + '/') !== -1 && method === 'GET':
+                //     return ok(fakeAgentData);
+                // case url.indexOf(basePath + '/channels') !== -1 && method === 'GET':
+                //     return ok(channels);
                 default:
                     // pass through any requests not handled above
                     return next.handle(request);

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

@@ -14,7 +14,6 @@ import { AgentRoutingModule } from './agent-routing.module';
 import { AceEditorModule } from 'ng2-ace-editor';
 import { AgentComponent } from './view/agent/agent.component';
 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';
@@ -28,7 +27,6 @@ import { CaFileUploadModalComponent } from './view/components/ca-file-upload-mod
 
 @NgModule({
   entryComponents: [
-    EsStepsProcessorsModalComponent,
     CaDeploymentChannelsModalComponent,
     CaFileUploadModalComponent
   ],
@@ -36,7 +34,6 @@ import { CaFileUploadModalComponent } from './view/components/ca-file-upload-mod
     AgentComponent,    
     AgentListComponent,    
     AgentDetailComponent, 
-    EsStepsProcessorsModalComponent,
     DynamicTranslatePipe,
     CaGeneralInformationComponent,
     CaFrequentQuestionsComponent,

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

@@ -3,19 +3,12 @@ import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 import { CaGeneralInformationComponent } from '../components/ca-general-information/ca-general-information.component';
 import { MAT_STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
 import { ActivatedRoute, Router } from '@angular/router';
-//import { EsConnectionsComponent } from '../components/es-connections/es-connections.component';
-//import { EsEntityComponent } from '../components/es-entity/es-entity.component';
-//import { EsStepsComponent } from '../components/es-steps/es-steps.component';
-//import { EsSummaryComponent } from '../components/es-summary/es-summary.component';
 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';
 import { CaDeploymentChannelsComponent } from '../components/ca-deployment-channels/ca-deployment-channels.component';
 
-
 @Component({
   selector: 'byte-agent',
   templateUrl: './agent.component.html',
@@ -54,7 +47,7 @@ export class AgentComponent implements OnInit, IDirty {
   ) {
 
     this._backService.backAnnounced$.subscribe(data => {
-      this._router.navigate(['/config/agent']);
+      this._router.navigate(['/configuration/agent']);
     });
   }
 
@@ -101,28 +94,11 @@ export class AgentComponent implements OnInit, IDirty {
       this.agentDetail = this._activatedRoute.snapshot.data.agentDetail;
     }
 
-    //let dataForWizard = this._activatedRoute.snapshot.data.dataForWizard;
-
-    //this.frequentQuestionsComponent.setDataForWizard(dataForWizard);
-    //this.stepsComponent.setDataForWizard(dataForWizard);
-    //this.entitiesComponent.setDataForWizard(dataForWizard);
 
     this.generalInformationComponent.buildForm(this.agentDetail);
     this.frequentQuestionsComponent.buildForm(this.agentDetail);
     this.deploymentChannelsComponent.buildForm(this.agentDetail);
-    //this.summaryComponent.buildForm(this.agentDetail);
-
-  }
 
-  selectionChange($event) {
-    //this.stepsComponent.selectConnection();
-    //this.entitiesComponent.selectConnection();
   }
 
-  onDeleteConnection($event) {
-    //this.stepsComponent.deleteConnection($event);
-    //this.entitiesComponent.deleteConnection($event);
-  }
-
-
 }

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

@@ -72,7 +72,7 @@
                                             <!-- 
                                                 [pattern]="field.regex"
                                             -->
-                                            <input matInput [maxlength]="field.maxlength"  [ngModel]="field.value"
+                                            <input matInput [maxlength]="field.maxlength"  [(ngModel)]="field.value"
                                                 [ngModelOptions]="{standalone: true}"
                                                 [type]="(field.type ? field.type : 'text')" [required]="field.required">
                                         </mat-form-field>
@@ -81,8 +81,17 @@
                             </form>
                         </div>
 
+                        <mat-action-row>
+                            <button mat-button color="warn" (click)="deleteChannel(i)">
+                                <i class="fa fa-trash"></i>&nbsp;&nbsp;Eliminar canal
+                            </button>
+                          </mat-action-row>
                     </mat-expansion-panel>
                 </mat-accordion>
+
+                <div *ngIf="!(deploymentChannels && deploymentChannels.length)" class="border-all text-center">
+                    Seleccione <i class="fa fa-plus"></i> para agregar un  canal de despliegue
+                </div>
             </div>
 
         </div>
@@ -95,7 +104,7 @@
                     <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">
+                <button mat-stroked-button color="primary" (click)="save()" class="pull-right" *ngIf="!viewMode">
                     <span class="pr-1">{{'btn.save' | translate}}</span>
                     <i class="fa fa-chevron-right"></i>
                 </button>

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

@@ -25,3 +25,8 @@
 ::ng-deep mat-slide-toggle {
     margin-top: 14px;
 }
+
+.border-all.text-center {
+    padding: 50px;
+    border-radius: 4px;
+}

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

@@ -3,6 +3,9 @@ import { MatStepper, MatDialog } from '@angular/material';
 import { CaDeploymentChannelsModalComponent } from '../ca-deployment-channels-modal/ca-deployment-channels-modal.component';
 import { AgentService } from '../../../service/agent.service';
 import { first } from 'rxjs/operators';
+import { NotificationType, NotificationService } from '@xdf/commons';
+import { TranslateService } from '@ngx-translate/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'byte-ca-deployment-channels',
@@ -13,13 +16,18 @@ export class CaDeploymentChannelsComponent implements OnInit {
 
   @Input() stepper: MatStepper;
 
-  deploymentChannels: Array<any> = new Array<any>();
+  agentDetail: any;
   channels: Array<any>;
+  deploymentChannels: Array<any> = new Array<any>();
+  dirty: boolean = true;
   step = -1;
 
   constructor(
     private agentService: AgentService,
-    private matDialog: MatDialog
+    private matDialog: MatDialog,
+    private translateService: TranslateService,
+    private notificationService: NotificationService,
+    private router: Router
   ) { }
 
   ngOnInit() {
@@ -36,6 +44,7 @@ export class CaDeploymentChannelsComponent implements OnInit {
   }
 
   buildForm(agentDetail: any) {
+    this.agentDetail = agentDetail;
     this.deploymentChannels = agentDetail.deploymentChannels;
     this.buildList();
   }
@@ -85,8 +94,10 @@ export class CaDeploymentChannelsComponent implements OnInit {
       if (result) {
         let selectedChannel = { ...result };
 
+        selectedChannel.channelId = selectedChannel.id;
         selectedChannel.channelName = selectedChannel.name;
         selectedChannel.channelImage = selectedChannel.image;
+        selectedChannel.id = undefined;
         selectedChannel.name = undefined;
 
         this.deploymentChannels.push(selectedChannel);
@@ -95,8 +106,70 @@ export class CaDeploymentChannelsComponent implements OnInit {
     });
   }
 
+  deleteChannel(i) {
+    this.deploymentChannels.splice(i, 1);
+  }
+
   setStep(step) {
     this.step = step;
   }
 
+
+  save() {
+
+    let agent: any = {};
+
+    agent.id = this.agentDetail.id;
+    agent.name = this.agentDetail.name;
+    agent.description = this.agentDetail.description;
+    agent.version = this.agentDetail.version;
+    agent.countryId = this.agentDetail.countryId;
+    agent.timezone = this.agentDetail.timezone;
+    agent.avatar = this.agentDetail.avatar;
+    agent.language = this.agentDetail.language;
+    agent.type = this.agentDetail.type;
+    agent.status = this.agentDetail.status;
+    agent.deploymentChannels = [];
+
+    for (let deploymentChannel of this.deploymentChannels) {
+      let deploymentChannelTmp: any = {};
+
+      deploymentChannelTmp.id = deploymentChannel.id;
+      deploymentChannelTmp.name = deploymentChannel.name;
+      deploymentChannelTmp.status = deploymentChannel.status ? deploymentChannel.status : 'AC';
+      deploymentChannelTmp.channelId = deploymentChannel.channelId;
+      deploymentChannelTmp.parameters = [];
+
+      for (let parameter of deploymentChannel.parameters) {
+        let parameterTmp: any = {};
+
+        parameterTmp.id = parameter.id;
+        parameterTmp.value = parameter.value;
+        parameterTmp.channelParamName = parameter.channelParamName ? parameter.channelParamName : parameter.name;
+
+        deploymentChannelTmp.parameters.push(parameterTmp);
+      }
+
+      agent.deploymentChannels.push(deploymentChannelTmp);
+    }
+
+    agent.frequentQuestions = this.agentDetail.frequentQuestions;
+
+    console.log(agent);
+
+    this.agentService.update(agent.id, agent).pipe(first()).subscribe(() => {
+
+      if (agent.id) {
+        this.dirty = false;
+        this.notificationService.showMessage(this.translateService.instant('agent.edit.success'), null, NotificationType.success);
+        this.router.navigate(['/configuration/agent']);
+      } else {
+        this.dirty = false;
+        this.notificationService.showMessage(this.translateService.instant('agent.create.success'), null, NotificationType.success);
+        this.router.navigate(['/configuration/agent']);
+      }
+    });
+
+  }
+
 }

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

@@ -59,7 +59,6 @@ export class CaFrequentQuestionsComponent implements OnInit {
     protected authorizationService: AuthorizationService,
     private translate: TranslateService,
     private uploadService: UploadService,
-    private formBuilder: FormBuilder,
     private _activatedRoute: ActivatedRoute,
     private matDialog: MatDialog
   ) {
@@ -85,6 +84,7 @@ export class CaFrequentQuestionsComponent implements OnInit {
   }
 
   buildForm(agentDetail: any) {
+    console.log(agentDetail.frequentQuestions);
     this.dataSource = agentDetail.frequentQuestions;
   }
 

projects/bytebot-html/src/app/modules/agent/view/components/es-steps-processors-modal/es-steps-processors-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.functions.configuration' | translate}} </span>
-        </h2>
-    </div>
-</div>
-
-<mat-dialog-content>
-
-    <div class="tab-content">
-        <form role="form" novalidate [formGroup]="formGroup" (ngSubmit)="ok()" #myForm="ngForm" autocomplete="off">
-            <div class="col-12">
-
-                <mat-form-field class="amd-form-control">
-                    <mat-select [placeholder]="'label.processor' | translate" formControlName="processor"
-                        [required]="true" (selectionChange)="selectionChange($event)">
-                        <ng-container *ngFor="let processor of processors">
-                            <mat-option *ngIf="!processor.hidden" [value]="processor">
-                                {{ processor.mainDescription }}
-                            </mat-option>
-                        </ng-container>
-                    </mat-select>
-                </mat-form-field>
-
-                <mat-form-field class="amd-form-control" *ngIf="formGroup.controls.processor.value">
-                    <mat-label>{{'label.function'| translate}}:</mat-label>
-                    <input matInput formControlName="name" disabled readonly>
-                </mat-form-field>
-
-                <mat-form-field class="amd-form-control" *ngIf="formGroup.controls.processor.value">
-                    <mat-label>{{'label.description' | translate}}:</mat-label>
-                    <textarea matInput cdkTextareaAutosize class="overflow-auto"
-                        [placeholder]="'label.description' | translate" formControlName="description"
-                        #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="3" cdkAutosizeMaxRows="6" disabled
-                        readonly></textarea>
-                </mat-form-field>
-            </div>
-        </form>
-
-    </div>
-
-</mat-dialog-content>
-<mat-dialog-actions align="end">
-    <button mat-button mat-dialog-close>{{'btn.cancel' | translate}}</button>
-    <button mat-button (click)="myForm.onSubmit($event)" cdkFocusInitial>{{'btn.accept' | translate}}</button>
-    <!-- <button mat-button (click)="ok()" cdkFocusInitial>Aceptar</button> -->
-</mat-dialog-actions>

projects/bytebot-html/src/app/modules/agent/view/components/es-steps-processors-modal/es-steps-processors-modal.component.spec.ts

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

projects/bytebot-html/src/app/modules/agent/view/components/es-steps-processors-modal/es-steps-processors-modal.component.ts

-import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
-import { FormGroup, FormBuilder } from '@angular/forms';
-import { ApplicationSettings } from '@xdf/layouts';
-import { BytebotSettingsService } from 'projects/bytebot-html/src/app/services/bytebot-settings-service';
-
-@Component({
-  selector: 'byte-es-steps-processors-modal',
-  templateUrl: './es-steps-processors-modal.component.html',
-  styleUrls: ['./es-steps-processors-modal.component.scss']
-})
-export class EsStepsProcessorsModalComponent implements OnInit {
-
-  public applicationSettings: ApplicationSettings;
-
-  fields: Array<any> = [];
-  formGroup: FormGroup;
-  processors: Array<any>;
-
-  constructor(
-    public dialogRef: MatDialogRef<EsStepsProcessorsModalComponent>,
-    private formBuilder: FormBuilder,
-    private bytebotSettingsService: BytebotSettingsService,
-    @Inject(MAT_DIALOG_DATA) public data: any) {
-
-    this.processors = data.processors;
-
-    if (!this.processors) {
-      this.processors = [];
-    }
-
-    for (let processor of this.processors) {
-
-      if (data.connectionProcessors) {
-        let found = false;
-
-        for (let connectionProcessor of data.connectionProcessors) {
-          if (processor.processorId === connectionProcessor.processorId) {
-            found = true;
-            processor.hidden = true;
-            break;
-          }
-        }
-
-        if (!found) {
-          processor.hidden = false;
-        }
-      } else {
-        processor.hidden = false;
-      }
-
-    }
-
-    this.formGroup = this.formBuilder.group({
-      processor: null,
-      name: null,
-      description: null
-    });
-
-  }
-
-  ngOnInit() {
-    this.bytebotSettingsService.getApplicationSettings().subscribe(result => {
-      this.applicationSettings = result;
-    });
-  }
-
-  selectionChange($event) {
-    this.formGroup.patchValue({
-      name: $event.value.name,
-      description: $event.value.secundaryDescription
-    });
-  }
-
-  ok() {
-
-    if (this.formGroup.valid) {
-      this.dialogRef.close(this.formGroup.controls.processor.value);
-    }
-
-  }
-
-}

projects/bytebot-html/src/styles.scss

@@ -171,3 +171,18 @@ button {
 .amd-form-control {
   width: 100%;
 }
+
+.cdk-global-scrollblock {
+  position: fixed;
+  overflow-y: inherit;
+  /*width: inherit;*/
+  width: -moz-available; /* WebKit-based browsers will ignore this. */
+  width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
+  width: stretch;
+}
+
+// Z-index para la barra de menu
+.navbar-static-side {
+  z-index: 999;
+  position: absolute;
+}