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

Merge pull request #319 from SAP-samples/data-viewer

Browse Source 
Data viewer Misc
This commit is contained in:
Christian Georgi
2022-02-07 10:30:01 +01:00
committed by GitHub
parent f21488fd71 f6b4d534fc
commit ff533754b4
4 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
data-viewer/app/viewer/app.js
View File

@@ -9,11 +9,9 @@ const columnKeysFirst = (c1, c2) => {
return 0 // retain natural order of normal columns return 0 // retain natural order of normal columns
} }
const vue = new Vue ({ const vue = Vue.createApp ({
el:'#app', data() { return {
data: {
error: undefined, error: undefined,
dataSource: storageGet('data-source', 'db'), dataSource: storageGet('data-source', 'db'),
skip: storageGet('skip', 0), skip: storageGet('skip', 0),
@@ -24,7 +22,7 @@ const vue = new Vue ({
data: [], data: [],
rowDetails: {}, rowDetails: {},
rowKey: storageGet('rowKey') rowKey: storageGet('rowKey')
}, }},
watch: { watch: {
dataSource: (v) => { storageSet('data-source', v); vue.fetchEntities() }, dataSource: (v) => { storageSet('data-source', v); vue.fetchEntities() },
@@ -77,13 +75,13 @@ const vue = new Vue ({
else vue.rowDetails = {} else vue.rowDetails = {}
vue.error = undefined vue.error = undefined
} catch (err) { } catch (err) {
if (err.response?.data?.error) {
vue.error = err.response?.data?.error
} else {
vue.error = err
}
vue.data = [] vue.data = []
vue.rowDetails = {} vue.rowDetails = {}
if (err.response?.data?.error) {
vue.error = err.response.data.error
} else {
vue.error = { code:err.code, message:err.message }
}
} }
}, },
@@ -116,5 +114,6 @@ const vue = new Vue ({
} }
}) })
.mount('#app')
vue.fetchEntities() vue.fetchEntities()

9
data-viewer/app/viewer/index.html
View File

@@ -5,7 +5,9 @@
<title>Data Browser</title> <title>Data Browser</title>
<link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css"> <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/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="app.js" defer></script>
<style> <style>
th { position: sticky; top:0; z-index: 2; background-color: white; } th { position: sticky; top:0; z-index: 2; background-color: white; }
.noscroll { overflow: hidden; } .noscroll { overflow: hidden; }
@@ -32,7 +34,7 @@
<body class="noscroll"> <body class="noscroll">
<div id='app' class="full-container"> <div id='app' class="full-container">
<h1> {{ document.title }}{{ entity ? ' &ndash; ' + entity.name : '' }}</h1> <h1>Data Browser &ndash; {{ entity ? entity.name : '' }}</h1>
<div class="with-sidebar"> <div class="with-sidebar">
<div class="sidebar"> <div class="sidebar">
@@ -73,7 +75,7 @@
</table> </table>
</div> </div>
<div v-if="error" class="not-sidebar-main error"> <div v-if="error" class="not-sidebar-main error">
Error: {{ error.code }} &ndash; {{ error.message }} Error: {{ error.code ? error.code + ' &ndash; ' + error.message : error.message }}
</div> </div>
<p></p> <p></p>
<div v-if="rowDetails" class="not-sidebar-sub"> <div v-if="rowDetails" class="not-sidebar-sub">
@@ -90,5 +92,4 @@
</div> </div>
</body> </body>
<script src="app.js"></script>
</html> </html>

2
data-viewer/srv/data-service.cds
View File

@@ -1,7 +1,7 @@
/** /**
* Exposes data + entity metadata * Exposes data + entity metadata
*/ */
//@requires:'admin' @requires:'authenticated-user'
service DataService @( path:'-data' ) { service DataService @( path:'-data' ) {
/** /**

2
data-viewer/srv/data-service.js
View File

@@ -31,7 +31,7 @@ class DataService extends cds.ApplicationService { init(){
if (!entity) return req.reject(404, 'No such entity: ' + entityName) if (!entity) return req.reject(404, 'No such entity: ' + entityName)
const query = SELECT.from(entity) const query = SELECT.from(entity)
query.SELECT.limit = req.query.SELECT.limit // use $skip / $top from request query.SELECT.limit = req.query.SELECT.limit // forward $skip / $top
const dataSource = findDataSource(dataSourceName, entityName) const dataSource = findDataSource(dataSourceName, entityName)
const res = await dataSource.run(query) const res = await dataSource.run(query)