Cambios y correcciones

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

@@ -44,7 +44,7 @@ registerLocaleData(localeEs, 'es');
 registerLocaleData(localeEn, 'en');
 
 export function createTranslateLoader(http: HttpClient) {
-  return new MultiTranslateHttpLoader(http, 
+  return new MultiTranslateHttpLoader(http,
     [
       { prefix: './assets/i18n/', suffix: '.json' },
       { prefix: './assets/i18n/menu/', suffix: '.json' },
@@ -94,38 +94,38 @@ export function createTranslateLoader(http: HttpClient) {
       useClass: MomentDateAdapter,
       deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
     },
-    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
+    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
 
     { provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl, deps: [TranslateService] },
     { provide: DATERANGEPICKER_LOCALE, useValue: INITIAL_LANGUAGE },
-    { provide: DaterangepickerLocaleService, useClass: DaterangepickerLocaleService},
+    { provide: DaterangepickerLocaleService, useClass: DaterangepickerLocaleService },
 
     { provide: LocationStrategy, useClass: HashLocationStrategy },
     { provide: NotificationService, useClass: ToastNotificationService },
     { provide: SettingsService, useClass: ByteSettingsService },
-    
+
     ConflictErrorDialogService,
-    { provide: HTTP_INTERCEPTORS, useClass: HttpErrorHandleInterceptor, multi: true},
+    { provide: HTTP_INTERCEPTORS, useClass: HttpErrorHandleInterceptor, multi: true },
     // { provide: HTTP_INTERCEPTORS, useClass: ErrorsHandler, multi: true},
 
-    { provide: ResourceAuthGuard, useClass: ResourceAuthGuard},
+    { 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: HTTP_INTERCEPTORS, useClass: CustomProgramsFakeBackendInterceptor, multi: true},
-    { provide: HTTP_INTERCEPTORS, useClass: AgentFakeBackendInterceptor, 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: AgentFakeBackendInterceptor, multi: true },
+
+
 
     { provide: APP_INITIALIZER, useFactory: init_app, deps: [InitCommonsService, TranslateService], multi: true }
   ],

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

@@ -15,7 +15,7 @@ const routes: Routes = [
     path: 'agent', component: AgentListComponent, canActivate: [AuthGuard, ResourceAuthGuard], 
     data: {
       program: 'CONVERSATIONAL_AGENT',
-      breadcrumb: 'breadcrumb.agent'
+      breadcrumb: 'Agentes'
     }
   },
   {

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

@@ -6,7 +6,7 @@
             <h5>{{'reconciliation.title' | translate}}</h5>
           </div> -->
           <div class="ibox-content">
-            <mat-horizontal-stepper labelPosition="bottom" #stepper [linear]="true" (selectionChange)="selectionChange($event)">
+            <mat-horizontal-stepper labelPosition="bottom" #stepper [linear]="true">
   
               <mat-step state="info">
                 <ng-template matStepLabel>

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

@@ -55,12 +55,11 @@ export class AgentComponent implements OnInit, IDirty {
     let dirty = false;
 
     dirty = this.generalInformationComponent.isDirty()
-      || this.frequentQuestionsComponent.isDirty()
-      ;
+      || this.frequentQuestionsComponent.isDirty();
 
-    /* if (dirty) {
-      dirty = this.summaryComponent.isDirty()
-    }*/
+    if (dirty) {
+      dirty = this.deploymentChannelsComponent.isDirty()
+    }
 
     return dirty;
   }

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

@@ -22,15 +22,15 @@
                 </div> -->
 
                 <h4 class="mt-3">
-                    <button class="pull-right" mat-icon-button (click)="addChannel()">
+                    <button class="pull-right" mat-icon-button (click)="addChannel()" *ngIf="!viewMode">
                         <i class="fa fa-plus"></i>
                     </button>
                     <b>{{'label.channels' | translate}}</b>
                 </h4>
 
                 <mat-accordion>
-                    <mat-expansion-panel *ngFor="let channel of deploymentChannels; let i = index" [expanded]="step === i"
-                        (opened)="setStep(i)">
+                    <mat-expansion-panel *ngFor="let channel of deploymentChannels; 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">
@@ -54,13 +54,15 @@
                                         <mat-form-field class="amd-form-control">
                                             <mat-label>{{'label.name' | translate}}</mat-label>
                                             <input matInput maxlength="80" [type]="text" required="true"
-                                                [(ngModel)]="channel.name" [ngModelOptions]="{standalone: true}">
+                                                [disabled]="viewMode" [(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 [(ngModel)]="channel.active" [disabled]="viewMode"
+                                            [ngModelOptions]="{standalone: true}" color="primary">
+                                            <span *ngIf="channel.active">{{'label.active' | translate}}</span>
+                                            <span *ngIf="!channel.active">{{'label.inactive' | translate}}</span>
                                         </mat-slide-toggle>
                                     </div>
                                 </div>
@@ -72,8 +74,8 @@
                                             <!-- 
                                                 [pattern]="field.regex"
                                             -->
-                                            <input matInput [maxlength]="field.maxlength"  [(ngModel)]="field.value"
-                                                [ngModelOptions]="{standalone: true}"
+                                            <input matInput [maxlength]="field.maxlength" [(ngModel)]="field.value"
+                                                [ngModelOptions]="{standalone: true}" [disabled]="viewMode"
                                                 [type]="(field.type ? field.type : 'text')" [required]="field.required">
                                         </mat-form-field>
                                     </div>
@@ -81,16 +83,17 @@
                             </form>
                         </div>
 
-                        <mat-action-row>
+                        <mat-action-row *ngIf="!viewMode">
                             <button mat-button color="warn" (click)="deleteChannel(i)">
-                                <i class="fa fa-trash"></i>&nbsp;&nbsp;Eliminar canal
+                                <i class="fa fa-trash"></i>&nbsp;&nbsp;{{'label.delete-channel' | translate}}
                             </button>
-                          </mat-action-row>
+                        </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
+                    Seleccione <i class="fa fa-plus"></i> para agregar un canal de despliegue
+                    <!-- {{'label.delete-channel' | translate}} -->
                 </div>
             </div>
 

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

@@ -30,3 +30,8 @@
     padding: 50px;
     border-radius: 4px;
 }
+
+.label.label-success {
+    background-color: #3f51b5;
+}
+

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

@@ -5,7 +5,7 @@ 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';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'byte-ca-deployment-channels',
@@ -21,14 +21,20 @@ export class CaDeploymentChannelsComponent implements OnInit {
   deploymentChannels: Array<any> = new Array<any>();
   dirty: boolean = true;
   step = -1;
+  viewMode: boolean = false;
 
   constructor(
+    private activatedRoute: ActivatedRoute,
     private agentService: AgentService,
     private matDialog: MatDialog,
     private translateService: TranslateService,
     private notificationService: NotificationService,
     private router: Router
-  ) { }
+  ) {
+
+    this.viewMode = this.activatedRoute.snapshot.data.mode === 'view';
+
+  }
 
   ngOnInit() {
 
@@ -45,18 +51,21 @@ export class CaDeploymentChannelsComponent implements OnInit {
 
   buildForm(agentDetail: any) {
     this.agentDetail = agentDetail;
-    this.deploymentChannels = agentDetail.deploymentChannels;
+    this.deploymentChannels = (agentDetail.deploymentChannels || []);
     this.buildList();
   }
 
   buildList() {
     if (this.channels && this.deploymentChannels) {
+
       for (let deploymentChannel of this.deploymentChannels) {
         for (let channel of this.channels) {
+
           if (channel.id === deploymentChannel.channelId) {
 
             deploymentChannel.channelName = channel.name;
             deploymentChannel.channelImage = channel.image;
+            deploymentChannel.active = (deploymentChannel.status === 'AC');
 
 
             for (let parameter of deploymentChannel.parameters) {
@@ -110,10 +119,14 @@ export class CaDeploymentChannelsComponent implements OnInit {
     this.deploymentChannels.splice(i, 1);
   }
 
-  setStep(step) {
-    this.step = step;
+  exit() {
+    this.dirty = false;
+    this.router.navigate(['/configuration/agent']);
   }
 
+  isDirty() {
+    return this.dirty;
+  }
 
   save() {
 
@@ -136,7 +149,7 @@ export class CaDeploymentChannelsComponent implements OnInit {
 
       deploymentChannelTmp.id = deploymentChannel.id;
       deploymentChannelTmp.name = deploymentChannel.name;
-      deploymentChannelTmp.status = deploymentChannel.status ? deploymentChannel.status : 'AC';
+      deploymentChannelTmp.status = deploymentChannel.active ? 'AC' : 'IN';
       deploymentChannelTmp.channelId = deploymentChannel.channelId;
       deploymentChannelTmp.parameters = [];
 
@@ -172,4 +185,8 @@ export class CaDeploymentChannelsComponent implements OnInit {
 
   }
 
+  setStep(step) {
+    this.step = step;
+  }
+
 }

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

@@ -8,7 +8,7 @@
     <div class="row pb-4">
       <div class="col-1"></div>
       <div class="col-10">
-        <div class="row pt-2">
+        <div class="row pt-2" *ngIf="!viewMode">
           <div class="col-12 no-padding">
             <button mat-mini-fab color="primary" (click)="addFile()" class="pull-right">
               <mat-icon>file_upload</mat-icon>
@@ -63,7 +63,7 @@
                 <td mat-cell *matCellDef="let element; let $index = index" style="width: 20%;" class="text-center">
                   <div class="btn-group">
                     <button type="button" class="btn btn-default btn-sm" (click)="onDeleteRecord(element, $index)"
-                      [disabled]="!resourceAuth['delete']">
+                      [disabled]="!resourceAuth['delete'] || viewMode">
                       <i class="fa fa-trash"></i>
                       <span class="visible-md-inline visible-lg-inline visible-xl-inline">
                         {{'btn.delete' | translate}}

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

@@ -9,7 +9,7 @@ table {
 
 th.mat-sort-header-sorted {
     color: black;
-  }
+}
 
 .no-padding {
     padding: 0px;
@@ -17,14 +17,15 @@ th.mat-sort-header-sorted {
 
 ::ng-deep mat-form-field .mat-form-field-infix {
     width: initial;
-  } 
+}
 
 $fontcolor: #676a6c;
 .content {
     width: 100%;
     display: flex;
     padding-right: 0px !important;
-    .grid-container, .filter-panel {
+    .grid-container,
+    .filter-panel {
         .crud-table {
             margin-bottom: 0px;
             width: 100%;
@@ -57,7 +58,6 @@ $fontcolor: #676a6c;
     }
 }
 
-
 .spinner-container {
     height: 100%;
     width: 100%;
@@ -70,11 +70,11 @@ $fontcolor: #676a6c;
     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;
@@ -96,8 +96,9 @@ th {
 tr.mat-header-row {
     height: 50px !important;
 }
-  
-tr.mat-footer-row, tr.mat-row:not(.inner-detail-row) {
+
+tr.mat-footer-row,
+tr.mat-row:not(.inner-detail-row) {
     height: 40px;
 }
 
@@ -105,10 +106,10 @@ tr.mat-footer-row, tr.mat-row:not(.inner-detail-row) {
     right: 10px;
     top: 10px;
     button {
-        font-size: 12px; 
+        font-size: 12px;
     }
 }
-  
+
 .status-button-bar {
     button {
         font-size: 16px;
@@ -116,11 +117,11 @@ tr.mat-footer-row, tr.mat-row:not(.inner-detail-row) {
     padding-top: 8px;
     padding-left: 15px;
 }
-  
+
 .mat-raised-button {
     padding: 0px 10px;
-  }
-  
+}
+
 .icon-centered-button span.mat-button-wrapper {
     display: flex;
 }
@@ -142,19 +143,18 @@ tr.mat-footer-row, tr.mat-row:not(.inner-detail-row) {
     }
 }
 
-@media (min-width: 576px)  {
+@media (min-width: 576px) {
     ::ng-deep .d-sm-block {
         display: table-cell !important;
     }
 }
 
-@media (max-width: 576px)  {
+@media (max-width: 576px) {
     ::ng-deep .mat-paginator-page-size-label {
         display: none !important;
     }
 }
 
-
 tr.inner-detail-row {
     height: 0;
     .mat-column-expandedDetail {
@@ -175,7 +175,8 @@ tr.inner-detail-row {
     }
 }
 
-tr.inner-element-row.odd, tr.inner-detail-row.odd {
+tr.inner-element-row.odd,
+tr.inner-detail-row.odd {
     background-color: rgba(0, 0, 0, 0.05);
 }
 
@@ -184,7 +185,7 @@ tr.inner-element-row.odd, tr.inner-detail-row.odd {
 // }
 
 tr.mat-row-auth:not(.inner-expanded-row):hover {
-    background-color:#f8f9fa;
+    background-color: #f8f9fa;
     cursor: pointer !important;
 }
 
@@ -204,10 +205,9 @@ tr.inner-element-row-expanded td {
     button {
         margin: 1px 0;
         color: inherit;
-    font-size: inherit;
+        font-size: inherit;
         border-radius: 0px;
     }
-    
 }
 
 ::ng-deep .mat-menu-item {
@@ -215,7 +215,7 @@ tr.inner-element-row-expanded td {
 }
 
 @media (min-width: 992px) {
-.d-t-lg-block {
-    display: table-cell !important;
+    .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.ts

 import { Component, OnInit, Input, ViewContainerRef, ElementRef, ViewChild, ChangeDetectorRef } from '@angular/core';
-import { Subscription, of } from 'rxjs';
-import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
 import { MatStepper, MatDialog, MatTableDataSource, MatSort } 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';
 import { CaFileUploadModalComponent, FileUploadModel } from '../ca-file-upload-modal/ca-file-upload-modal.component';
 
@@ -27,17 +22,18 @@ import { CaFileUploadModalComponent, FileUploadModel } from '../ca-file-upload-m
 })
 export class CaFrequentQuestionsComponent implements OnInit {
 
-  @Input() stepper: MatStepper;
+  @ViewChild(MatSort, { static: false }) sort: MatSort;
 
-  viewMode: boolean;
+  @Input() stepper: MatStepper;
 
   public resourceAuth = new Object();
 
-  accept = '.xls,.xlsx';
 
+
+  accept = '.xls,.xlsx';
+  agentDetail: any;
   displayedColumns: string[] = ['id', 'filename', 'description', 'status', 'user', 'uploadDate', 'actions'];
-  dataSource = new MatTableDataSource<FileUploadModel>();
-  @ViewChild(MatSort, { static: false }) sort: MatSort;
+  dataSource = new MatTableDataSource<FileUploadModel>([]);
 
   mapStatus = {
     "LO": {
@@ -51,6 +47,7 @@ export class CaFrequentQuestionsComponent implements OnInit {
   };
 
   files = [];
+  viewMode: boolean;
 
   constructor(protected route: ActivatedRoute,
     protected router: Router,
@@ -84,7 +81,11 @@ export class CaFrequentQuestionsComponent implements OnInit {
   }
 
   buildForm(agentDetail: any) {
-    this.dataSource.data = agentDetail.frequentQuestions;
+    this.agentDetail = agentDetail;
+
+    if (agentDetail.frequentQuestions) {
+      this.dataSource.data = agentDetail.frequentQuestions;
+    }
   }
 
   setDataForWizard(result: any) {
@@ -128,6 +129,8 @@ export class CaFrequentQuestionsComponent implements OnInit {
   saveQuestions(validateForm: boolean) {
     let success = true;
 
+    this.agentDetail.frequentQuestions = this.dataSource.data;
+
     return success;
   }
 

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

 {
+    "HOME": "Inicio",
     "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",
@@ -24,5 +25,17 @@
     "label.status.loaded" : "Cargado",
     "label.status.off" : "En Baja",
     "label.created": "Creado",
-    "label.deployed": "Desplegado"
+    "label.deployed": "Desplegado",
+    "breadcrumb.agent": "Agentes",
+    "label.general-information.title": "Información general",
+    "label.general-information.description": "Ingrese los datos principales para la identificación del agente",
+    "label.questions.title": "Preguntas frecuentes",
+    "label.questions.description": "Realice la carga de información para el uso de las preguntas frecuentes que utilizará el agente",
+    "label.avatar": "Avatar",
+    "label.description": "Descripción",
+    "label.version": "Versión",
+    "label.country": "País",
+    "label.timezone": "Zona horaria",
+    "label.language": "Idioma",
+    "label.type": "Tipo"
 }
\ No newline at end of file