update disctionary listing, fix toggle select

apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html

@@ -25,17 +25,22 @@
                     <redaction-round-checkbox
                         (click)="toggleSelectAll()"
                         [active]="areAllEntitiesSelected"
-                        [indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected"
+                        [indeterminate]="
+                            (areSomeEntitiesSelected$ | async) && !areAllEntitiesSelected
+                        "
                     ></redaction-round-checkbox>
                 </div>
 
                 <span class="all-caps-label">
-                    {{ tableHeader }}
+                    {{
+                        'dictionary-listing.table-header.title'
+                            | translate: { length: (displayedEntities$ | async)?.length }
+                    }}
                 </span>
 
                 <redaction-circle-button
                     (action)="openDeleteDictionariesDialog($event)"
-                    *ngIf="areSomeEntitiesSelected && permissionsService.isAdmin()"
+                    *ngIf="(areSomeEntitiesSelected$ | async) && permissionsService.isAdmin()"
                     icon="red:trash"
                     tooltip="dictionary-listing.bulk.delete"
                     type="dark-bg"
@@ -100,7 +105,7 @@
             ></redaction-empty-state>
 
             <redaction-empty-state
-                *ngIf="allEntities.length && !displayedEntities.length"
+                *ngIf="allEntities.length && (displayedEntities$ | async)?.length === 0"
                 screen="dictionary-listing"
                 type="no-match"
             ></redaction-empty-state>
@@ -108,7 +113,8 @@
             <cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
                 <div
                     *cdkVirtualFor="
-                        let dict of displayedEntities
+                        let dict of displayedEntities$
+                            | async
                             | sortBy: sortingOption.order:sortingOption.column
                     "
                     [routerLink]="[dict.type]"

apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts

@@ -15,6 +15,7 @@ import { FilterService } from '../../../shared/services/filter.service';
 import { SearchService } from '../../../shared/services/search.service';
 import { ScreenStateService } from '../../../shared/services/screen-state.service';
 import { ScreenNames, SortingService } from '../../../../services/sorting.service';
+import { NewBaseListingComponent } from '../../../shared/base/new-base-listing.component';
 
 const toChartConfig = (dict: TypeValueWrapper): DoughnutChartConfig => ({
     value: dict.entries ? dict.entries.length : 0,
@@ -29,12 +30,10 @@ const toChartConfig = (dict: TypeValueWrapper): DoughnutChartConfig => ({
     providers: [FilterService, SearchService, ScreenStateService, SortingService]
 })
 export class DictionaryListingScreenComponent
-    extends BaseListingComponent<TypeValueWrapper>
+    extends NewBaseListingComponent<TypeValueWrapper>
     implements OnInit
 {
     chartData: DoughnutChartConfig[] = [];
-    protected readonly _searchKey = 'label';
-    protected readonly _selectionKey = 'type';
 
     constructor(
         private readonly _dialogService: AdminDialogService,
@@ -49,26 +48,25 @@ export class DictionaryListingScreenComponent
         super(_injector);
         _loadingService.start();
         this._sortingService.setScreenName(ScreenNames.DOSSIER_LISTING);
+        this._searchService.setSearchKey('label');
+        this._screenStateService.setIdKey('type');
         _appStateService.activateDossierTemplate(_activatedRoute.snapshot.params.dossierTemplateId);
     }
 
-    get tableHeader(): string {
-        return this._translateService.instant('dictionary-listing.table-header.title', {
-            length: this.displayedEntities.length
-        });
-    }
-
     ngOnInit(): void {
         this._loadDictionaryData();
     }
 
-    openDeleteDictionariesDialog($event?: MouseEvent, types = this.selectedEntitiesIds) {
+    openDeleteDictionariesDialog(
+        $event?: MouseEvent,
+        types = this._screenStateService.selectedEntitiesIds
+    ) {
         this._dialogService.openDialog('confirm', $event, null, async () => {
             this._loadingService.start();
             await this._dictionaryControllerService
                 .deleteTypes(types, this._appStateService.activeDossierTemplateId)
                 .toPromise();
-            this.selectedEntitiesIds = [];
+            this._screenStateService.setSelectedEntitiesIds([]);
             await this._appStateService.loadDictionaryData();
             this._loadDictionaryData(false);
             this._calculateData();
@@ -100,13 +98,15 @@ export class DictionaryListingScreenComponent
         const entities = Object.values(appStateDictionaryData).filter(d => !d.virtual);
 
         if (!loadEntries)
-            this.allEntities = entities.map(dict => {
-                dict.entries = this.allEntities.find(d => d.type === dict.type)?.entries || [];
-                return dict;
-            });
-        else this.allEntities = entities;
+            this._screenStateService.setEntities(
+                entities.map(dict => {
+                    dict.entries = this.allEntities.find(d => d.type === dict.type)?.entries || [];
+                    return dict;
+                })
+            );
+        else this._screenStateService.setEntities(entities);
 
-        this.displayedEntities = [...this.allEntities];
+        this._screenStateService.setDisplayedEntities(this.allEntities);
 
         if (!loadEntries) return;
 

apps/red-ui/src/app/modules/shared/base/new-base-listing.component.ts

@@ -4,7 +4,6 @@ import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { FilterService } from '../services/filter.service';
 import { SearchService } from '../services/search.service';
 import { ScreenStateService } from '../services/screen-state.service';
-import { FilterWrapper } from '../components/filters/popup-filter/model/filter-wrapper.model';
 import { Observable } from 'rxjs';
 import { FilterModel } from '../components/filters/popup-filter/model/filter.model';
 

apps/red-ui/src/app/modules/shared/services/screen-state.service.ts

@@ -71,18 +71,18 @@ export class ScreenStateService<T> {
 
     toggleEntitySelected(entity: T): void {
         const currentEntityIdx = this.selectedEntitiesIds.indexOf(entity[this._getIdKey]);
-
         if (currentEntityIdx === -1) {
             const currentEntityId = entity[this._getIdKey];
             return this.setSelectedEntitiesIds([...this.selectedEntitiesIds, currentEntityId]);
         }
 
-        this.setSelectedEntitiesIds(this.selectedEntitiesIds.splice(currentEntityIdx, 1));
+        this.setSelectedEntitiesIds(
+            this.selectedEntitiesIds.filter((el, idx) => idx !== currentEntityIdx)
+        );
     }
 
     toggleSelectAll(): void {
-        if (this.areSomeEntitiesSelected$) return this.selectedEntitiesIds$.next([]);
-
+        if (this.areAllEntitiesSelected) return this.setSelectedEntitiesIds([]);
         this.setSelectedEntitiesIds(this._displayedEntitiesIds);
     }