show permissions of a group

src/groups/viewGroup.js

@@ -9,7 +9,7 @@ import {
   Icon,
   IconButton
 } from 'polythene-mithril';
-import { icons, Property } from '../views/elements';
+import { icons, Property, DropdownCard } from '../views/elements';
 import ItemView from '../views/itemView';
 import TableView from '../views/tableView';
 import DatalistController from '../listcontroller';
@@ -196,11 +196,19 @@ export default class viewGroup extends ItemView {
           icon: { svg: { content: m.trust(icons.cloud) } },
           inactive: true,
           compact: true,
-        }): '',
+        }) : '',
       ]),
       m('div.viewcontainer', [
         // now-column layout: This first column are the members
-        m('div.viewcontainercolumn', m(MembersTable, { group: this.data._id })),
+        m('div.viewcontainercolumn', [
+          this.data.permissions ? m(
+            DropdownCard,
+            { title: 'Permissions', style: { 'margin-bottom': '20px' } },
+            Object.keys(this.data.permissions)
+              .map(key => m(Property, { title: key }, this.data.permissions[key])),
+          ) : '',
+          m(MembersTable, { group: this.data._id }),
+        ]),
         // the second column contains receive_from and forward_to emails
         m('div.viewcontainercolumn', [
           m(EmailTable, {

src/views/elements.js

@@ -200,7 +200,7 @@ export class DropdownCard {
     this.expand = false;
   }
 
-  view({ attrs: { title }, children }) {
+  view({ attrs: { title, ...kwargs }, children }) {
     const toolbar = m(Toolbar, {
       compact: true,
       events: { onclick: () => { this.expand = !this.expand; } },
@@ -213,12 +213,20 @@ export class DropdownCard {
       m(ToolbarTitle, { text: title }),
     ]);
 
-    const card = m(Card, {
-      style: { padding: '10px', 'font-size': '15sp' },
-      content: children.map(child => ({ any: { content: child } })),
-    });
+    const content = [{ any: { content: toolbar } }];
+    if (this.expand) {
+      content.push(...children.map(child => ({
+        any: {
+          style: {
+            'padding-left': '10px',
+            'padding-right': '10px',
+          },
+          content: child,
+        },
+      })));
+    }
 
-    return m('div', [toolbar, this.expand ? card : '']);
+    return m(Card, { content, ...kwargs });
   }
 }