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

Groups base structure

pull/4/head
Alvaro Puente Mella 2024-06-20 15:40:24 +02:00
parent 8ae5d44757
commit 3852c95b6a
9 changed files with 109 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
ogWebconsole/src/app/components/groups/data.service.ts
View File

@ -1,35 +1,55 @@
// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { UnidadOrganizativa } from './model';
@Injectable({
providedIn: 'root',
providedIn: 'root'
})
export class DataService {
private unidadesOrganizativas: UnidadOrganizativa[] = [
{
id: 1,
nombre: 'Unidad Organizativa 1',
aulas: [
{
id: 1,
nombre: 'Aula 1',
clientes: [
{ id: 1, nombre: 'Cliente 1' },
{ id: 2, nombre: 'Cliente 2' },
],
},
{
id: 2,
nombre: 'Aula 2',
clientes: [{ id: 3, nombre: 'Cliente 3' }],
},
],
},
// Otros datos de ejemplo
];
getUnidadesOrganizativas(): UnidadOrganizativa[] {
return this.unidadesOrganizativas;
private apiUrl = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=30';
constructor(private http: HttpClient) {}
getUnidadesOrganizativas(): Observable<UnidadOrganizativa[]> {
return this.http.get<any>(this.apiUrl).pipe(
map(response => {
if (response['hydra:member'] && Array.isArray(response['hydra:member'])) {
return response['hydra:member']
.filter((unidad: any) => unidad.type === 'organizational-unit')
.map((unidad: any) => ({
id: unidad.id,
nombre: unidad.name,
uuid: unidad.uuid,
type: unidad.type,
aulas: []
}));
} else {
throw new Error('Unexpected response format');
}
}),
catchError(error => {
console.error('Error fetching unidades organizativas', error);
return throwError(error);
})
);
}
getChildren(uuid: string): Observable<any[]> {
return this.http.get<any>(this.apiUrl).pipe(
map(response => {
if (response['hydra:member'] && Array.isArray(response['hydra:member'])) {
return response['hydra:member'].filter((element: any) => element.parent === `/organizational-units/${uuid}`);
} else {
throw new Error('Unexpected response format');
}
}),
catchError(error => {
console.error('Error fetching children', error);
return throwError(error);
})
);
}
}

10
ogWebconsole/src/app/components/groups/groups.component.css
View File

@ -14,4 +14,12 @@ button {
margin-left: 10px;
margin-bottom: 20px;
}
}
.clickable-item:hover {
cursor: pointer;
}
.selected-item {
background-color: #e0e0e0;
}

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

@ -1,8 +1,6 @@
<h2>Crear</h2>
<div class="groups-button-row">
<button mat-flat-button color="primary" (click)="addOU()">+ Unidad Organizativa</button>
<button mat-flat-button color="primary">+ Aula</button>
<button mat-flat-button color="primary" (click)="addClient()">+ Cliente</button>
<button mat-flat-button color="primary" (click)="addOU()">Nueva Unidad Organizativa</button>
</div>
<mat-divider></mat-divider>
<h2>Grupos</h2>
@ -10,36 +8,13 @@
<mat-card>
<mat-card-title>Unidad organizativa</mat-card-title>
<mat-card-content>
<mat-selection-list role="list">
<mat-list-option
*ngFor="let unidad of unidadesOrganizativas"
(click)="onSelectUnidad(unidad)">
<mat-list role="list">
<mat-list-item *ngFor="let unidad of unidadesOrganizativas"
(click)="onSelectUnidad(unidad)"
[ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}">
{{ unidad.nombre }}
</mat-list-option>
</mat-selection-list>
</mat-card-content>
</mat-card>
<mat-card *ngIf="selectedUnidad">
<mat-card-title>Aulas</mat-card-title>
<mat-card-content>
<mat-selection-list role="list">
<mat-list-option
*ngFor="let aula of selectedUnidad.aulas"
(click)="onSelectAula(aula)">
{{ aula.nombre }}
</mat-list-option>
</mat-selection-list>
</mat-card-content>
</mat-card>
<mat-card *ngIf="selectedAula">
<mat-card-title>Clientes</mat-card-title>
<mat-card-content>
<mat-selection-list role="list">
<mat-list-option
*ngFor="let cliente of selectedClientes">
{{ cliente.nombre }}
</mat-list-option>
</mat-selection-list>
</mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>
</div>

29
ogWebconsole/src/app/components/groups/groups.component.ts
View File

@ -1,10 +1,8 @@
// groups.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { UnidadOrganizativa, Aula, Cliente } from './model';
import { CreateOrganizationalUnitComponent } from './organizational-units/create-organizational-unit/create-organizational-unit.component';
import { UnidadOrganizativa } from './model';
import { MatDialog } from '@angular/material/dialog';
import { CreateClientComponent } from './clients/create-client/create-client.component';
import { CreateOrganizationalUnitComponent } from './organizational-units/create-organizational-unit/create-organizational-unit.component';
@Component({
selector: 'app-groups',
@ -14,32 +12,21 @@ import { CreateClientComponent } from './clients/create-client/create-client.com
export class GroupsComponent implements OnInit {
unidadesOrganizativas: UnidadOrganizativa[] = [];
selectedUnidad: UnidadOrganizativa | null = null;
selectedAula: Aula | null = null;
selectedClientes: Cliente[] = [];
constructor(private dataService: DataService, public dialog: MatDialog) {}
ngOnInit(): void {
this.unidadesOrganizativas = this.dataService.getUnidadesOrganizativas();
this.dataService.getUnidadesOrganizativas().subscribe(
data => this.unidadesOrganizativas = data,
error => console.error('Error fetching unidades organizativas', error)
);
}
onSelectUnidad(unidad: UnidadOrganizativa): void {
this.selectedUnidad = unidad;
this.selectedAula = null;
this.selectedClientes = [];
}
onSelectAula(aula: Aula): void {
this.selectedAula = aula;
this.selectedClientes = aula.clientes;
}
addOU() {
const dialogRef = this.dialog.open(CreateOrganizationalUnitComponent);
}
addClient() {
const dialogRef = this.dialog.open(CreateClientComponent);
addOU(): void {
this.dialog.open(CreateOrganizationalUnitComponent);
}
}

33
ogWebconsole/src/app/components/groups/model.ts
View File

@ -1,19 +1,16 @@
// models.ts
// model.ts
export interface Cliente {
id: number;
nombre: string;
}
export interface Aula {
id: number;
nombre: string;
clientes: Cliente[];
bloques?: Aula[];
}
export interface UnidadOrganizativa {
id: number;
nombre: string;
aulas: Aula[];
}
nombre: string;
}
export interface Aula {
nombre: string;
clientes: Cliente[];
}
export interface UnidadOrganizativa {
id: number;
nombre: string;
uuid: string;
aulas: Aula[];
}

20
ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.html
View File

@ -1,24 +1,30 @@
<h1 mat-dialog-title>Añadir Unidad Organizativa</h1>
<div mat-dialog-content>
<mat-stepper orientation="vertical" [linear]="isLinear" #stepper>
<mat-stepper orientation="vertical" [linear]="isLinear">
<!-- Step 1: General -->
<mat-step [stepControl]="generalFormGroup">
<form [formGroup]="generalFormGroup">
<ng-template matStepLabel>General</ng-template>
<mat-form-field class="form-field">
<mat-label>Tipo</mat-label>
<mat-select formControlName="type" required>
<mat-option *ngFor="let type of types" [value]="type">{{ type }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Nombre</mat-label>
<input matInput formControlName="name" required>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Padre</mat-label>
<input matInput formControlName="parent" type="url" required>
<input matInput formControlName="parent" required>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Descripción</mat-label>
<textarea matInput formControlName="description"></textarea>
</mat-form-field>
<div>
<button mat-button matStepperSiguiente>Siguiente</button>
<button mat-button matStepperNext>Siguiente</button>
</div>
</form>
</mat-step>
@ -31,13 +37,9 @@
<mat-label>Comentarios</mat-label>
<textarea matInput formControlName="comments"></textarea>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Tipo</mat-label>
<input matInput formControlName="type" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Atrás</button>
<button mat-button matStepperSiguiente>Siguiente</button>
<button mat-button matStepperNext>Siguiente</button>
</div>
</form>
</mat-step>
@ -101,7 +103,7 @@
<mat-slide-toggle formControlName="validation">Validación</mat-slide-toggle>
<div>
<button mat-button matStepperPrevious>Atrás</button>
<button mat-button (click)="onSubmit()" [disabled]="!networkForm.valid">Añadir</button>
<button mat-button (click)="onSubmit()" [disabled]="!networkSettingsFormGroup.valid">Añadir</button>
</div>
</form>
</mat-step>

27
ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.ts
View File

@ -9,10 +9,10 @@ import { MatDialogRef } from '@angular/material/dialog';
})
export class CreateOrganizationalUnitComponent implements OnInit {
isLinear = true;
networkForm: FormGroup;
generalFormGroup: FormGroup;
additionalInfoFormGroup: FormGroup;
networkSettingsFormGroup: FormGroup;
types: string[] = ['organizational-unit', 'classrooms-group', 'classroom', 'clients-group'];
constructor(
private _formBuilder: FormBuilder,
@ -20,12 +20,12 @@ export class CreateOrganizationalUnitComponent implements OnInit {
) {
this.generalFormGroup = this._formBuilder.group({
name: ['', Validators.required],
parent: ['', [Validators.required, Validators.pattern('https?://.+')]],
description: ['']
parent: ['', Validators.required],
description: [''],
type: ['', Validators.required]
});
this.additionalInfoFormGroup = this._formBuilder.group({
comments: [''],
type: ['', Validators.required]
});
this.networkSettingsFormGroup = this._formBuilder.group({
proxy: [''],
@ -43,26 +43,23 @@ export class CreateOrganizationalUnitComponent implements OnInit {
hardwareProfile: ['', Validators.pattern('https?://.+')],
validation: [false]
});
this.networkForm = this._formBuilder.group({
general: this.generalFormGroup,
additionalInfo: this.additionalInfoFormGroup,
networkSettings: this.networkSettingsFormGroup
});
}
ngOnInit() {}
onSubmit() {
if (this.networkForm.valid) {
const formData = this.networkForm.value;
if (this.generalFormGroup.valid && this.additionalInfoFormGroup.valid && this.networkSettingsFormGroup.valid) {
const formData = {
...this.generalFormGroup.value,
...this.additionalInfoFormGroup.value,
...this.networkSettingsFormGroup.value,
};
console.log('Form Data:', formData);
// handle form submission logic
this.dialogRef.close(formData); // Cierra el modal y pasa los datos del formulario
this.dialogRef.close(formData);
}
}
onNoClick(): void {
this.dialogRef.close(); // Cierra el modal sin pasar datos
this.dialogRef.close();
}
}

1
ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css
View File

@ -7,6 +7,7 @@
background-color: rgb(245, 245, 245);
transition: left 0.3s ease-in-out;
box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.5);
z-index: 99999999999;
}
.sidebar.visible {

1
ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts
View File

@ -21,7 +21,6 @@ export class SidebarComponent {
if (token) {
try {
this.decodedToken = jwtDecode(token);
console.log('Decoded token:', this.decodedToken);
this.isSuperAdmin = this.decodedToken.roles.includes('ROLE_SUPER_ADMIN');
this.username = this.decodedToken.username;
} catch (error) {