Skip to content

Commit 5d490c3

Browse files
jxhnxjxhnx
committed
feat: retain asset relations & group resources
1 parent f4d7c5e commit 5d490c3

File tree

7 files changed

+431
-233
lines changed

7 files changed

+431
-233
lines changed

‎package-lock.json

+9-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"@angular/platform-browser": "^18.2.0",
2323
"@angular/platform-browser-dynamic": "^18.2.0",
2424
"@angular/router": "^18.2.0",
25+
"lodash": "^4.17.21",
2526
"rxjs": "~7.8.0",
2627
"tslib": "^2.3.0",
2728
"zone.js": "~0.14.10"
@@ -32,6 +33,7 @@
3233
"@angular/cli": "^18.2.7",
3334
"@angular/compiler-cli": "^18.2.0",
3435
"@types/jasmine": "~5.1.0",
36+
"@types/lodash": "^4.17.16",
3537
"angular-eslint": "18.3.1",
3638
"dotenv-webpack": "^8.1.0",
3739
"eslint": "^9.9.1",

‎src/app/components/marketplace/marketplace.component.html

+87-149
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</div>
2222

2323
<div *ngIf="services.length > 0" class="card-container">
24-
<div *ngFor="let service of services; let i = index" class="card-wrapper">
24+
<div *ngFor="let service of services" class="card-wrapper">
2525
<mat-card>
2626
<mat-card-header>
2727
<mat-card-title>{{ service.serviceOffering.name }}</mat-card-title>
@@ -53,8 +53,8 @@
5353
<mat-icon>chevron_left</mat-icon>
5454
</button>
5555
<span class="carousel-counter">
56-
Data Resource ({{ (serviceIndexes.get(service.serviceOffering.id)?.dataResourceIndex ?? 0) + 1 }}
57-
of {{ service.dataResources.length }})
56+
Group ({{ (serviceIndexes.get(service.serviceOffering.id)?.dataResourceIndex ?? 0) + 1 }}
57+
of {{ getMaxGroupCount(service) }})
5858
</span>
5959
<button
6060
mat-mini-fab
@@ -70,157 +70,95 @@
7070
<mat-icon>chevron_right</mat-icon>
7171
</button>
7272
</div>
73-
74-
<div
75-
class="resource"
76-
*ngIf="service.dataResources[(serviceIndexes.get(service.serviceOffering.id)?.dataResourceIndex ?? 0)] as dataResource"
77-
>
78-
<p class="resource-title">Data Resource</p>
79-
<p
80-
class="resource-description"
81-
*ngIf="dataResource.description && dataResource.description.length"
82-
>
83-
{{ formatter.formatDescription(dataResource.description) }}
84-
</p>
85-
<p *ngIf="dataResource.name">
86-
<span class="label">Name:</span> {{ dataResource.name }}
87-
</p>
88-
<p *ngIf="dataResource.containsPII">
89-
<span class="label">Contains PII:</span> {{ dataResource.containsPII }}
90-
</p>
91-
<p *ngIf="dataResource.copyrightOwnedBy">
92-
<span class="label">Copyright Owned By:</span> {{ dataResource.copyrightOwnedBy }}
93-
</p>
94-
<p *ngIf="dataResource.license">
95-
<span class="label">License:</span> {{ dataResource.license }}
96-
</p>
97-
<p *ngIf="dataResource.policy">
98-
<span class="label">Policy:</span> {{ dataResource.policy }}
99-
</p>
100-
</div>
10173
</ng-container>
10274

103-
<ng-container *ngIf="service.serviceAccessPoints && service.serviceAccessPoints.length">
104-
<mat-divider></mat-divider>
105-
106-
<div class="carousel-controls" *ngIf="service.serviceAccessPoints.length > 1">
107-
<button
108-
mat-mini-fab
109-
(click)="
110-
updateIndex(
111-
service.serviceOffering.id,
112-
IndexType.ServiceAccessPoint,
113-
service.serviceAccessPoints,
114-
'previous'
115-
)
116-
"
117-
>
118-
<mat-icon>chevron_left</mat-icon>
119-
</button>
120-
<span class="carousel-counter">
121-
Service Access Point ({{ (serviceIndexes.get(service.serviceOffering.id)?.serviceAccessPointIndex ?? 0) + 1 }}
122-
of {{ service.serviceAccessPoints.length }})
123-
</span>
124-
<button
125-
mat-mini-fab
126-
(click)="
127-
updateIndex(
128-
service.serviceOffering.id,
129-
IndexType.ServiceAccessPoint,
130-
service.serviceAccessPoints,
131-
'next'
132-
)
133-
"
134-
>
135-
<mat-icon>chevron_right</mat-icon>
136-
</button>
137-
</div>
75+
<!-- Data Resource -->
76+
<div
77+
class="resource"
78+
*ngIf="
79+
getCurrentResource(
80+
service.dataResources,
81+
serviceIndexes.get(service.serviceOffering.id)?.dataResourceIndex
82+
) as dataResource
83+
"
84+
>
85+
<p class="resource-title">Data Resource</p>
86+
<p *ngIf="dataResource.description?.length" class="resource-description">
87+
{{ formatter.formatDescription(dataResource.description!) }}
88+
</p>
89+
<p *ngIf="dataResource.name"><span class="label">Name:</span> {{ dataResource.name }}</p>
90+
<p *ngIf="dataResource.containsPII">
91+
<span class="label">Contains PII:</span> {{ dataResource.containsPII }}
92+
</p>
93+
<p *ngIf="dataResource.copyrightOwnedBy">
94+
<span class="label">Copyright Owned By:</span> {{ dataResource.copyrightOwnedBy }}
95+
</p>
96+
<p *ngIf="dataResource.license">
97+
<span class="label">License:</span> {{ dataResource.license }}
98+
</p>
99+
<p *ngIf="dataResource.policy">
100+
<span class="label">Policy:</span> {{ dataResource.policy }}
101+
</p>
102+
</div>
138103

139-
<div
140-
class="resource"
141-
*ngIf="service.serviceAccessPoints[(serviceIndexes.get(service.serviceOffering.id)?.serviceAccessPointIndex ?? 0)] as serviceAccessPoint"
142-
>
143-
<p class="resource-title">Service Access Point</p>
144-
<p *ngIf="serviceAccessPoint.host">
145-
<span class="label">Host:</span> {{ serviceAccessPoint.host }}
146-
</p>
147-
<p *ngIf="serviceAccessPoint.openAPI">
148-
<span class="label">OpenAPI:</span> {{ serviceAccessPoint.openAPI }}
149-
</p>
150-
<p *ngIf="serviceAccessPoint.port">
151-
<span class="label">Port:</span> {{ serviceAccessPoint.port }}
152-
</p>
153-
<p *ngIf="serviceAccessPoint.protocol">
154-
<span class="label">Protocol:</span> {{ serviceAccessPoint.protocol }}
155-
</p>
156-
<p *ngIf="serviceAccessPoint.version">
157-
<span class="label">Version:</span> {{ serviceAccessPoint.version }}
158-
</p>
159-
</div>
160-
</ng-container>
161-
162-
<ng-container *ngIf="service.physicalResources && service.physicalResources.length">
104+
<!-- Service Access Point -->
105+
<div
106+
class="resource"
107+
*ngIf="
108+
getCurrentResource(
109+
service.serviceAccessPoints,
110+
serviceIndexes.get(service.serviceOffering.id)?.serviceAccessPointIndex
111+
) as serviceAccessPoint
112+
"
113+
>
163114
<mat-divider></mat-divider>
115+
<p class="resource-title">Service Access Point</p>
116+
<p *ngIf="serviceAccessPoint.host">
117+
<span class="label">Host:</span> {{ serviceAccessPoint.host }}
118+
</p>
119+
<p *ngIf="serviceAccessPoint.openAPI">
120+
<span class="label">OpenAPI:</span> {{ serviceAccessPoint.openAPI }}
121+
</p>
122+
<p *ngIf="serviceAccessPoint.port">
123+
<span class="label">Port:</span> {{ serviceAccessPoint.port }}
124+
</p>
125+
<p *ngIf="serviceAccessPoint.protocol">
126+
<span class="label">Protocol:</span> {{ serviceAccessPoint.protocol }}
127+
</p>
128+
<p *ngIf="serviceAccessPoint.version">
129+
<span class="label">Version:</span> {{ serviceAccessPoint.version }}
130+
</p>
131+
</div>
164132

165-
<div class="carousel-controls" *ngIf="service.physicalResources.length > 1">
166-
<button
167-
mat-mini-fab
168-
(click)="
169-
updateIndex(
170-
service.serviceOffering.id,
171-
IndexType.PhysicalResource,
172-
service.physicalResources,
173-
'previous'
174-
)
175-
"
176-
>
177-
<mat-icon>chevron_left</mat-icon>
178-
</button>
179-
<span class="carousel-counter">
180-
Physical Resource ({{ (serviceIndexes.get(service.serviceOffering.id)?.physicalResourceIndex ?? 0) + 1 }}
181-
of {{ service.physicalResources.length }})
182-
</span>
183-
<button
184-
mat-mini-fab
185-
(click)="
186-
updateIndex(
187-
service.serviceOffering.id,
188-
IndexType.PhysicalResource,
189-
service.physicalResources,
190-
'next'
191-
)
192-
"
193-
>
194-
<mat-icon>chevron_right</mat-icon>
195-
</button>
196-
</div>
197-
198-
<div
199-
class="resource"
200-
*ngIf="service.physicalResources[(serviceIndexes.get(service.serviceOffering.id)?.physicalResourceIndex ?? 0)] as physicalResource"
201-
>
202-
<p class="resource-title">Physical Resource</p>
203-
<p
204-
class="resource-description"
205-
*ngIf="physicalResource.description && physicalResource.description.length"
206-
>
207-
{{ formatter.formatDescription(physicalResource.description) }}
208-
</p>
209-
<p *ngIf="physicalResource.name">
210-
<span class="label">Name:</span> {{ physicalResource.name }}
211-
</p>
212-
<p *ngIf="physicalResource.license">
213-
<span class="label">License:</span> {{ physicalResource.license }}
214-
</p>
215-
<p *ngIf="physicalResource.location">
216-
<span class="label">Location:</span> {{ physicalResource.location }}
217-
</p>
218-
<p *ngIf="physicalResource.policy && physicalResource.policy.length">
219-
<span class="label">Policy:</span>
220-
{{ formatter.formatDescription(physicalResource.policy) }}
221-
</p>
222-
</div>
223-
</ng-container>
133+
<!-- Physical Resource -->
134+
<div
135+
class="resource"
136+
*ngIf="
137+
getCurrentResource(
138+
service.physicalResources,
139+
serviceIndexes.get(service.serviceOffering.id)?.physicalResourceIndex
140+
) as physicalResource
141+
"
142+
>
143+
<mat-divider></mat-divider>
144+
<p class="resource-title">Physical Resource</p>
145+
<p *ngIf="physicalResource.description?.length" class="resource-description">
146+
{{ formatter.formatDescription(physicalResource.description!) }}
147+
</p>
148+
<p *ngIf="physicalResource.name">
149+
<span class="label">Name:</span> {{ physicalResource.name }}
150+
</p>
151+
<p *ngIf="physicalResource.license">
152+
<span class="label">License:</span> {{ physicalResource.license }}
153+
</p>
154+
<p *ngIf="physicalResource.location">
155+
<span class="label">Location:</span> {{ physicalResource.location }}
156+
</p>
157+
<p *ngIf="physicalResource.policy?.length">
158+
<span class="label">Policy:</span>
159+
{{ formatter.formatDescription(physicalResource.policy) }}
160+
</p>
161+
</div>
224162
</mat-card-content>
225163

226164
<mat-card-actions>

0 commit comments

Comments
 (0)