Skip to content

A
aeropuertov2-front-framework
Commit 8ff547d8 authored by huriarte's avatar huriarte
Browse files
Options

Seccion 1 - Modo Edicion y Nuevo

parent 4325727d
Hide whitespace changes
Inline Side-by-side
Showing with 103 additions and 167 deletions
projects/bytebot-html/src/app/interceptors/agent-fake-backend.interceptor.ts
View file @ 8ff547d8
......@@ -59,6 +59,34 @@ const data: Array<any> = [
}
];
const countries: Array<any> = [
{
"id": 1,
"name": "Perú",
"timezones": [
"GMT-5"
]
},
{
"id": 2,
"name": "Argentina",
"timezones": [
"GMT-3"
]
},
{
"id": 3,
"name": "Brazil",
"timezones": [
"GMT-5",
"GMT-4",
"GMT-3",
"GMT-2"
]
}
];
@Injectable()
export class AgentFakeBackendInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
......@@ -77,6 +105,8 @@ export class AgentFakeBackendInterceptor implements HttpInterceptor {
// 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);
default:
......
projects/bytebot-html/src/app/modules/agent/agent-routing.module.ts
View file @ 8ff547d8
......@@ -7,6 +7,7 @@ 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-list.component';
import { CountryDataForWizardResolver } from './resolver/country-data-wizard.resolver';
const routes: Routes = [
......@@ -22,7 +23,8 @@ const routes: Routes = [
//component: AgentDetailComponent,
component: AgentComponent,
resolve: {
dataForWizard: AgentDataForWizardResolver
dataForWizard: AgentDataForWizardResolver,
countryData : CountryDataForWizardResolver
},
canActivate: [AuthGuard, ResourceAuthGuard], canDeactivate: [DirtyGuard],
data:
......
projects/bytebot-html/src/app/modules/agent/resolver/country-data-wizard.resolver.ts 0 → 100644
View file @ 8ff547d8
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AgentService } from '../service/agent.service';
import { Observable } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class CountryDataForWizardResolver implements Resolve<any> {
constructor(private service: AgentService) {}
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<any>|Promise<any>|any {
return this.service.getCountryDataForWizard();
}
}
projects/bytebot-html/src/app/modules/agent/service/agent.service.ts
View file @ 8ff547d8
......@@ -25,4 +25,8 @@ export class AgentService extends DynaDataService {
});
}
getCountryDataForWizard() {
return this.httpClient.get(this.serviceURL + '/country');
}
}
projects/bytebot-html/src/app/modules/agent/view/components/ca-general-information/ca-general-information.component.html
View file @ 8ff547d8
......@@ -19,19 +19,10 @@
<span aria-hidden="true"
class="mat-placeholder-required mat-form-field-required-marker"> *</span>
</label>
<div class="uploadfilecontainer" xdfFileDragDrop (click)="fileInput.click()"
(fileDropped)="uploadFiles($event)" *ngIf="allowDragAndDrop">
<button type="button" class="btn-upload-image" mat-button color="warn"
class="upload_button">
<mat-icon>file_upload</mat-icon>
{{text | translate}}
</button>
</div>
<div *ngIf="!allowDragAndDrop" class="h-85">
<div class="h-85">
<div [ngStyle]="{'height': (height && height !== '') ? (height) : '','width': (width && width !== '') ? (width) : ''}"
class="image-preview">
<div *ngIf="type === 'image'"
[ngClass]="{'with-image': formGroup.controls['imageAvatar'].value && disabled, 'edit-image': formGroup.controls['imageAvatar'].value && !disabled, 'without-image': !formGroup.controls['imageAvatar'].value}">
<div [ngClass]="{'with-image': formGroup.controls['imageAvatar'].value && disabled, 'edit-image': formGroup.controls['imageAvatar'].value && !disabled, 'without-image': !formGroup.controls['imageAvatar'].value}">
<img src="{{ urlBase + formGroup.controls['imageAvatar'].value }}"
style="height: 100%;"
*ngIf="formGroup.controls['imageAvatar'].value">
......@@ -39,29 +30,15 @@
*ngIf="!formGroup.controls['imageAvatar'].value"></div>
</div>
<button type="button" mat-stroked-button (click)="fileInput.click()"
*ngIf="!disabled" [ngClass]="{'btn-upload-image': type === 'image'}">
*ngIf="!viewMode" class="btn-upload-image">
<mat-icon>file_upload</mat-icon>
{{text | translate}}
</button>
</div>
</div>
<ul class="uploadList">
<li *ngFor="let file of files" [@fadeInOut]="file.state">
<mat-progress-bar [value]="file.progress"></mat-progress-bar>
<span id="file-label">
{{file.data.name}}
<a title="Retry" (click)="retryFile(file)" *ngIf="file.canRetry">
<mat-icon>refresh</mat-icon>
</a>
<a title="Cancel" (click)="cancelFile(file)" *ngIf="file.canCancel">
<mat-icon>cancel</mat-icon>
</a>
</span>
</li>
</ul>
<input type="file" #fileInput name="fileUpload" [multiple]="multiple"
<input type="file" #fileInput name="fileUpload"
(change)="uploadFiles($event.target.files)" accept="{{accept}}"
style="display:none;" />
style="display:none;" >
</div>
</div>
<!-- FIN :: SECCION AVATAR -->
......@@ -99,7 +76,7 @@
<mat-form-field class="amd-form-control">
<mat-select [placeholder]="'label.country' | translate" formControlName="country"
required (selectionChange)="onCountryChange($event)">
<mat-option *ngFor="let country of countries" [value]="country">
<mat-option *ngFor="let country of countries" [value]="country.id">
{{country.name | translate}}
</mat-option>
</mat-select>
......@@ -122,7 +99,7 @@
<div class="col-12">
<mat-form-field class="amd-form-control">
<mat-select [placeholder]="'label.language' | translate" formControlName="language" required >
<mat-option *ngFor="let language of languages" [value]="language">
<mat-option *ngFor="let language of languages" [value]="language.code">
{{language.name | translate}}
</mat-option>
</mat-select>
......@@ -133,7 +110,7 @@
<div class="col-12">
<mat-form-field class="amd-form-control">
<mat-select [placeholder]="'label.type' | translate" formControlName="type" required >
<mat-option *ngFor="let type of types" [value]="type">
<mat-option *ngFor="let type of types" [value]="type.code">
{{type.name | translate}}
</mat-option>
</mat-select>
......
projects/bytebot-html/src/app/modules/agent/view/components/ca-general-information/ca-general-information.component.ts
View file @ 8ff547d8
import { Component, OnInit, Input, ViewContainerRef } from '@angular/core';
import { Subscription, of } from 'rxjs';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
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 { DomSanitizer } from '@angular/platform-browser';
export const FILE_TYPE = {
image: /image.*/,
......@@ -32,56 +31,29 @@ export class CaGeneralInformationComponent implements OnInit {
viewMode: boolean;
allowDragAndDrop = false;
files: Array<FileUploadModel> = [];
type = 'image';
imageName = "imageAvatar";
//urlBase = './service/file/download/';
urlBase = '';
countries = [
{
"name": "Perú",
"timezones": [
"GMT-5"
]
},
{
"name": "Argentina",
"timezones": [
"GMT-3"
]
},
{
"name": "Brazil",
"timezones": [
"GMT-5",
"GMT-4",
"GMT-3",
"GMT-2"
]
}
];
countries = [];
timezones = [];
languages = [
{
"name" : "Español"
"code": "ES",
"name": "Español"
}
];
types = [
{
"name" : "Agente de preguntas frecuentes"
"code": "FQ",
"name": "Agente de preguntas frecuentes"
}
];
constructor(
private formBuilder: FormBuilder,
private _activatedRoute: ActivatedRoute,
private domSanitizer: DomSanitizer
private _activatedRoute: ActivatedRoute
) {
this.viewMode = this._activatedRoute.snapshot.data.mode === 'view';
......@@ -90,7 +62,7 @@ export class CaGeneralInformationComponent implements OnInit {
name: new FormControl({ value: "", disabled: this.viewMode }),
description: new FormControl({ value: "", disabled: this.viewMode }),
version: new FormControl({ value: "", disabled: this.viewMode }),
imageAvatar: new FormControl({ value: "", disabled: this.viewMode }),
imageAvatar: new FormControl({ value: "", disabled: this.viewMode }, { validators: [Validators.required] }),
country: new FormControl({ value: "", disabled: this.viewMode }),
timezone: new FormControl({ value: "", disabled: this.viewMode }),
language: new FormControl({ value: "", disabled: this.viewMode }),
......@@ -100,6 +72,7 @@ export class CaGeneralInformationComponent implements OnInit {
}
ngOnInit() {
this.countries = this._activatedRoute.snapshot.data.countryData;
}
buildForm(agentDetail: any) {
......@@ -107,11 +80,34 @@ export class CaGeneralInformationComponent implements OnInit {
if (agentDetail) {
this.formGroup.patchValue({
name: agentDetail.name,
description: agentDetail.description
description: agentDetail.description,
version: agentDetail.version,
timezone: agentDetail.timezone,
country: agentDetail.countryId,
imageAvatar: agentDetail.avatar,
language: agentDetail.language,
type: agentDetail.type
});
}
}
saveGeneralInformation(validateForm: boolean): boolean {
if (validateForm && !this.formGroup.valid) {
return false;
}
this.agentDetail.name = this.formGroup.controls.name.value;
this.agentDetail.description = this.formGroup.controls.description.value;
this.agentDetail.version = this.formGroup.controls.version.value;
this.agentDetail.countryId = this.formGroup.controls.country.value;
this.agentDetail.timezone = this.formGroup.controls.timezone.value;
this.agentDetail.avatar = this.formGroup.controls.imageAvatar.value;
this.agentDetail.language = this.formGroup.controls.language.value;
this.agentDetail.type = this.formGroup.controls.type.value;
return true;
}
isDirty() {
return this.formGroup.dirty;
......@@ -125,124 +121,33 @@ export class CaGeneralInformationComponent implements OnInit {
this.formGroup.controls['imageAvatar'].setValue(reader.result as string);
};
reader.readAsDataURL(event[i]);
console.log("Imagen cargada");
/*
this.files.push({
data: event[i], state: 'in',
inProgress: false, progress: 0, canRetry: false, canCancel: true
});
*/
}
}
/*
this.files.forEach(file => {
this.sendFile(file);
});
*/
}
cancelFile(file: FileUploadModel) {
file.sub.unsubscribe();
this.removeFileFromArray(file);
}
/*
private sendFile(file: FileUploadModel) {
const fd = new FormData();
fd.append(this.param, file.data);
const req = new HttpRequest('POST', this.target, fd, {
reportProgress: true
});
file.inProgress = true;
file.sub = this._http.request(req).pipe(
map(event => {
switch (event.type) {
case HttpEventType.UploadProgress:
file.progress = Math.round(event.loaded * 100 / event.total);
break;
case HttpEventType.Response:
return event;
}
}),
tap(message => { }),
last(),
catchError((error: HttpErrorResponse) => {
file.inProgress = false;
file.canRetry = true;
return of(`${file.data.name} upload failed.`);
})
).subscribe(
(event: any) => {
if (typeof (event) === 'object') {
this.updateFormControlValue(event.body);
this.removeFileFromArray(file);
this.completed.emit(event.body);
}
}
);
}
*/
private removeFileFromArray(file: FileUploadModel) {
const index = this.files.indexOf(file);
if (index > -1) {
this.files.splice(index, 1);
}
}
onCountryChange(obj) {
console.log('Country changed...');
let selectedCountry = obj.value;
console.log(selectedCountry);
this.timezones = [];
console.log(this.formGroup.controls['timezone'].value);
this.formGroup.controls['timezone'].setValue(null);
if (selectedCountry) {
this.timezones = selectedCountry.timezones;
}
}
saveConnection(validateForm: boolean): boolean {
if (validateForm && !this.formGroup.valid) {
return false;
for (var index in this.countries) {
if (selectedCountry === this.countries[index].id) {
this.timezones = this.countries[index].timezones;
break;
}
}
}
/*
this.externalSystemDetail.abbreviation = this.formGroup.controls.abbreviation.value;
this.externalSystemDetail.name = this.formGroup.controls.name.value;
this.externalSystemDetail.description = this.formGroup.controls.description.value;
this.externalSystemDetail.status = this.formGroup.controls.status.value ? 'AC' : 'IN';
this.externalSystemDetail.inputType = this.formGroup.controls.inputType.value;
this.externalSystemDetail.type = this.formGroup.controls.type.value;
*/
return true;
}
next() {
if (this.viewMode) {
this.stepper.next();
return;
}
if (this.saveConnection(true)) {
if (this.saveGeneralInformation(true)) {
this.stepper.next();
}
}
}
export class FileUploadModel {
data: File;
state: string;
inProgress: boolean;
progress: number;
canRetry: boolean;
canCancel: boolean;
sub?: Subscription;
}
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