From 9b07b195233f7f201afd5d1e1ecfeaadd0d5a8aa Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 21 Sep 2024 10:35:41 +0200
Subject: [PATCH] Feature/improve usability of create or update access dialog
 (#3791)

* Improve usability

* Dialog height
* Always show permission selector

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 ...reate-or-update-access-dialog.component.ts |  3 +--
 .../create-or-update-access-dialog.html       | 22 +++++++++----------
 .../user-account-access.component.ts          |  2 +-
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1ae53a5fc..1868c050f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the usability of the create or update access dialog
 - Improved the loading indicator of the accounts table
 - Improved the language localization for German (`de`)
 - Improved the language localization for Polish (`pl`)
diff --git a/apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.component.ts b/apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.component.ts
index dd755a8b9..5bb6ca3e5 100644
--- a/apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.component.ts
+++ b/apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.component.ts
@@ -52,13 +52,12 @@ export class CreateOrUpdateAccessDialog implements OnDestroy {
 
       if (accessType === 'PRIVATE') {
         granteeUserIdControl.setValidators(Validators.required);
-        permissionsControl.setValidators(Validators.required);
       } else {
         granteeUserIdControl.clearValidators();
+        permissionsControl.setValue(this.data.access.permissions[0]);
       }
 
       granteeUserIdControl.updateValueAndValidity();
-      permissionsControl.updateValueAndValidity();
 
       this.changeDetectorRef.markForCheck();
     });
diff --git a/apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.html b/apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.html
index 951079717..b903c64d5 100644
--- a/apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.html
+++ b/apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.html
@@ -27,18 +27,18 @@
       </mat-form-field>
     </div>
 
-    @if (accessForm.get('type').value === 'PRIVATE') {
-      <div>
-        <mat-form-field appearance="outline" class="w-100">
-          <mat-label i18n>Permission</mat-label>
-          <mat-select formControlName="permissions">
-            <mat-option i18n value="READ_RESTRICTED"
-              >Restricted view</mat-option
-            >
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Permission</mat-label>
+        <mat-select formControlName="permissions">
+          <mat-option i18n value="READ_RESTRICTED">Restricted view</mat-option>
+          @if (accessForm.get('type').value === 'PRIVATE') {
             <mat-option i18n value="READ">View</mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
+          }
+        </mat-select>
+      </mat-form-field>
+    </div>
+    @if (accessForm.get('type').value === 'PRIVATE') {
       <div>
         <mat-form-field appearance="outline" class="w-100">
           <mat-label>
diff --git a/apps/client/src/app/components/user-account-access/user-account-access.component.ts b/apps/client/src/app/components/user-account-access/user-account-access.component.ts
index d36c31632..2a4452485 100644
--- a/apps/client/src/app/components/user-account-access/user-account-access.component.ts
+++ b/apps/client/src/app/components/user-account-access/user-account-access.component.ts
@@ -111,7 +111,7 @@ export class UserAccountAccessComponent implements OnDestroy, OnInit {
           type: 'PRIVATE'
         }
       },
-      height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
+      height: this.deviceType === 'mobile' ? '97.5vh' : undefined,
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'
     });