feat: lifecycle component (#153)

* feat: create necessary files

* feat: finished first implementation

* feat: change marker color based on active stepper step

* test: test lifecycle component

libs/portal-integration-angular/src/index.ts

@@ -57,6 +57,7 @@ export * from './lib/core/components/loading-indicator/loading-indicator.compone
 export * from './lib/core/components/content-container/content-container.component'
 export * from './lib/core/components/content/content.component'
 export * from './lib/core/components/create-or-edit-search-config-dialog/create-or-edit-search-config-dialog.component'
+export * from './lib/core/components/lifecycle/lifecycle.component'
 
 // services
 export * from './lib/services/app.menu.service'

libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.html

@@ -0,0 +1,13 @@
+<p-timeline [value]="steps">
+  <ng-template pTemplate="marker" let-step>
+    <span class="p-timeline-event-marker" [ngClass]="activeStepId && activeStepId === step.id ? 'bg-primary' : ''"></span>
+</ng-template>
+  <ng-template pTemplate="content" let-step>
+    <div class="pb-4 h-full">
+        <div class="card h-full" [ngClass]="activeStepId && activeStepId === step.id ? 'bg-primary' : ''">
+            <p class="font-bold text-xl" [ngClass]="step.details ? 'mb-2' : ''">{{ step.title }}</p>
+            <p *ngIf="step.details" [ngClass]="activeStepId && activeStepId === step.id ? '' : 'text-color-secondary'">{{ step.details }}</p>
+        </div>
+    </div>
+  </ng-template>
+</p-timeline>

libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.spec.ts

@@ -0,0 +1,76 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { LifecycleComponent, LifecycleStep } from './lifecycle.component'
+import { TimelineModule } from 'primeng/timeline'
+import { LifecycleHarness, TestbedHarnessEnvironment } from '../../../../../testing'
+import { PrimeNgModule } from '../../primeng.module'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { PortalCoreModule } from '../../portal-core.module'
+
+const mockSteps: LifecycleStep[] = [
+  {
+    id: 'test1',
+    title: 'Test 1',
+  },
+  {
+    id: 'test2',
+    title: 'Test 2',
+    details: 'Test 2 description',
+  },
+  {
+    id: 'test3',
+    title: 'Test 3',
+  },
+]
+
+describe('LifecycleComponent', () => {
+  let component: LifecycleComponent
+  let fixture: ComponentFixture<LifecycleComponent>
+  let lifecycle: LifecycleHarness
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LifecycleComponent],
+      imports: [TimelineModule, PrimeNgModule, BrowserAnimationsModule, PortalCoreModule],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(LifecycleComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+    lifecycle = await TestbedHarnessEnvironment.harnessForFixture(fixture, LifecycleHarness)
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+    expect(lifecycle).toBeTruthy()
+  })
+
+  it('should not render any initial lifecycle steps', async () => {
+    const steps = await lifecycle.getSteps()
+    expect(steps.length).toBe(0)
+  })
+
+  it('should render given lifecycle steps', async () => {
+    component.steps = mockSteps
+    const steps = await lifecycle.getSteps()
+    const highlightedSteps = await lifecycle.getHighlightedSteps()
+    expect(steps.length).toBe(3)
+    expect(highlightedSteps.length).toBe(0)
+    mockSteps.forEach(async (step, index) => {
+      expect(await steps[index].text()).toEqual(step.title + (step.details ?? ''))
+    })
+  })
+
+  it('should highlight a given lifecycle step', async () => {
+    component.steps = mockSteps
+    component.activeStepId = 'test2'
+    const steps = await lifecycle.getSteps()
+    const highlightedSteps = await lifecycle.getHighlightedSteps()
+    mockSteps.forEach(async (step, index) => {
+      if(step.id == component.activeStepId) {
+        expect(await steps[index].hasClass('bg-primary')).toEqual(true)
+      }
+    })
+    expect(steps.length).toBe(3)
+    expect(highlightedSteps.length).toBe(1) 
+  })
+})

libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.stories.ts

@@ -0,0 +1,57 @@
+import { importProvidersFrom } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { Meta, StoryFn, applicationConfig, moduleMetadata } from '@storybook/angular'
+import { StorybookTranslateModule } from '../../storybook-translate.module'
+import { LifecycleComponent, LifecycleStep } from './lifecycle.component'
+import { TimelineModule } from 'primeng/timeline'
+import { CardModule } from 'primeng/card'
+
+export default {
+  title: 'LifecycleComponent',
+  component: LifecycleComponent,
+  decorators: [
+    applicationConfig({
+      providers: [importProvidersFrom(BrowserModule), importProvidersFrom(BrowserAnimationsModule)],
+    }),
+    moduleMetadata({
+      declarations: [LifecycleComponent],
+      imports: [StorybookTranslateModule, TimelineModule, CardModule],
+    }),
+  ],
+} as Meta<LifecycleComponent>
+
+const Template: StoryFn<LifecycleComponent> = (args: LifecycleComponent) => ({
+  props: args,
+})
+
+const mockData: LifecycleStep[] = [
+    {
+        id: "todo",
+        title: "ToDo"
+    },
+    {
+        id: "in_progress",
+        title: "In Progress",
+        details: "This event is currently in progress"
+    },
+    {
+        id: "done",
+        title: "Done"
+    }
+]
+
+export const WithoutHighlightedStep = {
+  render: Template,
+  args: {
+    steps: mockData
+  }
+}
+
+export const WithHighlightedStep = {
+    render: Template,
+    args: {
+      steps: mockData,
+      activeStepId: 'in_progress'
+    }
+  }

libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core'
+
+export interface LifecycleStep {
+  id: string
+  title: string,
+  details?: string,
+}
+
+@Component({
+  selector: 'ocx-lifecycle',
+  templateUrl: './lifecycle.component.html',
+})
+export class LifecycleComponent {
+  @Input() steps: LifecycleStep[] = []
+  @Input() activeStepId: string | undefined
+}

libs/portal-integration-angular/src/lib/core/portal-core.module.ts

@@ -87,6 +87,7 @@ import { createTranslateLoader } from './utils/create-translate-loader.utils'
 import { MessageService } from 'primeng/api'
 import { TranslationCacheService } from '../services/translation-cache.service'
 import { CreateOrEditSearchConfigDialogComponent } from './components/create-or-edit-search-config-dialog/create-or-edit-search-config-dialog.component'
+import { LifecycleComponent } from './components/lifecycle/lifecycle.component'
 
 export class PortalMissingTranslationHandler implements MissingTranslationHandler {
   handle(params: MissingTranslationHandlerParams) {
@@ -169,6 +170,7 @@ export class PortalMissingTranslationHandler implements MissingTranslationHandle
     OcxContentContainerComponent,
     SearchConfigComponent,
     CreateOrEditSearchConfigDialogComponent,
+    LifecycleComponent,
   ],
   providers: [
     {
@@ -240,6 +242,7 @@ export class PortalMissingTranslationHandler implements MissingTranslationHandle
     OcxContentContainerComponent,
     SearchConfigComponent,
     CreateOrEditSearchConfigDialogComponent,
+    LifecycleComponent
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   entryComponents: [ColumnTogglerComponent],

libs/portal-integration-angular/src/lib/core/primeng.module.ts

@@ -23,6 +23,7 @@ import { InputSwitchModule } from 'primeng/inputswitch'
 import { DataViewModule } from 'primeng/dataview'
 import { ChartModule } from 'primeng/chart'
 import { CheckboxModule } from 'primeng/checkbox'
+import { TimelineModule } from 'primeng/timeline'
 
 @NgModule({
   imports: [
@@ -51,6 +52,7 @@ import { CheckboxModule } from 'primeng/checkbox'
     ChartModule,
     MessageModule,
     CheckboxModule,
+    TimelineModule,
   ],
   exports: [
     BadgeModule,
@@ -78,6 +80,7 @@ import { CheckboxModule } from 'primeng/checkbox'
     ChartModule,
     MessageModule,
     CheckboxModule,
+    TimelineModule,
   ],
 })
 export class PrimeNgModule {}

libs/portal-integration-angular/testing/index.ts

@@ -35,6 +35,7 @@ export * from './span.harness'
 export * from './page-header.harness'
 export * from './p-tableCheckbox.harness'
 export * from './create-or-edit-search-config-dialog.harness'
+export * from './lifecycle.harness'
 
 export * from '@angular/cdk/testing'
 export * from '@angular/cdk/testing/testbed'

libs/portal-integration-angular/testing/lifecycle.harness.ts

@@ -0,0 +1,8 @@
+import { ContentContainerComponentHarness } from "@angular/cdk/testing"
+
+export class LifecycleHarness extends ContentContainerComponentHarness {
+    static hostSelector = 'ocx-lifecycle'
+
+    getSteps = this.locatorForAll('.p-timeline-event-content .card')
+    getHighlightedSteps = this.locatorForAll('.p-timeline-event-content .card.bg-primary')
+}