fix: removing/adding users from/to project, project activation/deactivation.

apps/dsp-app/src/app/system/projects/projects-list/projects-list.component.ts

@@ -28,7 +28,7 @@ import { SortingService } from '@dasch-swiss/vre/shared/app-helper-services';
 import { ProjectService } from '@dasch-swiss/vre/shared/app-helper-services';
 import {SortProp} from "@dsp-app/src/app/main/action/sort-button/sort-button.component";
 import {Observable, Subject, combineLatest} from "rxjs";
-import {map, takeUntil, tap} from "rxjs/operators";
+import {map, take, takeUntil, tap} from "rxjs/operators";
 import { Select } from '@ngxs/store';
 import { ProjectsSelectors, UserSelectors } from '@dasch-swiss/vre/shared/app-state';
 
@@ -206,19 +206,12 @@ export class ProjectsListComponent implements OnInit, OnDestroy {
     }
 
     deactivateProject(id: string) {
-        const uuid = this._projectService.iriToUuid(id);
         // the deleteProject() method in js-lib sets the project's status to false, it is not actually deleted
-
-        this._dspApiConnection.admin.projectsEndpoint
-            .deleteProject(id)
-            .pipe(
-                tap((response: ApiResponseData<ProjectResponse>) => {
-                    this.refreshParent.emit(); //TODO Soft or Hard refresh ?
-                },
-                (error: ApiResponseError) => {
-                    this._errorHandler.showMessage(error);
-                })
-            );
+        this._dspApiConnection.admin.projectsEndpoint.deleteProject(id)
+            .pipe(take(1))
+            .subscribe(response => {
+                this.refreshParent.emit(); //TODO Soft or Hard refresh ?
+            });
     }
 
     activateProject(id: string) {
@@ -228,13 +221,9 @@ export class ProjectsListComponent implements OnInit, OnDestroy {
 
         this._dspApiConnection.admin.projectsEndpoint
             .updateProject(id, data)
-            .pipe(
-                tap((response: ApiResponseData<ProjectResponse>) => {
-                    this.refreshParent.emit();
-                },
-                (error: ApiResponseError) => {
-                    this._errorHandler.showMessage(error);
-                })
-            );
+            .pipe(take(1))
+            .subscribe(response => {
+                this.refreshParent.emit(); //TODO Soft or Hard refresh ?
+            });
     }
 }

apps/dsp-app/src/app/system/users/users-list/users-list.component.ts

@@ -344,10 +344,9 @@ export class UsersListComponent implements OnInit {
                 switch (mode) {
                     case 'removeFromProject':
                         this._store.dispatch(new RemoveUserFromProjectAction(user.id, this.project.id));
-                        this._actions$.pipe(ofActionSuccessful(SetUserAction))
+                        this._actions$.pipe(ofActionSuccessful(LoadProjectMembersAction))
                             .pipe(take(1))
                             .subscribe(() => {
-                                this._store.dispatch(new LoadProjectMembersAction(this.projectUuid));
                                 this.refreshParent.emit();
                             });
                         break;

apps/dsp-app/src/app/user/overview/overview.component.html

@@ -21,10 +21,7 @@
                 </div>
             </div>
             <div class="project-tiles">
-                <div
-                    *ngFor="let proj of allProjects$ | async"
-                    class="project-tile-container"
-                >
+                <div *ngFor="let proj of allProjects$ | async; trackBy: trackByFn" class="project-tile-container">
                     <app-project-tile
                         [project]="proj"
                         [sysAdmin]="true"
@@ -33,15 +30,15 @@
             </div>
         </div>
         <!-- user is logged in and not a system admin -->
-        <div *ngIf="(isSysAdmin$ | async) === false && (user$ | async | isFalsy)">
+        <div *ngIf="(isSysAdmin$ | async) === false && (user$ | async)">
             <div class="title-bar">
                 <div class="title">
                     <p>My Projects</p>
                 </div>
             </div>
             <div class="project-tiles">
                 <div
-                    *ngFor="let userProj of userActiveProjects$ | async"
+                    *ngFor="let userProj of userActiveProjects$ | async; trackBy: trackByFn"
                     class="project-tile-container"
                 >
                     <app-project-tile
@@ -57,7 +54,7 @@
             </div>
             <div class="project-tiles">
                 <div
-                    *ngFor="let otherProj of userOtherActiveProjects$ | async"
+                    *ngFor="let otherProj of userOtherActiveProjects$ | async; trackBy: trackByFn"
                     class="project-tile-container"
                 >
                     <app-project-tile
@@ -78,7 +75,7 @@
             </div>
             <div class="project-tiles">
                 <div
-                    *ngFor="let proj of allActiveProjects$ | async"
+                    *ngFor="let proj of allActiveProjects$ | async; trackBy: trackByFn"
                     class="project-tile-container"
                 >
                     <app-project-tile

apps/dsp-app/src/app/user/overview/overview.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import {
@@ -11,6 +11,7 @@ import { Observable } from 'rxjs';
 import { LoadProjectsAction, ProjectsSelectors, UserSelectors } from '@dasch-swiss/vre/shared/app-state';
 
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'app-overview',
     templateUrl: './overview.component.html',
     styleUrls: ['./overview.component.scss'],
@@ -42,4 +43,6 @@ export class OverviewComponent implements OnInit {
     createNewProject() {
         this._router.navigate([RouteConstants.newProjectRelative]);
     }
+
+    trackByFn = (index: number, item: StoredProject) => `${index}-${item.id}`;
 }

apps/dsp-app/src/app/user/user-form/user-form.component.ts

@@ -396,9 +396,6 @@ export class UserFormComponent implements OnInit, OnChanges {
                     // if a projectUuid exists, add the user to the project
                     const projectIri = this._projectService.uuidToIri(this.projectUuid);
                     this._store.dispatch(new AddUserToProjectMembershipAction(this.user.id, projectIri));
-                    this._actions$.pipe(ofActionSuccessful(SetUserAction))
-                        .pipe(take(1))
-                        .subscribe(() => this._store.dispatch(new LoadProjectMembersAction(projectIri)));
                 }
 
                 this.closeDialog.emit(this.user);

libs/vre/shared/app-state/src/lib/projects/projects.actions.ts

@@ -15,7 +15,7 @@ export class ClearProjectsAction {
 
 export class RemoveUserFromProjectAction {
     static readonly type = '[Projects] Remove User From Project';
-    constructor(public userId: string, public projectId: string) {}
+    constructor(public userId: string, public projectIri: string) {}
 }
 
 export class AddUserToProjectMembershipAction {

libs/vre/shared/app-state/src/lib/projects/projects.state.ts

@@ -142,19 +142,22 @@ export class ProjectsState {
     @Action(RemoveUserFromProjectAction)
     removeUserFromProject(
         ctx: StateContext<ProjectsStateModel>,
-        { userId, projectId }: RemoveUserFromProjectAction
+        { userId, projectIri }: RemoveUserFromProjectAction
     ) {
         ctx.patchState({ isLoading: true });
         return this._dspApiConnection.admin.usersEndpoint
-            .removeUserFromProjectMembership(userId, projectId)
+            .removeUserFromProjectMembership(userId, projectIri)
             .pipe(
                 take(1),
                 map((response: ApiResponseData<UserResponse> | ApiResponseError) => {
                     return response as ApiResponseData<UserResponse>;
                 }),
                 tap({
                     next: (response: ApiResponseData<UserResponse>) => {
-                        ctx.dispatch(new SetUserAction(response.body.user));
+                        ctx.dispatch([
+                            new SetUserAction(response.body.user), 
+                            new LoadProjectMembersAction(projectIri)
+                        ]);
                         ctx.patchState({ isLoading: false });
                     },
                     error: (error) => {
@@ -179,7 +182,10 @@ export class ProjectsState {
                 }),
                 tap({
                     next: (response: ApiResponseData<UserResponse>) => {
-                        ctx.dispatch(new SetUserAction(response.body.user));
+                        ctx.dispatch([
+                            new SetUserAction(response.body.user), 
+                            new LoadProjectMembersAction(projectIri)
+                        ]);
                         ctx.patchState({ isLoading: false });
                     },
                     error: (error) => {