Aligned content with latest capire docs

bookshop/app/vue/app.js

@@ -1,5 +1,7 @@
 /* global Vue axios */ //> from vue.html
+const $ = sel => document.querySelector(sel)
 const GET = (url) => axios.get('/browse'+url)
+const POST = (cmd,data) => axios.post('/browse'+cmd,data)
 
 const books = new Vue ({
 
@@ -7,7 +9,8 @@ const books = new Vue ({
 
     data: {
         list: [],
-        info: '( click on a row to see details... )',
+        book: { descr:'( click on a row to see details... )' },
+        order: { amount:1, succeeded:'', failed:'' }
     },
 
     methods: {
@@ -15,16 +18,26 @@ const books = new Vue ({
         search: ({target:{value:v}}) => books.fetch (v && '$search='+v),
 
         async fetch (_filter='') {
-            const columns = 'ID,title,author,price', details = 'genre,currency'
+            const columns = 'ID,title,author,price,stock', details = 'genre,currency'
             const {data} = await GET(`/Books?$select=${columns}&$expand=${details}&${_filter}`)
             books.list = data.value
         },
 
-        async inspect ({currentTarget:{id}}) {
-            const {data} = await GET(`/Books/${id}/descr/$value`)
-            books.info = data
+        async inspect () {
+            const book = books.book = books.list [event.currentTarget.rowIndex-1]
+            book.descr || await GET(`/Books/${book.ID}/descr/$value`) .then (({data}) => book.descr = data)
+            books.order = { amount:1 }
+            setTimeout (()=> $('form > input').focus(), 111)
         },
 
+        submitOrder () { event.preventDefault()
+            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)
+        }
+
     }
 })