table colStyle, cellStyle, html render

README.md

@@ -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

src/components/my-table.vue

@@ -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 -->

src/views/lists/domainlist.vue

@@ -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',

src/views/lists/userlist.vue

@@ -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,