Action hub

Author: johnhwhite

src/app/app.routes.ts

@@ -3,6 +3,11 @@ import { Routes } from '@angular/router';
 export const routes: Routes = [
   {
     path: '',
+    pathMatch: 'full',
+    loadComponent: () => import('./hub/hub'),
+  },
+  {
+    path: 'animal-profiles',
     loadComponent: () => import('./animal-profiles/list/list'),
   },
   {

src/app/hub/hub.html

@@ -0,0 +1,14 @@
+<sky-action-hub
+  data-sky-id="action-hub"
+  [needsAttention]="needsAttention()"
+  [relatedLinks]="relatedLinks"
+  [title]="title"
+>
+  <sky-action-hub-content>
+    <sky-box headingText="Welcome to SKY UX">
+      <sky-box-content>
+        <app-welcome-to-skyux />
+      </sky-box-content>
+    </sky-box>
+  </sky-action-hub-content>
+</sky-action-hub>

src/app/hub/hub.spec.ts

@@ -0,0 +1,85 @@
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { provideLocationMocks } from '@angular/common/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { expectAsync } from '@skyux-sdk/testing';
+import { SkyActionHubHarness } from '@skyux/pages/testing';
+
+import { Hub } from './hub';
+import { MockData } from '../services/data/mock-data';
+import { Data } from '../services/data/data';
+
+describe('Hub', () => {
+  let component: Hub;
+  let fixture: ComponentFixture<Hub>;
+  let harness: SkyActionHubHarness;
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [Hub],
+      providers: [
+        provideLocationMocks(),
+        provideRouter([]),
+        MockData,
+        {
+          provide: Data,
+          useExisting: MockData,
+        },
+      ],
+    });
+    fixture = TestBed.createComponent(Hub);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    harness = await TestbedHarnessEnvironment.loader(fixture).getHarness(
+      SkyActionHubHarness.with({
+        dataSkyId: 'action-hub',
+      }),
+    );
+  });
+
+  it('should show a count of animals needing attention', async () => {
+    expect(component).toBeTruthy();
+    const dataService = TestBed.inject(Data);
+    dataService.load([]);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const items = await harness.getNeedsAttentionItems();
+    expect(items).toHaveSize(1);
+    expect(await items[0].getText()).toEqual('0 animals need attention');
+    dataService.load([
+      {
+        bio: 'bio',
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        breed: 'breed',
+        gender: '',
+        images: [],
+        name: 'name1',
+        id: 'id1',
+        needsAttention: true,
+      },
+      {
+        bio: 'bio',
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        breed: 'breed',
+        gender: '',
+        images: [],
+        name: 'name2',
+        id: 'id2',
+        needsAttention: false,
+      },
+    ]);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(await (await harness.getNeedsAttentionItems())[0].getText()).toEqual(
+      '1 animal needs attention',
+    );
+  });
+
+  it('should be accessible', async () => {
+    await fixture.whenStable();
+    const element = fixture.nativeElement as HTMLElement;
+    await expectAsync(element).toBeAccessible();
+  });
+});

src/app/hub/hub.ts

@@ -0,0 +1,43 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { SkyBoxModule } from '@skyux/layout';
+import { SkyActionHubModule } from '@skyux/pages';
+
+import { parentLink } from '../animal-profiles/parent-link';
+import { Data } from '../services/data/data';
+import { welcomeToSkyuxLinks } from '../welcome-to-skyux/welcome-to-skyux-links';
+import { WelcomeToSkyux } from '../welcome-to-skyux/welcome-to-skyux';
+
+@Component({
+  selector: 'app-hub',
+  imports: [SkyActionHubModule, SkyBoxModule, WelcomeToSkyux],
+  templateUrl: './hub.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Hub {
+  protected readonly needsAttention = computed(() => {
+    const needsAttentionCount = this.#needsAttentionCount();
+    const singular = needsAttentionCount === 1;
+    return [
+      {
+        title: `${needsAttentionCount} animal${singular ? '' : 's'} need${singular ? 's' : ''} attention`,
+        permalink: { route: { commands: ['animal-profiles'] } },
+      },
+    ];
+  });
+  protected readonly relatedLinks = welcomeToSkyuxLinks.map((link) => ({
+    label: link.label,
+    permalink: {
+      url: link.url,
+    },
+  }));
+  protected readonly title = parentLink.label;
+
+  readonly #dataService = inject(Data);
+  readonly #needsAttentionCount = computed(() =>
+    this.#dataService
+      .list()
+      .reduce((count, profile) => count + (profile.needsAttention ? 1 : 0), 0),
+  );
+}
+
+export default Hub;

src/app/welcome-to-skyux/welcome-to-skyux-links.ts

@@ -0,0 +1,22 @@
+export const welcomeToSkyuxLinks = [
+  {
+    label: 'SKY UX Documentation',
+    url: 'https://developer.blackbaud.com/skyux',
+  },
+  {
+    label: 'SKY UX GitHub',
+    url: 'https://github.com/blackbaud/skyux',
+  },
+  {
+    label: 'SKY Developer',
+    url: 'https://developer.blackbaud.com/',
+  },
+  {
+    label: 'Learn Angular',
+    url: 'https://angular.dev/tutorials/learn-angular',
+  },
+  {
+    label: 'Get Started with SKY UX',
+    url: 'https://developer.blackbaud.com/skyux/learn/overview',
+  },
+];