Cambios y correcciones para agentes

angular.json

@@ -38,6 +38,7 @@
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
               "vendor/metismenu/metisMenu.js",
+              "node_modules/popper.js/dist/umd/popper.js",
               "node_modules/bootstrap/dist/js/bootstrap.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
               "node_modules/jquery-slimscroll/jquery.slimscroll.min.js",
@@ -48,7 +49,6 @@
               "node_modules/ace-builds/src-min/mode-java.js",
               "node_modules/peity/jquery.peity.min.js",
               "node_modules/pace-js/pace.min.js",
-              "node_modules/popper.js/dist/umd/popper.js",
               "vendor/inspinia/inspinia.js"
             ]
           },

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

@@ -121,8 +121,8 @@ export function createTranslateLoader(http: HttpClient) {
     // { 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: SettingsFakeBackendInterceptor, multi: true },
+    //{ provide: HTTP_INTERCEPTORS, useClass: CustomProgramsFakeBackendInterceptor, multi: true },
     // { provide: HTTP_INTERCEPTORS, useClass: AgentFakeBackendInterceptor, multi: true },
 
 

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

@@ -247,8 +247,8 @@ export class AgentFakeBackendInterceptor implements HttpInterceptor {
                 //     return ok(countries);
                 // case url.indexOf(basePath + '/channels') !== -1 && method === 'GET':
                 //     return ok(channels);
-                case url.indexOf(basePath + '/file-upload') !== -1 && method === 'POST':
-                    return ok(fileOK);
+                // case url.indexOf(basePath + '/file-upload') !== -1 && method === 'POST':
+                //     return ok(fileOK);
                 // case url.indexOf(basePath + '/') !== -1 && method === 'GET':
                 //     return ok(fakeAgentData);
                 default:

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: 'Agentes'
+      // breadcrumb: ''
     }
   },
   {

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

@@ -30,13 +30,18 @@ export class AgentService extends DynaDataService {
   }
 
   upload(formData) {
-    return this.httpClient.post<any>(this.serviceURL + '/file-upload', formData, {  
-       reportProgress: true,  
-       observe: 'events'  
-    });  
- }
+    return this.httpClient.post<any>(this.serviceURL + '/file-upload', formData, {
+      reportProgress: true,
+      observe: 'events'
+    });
+  }
+
   getChannelDatForWizard() {
     return this.httpClient.get(this.serviceURL + '/channels');
   }
 
+  synchronize(id: number) {
+    return this.httpClient.get(this.serviceURL + '/synchronize/' + id);
+  }
+
 }

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

@@ -50,7 +50,8 @@
 
                                             <div *ngIf="template['name'] !== 'avatar'">
 
-                                                <span class="label" [ngClass]="{'label-success': item[template['name']] === 'DP', 'label-default': item[template['name']] === 'CR'}"
+                                                <span class="label"
+                                                    [ngClass]="{'label-success': item[template['name']] === 'DP', 'label-default': item[template['name']] === 'CR'}"
                                                     *ngIf="template['name'] === 'status'">{{ item[template['name']] | agentStatus | translate }}</span>
                                                 <span
                                                     *ngIf="template['name'] !== 'status'">{{ item[template['name']] }}</span>
@@ -66,6 +67,39 @@
                                         <td class="text-center mat-cell cdk-column-actions mat-column-actions ng-star-inserted"
                                             mat-cell="" role="gridcell" *matCellDef="let item">
                                             <div class="btn-group">
+
+                                                <button mat-icon-button [matMenuTriggerFor]="beforeMenu"
+                                                    aria-label="Example icon-button with a menu">
+                                                    <mat-icon>more_vert</mat-icon>
+                                                </button>
+                                                <mat-menu #beforeMenu="matMenu" xPosition="before">
+                                                    <button mat-menu-item (click)="synchronize(item)" *ngIf="item.status !== 'DP'">
+                                                        <mat-icon>sync_alt</mat-icon>
+                                                        <span>Sincronizar</span>
+                                                    </button>
+                                                    <button mat-menu-item (click)="edit(item)"
+                                                        *ngIf="this.resourceAuth['edit']">
+                                                        <mat-icon>edit</mat-icon>
+                                                        <span>{{'btn.edit' | translate}}</span>
+                                                    </button>
+                                                    <button mat-menu-item  color="warn" (click)="delete(item)" 
+                                                        *ngIf="this.resourceAuth['delete']">
+                                                        <mat-icon>delete</mat-icon>
+                                                        <span>{{'btn.delete' | translate}}</span>
+                                                    </button>
+                                                </mat-menu>
+                                                <!-- <div class="dropdown">
+                                                    <button class="btn btn-default btn-sm dropdown-toggle" type="button"
+                                                        id="dropdownMenuButton" data-toggle="dropdown"
+                                                        aria-haspopup="true" aria-expanded="false">
+                                                        Dropdown button
+                                                    </button>
+                                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                                                        <a class="dropdown-item" href="#">Action</a>
+                                                        <a class="dropdown-item" href="#">Another action</a>
+                                                        <a class="dropdown-item" href="#">Something else here</a>
+                                                    </div>
+                                                </div>
                                                 <button class="btn btn-default btn-sm" (click)="edit(item)"
                                                     *ngIf="this.resourceAuth['edit']" type="button">
                                                     <i class="fa fa-edit"></i>
@@ -80,7 +114,7 @@
                                                     <span class="visible-md-inline visible-lg-inline visible-xl-inline">
                                                         {{'btn.delete' | translate}}
                                                     </span>
-                                                </button>
+                                                </button> -->
                                             </div>
                                         </td>
 

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

 .toolbar-option {
-    margin-left: 10px;
-    margin-right: 10px;
-  }
-  
-  $fontcolor: #676a6c;
-  .content {
-    width: 100%;
-    display: flex;
-    padding-right: 0px !important;
-    .grid-container,
-    .filter-panel {
-      .crud-table {
-        margin-bottom: 0px;
-        width: 100%;
-      }
-      .form {
-        padding: 10px 20px 10px 20px;
-      }
-    }
-  
-    .filter-panel {
-      margin-bottom: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+$fontcolor: #676a6c;
+.content {
+  width: 100%;
+  display: flex;
+  padding-right: 0px !important;
+  .grid-container,
+  .filter-panel {
+    .crud-table {
+      margin-bottom: 0px;
+      width: 100%;
     }
-  }
-  
-  .grid-ibox-content {
-    width: 100%;
-  }
-  
-  .btn-group {
-    .btn {
-      font-size: 10px;
+    .form {
+      padding: 10px 20px 10px 20px;
     }
   }
 
-  .td-view{
-    cursor: auto !important
-  }
-  
-  .mat-row-auth:hover {
-    background-color: #f8f9fa;
-    cursor: pointer !important;
+  .filter-panel {
+    margin-bottom: 10px;
   }
-  
-  .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 {
-    min-width: 170px;
-    padding-right: 20px !important;
-    cursor: default !important;
+}
+
+.grid-ibox-content {
+  width: 100%;
+}
+
+.btn-group {
+  .btn {
+    font-size: 10px;
   }
-  td {
-    vertical-align: middle !important;
-    color: $fontcolor;
+}
+
+.td-view {
+  cursor: auto !important;
+}
+
+.mat-row-auth:hover {
+  background-color: #f8f9fa;
+  cursor: pointer !important;
+}
+
+.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 {
+  min-width: 80px;
+  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 {
+  height: 40px !important;
+}
+
+.table-toolbar {
+  right: 10px;
+  top: 10px;
+  button {
     font-size: 12px;
   }
-  th {
-    vertical-align: middle !important;
-  }
-  tr.mat-header-row {
-    height: 50px !important;
-  }
-  
-  tr.mat-footer-row,
-  tr.mat-row {
-    height: 40px !important;
-  }
-  
-  .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;
-    }
-  }
-  
-  th {
-    background: rgb(242, 242, 242);
-  }
-  
-  tr.example-detail-row {
-    height: 0 !important;
-  }
-  
-  tr.example-element-row:not(.example-expanded-row):hover {
-    background: #dedede;
-    cursor: pointer;
-  }
-  
-  tr.example-element-row:not(.example-expanded-row):active {
-    background: #efefef;
-  }
-  
-  .example-element-row td {
-    border-bottom-width: 0;
-  }
-  
-  .example-element-detail {
-    overflow: hidden;
-    display: flex;
-  }
-  
-  .example-detail-row td {
-    padding-top: 0px;
-    padding-bottom: 0px;
-    border: none !important;
-    background-color: #f2f2f2;
-  }
-  
-  i.state {
-    font-size: 1.3em;
-  }
-  
-  i.fa-key.pull-left {
-    color: rgba(128, 128, 128, 0.33);
-    margin-right: 6px;
-  }
-  
-  //////
-  
-  table {
-    width: 100%;
-  }
-  
-  tr.mat-header-row {
-    height: 25px;
-  }
-  
-  tr.mat-footer-row,
-  tr.mat-row {
-    height: 40px;
-  }
-  
-  .button-grid {
-    margin: 2px 5px;
-    mat-icon {
-      padding-top: 2px;
-    }
-  }
-  
-  .btn-header-new {
-    margin-top: -4px;
-  }
-  
-  .btn-grid-filter {
-    height: 36px;
-    width: 85px;
-    padding-left: 0px;
-    padding-top: 2px;
-  }
-  
-  .btn-grid-action {
-    padding: 0 10px;
-    line-height: 0em;
-  }
-  
-  .mat-row:hover {
-    cursor: pointer;
-    background-color: #f8f9fa;
-  }
-  
-  .spinner-container {
-    height: 100%;
-    width: 100%;
-    padding-top: 50px;
-    position: fixed;
-  }
-  
-  .spinner-container mat-spinner {
-    margin: -10px auto 0 auto;
-  }
-  
-  .mat-raised-button {
-    padding: 0px 10px;
+}
+
+.status-button-bar {
+  button {
+    font-size: 16px;
   }
-  
-  .icon-centered-button span.mat-button-wrapper {
-    display: flex;
+  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;
   }
-  
-  .icon-centered-button mat-icon {
-    font-size: 15px;
+}
+
+th {
+  background: rgb(242, 242, 242);
+}
+
+tr.example-detail-row {
+  height: 0 !important;
+}
+
+tr.example-element-row:not(.example-expanded-row):hover {
+  background: #dedede;
+  cursor: pointer;
+}
+
+tr.example-element-row:not(.example-expanded-row):active {
+  background: #efefef;
+}
+
+.example-element-row td {
+  border-bottom-width: 0;
+}
+
+.example-element-detail {
+  overflow: hidden;
+  display: flex;
+}
+
+.example-detail-row td {
+  padding-top: 0px;
+  padding-bottom: 0px;
+  border: none !important;
+  background-color: #f2f2f2;
+}
+
+i.state {
+  font-size: 1.3em;
+}
+
+i.fa-key.pull-left {
+  color: rgba(128, 128, 128, 0.33);
+  margin-right: 6px;
+}
+
+//////
+
+table {
+  width: 100%;
+}
+
+tr.mat-header-row {
+  height: 25px;
+}
+
+tr.mat-footer-row,
+tr.mat-row {
+  height: 40px;
+}
+
+.button-grid {
+  margin: 2px 5px;
+  mat-icon {
     padding-top: 2px;
   }
-  
-  .ibox-content {
-    padding-right: 0px;
-  }
-  
-  .content {
-    width: 100%;
-    display: flex;
-    padding-right: 0px !important;
-  }
-  
-  .grid-ibox-content {
-    width: 100%;
-  }
+}
+
+.btn-header-new {
+  margin-top: -4px;
+}
+
+.btn-grid-filter {
+  height: 36px;
+  width: 85px;
+  padding-left: 0px;
+  padding-top: 2px;
+}
+
+.btn-grid-action {
+  padding: 0 10px;
+  line-height: 0em;
+}
+
+.mat-row:hover {
+  cursor: pointer;
+  background-color: #f8f9fa;
+}
+
+.spinner-container {
+  height: 100%;
+  width: 100%;
+  padding-top: 50px;
+  position: fixed;
+}
+
+.spinner-container mat-spinner {
+  margin: -10px auto 0 auto;
+}
+
+.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;
+}
+
+.ibox-content {
+  padding-right: 0px;
+}
+
+.content {
+  width: 100%;
+  display: flex;
+  padding-right: 0px !important;
+}
+
+.grid-ibox-content {
+  width: 100%;
+}
+
+.avatar {
+  vertical-align: middle;
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+}
 
-  .avatar {
-    vertical-align: middle;
-    width: 35px;
-    height: 35px;
-    border-radius: 50%;
-  }
+::ng-deep .mat-menu-panel {
+  overflow: hidden !important;
+}
\ No newline at end of file

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

@@ -3,7 +3,7 @@ import { MatPaginator, MatSort } from '@angular/material';
 import { ColumnTemplate, DynaDataSource, ConfirmationDialogService, extractRSQL, FieldFilter } from '@xdf/gallery';
 import { Pagination, SortField, NotificationType, NotificationService } from '@xdf/commons';
 import { Router, ActivatedRoute } from '@angular/router';
-import { tap } from 'rxjs/operators';
+import { first, 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 '../../service/agent.service';
@@ -306,6 +306,13 @@ export class AgentListComponent implements OnInit {
     this.router.navigate(['/configuration/agent/detail/edit/' + item.id]);
   }
 
+  synchronize(item) {
+    this.agentService.synchronize(item.id).pipe(first()).subscribe(() => {
+      this.notificationService.showMessage(this.translateService.instant("agent.synchronize.success"), undefined, NotificationType.success);
+      this.onRefresh();
+    });
+  }
+
   view(item) {
     this.router.navigate(['/configuration/agent/detail/view/' + item.id]);
   }

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

@@ -35,3 +35,4 @@
     background-color: #3f51b5;
 }
 
+

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

@@ -130,6 +130,12 @@ export class CaDeploymentChannelsComponent implements OnInit {
 
   save() {
 
+    let isValid: boolean = this.validate();
+
+    if (!isValid) {
+      return;
+    }
+
     let agent: any = {};
 
     agent.id = this.agentDetail.id;
@@ -168,8 +174,6 @@ export class CaDeploymentChannelsComponent implements OnInit {
 
     agent.frequentQuestions = this.agentDetail.frequentQuestions;
 
-    console.log(agent);
-
     this.agentService.update(agent.id, agent).pipe(first()).subscribe(() => {
 
       if (agent.id) {
@@ -189,4 +193,31 @@ export class CaDeploymentChannelsComponent implements OnInit {
     this.step = step;
   }
 
+  validate(): boolean {
+    let valid = true;
+
+    mainLoop: for (let deploymentChannel of this.deploymentChannels) {
+      let deploymentChannelTmp: any = {};
+
+      if (!deploymentChannel.name) {
+        valid = false;
+        break;
+      }
+
+      for (let parameter of deploymentChannel.parameters) {
+        if (!parameter.value) {
+          valid = false;
+          break mainLoop;
+        }
+      }
+
+    }
+
+    if (!valid) {
+      this.notificationService.showMessage(this.translateService.instant('error.message.complete-form'), undefined, NotificationType.error);
+    }
+
+    return valid;
+  }
+
 }

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

@@ -34,6 +34,28 @@
                 </mat-form-field>
             </div>
         </div>
+        <div class="row pt-2" *ngIf="fileErrorDetail">
+            <div class="col-12">
+                <h4>
+                    <b>Detalle de error</b>
+                </h4>
+            </div>
+            <div class="col-12">
+                <div class="example-container mat-elevation-z8">
+                    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+                        <!-- Position Column -->
+                        <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
+                            <th mat-header-cell *matHeaderCellDef> {{ 'header.' + column | translate}} </th>
+                            <td mat-cell *matCellDef="let element"> {{element[column] | translate</td>
+                        </ng-container>
+
+                        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                    </table>
+                </div>
+
+            </div>
+        </div>
     </form>
 
 </mat-dialog-content>

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

+.example-container {
+    max-height: 200px;
+    overflow: auto;
+    margin-bottom: 10px
+}
+
+table {
+    width: 100%;
+}

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

@@ -4,7 +4,7 @@ import { HttpEventType, HttpErrorResponse } from '@angular/common/http';
 import { of } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
 import { AgentService } from '../../../service/agent.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef, MatTableDataSource } from '@angular/material';
 import { NotificationService, NotificationType } from '@xdf/commons';
 import { TranslateService } from '@ngx-translate/core';
 
@@ -33,6 +33,12 @@ export class CaFileUploadModalComponent implements OnInit {
 
   fileInfo = new FileUploadModel();
 
+  fileErrorDetail: any;
+
+  dataSource = new MatTableDataSource([]);
+  displayedColumns: string[] = [];
+
+
   constructor(
     private formBuilder: FormBuilder,
     private agentService: AgentService,
@@ -49,6 +55,59 @@ export class CaFileUploadModalComponent implements OnInit {
   ngOnInit() {
   }
 
+  buildErrorDetail(status , detail) {
+    this.fileErrorDetail = undefined;
+
+    if ("CONTENT_ERROR" === status) {
+      this.displayedColumns = ['line', 'type', 'value'];
+
+      if (detail) {
+        let fileErrorDetailTemp = [];
+
+        for (let line of Object.keys(detail)) {
+          let object = detail[line];
+
+          let type = Object.keys(object)[0];
+
+          fileErrorDetailTemp.push({
+            line: line,
+            type: type,
+            value: object[type],
+          });
+        }
+
+        if (fileErrorDetailTemp) {
+          this.fileErrorDetail = fileErrorDetailTemp;
+          this.dataSource.data = fileErrorDetailTemp;
+        }
+
+      }
+
+    } else if ("HEADER_ERROR" === status) {
+      this.displayedColumns = ['header', 'value'];
+
+      if (detail) {
+        let fileErrorDetailTemp = [];
+
+        for (let header of Object.keys(detail)) {
+          let value = detail[header];
+
+          fileErrorDetailTemp.push({
+            header: header,
+            value: value,
+          });
+        }
+
+        if (fileErrorDetailTemp) {
+          this.fileErrorDetail = fileErrorDetailTemp;
+          this.dataSource.data = fileErrorDetailTemp;
+        }
+      }
+    } else {
+      this.fileErrorDetail = undefined;
+    }
+  }
+
   uploadFile(event) {
     for (const i in event) {
       if (event[i] instanceof File) {
@@ -92,7 +151,9 @@ export class CaFileUploadModalComponent implements OnInit {
         return of(`${file.data.name} upload failed.`);
       })
     ).subscribe((event: any) => {
+      console.log(event);
       if (typeof (event) === 'object') {
+        this.fileErrorDetail = undefined;
         this.enabledOK = false;
         let info = event.body;
         this.fileInfo = new FileUploadModel();
@@ -109,26 +170,32 @@ export class CaFileUploadModalComponent implements OnInit {
             this.fileInfo.uploadDate = info.uploadDate;
 
             this.enabledOK = true;
+            this.fileErrorDetail = undefined;
 
           } else if ("INCOMPATIBLE_EXTENSION" === status) {
             this.formGroup.controls.file.setValue(null);
             let message = "label.file.incompatible.extension";
             this.enabledOK = false;
+            this.fileErrorDetail = undefined;
             this._notificationService.showMessage(this._translateService.instant(message) + "[" + this.accept + "]", null, NotificationType.error);
 
           } else if ("CONTENT_ERROR" === status) {
             this.formGroup.controls.file.setValue(null);
             this.enabledOK = false;
-            console.log(info.fileValidationResult);
+
+            this.buildErrorDetail(status, info.fileValidationResult.recordsErrorMap);
 
           } else if ("HEADER_ERROR" === status) {
             this.formGroup.controls.file.setValue(null);
             this.enabledOK = false;
-            console.log(info.fileValidationResult);
+
+            this.buildErrorDetail(status, info.fileValidationResult.headersErrorMap);
+
           }
 
         } else {
           this.enabledOK = false;
+          this.fileErrorDetail = undefined;
           this.formGroup.controls.file.setValue(null);
         }
       }

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

@@ -9,7 +9,7 @@
       <div class="col-1"></div>
       <div class="col-10">
         <div class="row pt-2" *ngIf="!viewMode">
-          <div class="col-12 no-padding">
+          <div class="col-12">
             <button type="button" class="btn btn-outline-primary btn-sm pull-right" (click)="addFile()">
               <i class="fa fa-file-excel-o"></i>
               <span class="visible-md-inline visible-lg-inline visible-xl-inline">
@@ -19,66 +19,68 @@
           </div>
         </div>
 
-        <div class="row pt-2">
-          <div class="col-12 table-container mat-elevation-z8 p-b-15">
-            <table mat-table [dataSource]="dataSource" matSort>
-              <!-- Load ID -->
-              <ng-container matColumnDef="id">
-                <th mat-header-cell *matHeaderCellDef  mat-sort-header class="w-id">{{'label.file.id' | translate}}</th>
-                <td mat-cell *matCellDef="let element" class="w-id"> {{element.id}} </td>
-              </ng-container>
+        <div class="table-container mat-elevation-z8 p-b-15 mt-3">
+          <table mat-table [dataSource]="dataSource" matSort>
+            <!-- Load ID -->
+            <ng-container matColumnDef="id">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header class="w-id">{{'label.file.id' | translate}}</th>
+              <td mat-cell *matCellDef="let element" class="w-id"> {{element.id}} </td>
+            </ng-container>
 
-              <!-- Filename -->
-              <ng-container matColumnDef="filename">
-                <th mat-header-cell *matHeaderCellDef  mat-sort-header class="w-filename">{{'label.file.name' | translate}}</th>
-                <td mat-cell *matCellDef="let element" class="w-filename"> {{element.filename}} </td>
-              </ng-container>
+            <!-- Filename -->
+            <ng-container matColumnDef="filename">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header class="w-filename">{{'label.file.name' | translate}}
+              </th>
+              <td mat-cell *matCellDef="let element" class="w-filename"> {{element.filename}} </td>
+            </ng-container>
 
-              <!-- Description -->
-              <ng-container matColumnDef="description">
-                <th mat-header-cell *matHeaderCellDef  mat-sort-header class="w-description">{{'label.file.description' | translate}}</th>
-                <td mat-cell *matCellDef="let element" class="w-description"> {{element.description}} </td>
-              </ng-container>
+            <!-- Description -->
+            <ng-container matColumnDef="description">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header class="w-description">
+                {{'label.file.description' | translate}}</th>
+              <td mat-cell *matCellDef="let element" class="w-description"> {{element.description}} </td>
+            </ng-container>
 
-              <!-- Status -->
-              <ng-container matColumnDef="status">
-                <th mat-header-cell *matHeaderCellDef  mat-sort-header class="w-status">{{'label.file.status' | translate}}</th>
-                <td mat-cell *matCellDef="let element" class="w-status">
-                  <span [ngClass]="getClassStatus(element.status)">{{ getTextStatus(element.status) }}</span>
-                </td>
-              </ng-container>
+            <!-- Status -->
+            <ng-container matColumnDef="status">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header class="w-status">{{'label.file.status' | translate}}
+              </th>
+              <td mat-cell *matCellDef="let element" class="w-status">
+                <span [ngClass]="getClassStatus(element.status)">{{ getTextStatus(element.status) }}</span>
+              </td>
+            </ng-container>
 
-              <!-- User -->
-              <ng-container matColumnDef="user">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header class="w-user">{{'label.file.user' | translate}}</th>
-                <td mat-cell *matCellDef="let element" class="w-user"> {{element.user}} </td>
-              </ng-container>
+            <!-- User -->
+            <ng-container matColumnDef="user">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header class="w-user">{{'label.file.user' | translate}}
+              </th>
+              <td mat-cell *matCellDef="let element" class="w-user"> {{element.user}} </td>
+            </ng-container>
 
-              <!-- Fecha de carga -->
-              <ng-container matColumnDef="uploadDate">
-                <th mat-header-cell *matHeaderCellDef class="w-uploadDate">{{'label.file.upload.date' | translate}}</th>
-                <td mat-cell *matCellDef="let element" class="w-uploadDate"> {{element.uploadDate}} </td>
-              </ng-container>
+            <!-- Fecha de carga -->
+            <ng-container matColumnDef="uploadDate">
+              <th mat-header-cell *matHeaderCellDef class="w-uploadDate">{{'label.file.upload.date' | translate}}</th>
+              <td mat-cell *matCellDef="let element" class="w-uploadDate"> {{element.uploadDate}} </td>
+            </ng-container>
 
-              <!-- Actions -->
-              <ng-container matColumnDef="actions">
-                <th mat-header-cell *matHeaderCellDef class="w-actions"></th>
-                <td mat-cell *matCellDef="let element; let $index = index" class="w-actions text-center">
-                  <div class="btn-group">
-                    <button type="button" class="btn btn-default btn-sm" (click)="onDeleteRecord(element, $index)"
-                      [disabled]="!resourceAuth['delete'] || viewMode">
-                      <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; sticky: true;"></tr>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-            </table>
-          </div>
+            <!-- Actions -->
+            <ng-container matColumnDef="actions">
+              <th mat-header-cell *matHeaderCellDef class="w-actions"></th>
+              <td mat-cell *matCellDef="let element; let $index = index" class="w-actions text-center">
+                <div class="btn-group">
+                  <button type="button" class="btn btn-default btn-sm" (click)="onDeleteRecord(element, $index)"
+                    [disabled]="!resourceAuth['delete'] || viewMode">
+                    <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; sticky: true;"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+          </table>
         </div>
       </div>
       <div class="col-1"></div>

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

@@ -110,7 +110,7 @@ export class CaFrequentQuestionsComponent implements OnInit {
 
   addFile() {
     let dialog = this.matDialog.open(CaFileUploadModalComponent, {
-      width: '500px'
+      width: '600px'
     });
 
     dialog.afterClosed().subscribe(result => {

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

 {
     "HOME": "Inicio",
+    "BACK": "Regresar",
     "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",
@@ -11,7 +12,7 @@
     "agent_status": "Estado",
     "agent_country": "País",
     "agent_timezone": "Zona horaria",
-    "btn.file.upload" : "Cargar",
+    "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 cuales interactuará el agente",
@@ -21,33 +22,37 @@
     "label.name": "Nombre",
     "label.deployment-channels.configuration": "Canales de despliegue",
     "label.deployment-channels.configuration.description": "Seleccione un canal de despliegue",
-    "label.status.pending" : "Pendiente",
-    "label.status.loaded" : "Cargado",
-    "label.status.off" : "En Baja",
+    "label.status.pending": "Pendiente",
+    "label.status.loaded": "Cargado",
+    "label.status.off": "En Baja",
     "label.created": "Creado",
     "label.deployed": "Desplegado",
     "breadcrumb.agent": "Agentes",
-    "label.general-information.title" : "Información general",
-    "label.general-information.description" : "Registre la información correspondiente al 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 de agente",
-    "label.questions.title" : "Preguntas frecuentes",
-    "label.questions.description" : "Cargue los archivos con las preguntas frecuentes de entrenamiento",
-    "btn.new.file" : "Nuevo archivo",
-    "label.file.id" : "ID",
-    "label.file.name" : "Nombre",
-    "label.file.description" : "Descripción",
-    "label.file.status" : "Estado",
-    "label.file.user" : "Usuario",
-    "label.file.upload.date" : "Fecha de carga",
-    "label.file-upload.title" : "Archivo de preguntas",
-    "label.file-upload.description" : "El archivo de preguntas se utilizará para el entrenamiento del bot",
-    "label.file" : "Archivo",
-    "label.file.incompatible.extension" : "Archivo no válido. Sólo se aceptan archivos con extensión ",
-    "label.imageAvatar.incompatible.extension" : "Archivo no válido. Sólo se aceptan imágenes y con formato "
+    "label.general-information.title": "Información general",
+    "label.general-information.description": "Registre la información correspondiente al 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 de agente",
+    "label.questions.title": "Preguntas frecuentes",
+    "label.questions.description": "Cargue los archivos con las preguntas frecuentes de entrenamiento",
+    "btn.new.file": "Nuevo archivo",
+    "label.file.id": "ID",
+    "label.file.name": "Nombre",
+    "label.file.description": "Descripción",
+    "label.file.status": "Estado",
+    "label.file.user": "Usuario",
+    "label.file.upload.date": "Fecha de carga",
+    "label.file-upload.title": "Archivo de preguntas",
+    "label.file-upload.description": "El archivo de preguntas se utilizará para el entrenamiento del bot",
+    "label.file": "Archivo",
+    "label.file.incompatible.extension": "Archivo no válido. Sólo se aceptan archivos con extensión ",
+    "label.imageAvatar.incompatible.extension": "Archivo no válido. Sólo se aceptan imágenes y con formato ",
+    "label.delete-channel": "Borrar canal",
+    "agent.edit.success": "El agente fue editado correctamente",
+    "agent.create.success": "El agente fue creado correctamente",
+    "error.message.complete-form": "Complete correctamente el formulario"
 }
\ No newline at end of file