From 1c0ba4afa5449bf4f3a2423c8e485b7db641ee1c Mon Sep 17 00:00:00 2001
From: Irmantas Kaukas <irmastnt@gmail.com>
Date: Tue, 23 Jan 2024 15:31:28 +0100
Subject: [PATCH] fix(dsp-app): manage user membership (#DEV-3218) (#1373)

---
 .../user/membership/membership.component.html |  8 +-
 .../user/membership/membership.component.ts   | 82 +++++++++----------
 2 files changed, 43 insertions(+), 47 deletions(-)

diff --git a/apps/dsp-app/src/app/user/membership/membership.component.html b/apps/dsp-app/src/app/user/membership/membership.component.html
index 34879eda02..d00999d608 100644
--- a/apps/dsp-app/src/app/user/membership/membership.component.html
+++ b/apps/dsp-app/src/app/user/membership/membership.component.html
@@ -1,6 +1,6 @@
-<dasch-swiss-app-progress-indicator *ngIf="isProjectsLoading$ | async"></dasch-swiss-app-progress-indicator>
+<dasch-swiss-app-progress-indicator *ngIf="isMembershipLoading$ | async"></dasch-swiss-app-progress-indicator>
 
-<div class="content" *ngIf="(isProjectsLoading$ | async) === false">
+<div class="content" *ngIf="(isMembershipLoading$ | async) === false">
   <h4 class="mat-subtitle-2">
     This user is member of {{ (user$ | async)?.projects.length | i18nPlural : itemPluralMapping['project'] }}
   </h4>
@@ -34,8 +34,8 @@ <h4 mat-line>{{project.longname}} ({{project.shortname}})</h4>
     <!-- select another project to add user -->
     <mat-list-item class="add-to-project">
       <mat-form-field class="select-project">
-        <mat-select placeholder="Add user to project" [formControl]="newProject">
-          <mat-option>Select Project to add user</mat-option>
+        <mat-select placeholder="Add user to project" [formControl]="newProject" [(ngModel)]="selectedValue">
+          <mat-option value="">Select Project to add user</mat-option>
           <mat-divider></mat-divider>
           <mat-option *ngFor="let project of projects$ | async; trackBy: trackByFn;" [value]="project?.iri">
             {{ project?.name }}
diff --git a/apps/dsp-app/src/app/user/membership/membership.component.ts b/apps/dsp-app/src/app/user/membership/membership.component.ts
index 65ba475148..be016ceb19 100644
--- a/apps/dsp-app/src/app/user/membership/membership.component.ts
+++ b/apps/dsp-app/src/app/user/membership/membership.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { Constants, ReadUser, StoredProject } from '@dasch-swiss/dsp-js';
 import { PermissionsData } from '@dasch-swiss/dsp-js/src/models/admin/permissions-data';
@@ -28,24 +28,25 @@ export interface IPermissions {
 export class MembershipComponent implements OnDestroy {
   private ngUnsubscribe: Subject<void> = new Subject<void>();
 
+  selectedValue: string;
+
   @Input() user: ReadUser;
 
   @Output() closeDialog: EventEmitter<any> = new EventEmitter<any>();
 
-  get user$(): Observable<ReadUser> {
-    return this.allUsers$.pipe(
-      takeUntil(this.ngUnsubscribe),
-      map(users => users.find(u => u.id === this.user.id))
-    );
-  }
+  user$: Observable<ReadUser> = this._store.select(UserSelectors.allUsers).pipe(
+    takeUntil(this.ngUnsubscribe),
+    map(users => users.find(u => u.id === this.user.id))
+  );
 
   // get all projects and filter by projects where the user is already member of
-  get projects$(): Observable<AutocompleteItem[]> {
-    return combineLatest([this.allProjects$, this.user$]).pipe(
-      takeUntil(this.ngUnsubscribe),
-      map(([projects, user]) => this.getProjects(projects, user))
-    );
-  }
+  projects$: Observable<AutocompleteItem[]> = combineLatest([
+    this._store.select(ProjectsSelectors.allProjects),
+    this.user$,
+  ]).pipe(
+    takeUntil(this.ngUnsubscribe),
+    map(([projects, user]) => this.getProjects(projects, user))
+  );
 
   newProject = new UntypedFormControl();
 
@@ -58,10 +59,7 @@ export class MembershipComponent implements OnDestroy {
     },
   };
 
-  @Select(ProjectsSelectors.allProjects) allProjects$: Observable<StoredProject[]>;
-  @Select(UserSelectors.allUsers) allUsers$: Observable<ReadUser[]>;
-  @Select(ProjectsSelectors.isProjectsLoading)
-  isProjectsLoading$: Observable<boolean>;
+  @Select(ProjectsSelectors.isMembershipLoading) isMembershipLoading$: Observable<boolean>;
 
   constructor(private _store: Store) {}
 
@@ -77,6 +75,7 @@ export class MembershipComponent implements OnDestroy {
    */
   removeFromProject(iri: string) {
     this._store.dispatch(new RemoveUserFromProjectAction(this.user.id, iri));
+    this.selectedValue = '';
   }
 
   addToProject(iri: string) {
@@ -100,32 +99,29 @@ export class MembershipComponent implements OnDestroy {
   }
 
   private getProjects(projects: StoredProject[], user: ReadUser): AutocompleteItem[] {
-    // TODO code smell, next line should not be disabled!!!
-    return (
-      projects
-        // eslint-disable-next-line array-callback-return
-        .map(p => {
-          if (
-            p.id !== Constants.SystemProjectIRI &&
-            p.id !== Constants.DefaultSharedOntologyIRI &&
-            p.status === true &&
-            user.projects.findIndex(i => i.id === p.id) === -1
-          ) {
-            return <AutocompleteItem>{
-              iri: p.id,
-              name: `${p.longname} (${p.shortname})`,
-            };
-          }
-        })
-        .sort((u1: AutocompleteItem, u2: AutocompleteItem) => {
-          if (u1.name < u2.name) {
-            return -1;
-          } else if (u1.name > u2.name) {
-            return 1;
-          } else {
-            return 0;
+    return projects
+      .filter(
+        p =>
+          p.id !== Constants.SystemProjectIRI &&
+          p.id !== Constants.DefaultSharedOntologyIRI &&
+          p.status === true &&
+          user.projects.findIndex(i => i.id === p.id) === -1
+      )
+      .map(
+        p =>
+          <AutocompleteItem>{
+            iri: p.id,
+            name: `${p.longname} (${p.shortname})`,
           }
-        })
-    );
+      )
+      .sort((u1: AutocompleteItem, u2: AutocompleteItem) => {
+        if (u1.name < u2.name) {
+          return -1;
+        } else if (u1.name > u2.name) {
+          return 1;
+        } else {
+          return 0;
+        }
+      });
   }
 }