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

Data browser: cosmetics, reformat

Browse Source
This commit is contained in:
Christian Georgi
2022-01-31 19:07:00 +01:00
parent e6baa95f74
commit ae6be30aa0
2 changed files with 141 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@ const GET = (url) => axios.get('/-data'+url)
const storageGet = (key, def) => localStorage.getItem('data-viewer:'+key) || def const storageGet = (key, def) => localStorage.getItem('data-viewer:'+key) || def
const storageSet = (key, val) => localStorage.setItem('data-viewer:'+key, val) const storageSet = (key, val) => localStorage.setItem('data-viewer:'+key, val)
const viewer = new Vue ({ const vue = new Vue ({
el:'#app', el:'#app',
@@ -20,74 +20,74 @@ const viewer = new Vue ({
}, },
watch: { watch: {
dataSource: (v) => { storageSet('data-source', v); viewer.fetchEntities() }, dataSource: (v) => { storageSet('data-source', v); vue.fetchEntities() },
skip: (v) => { storageSet('skip', v); if (viewer.entity) viewer.fetchData() }, skip: (v) => { storageSet('skip', v); if (vue.entity) vue.fetchData() },
top: (v) => { storageSet('top', v); if (viewer.entity) viewer.fetchData() }, top: (v) => { storageSet('top', v); if (vue.entity) vue.fetchData() },
}, },
methods: { methods: {
async fetchEntities () { async fetchEntities () {
let url = `/Entities` let url = `/Entities`
if (viewer.dataSource === 'db') url += `?dataSource=db` if (vue.dataSource === 'db') url += `?dataSource=db`
const {data} = await GET(url) const {data} = await GET(url)
viewer.entities = data.value vue.entities = data.value
const entity = viewer.entity && viewer.entities.find(e => e.name === viewer.entity.name) const entity = vue.entity && vue.entities.find(e => e.name === vue.entity.name)
if (entity) { // restore selection from previous fetch if (entity) { // restore selection from previous fetch
viewer.columns = entity.columns vue.columns = entity.columns
await viewer.fetchData(entity) await vue.fetchData(entity)
} else { } else {
viewer.entity = undefined vue.entity = undefined
viewer.columns = [] vue.columns = []
viewer.data = [] vue.data = []
viewer.rowDetails = {} vue.rowDetails = {}
} }
}, },
async inspectEntity (eve) { async inspectEntity (eve) {
const entity = viewer.entity = viewer.entities [eve.currentTarget.rowIndex-1] const entity = vue.entity = vue.entities [eve.currentTarget.rowIndex-1]
storageSet('entity', JSON.stringify(entity)) storageSet('entity', JSON.stringify(entity))
viewer.columns = viewer.entities.find(e => e.name === entity.name).columns vue.columns = vue.entities.find(e => e.name === entity.name).columns
return await this.fetchData() return await this.fetchData()
}, },
async fetchData () { async fetchData () {
let url = `/Data?entity=${viewer.entity.name}&$skip=${viewer.skip}&$top=${viewer.top}` let url = `/Data?entity=${vue.entity.name}&$skip=${vue.skip}&$top=${vue.top}`
if (viewer.dataSource === 'db') url += `&dataSource=db` if (vue.dataSource === 'db') url += `&dataSource=db`
const {data} = await GET(url) const {data} = await GET(url)
viewer.data = data.value.map(d => d.record.map(r => r.data)) vue.data = data.value.map(d => d.record.map(r => r.data))
const row = viewer.data.find(data => viewer._makeRowKey(data) === viewer.rowKey) const row = vue.data.find(data => vue._makeRowKey(data) === vue.rowKey)
if (row) viewer._setRowDetails(row) if (row) vue._setRowDetails(row)
else viewer.rowDetails = {} else vue.rowDetails = {}
}, },
inspectRow (eve) { inspectRow (eve) {
viewer.rowDetails = {} vue.rowDetails = {}
const selectedRow = eve.currentTarget.rowIndex-1 const selectedRow = eve.currentTarget.rowIndex-1
viewer.rowKey = viewer._makeRowKey(viewer.data[selectedRow]) vue.rowKey = vue._makeRowKey(vue.data[selectedRow])
storageSet('rowKey', viewer.rowKey) storageSet('rowKey', vue.rowKey)
viewer._setRowDetails(viewer.data[selectedRow]) vue._setRowDetails(vue.data[selectedRow])
}, },
_setRowDetails(row) { _setRowDetails(row) {
viewer.rowDetails = {} vue.rowDetails = {}
row.forEach((line, colIndex) => { row.forEach((line, colIndex) => {
viewer.rowDetails[viewer.columns[colIndex].name] = line vue.rowDetails[vue.columns[colIndex].name] = line
}) })
}, },
_makeRowKey(row) { _makeRowKey(row) {
// to identify a row, build a key string out of all key columns' values // to identify a row, build a key string out of all key columns' values
return row return row
.filter((_, colIndex) => viewer.columns[colIndex] && viewer.columns[colIndex].isKey) .filter((_, colIndex) => vue.columns[colIndex] && vue.columns[colIndex].isKey)
.reduce(((prev, next) => prev += next), '') .reduce(((prev, next) => prev += next), '')
}, },
isActiveRow(row) { isActiveRow(row) {
return viewer._makeRowKey(row) === viewer.rowKey return vue._makeRowKey(row) === vue.rowKey
} }
} }
}) })
viewer.fetchEntities() vue.fetchEntities()