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

Groups base structure display

pull/4/head
Alvaro Puente Mella 2024-06-12 16:05:36 +02:00
parent 60c4d61fcf
commit 3efa856453
13 changed files with 281 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ogWebconsole/src/app/app-routing.module.ts
View File

@ -8,6 +8,7 @@ import { PageNotFoundComponent } from './components/page-not-found/page-not-foun
import { AdminComponent } from './components/pages/admin/admin.component';
import { UsersComponent } from './components/pages/admin/users/users/users.component';
import { RolesComponent } from './components/pages/admin/roles/roles/roles.component';
import { GroupsComponent } from './components/groups/groups.component';
const routes: Routes = [
{ path: '', redirectTo: 'auth/login', pathMatch: 'full' },
{
@ -18,6 +19,7 @@ const routes: Routes = [
{ path: 'admin', component: AdminComponent },
{ path: 'users', component: UsersComponent },
{ path: 'user-groups', component: RolesComponent },
{ path: 'groups', component: GroupsComponent },
],
},
{

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

@ -33,6 +33,7 @@ import { EditUserModalComponent } from './components/pages/admin/users/users/edi
import { AddRoleModalComponent } from './components/pages/admin/roles/roles/add-role-modal/add-role-modal.component';
import { DeleteRoleModalComponent } from './components/pages/admin/roles/roles/delete-role-modal/delete-role-modal.component';
import { ChangePasswordModalComponent } from './components/pages/admin/users/users/change-password-modal/change-password-modal.component';
import { GroupsComponent } from './components/groups/groups.component';
@NgModule({ declarations: [
@ -51,7 +52,8 @@ import { ChangePasswordModalComponent } from './components/pages/admin/users/use
EditUserModalComponent,
AddRoleModalComponent,
DeleteRoleModalComponent,
ChangePasswordModalComponent
ChangePasswordModalComponent,
GroupsComponent
],
bootstrap: [AppComponent],
imports: [BrowserModule,

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

@ -0,0 +1,35 @@
// data.service.ts
import { Injectable } from '@angular/core';
import { UnidadOrganizativa } from './model';
@Injectable({
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;
}
}

7
ogWebconsole/src/app/components/groups/groups.component.css 100644
View File

@ -0,0 +1,7 @@
.groupLists-container{
display: flex;
}
mat-card {
margin: 10px;
}

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

@ -0,0 +1,39 @@
<!-- groups.component.html -->
<p>groups works!</p>
<div class="groupLists-container">
<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)">
{{ 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-list role="list">
<mat-list-item
*ngFor="let aula of selectedUnidad.aulas"
(click)="onSelectAula(aula)">
{{ aula.nombre }}
</mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>
<mat-card *ngIf="selectedAula">
<mat-card-title>Clientes</mat-card-title>
<mat-card-content>
<mat-list role="list">
<mat-list-item
*ngFor="let cliente of selectedClientes">
{{ cliente.nombre }}
</mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>
</div>

23
ogWebconsole/src/app/components/groups/groups.component.spec.ts 100644
View File

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

33
ogWebconsole/src/app/components/groups/groups.component.ts 100644
View File

@ -0,0 +1,33 @@
// groups.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { UnidadOrganizativa, Aula, Cliente } from './model';
@Component({
selector: 'app-groups',
templateUrl: './groups.component.html',
styleUrls: ['./groups.component.css']
})
export class GroupsComponent implements OnInit {
unidadesOrganizativas: UnidadOrganizativa[] = [];
selectedUnidad: UnidadOrganizativa | null = null;
selectedAula: Aula | null = null;
selectedClientes: Cliente[] = [];
constructor(private dataService: DataService) {}
ngOnInit(): void {
this.unidadesOrganizativas = this.dataService.getUnidadesOrganizativas();
}
onSelectUnidad(unidad: UnidadOrganizativa): void {
this.selectedUnidad = unidad;
this.selectedAula = null;
this.selectedClientes = [];
}
onSelectAula(aula: Aula): void {
this.selectedAula = aula;
this.selectedClientes = aula.clientes;
}
}

19
ogWebconsole/src/app/components/groups/model.ts 100644
View File

@ -0,0 +1,19 @@
// models.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[];
}

2
ogWebconsole/src/app/components/layout/header/header.component.html
View File

@ -4,7 +4,7 @@
</button>
<span class="navbar-tittle" routerLink="/dashboard">Opengnsys webconsole</span>
<div class="navbar-button-row">
<button mat-flat-button color="primary">Aulas</button>
<button mat-flat-button color="primary" routerLink="/groups">Grupos</button>
<button mat-flat-button color="primary">Acciones</button>
<button mat-flat-button color="primary">Imágenes</button>
<button mat-flat-button color="primary">Componentes</button>

10
ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.css 100644
View File

@ -0,0 +1,10 @@
.user-form .form-field {
display: block;
margin-bottom: 10px; /* Puedes ajustar el valor para cambiar la separación */
}
.checkbox-group label {
display: block;
margin-bottom: 8px; /* Ajusta este valor según necesites */
}

21
ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.html 100644
View File

@ -0,0 +1,21 @@
<h1 mat-dialog-title>Editar Usuario</h1>
<div mat-dialog-content>
<form [formGroup]="userForm" class="user-form">
<mat-form-field class="form-field">
<mat-label>Nombre de usuario</mat-label>
<input matInput formControlName="username">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Contraseña</mat-label>
<input matInput formControlName="password" type="password">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Repite la contraseña</mat-label>
<input matInput formControlName="confirmPassword" type="password">
</mat-form-field>
</form>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">Cancelar</button>
<button mat-button (click)="onSubmit()">Editar</button>
</div>

23
ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.spec.ts 100644
View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ChangePasswordModalComponent } from './change-password-modal.component';
describe('ChangePasswordModalComponent', () => {
let component: ChangePasswordModalComponent;
let fixture: ComponentFixture<ChangePasswordModalComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ChangePasswordModalComponent]
})
.compileComponents();
fixture = TestBed.createComponent(ChangePasswordModalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

65
ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.ts 100644
View File

@ -0,0 +1,65 @@
import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { UserService } from '../users.service';
@Component({
selector: 'app-change-password-modal',
templateUrl: './change-password-modal.component.html',
styleUrl: './change-password-modal.component.css'
})
export class ChangePasswordModalComponent implements OnInit {
@Output() userEdited = new EventEmitter<void>();
userForm: FormGroup;
constructor(
public dialogRef: MatDialogRef<ChangePasswordModalComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
private fb: FormBuilder,
private userService: UserService
) {
this.userForm = this.fb.group({
username: [this.data.user, Validators.required],
password: [''],
confirmPassword: ['']
}, { validators: this.passwordMatchValidator });
}
ngOnInit(): void {}
onNoClick(): void {
this.dialogRef.close();
}
onSubmit(): void {
if (this.userForm.valid) {
const userPayload = {
username: this.userForm.value.username,
allowedOrganizationalUnits: this.data.user.allowedOrganizationalUnits,
password: this.userForm.value.password,
enabled: true,
userGroups: this.data.user.userGroups
};
this.userService.updateUser(this.data.user.uuid, userPayload).subscribe(
response => {
console.log('User updated successfully:', response);
this.userEdited.emit();
this.dialogRef.close(this.userForm.value);
},
error => {
console.error('Error updating user:', error);
// Agregar alguna lógica para manejar el error en la interfaz de usuario
}
);
} else {
console.error('Form is invalid');
// Agregar alguna lógica para manejar el error en la interfaz de usuario
}
}
private passwordMatchValidator(form: FormGroup): { [key: string]: boolean } | null {
return form.get('password')?.value === form.get('confirmPassword')?.value ? null : { mismatch: true };
}
}