From 84c4345f6232d8436328f6a2a1f7071d6cabe692 Mon Sep 17 00:00:00 2001 From: Cherif BOUCHELAGHEM Date: Wed, 2 Oct 2019 18:27:02 +0100 Subject: [PATCH] Update guide to fix menu item issue --- docs/guides/place-my-order.md | 14 ++++++-- .../place-my-order/steps/create-data/item.js | 24 +++++++++++++ .../place-my-order/steps/create-data/order.js | 24 +------------ .../steps/create-data/restaurant.js | 35 +++++++++++++++++++ 4 files changed, 72 insertions(+), 25 deletions(-) create mode 100644 guides/place-my-order/steps/create-data/item.js create mode 100644 guides/place-my-order/steps/create-data/restaurant.js diff --git a/docs/guides/place-my-order.md b/docs/guides/place-my-order.md index d37223570..7eb16b40f 100644 --- a/docs/guides/place-my-order.md +++ b/docs/guides/place-my-order.md @@ -799,7 +799,12 @@ First, let's look at the restaurant data we get back from the server. It looks l } ``` -We have a `menu` property which provides a `lunch` and `dinner` option (which will show later inside the tabs we set up in the previous chapter). We want to be able to add and remove items from the order, check if an item is in the order already, set a default order status (`new`), and be able to calculate the order total. For that to happen, we need to create a new `order` model: +We have a `menu` property which provides a `lunch` and `dinner` option (which will show later inside the tabs we set up in the previous chapter). We want to be able to add and remove items from the order, check if an item is in the order already, set a default order status (`new`), and be able to calculate the order total. For that to happen, we need to create a new `item` model: + +@sourceref ../../guides/place-my-order/steps/create-data/item.js +@highlight 1-24,only + +And generate `order` model: ```shell donejs add supermodel order @@ -808,7 +813,12 @@ donejs add supermodel order Like the restaurant model, the URL is `/api/orders` and the id property is `_id`. To select menu items, we need to add some additional functionality to `src/models/order.js`: @sourceref ../../guides/place-my-order/steps/create-data/order.js -@highlight 4-25,34-55,only +@highlight 3,11-32,only + +Add `menu` property to the `restaurant` model in `src/models/restaurant.js`: + +@sourceref ../../guides/place-my-order/steps/create-data/restaurant.js +@highlight 3,12-21,only Here we define an `ItemsList` which allows us to toggle menu items and check if they are already in the order. We set up ItemsList as the Value of the items property of an order so we can use its has function and toggle directly in the template. We also set a default value for status and a getter for calculating the order total which adds up all the item prices. We also create another `` tag to load orders in the order history template later. diff --git a/guides/place-my-order/steps/create-data/item.js b/guides/place-my-order/steps/create-data/item.js new file mode 100644 index 000000000..abfc5a347 --- /dev/null +++ b/guides/place-my-order/steps/create-data/item.js @@ -0,0 +1,24 @@ +import { DefineMap, DefineList} from 'can'; + +export const Item = DefineMap.extend({ + seal: false +}, { + price: 'number' +}); + +export const ItemsList = DefineList.extend({ + '#': Item, + has: function(item) { + return this.indexOf(item) !== -1; + }, + + toggle: function(item) { + var index = this.indexOf(item); + + if (index !== -1) { + this.splice(index, 1); + } else { + this.push(item); + } + } +}); diff --git a/guides/place-my-order/steps/create-data/order.js b/guides/place-my-order/steps/create-data/order.js index 24a631c95..6181a83ec 100644 --- a/guides/place-my-order/steps/create-data/order.js +++ b/guides/place-my-order/steps/create-data/order.js @@ -1,28 +1,6 @@ import { DefineMap, DefineList, superModel } from 'can'; import loader from '@loader'; - -const Item = DefineMap.extend('Item', { - seal: false -}, { - price: 'number' -}); - -const ItemsList = DefineList.extend('ItemList', { - '#': Item, - has: function(item) { - return this.indexOf(item) !== -1; - }, - - toggle: function(item) { - var index = this.indexOf(item); - - if (index !== -1) { - this.splice(index, 1); - } else { - this.push(item); - } - } -}); +import { ItemsList } from "./item"; const Order = DefineMap.extend('Order', { seal: false diff --git a/guides/place-my-order/steps/create-data/restaurant.js b/guides/place-my-order/steps/create-data/restaurant.js new file mode 100644 index 000000000..61676669e --- /dev/null +++ b/guides/place-my-order/steps/create-data/restaurant.js @@ -0,0 +1,35 @@ +import { DefineMap, DefineList, superModel } from 'can'; +import loader from '@loader'; +import { ItemsList } from "./item"; + +const Restaurant = DefineMap.extend({ + seal: false +}, { + '_id': { + type: 'any', + identity: true + }, + menu:{ + type: { + lunch: { + Type: ItemsList + }, + dinner: { + Type: ItemsList + } + } + } +}); + +Restaurant.List = DefineList.extend({ + '#': Restaurant +}); + +Restaurant.connection = superModel({ + url: loader.serviceBaseURL + '/api/restaurants', + Map: Restaurant, + List: Restaurant.List, + name: 'restaurant' +}); + +export default Restaurant;