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

Improvements groups. Refactor and modern UX

develop-jenkins
Manuel Aranda Rosales 2024-10-22 18:31:09 +02:00
parent 4904e40a49
commit ba96d93a8b
10 changed files with 52 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
<h2 class="title" i18n="@@searchTitle">Búsqueda</h2>
<h2 class="title" i18n="@@searchTitle">Búsqueda avanzada</h2>
<div class="container">
<div class="header">
<mat-form-field>

9
ogWebconsole/src/app/components/groups/components/organizational-unit-tab-view/organizational-unit-tab-view.component.css
View File

@ -36,10 +36,6 @@
padding: 5px;
}
button{
margin-left: 10px;
}
.mat-chip-success {
background-color: #4CAF50 !important;
color: white !important;
@ -50,3 +46,8 @@ button{
color: white !important;
}
.button-row{
display: flex;
gap: 10px;
}

21
ogWebconsole/src/app/components/groups/components/organizational-unit-tab-view/organizational-unit-tab-view.component.html
View File

@ -1,6 +1,6 @@
<div class="header-container">
<h2 class="title" i18n="@@adminImagesTitle">Administrar unidades organizativas</h2>
<div class="images-button-row">
<div class="button-row">
<button mat-flat-button color="primary" (click)="resetFilters()">Reiniciar filtros</button>
<button mat-flat-button color="primary" (click)="addOrganizationalUnit($event)">Añadir OU</button>
</div>
@ -43,12 +43,21 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let client" style="text-align: center;">
<button mat-icon-button color="info" (click)="onShowClick($event, client)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
<button mat-icon-button color="primary" (click)="onEditClick($event, client.uuid)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
<button mat-icon-button color="warn" (click)="onDeleteClick($event, client)">
<mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
<td mat-cell *matCellDef="let ou" style="text-align: center;">
<button mat-icon-button color="info" (click)="onShowClick($event, ou)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
<button mat-icon-button color="primary" (click)="onEditClick($event, ou.uuid)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
<button mat-icon-button color="warn" (click)="onDeleteClick($event, ou)"><mat-icon>delete</mat-icon></button>
<button mat-icon-button color="info" [matMenuTriggerFor]="menu">
<mat-icon>menu</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item [disabled]="ou.type !== 'classroom'" (click)="roomMap(ou)">
<span i18n="@@viewTreeMenu">Plano de aula</span>
</button>
<button mat-menu-item [disabled]="ou.type !== 'organizational-unit'" (click)="onTreeClick(ou)">
<span i18n="@@viewTreeMenu">Ver organigrama</span>
</button>
</mat-menu>
</td>
</ng-container>

14
ogWebconsole/src/app/components/groups/components/organizational-unit-tab-view/organizational-unit-tab-view.component.ts
View File

@ -19,6 +19,8 @@ import {
import {
EditOrganizationalUnitComponent
} from "../../shared/organizational-units/edit-organizational-unit/edit-organizational-unit.component";
import {ClassroomViewDialogComponent} from "../../shared/classroom-view/classroom-view-modal";
import {TreeViewComponent} from "../../shared/tree-view/tree-view.component";
@Component({
selector: 'app-organizational-unit-tab-view',
@ -84,6 +86,18 @@ export class OrganizationalUnitTabViewComponent {
this.getOrganizationalUnits();
}
roomMap(room: any): void {
console.log(room)
const dialogRef = this.dialog.open(ClassroomViewDialogComponent, {
width: '90vw',
data: { clients: room.clients }
});
}
onTreeClick(data: any): void {
const dialogRef = this.dialog.open(TreeViewComponent, { data: { data }, width: '800px'});
}
getOrganizationalUnits() {
this.http.get<any>(`${this.apiUrl}?&page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
(data) => {

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

@ -21,7 +21,11 @@
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100px;
padding: 10px;
}
.unidad-card, .elements-card {
@ -29,6 +33,7 @@
background-color: #fafafa;
height: 600px;
overflow-y: auto;
box-shadow: none !important;
}
.element-content {
@ -71,11 +76,7 @@ mat-card-subtitle a:hover {
.groups-button-row {
display: flex;
flex-grow: 1;
gap: 10px;
margin-bottom: 20px;
margin-left: 10px;
margin-top: 10px;
}
.item-content {

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

@ -8,14 +8,9 @@
<button mat-raised-button (click)="openBottomSheet()" i18n="@@legendButton">Leyenda</button>
</div>
</div>
<div class="search-container">
<div class="classroomBtn-container">
<button mat-flat-button class="roomMap-btn" color="accent" (click)="roomMap()" *ngIf="selectedDetail && selectedDetail.type === 'classroom'" i18n="@@classroomMapButton">Plano de aula</button>
</div>
</div>
<div class="groupLists-container">
<mat-card class="card unidad-card">
<mat-card-title i18n="@@organizationalUnitTitle">Unidad organizativa</mat-card-title>
<mat-card-title i18n="@@organizationalUnitTitle">Centros</mat-card-title>
<mat-card-content>
<mat-spinner *ngIf="loading"></mat-spinner>
<mat-list *ngIf="!loading">
@ -82,7 +77,7 @@
<mat-card class="card elements-card">
<mat-card-title>
<div class="title-with-breadcrumb">
<span i18n="@@internalElementsTitle">Elementos internos</span>
<span i18n="@@internalElementsTitle"></span>
<mat-card-subtitle>
<ng-container *ngFor="let crumb of breadcrumb; let i = index">
<a (click)="navigateToBreadcrumb(i)">{{ crumb }}</a>

14
ogWebconsole/src/app/components/groups/shared/classroom-view/classroom-view-modal.ts
View File

@ -4,7 +4,7 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-classroom-view-dialog',
template: `
<h2 mat-dialog-title>Plano de {{ classroomName }}</h2>
<h2 mat-dialog-title>Plano de aula</h2>
<app-classroom-view [clients]="data.clients"></app-classroom-view>
`,
styles: [`
@ -17,17 +17,5 @@ export class ClassroomViewDialogComponent {
classroomName: string | undefined;
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
console.log('ClassroomViewDialogComponent');
console.log(data);
}
ngOnInit() {
if (this.data.clients && this.data.clients.length > 0) {
this.classroomName = this.data.clients[0].organizationalUnit.name;
} else {
this.classroomName = 'N/A';
}
}
}

5
ogWebconsole/src/app/components/groups/shared/classroom-view/classroom-view.component.css
View File

@ -3,6 +3,7 @@
flex-wrap: wrap;
gap: 10px;
border: 3px solid black;
margin: 10px;
}
.classroom-group {
@ -97,6 +98,10 @@ mat-chip {
margin: 0 auto;
}
mat-dialog-content {
min-height: 70vh;
}
.mat-dialog-content.loading {
display: flex;
align-items: center;

2
ogWebconsole/src/app/components/groups/shared/classroom-view/classroom-view.component.html
View File

@ -23,6 +23,6 @@
</div>
</div>
</mat-dialog-content>
<mat-dialog-actions>
<mat-dialog-actions align="end">
<button mat-raised-button color="primary" class="saveDisposition-btn" (click)="saveDisposition()">Guardar disposición</button>
</mat-dialog-actions>

6
ogWebconsole/src/app/components/groups/shared/classroom-view/classroom-view.component.ts
View File

@ -22,7 +22,7 @@ export class ClassroomViewComponent implements OnInit, OnChanges {
groupedClients: GroupedClients[] = [];
constructor(public dialog: MatDialog, private http: HttpClient, private toastService: ToastrService) {}
ngOnInit(): void {
this.groupClientsByOrganizationalUnit();
@ -36,7 +36,7 @@ export class ClassroomViewComponent implements OnInit, OnChanges {
groupClientsByOrganizationalUnit(): void {
const grouped = this.clients.reduce((acc, client) => {
const ouName = client.organizationalUnit.name;
const ouName = 'text';
if (!acc[ouName]) {
acc[ouName] = [];
}
@ -60,7 +60,7 @@ export class ClassroomViewComponent implements OnInit, OnChanges {
});
});
}
chunkArray(arr: any[], chunkSize: number): any[][] {
const chunks = [];