only add Display Search Facets to the Homepage (#2275)

* Update homepage-config.interface.ts

change comment of homepage-config.interface.ts

* advance Search add

* slove error while unti test

* write unit test

* Ensures select element has an accessible name

* change data pass into url

* error resolve

* Search.Filters.Applied.F.Title given name as Title

* Advanced filters configurable in the User interface (in config.*.yml)

* Search Facets on all Home, Community, Collection

* should pass accessibility tests error resolve

* change label name

* unique role or role/label/title

* remove same role name

* order of headings is semantically correct

* semantically correct advance search and global css

* URL pattern

* headings is semantically correct

* Merge branch 'Search-Facets-home-community-collection' of https://github.com/GauravD2t/Advanced-search into Search-Facets-home-community-collection

* change update

* change update

* remove advance search code from here

* removing all code relating to Community/Collection pages

* resolve  code conflict

* remove the space

* remove commented code

* add  'merge'

* resolve confilt

* remove back file

* add lable dynamic

* Update search-navbar.component.spec.ts

* Update search-filter.component.html

* showDiscoverFilters config in yml file

* Ensures the order of headings is semantically correct

* showDiscoverFilters change default to false

* Update homepage-config.interface.ts to use boolean instead of false

---------

Co-authored-by: Tim Donohue <tim.donohue@lyrasis.org>

config/config.example.yml

@@ -294,6 +294,8 @@ homePage:
     # No. of communities to list per page on the home page
     # This will always round to the nearest number from the list of page sizes. e.g. if you set it to 7 it'll use 10
     pageSize: 5
+  # Enable or disable the Discover filters on the homepage
+  showDiscoverFilters: false
 
 # Item Config
 item:

src/app/collection-page/collection-page.component.html

@@ -58,4 +58,4 @@
     <ds-themed-loading *ngIf="collectionRD?.isLoading"
                        message="{{'loading.collection' | translate}}"></ds-themed-loading>
   </div>
-</div>
+</div>

src/app/community-page/community-page.component.ts

@@ -7,7 +7,7 @@ import { Bitstream } from '../core/shared/bitstream.model';
 import { Community } from '../core/shared/community.model';
 import { fadeInOut } from '../shared/animations/fade';
 import { hasValue } from '../shared/empty.util';
-import { getAllSucceededRemoteDataPayload} from '../core/shared/operators';
+import { getAllSucceededRemoteDataPayload } from '../core/shared/operators';
 import { AuthService } from '../core/auth/auth.service';
 import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../core/data/feature-authorization/feature-id';

src/app/home-page/home-page.component.html

@@ -1,10 +1,19 @@
 <ds-themed-home-news></ds-themed-home-news>
-<div class="container">
+<div [ngClass]="appConfig.homePage.showDiscoverFilters ? 'container-fluid' : 'container'">
-  <ng-container *ngIf="(site$ | async) as site">
+  <div class="row m-5">
-    <ds-view-tracker [object]="site"></ds-view-tracker>
+    <div class="col-sm-3" *ngIf="appConfig.homePage.showDiscoverFilters">
-  </ng-container>
+      <ds-configuration-search-page [sideBarWidth]="12" [showViewModes]="false" [searchEnabled]="false"
-  <ds-themed-search-form [inPlaceSearch]="false" [searchPlaceholder]="'home.search-form.placeholder' | translate"></ds-themed-search-form>
+        [inPlaceSearch]="false" [showScopeSelector]="false"></ds-configuration-search-page>
-  <ds-themed-top-level-community-list></ds-themed-top-level-community-list>
+    </div>
-  <ds-recent-item-list *ngIf="recentSubmissionspageSize>0"></ds-recent-item-list>
+    <div [ngClass]="appConfig.homePage.showDiscoverFilters ? 'col-sm-9' : 'col-sm-12'">
+      <ng-container *ngIf="(site$ | async) as site">
+        <ds-view-tracker [object]="site"></ds-view-tracker>
+      </ng-container>
+      <ds-themed-search-form [inPlaceSearch]="false"
+        [searchPlaceholder]="'home.search-form.placeholder' | translate"></ds-themed-search-form>
+      <ds-themed-top-level-community-list></ds-themed-top-level-community-list>
+      <ds-recent-item-list *ngIf="recentSubmissionspageSize>0"></ds-recent-item-list>
+    </div>
+    </div>
 </div>
 <ds-suggestions-popup></ds-suggestions-popup>

src/app/home-page/home-page.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { map } from 'rxjs/operators';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
 import { Site } from '../core/shared/site.model';
 import { environment } from '../../environments/environment';
+import { APP_CONFIG, AppConfig } from 'src/config/app-config.interface';
 @Component({
   selector: 'ds-home-page',
   styleUrls: ['./home-page.component.scss'],
@@ -14,6 +15,7 @@ export class HomePageComponent implements OnInit {
   site$: Observable<Site>;
   recentSubmissionspageSize: number;
   constructor(
+    @Inject(APP_CONFIG) protected appConfig: AppConfig,
     private route: ActivatedRoute,
   ) {
     this.recentSubmissionspageSize = environment.homePage.recentSubmissions.pageSize;

src/app/home-page/home-page.module.ts

@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { HomeNewsComponent } from './home-news/home-news.component';
 import { HomePageRoutingModule } from './home-page-routing.module';
-
 import { HomePageComponent } from './home-page.component';
 import { TopLevelCommunityListComponent } from './top-level-community-list/top-level-community-list.component';
 import { StatisticsModule } from '../statistics/statistics.module';
@@ -13,6 +12,7 @@ import { RecentItemListComponent } from './recent-item-list/recent-item-list.com
 import { JournalEntitiesModule } from '../entity-groups/journal-entities/journal-entities.module';
 import { ResearchEntitiesModule } from '../entity-groups/research-entities/research-entities.module';
 import { ThemedTopLevelCommunityListComponent } from './top-level-community-list/themed-top-level-community-list.component';
+import { SearchModule } from '../shared/search/search.module';
 import { NotificationsModule } from '../notifications/notifications.module';
 
 const DECLARATIONS = [
@@ -29,6 +29,7 @@ const DECLARATIONS = [
   imports: [
     CommonModule,
     SharedModule.withEntryComponents(),
+    SearchModule,
     JournalEntitiesModule.withEntryComponents(),
     ResearchEntitiesModule.withEntryComponents(),
     HomePageRoutingModule,

src/app/shared/search/search-filters/search-filter/search-filter.component.ts

@@ -157,11 +157,20 @@ export class SearchFilterComponent implements OnInit {
   }
 
   get regionId(): string {
-    return `search-filter-region-${this.sequenceId}`;
+    if (this.inPlaceSearch) {
+      return `search-filter-region-${this.sequenceId}`;
+    } else {
+      return `search-filter-region-home-${this.sequenceId}`;
+    }
+
   }
 
   get toggleId(): string {
-    return `search-filter-toggle-${this.sequenceId}`;
+    if (this.inPlaceSearch) {
+      return `search-filter-toggle-${this.sequenceId}`;
+    } else {
+      return `search-filter-toggle-home-${this.sequenceId}`;
+    }
   }
 
   /**

src/app/shared/search/search-filters/search-filters.component.html

@@ -1,4 +1,5 @@
-<h3>{{"search.filters.head" | translate}}</h3>
+<h3 *ngIf="inPlaceSearch">{{filterLabel+'.filters.head' | translate}}</h3>
+<h2 *ngIf="!inPlaceSearch">{{filterLabel+'.filters.head' | translate}}</h2>
 <div *ngIf="(filters | async)?.hasSucceeded">
     <div *ngFor="let filter of (filters | async)?.payload; trackBy: trackUpdate">
         <ds-search-filter [scope]="currentScope" [filter]="filter" [inPlaceSearch]="inPlaceSearch" [refreshFilters]="refreshFilters"></ds-search-filter>

src/app/shared/search/search-filters/search-filters.component.spec.ts

@@ -20,7 +20,8 @@ describe('SearchFiltersComponent', () => {
     getClearFiltersQueryParams: () => {
     },
     getSearchLink: () => {
-    }
+    },
+    getConfigurationSearchConfig: () => { },
     /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
   };
 

src/app/shared/search/search-filters/search-filters.component.ts

@@ -61,6 +61,7 @@ export class SearchFiltersComponent implements OnInit, OnDestroy {
   searchLink: string;
 
   subs = [];
+  filterLabel = 'search';
 
   /**
    * Initialize instance variables
@@ -77,6 +78,9 @@ export class SearchFiltersComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
+    if (!this.inPlaceSearch) {
+      this.filterLabel = 'discover';
+    }
     this.clearParams = this.searchConfigService.getCurrentFrontendFilters().pipe(map((filters) => {
       Object.keys(filters).forEach((f) => filters[f] = null);
       return filters;

src/app/shared/search/search-sidebar/search-sidebar.component.html

@@ -23,7 +23,7 @@
                                [filters]="filters"
                                [refreshFilters]="refreshFilters"
                                [inPlaceSearch]="inPlaceSearch"></ds-themed-search-filters>
-            <ds-themed-search-settings [currentSortOption]="currentSortOption"
+            <ds-themed-search-settings *ngIf="inPlaceSearch" [currentSortOption]="currentSortOption"
                                        [sortOptionsList]="sortOptionsList"></ds-themed-search-settings>
         </div>
     </div>

src/app/shared/search/search.component.html

@@ -10,8 +10,9 @@
   <ng-template *ngTemplateOutlet="searchContent"></ng-template>
 </div>
 
-<ds-page-with-sidebar *ngIf="showSidebar && (initialized$ | async)" [id]="'search-page'" [sidebarContent]="sidebarContent">
+<ds-page-with-sidebar *ngIf="showSidebar && (initialized$ | async)" [id]="'search-page'" [sideBarWidth]="sideBarWidth"
-  <ng-template *ngTemplateOutlet="searchContent"></ng-template>
+    [sidebarContent]="sidebarContent">
+    <ng-template *ngTemplateOutlet="searchContent"></ng-template>
 </ds-page-with-sidebar>
 
 <ng-template #searchContent>
@@ -22,15 +23,15 @@
         </div>
         <div id="search-content" class="col-12">
             <div class="d-block d-md-none search-controls clearfix">
-                <ds-view-mode-switch [viewModeList]="viewModeList" [inPlaceSearch]="inPlaceSearch"></ds-view-mode-switch>
+                <ds-view-mode-switch *ngIf="inPlaceSearch" [viewModeList]="viewModeList"
-                <button [attr.aria-label]="'search.sidebar.open' | translate" (click)="openSidebar()"
+                    [inPlaceSearch]="inPlaceSearch"></ds-view-mode-switch>
-                        aria-controls="search-sidebar-content"
+                <button (click)="openSidebar()" aria-controls="#search-body"
                         class="btn btn-outline-primary float-right open-sidebar"><i
                         class="fas fa-sliders"></i> {{"search.sidebar.open"
                         | translate}}
                 </button>
             </div>
-            <ds-themed-search-results [searchResults]="resultsRD$ | async"
+            <ds-themed-search-results *ngIf="inPlaceSearch" [searchResults]="resultsRD$ | async"
                                       [searchConfig]="searchOptions$ | async"
                                       [configuration]="(currentConfiguration$ | async)"
                                       [disableHeader]="!searchEnabled"

src/app/shared/search/search.module.ts

@@ -34,7 +34,6 @@ import { ThemedSearchSettingsComponent } from './search-settings/themed-search-s
 import { NouisliderModule } from 'ng2-nouislider';
 import { ThemedSearchFiltersComponent } from './search-filters/themed-search-filters.component';
 import { ThemedSearchSidebarComponent } from './search-sidebar/themed-search-sidebar.component';
-
 const COMPONENTS = [
   SearchComponent,
   ThemedSearchComponent,

src/app/shared/sidebar/sidebar-dropdown.component.html

@@ -3,4 +3,4 @@
   <select id="{{id}}" class="form-control" (change)="change.emit($event)">
     <ng-content></ng-content>
   </select>
-</div>
+</div>

src/assets/i18n/en.json5

@@ -5630,6 +5630,8 @@
 
   "admin.system-wide-alert.title": "System-wide Alerts",
 
+  "discover.filters.head": "Discover",
+
   "item-access-control-title": "This form allows you to perform changes to the access conditions of the item's metadata or its bitstreams.",
 
   "collection-access-control-title": "This form allows you to perform changes to the access conditions of all the items owned by this collection. Changes may be performed to either all Item metadata or all content (bitstreams).",
@@ -5698,3 +5700,4 @@
 
   "admin.notifications.publicationclaim.page.title": "Publication Claim",
 }
+

src/config/default-app-config.ts

@@ -306,7 +306,8 @@ export class DefaultAppConfig implements AppConfig {
     },
     topLevelCommunityList: {
       pageSize: 5
-    }
+    },
+    showDiscoverFilters: false
   };
 
   // Item Config

src/config/homepage-config.interface.ts

@@ -1,7 +1,7 @@
 import { Config } from './config.interface';
 
 /**
- * Config that determines how the dropdown list of years are created for browse-by-date components
+ * Config that determines how the recentSubmissions list showing at home page
  */
 export interface HomeConfig extends Config {
   recentSubmissions: {
@@ -19,4 +19,8 @@ export interface HomeConfig extends Config {
   topLevelCommunityList: {
     pageSize: number;
   };
+  /*
+  * Enable or disable the Discover filters on the homepage
+  */
+  showDiscoverFilters: boolean;
 }

src/environments/environment.test.ts

@@ -246,7 +246,8 @@ export const environment: BuildConfig = {
     },
     topLevelCommunityList: {
       pageSize: 5
-    }
+    },
+    showDiscoverFilters: false
   },
   item: {
     edit: {