437 lines
15 KiB
TypeScript
437 lines
15 KiB
TypeScript
import {Component, OnInit, ViewChild} 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";
|
|
import {AdvancedSearchComponent} from "./components/advanced-search/advanced-search.component";
|
|
import {MatTabChangeEvent} from "@angular/material/tabs";
|
|
import {ClientTabViewComponent} from "./components/client-tab-view/client-tab-view.component";
|
|
import {
|
|
OrganizationalUnitTabViewComponent
|
|
} from "./components/organizational-unit-tab-view/organizational-unit-tab-view.component";
|
|
|
|
@Component({
|
|
selector: 'app-groups',
|
|
templateUrl: './groups.component.html',
|
|
styleUrls: ['./groups.component.css']
|
|
})
|
|
export class GroupsComponent implements OnInit {
|
|
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();
|
|
}
|
|
|
|
@ViewChild('clientTab') clientTabComponent!: ClientTabViewComponent;
|
|
@ViewChild('organizationalUnitTab') organizationalUnitTabComponent!: OrganizationalUnitTabViewComponent;
|
|
|
|
onTabChange(event: MatTabChangeEvent) {
|
|
switch (event.index) {
|
|
case 2:
|
|
this.clientTabComponent.search();
|
|
break;
|
|
case 3:
|
|
this.organizationalUnitTabComponent.search();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
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;
|
|
|
|
if (organizationalUnit && organizationalUnit.id) {
|
|
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: '900px'});
|
|
} else {
|
|
const dialogRef = this.dialog.open(EditClientComponent, { data: { uuid }, width: '900px' } );
|
|
}
|
|
}
|
|
|
|
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'});
|
|
}
|
|
|
|
}
|