b.santos/cloud-cap-samples
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Aligned content with latest capire docs

Browse Source
This commit is contained in:
Daniel
2020-03-29 17:22:04 +02:00
parent 251d07f38e
commit a8de029389
7 changed files with 60 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
bookshop/app/index.cds Normal file
View File

@@ -0,0 +1,3 @@
// Incorporate pre-build extensions from...
using from '../../common'; //> work-around for mediocre cds-tests
// using from '@capire/common';

23
bookshop/app/vue/app.js
View File

@@ -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)
}
}
})

28
bookshop/app/vue/index.html
View File

@@ -6,13 +6,22 @@
<link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style> #books tr:hover { background: #f2f2f2; cursor: pointer; } </style>
<style>
#books tr:hover { background: #f2f2f2; cursor: pointer; }
form { float:right; display:flex; flex-direction: row-reverse }
form #amount { width: 5em }
.is-success { color: #0d920d }
.has-error { color: #df1010 }
</style>
</head>
<body class="small-container", style="margin-top: 70px;">
<div id='app'>
<h1> Capire Books </h1>
<input type="text" placeholder="Search..." @input="search">
<table id='books'>
<thead>
<th> Book </th>
@@ -27,7 +36,22 @@
<td>{{ book.currency.symbol }} {{ book.price }}</td>
</tr>
</table>
<p> {{ info }} </p>
<div v-if="book.title">
<label style="text-align:right">
<span class="is-success"> {{ order.succeeded }} </span>
<span class="has-error"> {{ order.failed }} </span>
&nbsp;&nbsp; {{ book.stock }} in stock
</label>
<form @submit="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>
</div>
<h4> {{ book.title }} </h4>
<p> {{ book.descr }} </p>
</div>
</body>