Skip to content

Commit

Permalink
- Error captured and displayed.
Browse files Browse the repository at this point in the history
- Loading spinners connected to the request and load process.
Royedc4 committed Mar 10, 2017
1 parent 0bec53f commit 0c5824c
Showing 4 changed files with 65 additions and 13 deletions.
31 changes: 24 additions & 7 deletions stitch-order-element.html
Original file line number Diff line number Diff line change
@@ -17,8 +17,8 @@
}
</style>

<stitch-order-request product-url="[[url]]" product-details="{{details}}"></stitch-order-request>
<stitch-order-form product-url="{{url}}" product-details="[[details]]"></stitch-order-form>
<stitch-order-request id="request" product-url="[[url]]" product-details="{{details}}"></stitch-order-request>
<stitch-order-form id="form" product-url="{{url}}" product-details="[[details]]"></stitch-order-form>

<!--
Development guidelines:
@@ -40,25 +40,42 @@
particular architecture needs that we anticipate in order to integrate with our system.
e.g.: the different userOrder and userOrderForSave objects.
-->


</template>

<script>
Polymer({

is: 'stitch-order-element',

properties: {},

listeners: {
'request.order-details-request': '_loadingProduct',
'request.order-response': '_orderDataRetrieved',
'request.error': '_errorThrown'
},

_loadingProduct: function(e){
this.$.form.reset(null, e.detail.URL);
this.$.form.set('loading', true);
this.$.form.set('loaded', false);
},
_orderDataRetrieved: function(e){
if (e.detail.details) {
this.$.form.set('loaded', true);
}
if (e.detail.options) {
this.$.form.set('loading', false);
}
},
_errorThrown: function(e){
this.$.form.error(e.detail.request.response[0].Error[0]);
},
/*
* Resets the form.
*/
reset: function(){

this.$.form.reset();
},

/*
* When the Set Up Order button is clicked.
*/
32 changes: 29 additions & 3 deletions stitch-order-form.html
Original file line number Diff line number Diff line change
@@ -39,6 +39,18 @@
@apply(--layout-center-center);
}

#error p, #error iron-icon {
display: inline-block;
}

#error p {
color: var(--primary-error-color, --paper-red-a200);
}

#error iron-icon {
color: var(--primary-error-color, --paper-red-a700);
}

form {
height: 0;
overflow: hidden;
@@ -141,6 +153,11 @@ <h1>Order Product</h1>

<div class="spinner">
<paper-spinner id="formSpinner" alt="Loading product details"></paper-spinner>

<div id="error" hidden$="[[!fail]]">
<iron-icon icon="stitch-order:error"></iron-icon>
<p>[[failMessage]]</p>
</div>
</div>

<form is="iron-form" id="form" method="get" content-type="application/json">
@@ -267,13 +284,15 @@ <h3>Total Cost</h3>
*/
fail: {
type: Boolean,
readOnly: true,
value: false
},
/**
* The message displayed as the corresponding error.
*/
failMessage: {
type: Boolean,
readOnly: true,
value: false
},

@@ -310,10 +329,17 @@ <h3>Total Cost</h3>
this.reset();
},

reset: function(){
this.productUrl = '';
this.address = {};
reset: function(address, URL){
this.$.form.reset();
this.productUrl = URL || '';
this.address = address || {};
this._setFail(false);
this._setFailMessage('');
},
error: function(details){
this._errorDetails = details;
this._setFail(true);
this._setFailMessage(details.Message[0]);
},

_loadingContent: function(loading, loaded){
6 changes: 6 additions & 0 deletions stitch-order-icons.html
Original file line number Diff line number Diff line change
@@ -12,6 +12,12 @@
<g id="shopping-cart">
<path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
</g>
<g id="error">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
</g>
<g id="error-outline">
<path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
</g>
</defs>
</svg>
</iron-iconset-svg>
9 changes: 6 additions & 3 deletions stitch-order-request.html
Original file line number Diff line number Diff line change
@@ -106,7 +106,7 @@
ajax.set('body', this.request.body(itemID));
ajax.generateRequest();

this.fire('order-details-request', {itemId: itemID});
this.fire('order-details-request', {itemId: itemID, URL: this.productUrl});
}
}, 300);
},
@@ -148,7 +148,9 @@
ajax.set('body', this.request.body(parentID, true));
ajax.generateRequest();

this.fire('order-options-request', {itemId: product.ASIN[0], parentId: parentID});
this.fire('order-options-request', {itemId: product.ASIN[0], parentId: parentID, URL: this.productUrl});
} else {
this.fire('order-response', {options: this.productDetails.options});
}
},
_setProductOptions: function(details){
@@ -180,8 +182,9 @@
options.forEach(function(option){
self.push('productDetails.options', option);
});
this.fire('order-response', {options: this.productDetails.options});
}

this.fire('order-response', {options: this.productDetails.options});
}
});
})();

0 comments on commit 0c5824c

Please sign in to comment.