121 lines
3.1 KiB
Vue
121 lines
3.1 KiB
Vue
<template>
|
|
<table class="ui celled table">
|
|
<thead>
|
|
<tr>
|
|
<th v-for="key in columns"
|
|
@click="sortBy(key)"
|
|
:class="{ active: sortKey == key }">
|
|
{{ key | capitalize }}
|
|
|
|
<icon :name="sortOrders[key] > 0 ? 'sort-asc' : 'sort-desc'"></icon>
|
|
</th>
|
|
<th v-if="buttons" v-lang.general.action></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="entry in filteredData">
|
|
<td v-for="item in entry" v-if="!item.hide">
|
|
<template v-if="item.content">
|
|
<template v-if="item.link">
|
|
<router-link v-bind:to="item.link">{{item.content}}</router-link>
|
|
</template>
|
|
<template v-else>
|
|
{{item.content}}
|
|
</template>
|
|
</template>
|
|
<template v-else-if="item.content === ''"></template>
|
|
<template v-else>
|
|
{{item}}
|
|
</template>
|
|
</td>
|
|
<td v-if="buttons">
|
|
<span v-for="btn in buttons">
|
|
<button v-bind:class="btn.css" @click="btnclick(btn, entry)">
|
|
<i v-if="btn.icon" :class="btn.icon" class="icon"></i>
|
|
<span v-if="btn.text">{{ btn.text }}</span>
|
|
</button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<script>
|
|
import Icon from 'vue-awesome/components/Icon'
|
|
|
|
export default {
|
|
components: {Icon},
|
|
name: 'grid',
|
|
props: {
|
|
data: Array,
|
|
columns: Array,
|
|
filterKey: String,
|
|
buttons: Array,
|
|
context: Object,
|
|
btnclick: Function
|
|
},
|
|
data: function () {
|
|
var sortOrders = {}
|
|
this.columns.forEach(function (key) {
|
|
sortOrders[key] = 1
|
|
})
|
|
return {
|
|
sortKey: '',
|
|
sortOrders: sortOrders
|
|
}
|
|
},
|
|
created () {
|
|
let data = this.data
|
|
let i = 0
|
|
|
|
for (const d in data) {
|
|
let ii = 0
|
|
for (const dd in d) {
|
|
if (dd.content === '') {
|
|
this.data[i][ii] = dd
|
|
} else {
|
|
this.data[i][ii] = dd.content
|
|
}
|
|
ii++
|
|
}
|
|
i++
|
|
}
|
|
},
|
|
computed: {
|
|
filteredData: function () {
|
|
var sortKey = this.sortKey
|
|
var filterKey = this.filterKey && this.filterKey.toLowerCase()
|
|
var order = this.sortOrders[sortKey] || 1
|
|
var data = this.data
|
|
if (filterKey) {
|
|
data = data.filter(function (row) {
|
|
return Object.keys(row).some(function (key) {
|
|
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
|
|
})
|
|
})
|
|
}
|
|
if (sortKey) {
|
|
data = data.slice().sort(function (a, b) {
|
|
a = a[sortKey]
|
|
b = b[sortKey]
|
|
return (a === b ? 0 : a > b ? 1 : -1) * order
|
|
})
|
|
}
|
|
return data
|
|
}
|
|
},
|
|
filters: {
|
|
capitalize: function (str) {
|
|
return str.charAt(0).toUpperCase() + str.slice(1)
|
|
}
|
|
},
|
|
methods: {
|
|
sortBy: function (key) {
|
|
this.sortKey = key
|
|
this.sortOrders[key] = this.sortOrders[key] * -1
|
|
}
|
|
}
|
|
}
|
|
</script>
|