adress pr comments

CHANGELOG.md

@@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Improved the user interface of the access table to share the portfolio
-- Grant private access
+- Added support to grant private access
 
 ## 2.34.0 - 2024-01-02
 

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.component.ts

@@ -8,9 +8,10 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { CreateAccessDto } from '@ghostfolio/api/app/access/create-access.dto';
 import { DataService } from '@ghostfolio/client/services/data.service';
-import { Subject } from 'rxjs';
+import { EMPTY, Subject, catchError, takeUntil } from 'rxjs';
 
 import { CreateOrUpdateAccessDialogParams } from './interfaces/interfaces';
+import { StatusCodes } from 'http-status-codes';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -27,15 +28,25 @@ export class CreateOrUpdateAccessDialog implements OnDestroy {
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateAccessDialogParams,
     public dialogRef: MatDialogRef<CreateOrUpdateAccessDialog>,
-    private formBuilder: FormBuilder,
-    private dataService: DataService
+    private dataService: DataService,
+    private formBuilder: FormBuilder
   ) {}
 
   ngOnInit() {
     this.accessForm = this.formBuilder.group({
       alias: [this.data.access.alias],
       type: [this.data.access.type, Validators.required],
-      userId: [this.data.access.grantee, Validators.required]
+      userId: [this.data.access.grantee]
+    });
+
+    this.accessForm.get('type').valueChanges.subscribe((value) => {
+      const userIdControl = this.accessForm.get('userId');
+      if (value === 'PRIVATE') {
+        userIdControl.setValidators(Validators.required);
+      } else {
+        userIdControl.clearValidators();
+      }
+      userIdControl.updateValueAndValidity();
     });
   }
 
@@ -50,16 +61,21 @@ export class CreateOrUpdateAccessDialog implements OnDestroy {
       granteeUserId: this.accessForm.controls['userId'].value
     };
 
-    this.dataService.postAccess(access).subscribe({
-      next: () => {
-        this.dialogRef.close();
-      },
-      error: (error) => {
-        if (error.status === 400) {
-          alert('It was not possible to grant access, please try again later.');
-        }
-      }
-    });
+    this.dataService
+      .postAccess(access)
+      .pipe(
+        catchError((error) => {
+          if (error.status === StatusCodes.BAD_REQUEST) {
+            alert($localize`Oops! Could not grant access.`);
+          }
+
+          return EMPTY;
+        }),
+        takeUntil(this.unsubscribeSubject)
+      )
+      .subscribe(() => {
+        this.dialogRef.close({ access });
+      });
   }
 
   public ngOnDestroy() {

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.html

@@ -26,7 +26,9 @@
         </mat-select>
       </mat-form-field>
     </div>
-    <div *ngIf="accessForm.controls['type'].value === 'PRIVATE' ">
+
+    @if (accessForm.controls['type'].value === 'PRIVATE') {
+    <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>User ID</mat-label>
         <input
@@ -37,6 +39,7 @@
         />
       </mat-form-field>
     </div>
+    }
   </div>
   <div class="justify-content-end" mat-dialog-actions>
     <button i18n mat-button type="button" (click)="onCancel()">Cancel</button>

apps/client/src/app/components/user-account-access/user-account-access.component.ts

@@ -112,7 +112,10 @@ export class UserAccountAccessComponent implements OnDestroy, OnInit {
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'
     });
 
-    dialogRef.afterClosed().subscribe(() => {
+    dialogRef.afterClosed().subscribe((access) => {
+      if (access) {
+        this.update();
+      }
       this.router.navigate(['.'], { relativeTo: this.route });
     });
   }

libs/common/src/lib/interfaces/access.interface.ts

@@ -2,5 +2,5 @@ export interface Access {
   alias?: string;
   grantee?: string;
   id: string;
-  type: 'PUBLIC' | 'PRIVATE' | 'RESTRICTED_VIEW';
+  type: 'PRIVATE' | 'PUBLIC' | 'RESTRICTED_VIEW';
 }