Groups edit and delete ou

pull/4/head
Alvaro Puente Mella 2024-06-21 01:15:54 +02:00
parent ff983176c9
commit b14605f248
2 changed files with 37 additions and 19 deletions

View File

@ -5,39 +5,56 @@
<mat-divider></mat-divider>
<h2>Grupos</h2>
<div class="groupLists-container">
<mat-card >
<mat-card>
<mat-card-title>Unidad organizativa</mat-card-title>
<mat-card-content>
<mat-list role="list">
<mat-list-item *ngFor="let unidad of unidadesOrganizativas"
(click)="onSelectUnidad(unidad)"
<mat-list-item *ngFor="let unidad of unidadesOrganizativas" (click)="onSelectUnidad(unidad)"
[ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}">
<div>
<span>
<mat-icon>apartment</mat-icon>
{{ unidad.nombre }}
</div>
</span>
<span class="actions">
<mat-icon class="edit-icon" (click)="onEditClick(unidad, unidad.uuid)">edit</mat-icon>
<mat-icon class="delete-icon" (click)="onDeleteClick(unidad.uuid)">delete</mat-icon>
</span>
</mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>
<mat-card class="finder-card" *ngIf="children.length > 0">
<mat-card class="elements-card" *ngIf="children.length > 0">
<mat-card-title>{{ breadcrumb.join(' > ') }}</mat-card-title>
<mat-card-content>
<mat-list role="list">
<mat-list-item *ngFor="let child of children"
[ngClass]="{'clickable-item': true}">
<mat-list-item *ngFor="let child of children" [ngClass]="{'clickable-item': true}">
<div>
<span (click)="onSelectChild(child)">
<ng-container [ngSwitch]="getIcon(child['type'])">
<mat-icon *ngSwitchCase="'apartment'">apartment</mat-icon>
<svg *ngSwitchCase="'classrooms-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M120-120v-80h80v-640h400v40h160v600h80v80H680v-600h-80v600H120Zm160-640v560-560Zm160 320q17 0 28.5-11.5T480-480q0-17-11.5-28.5T440-520q-17 0-28.5 11.5T400-480q0 17 11.5 28.5T440-440ZM280-200h240v-560H280v560Z"/></svg>
<svg *ngSwitchCase="'classroom-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M120-120v-80h80v-640h400v40h160v600h80v80H680v-600h-80v600H120Zm160-640v560-560Zm160 320q17 0 28.5-11.5T480-480q0-17-11.5-28.5T440-520q-17 0-28.5 11.5T400-480q0 17 11.5 28.5T440-440ZM280-200h240v-560H280v560Z"/></svg>
<svg *ngSwitchCase="'client-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/></svg>
<svg *ngSwitchCase="'clients-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M120-80v-280h120v-160h200v-80H320v-280h320v280H520v80h200v160h120v280H520v-280h120v-80H320v80h120v280H120Zm280-600h160v-120H400v120ZM200-160h160v-120H200v120Zm400 0h160v-120H600v120ZM480-680ZM360-280Zm240 0Z"/></svg>
</ng-container>
{{ child.name || child.nombre }}
<ng-container [ngSwitch]="getIcon(child['type'])">
<mat-icon *ngSwitchCase="'apartment'">apartment</mat-icon>
<svg *ngSwitchCase="'classrooms-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 -960 960 960" width="24px" fill="#5f6368">
<path
d="M120-120v-80h80v-640h400v40h160v600h80v80H680v-600h-80v600H120Zm160-640v560-560Zm160 320q17 0 28.5-11.5T480-480q0-17-11.5-28.5T440-520q-17 0-28.5 11.5T400-480q0 17 11.5 28.5T440-440ZM280-200h240v-560H280v560Z" />
</svg>
<svg *ngSwitchCase="'classroom-icon'" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 -960 960 960" width="24px" fill="#5f6368">
<path
d="M120-120v-80h80v-640h400v40h160v600h80v80H680v-600h-80v600H120Zm160-640v560-560Zm160 320q17 0 28.5-11.5T480-480q0-17-11.5-28.5T440-520q-17 0-28.5 11.5T400-480q0 17 11.5 28.5T440-440ZM280-200h240v-560H280v560Z" />
</svg>
<svg *ngSwitchCase="'client-icon'" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 -960 960 960" width="24px" fill="#5f6368">
<path
d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z" />
</svg>
<svg *ngSwitchCase="'clients-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 -960 960 960" width="24px" fill="#5f6368">
<path
d="M120-80v-280h120v-160h200v-80H320v-280h320v280H520v80h200v160h120v280H520v-280h120v-80H320v80h120v280H120Zm280-600h160v-120H400v120ZM200-160h160v-120H200v120Zm400 0h160v-120H600v120ZM480-680ZM360-280Zm240 0Z" />
</svg>
</ng-container>
{{ child.name || child.nombre }}
</span>
<span class="actions">
<mat-icon class="edit-icon" (click)="onEditClick(child.type, child.uuid)">edit</mat-icon>
@ -48,4 +65,4 @@
</mat-list>
</mat-card-content>
</mat-card>
</div>
</div>

View File

@ -83,7 +83,8 @@ export class GroupsComponent implements OnInit {
// Aquí puedes agregar lógica adicional para eliminar el elemento si es necesario
}
onEditClick(uuid: string): void {
onEditClick(type: any, uuid: string): void {
console.log('Tipo del elemento a editar:', type);
console.log('UUID del elemento a editar:', uuid);
// Aquí puedes agregar lógica adicional para editar el elemento si es necesario
}