Skip to content

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

Se integró la web con los nuevos servicios para: países, parámetros y canales.

parent b6cf1368
Hide whitespace changes
Inline Side-by-side
Showing with 152 additions and 162 deletions
projects/bytebot-html/src/app/interceptors/agent-fake-backend.interceptor.ts
View file @ f420857c
......@@ -87,6 +87,70 @@ const countries: Array<any> = [
}
];
const channels = [
{
id: 101,
name: 'Facebook Messenger',
image: 'https://img.icons8.com/color/452/facebook-messenger.png',
parameters: [
{
name: 'webhook',
label: 'webhook',
maxlength: 200,
type: 'text',
required: true,
traductions: { "es": "URL de devolución de llamada", "en": "Webhook" }
},
{
name: 'verification-token',
label: 'verification-token',
maxlength: 80,
type: 'text',
required: true,
traductions: { "es": "Token de verificación", "en": "Verification token" }
},
{
name: 'access-token',
label: 'access-token',
maxlength: 80,
type: 'text',
required: true,
traductions: { "es": "Token de acceso", "en": "Access token" }
}
]
},
{
id: 103,
name: 'WhatsApp',
image: 'https://img.icons8.com/color/452/whatsapp.png',
parameters: [
{
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: 'twillio-number',
type: 'number',
required: true,
traductions: { "es": "Número de Twillio", "en": "Twillio number" }
}
]
}
];
@Injectable()
export class AgentFakeBackendInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
......@@ -101,14 +165,16 @@ export class AgentFakeBackendInterceptor implements HttpInterceptor {
function handleRoute() {
switch (true) {
//case url.endsWith(basePath + '/page') && method === 'POST':
// return pagination(body);
case url.endsWith(basePath + '/page') && method === 'POST':
return pagination(body);
case url.indexOf(basePath + '/connection/data') !== -1 && method === 'GET ':
return ok({});
// case url.indexOf(basePath + '/country') !== -1 && method === 'GET':
// return ok(countries);
// case url.indexOf(basePath + '/') !== -1 && method === 'GET':
// return ok(data);
case url.indexOf(basePath + '/countries') !== -1 && method === 'GET':
return ok(countries);
case url.indexOf(basePath + '/') !== -1 && method === 'GET':
return ok(data);
case url.indexOf(basePath + '/channels') !== -1 && method === 'GET':
return ok(channels);
default:
// pass through any requests not handled above
return next.handle(request);
......
projects/bytebot-html/src/app/modules/agent/pipe/dynamic-translate.pipe.ts
View file @ f420857c
......@@ -14,10 +14,13 @@ export class DynamicTranslatePipe implements PipeTransform {
let lang = this.translateService.currentLang ? this.translateService.currentLang : this.translateService.defaultLang;
let traductions;
if (typeof args[0].param === 'string') {
traductions = JSON.parse(args[0].param);
} else {
traductions = args[0].param;
if (args[0].param) {
if (typeof args[0].param === 'string') {
traductions = JSON.parse(args[0].param);
} else {
traductions = args[0].param;
}
}
if (traductions && traductions[lang]) {
......
projects/bytebot-html/src/app/modules/agent/service/agent.service.ts
View file @ f420857c
......@@ -29,4 +29,8 @@ export class AgentService extends DynaDataService {
return this.httpClient.get(this.serviceURL + '/countries');
}
getChannelDatForWizard() {
return this.httpClient.get(this.serviceURL + '/channels');
}
}
projects/bytebot-html/src/app/modules/agent/view/agent/agent.component.ts
View file @ f420857c
......@@ -13,6 +13,7 @@ import { IDirty } from '@xdf/gallery';
import { first } from 'rxjs/operators';
import { CaFrequentQuestionsComponent } from '../components/ca-frequent-questions/ca-frequent-questions.component';
import { MatStepper } from '@angular/material';
import { CaDeploymentChannelsComponent } from '../components/ca-deployment-channels/ca-deployment-channels.component';
@Component({
......@@ -31,7 +32,10 @@ export class AgentComponent implements OnInit, IDirty {
@ViewChild(CaFrequentQuestionsComponent, { static: true })
frequentQuestionsComponent: CaFrequentQuestionsComponent;
@ViewChild(CaDeploymentChannelsComponent, { static: true })
deploymentChannelsComponent: CaDeploymentChannelsComponent;
@ViewChild('stepper', { static: true }) stepper: MatStepper;
agentDetail: any;
......@@ -105,8 +109,7 @@ export class AgentComponent implements OnInit, IDirty {
this.generalInformationComponent.buildForm(this.agentDetail);
this.frequentQuestionsComponent.buildForm(this.agentDetail);
//this.stepsComponent.buildForm(this.agentDetail, this.resourceAuth);
//this.entitiesComponent.buildForm(this.agentDetail);
this.deploymentChannelsComponent.buildForm(this.agentDetail);
//this.summaryComponent.buildForm(this.agentDetail);
}
......
projects/bytebot-html/src/app/modules/agent/view/components/ca-deployment-channels-modal/ca-deployment-channels-modal.component.html
View file @ f420857c
......@@ -20,8 +20,8 @@
<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>
<img [src]="channel.image" mat-card-avatar>
<mat-card-title>{{channel.name}}</mat-card-title>
</mat-card-header>
</mat-card>
</div>
......
projects/bytebot-html/src/app/modules/agent/view/components/ca-deployment-channels/ca-deployment-channels.component.html
View file @ f420857c
......@@ -29,7 +29,7 @@
</h4>
<mat-accordion>
<mat-expansion-panel *ngFor="let channel of agentChannels; let i = index" [expanded]="step === i"
<mat-expansion-panel *ngFor="let channel of deploymentChannels; let i = index" [expanded]="step === i"
(opened)="setStep(i)">
<mat-expansion-panel-header class="right-aligned-header" [collapsedHeight]="'60px'">
<mat-panel-title>
......@@ -53,7 +53,7 @@
<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"
<input matInput maxlength="80" [type]="text" required="true"
[(ngModel)]="channel.name" [ngModelOptions]="{standalone: true}">
</mat-form-field>
</div>
......@@ -64,7 +64,7 @@
</mat-slide-toggle>
</div>
</div>
<div class="row" *ngFor="let field of channel.fields">
<div class="row" *ngFor="let field of channel.parameters">
<div class="col-12">
<mat-form-field class="amd-form-control">
<mat-label>{{field.label | dynamicTranslate: {param: field.traductions } }}:
......@@ -72,7 +72,7 @@
<!--
[pattern]="field.regex"
-->
<input matInput [attr.maxlength]="field.maxlength" [ngModel]="field.value"
<input matInput [maxlength]="field.maxlength" [ngModel]="field.value"
[ngModelOptions]="{standalone: true}"
[type]="(field.type ? field.type : 'text')" [required]="field.required">
</mat-form-field>
......
projects/bytebot-html/src/app/modules/agent/view/components/ca-deployment-channels/ca-deployment-channels.component.ts
View file @ f420857c
import { Component, OnInit, Input } from '@angular/core';
import { MatStepper, MatDialog } from '@angular/material';
import { CaDeploymentChannelsModalComponent } from '../ca-deployment-channels-modal/ca-deployment-channels-modal.component';
import { AgentService } from '../../../service/agent.service';
import { first } from 'rxjs/operators';
@Component({
selector: 'byte-ca-deployment-channels',
......@@ -11,157 +13,63 @@ export class CaDeploymentChannelsComponent implements OnInit {
@Input() stepper: MatStepper;
agentChannels: Array<any> = new Array<any>();
channels: Array<any> = new Array<any>();
deploymentChannels: Array<any> = new Array<any>();
channels: Array<any>;
step = -1;
constructor(
private agentService: AgentService,
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.agentService.getChannelDatForWizard().pipe(first()).subscribe((result: any) => {
if (result) {
this.channels = result;
} else {
this.channels = [];
}
]
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' }
this.buildList();
});
}
buildForm(agentDetail: any) {
this.deploymentChannels = agentDetail.deploymentChannels;
this.buildList();
}
buildList() {
if (this.channels && this.deploymentChannels) {
for (let deploymentChannel of this.deploymentChannels) {
for (let channel of this.channels) {
if (channel.id === deploymentChannel.channelId) {
deploymentChannel.channelName = channel.name;
deploymentChannel.channelImage = channel.image;
for (let parameter of deploymentChannel.parameters) {
for (let field of channel.parameters) {
if (parameter.channelParamName === field.name) {
parameter.label = field.label;
parameter.type = field.type;
parameter.required = field.required;
parameter.traductions = field.traductions;
parameter.maxlength = field.maxlength;
break;
}
}
}
break;
}
]
}
}
]
}
}
addChannel() {
......@@ -175,8 +83,14 @@ export class CaDeploymentChannelsComponent implements OnInit {
dialog.afterClosed().subscribe(result => {
if (result) {
this.agentChannels.push({ ...result });
this.setStep(this.agentChannels.length - 1);
let selectedChannel = { ...result };
selectedChannel.channelName = selectedChannel.name;
selectedChannel.channelImage = selectedChannel.image;
selectedChannel.name = undefined;
this.deploymentChannels.push(selectedChannel);
this.setStep(this.deploymentChannels.length - 1);
}
});
}
......
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