101623: Reset in Treeview also resets selectedItems + Provide TreeviewService in root

src/app/browse-by/browse-by-page.module.ts

@@ -13,7 +13,7 @@ import { BrowseByGuard } from './browse-by-guard';
   providers: [
     ItemDataService,
     BrowseService,
-    BrowseByGuard
+    BrowseByGuard,
   ]
 })
 export class BrowseByPageModule {

src/app/core/submission/vocabularies/vocabulary.service.ts

@@ -223,13 +223,15 @@ export class VocabularyService {
    *                                    no valid cached version. Defaults to true
    * @param reRequestOnStale            Whether or not the request should automatically be re-
    *                                    requested after the response becomes stale
+   * @param constructId                 Whether constructing the full vocabularyDetail ID
+   *                                    ({vocabularyName}:{detailName}) is still necessary
    * @param linksToFollow               List of {@link FollowLinkConfig} that indicate which
    *                                    {@link HALLink}s should be automatically resolved
    * @return {Observable<RemoteData<VocabularyEntryDetail>>}
    *    Return an observable that emits VocabularyEntryDetail object
    */
-  findEntryDetailById(id: string, name: string, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig<VocabularyEntryDetail>[]): Observable<RemoteData<VocabularyEntryDetail>> {
+  findEntryDetailById(id: string, name: string, useCachedVersionIfAvailable = true, reRequestOnStale = true, constructId: boolean = true, ...linksToFollow: FollowLinkConfig<VocabularyEntryDetail>[]): Observable<RemoteData<VocabularyEntryDetail>> {
-    const findId = `${name}:${id}`;
+    const findId: string = (constructId ? `${name}:${id}` : id);
     return this.vocabularyEntryDetailDataService.findById(findId, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
   }
 

src/app/shared/form/form.module.ts

@@ -32,7 +32,6 @@ import { NumberPickerComponent } from './number-picker/number-picker.component';
 import { AuthorityConfidenceStateDirective } from './directives/authority-confidence-state.directive';
 import { SortablejsModule } from 'ngx-sortablejs';
 import { VocabularyTreeviewComponent } from './vocabulary-treeview/vocabulary-treeview.component';
-import { VocabularyTreeviewService } from './vocabulary-treeview/vocabulary-treeview.service';
 import { VocabularyTreeviewModalComponent } from './vocabulary-treeview-modal/vocabulary-treeview-modal.component';
 import { FormBuilderService } from './builder/form-builder.service';
 import { DsDynamicTypeBindRelationService } from './builder/ds-dynamic-form-ui/ds-dynamic-type-bind-relation.service';
@@ -104,7 +103,6 @@ const DIRECTIVES = [
       useValue: dsDynamicFormControlMapFn
     },
     ...DYNAMIC_MATCHER_PROVIDERS,
-    VocabularyTreeviewService,
     DynamicFormLayoutService,
     DynamicFormService,
     DynamicFormValidationService,

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html

@@ -33,6 +33,7 @@
           >
             <input class="mr-2" type="checkbox"
                    [disabled]="!node.item?.selectable"
+                   [(ngModel)]="node.isSelected"
                    [checked]="node.isSelected"
                    (change)="onSelect(node.item)"
             >
@@ -65,6 +66,7 @@
                 container="body">
             <input class="mr-2" type="checkbox"
                    [disabled]="!node.item?.selectable"
+                   [(ngModel)]="node.isSelected"
                    [checked]="node.isSelected"
                    (change)="onSelect(node.item)"
             >

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.spec.ts

@@ -21,6 +21,7 @@ import { AuthTokenInfo } from '../../../core/auth/models/auth-token-info.model';
 import { authReducer } from '../../../core/auth/auth.reducer';
 import { storeModuleConfig } from '../../../app.reducer';
 import { By } from '@angular/platform-browser';
+import { VocabularyService } from '../../../core/submission/vocabularies/vocabulary.service';
 
 describe('VocabularyTreeviewComponent test suite', () => {
 
@@ -49,6 +50,14 @@ describe('VocabularyTreeviewComponent test suite', () => {
     restoreNodes: jasmine.createSpy('restoreNodes'),
     cleanTree: jasmine.createSpy('cleanTree'),
   });
+  const vocabularyServiceStub = jasmine.createSpyObj('VocabularyService', {
+    getVocabularyEntriesByValue: jasmine.createSpy('getVocabularyEntriesByValue'),
+    getEntryDetailParent: jasmine.createSpy('getEntryDetailParent'),
+    findEntryDetailById: jasmine.createSpy('findEntryDetailById'),
+    searchTopEntries: jasmine.createSpy('searchTopEntries'),
+    getEntryDetailChildren: jasmine.createSpy('getEntryDetailChildren'),
+    clearSearchTopRequests: jasmine.createSpy('clearSearchTopRequests')
+  });
 
   initialState = {
     core: {
@@ -77,6 +86,7 @@ describe('VocabularyTreeviewComponent test suite', () => {
       ],
       providers: [
         { provide: VocabularyTreeviewService, useValue: vocabularyTreeviewServiceStub },
+        { provide: VocabularyService, useValue: vocabularyServiceStub },
         { provide: NgbActiveModal, useValue: modalStub },
         provideMockStore({ initialState }),
         ChangeDetectorRef,

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts

@@ -17,6 +17,8 @@ import { VocabularyTreeFlattener } from './vocabulary-tree-flattener';
 import { VocabularyTreeFlatDataSource } from './vocabulary-tree-flat-data-source';
 import { CoreState } from '../../../core/core-state.model';
 import { lowerCase } from 'lodash/string';
+import { VocabularyService } from '../../../core/submission/vocabularies/vocabulary.service';
+import { getFirstSucceededRemoteDataPayload } from '../../../core/shared/operators';
 
 /**
  * Component that shows a hierarchical vocabulary in a tree view
@@ -114,11 +116,13 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit {
    * Initialize instance variables
    *
    * @param {VocabularyTreeviewService} vocabularyTreeviewService
+   * @param {vocabularyService} vocabularyService
    * @param {Store<CoreState>} store
    * @param {TranslateService} translate
    */
   constructor(
     private vocabularyTreeviewService: VocabularyTreeviewService,
+    private vocabularyService: VocabularyService,
     private store: Store<CoreState>,
     private translate: TranslateService
   ) {
@@ -284,13 +288,22 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit {
    * Reset tree resulting from a previous search
    */
   reset() {
+    this.searchText = '';
+    for (const item of this.selectedItems) {
+      this.subs.push(this.vocabularyService.findEntryDetailById(item, this.vocabularyOptions.name, true, true, false).pipe(
+        getFirstSucceededRemoteDataPayload(),
+      ).subscribe((detail: VocabularyEntryDetail) => {
+        this.deselect.emit(detail);
+      }));
+      this.nodeMap.get(item).isSelected = false;
+    }
+    this.selectedItems = [];
+
     if (isNotEmpty(this.storedNodeMap)) {
       this.nodeMap = this.storedNodeMap;
       this.storedNodeMap = new Map<string, TreeviewFlatNode>();
       this.vocabularyTreeviewService.restoreNodes();
     }
-
-    this.searchText = '';
   }
 
   /**

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.service.ts

@@ -25,7 +25,9 @@ import { VocabularyEntryDetail } from '../../../core/submission/vocabularies/mod
 /**
  * A service that provides methods to deal with vocabulary tree
  */
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class VocabularyTreeviewService {
 
   /**

src/modules/app/browser-app.module.ts

@@ -31,7 +31,6 @@ import { GoogleAnalyticsService } from '../../app/statistics/google-analytics.se
 import { AuthRequestService } from '../../app/core/auth/auth-request.service';
 import { BrowserAuthRequestService } from '../../app/core/auth/browser-auth-request.service';
 import { BrowserInitService } from './browser-init.service';
-import { VocabularyTreeviewService } from 'src/app/shared/form/vocabulary-treeview/vocabulary-treeview.service';
 
 export const REQ_KEY = makeStateKey<string>('req');
 
@@ -111,10 +110,6 @@ export function getRequest(transferState: TransferState): any {
     {
       provide: LocationToken,
       useFactory: locationProvider,
-    },
-    {
-      provide: VocabularyTreeviewService,
-      useClass: VocabularyTreeviewService,
     }
   ]
 })