Grilla principal - agentes

projects/bytebot-html/src/app/app-routing.module.ts

@@ -20,6 +20,10 @@ const routes: Routes = [
       {
         path: 'settings', canLoad: [AuthGuard],
         loadChildren: () => import('./modules/settings/settings.module').then(m => m.SettingsModule)
+      },
+      {
+        path: 'configuration', canLoad: [AuthGuard],
+        loadChildren: () => import('./modules/configuration/configuration.module').then(m => m.ConfigurationModule)
       }
     ],
     canActivate: [AuthGuard]

projects/bytebot-html/src/app/app.module.ts

@@ -31,6 +31,7 @@ import {
   MAT_MOMENT_DATE_ADAPTER_OPTIONS,
 } from '@angular/material-moment-adapter';
 import { CustomProgramsFakeBackendInterceptor } from './interceptors/custom-programs-fake-backend.interceptor';
+import { AgentFakeBackendInterceptor } from './interceptors/agent-fake-backend.interceptor';
 
 const INITIAL_LANGUAGE = 'es';
 
@@ -100,22 +101,22 @@ export function createTranslateLoader(http: HttpClient) {
     { provide: ResourceAuthGuard, useClass: ResourceAuthGuard},
 
     // descomentar estas lineas para OAUTH
-    { provide: AuthGuard, useClass: OAuthGuard},
-    { provide: AuthenticationService, useClass: OAuthAuthenticationService },
-    { provide: APP_INITIALIZER, useFactory: loginLoaderFactory, deps: [AuthenticationService], multi: true },
+    //{ provide: AuthGuard, useClass: OAuthGuard},
+    //{ provide: AuthenticationService, useClass: OAuthAuthenticationService },
+    //{ provide: APP_INITIALIZER, useFactory: loginLoaderFactory, deps: [AuthenticationService], multi: true },
 
     // Para probar mantenimientos
 
     // comentar estas lineas para OAUTH
-    // { provide: AuthGuard, useClass: AuthGuard},
-    // { provide: AuthenticationService, useClass: ByteAuthenticationService },
-    // { provide: HTTP_INTERCEPTORS, useClass: AuthenticationFakeBackendInterceptor, multi: true},
+     { provide: AuthGuard, useClass: AuthGuard},
+     { provide: AuthenticationService, useClass: ByteAuthenticationService },
+     { provide: HTTP_INTERCEPTORS, useClass: AuthenticationFakeBackendInterceptor, multi: true},
     { provide: HTTP_INTERCEPTORS, useClass: SettingsFakeBackendInterceptor, multi: true},    
     { provide: HTTP_INTERCEPTORS, useClass: CustomProgramsFakeBackendInterceptor, multi: true},
     //{ provide: HTTP_INTERCEPTORS, useClass: EntidadFakeFakeBackendInterceptor, multi: true},
-    
-    
 
+    { provide: HTTP_INTERCEPTORS, useClass: AgentFakeBackendInterceptor, multi: true },
+    
     { provide: APP_INITIALIZER, useFactory: init_app, deps: [InitCommonsService, TranslateService], multi: true }
   ],
   bootstrap: [AppComponent]

projects/bytebot-html/src/app/interceptors/agent-fake-backend.interceptor.ts

+import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
+import { Observable, of, throwError } from 'rxjs';
+import { delay, mergeMap, materialize, dematerialize } from 'rxjs/operators';
+
+import { Injectable } from '@angular/core';
+import { SortField, DIRECTION } from '@xdf/commons';
+
+
+const basePath = '/service/agent';
+
+const tableData: Array<any> = [
+    {
+        id: 361,
+        name: 'BANCO DE CREDITO DEL PERU',
+        version: '0.0.1',
+        status: 'Activo',
+        country: 'Perú',
+        timezone: 'GMT-5',
+        avatar: 'https://www.w3schools.com/howto/img_avatar.png'
+    },
+    {
+        id: 362,
+        name: 'BANCO CONTINENTAL',
+        version: '0.0.5',
+        status: 'Activo',
+        country: 'Perú',
+        timezone: 'GMT-5',
+        avatar: 'https://lh3.googleusercontent.com/VHB9bVB8cTcnqwnu0nJqKYbiutRclnbGxTpwnayKB4vMxZj8pk1220Rg-6oQ68DwAkqO=s180-rw'
+    },
+    {
+        id: 363,
+        name: 'JUAN DE ARONA',
+        version: '0.0.1',
+        status: 'Activo',
+        country: 'Perú',
+        timezone: 'GMT-5',
+        avatar: 'data:image/jpeg;base64,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'
+    },
+    {
+        id: 364,
+        name: 'JUAN DE ARONA 2',
+        version: '0.0.1',
+        status: 'Activo',
+        country: 'Perú',
+        timezone: 'GMT-5',
+        avatar: 'https://www.w3schools.com/howto/img_avatar.png'
+    }
+];
+
+
+@Injectable()
+export class AgentFakeBackendInterceptor implements HttpInterceptor {
+    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        const { url, method, headers, body } = request;
+
+        return of(null)
+            .pipe(mergeMap(handleRoute))
+            .pipe(materialize())
+            .pipe(delay(10))
+            .pipe(dematerialize());
+
+        function handleRoute() {
+
+            switch (true) {
+                case url.endsWith(basePath + '/page') && method === 'POST':
+                    return pagination(body);
+                default:
+                    // pass through any requests not handled above
+                    return next.handle(request);
+            }
+        }
+
+        function pagination(data: any) {
+            data.totalItems = tableData.length;
+
+            const pageNumber = data.currentPage;
+            const pageSize = data.itemsPerPage ? data.itemsPerPage : 5;
+
+            data.totalPages = Math.ceil(data.totalItems / pageSize);
+
+            if (data.sortFields.length > 0) {
+                const sortField: any = data.sortFields[0];
+                if (sortField.direction === DIRECTION.asc) {
+                    tableData.sort((a, b) => {
+                        if (JSON.stringify(a[sortField.field]) > JSON.stringify(b[sortField.field])) {
+                            return 1;
+                        } else if (JSON.stringify(a[sortField.field]) < JSON.stringify(b[sortField.field])) {
+                            return -1;
+                        }
+                        return 0;
+                    });
+                } else {
+                    tableData.sort((a, b) => {
+                        if (JSON.stringify(a[sortField.field]) < JSON.stringify(b[sortField.field])) {
+                            return 1;
+                        } else if (JSON.stringify(a[sortField.field]) > JSON.stringify(b[sortField.field])) {
+                            return -1;
+                        }
+                        return 0;
+                    });
+                }
+            }
+
+            data.data = tableData.slice(pageNumber * pageSize, (pageNumber + 1) * pageSize);
+
+            return ok(data);
+        }
+
+
+        function ok(bodyContent?: any) {
+            return of(new HttpResponse({ status: 200, body: bodyContent }));
+        }
+
+        function error(message: string) {
+            return throwError({ error: { message } });
+        }
+
+
+    }
+}
\ No newline at end of file

projects/bytebot-html/src/app/modules/configuration/configuration-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AuthGuard } from '@xdf/security';
+import { TemplateResolver, CrudDetailComponent, DirtyGuard, GridViewComponent, CrudGridComponent, RecordResolver } from '@xdf/gallery';
+import { ResourceAuthGuard } from '@xdf/security';
+import { UserRoleFormComponent, AccessDetailResolver } from '@xdf/settings';
+import { AgentComponent } from './view/agent/agent.component';
+
+const routes: Routes = [
+  {
+    path: 'agent', component: AgentComponent, canActivate: [AuthGuard, ResourceAuthGuard], 
+    data: {
+      program: 'agent',
+      breadcrumb: 'breadcrumb.agent'
+    }
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ConfigurationRoutingModule { }

projects/bytebot-html/src/app/modules/configuration/configuration.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { ConfigurationRoutingModule } from './configuration-routing.module';
+import { AgentComponent } from './view/agent/agent.component';
+import { XdfGalleryModule } from '@xdf/gallery';
+import { MatProgressSpinnerModule, MatTableModule, MatSortModule, MatIconModule, MatTooltipModule, MatPaginatorModule, MatButtonModule } from '@angular/material';
+
+
+
+@NgModule({
+  declarations: [
+    AgentComponent
+  ],
+  imports: [
+    CommonModule,
+    ConfigurationRoutingModule,
+    FormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatPaginatorModule,
+    MatProgressSpinnerModule,
+    MatSortModule,
+    MatTableModule,
+    MatTooltipModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    XdfGalleryModule
+  ]
+})
+export class ConfigurationModule { }

projects/bytebot-html/src/app/modules/configuration/services/agent.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { AgentService } from './agent.service';
+
+describe('AgentService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: AgentService = TestBed.get(AgentService);
+    expect(service).toBeTruthy();
+  });
+});

projects/bytebot-html/src/app/modules/configuration/services/agent.service.ts

+import { Injectable } from '@angular/core';
+import { DynaDataService } from '@xdf/gallery';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AgentService extends DynaDataService {
+
+  serviceURL = './service/agent';
+
+  constructor(private httpClient: HttpClient) {
+    super(httpClient);
+  }
+  
+}

projects/bytebot-html/src/app/modules/configuration/view/agent/agent.component.html

+<div class="wrapper wrapper-content animated fadeInRight">
+    <div class="row">
+        <div class="col-lg-12">
+            <div class="ibox float-e-margins">
+                <div class="ibox-title">
+                    <h5>{{'label.external.systems' | translate}}</h5>
+                </div>
+                <div class="ibox-content">
+
+                    <div class="content">
+
+                        <div class="grid-ibox-content">
+
+                            <div class="filter-panel mat-elevation-z3">
+                                <xdf-ngx-tags-input name="name" class="input-lg" [fields]="fieldFilters"
+                                    (filterEvent)="onFilter($event)"></xdf-ngx-tags-input>
+                            </div>
+
+                            <br />
+
+                            <div class="grid-container mat-elevation-z3">
+                                <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
+                                    <mat-spinner diameter="40"></mat-spinner>
+                                </div>
+
+                                <table class="crud-table table table-striped table-hover" mat-table
+                                    [dataSource]="dataSource" matSort [matSortActive]="sortColumn"
+                                    [matSortDirection]="sortDirection" matSortDisableClear multiTemplateDataRows>
+
+                                    <ng-container matColumnDef="{{template.name}}"
+                                        *ngFor="let template of columnTemplateArray">
+                                        <div *ngIf="template.sortable">
+                                            <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                                                {{ template.title | translate }}
+                                                <mat-icon *ngIf="sortColumn===template?.name">
+                                                    <i class="fa fa-sort-amount-desc"
+                                                        *ngIf="sortDirection === 'desc'"></i>
+                                                    <i class="fa fa-sort-amount-asc"
+                                                        *ngIf="sortDirection === 'asc'"></i>
+                                                </mat-icon>
+                                            </th>
+                                        </div>
+                                        <div *ngIf="!template.sortable">
+                                            <th mat-header-cell *matHeaderCellDef>{{ template.title | translate }}
+                                            </th>
+                                        </div>
+                                        <td mat-cell *matCellDef="let item"
+                                            [style.width]="template.width ? template.width : ''"
+                                            [ngClass]="{'td-view': !this.resourceAuth['view']}" (click)="view(item)">
+
+                                            <span *ngIf="template['name'] !== 'avatar'">{{ item[template['name']] }}</span>
+                                            <img  *ngIf="template['name'] === 'avatar'" [src]="item[template['name']]" alt="Avatar" class="avatar">
+                                        </td>
+                                    </ng-container>
+
+                                    <ng-container matColumnDef="actions">
+                                        <th mat-header-cell *matHeaderCellDef></th>
+                                        <td class="text-center mat-cell cdk-column-actions mat-column-actions ng-star-inserted"
+                                            mat-cell="" role="gridcell" *matCellDef="let item">
+                                            <div class="btn-group">
+                                                <button class="btn btn-default btn-sm" (click)="edit(item)"
+                                                    *ngIf="this.resourceAuth['edit']" type="button">
+                                                    <i class="fa fa-edit"></i>
+                                                    <span class="visible-md-inline visible-lg-inline visible-xl-inline">
+                                                        {{'btn.edit' | translate}}
+                                                    </span>
+                                                </button>
+
+                                                <button class="btn btn-default btn-sm" (click)="delete(item)"
+                                                    *ngIf="this.resourceAuth['delete']" type="button">
+                                                    <i class="fa fa-trash"></i>
+                                                    <span class="visible-md-inline visible-lg-inline visible-xl-inline">
+                                                        {{'btn.delete' | translate}}
+                                                    </span>
+                                                </button>
+                                            </div>
+                                        </td>
+
+                                    </ng-container>
+
+                                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+                                </table>
+
+                                <div class="status-button-bar pull-left">
+                                    <button type="button" mat-icon-button
+                                        matTooltip="{{ 'action.grid.refresh' | translate }}" (click)="onRefresh()">
+                                        <i class="fa fa-refresh"></i>
+                                    </button>
+                                </div>
+                                <mat-paginator [length]="pagination?.totalItems" [pageSize]="pagination?.itemsPerPage"
+                                    [pageSizeOptions]="[5, 10, 15]" [pageIndex]="pagination?.currentPage">
+                                </mat-paginator>
+                            </div>
+
+                        </div>
+
+                        <!--Boton de Nuevo-->
+
+                        <div class="toolbar-option">
+                            <button color="default" mat-mini-fab="" class="mat-mini-fab"
+                                matTooltip="{{'btn.new' | translate}}" (click)="create()"
+                                *ngIf="this.resourceAuth['new']">
+                                <span><i class="fa fa-file-o"></i></span>
+                            </button>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

projects/bytebot-html/src/app/modules/configuration/view/agent/agent.component.scss

+.toolbar-option {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  
+  $fontcolor: #676a6c;
+  .content {
+    width: 100%;
+    display: flex;
+    padding-right: 0px !important;
+    .grid-container,
+    .filter-panel {
+      .crud-table {
+        margin-bottom: 0px;
+        width: 100%;
+      }
+      .form {
+        padding: 10px 20px 10px 20px;
+      }
+    }
+  
+    .filter-panel {
+      margin-bottom: 10px;
+    }
+  }
+  
+  .grid-ibox-content {
+    width: 100%;
+  }
+  
+  .btn-group {
+    .btn {
+      font-size: 10px;
+    }
+  }
+
+  .td-view{
+    cursor: auto !important
+  }
+  
+  .mat-row-auth:hover {
+    background-color: #f8f9fa;
+    cursor: pointer !important;
+  }
+  
+  .spinner-container {
+    height: 100%;
+    width: 100%;
+    padding-top: 50px;
+    position: fixed;
+  }
+  .spinner-container {
+    height: 100%;
+    width: 100%;
+    padding-top: 50px;
+    position: fixed;
+  }
+  
+  .spinner-container mat-spinner {
+    margin: -10px auto 0 auto;
+  }
+  
+  th.mat-column-actions {
+    width: 1px !important;
+    padding-right: 0px !important;
+  }
+  
+  td.mat-column-actions {
+    min-width: 170px;
+    padding-right: 20px !important;
+    cursor: default !important;
+  }
+  td {
+    vertical-align: middle !important;
+    color: $fontcolor;
+    font-size: 12px;
+  }
+  th {
+    vertical-align: middle !important;
+  }
+  tr.mat-header-row {
+    height: 50px !important;
+  }
+  
+  tr.mat-footer-row,
+  tr.mat-row {
+    height: 40px !important;
+  }
+  
+  .table-toolbar {
+    right: 10px;
+    top: 10px;
+    button {
+      font-size: 12px;
+    }
+  }
+  
+  .status-button-bar {
+    button {
+      font-size: 16px;
+    }
+    padding-top: 8px;
+    padding-left: 15px;
+  }
+  
+  .mat-raised-button {
+    padding: 0px 10px;
+  }
+  
+  .icon-centered-button span.mat-button-wrapper {
+    display: flex;
+  }
+  
+  .icon-centered-button mat-icon {
+    font-size: 15px;
+    padding-top: 2px;
+  }
+  
+  ::ng-deep .mat-sort-header-arrow {
+    visibility: hidden;
+  }
+  
+  ::ng-deep .mat-sort-header-button {
+    .mat-icon {
+      padding-left: 10px;
+      font-size: 12px;
+      padding-top: 5px;
+    }
+  }
+  
+  th {
+    background: rgb(242, 242, 242);
+  }
+  
+  tr.example-detail-row {
+    height: 0 !important;
+  }
+  
+  tr.example-element-row:not(.example-expanded-row):hover {
+    background: #dedede;
+    cursor: pointer;
+  }
+  
+  tr.example-element-row:not(.example-expanded-row):active {
+    background: #efefef;
+  }
+  
+  .example-element-row td {
+    border-bottom-width: 0;
+  }
+  
+  .example-element-detail {
+    overflow: hidden;
+    display: flex;
+  }
+  
+  .example-detail-row td {
+    padding-top: 0px;
+    padding-bottom: 0px;
+    border: none !important;
+    background-color: #f2f2f2;
+  }
+  
+  i.state {
+    font-size: 1.3em;
+  }
+  
+  i.fa-key.pull-left {
+    color: rgba(128, 128, 128, 0.33);
+    margin-right: 6px;
+  }
+  
+  //////
+  
+  table {
+    width: 100%;
+  }
+  
+  tr.mat-header-row {
+    height: 25px;
+  }
+  
+  tr.mat-footer-row,
+  tr.mat-row {
+    height: 40px;
+  }
+  
+  .button-grid {
+    margin: 2px 5px;
+    mat-icon {
+      padding-top: 2px;
+    }
+  }
+  
+  .btn-header-new {
+    margin-top: -4px;
+  }
+  
+  .btn-grid-filter {
+    height: 36px;
+    width: 85px;
+    padding-left: 0px;
+    padding-top: 2px;
+  }
+  
+  .btn-grid-action {
+    padding: 0 10px;
+    line-height: 0em;
+  }
+  
+  .mat-row:hover {
+    cursor: pointer;
+    background-color: #f8f9fa;
+  }
+  
+  .spinner-container {
+    height: 100%;
+    width: 100%;
+    padding-top: 50px;
+    position: fixed;
+  }
+  
+  .spinner-container mat-spinner {
+    margin: -10px auto 0 auto;
+  }
+  
+  .mat-raised-button {
+    padding: 0px 10px;
+  }
+  
+  .icon-centered-button span.mat-button-wrapper {
+    display: flex;
+  }
+  
+  .icon-centered-button mat-icon {
+    font-size: 15px;
+    padding-top: 2px;
+  }
+  
+  .ibox-content {
+    padding-right: 0px;
+  }
+  
+  .content {
+    width: 100%;
+    display: flex;
+    padding-right: 0px !important;
+  }
+  
+  .grid-ibox-content {
+    width: 100%;
+  }
+
+  .avatar {
+    vertical-align: middle;
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+  }
\ No newline at end of file

projects/bytebot-html/src/app/modules/configuration/view/agent/agent.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AgentComponent } from './agent.component';
+
+describe('AgentComponent', () => {
+  let component: AgentComponent;
+  let fixture: ComponentFixture<AgentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AgentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AgentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/bytebot-html/src/app/modules/configuration/view/agent/agent.component.ts

+import { Component, OnInit, ViewChild, ViewContainerRef, Input } from '@angular/core';
+import { MatPaginator, MatSort } from '@angular/material';
+import { ColumnTemplate, DynaDataSource, ConfirmationDialogService, extractRSQL, FieldFilter } from '@xdf/gallery';
+import { Pagination, SortField, NotificationType, NotificationService } from '@xdf/commons';
+import { Router, ActivatedRoute } from '@angular/router';
+import { tap } from 'rxjs/operators';
+import { TagFilter } from '@xdf/gallery/lib/views/gallery/ngx-tags-input/model/tag-filter';
+import { TranslateService } from '@ngx-translate/core';
+import { AgentService } from '../../services/agent.service';
+
+
+
+const columnTemplateArray = [
+  {
+    name: 'avatar',
+    sortable: true,
+    title: 'etl_avatar',
+    visible: true,
+    filtable: true,
+    style: { width: 'auto' },
+    type: 'string',
+    aliasName: null,
+    queryName: null,
+    responsive: null,
+    styles: null,
+    values: null,
+    digitsInfo: null,
+    dateFormat: null,
+    colStyle: null
+  },
+  {
+    name: 'id',
+    sortable: true,
+    title: 'etl_code',
+    visible: true,
+    filtable: true,
+    style: { width: 'auto' },
+    type: 'number',
+    aliasName: null,
+    queryName: null,
+    responsive: null,
+    styles: null,
+    values: null,
+    digitsInfo: null,
+    dateFormat: null,
+    colStyle: null
+  },
+  {
+    name: 'name',
+    sortable: true,
+    title: 'etl_name',
+    visible: true,
+    filtable: true,
+    style: { width: 'auto' },
+    type: 'string',
+    aliasName: null,
+    queryName: null,
+    responsive: null,
+    styles: null,
+    values: null,
+    digitsInfo: null,
+    dateFormat: null,
+    colStyle: null
+  },
+  {
+    name: 'version',
+    sortable: true,
+    title: 'etl_version',
+    visible: true,
+    filtable: true,
+    style: { width: 'auto' },
+    type: 'string',
+    aliasName: null,
+    queryName: null,
+    responsive: null,
+    styles: null,
+    values: null,
+    digitsInfo: null,
+    dateFormat: null,
+    colStyle: null
+  },
+  {
+    name: 'status',
+    sortable: true,
+    title: 'etl_status',
+    visible: true,
+    filtable: true,
+    style: { width: 'auto' },
+    type: 'string',
+    aliasName: null,
+    queryName: null,
+    responsive: null,
+    styles: null,
+    values: null,
+    digitsInfo: null,
+    dateFormat: null,
+    colStyle: null
+  },
+  {
+    name: 'country',
+    sortable: true,
+    title: 'etl_country',
+    visible: true,
+    filtable: true,
+    style: { width: 'auto' },
+    type: 'string',
+    aliasName: null,
+    queryName: null,
+    responsive: null,
+    styles: null,
+    values: null,
+    digitsInfo: null,
+    dateFormat: null,
+    colStyle: null
+  },
+  {
+    name: 'timezone',
+    sortable: true,
+    title: 'etl_timezone',
+    visible: true,
+    filtable: true,
+    style: { width: 'auto' },
+    type: 'string',
+    aliasName: null,
+    queryName: null,
+    responsive: null,
+    styles: null,
+    values: null,
+    digitsInfo: null,
+    dateFormat: null,
+    colStyle: null
+  }
+];
+
+
+const fieldFilters = [
+  new FieldFilter('etl_code', 'id', 'id', 'number', undefined),
+  new FieldFilter('etl_abbreviation', 'abbreviation', 'abbreviation', 'string', undefined),
+  new FieldFilter('etl_name', 'name', 'name', 'string', undefined),
+];
+
+@Component({
+  selector: 'byte-agent',
+  templateUrl: './agent.component.html',
+  styleUrls: ['./agent.component.scss']
+})
+export class AgentComponent implements OnInit {
+
+  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: false }) sort: MatSort;
+
+  sortColumn: string;
+  sortDirection: string;
+  statusQuickFilter: string;
+  pagingSize = 10;
+  programIdentifier = 'agent';
+
+  columnTemplateArray: ColumnTemplate[];
+  dataSource: DynaDataSource;
+  displayedColumns = new Array<string>();
+  fieldFilters: Array<FieldFilter> = fieldFilters;
+  filterTags = [];
+  pagination: Pagination;
+  public resourceAuth: any;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private agentService: AgentService,
+    private notificationService: NotificationService,
+    private translateService: TranslateService,
+    protected confirmationDialogService: ConfirmationDialogService,
+    protected vcRef: ViewContainerRef
+  ) { }
+
+  ngAfterViewInit(): void {
+    this.sort.sortChange.subscribe(() => {
+      if (!this.sort.disabled && this.sort.active) {
+        this.pagination.sortFields = new Array();
+        const sortField: SortField = new SortField();
+        sortField.direction = this.sortDirection = this.sort.direction;
+        sortField.field = this.sortColumn = this.sort.active;
+        this.pagination.sortFields.push(sortField);
+      }
+
+      this.paginator.pageIndex = 0;
+      this.dataSource.load(this.pagination);
+    });
+
+    this.paginator.page
+      .pipe(
+        tap(() => {
+          this.pagination.currentPage = this.paginator.pageIndex;
+          this.pagination.itemsPerPage = this.paginator.pageSize;
+          this.dataSource.load(this.pagination);
+        })
+      )
+      .subscribe();
+  }
+
+  ngOnInit() {
+    this.sortColumn = 'id';
+    this.sortDirection = 'asc';
+
+    const authList = this.route.snapshot.paramMap['authorization'];
+
+    if (authList) {
+      this.resourceAuth = new Object();
+      authList.forEach(option => {
+        this.resourceAuth[option] = true;
+      });
+    }
+
+    this.columnTemplateArray = columnTemplateArray;
+
+    this.dataSource = new DynaDataSource(this.agentService);
+
+    const previousState = JSON.parse(localStorage.getItem(this.programIdentifier + '-state'));
+
+    if (previousState) {
+      const PAG = 'pagination';
+      const FILTERS = 'filtersTags';
+
+      this.pagination = previousState[PAG];
+      this.filterTags = previousState[FILTERS];
+
+      localStorage.removeItem(this.programIdentifier + '-state');
+    } else {
+
+      // Paginación
+      this.pagination = new Pagination();
+      this.pagination.currentPage = 0;
+      this.pagination.itemsPerPage = this.pagingSize;
+
+      this.pagination.filterExpression = "id != 0";
+
+      // Ordenación por defecto
+      if (this.sortColumn && this.sortDirection) {
+        this.pagination.sortFields = new Array();
+        const sortField: SortField = new SortField();
+        sortField.direction = this.sortDirection;
+        sortField.field = this.sortColumn;
+        this.pagination.sortFields.push(sortField);
+      }
+    }
+
+    // calculando la columnas a pintar
+    this.columnTemplateArray.forEach(column => {
+      this.displayedColumns.push(column.name);
+    });
+
+    this.displayedColumns.push('actions');
+
+    this.dataSource.load(this.pagination);
+  }
+
+  onFilter(tags: Array<TagFilter>) {
+
+    this.filterTags = tags;
+    this.pagination.currentPage = 0;
+
+    // let tagsTemp = tags.slice();
+    const tagsTemp = tags.map(a => Object.assign({}, a));
+
+    for (let i = 0; i < tagsTemp.length; i++) {
+      if (tagsTemp[i].column !== 'id') {
+        tagsTemp[i].value = tagsTemp[i].value;
+      }
+    }
+
+    this.pagination.filterExpression = extractRSQL(tagsTemp);
+
+    if (this.pagination.filterExpression == null || this.pagination.filterExpression == undefined) {
+      this.pagination.filterExpression = "id != 0";
+    }
+
+    this.dataSource.load(this.pagination);
+  }
+
+  onRefresh() {
+    this.dataSource.load(this.pagination);
+  }
+
+  delete(item) {
+    this.confirmationDialogService.loadComponent(
+      this.vcRef,
+      'title.delete.confirmation',
+      'message.delete.confirmation').subscribe(result => {
+        if (result) {
+          this.agentService.delete(item.id).subscribe((rslt: any) => {
+
+            if (rslt.statusCode != 200) {
+              this.notificationService.showMessage(
+                this.translateService.instant(rslt.message), this.translateService.instant('label.error.message.title'), NotificationType.error);
+            } else {
+              this.dataSource.load(this.pagination);
+            }
+
+          }
+
+          );
+        }
+      });
+  }
+
+  edit(item) {
+    this.router.navigate(['/etl/external-system/detail/edit/' + item.id]);
+  }
+
+  view(item) {
+    this.router.navigate(['/etl/external-system/detail/view/' + item.id]);
+  }
+
+  create() {
+    this.router.navigate(['/etl/external-system/detail/new']);
+  }
+}

projects/bytebot-html/src/assets/data/navigation.json

@@ -32,53 +32,23 @@
     },
     {
         "id": 37,
-        "name": "piloto",
-        "label": "menu.piloto",
+        "name": "configuration",
+        "label": "menu.configuration",
         "icon": "<i class=\"fa fa-cog\"></i>",
-        "fullPath": "/piloto",
-        "singlePath": "piloto",
+        "fullPath": "/configuration",
+        "singlePath": "configuration",
         "isProgram": false,
         "children": [
             {
                 "id": 33,
-                "name": "entidades",
-                "label": "entidades.piloto",
+                "name": "agent",
+                "label": "configuration.agent",
                 "icon": null,
-                "fullPath": "/piloto/entidades",
-                "singlePath": "entidades",
-                "isProgram": true,
-                "children": []
-            },
-            {
-                "id": 34,
-                "name": "estados",
-                "label": "estados.piloto",
-                "icon": null,
-                "fullPath": "/piloto/estados",
-                "singlePath": "estados",
-                "isProgram": true,
-                "children": []
-            },
-            {
-                "id": 35,
-                "name": "motivos",
-                "label": "motivos.piloto",
-                "icon": null,
-                "fullPath": "/piloto/motivos",
-                "singlePath": "motivos",
-                "isProgram": true,
-                "children": []
-            },
-            {
-                "id": 36,
-                "name": "categoria_motivo",
-                "label": "categoria.motivo.piloto",
-                "icon": null,
-                "fullPath": "/piloto/categoria-motivo",
-                "singlePath": "categoria-motivo",
+                "fullPath": "/configuration/agent",
+                "singlePath": "agent",
                 "isProgram": true,
                 "children": []
             }
         ]
     }
-]
+]
\ No newline at end of file

projects/bytebot-html/src/assets/fake-data/programs-data.json

@@ -3,8 +3,5 @@
     "valpos",
     "user_role",
     "user",
-    "entidades",
-    "estados",
-    "motivos",
-    "categoria_motivo"
+    "agent"
 ]
\ No newline at end of file

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

 {
     "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."
+    "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.",
+    "etl_avatar": "Avatar",
+    "etl_code": "ID",
+    "etl_name": "Nombre",
+    "etl_version": "Versión",
+    "etl_status": "Estado",
+    "etl_country": "País",
+    "etl_timezone": "Zona horaria"
 }
\ No newline at end of file