refs #798 Groups component new segmentation
parent
d6e5be3fe1
commit
13c87c2ff3
|
|
@ -97,8 +97,7 @@ import { CreateCommandGroupComponent } from './components/commands/commands-grou
|
||||||
import { DetailCommandGroupComponent } from './components/commands/commands-groups/detail-command-group/detail-command-group.component';
|
import { DetailCommandGroupComponent } from './components/commands/commands-groups/detail-command-group/detail-command-group.component';
|
||||||
import { CreateTaskComponent } from './components/commands/commands-task/create-task/create-task.component';
|
import { CreateTaskComponent } from './components/commands/commands-task/create-task/create-task.component';
|
||||||
import { DetailTaskComponent } from './components/commands/commands-task/detail-task/detail-task.component';
|
import { DetailTaskComponent } from './components/commands/commands-task/detail-task/detail-task.component';
|
||||||
import { ClientTabViewComponent } from './components/groups/shared/client-tab-view/client-tab-view.component';
|
import { ClientTabViewComponent } from './components/groups/components/client-tab-view/client-tab-view.component';
|
||||||
import { AdminGeneralComponent } from './components/groups/components/admin-general/admin-general.component';
|
|
||||||
import { AdvancedSearchComponent } from './components/groups/components/advanced-search/advanced-search.component';
|
import { AdvancedSearchComponent } from './components/groups/components/advanced-search/advanced-search.component';
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
|
|
@ -155,7 +154,6 @@ import { AdvancedSearchComponent } from './components/groups/components/advanced
|
||||||
CreateTaskComponent,
|
CreateTaskComponent,
|
||||||
DetailTaskComponent,
|
DetailTaskComponent,
|
||||||
ClientTabViewComponent,
|
ClientTabViewComponent,
|
||||||
AdminGeneralComponent,
|
|
||||||
AdvancedSearchComponent
|
AdvancedSearchComponent
|
||||||
],
|
],
|
||||||
bootstrap: [AppComponent],
|
bootstrap: [AppComponent],
|
||||||
|
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<p>admin-general works!</p>
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { AdminGeneralComponent } from './admin-general.component';
|
|
||||||
|
|
||||||
describe('AdminGeneralComponent', () => {
|
|
||||||
let component: AdminGeneralComponent;
|
|
||||||
let fixture: ComponentFixture<AdminGeneralComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
declarations: [AdminGeneralComponent]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(AdminGeneralComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-admin-general',
|
|
||||||
templateUrl: './admin-general.component.html',
|
|
||||||
styleUrl: './admin-general.component.css'
|
|
||||||
})
|
|
||||||
export class AdminGeneralComponent {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,202 @@
|
||||||
|
.groupLists-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container mat-form-field {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
flex-grow: 1;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unidad-card, .elements-card {
|
||||||
|
flex: 1 1 45%;
|
||||||
|
background-color: #fafafa;
|
||||||
|
height: 600px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.element-content {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details-card, .classroom-view {
|
||||||
|
flex: 1 1 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-card-title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-with-breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-card-subtitle {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-card-subtitle a {
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-card-subtitle a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groups-button-row {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-content {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-content mat-icon {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable-item:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-item {
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
margin-left: auto;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions mat-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 16px;
|
||||||
|
color: #757575;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions mat-icon:hover {
|
||||||
|
color: #212121;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-list {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-spinner {
|
||||||
|
margin: 0 auto;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.classroomBtn-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header mat-form-field {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters {
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.saved-filter {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 300px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.results {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.results-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-card {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 250px;
|
||||||
|
height: 250px; /* Fijo para mantener la forma cuadrada */
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginator-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-card {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -1 +1,140 @@
|
||||||
<p>advanced-search works!</p>
|
<h2 class="title" i18n="@@searchTitle">Búsqueda</h2>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<mat-form-field>
|
||||||
|
<mat-label i18n="@@selectFilterLabel">Seleccione filtro</mat-label>
|
||||||
|
<mat-select (selectionChange)="loadSelectedFilter($event.value)">
|
||||||
|
<mat-option *ngFor="let savedFilter of savedFilterNames" [value]="savedFilter">
|
||||||
|
{{ savedFilter[0] }}
|
||||||
|
</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<mat-divider class="divider"></mat-divider>
|
||||||
|
<div class="main-content">
|
||||||
|
<div class="filters">
|
||||||
|
<mat-form-field>
|
||||||
|
<mat-label i18n="@@selectOptionLabel">Selecciona una opción</mat-label>
|
||||||
|
<mat-select [(value)]="selectedFilter1" (selectionChange)="applyFilter()">
|
||||||
|
<mat-option value="ou" i18n="@@organizationalUnitsOption">Unidades organizativas</mat-option>
|
||||||
|
<mat-option value="client" i18n="@@clientsOption">Clientes</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field class="example-full-width">
|
||||||
|
<mat-label i18n="@@nameLabel">Nombre</mat-label>
|
||||||
|
<input matInput placeholder="Unidad organizativa" (input)="applyFilter()" [(ngModel)]="filterName" i18n-placeholder="@@namePlaceholder">
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- FILTROS UNIDAD ORGANIZATIVA-->
|
||||||
|
|
||||||
|
<ng-container *ngIf="selectedFilter1 === 'ou'">
|
||||||
|
|
||||||
|
<mat-form-field [disabled]="selectedFilter1 === 'ou'">
|
||||||
|
<mat-label i18n="@@unitTypeLabel">Tipo de unidad</mat-label>
|
||||||
|
<mat-select [(value)]="selectedFilter2" (selectionChange)="applyFilter()">
|
||||||
|
<mat-option value="organizational-unit" i18n="@@organizationalUnitOption">Unidad organizativa</mat-option>
|
||||||
|
<mat-option value="classroom-group" i18n="@@classroomsGroupOption">Grupos de aulas</mat-option>
|
||||||
|
<mat-option value="classroom" i18n="@@classroomOption">Aulas</mat-option>
|
||||||
|
<mat-option value="client-group" i18n="@@clientGroupOption">Grupos de clientes</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field>
|
||||||
|
<mat-label i18n="@@floorLabel" class="temp_filter">Planta</mat-label>
|
||||||
|
<mat-select [(value)]="selectedFilter1">
|
||||||
|
<mat-option value="none" i18n="@@noneOption">Ninguno</mat-option>
|
||||||
|
<mat-option value="option1" i18n="@@option1">Planta 1</mat-option>
|
||||||
|
<mat-option value="option2" i18n="@@option2">Planta 2</mat-option>
|
||||||
|
<mat-option value="option3" i18n="@@option3">Planta 3</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- FILTROS CLIENTES -->
|
||||||
|
|
||||||
|
<ng-container *ngIf="selectedFilter1 === 'client'">
|
||||||
|
|
||||||
|
<mat-form-field>
|
||||||
|
<mat-label i18n="@@selectAnotherOptionLabel" class="temp_filter">Sistema Operativo</mat-label>
|
||||||
|
<mat-select multiple [(value)]="selectedFilterOS" >
|
||||||
|
<mat-option value="none" i18n="@@noneOption">Ninguno</mat-option>
|
||||||
|
<mat-option value="Windows 10 Education 1803 64 bits">Windows 10 Education 1803 64 bits</mat-option>
|
||||||
|
<mat-option value="Ubuntu 18.04.1 LTS 64 bits">Ubuntu 18.04.1 LTS 64 bits</mat-option>
|
||||||
|
<mat-option value="Ubuntu 16.04.4 LTS 64 bits">Ubuntu 16.04.4 LTS 64 bits</mat-option>
|
||||||
|
<mat-option value="DATA">RESTO DE OPCIONES TBI</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
|
||||||
|
<mat-form-field>
|
||||||
|
<mat-label i18n="@@selectStateLabel" class="temp_filter">Estado</mat-label>
|
||||||
|
<mat-select multiple [(value)]="selectedFilterStatus">
|
||||||
|
<mat-option value="off" i18n="@@offOption">off</mat-option>
|
||||||
|
<mat-option value="initializing" i18n="@@initializingOption">initializing</mat-option>
|
||||||
|
<mat-option value="oglive" i18n="@@ogliveOption">oglive</mat-option>
|
||||||
|
<mat-option value="busy" i18n="@@busyOption">busy</mat-option>
|
||||||
|
<mat-option value="linux" i18n="@@linuxOption">linux</mat-option>
|
||||||
|
<mat-option value="linux_session" i18n="@@linuxSessionOption">linux_session</mat-option>
|
||||||
|
<mat-option value="macos" i18n="@@macosOption">macos</mat-option>
|
||||||
|
<mat-option value="windows" i18n="@@windowsOption">windows</mat-option>
|
||||||
|
<mat-option value="windows_session" i18n="@@windowsSessionOption">windows_session</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field class="example-full-width">
|
||||||
|
<mat-label class="temp_filter">IP</mat-label>
|
||||||
|
<input matInput placeholder="Dírección IP" (input)="applyFilter()" i18n [(ngModel)]="filterIP">
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field class="example-full-width" >
|
||||||
|
<mat-label class="temp_filter">MAC</mat-label>
|
||||||
|
<input matInput placeholder="Dírección IP" (input)="applyFilter()" i18n [(ngModel)]="filterMAC">
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
</ng-container>
|
||||||
|
<button mat-raised-button color="primary" (click)="toggleSelectAll()">Seleccionar/Deseleccionar Todos</button>
|
||||||
|
<button mat-raised-button color="primary" (click)="saveFilters()" i18n="@@saveFiltersButton">Guardar Filtros</button>
|
||||||
|
<button mat-raised-button color="accent" (click)="sendActions()" i18n="@@sendFiltersButton" [disabled]="selectedElements.length === 0">Enviar Acción</button>
|
||||||
|
</div>
|
||||||
|
<div class="results">
|
||||||
|
<ng-container *ngIf="filteredResults && filteredResults.length > 0; else noResults">
|
||||||
|
<mat-grid-list cols="4" rowHeight="1:1">
|
||||||
|
<mat-grid-tile *ngFor="let result of filteredResults">
|
||||||
|
<mat-card class="result-card">
|
||||||
|
<mat-checkbox
|
||||||
|
[checked]="isSelected(result.name)"
|
||||||
|
(change)="onCheckboxChange($event, result.name, result.uuid)">
|
||||||
|
</mat-checkbox>
|
||||||
|
<mat-card-title>{{ result.name }}</mat-card-title>
|
||||||
|
<mat-card-content>
|
||||||
|
<p>{{ result.type !== 'client' ? result.type : '' }}</p>
|
||||||
|
<p>{{ result.type === 'client' ? result.ip : '' }}</p>
|
||||||
|
<p>{{ result.type === 'client' ? result.mac : '' }}</p>
|
||||||
|
<p *ngIf="result.type !== 'client'" i18n="@@internalUnits">
|
||||||
|
Unidades internas: {{ result.type !== 'client' ? result.children.length : 0 }}
|
||||||
|
</p>
|
||||||
|
<p *ngIf="result.type !== 'client'" i18n="@@clients">
|
||||||
|
Clientes: {{ result.type !== 'client' ? result.clients.length : 0 }}
|
||||||
|
</p>
|
||||||
|
</mat-card-content>
|
||||||
|
</mat-card>
|
||||||
|
</mat-grid-tile>
|
||||||
|
</mat-grid-list>
|
||||||
|
<div class="paginator-container">
|
||||||
|
<mat-paginator [length]="length"
|
||||||
|
[pageSize]="itemsPerPage"
|
||||||
|
[pageIndex]="page"
|
||||||
|
[pageSizeOptions]="pageSizeOptions"
|
||||||
|
(page)="onPageChange($event)">
|
||||||
|
</mat-paginator>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<ng-template #noResults>
|
||||||
|
<p i18n="@@noResultsMessage">No hay resultados para mostrar.</p>
|
||||||
|
</ng-template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,25 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { DataService } from '../../services/data.service';
|
||||||
|
import { ClientCollection, UnidadOrganizativa } from '../../model/model';
|
||||||
|
import { MatDialog } from '@angular/material/dialog';
|
||||||
|
import { CreateOrganizationalUnitComponent } from '../../shared/organizational-units/create-organizational-unit/create-organizational-unit.component';
|
||||||
|
import { DeleteModalComponent } from '../../../../shared/delete_modal/delete-modal/delete-modal.component';
|
||||||
|
import { CreateClientComponent } from '../../shared/clients/create-client/create-client.component';
|
||||||
|
import { EditOrganizationalUnitComponent } from '../../shared/organizational-units/edit-organizational-unit/edit-organizational-unit.component';
|
||||||
|
import { EditClientComponent } from '../../shared/clients/edit-client/edit-client.component';
|
||||||
|
import { ShowOrganizationalUnitComponent} from "../../shared/organizational-units/show-organizational-unit/show-organizational-unit.component";
|
||||||
|
import {ToastrService} from "ngx-toastr";
|
||||||
|
import {TreeViewComponent} from "../../shared/tree-view/tree-view.component";
|
||||||
|
import {MatBottomSheet} from "@angular/material/bottom-sheet";
|
||||||
|
import {LegendComponent} from "../../shared/legend/legend.component";
|
||||||
|
import { ClassroomViewDialogComponent } from '../../shared/classroom-view/classroom-view-modal';
|
||||||
|
import {HttpClient} from "@angular/common/http";
|
||||||
|
import {PageEvent} from "@angular/material/paginator";
|
||||||
|
import { SaveFiltersDialogComponent } from '../../shared/save-filters-dialog/save-filters-dialog.component';
|
||||||
|
import { AcctionsModalComponent } from '../../shared/acctions-modal/acctions-modal.component';
|
||||||
|
import {MatTableDataSource} from "@angular/material/table";
|
||||||
|
import {DatePipe} from "@angular/common";
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-advanced-search',
|
selector: 'app-advanced-search',
|
||||||
|
|
@ -6,5 +27,387 @@ import { Component } from '@angular/core';
|
||||||
styleUrl: './advanced-search.component.css'
|
styleUrl: './advanced-search.component.css'
|
||||||
})
|
})
|
||||||
export class AdvancedSearchComponent {
|
export class AdvancedSearchComponent {
|
||||||
|
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
|
||||||
|
dataSource = new MatTableDataSource<any>();
|
||||||
|
organizationalUnits: UnidadOrganizativa[] = [];
|
||||||
|
selectedUnidad: UnidadOrganizativa | null = null;
|
||||||
|
selectedDetail: any | null = null;
|
||||||
|
children: any[] = [];
|
||||||
|
breadcrumb: string[] = [];
|
||||||
|
clientsData: any[] = [];
|
||||||
|
breadcrumbData: any[] = [];
|
||||||
|
loading:boolean = false;
|
||||||
|
loadingChildren:boolean = false;
|
||||||
|
searchTerm: string = '';
|
||||||
|
selectedFilter1: string = 'none';
|
||||||
|
selectedFilter2: string = 'none';
|
||||||
|
selectedFilterOS: string[] = [];
|
||||||
|
selectedFilterStatus: string[] = [];
|
||||||
|
filterIP: string = '';
|
||||||
|
filterMAC: string = '';
|
||||||
|
filterName: string = '';
|
||||||
|
filteredResults: any[] = [];
|
||||||
|
savedFilterNames: any[] = [];
|
||||||
|
length: number = 0;
|
||||||
|
itemsPerPage: number = 10;
|
||||||
|
page: number = 1;
|
||||||
|
pageSizeOptions: number[] = [5, 10, 25, 100];
|
||||||
|
selectedElements: any[] = [];
|
||||||
|
isAllSelected: boolean = false;
|
||||||
|
filters: { [key: string]: string } = {};
|
||||||
|
datePipe: DatePipe = new DatePipe('es-ES');
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private dataService: DataService,
|
||||||
|
public dialog: MatDialog,
|
||||||
|
private toastService: ToastrService,
|
||||||
|
private _bottomSheet: MatBottomSheet,
|
||||||
|
private http: HttpClient
|
||||||
|
) {}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.search();
|
||||||
|
this.getFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
getFilters(): void {
|
||||||
|
this.dataService.getFilters().subscribe(
|
||||||
|
data => {
|
||||||
|
this.savedFilterNames = data.map((filter: any) => [filter.name, filter.uuid]);
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.error('Error fetching filters:', error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
search(): void {
|
||||||
|
this.loading = true;
|
||||||
|
this.dataService.getOrganizationalUnits(this.searchTerm).subscribe(
|
||||||
|
data => {
|
||||||
|
this.organizationalUnits = data;
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.error('Error fetching unidades organizativas', error);
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
onSelectUnidad(unidad: UnidadOrganizativa): void {
|
||||||
|
this.selectedUnidad = unidad;
|
||||||
|
this.selectedDetail = unidad;
|
||||||
|
this.breadcrumb = [unidad.name];
|
||||||
|
this.breadcrumbData = [unidad];
|
||||||
|
this.loadChildrenAndClients(unidad.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
onSelectChild(child: any): void {
|
||||||
|
this.selectedDetail = child;
|
||||||
|
if (child.type !== 'client' && child.uuid && child.id) {
|
||||||
|
this.breadcrumb.push(child.name || child.name);
|
||||||
|
this.breadcrumbData.push(child);
|
||||||
|
this.loadChildrenAndClients(child.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
navigateToBreadcrumb(index: number): void {
|
||||||
|
this.breadcrumb = this.breadcrumb.slice(0, index + 1);
|
||||||
|
const target = this.breadcrumbData[index];
|
||||||
|
this.breadcrumbData = this.breadcrumbData.slice(0, index + 1);
|
||||||
|
if (target.type === 'client') {
|
||||||
|
this.selectedDetail = target;
|
||||||
|
} else {
|
||||||
|
this.loadChildrenAndClients(target.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadChildrenAndClients(id: string): void {
|
||||||
|
this.loadingChildren = true
|
||||||
|
this.dataService.getChildren(id).subscribe(
|
||||||
|
childrenData => {
|
||||||
|
this.dataService.getClients(id).subscribe(
|
||||||
|
clientsData => {
|
||||||
|
this.clientsData = clientsData;
|
||||||
|
const newChildren = [...childrenData, ...clientsData];
|
||||||
|
|
||||||
|
if (newChildren.length > 0) {
|
||||||
|
this.children = newChildren;
|
||||||
|
} else {
|
||||||
|
this.children = [];
|
||||||
|
}
|
||||||
|
this.loadingChildren = false
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.error('Error fetching clients', error);
|
||||||
|
this.clientsData = [];
|
||||||
|
this.children = [];
|
||||||
|
this.loadingChildren = false
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.error('Error fetching children', error);
|
||||||
|
this.children = [];
|
||||||
|
this.loadingChildren = false
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
addOU(event: MouseEvent, parent:any = null): void {
|
||||||
|
event.stopPropagation();
|
||||||
|
const dialogRef = this.dialog.open(CreateOrganizationalUnitComponent, { data: { parent }, width: '900px'});
|
||||||
|
dialogRef.afterClosed().subscribe(() => {
|
||||||
|
this.dataService.getOrganizationalUnits().subscribe(
|
||||||
|
data => {
|
||||||
|
this.organizationalUnits = data
|
||||||
|
this.loadChildrenAndClients(parent.id);
|
||||||
|
},
|
||||||
|
error => console.error('Error fetching unidades organizativas', error)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
addClient(event: MouseEvent, organizationalUnit:any = null): void {
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
const dialogRef = this.dialog.open(CreateClientComponent, { data: { organizationalUnit }, width: '900px'});
|
||||||
|
|
||||||
|
dialogRef.afterClosed().subscribe(() => {
|
||||||
|
this.dataService.getOrganizationalUnits().subscribe(
|
||||||
|
data => {
|
||||||
|
this.organizationalUnits = data
|
||||||
|
this.loadChildrenAndClients(organizationalUnit.id);
|
||||||
|
},
|
||||||
|
error => console.error('Error fetching unidades organizativas', error)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
onDeleteClick(event: MouseEvent, uuid: string, name: string, type: string): void {
|
||||||
|
event.stopPropagation();
|
||||||
|
if (type === 'client') {
|
||||||
|
const dialogRef = this.dialog.open(DeleteModalComponent, {
|
||||||
|
width: '400px',
|
||||||
|
data: { name }
|
||||||
|
});
|
||||||
|
|
||||||
|
dialogRef.afterClosed().subscribe(result => {
|
||||||
|
if (result) {
|
||||||
|
this.dataService.deleteElement(uuid, type).subscribe(
|
||||||
|
() => {
|
||||||
|
this.loadChildrenAndClients(this.selectedUnidad?.id || '');
|
||||||
|
this.dataService.getOrganizationalUnits().subscribe(
|
||||||
|
data => this.organizationalUnits = data,
|
||||||
|
error => console.error('Error fetching unidades organizativas', error)
|
||||||
|
);
|
||||||
|
this.openSnackBar(false, 'Entidad eliminada exitosamente')
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.error('Error deleting element', error)
|
||||||
|
this.openSnackBar(true, error.error['hydra:description'])
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const dialogDeleteGroupRef = this.dialog.open(DeleteModalComponent, {
|
||||||
|
width: '400px',
|
||||||
|
data: { name }
|
||||||
|
});
|
||||||
|
|
||||||
|
dialogDeleteGroupRef.afterClosed().subscribe(result => {
|
||||||
|
if (result && result === 'delete') {
|
||||||
|
this.dataService.deleteElement(uuid, type).subscribe(
|
||||||
|
() => {
|
||||||
|
this.loadChildrenAndClients(this.selectedUnidad?.id || '');
|
||||||
|
this.dataService.getOrganizationalUnits().subscribe(
|
||||||
|
data => this.organizationalUnits = data,
|
||||||
|
error => console.error('Error fetching unidades organizativas', error)
|
||||||
|
);
|
||||||
|
this.openSnackBar(false, 'Entidad eliminada exitosamente')
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.error('Error deleting element', error)
|
||||||
|
this.openSnackBar(true, error.error['hydra:description'])
|
||||||
|
}
|
||||||
|
);
|
||||||
|
} else if (result && result === 'change') {
|
||||||
|
this.dataService.changeParent(uuid).subscribe(
|
||||||
|
() => {
|
||||||
|
this.loadChildrenAndClients(this.selectedUnidad?.id || '');
|
||||||
|
this.dataService.getOrganizationalUnits().subscribe(
|
||||||
|
data => this.organizationalUnits = data,
|
||||||
|
error => console.error('Error fetching unidades organizativas', error)
|
||||||
|
);
|
||||||
|
this.openSnackBar(false, 'Entidad eliminada exitosamente')
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.error('Error deleting element', error)
|
||||||
|
this.openSnackBar(true, error.error['hydra:description'])
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditClick(event: MouseEvent, type: any, uuid: string): void {
|
||||||
|
event.stopPropagation();
|
||||||
|
if (type != "client") {
|
||||||
|
const dialogRef = this.dialog.open(EditOrganizationalUnitComponent, { data: { uuid }, width: '700px'});
|
||||||
|
} else {
|
||||||
|
console.log('Editar cliente');
|
||||||
|
const dialogRef = this.dialog.open(EditClientComponent, { data: { uuid }, width: '700px' } );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onShowClick(event: MouseEvent, data: any): void {
|
||||||
|
event.stopPropagation();
|
||||||
|
if (data.type != "client") {
|
||||||
|
const dialogRef = this.dialog.open(ShowOrganizationalUnitComponent, { data: { data }, width: '700px'});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onTreeClick(event: MouseEvent, data: any): void {
|
||||||
|
event.stopPropagation();
|
||||||
|
if (data.type != "client") {
|
||||||
|
const dialogRef = this.dialog.open(TreeViewComponent, { data: { data }, width: '800px'});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
openSnackBar(isError: boolean, message: string) {
|
||||||
|
if (isError) {
|
||||||
|
this.toastService.error(' Error al eliminar la entidad: ' + message, 'Error');
|
||||||
|
} else
|
||||||
|
this.toastService.success(message, 'Éxito');
|
||||||
|
}
|
||||||
|
|
||||||
|
openBottomSheet(): void {
|
||||||
|
this._bottomSheet.open(LegendComponent);
|
||||||
|
}
|
||||||
|
|
||||||
|
roomMap(): void {
|
||||||
|
if (this.selectedDetail && this.selectedDetail.type === 'classroom') {
|
||||||
|
const dialogRef = this.dialog.open(ClassroomViewDialogComponent, {
|
||||||
|
width: '90vw',
|
||||||
|
data: { clients: this.clientsData }
|
||||||
|
});
|
||||||
|
|
||||||
|
dialogRef.afterClosed().subscribe(result => {
|
||||||
|
console.log('The dialog was closed');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
applyFilter() {
|
||||||
|
this.dataService.getFilteredResults(this.selectedFilter1, this.selectedFilter2, this.filterName, this.filterIP, this.filterMAC, this.page, this.itemsPerPage)
|
||||||
|
.subscribe(
|
||||||
|
response => {
|
||||||
|
this.filteredResults = response.results;
|
||||||
|
this.length = response.total;
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.error('Error al obtener los resultados filtrados', error);
|
||||||
|
this.filteredResults = [];
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
onPageChange(event: PageEvent) {
|
||||||
|
this.page = event.pageIndex;
|
||||||
|
this.itemsPerPage = event.pageSize;
|
||||||
|
this.applyFilter();
|
||||||
|
}
|
||||||
|
|
||||||
|
saveFilters() {
|
||||||
|
const dialogRef = this.dialog.open(SaveFiltersDialogComponent);
|
||||||
|
|
||||||
|
dialogRef.afterClosed().subscribe(result => {
|
||||||
|
if (result) {
|
||||||
|
const filters = {
|
||||||
|
name: result,
|
||||||
|
favourite: true,
|
||||||
|
filters: {
|
||||||
|
filter0: this.filterName,
|
||||||
|
filter1: this.selectedFilter1,
|
||||||
|
filter2: this.selectedFilter2,
|
||||||
|
filter3: this.selectedFilterOS,
|
||||||
|
filter4: this.selectedFilterStatus,
|
||||||
|
filter5: this.filterIP,
|
||||||
|
filter6: this.filterMAC,
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.http.post(`${this.baseUrl}/views`, filters).subscribe(response => {
|
||||||
|
console.log('Response from server:', response);
|
||||||
|
this.toastService.success('Se ha guardado el filtro correctamente');
|
||||||
|
}, error => {
|
||||||
|
console.error('Error:', error);
|
||||||
|
this.toastService.error(error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
loadSelectedFilter(savedFilter: any) {
|
||||||
|
const url = `${this.baseUrl}/views/` + savedFilter[1];
|
||||||
|
console.log('llamando a:', url);
|
||||||
|
|
||||||
|
this.dataService.getFilter(savedFilter[1]).subscribe(response => {
|
||||||
|
console.log('Response from server:', response.filters);
|
||||||
|
if (response) {
|
||||||
|
console.log('Filter1:', response.filters);
|
||||||
|
this.filterName = response.filters.filter0 || '';
|
||||||
|
this.selectedFilter1 = response.filters.filter1 || null;
|
||||||
|
this.selectedFilter2 = response.filters.filter2 || '';
|
||||||
|
|
||||||
|
this.selectedFilterOS = response.filters.filter3 || [];
|
||||||
|
this.selectedFilterStatus = response.filters.filter4 || [];
|
||||||
|
this.filterIP = response.filters.filter5 || '';
|
||||||
|
this.filterMAC = response.filters.filter6 || '';
|
||||||
|
|
||||||
|
this.applyFilter();
|
||||||
|
}
|
||||||
|
}, error => {
|
||||||
|
console.error('Error:', error);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onCheckboxChange(event: any, name: string, uuid: string) {
|
||||||
|
if (event.checked) {
|
||||||
|
this.selectedElements.push(uuid);
|
||||||
|
} else {
|
||||||
|
const index = this.selectedElements.indexOf(name);
|
||||||
|
if (index > -1) {
|
||||||
|
this.selectedElements.splice(index, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isAllSelected = this.selectedElements.length === this.filteredResults.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleSelectAll() {
|
||||||
|
this.isAllSelected = !this.isAllSelected;
|
||||||
|
|
||||||
|
if (this.isAllSelected) {
|
||||||
|
this.selectedElements = this.filteredResults.map(result => result.uuid);
|
||||||
|
} else {
|
||||||
|
this.selectedElements = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
isSelected(name: string): boolean {
|
||||||
|
return this.selectedElements.includes(name);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
sendActions() {
|
||||||
|
const dialogRef = this.dialog.open(AcctionsModalComponent, { data: { selectedElements: this.selectedElements }, width: '700px'});
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -6,8 +6,8 @@ import {MatDialog} from "@angular/material/dialog";
|
||||||
import {ToastrService} from "ngx-toastr";
|
import {ToastrService} from "ngx-toastr";
|
||||||
import {HttpClient} from "@angular/common/http";
|
import {HttpClient} from "@angular/common/http";
|
||||||
import {DataService} from "./data.service";
|
import {DataService} from "./data.service";
|
||||||
import {EditClientComponent} from "../clients/edit-client/edit-client.component";
|
import {EditClientComponent} from "../../shared/clients/edit-client/edit-client.component";
|
||||||
import {CreateClientComponent} from "../clients/create-client/create-client.component";
|
import {CreateClientComponent} from "../../shared/clients/create-client/create-client.component";
|
||||||
import {DeleteModalComponent} from "../../../../shared/delete_modal/delete-modal/delete-modal.component";
|
import {DeleteModalComponent} from "../../../../shared/delete_modal/delete-modal/delete-modal.component";
|
||||||
import { throwError } from 'rxjs';
|
import { throwError } from 'rxjs';
|
||||||
import { catchError } from 'rxjs/operators';
|
import { catchError } from 'rxjs/operators';
|
||||||
|
|
@ -156,146 +156,7 @@
|
||||||
</div>
|
</div>
|
||||||
</mat-tab>
|
</mat-tab>
|
||||||
<mat-tab i18n-label label="Búsqueda avanzada" >
|
<mat-tab i18n-label label="Búsqueda avanzada" >
|
||||||
<h2 class="title" i18n="@@searchTitle">Búsqueda</h2>
|
<app-advanced-search></app-advanced-search>
|
||||||
<div class="container">
|
|
||||||
<div class="header">
|
|
||||||
<mat-form-field>
|
|
||||||
<mat-label i18n="@@selectFilterLabel">Seleccione filtro</mat-label>
|
|
||||||
<mat-select (selectionChange)="loadSelectedFilter($event.value)">
|
|
||||||
<mat-option *ngFor="let savedFilter of savedFilterNames" [value]="savedFilter">
|
|
||||||
{{ savedFilter[0] }}
|
|
||||||
</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
<mat-divider class="divider"></mat-divider>
|
|
||||||
<div class="main-content">
|
|
||||||
<div class="filters">
|
|
||||||
<mat-form-field>
|
|
||||||
<mat-label i18n="@@selectOptionLabel">Selecciona una opción</mat-label>
|
|
||||||
<mat-select [(value)]="selectedFilter1" (selectionChange)="applyFilter()">
|
|
||||||
<mat-option value="ou" i18n="@@organizationalUnitsOption">Unidades organizativas</mat-option>
|
|
||||||
<mat-option value="client" i18n="@@clientsOption">Clientes</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
<mat-form-field class="example-full-width">
|
|
||||||
<mat-label i18n="@@nameLabel">Nombre</mat-label>
|
|
||||||
<input matInput placeholder="Unidad organizativa" (input)="applyFilter()" [(ngModel)]="filterName" i18n-placeholder="@@namePlaceholder">
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- FILTROS UNIDAD ORGANIZATIVA-->
|
|
||||||
|
|
||||||
<ng-container *ngIf="selectedFilter1 === 'ou'">
|
|
||||||
|
|
||||||
<mat-form-field [disabled]="selectedFilter1 === 'ou'">
|
|
||||||
<mat-label i18n="@@unitTypeLabel">Tipo de unidad</mat-label>
|
|
||||||
<mat-select [(value)]="selectedFilter2" (selectionChange)="applyFilter()">
|
|
||||||
<mat-option value="organizational-unit" i18n="@@organizationalUnitOption">Unidad organizativa</mat-option>
|
|
||||||
<mat-option value="classroom-group" i18n="@@classroomsGroupOption">Grupos de aulas</mat-option>
|
|
||||||
<mat-option value="classroom" i18n="@@classroomOption">Aulas</mat-option>
|
|
||||||
<mat-option value="client-group" i18n="@@clientGroupOption">Grupos de clientes</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field>
|
|
||||||
<mat-label i18n="@@floorLabel" class="temp_filter">Planta</mat-label>
|
|
||||||
<mat-select [(value)]="selectedFilter1">
|
|
||||||
<mat-option value="none" i18n="@@noneOption">Ninguno</mat-option>
|
|
||||||
<mat-option value="option1" i18n="@@option1">Planta 1</mat-option>
|
|
||||||
<mat-option value="option2" i18n="@@option2">Planta 2</mat-option>
|
|
||||||
<mat-option value="option3" i18n="@@option3">Planta 3</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<!-- FILTROS CLIENTES -->
|
|
||||||
|
|
||||||
<ng-container *ngIf="selectedFilter1 === 'client'">
|
|
||||||
|
|
||||||
<mat-form-field>
|
|
||||||
<mat-label i18n="@@selectAnotherOptionLabel" class="temp_filter">Sistema Operativo</mat-label>
|
|
||||||
<mat-select multiple [(value)]="selectedFilterOS" >
|
|
||||||
<mat-option value="none" i18n="@@noneOption">Ninguno</mat-option>
|
|
||||||
<mat-option value="Windows 10 Education 1803 64 bits">Windows 10 Education 1803 64 bits</mat-option>
|
|
||||||
<mat-option value="Ubuntu 18.04.1 LTS 64 bits">Ubuntu 18.04.1 LTS 64 bits</mat-option>
|
|
||||||
<mat-option value="Ubuntu 16.04.4 LTS 64 bits">Ubuntu 16.04.4 LTS 64 bits</mat-option>
|
|
||||||
<mat-option value="DATA">RESTO DE OPCIONES TBI</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
|
|
||||||
<mat-form-field>
|
|
||||||
<mat-label i18n="@@selectStateLabel" class="temp_filter">Estado</mat-label>
|
|
||||||
<mat-select multiple [(value)]="selectedFilterStatus">
|
|
||||||
<mat-option value="off" i18n="@@offOption">off</mat-option>
|
|
||||||
<mat-option value="initializing" i18n="@@initializingOption">initializing</mat-option>
|
|
||||||
<mat-option value="oglive" i18n="@@ogliveOption">oglive</mat-option>
|
|
||||||
<mat-option value="busy" i18n="@@busyOption">busy</mat-option>
|
|
||||||
<mat-option value="linux" i18n="@@linuxOption">linux</mat-option>
|
|
||||||
<mat-option value="linux_session" i18n="@@linuxSessionOption">linux_session</mat-option>
|
|
||||||
<mat-option value="macos" i18n="@@macosOption">macos</mat-option>
|
|
||||||
<mat-option value="windows" i18n="@@windowsOption">windows</mat-option>
|
|
||||||
<mat-option value="windows_session" i18n="@@windowsSessionOption">windows_session</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field class="example-full-width">
|
|
||||||
<mat-label class="temp_filter">IP</mat-label>
|
|
||||||
<input matInput placeholder="Dírección IP" (input)="applyFilter()" i18n [(ngModel)]="filterIP">
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field class="example-full-width" >
|
|
||||||
<mat-label class="temp_filter">MAC</mat-label>
|
|
||||||
<input matInput placeholder="Dírección IP" (input)="applyFilter()" i18n [(ngModel)]="filterMAC">
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
</ng-container>
|
|
||||||
<button mat-raised-button color="primary" (click)="toggleSelectAll()">Seleccionar/Deseleccionar Todos</button>
|
|
||||||
<button mat-raised-button color="primary" (click)="saveFilters()" i18n="@@saveFiltersButton">Guardar Filtros</button>
|
|
||||||
<button mat-raised-button color="accent" (click)="sendActions()" i18n="@@sendFiltersButton" [disabled]="selectedElements.length === 0">Enviar Acción</button>
|
|
||||||
</div>
|
|
||||||
<div class="results">
|
|
||||||
<ng-container *ngIf="filteredResults && filteredResults.length > 0; else noResults">
|
|
||||||
<mat-grid-list cols="4" rowHeight="1:1">
|
|
||||||
<mat-grid-tile *ngFor="let result of filteredResults">
|
|
||||||
<mat-card class="result-card">
|
|
||||||
<mat-checkbox
|
|
||||||
[checked]="isSelected(result.name)"
|
|
||||||
(change)="onCheckboxChange($event, result.name, result.uuid)">
|
|
||||||
</mat-checkbox>
|
|
||||||
<mat-card-title>{{ result.name }}</mat-card-title>
|
|
||||||
<mat-card-content>
|
|
||||||
<p>{{ result.type !== 'client' ? result.type : '' }}</p>
|
|
||||||
<p>{{ result.type === 'client' ? result.ip : '' }}</p>
|
|
||||||
<p>{{ result.type === 'client' ? result.mac : '' }}</p>
|
|
||||||
<p *ngIf="result.type !== 'client'" i18n="@@internalUnits">
|
|
||||||
Unidades internas: {{ result.type !== 'client' ? result.children.length : 0 }}
|
|
||||||
</p>
|
|
||||||
<p *ngIf="result.type !== 'client'" i18n="@@clients">
|
|
||||||
Clientes: {{ result.type !== 'client' ? result.clients.length : 0 }}
|
|
||||||
</p>
|
|
||||||
</mat-card-content>
|
|
||||||
</mat-card>
|
|
||||||
</mat-grid-tile>
|
|
||||||
</mat-grid-list>
|
|
||||||
<div class="paginator-container">
|
|
||||||
<mat-paginator [length]="length"
|
|
||||||
[pageSize]="itemsPerPage"
|
|
||||||
[pageIndex]="page"
|
|
||||||
[pageSizeOptions]="pageSizeOptions"
|
|
||||||
(page)="onPageChange($event)">
|
|
||||||
</mat-paginator>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
|
||||||
<ng-template #noResults>
|
|
||||||
<p i18n="@@noResultsMessage">No hay resultados para mostrar.</p>
|
|
||||||
</ng-template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</mat-tab>
|
</mat-tab>
|
||||||
<mat-tab i18n-label label="Clientes">
|
<mat-tab i18n-label label="Clientes">
|
||||||
<app-client-tab-view></app-client-tab-view>
|
<app-client-tab-view></app-client-tab-view>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue