panel/baseui
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

table colStyle, cellStyle, html render

Browse Source
This commit is contained in:
Sebastian Frank 2017-09-01 19:28:51 +02:00
parent 1f86e58a86
commit d2cb821143
No known key found for this signature in database
GPG Key ID: DC2BC5C506EBF6F3
4 changed files with 53 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -1,3 +1,4 @@
[![pipeline status](https://git.basehosts.de:20443/panel/basispanel-ui/badges/master/pipeline.svg)](https://git.basehosts.de:20443/panel/basispanel-ui/commits/master)
# basispanel UI
## Entwicklungsprozess

4
src/components/my-table.vue
View File

@ -5,6 +5,7 @@
<div class="table_header">
<div v-for="(col, i) in columns"
:class="['table_cell', {['sortable']: col.orderBy, [`align-${col.align}`]: col.align}]"
:style="col.colStyle"
:key="i">
<!-- Column with sorting -->
@ -29,10 +30,11 @@
<!-- Row content -->
<div v-for="(col, ci) in columns"
:class="['table_cell', {[`align-${col.align}`]: col.align}]"
:style="typeof col.cellStyle == 'function' ? col.cellStyle(row) : col.cellStyle"
:key="ci + 'c'">
<span v-if="col.prop" :title="getProp(row, col.prop)">{{ getProp(row, col.prop) }}</span>
<span v-else-if="col.render">{{ col.render(row) }}</span>
<span v-else-if="col.render" v-html="col.render(row)"></span>
</div>
<!-- Row actions -->

8
src/views/lists/domainlist.vue
View File

@ -38,7 +38,13 @@ export default {
heading: 'ID',
prop: 'ID',
orderBy: 'id',
align: 'right'
align: 'right',
colStyle: {
width: '70px'
},
cellStyle: {
color: '#999'
}
}, {
heading: 'TLD',
prop: 'TLD',

52
src/views/lists/userlist.vue
View File

@ -38,10 +38,50 @@ export default {
heading: 'ID',
prop: 'ID',
orderBy: 'id',
align: 'right'
align: 'right',
colStyle: {
width: '70px'
},
cellStyle: {
color: "#999"
}
}, {
heading: 'Benutzertyp',
render(row) {
switch (row.Type) {
case 0: return 'Administrator';
case 1: return 'Reseller';
case 2: return 'Endkunde';
}
},
orderBy: 'type',
align: 'left',
cellStyle(row) {
switch (row.Type) {
case 0: return {color: 'red'};
case 1: return {color: 'orange'};
case 2: return {color: 'green'};
}
}
}, {
heading: 'Benutzername',
prop: 'Username',
render(row) {
let reseller = row.Reseller;
if (reseller) {
if (reseller.Company) {
reseller = reseller.Company;
} else if (reseller.Lastname) {
reseller = reseller.Firstname + reseller.Lastname;
} else {
reseller = reseller.Username;
}
reseller = '<br><span style="font-size: 0.8em; color: #999">Reseller: ' + reseller + '</style>';
} else {
reseller = '';
}
return row.Username + reseller;
},
orderBy: 'username',
align: 'left'
}, {
@ -60,14 +100,6 @@ export default {
heading: 'Email',
prop: 'Email',
orderBy: 'email'
}, {
heading: 'Reseller',
prop: 'Reseller.Username'
}, {
heading: 'Render',
render(row) {
return '<b>ID:</b>' + row.ID;
}
}],
newRows: [ ],
hasMore: true,