improve group grid

scm-webapp/src/main/webapp/resources/js/sonia.group.js

@@ -32,6 +32,13 @@
 // register namespace
 Ext.ns('Sonia.group');
 
+Sonia.group.setEditPanel = function(panel){
+  var editPanel = Ext.getCmp('groupEditPanel');
+  editPanel.removeAll();
+  editPanel.add(panel);
+  editPanel.doLayout();
+}
+
 // GroupGrid
 Sonia.group.Grid = Ext.extend(Sonia.rest.Grid, {
 
@@ -81,6 +88,29 @@ Sonia.group.Grid = Ext.extend(Sonia.rest.Grid, {
       }
     }
     return out;
+  },
+
+  selectItem: function(group){
+    if ( debug ){
+      console.debug( group.name + ' selected' );
+    }
+
+    Ext.getCmp('removeButton').setDisabled(false);
+    var panel = new Sonia.group.FormPanel({
+      item: group,
+      region: 'south',
+      title: 'Group Form',
+      padding: 5,
+      onUpdate: {
+        fn: this.reload,
+        scope: this
+      },
+      onCreate: {
+        fn: this.reload,
+        scope: this
+      }
+    });
+    Sonia.group.setEditPanel(panel);
   }
 
 });
@@ -91,13 +121,105 @@ Ext.reg('groupGrid', Sonia.group.Grid);
 // GroupFormPanel
 Sonia.group.FormPanel = Ext.extend(Sonia.rest.FormPanel,{
 
+  memberStore: null,
+
   initComponent: function(){
+
+    this.memberStore = new Ext.data.SimpleStore({
+      fields: ['member'],
+      sortInfo: {
+        field: 'member'
+      }
+    });
+
+    var memberColModel = new Ext.grid.ColumnModel({
+      defaults: {
+        sortable: true
+      },
+      columns: [{
+        id: 'member',
+        header: 'Member',
+        dataIndex: 'member',
+        editor: new Ext.form.TextField({
+          allowBlank: false
+        })
+      }]
+    });
+
+    var selectionModel = new Ext.grid.RowSelectionModel({
+      singleSelect: true
+    });
+
+    if ( this.item != null ){
+      var data = [];
+      if ( this.item.members != null ){
+        for ( var i=0; i<this.item.members.length; i++ ){
+          var a = [];
+          a.push( this.item.members[i] );
+          data.push(a);
+        }
+      }
+      if ( debug ){
+        console.debug( data );
+      }
+      this.memberStore.loadData( data );
+    }
+
     var items = [{
-      fieldLabel: 'Name',
+      xtype : 'fieldset',
-      name: 'name',
+      checkboxToggle : false,
-      allowBlank: false,
+      title : 'Settings',
-      readOnly: this.item != null
+      collapsible : true,
+      autoHeight : true,
+      autoWidth: true,
+      autoScroll: true,
+      defaults: {width: 240},
+      defaultType: 'textfield',
+      buttonAlign: 'center',
+      items: [{
+        fieldLabel: 'Name',
+        name: 'name',
+        allowBlank: false,
+        readOnly: this.item != null
+      }]
+    },{
+      id: 'memberGrid',
+      xtype: 'editorgrid',
+      title: 'Members',
+      clicksToEdit: 1,
+      frame: true,
+      width: '100%',
+      autoHeight: true,
+      autoScroll: false,
+      colModel: memberColModel,
+      sm: selectionModel,
+      store: this.memberStore,
+      viewConfig: {
+        forceFit:true
+      },
+      tbar: [{
+        text: 'Add',
+        scope: this,
+        handler : function(){
+          var Member = this.memberStore.recordType;
+          var grid = Ext.getCmp('memberGrid');
+          grid.stopEditing();
+          this.memberStore.insert(0, new Member());
+          grid.startEditing(0, 0);
+        }
+      },{
+        text: 'Remove',
+        scope: this,
+        handler: function(){
+          var grid = Ext.getCmp('memberGrid');
+          var selected = grid.getSelectionModel().getSelected();
+          if ( selected ){
+            this.memberStore.remove(selected);
+          }
+        }
+      }]
     }];
+
     Ext.apply(this, Ext.apply(this.initialConfig, {items: items}));
     Sonia.group.FormPanel.superclass.initComponent.apply(this, arguments);
   }
@@ -105,4 +227,51 @@ Sonia.group.FormPanel = Ext.extend(Sonia.rest.FormPanel,{
 });
 
 // register xtype
-Ext.reg('groupFormPanel', Sonia.group.FormPanel);
+Ext.reg('groupFormPanel', Sonia.group.FormPanel);
+
+
+// RepositoryPanel
+Sonia.group.Panel = Ext.extend(Ext.Panel, {
+
+  initComponent: function(){
+    var config = {
+      layout: 'border',
+      hideMode: 'offsets',
+      bodyCssClass: 'x-panel-mc',
+      enableTabScroll: true,
+      region:'center',
+      autoScroll: true,
+      tbar: [
+        {xtype: 'tbbutton', text: 'Add', scope: this},
+        {xtype: 'tbbutton', id: 'removeButton', disabled: true, text: 'Remove', scope: this}
+      ],
+      items: [{
+          id: 'groupGrid',
+          xtype: 'groupGrid',
+          region: 'center'
+        }, {
+          id: 'groupEditPanel',
+          layout: 'fit',
+          items: [{
+            region: 'south',
+            title: 'Group Form',
+            xtype: 'panel',
+            padding: 5,
+            html: 'Add or select a Group'
+          }],
+          height: 250,
+          split: true,
+          border: false,
+          region: 'south'
+        }
+      ]
+    }
+
+    Ext.apply(this, Ext.apply(this.initialConfig, config));
+    Sonia.group.Panel.superclass.initComponent.apply(this, arguments);
+  }
+
+});
+
+// register xtype
+Ext.reg('groupPanel', Sonia.group.Panel);

scm-webapp/src/main/webapp/resources/js/sonia.scm.js

@@ -150,7 +150,7 @@ Ext.onReady(function(){
         },{
           label: 'Groups',
           fn: function(){
-            addTabPanel('groups', 'groupGrid', 'Groups');
+            addTabPanel('groups', 'groupPanel', 'Groups');
           }
         }]
       }]);