fix: list item delete (DEV-3267) (#1446)

dasch-swiss · Feb 9, 2024 · affd20f · affd20f
1 parent c78ddf7
commit affd20f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 29 deletions.
diff --git a/apps/dsp-app/src/app/project/list/list.component.html b/apps/dsp-app/src/app/project/list/list.component.html
@@ -45,7 +45,7 @@
           </mat-toolbar>
 
           <app-list-item
-            *ngIf="(project$ | async) as project"
+            *ngIf="((isListsLoading$ | async) === false) && (project$ | async) as project"
             [rootNodeIri]="list.id"
             [projectUuid]="project.id"
             [isAdmin]="isAdmin$ | async">

diff --git a/apps/dsp-app/src/app/project/list/list.component.ts b/apps/dsp-app/src/app/project/list/list.component.ts
@@ -11,9 +11,9 @@ import {
   LoadListsInProjectAction,
   ProjectsSelectors,
 } from '@dasch-swiss/vre/shared/app-state';
-import { Actions, ofActionSuccessful, Select, Store } from '@ngxs/store';
-import { combineLatest, Observable, Subject } from 'rxjs';
-import { map, take } from 'rxjs/operators';
+import { Actions, Select, Store, ofActionSuccessful } from '@ngxs/store';
+import { Observable, Subject, combineLatest } from 'rxjs';
+import { map, switchMap, take } from 'rxjs/operators';
 import { AppGlobal } from '../../app-global';
 import { DIALOG_LARGE } from '../../main/services/dialog-sizes.constant';
 import { DialogService } from '../../main/services/dialog.service';
@@ -37,9 +37,6 @@ export class ListComponent extends ProjectBase implements OnInit, OnDestroy {
   // current selected language
   language: string;
 
-  // selected list iri
-  listIri: string = undefined;
-
   openPanel: number;
 
   // i18n plural mapping
@@ -60,6 +57,10 @@ export class ListComponent extends ProjectBase implements OnInit, OnDestroy {
     map(([lists, listIri]) => lists.find(i => i.id.includes(listIri)))
   );
 
+  listIri$: Observable<string> = combineLatest([this._route.params, this.project$]).pipe(
+    map(([params, project]) => `${this._acs.dspAppConfig.iriBase}/lists/${project.shortcode}/${params['list']}`)
+  );
+
   @Select(ListsSelectors.isListsLoading) isListsLoading$: Observable<boolean>;
   @Select(ListsSelectors.listsInProject) listsInProject$: Observable<ListNodeInfo[]>;
 
@@ -89,16 +90,7 @@ export class ListComponent extends ProjectBase implements OnInit, OnDestroy {
   ngOnInit() {
     super.ngOnInit();
     this.disableContent = window.innerWidth <= 768;
-
-    // set the page title
     this._setPageTitle();
-
-    // get list iri from list name
-    this._route.params.subscribe(params => {
-      if (this.project) {
-        this.listIri = `${this._acs.dspAppConfig.iriBase}/lists/${this.project.shortcode}/${params['list']}`;
-      }
-    });
   }
 
   ngOnDestroy() {
@@ -123,22 +115,20 @@ export class ListComponent extends ProjectBase implements OnInit, OnDestroy {
 
   askToDeleteList(list: ListNodeInfo): void {
     this._dialog
-      .afterConfirmation('Do you want to delete this controlled vocabulary?', list.labels[0].value)
+      .afterConfirmation('Do yu want to delete this controlled vocabulary?', list.labels[0].value)
+      .pipe(
+        take(1),
+        switchMap(() => this.listIri$.pipe(map(listIri => this._store.dispatch(new DeleteListNodeAction(listIri)))))
+      )
+      .pipe(switchMap(() => this._actions$.pipe(ofActionSuccessful(DeleteListNodeAction), take(1))))
       .subscribe(() => {
-        this._store.dispatch(new DeleteListNodeAction(this.listIri));
-        this.listIri = undefined;
-        this._actions$
-          .pipe(ofActionSuccessful(DeleteListNodeAction))
-          .pipe(take(1))
-          .subscribe(() => {
-            this._store.dispatch(new LoadListsInProjectAction(this.projectIri));
-            this._router.navigate([RouteConstants.project, this.projectUuid, RouteConstants.dataModels]);
-          });
+        this._store.dispatch(new LoadListsInProjectAction(this.projectIri));
+        this._router.navigate([RouteConstants.project, this.projectUuid, RouteConstants.dataModels]);
       });
   }
 
   private _setPageTitle() {
     const project = this._store.selectSnapshot(ProjectsSelectors.currentProject);
-    this._titleService.setTitle(`Project ${project?.shortname} | List${this.listIri ? '' : 's'}`);
+    this._titleService.setTitle(`Vocabularie(s) in project ${project?.shortname}`);
   }
 }
diff --git a/libs/vre/shared/app-state/src/lib/lists/lists.state.ts b/libs/vre/shared/app-state/src/lib/lists/lists.state.ts
@@ -24,7 +24,9 @@ export class ListsState {
     ctx.patchState({ isLoading: true });
     return this._listApiService.listInProject(projectIri).pipe(
       take(1),
-      tap(response => ctx.patchState({ listsInProject: response.lists })),
+      tap(response => {
+        ctx.patchState({ listsInProject: response.lists });
+      }),
       finalize(() => ctx.patchState({ isLoading: false }))
     );
   }
@@ -36,7 +38,12 @@ export class ListsState {
       take(1),
       tap({
         next: () => {
-          ctx.patchState({ isLoading: false });
+          const state = ctx.getState();
+          state.listsInProject.splice(
+            state.listsInProject.findIndex(u => u.id === listIri),
+            1
+          );
+          ctx.setState({ ...state, isLoading: false });
         },
       })
     );