opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refs #798 Groups component new segmentation

oggui/calendar
Alvaro Puente Mella 2024-09-30 19:50:23 +02:00
parent d6e5be3fe1
commit 13c87c2ff3
14 changed files with 751 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ogWebconsole/src/app/app.module.ts
View File

@ -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 { CreateTaskComponent } from './components/commands/commands-task/create-task/create-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 { AdminGeneralComponent } from './components/groups/components/admin-general/admin-general.component';
import { ClientTabViewComponent } from './components/groups/components/client-tab-view/client-tab-view.component';
import { AdvancedSearchComponent } from './components/groups/components/advanced-search/advanced-search.component';
@NgModule({
declarations: [
@ -155,7 +154,6 @@ import { AdvancedSearchComponent } from './components/groups/components/advanced
CreateTaskComponent,
DetailTaskComponent,
ClientTabViewComponent,
AdminGeneralComponent,
AdvancedSearchComponent
],
bootstrap: [AppComponent],

0
ogWebconsole/src/app/components/groups/components/admin-general/admin-general.component.css
View File

1
ogWebconsole/src/app/components/groups/components/admin-general/admin-general.component.html
View File

@ -1 +0,0 @@
<p>admin-general works!</p>

23
ogWebconsole/src/app/components/groups/components/admin-general/admin-general.component.spec.ts
View File

@ -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();
});
});

10
ogWebconsole/src/app/components/groups/components/admin-general/admin-general.component.ts
View File

@ -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 {
}

202
ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css
View File

@ -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;
}

141
ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html
View File

@ -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>

407
ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.ts
View File

@ -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({
selector: 'app-advanced-search',
@ -6,5 +27,387 @@ import { Component } from '@angular/core';
styleUrl: './advanced-search.component.css'
})
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'});
}
}

0
ogWebconsole/src/app/components/groups/shared/client-tab-view/client-tab-view.component.css → ogWebconsole/src/app/components/groups/components/client-tab-view/client-tab-view.component.css
View File

0
ogWebconsole/src/app/components/groups/shared/client-tab-view/client-tab-view.component.html → ogWebconsole/src/app/components/groups/components/client-tab-view/client-tab-view.component.html
View File

0
ogWebconsole/src/app/components/groups/shared/client-tab-view/client-tab-view.component.spec.ts → ogWebconsole/src/app/components/groups/components/client-tab-view/client-tab-view.component.spec.ts
View File

4
ogWebconsole/src/app/components/groups/shared/client-tab-view/client-tab-view.component.ts → ogWebconsole/src/app/components/groups/components/client-tab-view/client-tab-view.component.ts
View File

@ -6,8 +6,8 @@ import {MatDialog} from "@angular/material/dialog";
import {ToastrService} from "ngx-toastr";
import {HttpClient} from "@angular/common/http";
import {DataService} from "./data.service";
import {EditClientComponent} from "../clients/edit-client/edit-client.component";
import {CreateClientComponent} from "../clients/create-client/create-client.component";
import {EditClientComponent} from "../../shared/clients/edit-client/edit-client.component";
import {CreateClientComponent} from "../../shared/clients/create-client/create-client.component";
import {DeleteModalComponent} from "../../../../shared/delete_modal/delete-modal/delete-modal.component";
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

0
ogWebconsole/src/app/components/groups/shared/client-tab-view/data.service.ts → ogWebconsole/src/app/components/groups/components/client-tab-view/data.service.ts
View File

141
ogWebconsole/src/app/components/groups/groups.component.html
View File

@ -156,146 +156,7 @@
</div>
</mat-tab>
<mat-tab i18n-label label="Búsqueda avanzada" >
<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>
<app-advanced-search></app-advanced-search>
</mat-tab>
<mat-tab i18n-label label="Clientes">
<app-client-tab-view></app-client-tab-view>