Mejoras visuales

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

@@ -5,6 +5,8 @@ import { of } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
 import { AgentService } from '../../../service/agent.service';
 import { MatDialogRef } from '@angular/material';
+import { NotificationService, NotificationType } from '@xdf/commons';
+import { TranslateService } from '@ngx-translate/core';
 
 export class FileUploadModel {
   id: number;
@@ -14,7 +16,7 @@ export class FileUploadModel {
   user: string;
   uploadDate: string;
   description: string;
-  
+
 }
 @Component({
   selector: 'byte-ca-file-upload-modal',
@@ -32,6 +34,8 @@ export class CaFileUploadModalComponent implements OnInit {
   constructor(
     private formBuilder: FormBuilder,
     private agentService: AgentService,
+    private _notificationService: NotificationService,
+    private _translateService: TranslateService,
     public dialogRef: MatDialogRef<CaFileUploadModalComponent>
   ) {
     this.formGroup = this.formBuilder.group({
@@ -90,20 +94,31 @@ export class CaFileUploadModalComponent implements OnInit {
         let info = event.body;
         this.fileInfo = new FileUploadModel();
         if (info) {
-          this.fileInfo.id = info.id;
-          this.fileInfo.uuid = info.uuid;
-          this.fileInfo.filename = info.fileName;
-          this.fileInfo.status = info.status;
-          this.fileInfo.user = info.user;
-          this.fileInfo.uploadDate = info.uploadDate;
-        } else {
-          this.fileInfo.id = null;
-          this.fileInfo.uuid = null;
-          this.fileInfo.filename = null;
-          this.fileInfo.status = null;
-          this.fileInfo.user = null;
-          this.fileInfo.uploadDate = null;
+          let status = info.fileValidationResult.status;
+
+          if ("OK" === status) {
+            this.fileInfo.id = info.id;
+            this.fileInfo.uuid = info.uuid;
+            this.fileInfo.filename = info.fileName;
+            this.fileInfo.status = info.status;
+            this.fileInfo.user = info.user;
+            this.fileInfo.uploadDate = info.uploadDate;
+
+          } else if ("INCOMPATIBLE_EXTENSION" === status) {
+            this.formGroup.controls.file.setValue(null);
+            let message = "label.file.incompatible.extension";
+            this._notificationService.showMessage(this._translateService.instant(message) + "[" + this.accept + "]", null, NotificationType.error);
 
+          } else if ("CONTENT_ERROR" === status) {
+            this.formGroup.controls.file.setValue(null);
+            console.log(info.fileValidationResult);
+
+          } else if ("HEADER_ERROR" === status) {
+            this.formGroup.controls.file.setValue(null);
+            console.log(info.fileValidationResult);
+          }
+
+        } else {
           this.formGroup.controls.file.setValue(null);
         }
       }

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

 <div class="panel-viewer-wrapper">
   <div class="panel-viewer-title">
-    <i class="fa fa-info-circle"></i>
-    {{'label.frequent-questions.title' | translate}}
+    <mat-icon>dns</mat-icon>
+    {{'label.questions.title' | translate}}
   </div>
 
   <div class="panel-viewer-body">
@@ -10,57 +10,60 @@
       <div class="col-10">
         <div class="row pt-2">
           <div class="col-12 no-padding">
-            <button mat-mini-fab color="primary" (click)="addFile()" class="pull-right">
-              <mat-icon>file_upload</mat-icon>
+            <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">
+                {{'btn.new.file' | translate}}
+              </span>
             </button>
           </div>
         </div>
 
         <div class="row pt-2">
-          <div class="col-12 table-container mat-elevation-z8" style="padding-bottom:15px;">
+          <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 style="width: 10%;"> ID de carga </th>
-                <td mat-cell *matCellDef="let element" style="width: 10%;"> {{element.id}} </td>
+                <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 style="width: 15%;"> Nombre del archivo </th>
-                <td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.filename}} </td>
+                <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 style="width: 18%;"> Descripción </th>
-                <td mat-cell *matCellDef="let element" style="width: 18%;"> {{element.description}} </td>
+                <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 style="width: 12%;"> Estado </th>
-                <td mat-cell *matCellDef="let element" style="width: 12%;">
+                <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 style="width: 15%;"> Usuario </th>
-                <td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.user}} </td>
+                <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 style="width: 10%;"> Fecha de carga </th>
-                <td mat-cell *matCellDef="let element" style="width: 10%;"> {{element.uploadDate}} </td>
+                <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 style="width: 20%;"></th>
-                <td mat-cell *matCellDef="let element; let $index = index" style="width: 20%;" class="text-center">
+                <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']">

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

@@ -218,4 +218,36 @@ tr.inner-element-row-expanded td {
 .d-t-lg-block {
     display: table-cell !important;
 }
+}
+
+.p-b-15 {
+    padding-bottom: 15px;
+}
+
+.w-id {
+    width: 10%;
+}
+
+.w-filename {
+    width: 15%;
+}
+
+.w-description {
+    width: 18%;
+}
+
+.w-status {
+    width: 12%;
+}
+
+.w-user {
+    width: 15%;
+}
+
+.w-uploadDate {
+    width: 10%;
+}
+
+.w-actions {
+    width: 20%;
 }
\ 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 { Component, OnInit, Input, ViewContainerRef, ViewChild } from '@angular/core';
 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';
 
 @Component({
@@ -41,12 +35,12 @@ export class CaFrequentQuestionsComponent implements OnInit {
 
   mapStatus = {
     "LO": {
-      "text": "label.status.loaded",
-      "class": "label label-primary"
+      "class": "label label-primary",
+      "text": "label.status.loaded"      
     },
     "PS": {
-      "text": "label.status.pending",
-      "class": "label label-warning"
+      "class": "label label-warning",
+      "text": "label.status.pending"      
     }
   };
 
@@ -57,11 +51,8 @@ export class CaFrequentQuestionsComponent implements OnInit {
     protected vcRef: ViewContainerRef,
     protected authorizationService: AuthorizationService,
     private translate: TranslateService,
-    private uploadService: UploadService,
-    private formBuilder: FormBuilder,
     private _activatedRoute: ActivatedRoute,
-    private matDialog: MatDialog,
-    private changeDetectorRefs: ChangeDetectorRef
+    private matDialog: MatDialog
   ) {
 
     this.viewMode = this._activatedRoute.snapshot.data.mode === 'view';

projects/bytebot-html/src/app/modules/agent/view/components/ca-general-information/ca-general-information.component.ts

@@ -4,6 +4,8 @@ import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'
 import { MatStepper } from '@angular/material';
 import { ActivatedRoute } from '@angular/router';
 import { animate, trigger, state, transition, style } from '@angular/animations';
+import { NotificationService, NotificationType } from '@xdf/commons';
+import { TranslateService } from '@ngx-translate/core';
 
 export const FILE_TYPE = {
   image: /image.*/,
@@ -51,9 +53,14 @@ export class CaGeneralInformationComponent implements OnInit {
     }
   ];
 
+  acceptedImageTypes = ['image/png', 'image/jpeg', 'image/gif'];
+  acceptedTypes = "PNG, JPEG, GIF";
+
   constructor(
     private formBuilder: FormBuilder,
-    private _activatedRoute: ActivatedRoute
+    private _activatedRoute: ActivatedRoute,
+    private _notificationService: NotificationService,
+    private _translateService: TranslateService
   ) {
 
     this.viewMode = this._activatedRoute.snapshot.data.mode === 'view';
@@ -118,11 +125,19 @@ export class CaGeneralInformationComponent implements OnInit {
   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]);
+        let eventTemp = event[i];
+
+        if (this.acceptedImageTypes.includes(eventTemp.type)) {
+
+          const reader = new FileReader();
+          reader.onload = () => {
+            this.formGroup.controls['imageAvatar'].setValue(reader.result as string);
+          };
+          reader.readAsDataURL(event[i]);
+        } else {
+          let message = "label.imageAvatar.incompatible.extension";
+          this._notificationService.showMessage(this._translateService.instant(message) + "[" + this.acceptedTypes + "]", null, NotificationType.error);
+        }
       }
     }
   }

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

 {
     "home.subtitle": "Welcome to XDF Project",
-    "home.comments": "It is an application skeleton for a typical web app. You can use it to quickly bootstrap your webapp projects and dev environment."
+    "home.comments": "It is an application skeleton for a typical web app. You can use it to quickly bootstrap your webapp projects and dev environment.",
+    "btn.previous": "Back",
+    "label.agent": "Agents",
+    "agent_avatar": "Avatar",
+    "agent_code": "ID",
+    "agent_name": "Name",
+    "agent_version": "Version",
+    "agent_status": "Status",
+    "agent_country": "Country",
+    "agent_timezone": "Timezone",
+    "btn.file.upload" : "Upload",
+    "btn.accept": "Accept",
+    "label.deployment-channels.title": "Deployment channels",
+    "label.deployment-channels.description": "Configure the messaging channels that will be used by the agent",
+    "label.channels": "Configured channels",
+    "label.active": "Active",
+    "label.inactive": "Inactive",
+    "label.name": "Name",
+    "label.deployment-channels.configuration": "Deployment channels",
+    "label.deployment-channels.configuration.description": "Select a deployment channel",
+    "label.status.pending" : "Pending",
+    "label.status.loaded" : "Loaded",
+    "label.status.off" : "Disabled",
+    "label.created": "Created",
+    "label.deployed": "Deployed",
+    "label.general-information.title" : "General information",
+    "label.general-information.description" : "Register the basic information for the agent",
+    "label.avatar" : "Avatar",
+    "label.description" : "Description",
+    "label.version" : "Version",
+    "label.country" : "Country",
+    "label.timezone" : "Timezone",
+    "label.language" : "Language",
+    "label.type" : "Agent type",
+    "label.questions.title" : "Frequent questions",
+    "label.questions.description" : "Upload files whose content will be used as training for the agent",
+    "btn.new.file" : "New file",
+    "label.file.id" : "ID",
+    "label.file.name" : "Name",
+    "label.file.description" : "Description",
+    "label.file.status" : "Status",
+    "label.file.user" : "User",
+    "label.file.upload.date" : "Loaded date",
+    "label.file-upload.title" : "Questions file",
+    "label.file-upload.description" : "The question file will be used as material training",
+    "label.file" : "File",
+    "label.file.incompatible.extension" : "Invalid file. Just accept the following file extensions ",
+    "label.imageAvatar.incompatible.extension" : "Invalid file. Just accept the followeing image types "
 }
\ No newline at end of file

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

@@ -13,7 +13,7 @@
     "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 cuáles interactuará el agente",
+    "label.deployment-channels.description": "Configure los canales de mensajería por los cuales interactuará el agente",
     "label.channels": "Canales configurados",
     "label.active": "Activo",
     "label.inactive": "Inactivo",
@@ -24,5 +24,28 @@
     "label.status.loaded" : "Cargado",
     "label.status.off" : "En Baja",
     "label.created": "Creado",
-    "label.deployed": "Desplegado"
+    "label.deployed": "Desplegado",
+    "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 "
 }
\ No newline at end of file