add new component, add mock, refactor

src/app/admin/admin-notify-dashboard/admin-notify-dashboard-routing.module.ts

@@ -2,8 +2,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { I18nBreadcrumbResolver } from '../../core/breadcrumbs/i18n-breadcrumb.resolver';
 import { I18nBreadcrumbsService } from '../../core/breadcrumbs/i18n-breadcrumbs.service';
-import { AuthenticatedGuard } from "../../core/auth/authenticated.guard";
+import { AuthenticatedGuard } from '../../core/auth/authenticated.guard';
-import { AdminNotifyDashboardComponent } from "./admin-notify-dashboard.component";
+import { AdminNotifyDashboardComponent } from './admin-notify-dashboard.component';
 
 @NgModule({
   imports: [

src/app/admin/admin-notify-dashboard/admin-notify-dashboard.component.spec.ts

@@ -1,6 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AdminNotifyDashboardComponent } from './admin-notify-dashboard.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 
 describe('AdminNotifyDashboardComponent', () => {
   let component: AdminNotifyDashboardComponent;
@@ -8,6 +10,7 @@ describe('AdminNotifyDashboardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), NgbNavModule],
       declarations: [ AdminNotifyDashboardComponent ]
     })
     .compileComponents();

src/app/admin/admin-notify-dashboard/admin-notify-dashboard.component.ts

@@ -1,10 +1,47 @@
-import { Component } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { SearchConfigurationService } from "../../core/shared/search/search-configuration.service";
+import { SearchService } from "../../core/shared/search/search.service";
+import { PaginatedSearchOptions } from "../../shared/search/models/paginated-search-options.model";
+import { SEARCH_CONFIG_SERVICE } from "../../my-dspace-page/my-dspace-page.component";
+import { PaginationComponentOptions } from "../../shared/pagination/pagination-component-options.model";
+import { SearchFilterConfig } from "../../shared/search/models/search-filter-config.model";
 
 @Component({
   selector: 'ds-admin-notify-dashboard',
   templateUrl: './admin-notify-dashboard.component.html',
-  styleUrls: ['./admin-notify-dashboard.component.scss']
+  styleUrls: ['./admin-notify-dashboard.component.scss'],
+  providers: [
+    {
+      provide: SEARCH_CONFIG_SERVICE,
+      useClass: SearchConfigurationService
+    }
+  ]
 })
-export class AdminNotifyDashboardComponent {
+export class AdminNotifyDashboardComponent implements OnInit{
+  mockFilterConfig : SearchFilterConfig = Object.assign(new SearchFilterConfig(), {
+    type: {
+      value: "discovery-filter"
+    },
+    pageSize: 10,
+    name: "author",
+    filterType: "text",
+    _links: {
+      self: {
+        href: "https://dspace-coar.4science.cloud/server/api/discover/facets/author"
+      }
+    }
+  });
 
+  mockPaginatedSearchOptions = new PaginatedSearchOptions({
+    pagination: Object.assign(new PaginationComponentOptions(), { id: 'page-id', currentPage: 1, pageSize: 20 }),
+    configuration: '',
+  });
+
+  constructor(private searchService: SearchService,
+              @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService,
+  ) {}
+
+  ngOnInit() {
+    this.searchService.getFacetValuesFor(this.mockFilterConfig, 1, this.mockPaginatedSearchOptions).subscribe(c => console.log(c))
+  }
 }

src/app/admin/admin-notify-dashboard/admin-notify-dashboard.module.ts

@@ -1,18 +1,19 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { SharedModule } from '../../shared/shared.module';
+import { AdminNotifyDashboardComponent } from './admin-notify-dashboard.component';
-import { AdminNotifyDashboardComponent } from "./admin-notify-dashboard.component";
+import { AdminNotifyDashboardRoutingModule } from './admin-notify-dashboard-routing.module';
-import { AdminNotifyDashboardRoutingModule } from "./admin-notify-dashboard-routing.module";
 import { AdminNotifyMetricsComponent } from './admin-notify-metrics/admin-notify-metrics.component';
 import { AdminNotifyLogsComponent } from './admin-notify-logs/admin-notify-logs.component';
+import { SharedModule } from '../../shared/shared.module';
+
 
 @NgModule({
   imports: [
     CommonModule,
-    SharedModule,
     RouterModule,
-    AdminNotifyDashboardRoutingModule,
+    SharedModule,
+    AdminNotifyDashboardRoutingModule
   ],
   declarations: [
     AdminNotifyDashboardComponent,

src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs.component.spec.ts

@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AdminNotifyLogsComponent } from './admin-notify-logs.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('AdminNotifyLogsComponent', () => {
   let component: AdminNotifyLogsComponent;
@@ -8,6 +9,7 @@ describe('AdminNotifyLogsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
       declarations: [ AdminNotifyLogsComponent ]
     })
     .compileComponents();

src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.component.html

@@ -1,11 +1,9 @@
-<div class="container-fluid">
+<div class="mb-5" *ngFor="let row of boxesConfig">
-  <div *ngFor="let rows of boxesConfig">
+  <div class="mb-2">{{ row.title | translate }}</div>
-    <div *ngFor="let box of rows.boxes">
+  <div class="row justify-content-between">
-      <div [ngStyle]="{'background-color': box.color}">
+    <div class="col-sm" *ngFor="let box of row.boxes">
-        <!--Here will go the actual count coming from the REST endpoint -->
+      <ds-notification-box [boxConfig]="box"></ds-notification-box>
-        <div>0</div>
-        <div>{{ box.title | translate }}</div>
-      </div>
     </div>
   </div>
 </div>
+

src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.component.spec.ts

@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AdminNotifyMetricsComponent } from './admin-notify-metrics.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('AdminNotifyMetricsComponent', () => {
   let component: AdminNotifyMetricsComponent;
@@ -8,6 +9,7 @@ describe('AdminNotifyMetricsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
       declarations: [ AdminNotifyMetricsComponent ]
     })
     .compileComponents();

src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { AdminNotifyMetricsRow } from "./admin-notify-metrics.model";
+import { AdminNotifyMetricsRow } from './admin-notify-metrics.model';
-import { AdminNotifyMetricsRowsConfig } from "./admin-notify-metrics.config";
+import { AdminNotifyMetricsRowsConfig } from './admin-notify-metrics.config';
 
 @Component({
   selector: 'ds-admin-notify-metrics',

src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.config.ts

@@ -1,33 +1,29 @@
-import { AdminNotifyMetricsRow } from "./admin-notify-metrics.model";
+import { AdminNotifyMetricsRow } from './admin-notify-metrics.model';
 
 export const AdminNotifyMetricsRowsConfig: AdminNotifyMetricsRow[] = [
   {
     title: 'Number of received LDN',
     boxes: [
       {
-        color: 'blue',
+        color: '#B8DAFF',
         title: 'Accepted',
-        index: 0
       },
       {
-        color: 'green',
+        color: '#D4EDDA',
         title: 'Processed LDN',
-        index: 1
       },
       {
-        color: 'red',
+        color: '#FDBBC7',
         title: 'Failure',
-        index: 2
       },
       {
-        color: 'red',
+        color: '#FDBBC7',
         title: 'Untrusted',
-        index: 3
       },
       {
-        color: 'grey',
+        color: '#43515F',
         title: 'Incoming LDM messages',
-        index: 4
+        textColor: '#fff'
       },
     ]
   },
@@ -35,30 +31,26 @@ export const AdminNotifyMetricsRowsConfig: AdminNotifyMetricsRow[] = [
     title: 'Number of generated LDN',
     boxes: [
       {
-        color: 'green',
+        color: '#D4EDDA',
         title: 'Delivered',
-        index: 0
       },
       {
-        color: 'blue',
+        color: '#B8DAFF',
         title: 'Queued',
-        index: 1
       },
       {
-        color: 'yellow',
+        color: '#FDEEBB',
         title: 'Queued for retry',
-        index: 2
       },
       {
-        color: 'red',
+        color: '#FDBBC7',
         title: 'Failure',
-        index: 3
       },
       {
-        color: 'grey',
+        color: '#43515F',
         title: 'Outgoing LDM messages',
-        index: 4
+        textColor: '#fff'
       },
     ]
   }
-]
+];

src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.model.ts

@@ -1,7 +1,8 @@
 export interface AdminNotifyMetricsBox {
   color: string;
+  textColor?: string;
   title: string;
-  index: number
+  count?: number
 }
 
 export interface AdminNotifyMetricsRow {

src/app/admin/admin-routing.module.ts

@@ -13,7 +13,6 @@ import {
   NOTIFY_DASHBOARD_MODULE_PATH
 } from './admin-routing-paths';
 import { BatchImportPageComponent } from './admin-import-batch-page/batch-import-page.component';
-import { AdminNotifyDashboardComponent } from "./admin-notify-dashboard/admin-notify-dashboard.component";
 
 @NgModule({
   imports: [

src/app/shared/notification-box/notification-box.component.html

@@ -0,0 +1,6 @@
+<div class="w-100 h-100 pt-4 pb-3 px-2 box-container" [ngStyle]="{'background-color': boxConfig.color}">
+  <div [ngStyle]="{'color': boxConfig.textColor}" class="d-flex flex-column justify-content-center align-items-center">
+    <div class="mb-4 font-weight-bold box-counter">{{ boxConfig.count ?? 0 }}</div>
+    <div class="font-weight-bold d-flex justify-content-center w-100">{{ boxConfig.title | translate }}</div>
+  </div>
+</div>

src/app/shared/notification-box/notification-box.component.scss

@@ -0,0 +1,7 @@
+.box-container {
+  min-width: max-content;
+}
+.box-counter {
+  font-size: calc(var(--bs-font-size-lg) * 1.5);
+}
+

src/app/shared/notification-box/notification-box.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationBoxComponent } from './notification-box.component';
+
+describe('NotificationBoxComponent', () => {
+  let component: NotificationBoxComponent;
+  let fixture: ComponentFixture<NotificationBoxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NotificationBoxComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NotificationBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/notification-box/notification-box.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import {
+  AdminNotifyMetricsBox
+} from "../../admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.model";
+
+@Component({
+  selector: 'ds-notification-box',
+  templateUrl: './notification-box.component.html',
+  styleUrls: ['./notification-box.component.scss']
+})
+export class NotificationBoxComponent {
+  @Input() boxConfig: AdminNotifyMetricsBox;
+}

src/app/shared/shared.module.ts

@@ -285,6 +285,7 @@ import { NgxPaginationModule } from 'ngx-pagination';
 import { SplitPipe } from './utils/split.pipe';
 import { ThemedUserMenuComponent } from './auth-nav-menu/user-menu/themed-user-menu.component';
 import { ThemedLangSwitchComponent } from './lang-switch/themed-lang-switch.component';
+import { NotificationBoxComponent } from './notification-box/notification-box.component';
 
 const MODULES = [
   CommonModule,
@@ -469,7 +470,8 @@ const ENTRY_COMPONENTS = [
   AdvancedClaimedTaskActionRatingComponent,
   EpersonGroupListComponent,
   EpersonSearchBoxComponent,
-  GroupSearchBoxComponent
+  GroupSearchBoxComponent,
+  NotificationBoxComponent
 ];
 
 const PROVIDERS = [