From 9e74ee0c63d3eebaec29b2753e9ca6ad7bd450c9 Mon Sep 17 00:00:00 2001 From: Manuel Aranda Date: Tue, 2 Jul 2024 13:13:07 +0200 Subject: [PATCH] Added breadcrumb interative. Added edit organizational-unit and client load data --- .idea/.gitignore | 8 ++ .idea/material_theme_project_new.xml | 12 ++ .idea/modules.xml | 8 ++ .idea/oggui.iml | 8 ++ .idea/php.xml | 19 +++ .idea/vcs.xml | 6 + ogWebconsole/angular.json | 3 + ogWebconsole/src/app/app.module.ts | 11 +- .../edit-client/edit-client.component.html | 2 +- .../edit-client/edit-client.component.ts | 69 ++++++++--- .../src/app/components/groups/data.service.ts | 6 +- .../components/groups/groups.component.css | 35 +++++- .../components/groups/groups.component.html | 15 ++- .../app/components/groups/groups.component.ts | 29 +++-- .../create-organizational-unit.component.html | 5 +- .../create-organizational-unit.component.ts | 8 +- .../edit-organizational-unit.component.html | 4 +- .../edit-organizational-unit.component.ts | 111 ++++++++++++++---- 18 files changed, 287 insertions(+), 72 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/material_theme_project_new.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/oggui.iml create mode 100644 .idea/php.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/material_theme_project_new.xml b/.idea/material_theme_project_new.xml new file mode 100644 index 0000000..1bdc1c2 --- /dev/null +++ b/.idea/material_theme_project_new.xml @@ -0,0 +1,12 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..bff06b9 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/oggui.iml b/.idea/oggui.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/oggui.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/php.xml b/.idea/php.xml new file mode 100644 index 0000000..f324872 --- /dev/null +++ b/.idea/php.xml @@ -0,0 +1,19 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/ogWebconsole/angular.json b/ogWebconsole/angular.json index fbdb2d4..e3dd628 100644 --- a/ogWebconsole/angular.json +++ b/ogWebconsole/angular.json @@ -102,5 +102,8 @@ } } } + }, + "cli": { + "analytics": "95fac95c-8936-41a8-8c9c-1fae82fe6912" } } diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts index 7fd54d9..2009f5a 100644 --- a/ogWebconsole/src/app/app.module.ts +++ b/ogWebconsole/src/app/app.module.ts @@ -11,8 +11,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; import { CustomInterceptor } from './services/custom.interceptor'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; -import {MatToolbarModule} from '@angular/material/toolbar'; -import {MatIconModule} from '@angular/material/icon'; +import {MatToolbarModule} from '@angular/material/toolbar'; +import {MatIconModule} from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; import { MatSidenavModule } from '@angular/material/sidenav'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @@ -35,13 +35,14 @@ import { DeleteRoleModalComponent } from './components/pages/admin/roles/roles/d import { ChangePasswordModalComponent } from './components/pages/admin/users/users/change-password-modal/change-password-modal.component'; import { GroupsComponent } from './components/groups/groups.component'; import {MatDividerModule} from '@angular/material/divider'; -import { CreateOrganizationalUnitComponent } from './components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component'; +import { CreateOrganizationalUnitComponent } from './components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component'; import {MatStepperModule} from '@angular/material/stepper'; import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { CreateClientComponent } from './components/groups/clients/create-client/create-client.component'; import { DeleteModalComponent } from './components/groups/delete-modal/delete-modal.component'; import { EditOrganizationalUnitComponent } from './components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component'; import { EditClientComponent } from './components/groups/clients/edit-client/edit-client.component'; +import {MatProgressSpinner} from "@angular/material/progress-spinner"; @NgModule({ declarations: [ @@ -68,7 +69,7 @@ import { EditClientComponent } from './components/groups/clients/edit-client/edi EditOrganizationalUnitComponent, EditClientComponent ], - bootstrap: [AppComponent], + bootstrap: [AppComponent], imports: [BrowserModule, AppRoutingModule, FormsModule, @@ -88,7 +89,7 @@ import { EditClientComponent } from './components/groups/clients/edit-client/edi MatSelectModule, MatDividerModule, MatStepperModule, - MatSlideToggleModule], + MatSlideToggleModule, MatProgressSpinner], providers: [ { provide: HTTP_INTERCEPTORS, diff --git a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html index dce2116..6a520fd 100644 --- a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html +++ b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html @@ -15,5 +15,5 @@
- +
diff --git a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts index 3e2dffc..60d38d3 100644 --- a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts +++ b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts @@ -1,7 +1,7 @@ -import { HttpClient } from '@angular/common/http'; -import { Component } from '@angular/core'; +import {HttpClient, HttpHeaders} from '@angular/common/http'; +import {Component, Inject} from '@angular/core'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; -import { MatDialogRef } from '@angular/material/dialog'; +import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; import { CreateClientComponent } from '../create-client/create-client.component'; @Component({ @@ -12,12 +12,20 @@ import { CreateClientComponent } from '../create-client/create-client.component' export class EditClientComponent { clientForm!: FormGroup; parentUnits: any[] = []; // Array to store parent units fetched from API + isEditMode: boolean; // Flag to check if it's edit mode constructor( private fb: FormBuilder, private dialogRef: MatDialogRef, - private http: HttpClient - ) { } + private http: HttpClient, + @Inject(MAT_DIALOG_DATA) public data: any // Inject data for edit mode + + ) { + this.isEditMode = !!data?.uuid; // Check if uuid is passed to determine edit mode + if (this.isEditMode) { + this.loadData(data.uuid); + } + } ngOnInit(): void { this.loadParentUnits(); // Load parent units when component initializes @@ -48,19 +56,52 @@ export class EditClientComponent { ); } + loadData(uuid: string) { + const url = `http://127.0.0.1:8080/clients/${uuid}`; + + this.http.get(url).subscribe( + data => { + this.clientForm.patchValue({ + name: data.name, + organizationalUnit: data.organizationalUnit ? data.organizationalUnit['@id'] : '' + }); + }); + } + onSubmit() { console.log('Form data:', this.clientForm.value); if (this.clientForm.valid) { const formData = this.clientForm.value; - this.http.post('http://127.0.0.1:8080/clients', formData).subscribe( - response => { - console.log('Response from POST:', response); - this.dialogRef.close(response); - }, - error => { - console.error('Error during POST:', error); - } - ); + + if (this.isEditMode) { + // Edit mode: Send PUT request to update the unit + const putUrl = `http://127.0.0.1:8080/clients/${this.data.uuid}`; + const headers = new HttpHeaders({ 'Content-Type': 'application/json' }); + + this.http.patch(putUrl, formData, { headers }).subscribe( + response => { + console.log('PUT successful:', response); + this.dialogRef.close(); + }, + error => { + console.error('Error al realizar PUT:', error); + } + ); + } else { + // Create mode: Send POST request to create a new unit + const postUrl = 'http://127.0.0.1:8080/clients'; + const headers = new HttpHeaders({ 'Content-Type': 'application/json' }); + + this.http.post(postUrl, formData, { headers }).subscribe( + response => { + console.log('POST successful:', response); + this.dialogRef.close(); + }, + error => { + console.error('Error al realizar POST:', error); + } + ); + } } } diff --git a/ogWebconsole/src/app/components/groups/data.service.ts b/ogWebconsole/src/app/components/groups/data.service.ts index ee41398..81bca43 100644 --- a/ogWebconsole/src/app/components/groups/data.service.ts +++ b/ogWebconsole/src/app/components/groups/data.service.ts @@ -72,8 +72,8 @@ export class DataService { } deleteElement(uuid: string, type: string): Observable { - const url = type === 'client' - ? `http://127.0.0.1:8080/clients/${uuid}` + const url = type === 'client' + ? `http://127.0.0.1:8080/clients/${uuid}` : `http://127.0.0.1:8080/organizational-units/${uuid}`; return this.http.delete(url).pipe( catchError(error => { @@ -82,7 +82,7 @@ export class DataService { }) ); } - + } diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css index eb6ceca..4f9c5bd 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.css +++ b/ogWebconsole/src/app/components/groups/groups.component.css @@ -7,11 +7,36 @@ mat-card { margin: 10px; } +mat-card-title { + display: flex; + justify-content: space-between; + margin: 10px; +} + .elements-card{ margin: 10px; width: 800px; background-color: #fafafa; - +} + +.title-with-breadcrumb { + display: flex; + flex-direction: column; +} + +mat-card-subtitle { + font-size: 0.875rem; + color: rgba(0, 0, 0, 0.54); +} + +mat-card-subtitle a { + cursor: pointer; + text-decoration: underline; + color: #1976d2; /* Color azul típico de enlaces */ +} + +mat-card-subtitle a:hover { + text-decoration: none; } .groups-button-row { @@ -33,13 +58,13 @@ button { } .actions { - margin-left: auto; + margin-left: auto; } .actions mat-icon { - cursor: pointer; - margin-left: 48px; - color: #757575; + cursor: pointer; + margin-left: 48px; + color: #757575; } .actions mat-icon:hover { diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html index f9c7cdd..8c393d2 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.html +++ b/ogWebconsole/src/app/components/groups/groups.component.html @@ -10,7 +10,7 @@ Unidad organizativa - apartment @@ -25,8 +25,17 @@ - Elementos - {{ breadcrumb.join(' > ') }} + +
+ Elementos + + + {{ crumb }} + > + + +
+ diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts index 1e249c5..11edf0d 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.ts +++ b/ogWebconsole/src/app/components/groups/groups.component.ts @@ -19,6 +19,7 @@ export class GroupsComponent implements OnInit { selectedDetail: any | null = null; // Nueva variable para el detalle del elemento seleccionado children: any[] = []; breadcrumb: string[] = []; + breadcrumbData: any[] = []; // Almacenar datos de breadcrumb para navegar constructor(private dataService: DataService, public dialog: MatDialog) {} @@ -33,6 +34,7 @@ export class GroupsComponent implements OnInit { this.selectedUnidad = unidad; this.selectedDetail = unidad; // Mostrar detalles de la unidad seleccionada this.breadcrumb = [unidad.nombre]; + this.breadcrumbData = [unidad]; this.loadChildrenAndClients(unidad.uuid); } @@ -40,10 +42,22 @@ export class GroupsComponent implements OnInit { this.selectedDetail = child; // Mostrar detalles del niño seleccionado if (child.type !== 'client' && child.uuid && child.id) { this.breadcrumb.push(child.name || child.nombre); + this.breadcrumbData.push(child); this.loadChildrenAndClients(child.uuid); } } + 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.uuid); + } + } + loadChildrenAndClients(uuid: string): void { this.dataService.getChildren(uuid).subscribe( childrenData => { @@ -52,13 +66,12 @@ export class GroupsComponent implements OnInit { clientsData => { console.log('Clients data:', clientsData); const newChildren = [...childrenData, ...clientsData]; - + if (newChildren.length > 0) { this.children = newChildren; } else { this.children = []; // Limpiar card2 cuando no hay elementos - this.breadcrumb.pop(); // Revertir breadcrumb solo si no hay elementos - + // Si deseas que la unidad organizativa se limpie completamente, descomenta la línea siguiente: // this.selectedUnidad = null; } @@ -75,7 +88,7 @@ export class GroupsComponent implements OnInit { } ); } - + addOU(): void { const dialogRef = this.dialog.open(CreateOrganizationalUnitComponent); @@ -130,12 +143,12 @@ export class GroupsComponent implements OnInit { this.dataService.deleteElement(uuid, type).subscribe( () => { this.loadChildrenAndClients(this.selectedUnidad?.uuid || ''); - + this.dataService.getUnidadesOrganizativas().subscribe( data => this.unidadesOrganizativas = data, error => console.error('Error fetching unidades organizativas', error) ); - + }, error => console.error('Error deleting element', error) ); @@ -147,10 +160,10 @@ export class GroupsComponent implements OnInit { console.log('Tipo del elemento a editar:', type); console.log('UUID del elemento a editar:', uuid); if (type != "client") { - const dialogRef = this.dialog.open(EditOrganizationalUnitComponent); + const dialogRef = this.dialog.open(EditOrganizationalUnitComponent, { data: { uuid } }); } else { console.log('Editar cliente'); - const dialogRef = this.dialog.open(EditClientComponent); + const dialogRef = this.dialog.open(EditClientComponent, { data: { uuid } } ); } } } diff --git a/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.html b/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.html index ec35819..e8aee32 100644 --- a/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.html +++ b/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.html @@ -1,4 +1,5 @@

Añadir Unidad Organizativa

+
@@ -20,7 +21,7 @@ {{ unit.name }} - + Descripción @@ -30,7 +31,7 @@
- +
diff --git a/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.ts b/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.ts index 1d2247e..43eb8eb 100644 --- a/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.ts +++ b/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.ts @@ -70,7 +70,7 @@ export class CreateOrganizationalUnitComponent implements OnInit { onSubmit() { if (this.generalFormGroup.valid && this.additionalInfoFormGroup.valid && this.networkSettingsFormGroup.valid) { const parentValue = this.generalFormGroup.value.parent; - + const formData = { name: this.generalFormGroup.value.name, parent: parentValue || null, @@ -78,12 +78,12 @@ export class CreateOrganizationalUnitComponent implements OnInit { comments: this.additionalInfoFormGroup.value.comments, type: this.generalFormGroup.value.type }; - + // Realizar la solicitud POST console.log('POST data:', formData); const postUrl = 'http://127.0.0.1:8080/organizational-units'; const headers = new HttpHeaders({ 'Content-Type': 'application/json' }); - + this.http.post(postUrl, formData, { headers }).subscribe( response => { console.log('POST successful:', response); @@ -98,7 +98,7 @@ export class CreateOrganizationalUnitComponent implements OnInit { ); } } - + onNoClick(): void { this.dialogRef.close(); diff --git a/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.html b/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.html index b0361d9..839c4da 100644 --- a/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.html +++ b/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.html @@ -20,7 +20,7 @@ {{ unit.name }} - + Descripción @@ -30,7 +30,7 @@
- +
diff --git a/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts b/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts index c9c18f6..6c86f66 100644 --- a/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts +++ b/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts @@ -1,7 +1,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http'; -import { Component, EventEmitter, Output } from '@angular/core'; +import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; -import { MatDialogRef } from '@angular/material/dialog'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { CreateOrganizationalUnitComponent } from '../create-organizational-unit/create-organizational-unit.component'; @Component({ @@ -9,30 +9,36 @@ import { CreateOrganizationalUnitComponent } from '../create-organizational-unit templateUrl: './edit-organizational-unit.component.html', styleUrl: './edit-organizational-unit.component.css' }) -export class EditOrganizationalUnitComponent { +export class EditOrganizationalUnitComponent implements OnInit { isLinear = true; generalFormGroup: FormGroup; additionalInfoFormGroup: FormGroup; networkSettingsFormGroup: FormGroup; types: string[] = ['organizational-unit', 'classrooms-group', 'classroom', 'clients-group']; parentUnits: any[] = []; // Array to store parent units fetched from API + isEditMode: boolean; // Flag to check if it's edit mode @Output() unitAdded = new EventEmitter(); // Event emitter to notify parent component about unit addition constructor( private _formBuilder: FormBuilder, private dialogRef: MatDialogRef, - private http: HttpClient // Inject HttpClient for HTTP requests + private http: HttpClient, // Inject HttpClient for HTTP requests + @Inject(MAT_DIALOG_DATA) public data: any // Inject data for edit mode ) { + this.isEditMode = !!data?.uuid; // Check if uuid is passed to determine edit mode + this.generalFormGroup = this._formBuilder.group({ name: ['', Validators.required], parent: [''], description: [''], type: ['', Validators.required] }); + this.additionalInfoFormGroup = this._formBuilder.group({ comments: [''], }); + this.networkSettingsFormGroup = this._formBuilder.group({ proxy: [''], dns: [''], @@ -49,6 +55,10 @@ export class EditOrganizationalUnitComponent { hardwareProfile: ['', Validators.pattern('https?://.+')], validation: [false] }); + + if (this.isEditMode) { + this.loadData(data.uuid); + } } ngOnInit() { @@ -68,38 +78,89 @@ export class EditOrganizationalUnitComponent { ); } + loadData(uuid: string) { + const url = `http://127.0.0.1:8080/organizational-units/${uuid}`; + + this.http.get(url).subscribe( + data => { + this.generalFormGroup.patchValue({ + name: data.name, + parent: data.parent ? data.parent['@id'] : '', + description: data.description, + type: data.type + }); + this.additionalInfoFormGroup.patchValue({ + comments: data.comments + }); + this.networkSettingsFormGroup.patchValue({ + proxy: data.proxy, + dns: data.dns, + netmask: data.netmask, + router: data.router, + ntp: data.ntp, + p2pMode: data.p2pMode, + p2pTime: data.p2pTime, + mcastIp: data.mcastIp, + mcastSpeed: data.mcastSpeed, + mcastPort: data.mcastPort, + mcastMode: data.mcastMode, + menu: data.menu, + hardwareProfile: data.hardwareProfile, + validation: data.validation + }); + }, + error => { + console.error('Error fetching data for edit:', error); + } + ); + } + onSubmit() { if (this.generalFormGroup.valid && this.additionalInfoFormGroup.valid && this.networkSettingsFormGroup.valid) { const parentValue = this.generalFormGroup.value.parent; - + const formData = { name: this.generalFormGroup.value.name, parent: parentValue || null, description: this.generalFormGroup.value.description, comments: this.additionalInfoFormGroup.value.comments, - type: this.generalFormGroup.value.type + type: this.generalFormGroup.value.type, + ...this.networkSettingsFormGroup.value }; - - // Realizar la solicitud POST - console.log('POST data:', formData); - const postUrl = 'http://127.0.0.1:8080/organizational-units'; - const headers = new HttpHeaders({ 'Content-Type': 'application/json' }); - - this.http.post(postUrl, formData, { headers }).subscribe( - response => { - console.log('POST successful:', response); - // Emitir evento para notificar que se ha añadido una nueva unidad - this.unitAdded.emit(); - this.dialogRef.close(); // Cerrar el diálogo después de añadir - }, - error => { - console.error('Error al realizar POST:', error); - // Manejar el error según sea necesario - } - ); + + if (this.isEditMode) { + // Edit mode: Send PUT request to update the unit + const putUrl = `http://127.0.0.1:8080/organizational-units/${this.data.uuid}`; + const headers = new HttpHeaders({ 'Content-Type': 'application/json' }); + + this.http.put(putUrl, formData, { headers }).subscribe( + response => { + console.log('PUT successful:', response); + this.unitAdded.emit(); + this.dialogRef.close(); + }, + error => { + console.error('Error al realizar PUT:', error); + } + ); + } else { + // Create mode: Send POST request to create a new unit + const postUrl = 'http://127.0.0.1:8080/organizational-units'; + const headers = new HttpHeaders({ 'Content-Type': 'application/json' }); + + this.http.post(postUrl, formData, { headers }).subscribe( + response => { + console.log('POST successful:', response); + this.unitAdded.emit(); + this.dialogRef.close(); + }, + error => { + console.error('Error al realizar POST:', error); + } + ); + } } } - onNoClick(): void { this.dialogRef.close();