Feature/improve usability of create or update access dialog (#3791)

* Improve usability

* Dialog height
* Always show permission selector

* Update changelog

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`)

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();
     });

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>

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'
     });