tabbed-related-entities-search.component.ts

import { AsyncPipe } from '@angular/common';
import {
  Component,
  Input,
  OnInit,
} from '@angular/core';
import {
  ActivatedRoute,
  Router,
} from '@angular/router';
import { Item } from '@dspace/core/shared/item.model';
import {
  NgbNav,
  NgbNavContent,
  NgbNavItem,
  NgbNavLink,
  NgbNavOutlet,
} from '@ng-bootstrap/ng-bootstrap';
import { TranslateModule } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { VarDirective } from '../../../../shared/utils/var.directive';
import { RelatedEntitiesSearchComponent } from '../related-entities-search/related-entities-search.component';

@Component({
  selector: 'ds-tabbed-related-entities-search',
  templateUrl: './tabbed-related-entities-search.component.html',
  imports: [
    AsyncPipe,
    NgbNav,
    NgbNavContent,
    NgbNavItem,
    NgbNavLink,
    NgbNavOutlet,
    RelatedEntitiesSearchComponent,
    TranslateModule,
    VarDirective,
  ],
})
/**
 * A component to show related items as search results, split into tabs by relationship-type
 * Related items can be facetted, or queried using an
 * optional search box.
 */
export class TabbedRelatedEntitiesSearchComponent implements OnInit {
  /**
   * The types of relationships to fetch items for
   * e.g. 'isAuthorOfPublication'
   */
  @Input() relationTypes: {
    label: string,
    filter: string,
    configuration?: string
  }[];

  /**
   * The item to render relationships for
   */
  @Input() item: Item;

  /**
   * Whether or not the search bar and title should be displayed (defaults to true)
   * @type {boolean}
   */
  @Input() searchEnabled = true;

  /**
   * The ratio of the sidebar's width compared to the search results (1-12) (defaults to 4)
   * @type {number}
   */
  @Input() sideBarWidth = 4;

  /**
   * Defines whether or not to show the scope selector
   */
  @Input() showScopeSelector = true;

  /**
   * The active tab
   */
  activeTab$: Observable<string>;

  constructor(protected route: ActivatedRoute,
              protected router: Router) {
  }

  /**
   * If the url contains a "tab" query parameter, set this tab to be the active tab
   */
  ngOnInit(): void {
    this.activeTab$ = this.route.queryParams.pipe(
      map((params) => params.tab),
    );
  }

  /**
   * Add a "tab" query parameter to the URL when changing tabs
   * @param event
   */
  onTabChange(event) {
    this.router.navigate([], {
      relativeTo: this.route,
      queryParams: {
        tab: event.nextId,
        query: this.route.snapshot.queryParams.query,
        scope: this.route.snapshot.queryParams.scope,
        'spc.page': 1,
      },
    });
  }

}