dspace-angular/src/app/shared/search/search.component.html at dda35562ae2cb78f54cc2f3a816b38b2a74685ad · DSpace/dspace-angular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
@if (searchEnabled && (isXsOrSm$ | async)) {
  <div class="container">
    <div class="row">
      <div class="col-12">
        <ng-template *ngTemplateOutlet="searchForm"></ng-template>
      </div>
    </div>
  </div>
}

@if (!showSidebar && (initialized$ | async)) {
  <div>
    <ng-template *ngTemplateOutlet="searchContent"></ng-template>
  </div>
}

@if (showSidebar && (initialized$ | async)) {
  <ds-page-with-sidebar [id]="'search-page'" [sideBarWidth]="sideBarWidth"
    [sidebarContent]="sidebarContent">
    <ng-template *ngTemplateOutlet="searchContent"></ng-template>
  </ds-page-with-sidebar>
}

<ng-template #searchContent>
  <div class="row">
    @if ((isXsOrSm$ | async) !== true) {
      <div class="col-12">
        @if (searchEnabled) {
          <ng-template *ngTemplateOutlet="searchForm"></ng-template>
        }
        <ng-content select="[additionalSearchOptions]"></ng-content>
      </div>
    }
    <div id="search-content" class="col-12">
      <div class="d-block d-md-none search-controls clearfix">
        @if (inPlaceSearch && showViewModes) {
          <ds-view-mode-switch [viewModeList]="viewModeList"
          [inPlaceSearch]="inPlaceSearch"></ds-view-mode-switch>
        }
        <button (click)="openSidebar()" aria-controls="#search-body"
          class="btn btn-outline-primary float-end open-sidebar"><i
        class="fas fa-sliders"></i> {{"search.sidebar.open"
        | translate}}
      </button>
    </div>
    <ng-content select="[searchContentTop]"></ng-content>
    @if (inPlaceSearch) {
      <ds-search-results
        [searchResults]="resultsRD$ | async"
        [spellCheckSuggestions]="(resultsRD$ | async)?.payload?.spellCheckSuggestions"
        [searchConfig]="searchOptions$ | async"
        [configuration]="(currentConfiguration$ | async)"
        [disableHeader]="!searchEnabled"
        [linkType]="linkType"
        [context]="(currentContext$ | async)"
        [selectable]="selectable"
        [selectionConfig]="selectionConfig"
        [showCsvExport]="showCsvExport"
        [showThumbnails]="showThumbnails"
        (contentChange)="onContentChange($event)"
        (deselectObject)="deselectObject.emit($event)"
      (selectObject)="selectObject.emit($event)"></ds-search-results>
    }
  </div>
</div>
</ng-template>

<ng-template #sidebarContent>
  @if ((isXsOrSm$ | async) !== true) {
    <ds-search-sidebar id="search-sidebar"
      [configurationList]="configurationList"
      [configuration]="(currentConfiguration$ | async)"
      [currentScope]="(currentScope$ | async)"
      [filters]="filtersRD$.asObservable()"
      [refreshFilters]="refreshFilters"
      [resultCount]="(resultsRD$ | async)?.payload?.totalElements"
      [searchOptions]="(searchOptions$ | async)"
      [sortOptionsList]="(sortOptionsList$ | async)"
      [currentSortOption]="(currentSortOptions$ | async)"
      [inPlaceSearch]="inPlaceSearch"
      [viewModeList]="viewModeList"
      [showViewModes]="showViewModes"
      (changeConfiguration)="changeContext($event.context)"
    (changeViewMode)="changeViewMode()"></ds-search-sidebar>
  }
  @if ((isXsOrSm$ | async)) {
    <ds-search-sidebar id="search-sidebar-sm"
      [configurationList]="configurationList"
      [configuration]="(currentConfiguration$ | async)"
      [currentScope]="(currentScope$ | async)"
      [filters]="filtersRD$.asObservable()"
      [refreshFilters]="refreshFilters"
      [resultCount]="(resultsRD$ | async)?.payload?.totalElements"
      [searchOptions]="(searchOptions$ | async)"
      [sortOptionsList]="(sortOptionsList$ | async)"
      [currentSortOption]="(currentSortOptions$ | async)"
      [inPlaceSearch]="inPlaceSearch"
      [viewModeList]="viewModeList"
      [showViewModes]="showViewModes"
      (toggleSidebar)="closeSidebar()"
      (changeConfiguration)="changeContext($event.context)"
      (changeViewMode)="changeViewMode()">
    </ds-search-sidebar>
  }
</ng-template>

<ng-template #searchForm>
  <ds-search-form id="search-form"
    [query]="(searchOptions$ | async)?.query"
    [scope]="(searchOptions$ | async)?.scope"
    [hideScopeInUrl]="hideScopeInUrl"
    [currentUrl]="searchLink"
    [showScopeSelector]="showScopeSelector"
    [inPlaceSearch]="inPlaceSearch"
    [searchPlaceholder]="searchFormPlaceholder | translate">
  </ds-search-form>
  <div class="row mb-3 mb-md-1">
    <div class="labels col-12">
      <ds-search-labels [inPlaceSearch]="inPlaceSearch">
      </ds-search-labels>
    </div>
  </div>
</ng-template>