...
 
Commits (7)
......@@ -37,6 +37,14 @@ All third party components incorporated into the DMX Tableview Software are lice
## Version History
**0.3.0** - Sep 02, 2019
* More performant aggregation of tableview data at server side (#56)
* Adjusted default config for new tableviews (related to #56)
* Support for client-sync through dmx_client_id (#57)
* Bugfixes #59, #62, #60
* Builds on windows out-of-the-box (#58)
**0.2.0** - Jul 28, 2019
- Default configuration for new tableview topics (using the dmx-tableview-command)
......
......@@ -30,7 +30,7 @@
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.2</version>
<version>1.6.0</version>
<executions>
<execution>
<id>npm-install</id>
......
<template><!-- Todo Use encoded tableview topic value as file name. -->
<template>
<el-button size="medium" @click="clickHref()">
<a href="#" :download="fileName">Download CSV</a>
<a :href="linkHref" :download="fileName">Download CSV</a>
</el-button>
</template>
......@@ -9,6 +9,7 @@ import Data2CSVLink from "./data-2-csv-link";
export default {
// ### Todo: Support download of filtered tableview data...
created() {
Data2CSVLink.convertToLink(this.data, this.onCsvReady)
},
......@@ -22,7 +23,8 @@ export default {
data() {
return {
csvLink: null
csvLink: null,
linkHref: ""
}
},
......@@ -41,7 +43,7 @@ export default {
methods: {
clickHref () {
window.location.href = this.csvLink
this.linkHref = this.csvLink
},
onCsvReady(csv) {
this.csvLink = csv
......
......@@ -63,9 +63,9 @@
<el-dialog title="Please select a Topicmap ..." :visible.sync="dialogVisible" width="30%">
<el-select v-model="topicmapId">
<el-select v-model="topicmapId" filterable>
<el-option
v-for="topicmap in topicmaps"
v-for="topicmap in topicmapTopics"
:key="topicmap.id"
:label="topicmap.value"
:value="topicmap.id">
......@@ -92,7 +92,6 @@ export default {
created () {
// initial dataset
this.tableviewData = this.data
this.filteredRowCount = this.data.length
// load topicmaps in tableview workspace
axios.get('/tableview/topicmaps/' + this.tableViewId)
.then(response => {
......@@ -142,7 +141,18 @@ export default {
}
},
watch: {
tableviewData: function() {
this.filteredRowCount = this.tableviewData.length
}
},
computed: {
topicmapTopics () {
return this.topicmaps && this.topicmaps.sort((t1, t2) => t1.value.localeCompare(t2.value))
},
csvData () {
let rows = [];
let originalRows = this.tableviewData.slice(0);
......@@ -162,48 +172,52 @@ export default {
},
methods: {
searchInput () {
// dm5.utils.debounce(function() {
this.computeTableViewData()
// }, 300)
this.$nextTick(() => {
this.computeTableViewData()
})
},
computeTableViewData () {
this.$nextTick(() => {
let filteredData = this.data
if (this.filter.global) {
filteredData = this.data.filter(row => this.rowIncludesQuery(row, this.filter.global))
}
let filteredRows = filteredData.filter(row => {
for (let column of this.columns) {
if (this.filter[column.uri] && !this.matches(row, column.uri)) {
return false
}
}
return true
})
this.filteredRowCount = filteredRows.length
this.tableviewData = filteredRows
})
let filteredData = this.data
if (this.filter.global) {
filteredData = this.data.filter(row => this.rowIncludesQuery(row, this.filter.global))
}
let filteredRows = filteredData.filter(row => {
for (let column of this.columns) {
if (this.filter[column.uri] && !this.matches(row, column.uri)) {
return false
}
}
return true
})
this.tableviewData = filteredRows
},
matches (row, prop) {
const filter = this.filter[prop]
return !filter || String(row.columns[prop].value).toLowerCase().includes(filter.toLowerCase())
},
matchesQuery (row, prop, query) {
return !filter || String(row.columns[prop].value).toLowerCase().includes(filter.global)
},
rowIncludesQuery (row, query) {
for (let col in row.columns) {
if (String(row.columns[col].value).toLowerCase().includes(query.toLowerCase())) {
return true
}
for (let col in row.columns) {
if (String(row.columns[col].value).toLowerCase().includes(query.toLowerCase())) {
return true
}
return false
}
return false
},
showTopic (topicmapId = this.topicmapId, topicId = this.topicId) {
this.dialogVisible = false
window.open(`/tableview/open-in-map/${topicmapId}/${topicId}`, '_blank')
},
showDialog (id) {
this.dialogVisible = true
this.topicId = id
......@@ -214,6 +228,7 @@ export default {
}
return this.topicmaps.filter(t => t.value === topicmap.value).length > 1
}
}
};
</script>
......@@ -267,6 +282,15 @@ export default {
.el-table {
width: 100%;
}
.el-table .cell {
word-break: break-word;
}
.el-table td:last-child {
padding-right: 3.2em;
}
.el-table .cell a:hover {
color: #409EFF;
}
.el-table td,
.el-table th {
padding: 6px 0px;
......
......@@ -28,7 +28,7 @@ Vue.use(Vuex)
const store = new Vuex.Store({
state: {
tableviewName: "DMX Tableview 0.3.0-SNAPSHOT",
tableviewName: "DMX Tableview ...",
clientId: Math.floor(Number.MAX_SAFE_INTEGER * Math.random())
},
actions: {
......