From e964c6b47a01eb6b227a26976beaf344a8859440 Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Tue, 3 Jun 2025 10:58:41 +0200
Subject: [PATCH] refs #2148 Refactor dialog components to use
 <mat-dialog-content> and <mat-dialog-actions> for better responsiveness

---
 .../create-multiple-client.component.css      |  1 +
 .../create-multiple-client.component.html     | 17 ++++++-----
 .../manage-client/manage-client.component.css | 11 ++++----
 .../manage-client.component.html              | 25 ++++++++---------
 .../manage-organizational-unit.component.css  | 28 +++++++++----------
 .../manage-organizational-unit.component.html | 18 ++++++------
 6 files changed, 49 insertions(+), 51 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.css b/ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.css
index b90667f..a82beee 100644
--- a/ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.css
+++ b/ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.css
@@ -1,6 +1,7 @@
 .create-client-container {
   display: flex;
   flex-direction: column;
+  max-height: 80vh;
   padding: 16px 16px 0px 16px;
 }
 
diff --git a/ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.html b/ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.html
index 297869d..8cfe943 100644
--- a/ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.html
+++ b/ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.html
@@ -1,5 +1,5 @@
-<div class="create-client-container">
-  <h1 mat-dialog-title i18n="@@add-client-dialog-title">Añadir multiples clientes</h1>
+<mat-dialog-content class="create-client-container">
+  <h1 mat-dialog-title>{{ 'newMultipleClientButton' | translate }}</h1>
   <div class="inputs-container">
     <div class="mat-dialog-content" [ngClass]="{'loading': loading}">
 
@@ -57,10 +57,9 @@
       </div>
     </div>
   </div>
-
-  <div mat-dialog-actions class="action-container">
-    <button class="ordinary-button" (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
-    <button class="submit-button" [disabled]="!organizationalUnit" (click)="onSubmit()">{{ 'saveButton' | translate
-      }}</button>
-  </div>
-</div>
\ No newline at end of file
+</mat-dialog-content>
+<mat-dialog-actions class="action-container">
+  <button class="ordinary-button" (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
+  <button class="submit-button" [disabled]="!organizationalUnit" (click)="onSubmit()">{{ 'saveButton' | translate
+    }}</button>
+</mat-dialog-actions>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/shared/clients/manage-client/manage-client.component.css b/ogWebconsole/src/app/components/groups/shared/clients/manage-client/manage-client.component.css
index 55a0232..e67f4b7 100644
--- a/ogWebconsole/src/app/components/groups/shared/clients/manage-client/manage-client.component.css
+++ b/ogWebconsole/src/app/components/groups/shared/clients/manage-client/manage-client.component.css
@@ -11,10 +11,6 @@ h1 {
     width: 100%;
 }
 
-.mat-dialog-content {
-    padding: 15px 50px 15px 50px;
-}
-
 mat-option .unit-name {
     display: block;
 }
@@ -33,7 +29,12 @@ mat-option .unit-path {
 }
 
 .create-client-container {
-    position: relative;
+    max-height: 80vh;
+    overflow-y: auto;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    padding: 1em 4em 2em 4em;
 }
 
 .grid-form {
diff --git a/ogWebconsole/src/app/components/groups/shared/clients/manage-client/manage-client.component.html b/ogWebconsole/src/app/components/groups/shared/clients/manage-client/manage-client.component.html
index 69f2a51..ba16f19 100644
--- a/ogWebconsole/src/app/components/groups/shared/clients/manage-client/manage-client.component.html
+++ b/ogWebconsole/src/app/components/groups/shared/clients/manage-client/manage-client.component.html
@@ -1,6 +1,6 @@
-<div class="create-client-container">
+<mat-dialog-content class="create-client-container">
     <h1 mat-dialog-title>{{ dialogTitle | translate }}</h1>
-    <div class="mat-dialog-content" [ngClass]="{'loading': loading}">
+    <div [ngClass]="{'loading': loading}">
         <mat-spinner class="loading-spinner" *ngIf="loading"></mat-spinner>
         <form *ngIf="clientForm && !loading" [formGroup]="clientForm" class="client-form grid-form">
             <mat-form-field class="form-field">
@@ -102,16 +102,15 @@
                 <mat-error>{{ 'menuError' | translate }}</mat-error>
             </mat-form-field>
 
-          <mat-checkbox formControlName="maintenance">
-            {{ 'maintenance' | translate }}
-          </mat-checkbox>
+            <mat-checkbox formControlName="maintenance">
+                {{ 'maintenance' | translate }}
+            </mat-checkbox>
         </form>
     </div>
-
-    <div mat-dialog-actions class="action-container">
-        <button class="ordinary-button" (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
-        <button class="submit-button" [disabled]="!clientForm.valid" (click)="onSubmit()">
-            {{ isEditMode ? 'Guardar' : 'Crear' }}
-        </button>
-    </div>
-</div>
+</mat-dialog-content>
+<mat-dialog-actions class="action-container">
+    <button class="ordinary-button" (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
+    <button class="submit-button" [disabled]="!clientForm.valid" (click)="onSubmit()">
+        {{ isEditMode ? 'Guardar' : 'Crear' }}
+    </button>
+</mat-dialog-actions>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.css b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.css
index 80dc392..7286436 100644
--- a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.css
+++ b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.css
@@ -7,7 +7,12 @@ h1 {
 }
 
 .create-ou-container {
-    position: relative;
+    max-height: 80vh;
+    overflow-y: auto;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    padding: 1em 4em 2em 4em;
 }
 
 .form-field {
@@ -18,25 +23,18 @@ h1 {
     grid-column: span 2;
 }
 
-.mat-dialog-content {
-    padding: 0px 40px 15px 50px;
-    max-height: 70vh;
-    overflow-y: auto;
-}
-
 .loading-spinner {
-  display: block;
-  margin: 0 auto;
-  align-items: center;
-  justify-content: center;
+    display: block;
+    margin: 0 auto;
+    align-items: center;
+    justify-content: center;
 }
 
-.mat-dialog-actions {
+.action-container {
     display: flex;
     justify-content: flex-end;
     gap: 1em;
-    padding: 1em;
-    margin-right: 1em;
+    padding: 1.5em;
 }
 
 .grid-form {
@@ -66,4 +64,4 @@ h1 {
     align-items: center;
     grid-column: span 2;
     margin-bottom: 10px;
-}
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html
index 739256b..697533b 100644
--- a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html
+++ b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html
@@ -1,7 +1,7 @@
-<div class="create-ou-container">
+<mat-dialog-content class="create-ou-container">
     <h1 mat-dialog-title>{{ isEditMode ? ('edit' | translate) : ('createButton' | translate) }} {{
         'labelOrganizationalUnit' | translate }}</h1>
-    <div class="mat-dialog-content" [ngClass]="{'loading': loading}">
+    <div [ngClass]="{'loading': loading}">
         <!-- Paso 1: General -->
         <mat-spinner class="loading-spinner" *ngIf="loading"></mat-spinner>
         <span *ngIf="!loading" class="step-title">{{ 'generalTabLabel' | translate }}</span>
@@ -185,10 +185,10 @@
             </mat-form-field>
         </form>
     </div>
-    <div class="mat-dialog-actions">
-        <button class="ordinary-button" (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
-        <button class="submit-button" (click)="onSubmit()"
-            [disabled]="!generalFormGroup.valid || !additionalInfoFormGroup.valid || !networkSettingsFormGroup.valid">{{
-            isEditMode ? ('edit' | translate) : ('createButton' | translate) }}</button>
-    </div>
-</div>
\ No newline at end of file
+</mat-dialog-content>
+<mat-dialog-actions class="action-container">
+    <button class="ordinary-button" (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
+    <button class="submit-button" (click)="onSubmit()"
+        [disabled]="!generalFormGroup.valid || !additionalInfoFormGroup.valid || !networkSettingsFormGroup.valid">{{
+        isEditMode ? ('edit' | translate) : ('createButton' | translate) }}</button>
+</mat-dialog-actions>
\ No newline at end of file