From 1fc8a664f82e2c4f816ae62c340f24955087ef7d Mon Sep 17 00:00:00 2001 From: Drew Powers Date: Fri, 12 Apr 2019 14:05:56 -0600 Subject: [PATCH] Convert product-id to product-label (#66) --- src/components.d.ts | 4 ++-- .../manifold-plan-selector.tsx | 22 +++++++++---------- .../manifold-plan-selector/readme.md | 8 +++++-- src/index.html | 20 ++++++++--------- 4 files changed, 27 insertions(+), 27 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index 7401ae6b8..fcce5d701 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -226,13 +226,13 @@ export namespace Components { interface ManifoldPlanSelector { 'connection': Connection; 'hideProvisionButton'?: boolean; - 'productId': string; + 'productLabel': string; 'resourceId'?: string; } interface ManifoldPlanSelectorAttributes extends StencilHTMLAttributes { 'connection'?: Connection; 'hideProvisionButton'?: boolean; - 'productId'?: string; + 'productLabel'?: string; 'resourceId'?: string; } diff --git a/src/components/manifold-plan-selector/manifold-plan-selector.tsx b/src/components/manifold-plan-selector/manifold-plan-selector.tsx index aa25d60c7..58e803b3a 100644 --- a/src/components/manifold-plan-selector/manifold-plan-selector.tsx +++ b/src/components/manifold-plan-selector/manifold-plan-selector.tsx @@ -3,9 +3,6 @@ import { Component, State, Prop, Element } from '@stencil/core'; import Tunnel from '../../data/connection'; import { Connection, connections, Env } from '../../utils/connections'; -const byCost = (a: Catalog.ExpandedPlan, b: Catalog.ExpandedPlan) => - a.body.cost < b.body.cost ? -1 : 1; - @Component({ tag: 'manifold-plan-selector', shadow: true, @@ -15,20 +12,21 @@ export class ManifoldPlanSelector { @Prop() connection: Connection = connections[Env.Prod]; @Prop() resourceId?: string; @Prop() hideProvisionButton?: boolean; - @Prop() productId: string; + @Prop() productLabel: string; @State() product: Catalog.ExpandedProduct; @State() plans: Catalog.Plan[]; async componentWillLoad() { - await fetch(`${this.connection.catalog}/products/${this.productId}`) - .then(response => response.json()) - .then(data => { - this.product = data; - }); - await fetch(`${this.connection.catalog}/plans?product_id=${this.productId}`) + await fetch(`${this.connection.catalog}/products/?label=${this.productLabel}`) .then(response => response.json()) - .then(data => { - this.plans = data.sort(byCost); + .then((products: Catalog.ExpandedProduct[]) => { + const [product] = products; + this.product = product + fetch(`${this.connection.catalog}/plans/?product_id=${product.id}`) + .then(response => response.json()) + .then((plans: Catalog.ExpandedPlan[]) => { + this.plans = [...plans.sort((a, b) => a.body.cost - b.body.cost)] + }); }); } diff --git a/src/components/manifold-plan-selector/readme.md b/src/components/manifold-plan-selector/readme.md index c437b6b40..2a7f1cd75 100644 --- a/src/components/manifold-plan-selector/readme.md +++ b/src/components/manifold-plan-selector/readme.md @@ -3,9 +3,13 @@ Display the plans for a product. ```html - + ``` +## Product Label + +You can find the `:service` label for each at `https://manifold.co/services/:service`. + ## Detecting changes Events are dispatched on the `manifold-planUpdated` custom event. To listen @@ -40,7 +44,7 @@ If you would like to hide the button that provisions a selected service, add the | --------------------- | ----------------------- | ----------- | ---------------------- | ----------------------- | | `connection` | -- | | `Connection` | `connections[Env.Prod]` | | `hideProvisionButton` | `hide-provision-button` | | `boolean \| undefined` | `undefined` | -| `productId` | `product-id` | | `string` | `undefined` | +| `productLabel` | `product-label` | | `string` | `undefined` | | `resourceId` | `resource-id` | | `string \| undefined` | `undefined` | diff --git a/src/index.html b/src/index.html index c82afbc8b..beda0bfcd 100644 --- a/src/index.html +++ b/src/index.html @@ -312,8 +312,13 @@

Example

manifold-plan-selector

Display the plans for a product.

-
<manifold-plan-selector product-id="234w1jyaum5j0aqe3g3bmbqjgf20p"></manifold-plan-selector>
+              
<manifold-plan-selector product-label="jawsdb-mysql"></manifold-plan-selector>
 
+

Product Label

+

+ You can find the :service label for each at + https://manifold.co/services/:service. +

Detecting changes

Events are dispatched on the manifold-planUpdated custom event. To @@ -366,8 +371,8 @@

Properties

undefined - productId - product-id + productLabel + product-label string undefined @@ -389,14 +394,7 @@

Properties

- - - - - - +