Skip to content

A
aeropuertov2-front-framework
Commit 88c28f10 authored by Sebastian Chicoma's avatar Sebastian Chicoma
Browse files
Options

Tercera sección del wizard

parent 388cbe14
Hide whitespace changes
Inline Side-by-side
Showing with 462 additions and 15 deletions
projects/bytebot-html/src/app/modules/agent/agent-routing.module.ts
View file @ 88c28f10
......@@ -6,7 +6,7 @@ import { AgentComponent } from './view/agent/agent.component';
import { AgentDetailComponent } from './view/agent-detail/agent-detail.component';
import { AgentDataForWizardResolver } from './resolver/agent-data-wizard.resolver';
import { AgentDetailResolver } from './resolver/agent-detail.resolver';
import { AgentListComponent } from './view/agent-list/agent.component';
import { AgentListComponent } from './view/agent-list/agent-list.component';
const routes: Routes = [
......
projects/bytebot-html/src/app/modules/agent/agent.module.ts
View file @ 88c28f10
......@@ -16,13 +16,15 @@ import { AgentDetailComponent } from './view/agent-detail/agent-detail.component
import { EsStepsProcessorsModalComponent } from './view/components/es-steps-processors-modal/es-steps-processors-modal.component';
import { DynamicTranslatePipe } from './pipe/dynamic-translate.pipe';
import { CaGeneralInformationComponent } from './view/components/ca-general-information/ca-general-information.component';
import { AgentListComponent } from './view/agent-list/agent.component';
import { CaDeploymentChannelsComponent } from './view/components/ca-deployment-channels/ca-deployment-channels.component';
import { AgentListComponent } from './view/agent-list/agent-list.component';
import { CaDeploymentChannelsModalComponent } from './view/components/ca-deployment-channels-modal/ca-deployment-channels-modal.component';
@NgModule({
entryComponents: [
EsStepsProcessorsModalComponent
EsStepsProcessorsModalComponent,
CaDeploymentChannelsModalComponent
],
declarations: [
AgentComponent,
......@@ -31,7 +33,9 @@ import { CaDeploymentChannelsComponent } from './view/components/ca-deployment-c
EsStepsProcessorsModalComponent,
DynamicTranslatePipe,
CaGeneralInformationComponent,
CaDeploymentChannelsComponent],
CaDeploymentChannelsComponent,
CaDeploymentChannelsModalComponent
],
imports: [
FormsModule,
ReactiveFormsModule,
......
projects/bytebot-html/src/app/modules/agent/pipe/dynamic-translate.pipe.ts
View file @ 88c28f10
......@@ -12,9 +12,15 @@ export class DynamicTranslatePipe implements PipeTransform {
transform(value: any, ...args: any[]): any {
let lang = this.translateService.currentLang ? this.translateService.currentLang : this.translateService.defaultLang;
let traductions = JSON.parse(args[0].param);
if (traductions[lang]) {
let traductions;
if (typeof args[0].param === 'string') {
traductions = JSON.parse(args[0].param);
} else {
traductions = args[0].param;
}
if (traductions && traductions[lang]) {
return traductions[lang];
} else {
return value;
......
projects/bytebot-html/src/app/modules/agent/view/agent-list/agent.component.spec.ts → projects/bytebot-html/src/app/modules/agent/view/agent-list/agent-list.component.spec.ts
View file @ 88c28f10
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AgentListComponent } from './agent.component';
import { AgentListComponent } from './agent-list.component';
describe('AgentComponent', () => {
let component: AgentListComponent;
......
projects/bytebot-html/src/app/modules/agent/view/agent-list/agent.component.ts → projects/bytebot-html/src/app/modules/agent/view/agent-list/agent-list.component.ts
View file @ 88c28f10
......@@ -140,9 +140,9 @@ const fieldFilters = [
];
@Component({
selector: 'byte-agent',
templateUrl: './agent.component.html',
styleUrls: ['./agent.component.scss']
selector: 'byte-agent-list',
templateUrl: './agent-list.component.html',
styleUrls: ['./agent-list.component.scss']
})
export class AgentListComponent implements OnInit {
......
projects/bytebot-html/src/app/modules/agent/view/agent/agent.component.html
View file @ 88c28f10
......@@ -59,7 +59,7 @@
</ng-template>
-->
<ng-template matStepperIcon="deployment-channels">
<mat-icon>mediation</mat-icon>
<mat-icon>chat</mat-icon>
</ng-template>
<!--
<ng-template matStepperIcon="summary">
......
projects/bytebot-html/src/app/modules/agent/view/agent/agent.component.ts
View file @ 88c28f10
......@@ -11,6 +11,7 @@ import { NavigationService } from '@xdf/layouts';
import { IDirty } from '@xdf/gallery';
//import { ExternalSystemService } from '../../service/external-system.service';
import { first } from 'rxjs/operators';
import { MatStepper } from '@angular/material';
@Component({
......@@ -27,6 +28,8 @@ export class AgentComponent implements OnInit {
@ViewChild(CaGeneralInformationComponent, { static: true })
generalInformationComponent: CaGeneralInformationComponent;
@ViewChild('stepper', { static: true }) stepper: MatStepper;
externalSystemDetail: any;
isLinear = true;
......@@ -66,6 +69,8 @@ export class AgentComponent implements OnInit {
ngOnInit() {
this.stepper.selectedIndex = 0;
const authList = this._activatedRoute.snapshot.paramMap['authorization'];
this.resourceAuth = new Object();
......
projects/bytebot-html/src/app/modules/agent/view/components/ca-deployment-channels-modal/ca-deployment-channels-modal.component.html 0 → 100644
View file @ 88c28f10
<div class="title_section divider">
<div class="hidden-xs" *ngIf="applicationSettings?.logoBase64">
<img class="logo_header_popup"
src="data:image/{{applicationSettings.tipo}};base64,{{applicationSettings.logoBase64}}" />
</div>
<div class="title_header_popup">
<h2 mat-dialog-title>
<span> {{'label.deployment-channels.configuration' | translate}} </span>
</h2>
</div>
</div>
<mat-dialog-content>
<h4>
{{'label.deployment-channels.configuration.description' | translate}}
<!-- -->
</h4>
<div>
<mat-card class="channel-card" *ngFor="let channel of channels" (click)="selectChannel(channel)"
[ngClass]="{ 'active': selectedChannel === channel}">
<mat-card-header>
<img [src]="channel.channelImage" mat-card-avatar>
<mat-card-title>{{channel.channelName}}</mat-card-title>
</mat-card-header>
</mat-card>
</div>
</mat-dialog-content>
<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>
</mat-dialog-actions>
\ No newline at end of file
projects/bytebot-html/src/app/modules/agent/view/components/ca-deployment-channels-modal/ca-deployment-channels-modal.component.scss 0 → 100644
View file @ 88c28f10
.icon {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 10px;
}
::ng-deep .mat-card-header .mat-card-title {
margin-bottom: 12px;
margin-top: 10px;
}
.channel-card {
cursor: pointer;
margin-bottom: 8px;
transition: border-left 0.125s ease-in;
border-left: solid 0px #3f51b5;
&.active {
border-left: solid 5px #3F51B5 !important;
}
}
projects/bytebot-html/src/app/modules/agent/view/components/ca-deployment-channels-modal/ca-deployment-channels-modal.component.spec.ts 0 → 100644
View file @ 88c28f10
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CaDeploymentChannelsModalComponent } from './ca-deployment-channels-modal.component';
describe('CaDeploymentChannelsModalComponent', () => {
let component: CaDeploymentChannelsModalComponent;
let fixture: ComponentFixture<CaDeploymentChannelsModalComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CaDeploymentChannelsModalComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CaDeploymentChannelsModalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
projects/bytebot-html/src/app/modules/agent/view/components/ca-deployment-channels-modal/ca-deployment-channels-modal.component.ts 0 → 100644
View file @ 88c28f10
import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
@Component({
selector: 'byte-ca-deployment-channels-modal',
templateUrl: './ca-deployment-channels-modal.component.html',
styleUrls: ['./ca-deployment-channels-modal.component.scss']
})
export class CaDeploymentChannelsModalComponent implements OnInit {
channels: Array<any>;
selectedChannel: any;
constructor(
public dialogRef: MatDialogRef<CaDeploymentChannelsModalComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
this.channels = data.channels;
}
ngOnInit() {
}
ok() {
this.dialogRef.close(this.selectedChannel);
}
selectChannel(channel: any) {
this.selectedChannel = channel;
}
}
projects/bytebot-html/src/app/modules/agent/view/components/ca-deployment-channels/ca-deployment-channels.component.html
View file @ 88c28f10
<p>ca-deployment-channels works!</p>
<div class="panel-viewer-wrapper">
<div class="panel-viewer-title">
<mat-icon>chat</mat-icon>
{{'label.deployment-channels.title' | translate}}
</div>
<div class="panel-viewer-body">
<!-- <div class="row pb-2 text-center">
<div class="col-12">
<h1>{{'label.deployment-channels' | translate}}</h1>
</div>
</div> -->
<div class="row pb-2 justify-content-center">
<div class="col-md-6 col-sm-12">
<!-- <div class="alert alert-warning" *ngIf="!viewMode">
<i class="fa fa-warning"></i>&nbsp;&nbsp;<span
[innerHTML]="'label.summary.warning' | translate"></span>
</div> -->
<h4 class="mt-3">
<button class="pull-right" mat-icon-button (click)="addChannel()">
<i class="fa fa-plus"></i>
</button>
<b>{{'label.channels' | translate}}</b>
</h4>
<mat-accordion>
<mat-expansion-panel *ngFor="let channel of agentChannels; 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">
<div>
<span style="margin-right: 8px;">{{ channel.channelName }}</span>
<small class="text-muted">{{ channel.name }}</small>
</div>
</mat-panel-title>
<mat-panel-description>
<label class="label label-success"
*ngIf="channel.active">{{'label.active' | translate}}</label>
<label class="label label-default"
*ngIf="!channel.active">{{'label.inactive' | translate}}</label>
</mat-panel-description>
</mat-expansion-panel-header>
<div>
<form role="form" novalidate (ngSubmit)="ok()" #myForm="ngForm" autocomplete="off">
<div class="row">
<div class="col-6">
<mat-form-field class="amd-form-control">
<mat-label>{{'label.name' | translate}}</mat-label>
<input matInput [attr.maxlength]="80" [type]="text" required="true"
[(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>
</div>
</div>
<div class="row" *ngFor="let field of channel.fields">
<div class="col-12">
<mat-form-field class="amd-form-control">
<mat-label>{{field.label | dynamicTranslate: {param: field.traductions } }}:
</mat-label>
<!--
[pattern]="field.regex"
-->
<input matInput [attr.maxlength]="field.maxlength" [ngModel]="field.value"
[ngModelOptions]="{standalone: true}"
[type]="(field.type ? field.type : 'text')" [required]="field.required">
</mat-form-field>
</div>
</div>
</form>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</div>
<div class="footer-bar">
<div class="row">
<div class="col-12">
<button mat-stroked-button matStepperPrevious class="pull-left">
<i class="fa fa-chevron-left"></i>
<span class="pl-1">{{'btn.previous' | translate}}</span>
</button>
<button mat-stroked-button color="primary" (click)="next()" class="pull-right" *ngIf="!viewMode">
<span class="pr-1">{{'btn.save' | translate}}</span>
<i class="fa fa-chevron-right"></i>
</button>
<button mat-stroked-button (click)="exit()" class="pull-right" *ngIf="viewMode">
<span class="pr-1">{{'application.options.exit' | translate}}</span>
<i class="fa fa-logout"></i>
</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
projects/bytebot-html/src/app/modules/agent/view/components/ca-deployment-channels/ca-deployment-channels.component.scss
View file @ 88c28f10
.icon {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 10px;
}
::ng-deep .right-aligned-header > .mat-content {
justify-content: space-between;
}
::ng-deep .mat-content > mat-panel-title {
flex: 0 0 auto;
}
::ng-deep .mat-content > mat-panel-description {
flex: 0 0 auto;
}
::ng-deep .mat-expansion-indicator {
margin-bottom: 10px;
}
::ng-deep mat-slide-toggle {
margin-top: 14px;
}
projects/bytebot-html/src/app/modules/agent/view/components/ca-deployment-channels/ca-deployment-channels.component.ts
View file @ 88c28f10
import { Component, OnInit, Input } from '@angular/core';
import { MatStepper } from '@angular/material';
import { MatStepper, MatDialog } from '@angular/material';
import { CaDeploymentChannelsModalComponent } from '../ca-deployment-channels-modal/ca-deployment-channels-modal.component';
@Component({
selector: 'byte-ca-deployment-channels',
......@@ -10,9 +11,178 @@ export class CaDeploymentChannelsComponent implements OnInit {
@Input() stepper: MatStepper;
constructor() { }
agentChannels: Array<any> = new Array<any>();
channels: Array<any> = new Array<any>();
step = -1;
constructor(
private matDialog: MatDialog
) { }
ngOnInit() {
this.channels = [
{
channelId: 101,
channelName: 'Facebook Messenger',
channelImage: 'https://img.icons8.com/color/452/facebook-messenger.png',
fields: [
{
name: 'webhook',
label: 'webhook',
maxlength: 200,
required: true,
traductions: { 'es': 'URL de devolución de llamada', 'en': 'Webhook' }
},
{
name: 'verification-token',
label: 'verification-token',
maxlength: 80,
required: true,
traductions: { 'es': 'Token de verificación', 'en': 'Verification token' }
},
{
name: 'access-token',
label: 'access-token',
maxlength: 80,
required: true,
traductions: { 'es': 'Token de acceso', 'en': 'Access token' }
}
]
},
{
channelId: 103,
channelName: 'WhatsApp',
channelImage: 'https://img.icons8.com/color/452/whatsapp.png',
name: 'Canal de wasap',
fields: [
{
name: 'account-identifier',
label: 'account-identifier',
maxlength: 80,
type: 'text',
required: true,
traductions: { 'es': 'Identificador de cuenta', 'en': 'Account identifier' }
},
{
name: 'authentication-token',
label: 'authentication-token',
maxlength: 80,
type: 'text',
required: true,
traductions: { 'es': 'Token de autenticación', 'en': 'Authentication token' }
},
{
name: 'twillio-number',
label: 'account-identifier',
type: 'number',
required: true,
traductions: { 'es': 'Número de Twillio', 'en': 'Twillio number' }
}
]
}
]
this.agentChannels = [
{
id: 1,
channelId: 101,
channelName: 'Facebook Messenger',
channelImage: 'https://img.icons8.com/color/452/facebook-messenger.png',
name: 'Canal de mesenyer',
active: false,
fields: [
{
id: 306,
name: 'webhook',
label: 'webhook',
value: 'https://developers.facebook.com/docs/messenger-platform/webhook/',
maxlength: 200,
required: true,
traductions: { 'es': 'URL de devolución de llamada', 'en': 'Webhook' }
},
{
id: 305,
name: 'verification-token',
label: 'verification-token',
value: 'a50a01069bd00e0e269ff639d9ca7def',
maxlength: 80,
required: true,
traductions: { 'es': 'Token de verificación', 'en': 'Verification token' }
},
{
id: 304,
name: 'access-token',
label: 'access-token',
value: 'bd01-0e0e-269f-f639',
maxlength: 80,
required: true,
traductions: { 'es': 'Token de acceso', 'en': 'Access token' }
}
]
},
{
id: 3,
channelId: 103,
channelName: 'WhatsApp',
channelImage: 'https://img.icons8.com/color/452/whatsapp.png',
name: 'Canal de wasap',
active: true,
fields: [
{
id: 303,
name: 'account-identifier',
label: 'account-identifier',
value: 'my-msn-account',
maxlength: 80,
type: 'text',
required: true,
traductions: { 'es': 'Identificador de cuenta', 'en': 'Account identifier' }
},
{
id: 302,
name: 'authentication-token',
label: 'authentication-token',
value: 'a50a01069bd00e0e269ff639d9ca7def',
maxlength: 80,
type: 'text',
required: true,
traductions: { 'es': 'Token de autenticación', 'en': 'Authentication token' }
},
{
id: 301,
name: 'twillio-number',
label: 'account-identifier',
value: '957355738',
type: 'number',
required: true,
traductions: { 'es': 'Número de Twillio', 'en': 'Twillio number' }
}
]
}
]
}
addChannel() {
let dialog = this.matDialog.open(CaDeploymentChannelsModalComponent, {
width: '500px',
data: {
message: '',
channels: this.channels
}
});
dialog.afterClosed().subscribe(result => {
if (result) {
this.agentChannels.push({ ...result });
this.setStep(this.agentChannels.length - 1);
}
});
}
setStep(step) {
this.step = step;
}
}
projects/bytebot-html/src/assets/i18n/es.json
View file @ 88c28f10
{
"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",
"btn.accept": "Aceptar",
"etl_avatar": "Avatar",
"etl_code": "ID",
"etl_name": "Nombre",
"etl_version": "Versión",
"etl_status": "Estado",
"etl_country": "País",
"etl_timezone": "Zona horaria"
"etl_timezone": "Zona horaria",
"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.channels": "Canales configurados",
"label.active": "Activo",
"label.inactive": "Inactivo",
"label.name": "Nombre",
"label.deployment-channels.configuration": "Canales de despliegue",
"label.deployment-channels.configuration.description": "Seleccione un canal de despliegue"
}
\ 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