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

Show errors in UI, migrate to Vue 3

Browse Source
This commit is contained in:
Christian Georgi
2022-02-01 22:56:47 +01:00
parent f21488fd71
commit dbc561d2e3
2 changed files with 14 additions and 14 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>