Last active
October 3, 2018 16:56
-
-
Save shankarsridhar/42040408161b139f10f2b353e07eaae0 to your computer and use it in GitHub Desktop.
bug-1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Component from '@ember/component'; | |
import { computed } from '@ember/object'; | |
export default Component.extend({ | |
tagName: 'li', | |
classNames: ['candy-item'], | |
isDiscountAllowed: computed.and('discount.{couponNotUsed,percent}', 'isOnSale'), | |
discountedPrice: computed('discount.percent', function() { | |
const price = this.get('price'); | |
const discountPercent = this.get('discount.percent'); | |
return price * (1 - discountPercent); | |
}), | |
// DEMO[1]: BAD - proto error | |
discount: { | |
couponNotUsed: true, | |
percent: 0.1 | |
}, | |
actions: { | |
applyCoupon() { | |
const discountedPrice = this.get('discountedPrice'); | |
this.set('isCouponApplied', true); | |
this.set('discount.couponNotUsed', false); | |
this.set('price', discountedPrice); | |
} | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Controller from '@ember/controller'; | |
import { get, set, computed, observer } from '@ember/object'; | |
export default Controller.extend({ | |
// DEMO[3]: BAD - Observer vs computed properties | |
/* amountSavedObs: observer('model.cartItems.@each.{originalPrice,price,qty}', function() { | |
console.log('totalSavings - Observer'); | |
// TODO: can we listen to `isOnSale` as well, to amplify the problem with observer ? | |
let _totalAmountSaved = 0; | |
const cartItems = get(this, 'model.cartItems'); | |
cartItems.forEach(item => { | |
_totalAmountSaved += (item.originalPrice - item.price) * item.qty; | |
}); | |
_totalAmountSaved = _totalAmountSaved.toFixed(2); | |
this.set('totalSavings', _totalAmountSaved); | |
}), */ | |
// DEMO[3]: GOOD - Observer vs computed properties | |
totalSavings: computed('model.cartItems.@each.{originalPrice,price,qty}', function() { | |
console.log('totalSavings - Computed Property'); | |
let _totalAmountSaved = 0; | |
const cartItems = get(this, 'model.cartItems'); | |
cartItems.forEach(item => { | |
_totalAmountSaved += (item.originalPrice - item.price) * item.qty; | |
}); | |
_totalAmountSaved = _totalAmountSaved.toFixed(2); | |
return _totalAmountSaved; | |
}), | |
totalAmount: computed('model.cartItems.@each.{qty,price}', function() { | |
const cartItems = get(this, 'model.cartItems'); | |
let _totalAmount = 0; | |
cartItems.forEach(item => (_totalAmount += item.qty * item.price)); | |
return _totalAmount; | |
}), | |
// DEMO[2.2]: BAD - listening to `model.cartItems.[]` vs `model.cartItems` | |
/* uniqueChocolatesCount: computed('model.cartItems', function() { | |
return this.get('model.cartItems.length'); | |
}), */ | |
// DEMO[2.2]: GOOD - listening to `model.cartItems.[]` vs `model.cartItems` | |
uniqueChocolatesCount: computed('model.cartItems.[]', function() { | |
return this.get('model.cartItems.length'); | |
}), | |
actions: { | |
addToCart(candyId) { | |
const cartItems = get(this, 'model.cartItems'); | |
const targetCandy = cartItems.findBy('id', candyId); | |
if (targetCandy) { | |
const qty = get(targetCandy, 'qty'); | |
set(targetCandy, 'qty', qty + 1); | |
} else { | |
const catalogue = get(this, 'model.candies'); | |
const newCandyLineItem = catalogue.findBy('id', candyId); | |
set(newCandyLineItem, 'qty', 1); | |
// DEMO[2.1]: BAD - KVO | |
/* cartItems.push(newCandyLineItem); | |
console.log(cartItems); */ | |
// DEMO[2.1]: GOOD - KVO | |
cartItems.pushObject(newCandyLineItem); | |
} | |
}, | |
resetCart() { | |
this.set('model.cartItems', []); | |
} | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Route from '@ember/routing/route'; | |
export default Route.extend({ | |
model() { | |
this._super(...arguments); | |
return { | |
candies: [ | |
{ | |
id: '1', | |
name: 'Ferrero', | |
url: 'http://i64.tinypic.com/mjn2h5.jpg', | |
price: 10, | |
originalPrice: 10, | |
isOnSale: true | |
}, | |
{ | |
id: '2', | |
name: 'Lindt', | |
url: 'http://i65.tinypic.com/14btfrr.png', | |
price: 8, | |
originalPrice: 8, | |
isOnSale: false | |
}, | |
{ | |
id: '3', | |
name: 'Hersheys', | |
url: 'http://i68.tinypic.com/2vtbi3m.jpg', | |
price: 8, | |
originalPrice: 8, | |
isOnSale: true | |
}, | |
{ | |
id: '4', | |
name: 'Kisses', | |
url: 'http://i64.tinypic.com/2vnm7bm.png', | |
price: 10, | |
originalPrice: 10, | |
isOnSale: false | |
} | |
], | |
cartItems: [] | |
}; | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: Arial, Helvetica, sans-serif; | |
background-color: #f5f5f5; } | |
.app-name { | |
font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif; | |
font-size: 20px; | |
line-height: 28px; | |
font-weight: 400; | |
color: #000000e6; } | |
.ember-application { | |
padding: 20px; } | |
.catalogue { | |
grid-template-columns: repeat(4, 1fr); | |
grid-gap: 20px; } | |
.rounded-border { | |
border-radius: 100%; } | |
.candy-list { | |
padding: 0; | |
list-style: none; | |
display: grid; | |
grid-template-columns: repeat(4, 1fr); | |
grid-gap: 20px; } | |
.candy-list .candy-item { | |
background-color: #fff; | |
border: 1px solid #efefef; | |
padding: 10px; | |
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.2); | |
transition: box-shadow 83ms; } | |
.candy-list .candy-item:hover { | |
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 8px 12px rgba(0, 0, 0, 0.2); } | |
.candy-list .btn-coupon { | |
padding: 4px 12px; | |
cursor: pointer; | |
background-color: #ef7e37; | |
color: #fff; | |
text-transform: capitalize; | |
border-radius: 5px; } | |
.candy-list .btn-cart { | |
padding: 4px 12px; | |
cursor: pointer; | |
background-color: #0073b1; | |
font-weight: 800; | |
color: #fff; | |
text-transform: capitalize; } | |
.candy-list .candy-image { | |
width: 150px; | |
height: 150px; | |
border: 2px solid rgba(255, 255, 255, 0.4); } | |
.candy-list .candy-footer { | |
display: flex; | |
justify-content: space-between; } | |
.cart { | |
background-color: #fff; | |
min-height: 200px; | |
padding: 12px; | |
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.2); } | |
.cart tbody tr:last-child td { | |
padding-bottom: 40px; } | |
.cart td { | |
min-width: 100px; } | |
.cart .cart-title { | |
font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif; | |
font-size: 18px; | |
line-height: 28px; | |
color: #000000e6; | |
margin-bottom: 20px; | |
text-align: left; } | |
th, | |
td { | |
text-align: left; } | |
.btn-reset-cart { | |
padding: 4px 12px; | |
cursor: pointer; | |
background-color: #900021; | |
color: #fff; | |
text-transform: capitalize; } | |
.flex { | |
display: flex; } | |
.text-center { | |
text-align: center; } | |
.text-left { | |
text-align: left; } | |
/*# sourceMappingURL=candyshop.css.map */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"version": "0.15.0", | |
"EmberENV": { | |
"FEATURES": {} | |
}, | |
"options": { | |
"use_pods": false, | |
"enable-testing": false | |
}, | |
"dependencies": { | |
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js", | |
"ember": "3.2.2", | |
"ember-template-compiler": "3.2.2", | |
"ember-testing": "3.2.2" | |
}, | |
"addons": { | |
"ember-data": "3.2.0" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment