composites

bookshop/app/vue/app.js

@@ -15,28 +15,30 @@ const books = new Vue ({
 
     methods: {
 
-        search: ({target:{value:v}}) => books.fetch (v && '$search='+v),
+        search: ({target:{value:v}}) => books.fetch(v && '&$search='+v),
 
-        async fetch (_filter='') {
-            const columns = 'ID,title,author,price,stock', details = 'genre,currency'
-            const {data} = await GET(`/Books?$select=${columns}&$expand=${details}&${_filter}`)
+        async fetch (etc='') {
+            const {data} = await GET(`/ListOfBooks?$expand=genre,currency${etc}`)
             books.list = data.value
         },
 
-        async inspect () {
-            const book = books.book = books.list [event.currentTarget.rowIndex-1]
-            book.imageSrc || await GET(`/Books/${book.ID}/image`)        .then (({data}) => book.imageSrc = data )
-            book.descr    || await GET(`/Books/${book.ID}/descr/$value`) .then (({data}) => book.descr = data)
+        async inspect (eve) {
+            const book = books.book = books.list [eve.currentTarget.rowIndex-1]
+            const res = await GET(`/Books/${book.ID}?$select=descr,stock,image`)
+            Object.assign (book, res.data)
             books.order = { amount:1 }
             setTimeout (()=> $('form > input').focus(), 111)
         },
 
-        submitOrder () { event.preventDefault()
+        async submitOrder () {
             const {book,order} = books, amount = parseInt (order.amount) || 1
-            POST(`/submitOrder`, { amount, book: book.ID })
-            .then (()=> books.order = { amount, succeeded: `Successfully orderd ${amount} item(s).` })
-            .catch (e=> books.order = { amount, failed: e.response.data.error.message })
-            GET(`/Books/${book.ID}/stock/$value`).then (res => book.stock = res.data)
+            try {
+                const res = await POST(`/submitOrder`, { amount, book: book.ID })
+                book.stock = res.data.stock
+                books.order = { amount, succeeded: `Successfully orderd ${amount} item(s).` }
+            } catch (e) {
+                books.order = { amount, failed: e.response.data.error.message }
+            }
         }
 
     }

bookshop/app/vue/index.html

@@ -27,18 +27,20 @@
             <th> Book </th>
             <th> Author </th>
             <th> Genre </th>
+            <th> Rating </th>
             <th> Price </th>
         </thead>
         <tr v-for="book in list" v-bind:id="book.ID" v-on:click="inspect">
             <td>{{ book.title }}</td>
             <td>{{ book.author }}</td>
             <td>{{ book.genre.name }}</td>
+            <td style="color:teal">{{ ('★'.repeat(Math.round(book.rating))+'☆☆☆☆☆').slice(0,5) }}</td>
             <td>{{ book.currency.symbol }} {{ book.price }}</td>
         </tr>
     </table>
 
     <div v-if="book.title">
-        <img v-bind:src="book.imageSrc" alt=""/>
+        <img v-bind:src="book.image" alt=""/>
     </div>
 
     <div v-if="book.title">
@@ -47,7 +49,7 @@
             <span class="has-error"> {{ order.failed }} </span>
             &nbsp;&nbsp; {{ book.stock }} in stock
         </label>
-        <form @submit="submitOrder">
+        <form @submit.prevent="submitOrder">
             <input type="number" id="amount" v-model="order.amount" v-bind:class="{ 'has-error': order.failed }">
             <input type="submit" value="Order:" class="muted-button">
         </form>

bookshop/db/schema.cds

@@ -8,7 +8,7 @@ entity Books : managed {
   author : Association to Authors;
   genre  : Association to Genres;
   stock  : Integer;
-  price  : Decimal(9,2);
+  price  : Decimal;
   currency : Currency;
   image : LargeBinary @Core.MediaType : 'image/png';
 }

bookshop/srv/admin-service.js

@@ -0,0 +1,12 @@
+const cds = require('@sap/cds')
+
+module.exports = cds.service.impl (function(){
+  this.before ('NEW','Authors', genid)
+  this.before ('NEW','Books', genid)
+})
+
+/** Generate primary keys for target entity in request */
+async function genid (req) {
+  const {ID} = await cds.tx(req).run (SELECT.one.from(req.target).columns('max(ID) as ID'))
+  req.data.ID = ID - ID % 100 + 100 + 1
+}

bookshop/srv/cat-service.cds

@@ -5,6 +5,10 @@ service CatalogService @(path:'/browse') {
     author.name as author
   } excluding { createdBy, modifiedBy };
 
+  @readonly entity ListOfBooks as SELECT from Books
+  excluding { descr, stock };
+
   @requires: 'authenticated-user'
-  action submitOrder (book : Books:ID, amount: Integer);
+  action submitOrder ( book: Books:ID, amount: Integer ) returns { stock: Integer };
+  event OrderedBook : { book: Books:ID; amount: Integer; buyer: String };
 }

bookshop/srv/cat-service.js

@@ -1,16 +1,18 @@
 const cds = require('@sap/cds')
-module.exports = async function (){
+const { Books } = cds.entities ('sap.capire.bookshop')
 
-  const db = await cds.connect.to('db') // connect to database service
-  const { Books } = db.entities         // get reflected definitions
+class CatalogService extends cds.ApplicationService { async init(){
 
   // Reduce stock of ordered books if available stock suffices
   this.on ('submitOrder', async req => {
-    const {book,amount} = req.data
-    const n = await UPDATE (Books, book)
-      .with ({ stock: {'-=': amount }})
-      .where ({ stock: {'>=': amount }})
-    n > 0 || req.error (409,`${amount} exceeds stock for book #${book}`)
+    const {book,amount} = req.data, tx = cds.tx(req)
+    let {stock} = await tx.read('stock').from(Books,book)
+    if (stock >= amount) {
+      await tx.update (Books,book).with ({ stock: stock -= amount })
+      this.emit ('OrderedBook', { book, amount, buyer:req.user.id })
+      return { stock }
+    }
+    else return req.error (409,`${amount} exceeds stock for book #${book}`)
   })
 
   // Add some discount for overstocked books
@@ -19,4 +21,8 @@ module.exports = async function (){
       each.title += ` -- 11% discount!`
     }
   })
-}
+
+  return super.init()
+}}
+
+module.exports = { CatalogService }