Skip to content

Commit 3d4cd72

Browse files
malincristmalincrist
committed
product details page WIP
1 parent b438243 commit 3d4cd72

File tree

11 files changed

+258
-82
lines changed

11 files changed

+258
-82
lines changed

‎src/components/template-pages/api-details-page/ko/runtime/api-details-page.html‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,6 @@
22
<div class="page-title title-background">
33
<h1 class="title-text" data-bind="text: api() ? api().displayName : 'The specified API does not exsist'">
44
</h1>
5-
<!-- ko if: api && versionApis().length > 0 -->
6-
<label class="select-badge">
7-
<select id="apiVersions" aria-label="API versions"
8-
data-bind="options: versionApis, optionsValue: 'name', optionsText: 'apiVersion', value: currentApiVersion">
9-
</select>
10-
<span class="arrow flex align-items-center justify-content-center">
11-
<i class="icon-emb icon-emb-chevron-down"></i>
12-
</span>
13-
</label>
14-
<!-- /ko -->
155
</div>
166

177
<div class="page-menu">

‎src/components/template-pages/api-details-page/ko/runtime/api-details-page.ts‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { RouteHelper } from "../../../../../routing/routeHelper";
66
import { ApiService } from "../../../../../services/apiService";
77
import { Router } from "@paperbits/common/routing";
88
import aboutApi from "./staticPages/about-api.html";
9-
import { menuItem, breadcrumbItem } from "../../../common/Utils";
9+
import { menuItem, breadcrumbItem, menuItemType } from "../../../common/Utils";
1010
import operationDetails from "../../../../operations/operation-details/ko/runtime/operation-details.html";
1111

1212
@RuntimeComponent({
@@ -93,9 +93,23 @@ export class ApiDetailsPage {
9393
this.operationDetailsConfig(config);
9494

9595
this.selectedMenuItem.subscribe((menuItem) => {
96+
let url = ""
97+
98+
if (menuItem.type === menuItemType.staticMenuItemType) {
99+
url = this.routeHelper.getProductDetailsPageReference(this.api().name, menuItem.value);
100+
}
101+
102+
if (menuItem.type === menuItemType.operationMenuItem) {
103+
url = this.routeHelper.getOperationReferenceUrl(this.api().name, menuItem.value);
104+
}
105+
106+
if (menuItem.type === menuItemType.documentationMenuItemType) {
107+
url = this.routeHelper.getProductDocumentationReferenceUrl(this.api().name, menuItem.value);
108+
}
109+
96110
const breadcrumbs = this.breadcrumbItems();
97111
breadcrumbs.pop();
98-
breadcrumbs.push({ title: menuItem.displayName, url: "" });
112+
breadcrumbs.push({ title: menuItem.displayName, url: url });
99113
this.breadcrumbItems(breadcrumbs);
100114
});
101115

@@ -152,7 +166,7 @@ export class ApiDetailsPage {
152166
const apiReferenceUrl = this.routeHelper.getApiReferenceUrl(this.api().name);
153167
this.breadcrumbItems([{ title: "Home", url: "/" },
154168
{ title: "APIs", url: "/apis" },
155-
{ title: this.api().name, url: apiReferenceUrl },
169+
{ title: this.api().name, url: this.routeHelper.getApiDetailsPageReference(this.api().name, "about") },
156170
{ title: "About this API", url: apiReferenceUrl }])
157171
}
158172

‎src/components/template-pages/product-details-page/ko/runtime/menu/product-nav-menu.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export class ProductNavMenu {
5656
this.productLoading.subscribe(async (newValue) => {
5757
if (!newValue) {
5858
await this.loadWiki();
59+
// to do: [0]
5960
this.selectMenuItem(this.staticSelectableMenuItems[2]);
6061
}
6162
});
@@ -75,6 +76,11 @@ export class ProductNavMenu {
7576

7677
this.selectedMenuItem(menuItem);
7778

79+
if (menuItem.type == menuItemType.staticMenuItemType) {
80+
const productReferenceUrl = this.routeHelper.getProductDetailsPageReference(this.product().name, menuItem.value);
81+
this.router.navigateTo(productReferenceUrl);
82+
}
83+
7884
if (menuItem.type == menuItemType.documentationMenuItemType) {
7985
const wikiUrl = this.routeHelper.getProductDocumentationReferenceUrl(this.product().name, menuItem.value);
8086
this.router.navigateTo(wikiUrl);

‎src/components/template-pages/product-details-page/ko/runtime/product-details-page.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
<div class="page-title title-background">
33
<h1 class="title-text"
44
data-bind="text: product() ? product().displayName : 'The specified product does not exsist'"></h1>
5+
<button class="subscribe-button" data-bind="click: openSubscribeForm">
6+
<span>Subscribe</span>
7+
<i class="icon-emb icon-emb-plus"></i>
8+
</button>
59
</div>
610

711
<div class="page-menu">
@@ -45,7 +49,8 @@ <h3>About this Product</h3>
4549
<!-- /ko -->
4650

4751
<!-- ko if: selectedMenuItem()?.value === 'subscriptions' -->
48-
<product-details-page-subscriptions params="{ product: product}"></product-details-page-subscriptions>
52+
<product-details-page-subscriptions
53+
params="{ product: product, openSubscribeForm: openSubscribeForm}"></product-details-page-subscriptions>
4954
<!-- /ko -->
5055
<!-- /ko -->
5156

‎src/components/template-pages/product-details-page/ko/runtime/product-details-page.ts‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as ko from "knockout";
22
import { Component, OnMounted, Param, RuntimeComponent } from "@paperbits/common/ko/decorators";
33
import template from "./product-details-page.html";
44
import { Product } from "../../../../../models/product";
5-
import { breadcrumbItem, menuItem } from "../../../common/Utils";
5+
import { breadcrumbItem, menuItem, menuItemType } from "../../../common/Utils";
66
import { ProductService } from "../../../../../services/productService";
77
import { RouteHelper } from "../../../../../routing/routeHelper";
88
import { Router } from "@paperbits/common/routing";
@@ -44,13 +44,29 @@ export class ProductDetailsPage {
4444
this.loadProduct(productName);
4545

4646
this.selectedMenuItem.subscribe((menuItem) => {
47+
let url = ""
48+
49+
if (menuItem.type === menuItemType.staticMenuItemType) {
50+
url = this.routeHelper.getProductDetailsPageReference(this.product().name, menuItem.value);
51+
}
52+
53+
if (menuItem.type === menuItemType.documentationMenuItemType) {
54+
url = this.routeHelper.getProductDocumentationReferenceUrl(this.product().name, menuItem.value);
55+
}
56+
57+
console.log(url);
58+
4759
const breadcrumbs = this.breadcrumbItems();
4860
breadcrumbs.pop();
49-
breadcrumbs.push({ title: menuItem.displayName, url: "" });
61+
breadcrumbs.push({ title: menuItem.displayName, url: url });
5062
this.breadcrumbItems(breadcrumbs);
5163
});
5264
}
5365

66+
public openSubscribeForm(){
67+
alert("Subscribe form opened");
68+
}
69+
5470
private async loadProduct(productName: string): Promise<void> {
5571
this.productLoading(true);
5672
try {
@@ -81,7 +97,7 @@ export class ProductDetailsPage {
8197
const productReferenceUrl = this.routeHelper.getProductReferenceUrl(this.product().name);
8298
this.breadcrumbItems([{ title: "Home", url: "/" },
8399
{ title: "Products", url: "/products" },
84-
{ title: this.product().name, url: productReferenceUrl },
100+
{ title: this.product().name, url: this.routeHelper.getProductDetailsPageReference(this.product().name, "about") },
85101
{ title: "About this Product", url: productReferenceUrl }])
86102
}
87103
}

‎src/components/template-pages/product-details-page/ko/runtime/staticPages/product-details-page-subscriptions.html‎

Lines changed: 64 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,46 @@
11
<h3>Subscriptions</h3>
2-
<p>Below are your subscriptions for this product</p>
2+
3+
<!-- ko ifnot: isUserSignedIn() -->
4+
<p>
5+
You need to sign in to see your subscriptions.
6+
</p>
7+
<!-- /ko -->
38

49
<!-- ko if: working -->
5-
<div class="table-body">
6-
<spinner></spinner>
7-
</div>
10+
<spinner class="fit"></spinner>
811
<!-- /ko -->
912

1013
<!-- ko ifnot: working -->
14+
<!-- ko if: isUserSignedIn() -->
15+
<p>Below are your subscriptions for this product</p>
16+
1117
<div class="info-block">
1218
<b>Maximum subscriptions: </b>
1319
<span
1420
data-bind="text: 'A total of ' + product().subscriptionsLimit + ' subscriptions can be created for this product.'"></span>
1521
</div>
16-
<div class="table">
17-
18-
<!-- ko if: !isUserSignedIn() -->
19-
<p>
20-
You need to sign in to see your subscriptions.
21-
</p>
22-
<!-- /ko -->
2322

24-
<!-- ko if: subscriptions().length === 0 && isUserSignedIn()-->
23+
<div class="table">
24+
<!-- ko if: subscriptions().length === 0-->
2525
<p>
2626
You don't have subscriptions yet.
2727
</p>
2828
<!-- /ko -->
2929

30-
<!-- ko if: subscriptions().length > 0 && isUserSignedIn()-->
30+
<!-- ko if: subscriptions().length > 0-->
3131
<div class="table-head">
32-
<div class="table-row">
33-
<div class="col-md-4">Name</div>
34-
<div class="col-md-2">Date created</div>
35-
<div class="col-md-2">Status</div>
36-
<div class="col-md-2">Action</div>
32+
<div class="table-row" role="row">
33+
<div class="col-6">Name</div>
34+
<div class="col-2">Date created</div>
35+
<div class="col-2">Status</div>
36+
<div class="col-2">Action</div>
3737
</div>
3838
</div>
39-
<!-- /ko -->
4039

4140
<div class="table-body">
4241
<!-- ko foreach: { data: subscriptions, as: 'subscription' } -->
4342
<div class="table-row">
44-
<div class="col-md-4 flex flex-row" role="cell">
45-
46-
43+
<div class="col-6 flex flex-row" role="cell">
4744
<!-- ko ifnot: $data.isEdit -->
4845
<div style="width: calc(100%-90px)" class="text-truncate">
4946
<span data-bind="text: model.name"></span>
@@ -57,39 +54,60 @@ <h3>Subscriptions</h3>
5754
<!-- /ko -->
5855

5956

60-
<div class="align-self-center ml-20" style="width: 90px;">
61-
<!-- ko ifnot: $data.isEdit -->
57+
<!-- ko ifnot: $data.isEdit -->
58+
<div class="align-self-center ml-20">
6259
<a role="button" class="btn-link" href="#" data-bind="click: toggleEdit"
6360
aria-label="Rename subscription"> <i class="icon-emb icon-emb-edit"></i></a>
64-
<!-- /ko -->
61+
</div>
62+
<!-- /ko -->
6563

66-
<!-- ko if: $data.isEdit -->
67-
<div>
68-
<a role="button" class="btn-link" href="#" data-bind="click: $parent.renameSubscription"
69-
aria-label="Save subscription name">Save</a> |
70-
<a role="button" class="btn-link" href="#" data-bind="click: toggleEdit"
71-
aria-label="Cancel subscription rename">Cancel</a>
72-
</div>
73-
<!-- /ko -->
64+
<!-- ko if: $data.isEdit -->
65+
<div class="align-self-center ml-20">
66+
<a role="button" class="btn-link" href="#" data-bind="click: $parent.renameSubscription"
67+
aria-label="Save subscription name">Save</a> |
68+
<a role="button" class="btn-link" href="#" data-bind="click: toggleEdit"
69+
aria-label="Cancel subscription rename">Cancel</a>
7470
</div>
71+
<!-- /ko -->
72+
</div>
73+
<div class="col-2" role="cell" data-bind="text: subscription.model.createdDate.toLocaleDateString('en-US')">
74+
</div>
75+
<div class="col-2" role="cell" data-bind="text: subscription.model.state"></div>
76+
<div class="col-2" role="cell">
77+
<!-- ko if: $data.model.canBeCancelled() -->
78+
<a role="button" class="btn-link" href="#" data-bind="click: $component.cancelSubscription"
79+
aria-label="Cancel subscription">Cancel</a>
80+
<!-- /ko -->
81+
</div>
82+
</div>
83+
<!-- /ko -->
84+
85+
<!-- ko if: nextLink()-->
86+
<!-- ko if: loadModeSubscriptions()-->
87+
<spinner></spinner>
88+
<!-- /ko -->
7589

90+
<!-- ko ifnot: loadModeSubscriptions()-->
91+
<div class="table-row">
92+
<div class="col-auto">
93+
<a href="#" data-bind="click: loadMoreSubscriptions">Show more</a>
7694
</div>
77-
<div class="col-md-2" role="cell"
78-
data-bind="text: subscription.model.createdDate.toLocaleDateString('en-US')"></div>
79-
<div class="col-md-2" role="cell" data-bind="text: subscription.model.state"></div>
80-
<div class="col-md-2" role="cell" data-bind="text: 'Cancel'"></div>
8195
</div>
8296
<!-- /ko -->
97+
<!-- /ko -->
98+
99+
<div class="table-row">
100+
<div class="col-auto">
101+
<div class="text-truncate">
102+
<a href="#" data-bind="click: openSubscribeForm">
103+
<i class="icon-emb icon-emb-plus"></i>
104+
<span>Subscribe</span>
105+
</a>
106+
</div>
107+
</div>
108+
</div>
83109
</div>
110+
<!-- /ko -->
84111
</div>
85-
<!-- ko if: nextLink()-->
86-
87-
<!-- ko if: loadModeSubscriptions()-->
88-
<spinner></spinner>
89-
<!-- /ko -->
90-
91-
<!-- ko ifnot: loadModeSubscriptions()-->
92-
<a href="#" data-bind="click: loadMoreSubscriptions">Show more</a>
93-
<!-- /ko -->
94112
<!-- /ko -->
95113
<!-- /ko -->

0 commit comments

Comments
 (0)