From d2cb821143886dd972488ee7f39b228588efa751 Mon Sep 17 00:00:00 2001
From: Sebastian Frank <frank@basiskonfiguration.de>
Date: Fri, 1 Sep 2017 19:28:51 +0200
Subject: [PATCH] table colStyle, cellStyle, html render

---
 README.md                      |  1 +
 src/components/my-table.vue    |  4 ++-
 src/views/lists/domainlist.vue |  8 +++++-
 src/views/lists/userlist.vue   | 52 +++++++++++++++++++++++++++-------
 4 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 164ccf7..b2d7d77 100644
--- a/README.md
+++ b/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
diff --git a/src/components/my-table.vue b/src/components/my-table.vue
index 38d358d..61e93b4 100644
--- a/src/components/my-table.vue
+++ b/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 -->
diff --git a/src/views/lists/domainlist.vue b/src/views/lists/domainlist.vue
index d98938f..f6ad94e 100644
--- a/src/views/lists/domainlist.vue
+++ b/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',
diff --git a/src/views/lists/userlist.vue b/src/views/lists/userlist.vue
index f3f9bb4..063a7e1 100644
--- a/src/views/lists/userlist.vue
+++ b/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,