Fixed home news facets sidebar & home content section alignment when facets are disabled

alexandrevryghem · alexandrevryghem · commit 08027bb75379 · 2024-04-10T22:57:24.000+02:00
diff --git a/src/app/admin/admin-search-page/admin-search-page.component.html b/src/app/admin/admin-search-page/admin-search-page.component.html
@@ -1 +1 @@
-<ds-configuration-search-page configuration="administrativeView" [context]="context"></ds-configuration-search-page>
+<ds-themed-configuration-search-page configuration="administrativeView" [context]="context"></ds-themed-configuration-search-page>
diff --git a/src/app/admin/admin-search-page/admin-search-page.component.spec.ts b/src/app/admin/admin-search-page/admin-search-page.component.spec.ts
@@ -6,7 +6,7 @@ import {
 } from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
 
-import { ConfigurationSearchPageComponent } from '../../search-page/configuration-search-page.component';
+import { ThemedConfigurationSearchPageComponent } from '../../search-page/themed-configuration-search-page.component';
 import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
 import { AdminSearchPageComponent } from './admin-search-page.component';
 
@@ -23,7 +23,7 @@ describe('AdminSearchPageComponent', () => {
       schemas: [NO_ERRORS_SCHEMA],
     }).overrideComponent(AdminSearchPageComponent, {
       remove: {
-        imports: [ConfigurationSearchPageComponent],
+        imports: [ThemedConfigurationSearchPageComponent],
       },
     })
       .compileComponents();
diff --git a/src/app/admin/admin-search-page/admin-search-page.component.ts b/src/app/admin/admin-search-page/admin-search-page.component.ts
@@ -1,14 +1,14 @@
 import { Component } from '@angular/core';
 
 import { Context } from '../../core/shared/context.model';
-import { ConfigurationSearchPageComponent } from '../../search-page/configuration-search-page.component';
+import { ThemedConfigurationSearchPageComponent } from '../../search-page/themed-configuration-search-page.component';
 
 @Component({
   selector: 'ds-admin-search-page',
   templateUrl: './admin-search-page.component.html',
   styleUrls: ['./admin-search-page.component.scss'],
   standalone: true,
-  imports: [ConfigurationSearchPageComponent],
+  imports: [ThemedConfigurationSearchPageComponent],
 })
 
 /**
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-page.component.html b/src/app/admin/admin-workflow-page/admin-workflow-page.component.html
@@ -1 +1 @@
-<ds-configuration-search-page configuration="supervision" [context]="context"></ds-configuration-search-page>
+<ds-themed-configuration-search-page configuration="supervision" [context]="context"></ds-themed-configuration-search-page>
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-page.component.spec.ts b/src/app/admin/admin-workflow-page/admin-workflow-page.component.spec.ts
@@ -5,7 +5,7 @@ import {
   waitForAsync,
 } from '@angular/core/testing';
 
-import { ConfigurationSearchPageComponent } from '../../search-page/configuration-search-page.component';
+import { ThemedConfigurationSearchPageComponent } from '../../search-page/themed-configuration-search-page.component';
 import { AdminWorkflowPageComponent } from './admin-workflow-page.component';
 
 describe('AdminSearchPageComponent', () => {
@@ -20,7 +20,7 @@ describe('AdminSearchPageComponent', () => {
       .overrideComponent(AdminWorkflowPageComponent, {
         remove: {
           imports: [
-            ConfigurationSearchPageComponent,
+            ThemedConfigurationSearchPageComponent,
           ],
         },
       })
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-page.component.ts b/src/app/admin/admin-workflow-page/admin-workflow-page.component.ts
@@ -1,14 +1,14 @@
 import { Component } from '@angular/core';
 
 import { Context } from '../../core/shared/context.model';
-import { ConfigurationSearchPageComponent } from '../../search-page/configuration-search-page.component';
+import { ThemedConfigurationSearchPageComponent } from '../../search-page/themed-configuration-search-page.component';
 
 @Component({
   selector: 'ds-admin-workflow-page',
   templateUrl: './admin-workflow-page.component.html',
   styleUrls: ['./admin-workflow-page.component.scss'],
   standalone: true,
-  imports: [ConfigurationSearchPageComponent],
+  imports: [ThemedConfigurationSearchPageComponent],
 })
 
 /**
diff --git a/src/app/home-page/home-page.component.default.scss b/src/app/home-page/home-page.component.default.scss
diff --git a/src/app/home-page/home-page.component.html b/src/app/home-page/home-page.component.html
@@ -1,19 +1,28 @@
 <ds-themed-home-news></ds-themed-home-news>
-<div [ngClass]="appConfig.homePage.showDiscoverFilters ? 'container-fluid' : 'container'">
-  <div class="row m-5">
-    <div class="col-sm-3" *ngIf="appConfig.homePage.showDiscoverFilters">
-      <ds-configuration-search-page [sideBarWidth]="12" [showViewModes]="false" [searchEnabled]="false"
-        [inPlaceSearch]="false" [showScopeSelector]="false"></ds-configuration-search-page>
-    </div>
-    <div [ngClass]="appConfig.homePage.showDiscoverFilters ? 'col-sm-9' : 'col-sm-12'">
+<div [ngClass]="showDiscoverFilters ? 'container-fluid' : 'container'">
+  <ds-page-with-sidebar [sidebarContent]="sidebar" [sideBarWidth]="3" [class]="showDiscoverFilters ? 'row mx-3' : ''">
+    <div [class.col-sm-12]="showDiscoverFilters">
+      <button *ngIf="(isXsOrSm$ | async) && sidebarService.isCollapsed" (click)="sidebarService.expand()"
+              class="btn btn-outline-primary d-block ml-auto mb-3">
+        <i class="fas fa-sliders"></i> {{ 'search.sidebar.open' | translate }}
+      </button>
       <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>
+                             [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>
+  </ds-page-with-sidebar>
 </div>
 <ds-suggestions-popup></ds-suggestions-popup>
+
+<ng-template #sidebar>
+  <div *ngIf="showDiscoverFilters">
+    <ds-themed-configuration-search-page [sideBarWidth]="12" [showViewModes]="false" [searchEnabled]="false"
+                                         [inPlaceSearch]="false" [showScopeSelector]="false">
+    </ds-themed-configuration-search-page>
+  </div>
+</ng-template>
diff --git a/src/app/home-page/home-page.component.scss b/src/app/home-page/home-page.component.scss
@@ -1,2 +1,5 @@
-:host {
-}
+:host ::ng-deep {
+  .container-fluid .container {
+    padding: 0;
+  }
+}
diff --git a/src/app/home-page/home-page.component.ts b/src/app/home-page/home-page.component.ts
@@ -12,6 +12,10 @@ import {
   PLATFORM_ID,
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+import { Site } from '../core/shared/site.model';
+import { isPlatformServer } from '@angular/common';
+import { ServerResponseService } from '../core/services/server-response.service';
 import { TranslateModule } from '@ngx-translate/core';
 import {
   EMPTY,
@@ -37,6 +41,10 @@ import { Site } from '../core/shared/site.model';
 import { SuggestionsPopupComponent } from '../notifications/suggestions-popup/suggestions-popup.component';
 import { ConfigurationSearchPageComponent } from '../search-page/configuration-search-page.component';
 import { isNotEmpty } from '../shared/empty.util';
+import { APP_CONFIG, AppConfig } from 'src/config/app-config.interface';
+import { HostWindowService } from '../shared/host-window.service';
+import { SidebarService } from '../shared/sidebar/sidebar.service';
+
 import { ThemedSearchFormComponent } from '../shared/search-form/themed-search-form.component';
 import { ViewTrackerComponent } from '../statistics/angulartics/dspace/view-tracker.component';
 import { ThemedHomeNewsComponent } from './home-news/themed-home-news.component';
@@ -53,21 +61,27 @@ import { ThemedTopLevelCommunityListComponent } from './top-level-community-list
 export class HomePageComponent implements OnInit, OnDestroy {
 
   site$: Observable<Site>;
+  isXsOrSm$: Observable<boolean>;
   recentSubmissionspageSize: number;
+  showDiscoverFilters: boolean;
   /**
    * An array of LinkDefinition objects representing inbox links for the home page.
    */
   inboxLinks: LinkDefinition[] = [];
 
   constructor(
     @Inject(APP_CONFIG) protected appConfig: AppConfig,
-    private route: ActivatedRoute,
-    private responseService: ServerResponseService,
-    private notifyInfoService: NotifyInfoService,
+    protected route: ActivatedRoute,
+    protected responseService: ServerResponseService,
+    protected notifyInfoService: NotifyInfoService,
     protected linkHeadService: LinkHeadService,
     @Inject(PLATFORM_ID) private platformId: string,
+    protected sidebarService: SidebarService,
+    protected windowService: HostWindowService,
+    @Inject(PLATFORM_ID) protected platformId: string,
   ) {
-    this.recentSubmissionspageSize = environment.homePage.recentSubmissions.pageSize;
+    this.recentSubmissionspageSize = this.appConfig.homePage.recentSubmissions.pageSize;
+    this.showDiscoverFilters = this.appConfig.homePage.showDiscoverFilters;
     // Get COAR REST API URLs from REST configuration
     // only if COAR configuration is enabled
     this.notifyInfoService.isCoarConfigEnabled().pipe(
@@ -86,6 +100,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
+    this.isXsOrSm$ = this.windowService.isXsOrSm();
     this.site$ = this.route.data.pipe(
       map((data) => data.site as Site),
     );
diff --git a/src/app/item-page/simple/related-entities/related-entities-search/related-entities-search.component.html b/src/app/item-page/simple/related-entities/related-entities-search/related-entities-search.component.html
@@ -1,7 +1,7 @@
-<ds-configuration-search-page
+<ds-themed-configuration-search-page
   [fixedFilterQuery]="fixedFilter"
   [configuration]="configuration"
   [searchEnabled]="searchEnabled"
   [sideBarWidth]="sideBarWidth"
   [showCsvExport]="true">
-</ds-configuration-search-page>
+</ds-themed-configuration-search-page>
diff --git a/src/app/item-page/simple/related-entities/related-entities-search/related-entities-search.component.spec.ts b/src/app/item-page/simple/related-entities/related-entities-search/related-entities-search.component.spec.ts
@@ -9,7 +9,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { Item } from '../../../../core/shared/item.model';
-import { ConfigurationSearchPageComponent } from '../../../../search-page/configuration-search-page.component';
+import { ThemedConfigurationSearchPageComponent } from '../../../../search-page/themed-configuration-search-page.component';
 import { RelatedEntitiesSearchComponent } from './related-entities-search.component';
 
 describe('RelatedEntitiesSearchComponent', () => {
@@ -30,7 +30,7 @@ describe('RelatedEntitiesSearchComponent', () => {
     })
       .overrideComponent(RelatedEntitiesSearchComponent, {
         remove: {
-          imports: [ConfigurationSearchPageComponent],
+          imports: [ThemedConfigurationSearchPageComponent],
         },
       })
       .compileComponents();
diff --git a/src/app/item-page/simple/related-entities/related-entities-search/related-entities-search.component.ts b/src/app/item-page/simple/related-entities/related-entities-search/related-entities-search.component.ts
@@ -5,15 +5,15 @@ import {
 } from '@angular/core';
 
 import { Item } from '../../../../core/shared/item.model';
-import { ConfigurationSearchPageComponent } from '../../../../search-page/configuration-search-page.component';
+import { ThemedConfigurationSearchPageComponent } from '../../../../search-page/themed-configuration-search-page.component';
 import { isNotEmpty } from '../../../../shared/empty.util';
 import { getFilterByRelation } from '../../../../shared/utils/relation-query.utils';
 
 @Component({
   selector: 'ds-related-entities-search',
   templateUrl: './related-entities-search.component.html',
   standalone: true,
-  imports: [ConfigurationSearchPageComponent],
+  imports: [ThemedConfigurationSearchPageComponent],
 })
 /**
  * A component to show related items as search results.
diff --git a/src/app/search-page/themed-configuration-search-page.component.ts b/src/app/search-page/themed-configuration-search-page.component.ts
@@ -2,9 +2,12 @@ import {
   Component,
   Input,
 } from '@angular/core';
-import { Observable } from 'rxjs';
 
 import { Context } from '../core/shared/context.model';
+import { ViewMode } from '../core/shared/view-mode.model';
+import { CollectionElementLinkType } from '../shared/object-collection/collection-element-link.type';
+import { SelectionConfig } from '../shared/search/search-results/search-results.component';
+import { SearchConfigurationOption } from '../shared/search/search-switch-configuration/search-configuration-option.model';
 import { ThemedComponent } from '../shared/theme-support/themed.component';
 import { ConfigurationSearchPageComponent } from './configuration-search-page.component';
 
@@ -13,53 +16,85 @@ import { ConfigurationSearchPageComponent } from './configuration-search-page.co
  */
 @Component({
   selector: 'ds-themed-configuration-search-page',
-  styleUrls: [],
   templateUrl: '../shared/theme-support/themed.component.html',
   standalone: true,
 })
 export class ThemedConfigurationSearchPageComponent extends ThemedComponent<ConfigurationSearchPageComponent> {
-  /**
-   * The configuration to use for the search options
-   * If empty, the configuration will be determined by the route parameter called 'configuration'
-   */
+
+  @Input() configurationList: SearchConfigurationOption[] = [];
+
+  @Input() context: Context;
+
   @Input() configuration: string;
 
-  /**
-   * The actual query for the fixed filter.
-   * If empty, the query will be determined by the route parameter called 'filter'
-   */
   @Input() fixedFilterQuery: string;
 
-  /**
-   * True when the search component should show results on the current page
-   */
+  @Input() useCachedVersionIfAvailable: boolean;
+
   @Input() inPlaceSearch: boolean;
 
-  /**
-   * Whether or not the search bar should be visible
-   */
+  @Input() linkType: CollectionElementLinkType;
+
+  @Input() paginationId: string;
+
   @Input() searchEnabled: boolean;
 
-  /**
-   * The width of the sidebar (bootstrap columns)
-   */
-  @Input()
-    sideBarWidth: number;
-
-  /**
-   * The currently applied configuration (determines title of search)
-   */
-  @Input()
-    configuration$: Observable<string>;
-
-  /**
-   * The current context
-   */
-  @Input()
-    context: Context;
-
-  protected inAndOutputNames: (keyof ConfigurationSearchPageComponent & keyof this)[] =
-    ['context', 'configuration', 'fixedFilterQuery', 'inPlaceSearch', 'searchEnabled', 'sideBarWidth'];
+  @Input() sideBarWidth: number;
+
+  @Input() searchFormPlaceholder: string;
+
+  @Input() selectable: boolean;
+
+  @Input() selectionConfig: SelectionConfig;
+
+  @Input() showCsvExport: boolean;
+
+  @Input() showSidebar: boolean;
+
+  @Input() showThumbnails: boolean;
+
+  @Input() showViewModes: boolean;
+
+  @Input() useUniquePageId: boolean;
+
+  @Input() viewModeList: ViewMode[];
+
+  @Input() showScopeSelector: boolean;
+
+  @Input() trackStatistics: boolean;
+
+  @Input() query: string;
+
+  @Input() scope: string;
+
+  @Input() hideScopeInUrl: boolean;
+
+  protected inAndOutputNames: (keyof ConfigurationSearchPageComponent & keyof this)[] = [
+    'configurationList',
+    'context',
+    'configuration',
+    'fixedFilterQuery',
+    'useCachedVersionIfAvailable',
+    'inPlaceSearch',
+    'linkType',
+    'paginationId',
+    'searchEnabled',
+    'sideBarWidth',
+    'searchFormPlaceholder',
+    'selectable',
+    'selectionConfig',
+    'showCsvExport',
+    'showSidebar',
+    'showThumbnails',
+    'showViewModes',
+    'useUniquePageId',
+    'viewModeList',
+    'showScopeSelector',
+    'trackStatistics',
+    'query',
+    'scope',
+    'hideScopeInUrl',
+  ];
 
   protected getComponentName(): string {
     return 'ConfigurationSearchPageComponent';
diff --git a/src/app/shared/search/search.component.html b/src/app/shared/search/search.component.html
diff --git a/src/themes/custom/app/home-page/home-page.component.ts b/src/themes/custom/app/home-page/home-page.component.ts

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<ds-configuration-search-page configuration="administrativeView" [context]="context"></ds-configuration-search-page>`
	`1`	`+<ds-themed-configuration-search-page configuration="administrativeView" [context]="context"></ds-themed-configuration-search-page>`