Skip to content

A
aeropuertov2-front-framework
Commit 2e214061 authored by huriarte's avatar huriarte
Browse files
Options

seccion 2

parent 4871058f
Hide whitespace changes
Inline Side-by-side
Showing with 157 additions and 94 deletions
projects/bytebot-html/src/app/interceptors/agent-fake-backend.interceptor.ts
View file @ 2e214061
......@@ -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
View file @ 2e214061
......@@ -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
View file @ 2e214061
......@@ -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
View file @ 2e214061
......@@ -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
View file @ 2e214061
......@@ -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
View file @ 2e214061
......@@ -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
View file @ 2e214061
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
View file @ 2e214061
......@@ -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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment