Specify Table Titles

add option to specify table titles and do this in accordance to the deifnitions of a given tool for a given resource
Therefore, we produce individual table-wrappers per resource / tool

src/index.js

 import { LoginScreen } from './login';
 import TableView from './views/tableView';
-import UserModal from './userTool';
+import { UserModal, UserTable } from './userTool';
 
 const m = require('mithril');
 
@@ -10,14 +10,7 @@ const root = main;
 
 
 m.route(root, '/users', {
-  '/users': {
-    view() {
-      return m(TableView, {
-        resource: 'users',
-        keys: ['firstname', 'lastname', 'nethz', 'legi', 'membership'],
-      });
-    },
-  },
+  '/users': UserTable,
   '/users/:id': UserModal,
   '/events': {
     view() {

src/userTool.js

 import { ItemView } from './views/itemView';
 import { EditView, inputGroup, selectGroup } from './views/editView';
-import Table from './views/tableView';
+import TableView from './views/tableView';
 
 const m = require('mithril');
 
@@ -15,6 +15,7 @@ const keyDescriptors = {
   department: 'Department',
   email: 'Email',
 };
+const tableKeys = ['firstname', 'lastname', 'nethz', 'legi', 'membership'];
 
 class UserView extends ItemView {
   constructor() {
@@ -46,7 +47,7 @@ class UserView extends ItemView {
         m('td', this.data[key] ? this.data[key] : ''),
       ]))),
       m('h2', 'Memberships'), m('br'),
-      m(Table, {
+      m(TableView, {
         resource: 'groupmemberships',
         keys: ['group.name', 'expiry'],
         querystring: m.buildQueryString({
@@ -55,7 +56,7 @@ class UserView extends ItemView {
         }),
       }),
       m('h2', 'Signups'), m('br'),
-      m(Table, {
+      m(TableView, {
         resource: 'eventsignups',
         keys: ['event.title_de'],
         querystring: m.buildQueryString({
@@ -114,7 +115,7 @@ class UserEdit extends EditView {
   }
 }
 
-export default class UserModal {
+export class UserModal {
   constructor() {
     this.edit = false;
   }
@@ -131,3 +132,13 @@ export default class UserModal {
     ]);
   }
 }
+
+export class UserTable {
+  view() {
+    return m(TableView, {
+      resource: 'users',
+      keys: tableKeys,
+      titles: tableKeys.map(key => keyDescriptors[key] || key),
+    });
+  }
+}

src/views/tableView.js

@@ -21,6 +21,7 @@ export default class TableView {
   constructor(vnode) {
     this.items = [];
     this.show_keys = vnode.attrs.keys;
+    this.titles = vnode.attrs.titles || this.show_keys;
     this.resource = vnode.attrs.resource;
     // the querystring is either given or will be parsed from the url
     if (vnode.attrs.querystring) {
@@ -47,7 +48,7 @@ export default class TableView {
   view() {
     return m('div', [
       m('table.table.table-hover', [
-        m('thead', m('tr', this.show_keys.map(title => m('th', title)))),
+        m('thead', m('tr', this.titles.map(title => m('th', title)))),
         m('tbody', this.items.map(item =>
           m(TableRow, { show_keys: this.show_keys, data: item }))),
       ]),