Merge pull request #3065 from alexandrevryghem/new-themed-components_contribute-main

Made AdminSearchPageComponent themeable

Author: tdonohue

src/app/admin/admin-routes.ts

@@ -11,8 +11,8 @@ import {
   REGISTRIES_MODULE_PATH,
   REPORTS_MODULE_PATH,
 } from './admin-routing-paths';
-import { AdminSearchPageComponent } from './admin-search-page/admin-search-page.component';
-import { AdminWorkflowPageComponent } from './admin-workflow-page/admin-workflow-page.component';
+import { ThemedAdminSearchPageComponent } from './admin-search-page/themed-admin-search-page.component';
+import { ThemedAdminWorkflowPageComponent } from './admin-workflow-page/themed-admin-workflow-page.component';
 
 export const ROUTES: Route[] = [
   {
@@ -28,13 +28,13 @@ export const ROUTES: Route[] = [
   {
     path: 'search',
     resolve: { breadcrumb: i18nBreadcrumbResolver },
-    component: AdminSearchPageComponent,
+    component: ThemedAdminSearchPageComponent,
     data: { title: 'admin.search.title', breadcrumbKey: 'admin.search' },
   },
   {
     path: 'workflow',
     resolve: { breadcrumb: i18nBreadcrumbResolver },
-    component: AdminWorkflowPageComponent,
+    component: ThemedAdminWorkflowPageComponent,
     data: { title: 'admin.workflow.title', breadcrumbKey: 'admin.workflow' },
   },
   {

src/app/admin/admin-search-page/admin-search-page.component.ts

@@ -4,7 +4,7 @@ import { Context } from '../../core/shared/context.model';
 import { ThemedConfigurationSearchPageComponent } from '../../search-page/themed-configuration-search-page.component';
 
 @Component({
-  selector: 'ds-admin-search-page',
+  selector: 'ds-base-admin-search-page',
   templateUrl: './admin-search-page.component.html',
   styleUrls: ['./admin-search-page.component.scss'],
   standalone: true,

src/app/admin/admin-search-page/themed-admin-search-page.component.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { AdminSearchPageComponent } from './admin-search-page.component';
+
+/**
+ * Themed wrapper for {@link AdminSearchPageComponent}
+ */
+@Component({
+  selector: 'ds-admin-search-page',
+  templateUrl: '../../shared/theme-support/themed.component.html',
+  standalone: true,
+  imports: [AdminSearchPageComponent],
+})
+export class ThemedAdminSearchPageComponent extends ThemedComponent<AdminSearchPageComponent> {
+
+  protected getComponentName(): string {
+    return 'AdminSearchPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/admin/admin-search-page/admin-search-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./admin-search-page.component');
+  }
+
+}

src/app/admin/admin-workflow-page/admin-workflow-page.component.ts

@@ -4,11 +4,13 @@ import { Context } from '../../core/shared/context.model';
 import { ThemedConfigurationSearchPageComponent } from '../../search-page/themed-configuration-search-page.component';
 
 @Component({
-  selector: 'ds-admin-workflow-page',
+  selector: 'ds-base-admin-workflow-page',
   templateUrl: './admin-workflow-page.component.html',
   styleUrls: ['./admin-workflow-page.component.scss'],
   standalone: true,
-  imports: [ThemedConfigurationSearchPageComponent],
+  imports: [
+    ThemedConfigurationSearchPageComponent,
+  ],
 })
 
 /**

src/app/admin/admin-workflow-page/themed-admin-workflow-page.component.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { AdminWorkflowPageComponent } from './admin-workflow-page.component';
+
+/**
+ * Themed wrapper for {@link AdminWorkflowPageComponent}
+ */
+@Component({
+  selector: 'ds-admin-workflow-page',
+  templateUrl: '../../shared/theme-support/themed.component.html',
+  standalone: true,
+  imports: [AdminWorkflowPageComponent],
+})
+export class ThemedAdminWorkflowPageComponent extends ThemedComponent<AdminWorkflowPageComponent> {
+
+  protected getComponentName(): string {
+    return 'AdminWorkflowPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/admin/admin-workflow-page/admin-workflow-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./admin-workflow-page.component');
+  }
+
+}

src/app/core/metadata/metadata.service.ts

@@ -27,7 +27,7 @@ export class MetadataService {
    * Returns undefined otherwise.
    */
   public virtualValue(metadataValue: MetadataValue | undefined): string {
-    if (this.isVirtual) {
+    if (this.isVirtual(metadataValue)) {
       return metadataValue.authority.substring(metadataValue.authority.indexOf(VIRTUAL_METADATA_PREFIX) + VIRTUAL_METADATA_PREFIX.length);
     } else {
       return undefined;

src/app/navbar/navbar.component.html

@@ -1,6 +1,6 @@
 <nav [ngClass]="{'open': (menuCollapsed | async) !== true}"
      [@slideMobileNav]="(windowService.isXsOrSm() | async) !== true ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
-     class="navbar navbar-light navbar-expand-md px-md-0 pt-md-0 pt-3 navbar-container" role="navigation"
+     class="navbar navbar-light navbar-expand-md px-md-0 navbar-container" role="navigation"
      [attr.aria-label]="'nav.main.description' | translate" id="main-navbar">
   <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
   <div class="navbar-inner-container w-100" [class.container]="(isMobile$ | async) !== true">

src/app/shared/input-suggestions/input-suggestions.component.ts

@@ -182,11 +182,11 @@ export class InputSuggestionsComponent implements ControlValueAccessor, OnChange
   }
 
   /**
-   * When any key is pressed (except for the Enter button) the query input should move to the input field
+   * When any key is pressed (except for the Enter & Tab button) the query input should move to the input field
    * @param {KeyboardEvent} event The keyboard event
    */
   onKeydown(event: KeyboardEvent) {
-    if (event.key !== 'Enter') {
+    if (event.key !== 'Enter' && event.key !== 'Tab') {
       this.queryInput.nativeElement.focus();
     }
   }