seccion 2

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

@@ -95,10 +95,11 @@ const fakeAgentData = {
     countryId: 1,
     timezone: 'GMT-5',
     avatar: '',
-    frequentQuestions : [
+    frequentQuestions: [
         {
             id: 1,
             filename: 'questions-opt.xlsx',
+            description: 'primer archivo',
             status: 'PS',
             user: '',
             uploadDate: ''
@@ -106,6 +107,7 @@ const fakeAgentData = {
         {
             id: 2,
             filename: 'questions-training.xlsx',
+            description: 'segundo archivo',
             status: 'PS',
             user: '',
             uploadDate: ''
@@ -113,6 +115,7 @@ const fakeAgentData = {
         {
             id: 3,
             filename: 'questions-brainstorming.xlsx',
+            description: 'tercero archivo',
             status: 'PS',
             user: '',
             uploadDate: ''
@@ -120,6 +123,7 @@ const fakeAgentData = {
         {
             id: 4,
             filename: 'questions-onu.xlsx',
+            description: 'cuarto archivo',
             status: 'PS',
             user: '',
             uploadDate: ''
@@ -127,12 +131,26 @@ const fakeAgentData = {
         {
             id: 5,
             filename: 'questions-byte.xlsx',
+            description: 'quinto archivo',
             status: 'PS',
             user: '',
             uploadDate: ''
         }
     ]
 };
+
+const fakeAgentData2 = {
+    id: 361,
+    name: 'BANCO DE CREDITO DEL PERU',
+    description: 'El mejor banco que te roba la plata con intereses',
+    version: '0.0.1',
+    status: 'Activo',
+    countryId: 1,
+    timezone: 'GMT-5',
+    avatar: '',
+    frequentQuestions: []
+};
+
 const channels = [
     {
         id: 101,
@@ -197,6 +215,18 @@ const channels = [
     }
 ];
 
+const fileOK = {
+    "uuid" : "6850b631-5cb1-4614-8f0e-e43441d7bd35",
+    "data" : {
+        "id" : 100,
+        "name" : "vacaciones-preguntas.xls",
+        "description" : "Preguntas Vacaciones",
+        "status" : "PS",
+        "user" : "",
+        "uploadDate" : ""
+    }
+};
+
 @Injectable()
 export class AgentFakeBackendInterceptor implements HttpInterceptor {
     intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
@@ -217,10 +247,12 @@ export class AgentFakeBackendInterceptor implements HttpInterceptor {
                     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.indexOf(basePath + '/file-upload') !== -1 && method === 'POST':
+                    return ok(fileOK);
+                case url.indexOf(basePath + '/') !== -1 && method === 'GET':
+                    return ok(fakeAgentData);
                 default:
                     // pass through any requests not handled above
                     return next.handle(request);

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

@@ -54,7 +54,7 @@ export class AgentComponent implements OnInit, IDirty {
   ) {
 
     this._backService.backAnnounced$.subscribe(data => {
-      this._router.navigate(['/config/agent']);
+      this._router.navigate(['/configuration/agent']);
     });
   }
 

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

@@ -40,5 +40,5 @@
 <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>
+        [disabled]="formGroup.invalid">{{'btn.accept' | translate}}</button>
 </mat-dialog-actions>
\ No newline at end of file

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

@@ -4,7 +4,17 @@ 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';
 
+export class FileUploadModel {
+  id: number;
+  filename: string;
+  status: string;
+  user: string;
+  uploadDate: string;
+  description: string;
+  
+}
 @Component({
   selector: 'byte-ca-file-upload-modal',
   templateUrl: './ca-file-upload-modal.component.html',
@@ -16,13 +26,16 @@ export class CaFileUploadModalComponent implements OnInit {
 
   accept = '.xls,.xlsx';
 
+  fileInfo = new FileUploadModel();
+
   constructor(
     private formBuilder: FormBuilder,
-    private agentService: AgentService
+    private agentService: AgentService,
+    public dialogRef: MatDialogRef<CaFileUploadModalComponent>
   ) {
     this.formGroup = this.formBuilder.group({
-      description: new FormControl({ value: "", disabled: false}),
-      file: new FormControl({value: '', disabled: false})
+      description: new FormControl({ value: "", disabled: false }),
+      file: new FormControl({ value: '', disabled: false })
     });
   }
 
@@ -73,9 +86,29 @@ export class CaFileUploadModalComponent implements OnInit {
       })
     ).subscribe((event: any) => {
       if (typeof (event) === 'object') {
-        console.log(event.body);
+        let info = event.body.data;
+        if (info) {
+          this.fileInfo.id = info.id;
+          this.fileInfo.filename = info.name;
+          this.fileInfo.status = info.status;
+          this.fileInfo.user = info.user;
+          this.fileInfo.uploadDate = info.uploadDate;
+        } else {
+          this.fileInfo.id = null;
+          this.fileInfo.filename = null;
+          this.fileInfo.status = null;
+          this.fileInfo.user = null;
+          this.fileInfo.uploadDate = null;
+
+          this.formGroup.controls.file.setValue(null);
+        }
       }
     });
   }
 
+  ok() {
+    this.fileInfo.description = this.formGroup.controls.description.value;
+    this.dialogRef.close(this.fileInfo);
+  }
+
 }

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

@@ -5,63 +5,64 @@
   </div>
 
   <div class="panel-viewer-body">
-    <div class="row pt-3 pb-4">
-      <div class="col-2"></div>
-      <div class="col-8 border-all">
+    <div class="row pb-4">
+      <div class="col-1"></div>
+      <div class="col-10">
         <div class="row pt-2">
-          <div class="col-12">
-            <button mat-mini-fab color="warn" (click)="addFile()" class="pull-right">
+          <div class="col-12 no-padding">
+            <button mat-mini-fab color="primary" (click)="addFile()" class="pull-right">
               <mat-icon>file_upload</mat-icon>
             </button>
-            <button mat-mini-fab color="primary" (click)="fileUpload.click()" class="pull-right">
-              <mat-icon>file_upload</mat-icon>
-            </button>
-            <input type="file" #fileUpload name="fileUpload" (change)="uploadFiles($event.target.files)"
-              accept="{{accept}}" style="display:none;">
           </div>
         </div>
 
         <div class="row pt-2">
-          <div class="col-12" style="padding-bottom:15px;">
-            <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+          <div class="col-12 table-container mat-elevation-z8" style="padding-bottom:15px;">
+            <table mat-table [dataSource]="dataSource" matSort>
               <!-- Load ID -->
               <ng-container matColumnDef="id">
-                <th mat-header-cell *matHeaderCellDef style="width: 15%;"> ID de carga </th>
-                <td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.id}} </td>
+                <th mat-header-cell *matHeaderCellDef  mat-sort-header style="width: 10%;"> ID de carga </th>
+                <td mat-cell *matCellDef="let element" style="width: 10%;"> {{element.id}} </td>
               </ng-container>
 
               <!-- Filename -->
               <ng-container matColumnDef="filename">
-                <th mat-header-cell *matHeaderCellDef style="width: 20%;"> Nombre del archivo </th>
-                <td mat-cell *matCellDef="let element" style="width: 20%;"> {{element.filename}} </td>
+                <th mat-header-cell *matHeaderCellDef  mat-sort-header style="width: 15%;"> Nombre del archivo </th>
+                <td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.filename}} </td>
+              </ng-container>
+
+              <!-- Description -->
+              <ng-container matColumnDef="description">
+                <th mat-header-cell *matHeaderCellDef  mat-sort-header style="width: 18%;"> Descripción </th>
+                <td mat-cell *matCellDef="let element" style="width: 18%;"> {{element.description}} </td>
               </ng-container>
 
               <!-- Status -->
               <ng-container matColumnDef="status">
-                <th mat-header-cell *matHeaderCellDef style="width: 15%;"> Estado </th>
-                <td mat-cell *matCellDef="let element" style="width: 15%;">
+                <th mat-header-cell *matHeaderCellDef  mat-sort-header style="width: 12%;"> Estado </th>
+                <td mat-cell *matCellDef="let element" style="width: 12%;">
                   <span [ngClass]="getClassStatus(element.status)">{{ getTextStatus(element.status) }}</span>
                 </td>
               </ng-container>
 
               <!-- User -->
               <ng-container matColumnDef="user">
-                <th mat-header-cell *matHeaderCellDef style="width: 15%;"> Usuario </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header style="width: 15%;"> Usuario </th>
                 <td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.user}} </td>
               </ng-container>
 
               <!-- Fecha de carga -->
               <ng-container matColumnDef="uploadDate">
-                <th mat-header-cell *matHeaderCellDef style="width: 15%;"> Fecha de carga </th>
-                <td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.uploadDate}} </td>
+                <th mat-header-cell *matHeaderCellDef style="width: 10%;"> Fecha de carga </th>
+                <td mat-cell *matCellDef="let element" style="width: 10%;"> {{element.uploadDate}} </td>
               </ng-container>
 
               <!-- Actions -->
               <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef style="width: 20%;"></th>
-                <td mat-cell *matCellDef="let element" style="width: 20%;" class="text-center">
+                <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)"
+                    <button type="button" class="btn btn-default btn-sm" (click)="onDeleteRecord(element, $index)"
                       [disabled]="!resourceAuth['delete']">
                       <i class="fa fa-trash"></i>
                       <span class="visible-md-inline visible-lg-inline visible-xl-inline">
@@ -71,13 +72,13 @@
                   </div>
                 </td>
               </ng-container>
-              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+              <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
               <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
             </table>
           </div>
         </div>
       </div>
-      <div class="col-2"></div>
+      <div class="col-1"></div>
     </div>
   </div>
 
@@ -88,7 +89,7 @@
           <i class="fa fa-chevron-left"></i>
           <span class="pl-1">{{'btn.previous' | translate}}</span>
         </button>
-        <button mat-stroked-button (click)="next()" class="pull-right" [disabled]="!dataSource.length">
+        <button mat-stroked-button (click)="next()" class="pull-right" [disabled]="!dataSource.data.length">
           <span class="pr-1">{{'btn.next' | translate}}</span>
           <i class="fa fa-chevron-right"></i>
         </button>

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

@@ -2,6 +2,23 @@ table {
     width: 100%;
 }
 
+.table-container {
+    height: 400px;
+    overflow: auto;
+}
+
+th.mat-sort-header-sorted {
+    color: black;
+  }
+
+.no-padding {
+    padding: 0px;
+}
+
+::ng-deep mat-form-field .mat-form-field-infix {
+    width: initial;
+  } 
+
 $fontcolor: #676a6c;
 .content {
     width: 100%;

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

-import { Component, OnInit, Input, ViewContainerRef, ElementRef, ViewChild } from '@angular/core';
+import { 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 } from '@angular/material';
+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';
@@ -10,7 +10,7 @@ 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 } from '../ca-file-upload-modal/ca-file-upload-modal.component';
+import { CaFileUploadModalComponent, FileUploadModel } from '../ca-file-upload-modal/ca-file-upload-modal.component';
 
 @Component({
   selector: 'byte-ca-frequent-questions',
@@ -31,14 +31,13 @@ export class CaFrequentQuestionsComponent implements OnInit {
 
   viewMode: boolean;
 
-  questions: any;
-
   public resourceAuth = new Object();
 
   accept = '.xls,.xlsx';
 
-  displayedColumns: string[] = ['id', 'filename', 'status', 'user', 'uploadDate', 'actions'];
-  dataSource = [];
+  displayedColumns: string[] = ['id', 'filename', 'description', 'status', 'user', 'uploadDate', 'actions'];
+  dataSource = new MatTableDataSource<FileUploadModel>();
+  @ViewChild(MatSort, { static: false }) sort: MatSort;
 
   mapStatus = {
     "LO": {
@@ -61,7 +60,8 @@ export class CaFrequentQuestionsComponent implements OnInit {
     private uploadService: UploadService,
     private formBuilder: FormBuilder,
     private _activatedRoute: ActivatedRoute,
-    private matDialog: MatDialog
+    private matDialog: MatDialog,
+    private changeDetectorRefs: ChangeDetectorRef
   ) {
 
     this.viewMode = this._activatedRoute.snapshot.data.mode === 'view';
@@ -85,7 +85,7 @@ export class CaFrequentQuestionsComponent implements OnInit {
   }
 
   buildForm(agentDetail: any) {
-    this.dataSource = agentDetail.frequentQuestions;
+    this.dataSource.data = agentDetail.frequentQuestions;
   }
 
   setDataForWizard(result: any) {
@@ -99,6 +99,10 @@ export class CaFrequentQuestionsComponent implements OnInit {
     */
   }
 
+  ngAfterViewInit() {
+    this.dataSource.sort = this.sort;
+  }
+
   getClassStatus(status) {
     return this.mapStatus[status].class;
   }
@@ -107,53 +111,6 @@ export class CaFrequentQuestionsComponent implements OnInit {
     return this.translate.instant(this.mapStatus[status].text);
   }
 
-  uploadFiles(event) {
-    for (const i in event) {
-      if (event[i] instanceof File) {
-        const reader = new FileReader();
-        reader.onload = () => {
-          //this.formGroup.controls['imageAvatar'].setValue(reader.result as string);
-        };
-        reader.readAsDataURL(event[i]);
-
-        this.files.push({
-          data: event[i],
-          state: 'in',
-          inProgress: false,
-          progress: 0,
-          canRetry: false
-        });
-      }
-    }
-  }
-
-  uploadFile(file) {
-    const formData = new FormData();
-    formData.append('file', file.data);
-
-    file.inProgress = true;
-
-    this.uploadService.upload(formData).pipe(
-      map(event => {
-        switch (event.type) {
-          case HttpEventType.UploadProgress:
-            file.progress = Math.round(event.loaded * 100 / event.total);
-            break;
-          case HttpEventType.Response:
-            return event;
-        }
-      }),
-      catchError((error: HttpErrorResponse) => {
-        file.inProgress = false;
-        return of(`${file.data.name} upload failed.`);
-      })
-    ).subscribe((event: any) => {
-      if (typeof (event) === 'object') {
-        console.log(event.body);
-      }
-    });
-  }
-
   addFile() {
     let dialog = this.matDialog.open(CaFileUploadModalComponent, {
       width: '500px'
@@ -161,8 +118,10 @@ export class CaFrequentQuestionsComponent implements OnInit {
 
     dialog.afterClosed().subscribe(result => {
       if (result) {
-        //this.agentChannels.push({ ...result });
-        //this.setStep(this.agentChannels.length - 1);
+        let fileAdded = { ...result };
+        let listTemp = this.dataSource.data;
+        listTemp.push(fileAdded);
+        this.dataSource.data = listTemp;
       }
     });
   }
@@ -173,8 +132,14 @@ export class CaFrequentQuestionsComponent implements OnInit {
     return success;
   }
 
+  onDeleteRecord(item, index) {
+    let listTemp = this.dataSource.data;
+    listTemp.splice(index, 1);
+    this.dataSource.data = listTemp;
+  }
+
   next() {
-    if (!this.dataSource.length) {
+    if (!this.dataSource.data.length) {
       return;
     }
 

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: -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;
+  //width: 220px;
+}
\ No newline at end of file