Skip to content

Commit 04ee5f5

Browse files
DamianBrzezinskiHoADamianBrzezinskiHoA
committed
feat(client): wip appended helper service, new ui components for bottomsheet
1 parent b51db6b commit 04ee5f5

File tree

17 files changed

+139
-62
lines changed

17 files changed

+139
-62
lines changed

‎libs/blog/roadmap/feature-roadmap/src/lib/feature-roadmap.component.ts

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,14 @@ import {
1111
PLATFORM_ID,
1212
ViewChild,
1313
} from '@angular/core';
14-
import { rxResource, toSignal } from '@angular/core/rxjs-interop';
14+
import {
15+
rxResource,
16+
takeUntilDestroyed,
17+
toSignal,
18+
} from '@angular/core/rxjs-interop';
1519
import { ActivatedRoute } from '@angular/router';
1620
import panzoom, { PanZoom, PanZoomOptions } from 'panzoom';
17-
import { map } from 'rxjs';
21+
import { map, tap } from 'rxjs';
1822

1923
import { RoadmapNodeDTO } from '@angular-love/blog/contracts/roadmap';
2024
import {
@@ -25,6 +29,7 @@ import {
2529
RoadmapPanControlsComponent,
2630
} from '@angular-love/blog/roadmap/ui-roadmap';
2731
import { RoadmapStore } from '@angular-love/roadmap-data-access';
32+
import { RoadmapBottomsheetManagerService } from '@angular-love/roadmap-utils';
2833

2934
import { buildRoadmapLayersFromDto } from './build-roadmap-layers-from-dto';
3035

@@ -63,6 +68,9 @@ export class FeatureRoadmapComponent {
6368
private readonly elementRef = inject<ElementRef<HTMLElement>>(
6469
ElementRef<HTMLElement>,
6570
);
71+
private readonly _roadmapBottomsheetManagerService = inject(
72+
RoadmapBottomsheetManagerService,
73+
);
6674

6775
private readonly selectedNodeId = toSignal(
6876
this._route.queryParams.pipe(map((params) => params['nodeId'])),
@@ -98,6 +106,15 @@ export class FeatureRoadmapComponent {
98106

99107
if (selectedNodeId) this.focusSelectedNode(selectedNodeId);
100108
});
109+
110+
this._roadmapBottomsheetManagerService.bottomSheetOpen$
111+
.pipe(
112+
takeUntilDestroyed(),
113+
tap((id) => {
114+
this._roadmapStore.getNodeDetails(id);
115+
}),
116+
)
117+
.subscribe();
101118
}
102119

103120
resizeRoadmap(event: EventType): void {

‎libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-angular-love-node/roadmap-angular-love-node.component.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
import {
22
ChangeDetectionStrategy,
33
Component,
4+
inject,
45
input,
56
output,
67
} from '@angular/core';
78

9+
import { RoadmapBottomsheetManagerService } from '@angular-love/roadmap-utils';
10+
811
import { RoadmapStandardNode } from '../../types/roadmap-node';
912

1013
@Component({
1114
selector: 'al-roadmap-angular-love-node',
1215
template: `
1316
<div
1417
class="roadmap-hover-border-gradient relative w-fit text-nowrap rounded-lg bg-[#FDF5FD] text-[#FDF5FD]"
15-
(pointerup)="getBottomsheet.emit(node().id)"
18+
(pointerup)="_roadmapBottomsheetManagerService.openBottomSheet(node().id)"
1619
>
1720
<div
1821
class="relative z-10 m-[4px] rounded-lg bg-gradient-to-r from-[--secondary-color] to-[--gradient-color] px-6 py-4 text-[24px]"
@@ -28,6 +31,8 @@ import { RoadmapStandardNode } from '../../types/roadmap-node';
2831
},
2932
})
3033
export class RoadmapAngularLoveNodeComponent {
34+
protected readonly _roadmapBottomsheetManagerService = inject(
35+
RoadmapBottomsheetManagerService,
36+
);
3137
readonly node = input.required<RoadmapStandardNode>();
32-
readonly getBottomsheet = output<string>();
3338
}

‎libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-cluster/roadmap-cluster.component.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import {
22
ChangeDetectionStrategy,
33
Component,
4+
inject,
45
input,
56
output,
67
} from '@angular/core';
78

9+
import { RoadmapBottomsheetManagerService } from '@angular-love/roadmap-utils';
10+
811
import { RoadmapClusterNode } from '../../types/roadmap-node';
912

1013
@Component({
@@ -22,7 +25,9 @@ import { RoadmapClusterNode } from '../../types/roadmap-node';
2225
<div
2326
class="roadmap-hover-border-gradient relative w-full text-nowrap rounded-lg bg-[#FDF5FD] text-[#FDF5FD]"
2427
[attr.node-id]="clusterNode.id"
25-
(pointerup)="getBottomsheet.emit(clusterNode.id)"
28+
(pointerup)="
29+
_roadmapBottomsheetManagerService.openBottomSheet(clusterNode.id)
30+
"
2631
>
2732
<div
2833
class="relative z-10 m-[1px] rounded-lg bg-[--secondary-color] px-6 py-4"
@@ -41,6 +46,8 @@ import { RoadmapClusterNode } from '../../types/roadmap-node';
4146
changeDetection: ChangeDetectionStrategy.OnPush,
4247
})
4348
export class RoadmapClusterComponent {
49+
protected readonly _roadmapBottomsheetManagerService = inject(
50+
RoadmapBottomsheetManagerService,
51+
);
4452
readonly cluster = input.required<RoadmapClusterNode>();
45-
readonly getBottomsheet = output<string>();
4653
}

‎libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-primary-node/roadmap-primary-node.component.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
import {
22
ChangeDetectionStrategy,
33
Component,
4+
inject,
45
input,
56
output,
67
} from '@angular/core';
78

9+
import { RoadmapBottomsheetManagerService } from '@angular-love/roadmap-utils';
10+
811
import { RoadmapNode } from '../../types/roadmap-node';
912

1013
@Component({
1114
selector: 'al-roadmap-primary-node',
1215
template: `
1316
<div
1417
class="roadmap-hover-border-gradient relative w-fit text-nowrap rounded-lg bg-[#FDF5FD] text-[#FDF5FD]"
15-
(pointerup)="getBottomsheet.emit(node().id)"
18+
(pointerup)="_roadmapBottomsheetManagerService.openBottomSheet(node().id)"
1619
>
1720
<div
1821
class="relative z-10 m-[4px] rounded-lg bg-[--primary-color] px-6 py-4 text-[24px]"
@@ -28,6 +31,10 @@ import { RoadmapNode } from '../../types/roadmap-node';
2831
},
2932
})
3033
export class RoadmapPrimaryNodeComponent {
34+
//inject service//
35+
36+
protected readonly _roadmapBottomsheetManagerService = inject(
37+
RoadmapBottomsheetManagerService,
38+
);
3139
readonly node = input.required<RoadmapNode>();
32-
readonly getBottomsheet = output<string>();
3340
}

‎libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-secondary-node/roadmap-secondary-node.component.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
import {
22
ChangeDetectionStrategy,
33
Component,
4+
inject,
45
input,
56
output,
67
} from '@angular/core';
78

9+
import { RoadmapBottomsheetManagerService } from '@angular-love/roadmap-utils';
10+
811
import { RoadmapNode } from '../../types/roadmap-node';
912

1013
@Component({
1114
selector: 'al-roadmap-secondary-node',
1215
template: `
1316
<div
1417
class="roadmap-hover-border-gradient relative w-fit text-nowrap rounded-lg bg-[#FDF5FD] text-[#FDF5FD]"
15-
(pointerup)="getBottomsheet.emit(node().id)"
18+
(pointerup)="_roadmapBottomsheetManagerService.openBottomSheet(node().id)"
1619
>
1720
<div
1821
class="relative z-10 m-[2px] rounded-lg bg-[--secondary-color] px-6 py-4 text-[20px]"
@@ -28,6 +31,9 @@ import { RoadmapNode } from '../../types/roadmap-node';
2831
},
2932
})
3033
export class RoadmapSecondaryNodeComponent {
34+
protected readonly _roadmapBottomsheetManagerService = inject(
35+
RoadmapBottomsheetManagerService,
36+
);
37+
3138
readonly node = input.required<RoadmapNode>();
32-
readonly getBottomsheet = output<string>();
3339
}

‎libs/blog/roadmap/ui-roadmap/src/lib/components/connected-nodes/connected-nodes.component.html

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,9 @@
2828
<div class="mx-16 flex gap-8">
2929
@for (node of connectedNodes(); track node.id) {
3030
@if (node.nodeType === 'secondary') {
31-
<al-roadmap-secondary-node
32-
alNodeConnectionPoint
33-
[node]="node"
34-
(getBottomsheet)="getBottomsheet.emit($event)"
35-
/>
31+
<al-roadmap-secondary-node alNodeConnectionPoint [node]="node" />
3632
} @else if (node.nodeType === 'cluster') {
37-
<al-roadmap-cluster
38-
alNodeConnectionPoint
39-
[cluster]="node"
40-
(getBottomsheet)="getBottomsheet.emit($event)"
41-
/>
33+
<al-roadmap-cluster alNodeConnectionPoint [cluster]="node" />
4234
}
4335
}
4436
</div>

‎libs/blog/roadmap/ui-roadmap/src/lib/components/roadmap-bottomsheet/roadmap-bottomsheet-description/roadmap-bottomsheet-description.component.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div class="px-6 py-6">
2+
<div class="flex items-center gap-4">
3+
<h4 class="font-semibold">Description</h4>
4+
<div class="h-px flex-grow bg-white"></div>
5+
</div>
6+
<div class="pt-4">
7+
<p class="text-justify leading-8">{{ description() }}</p>
8+
</div>
9+
</div>

‎libs/blog/roadmap/ui-roadmap/src/lib/components/roadmap-bottomsheet/roadmap-bottomsheet-description/roadmap-bottomsheet-description.component.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Component, input } from '@angular/core';
2+
3+
@Component({
4+
selector: 'al-roadmap-bottomsheet-description',
5+
templateUrl: 'roadmap-bottomsheet-description.component.html',
6+
})
7+
export class RoadmapBottomsheetDescriptionComponent {
8+
description = input.required<string>();
9+
}

‎libs/blog/roadmap/ui-roadmap/src/lib/components/roadmap-bottomsheet/roadmap-bottomsheet-header/roadmap-bottomsheet-header.component.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div
2+
class="rounded-2xl border-2 border-current py-4 text-center"
3+
[ngClass]="{
4+
'bg-[--secondary-color]:': nodeType() === 'regular',
5+
'bg-gradient-to-r from-[--secondary-color] to-[--gradient-color]':
6+
nodeType() === 'angular-love',
7+
}"
8+
>
9+
<h3 class="text-2xl font-bold">{{ title() | titlecase }}</h3>
10+
</div>

‎libs/blog/roadmap/ui-roadmap/src/lib/components/roadmap-bottomsheet/roadmap-bottomsheet-header/roadmap-bottomsheet-header.component.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:host {
2+
--secondary-color: #66002b;
3+
--gradient-color: #481cab;
4+
}

0 commit comments

Comments
 (0)