From 1c9635853b4733c5d9cf5fda0d0a0db76abcd2a1 Mon Sep 17 00:00:00 2001 From: Antonino Bonanno Date: Sun, 7 Jul 2024 15:50:58 +0200 Subject: [PATCH] refactor(timeline): refactoring timeline components Closes: #345 --- .../timeline-container.component.spec.ts | 21 ------ .../timeline-container.component.ts | 28 -------- .../timeline-item/timeline-item.component.ts | 70 +++++++++++++------ ...component.html => timeline.component.html} | 2 +- .../core/timeline/timeline.component.spec.ts | 21 ++++++ .../core/timeline/timeline.component.ts | 31 ++++++++ .../core/timeline/timeline.module.ts | 4 +- .../src/lib/design-angular-kit.module.ts | 4 +- .../timeline-default-example.component.html | 2 +- .../timeline-index.component.ts | 2 +- 10 files changed, 107 insertions(+), 78 deletions(-) delete mode 100644 projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.spec.ts delete mode 100644 projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts rename projects/design-angular-kit/src/lib/components/core/timeline/{timeline-container/timeline-container.component.html => timeline.component.html} (91%) create mode 100644 projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.spec.ts create mode 100644 projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.ts diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.spec.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.spec.ts deleted file mode 100644 index 24537b7e..00000000 --- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ItTimelineContainerComponent } from './timeline-container.component'; -import { tb_base } from '../../../../../test'; - -describe('ItTimelineContainerComponent', () => { - let component: ItTimelineContainerComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule(tb_base).compileComponents(); - - fixture = TestBed.createComponent(ItTimelineContainerComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts deleted file mode 100644 index 6b1abbb1..00000000 --- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; -import { ItTimelineItemComponent } from '../timeline-item/timeline-item.component'; -import { ItIconComponent } from '../../../utils/icon/icon.component'; -import { TranslateModule } from '@ngx-translate/core'; -import { ItAbstractComponent } from 'projects/design-angular-kit/src/lib/abstracts/abstract.component'; -import { TimelineElement } from 'projects/design-angular-kit/src/lib/interfaces/core'; - -/** - * Timeline - * @description Build timeline for chronological representation of events. - */ -@Component({ - standalone: true, - selector: 'it-timeline-container', - templateUrl: './timeline-container.component.html', - changeDetection: ChangeDetectionStrategy.OnPush, - imports: [ItIconComponent, TranslateModule, ItTimelineItemComponent], -}) -export class ItTimelineContainerComponent extends ItAbstractComponent { - /** Timeline elements array - * @default [] - */ - @Input() timelineElements: TimelineElement[] = []; - /** Default date format for timeline element reference date - * @default dd/MM/yyyy - */ - @Input() dateFormat: string = 'dd/MM/yyyy'; -} diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts index 4c3d7cfa..22bceb02 100644 --- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts +++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts @@ -1,10 +1,11 @@ -import { ChangeDetectionStrategy, Component, Input, booleanAttribute } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; import { ItAbstractComponent } from '../../../../abstracts/abstract.component'; import { ItIconComponent } from '../../../utils/icon/icon.component'; import { DatePipe, NgClass } from '@angular/common'; import { TranslateModule } from '@ngx-translate/core'; -import { TimelinePINType } from 'projects/design-angular-kit/src/lib/interfaces/core'; -import { IconName } from 'projects/design-angular-kit/src/lib/interfaces/icon'; +import { TimelinePINType } from '../../../../interfaces/core'; +import { IconName } from '../../../../interfaces/icon'; +import { inputToBoolean } from '../../../../utils/coercion'; /** * Timeline Item @@ -18,40 +19,65 @@ import { IconName } from 'projects/design-angular-kit/src/lib/interfaces/icon'; imports: [ItIconComponent, DatePipe, TranslateModule, NgClass], }) export class ItTimelineItemComponent extends ItAbstractComponent { - /** Timeline element title */ + /** + * Timeline element title + */ @Input({ required: true }) title!: string; - /** Timeline element text */ + + /** + * Timeline element text + */ @Input({ required: true }) text!: string; - /** Timeline element signature */ - @Input() signature?: string | undefined; - /** Timeline element reference date */ - @Input() eventDate?: Date | undefined; - /** Timeline element reference date format + + /** + * Timeline element signature + */ + @Input() signature: string | undefined; + + /** + * Timeline element reference date + */ + @Input() eventDate: Date | undefined; + + /** + * Timeline element reference date format * @default dd/MM/yyyy */ - @Input() dateFormat?: string | undefined = 'dd/MM/yyyy'; + @Input() dateFormat: string = 'dd/MM/yyyy'; - /** Timeline element PIN text */ - @Input({ required: true }) pinText!: string; - /** Timeline element PIN type + /** + * Timeline element PIN text + */ + @Input({ required: true }) pinText: string | undefined; + + /** + * Timeline element PIN type * @default none */ - @Input() pinType?: TimelinePINType | undefined = 'default'; - /** Timeline element PIN icon + @Input() pinType: TimelinePINType | undefined = 'default'; + + /** + * Timeline element PIN icon * @default code-circle */ - @Input() pinIcon?: IconName | undefined = 'code-circle'; + @Input() pinIcon: IconName | undefined = 'code-circle'; - /** Timeline element category title */ - @Input() categoryTitle?: string | undefined; - /** Timeline element category link */ - @Input() categoryLink?: string | undefined; + /** + * Timeline element category title + */ + @Input() categoryTitle: string | undefined; + + /** + * Timeline element category link + */ + @Input() categoryLink: string | undefined; /** Timeline element show detail link * @default false */ - @Input({ transform: booleanAttribute }) + @Input({ transform: inputToBoolean }) showReadMore: boolean = false; + /** Timeline element detail link * @default # */ diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.html similarity index 91% rename from projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html rename to projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.html index 6e590229..81742ea2 100644 --- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html +++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.html @@ -14,7 +14,7 @@ [categoryTitle]="element.category?.title" [categoryLink]="element.category?.link" [showReadMore]="element.link?.length" - [readMoreLink]="element.link"> + [readMoreLink]="element.link" /> } diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.spec.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.spec.ts new file mode 100644 index 00000000..61496625 --- /dev/null +++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ItTimelineComponent } from './timeline.component'; +import { tb_base } from '../../../../test'; + +describe('ItTimelineComponent', () => { + let component: ItTimelineComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule(tb_base).compileComponents(); + + fixture = TestBed.createComponent(ItTimelineComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.ts new file mode 100644 index 00000000..571ac1ae --- /dev/null +++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.ts @@ -0,0 +1,31 @@ +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { ItTimelineItemComponent } from './timeline-item/timeline-item.component'; +import { ItIconComponent } from '../../utils/icon/icon.component'; +import { TranslateModule } from '@ngx-translate/core'; +import { ItAbstractComponent } from '../../../abstracts/abstract.component'; +import { TimelineElement } from '../../../interfaces/core'; + +/** + * Timeline + * @description Build timeline for chronological representation of events. + */ +@Component({ + standalone: true, + selector: 'it-timeline', + templateUrl: './timeline.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ItIconComponent, TranslateModule, ItTimelineItemComponent], +}) +export class ItTimelineComponent extends ItAbstractComponent { + /** + * Timeline elements array + * @default [] + */ + @Input() timelineElements: TimelineElement[] = []; + + /** + * Default date format for timeline element reference date + * @default dd/MM/yyyy + */ + @Input() dateFormat: string = 'dd/MM/yyyy'; +} diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline.module.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.module.ts index 3aa28c35..629a2055 100644 --- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline.module.ts +++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.module.ts @@ -1,8 +1,8 @@ import { NgModule } from '@angular/core'; -import { ItTimelineContainerComponent } from './timeline-container/timeline-container.component'; +import { ItTimelineComponent } from './timeline.component'; import { ItTimelineItemComponent } from './timeline-item/timeline-item.component'; -const timelineComponents = [ItTimelineContainerComponent, ItTimelineItemComponent]; +const timelineComponents = [ItTimelineComponent, ItTimelineItemComponent]; @NgModule({ imports: timelineComponents, diff --git a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts index 18cda673..1952204d 100644 --- a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts +++ b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts @@ -42,7 +42,7 @@ import { ItDateAgoPipe } from './pipes/date-ago.pipe'; import { ItDurationPipe } from './pipes/duration.pipe'; import { ItMarkMatchingTextPipe } from './pipes/mark-matching-text.pipe'; import { ItTimelineModule } from './components/core/timeline/timeline.module'; -import { ItTimelineContainerComponent } from './components/core/timeline/timeline-container/timeline-container.component'; +import { ItTimelineComponent } from './components/core/timeline/timeline.component'; import { ItTimelineItemComponent } from './components/core/timeline/timeline-item/timeline-item.component'; /** @@ -75,7 +75,7 @@ const core = [ ItTabModule, ItTableModule, ItTooltipDirective, - ItTimelineContainerComponent, + ItTimelineComponent, ItTimelineItemComponent, ItTimelineModule, ]; diff --git a/src/app/timeline/timeline-default-example/timeline-default-example.component.html b/src/app/timeline/timeline-default-example/timeline-default-example.component.html index fbbd1b7e..d66b5716 100644 --- a/src/app/timeline/timeline-default-example/timeline-default-example.component.html +++ b/src/app/timeline/timeline-default-example/timeline-default-example.component.html @@ -2,6 +2,6 @@

Esempi

- +
diff --git a/src/app/timeline/timeline-index/timeline-index.component.ts b/src/app/timeline/timeline-index/timeline-index.component.ts index 1a0384a2..259ce3a1 100644 --- a/src/app/timeline/timeline-index/timeline-index.component.ts +++ b/src/app/timeline/timeline-index/timeline-index.component.ts @@ -9,6 +9,6 @@ export class TimelineIndexComponent { component: any; constructor() { - this.component = (Documentation).components.find(component => component.name === 'ItTimelineContainerComponent'); + this.component = (Documentation).components.find(component => component.name === 'ItTimelineComponent'); } }