use tabs for repository details

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

@@ -50,10 +50,13 @@ Sonia.repository.isOwner = function(repository){
   return admin || repository.permissions != null;
 }
 
-Sonia.repository.setEditPanel = function(panel){
+Sonia.repository.setEditPanel = function(panels){
   var editPanel = Ext.getCmp('repositoryEditPanel');
   editPanel.removeAll();
+  Ext.each(panels, function(panel){
     editPanel.add(panel);
+  });
+  editPanel.setActiveTab(0);
   editPanel.doLayout();
 }
 
@@ -68,6 +71,7 @@ Sonia.repository.DefaultPanel = {
   title: 'Repository Form',
   padding: 5,
   xtype: 'panel',
+  bodyCssClass: 'x-panel-mc',
   html: 'Add or select an Repository'
 }
 
@@ -76,6 +80,7 @@ Sonia.repository.NoPermissionPanel = {
   title: 'Repository Form',
   padding: 5,
   xtype: 'panel',
+  bodyCssClass: 'x-panel-mc',
   html: 'No permission to modify this repository'
 }
 
@@ -139,15 +144,13 @@ Sonia.repository.Grid = Ext.extend(Sonia.rest.Grid, {
       console.debug( item.name + ' selected' );
     }
 
-    var panel = null;
+    var panels = null;
     
     if ( Sonia.repository.isOwner(item) ){
       Ext.getCmp('repoRmButton').setDisabled(false);
-      panel = new Sonia.repository.FormPanel({
+      panels = [{
         item: item,
-        region: 'south',
+        xtype: 'repositoryPropertiesForm',
-        title: this.formTitleText,
-        padding: 5,
         onUpdate: {
           fn: this.reload,
           scope: this
@@ -156,12 +159,23 @@ Sonia.repository.Grid = Ext.extend(Sonia.rest.Grid, {
           fn: this.reload,
           scope: this
         }
-      });
+      },{
+        item: item,
+        xtype: 'repositoryPermissionsForm',
+        onUpdate: {
+          fn: this.reload,
+          scope: this
+        },
+        onCreate: {
+          fn: this.reload,
+          scope: this
+        }
+      }];
     } else {
       Ext.getCmp('repoRmButton').setDisabled(true);
-      panel = Sonia.repository.NoPermissionPanel;
+      panels = Sonia.repository.NoPermissionPanel;
     }
-    Sonia.repository.setEditPanel(panel);
+    Sonia.repository.setEditPanel(panels);
   },
 
   renderRepositoryType: function(repositoryType){
@@ -202,12 +216,180 @@ Sonia.repository.FormPanel = Ext.extend(Sonia.rest.FormPanel,{
   Permissions explenation:<br /><b>READ</b> = read<br /><b>WRITE</b> = read and write<br />\n\
   <b>OWNER</b> = read, write and also the ability to manage the properties and permissions',
 
+  initComponent: function(){
+    Sonia.repository.FormPanel.superclass.initComponent.apply(this, arguments);
+  },
+
+  update: function(item){
+    item = Ext.apply( this.item, item );
+    if ( debug ){
+      console.debug( 'update repository: ' + item.name );
+    }
+    var url = restUrl + 'repositories/' + item.id + '.json';
+    var el = this.el;
+    var tid = setTimeout( function(){el.mask('Loading ...');}, 100);
+
+    // this.updatePermissions(item);
+
+    Ext.Ajax.request({
+      url: url,
+      jsonData: item,
+      method: 'PUT',
+      scope: this,
+      success: function(){
+        if ( debug ){
+          console.debug('update success');
+        }
+        // this.clearModifications();
+        clearTimeout(tid);
+        el.unmask();
+        this.execCallback(this.onUpdate, item);
+      },
+      failure: function(){
+        clearTimeout(tid);
+        el.unmask();
+        Ext.MessageBox.show({
+          title: this.errorTitleText,
+          msg: this.updateErrorMsgText,
+          buttons: Ext.MessageBox.OK,
+          icon:Ext.MessageBox.ERROR
+        });
+      }
+    });
+  },
+
+  create: function(item){
+    if ( debug ){
+      console.debug( 'create repository: ' + item.name );
+    }
+    var url = restUrl + 'repositories.json';
+    var el = this.el;
+    var tid = setTimeout( function(){el.mask('Loading ...');}, 100);
+    
+    // this.updatePermissions(item);
+
+    Ext.Ajax.request({
+      url: url,
+      jsonData: item,
+      method: 'POST',
+      scope: this,
+      success: function(){
+        if ( debug ){
+          console.debug('create success');
+        }
+        // this.permissionStore.removeAll();
+        this.getForm().reset();
+        clearTimeout(tid);
+        el.unmask();
+        this.execCallback(this.onCreate, item);
+      },
+      failure: function(){
+        clearTimeout(tid);
+        el.unmask();
+        Ext.MessageBox.show({
+          title: this.errorTitleText,
+          msg: this.createErrorMsgText,
+          buttons: Ext.MessageBox.OK,
+          icon:Ext.MessageBox.ERROR
+        });
+      }
+    });
+  },
+
+  cancel: function(){
+    if ( debug ){
+      console.debug( 'cancel form' );
+    }
+    Sonia.repository.setEditPanel( Sonia.repository.DefaultPanel );
+  }
+
+});
+
+// register xtype
+Ext.reg('repositoryForm', Sonia.repository.FormPanel);
+
+
+Sonia.repository.PropertiesFormPanel = Ext.extend(Sonia.repository.FormPanel, {
+
+  initComponent: function(){
+    var update = this.item != null;
+
+    var config = {
+      title: this.formTitleText,
+      items: [{
+        id: 'repositoryName',
+        fieldLabel: this.nameText,
+        name: 'name',
+        readOnly: update,
+        allowBlank: false,
+        helpText: this.nameHelpText
+      },{
+       fieldLabel: this.typeText,
+       name: 'type',
+       xtype: 'combo',
+       readOnly: update,
+       hiddenName : 'type',
+       typeAhead: true,
+       triggerAction: 'all',
+       lazyRender: true,
+       mode: 'local',
+       editable: false,
+       store: repositoryTypeStore,
+       valueField: 'name',
+       displayField: 'displayName',
+       allowBlank: false,
+       helpText: this.typeHelpText
+      },{
+        fieldLabel: this.contactText,
+        name: 'contact',
+        vtype: 'email',
+        helpText: this.contactHelpText
+      },{
+        fieldLabel: this.descriptionText,
+        name: 'description',
+        xtype: 'textarea',
+        helpText: this.descriptionHelpText
+      },{
+        fieldLabel: this.publicText,
+        name: 'public',
+        xtype: 'checkbox',
+        helpText: this.publicHelpText
+      },
+      // TODO remove
+      {
+        fieldLabel: 'ChangesetViewer',
+        text: 'ChangesetViewer',
+        xtype: 'button',
+        scope: this,
+        handler: function(){
+          var changesetViewer = {
+            id: this.item.id + '-changesetViewer',
+            title: 'ChangesetViewer ' + this.item.name,
+            repository: this.item,
+            xtype: 'repositoryChangesetViewerPanel',
+            closable: true,
+            autoScroll: true
+          }
+          main.addTab(changesetViewer);
+        }
+      }]
+    };
+
+    Ext.apply(this, Ext.apply(this.initialConfig, config));
+    Sonia.repository.PropertiesFormPanel.superclass.initComponent.apply(this, arguments);
+  }
+
+});
+
+// register xtype
+Ext.reg('repositoryPropertiesForm', Sonia.repository.PropertiesFormPanel);
+
+
+Sonia.repository.PermissionFormPanel = Ext.extend(Sonia.repository.FormPanel, {
+
   permissionStore: null,
 
   initComponent: function(){
-
-    update = this.item != null;
-
     var permissionStore = new Ext.data.JsonStore({
       root: 'permissions',
       fields: [
@@ -290,7 +472,7 @@ Sonia.repository.FormPanel = Ext.extend(Sonia.rest.FormPanel,{
         }
     });
 
-    if ( update ){
+    if ( this.item != null ){
       if ( this.item.permissions == null ){
         this.item.permissions = [];
       }
@@ -302,76 +484,9 @@ Sonia.repository.FormPanel = Ext.extend(Sonia.rest.FormPanel,{
     });
 
     var config = {
+      // TODO i18n
+      title: 'Permissions',
       items:[{
-        xtype : 'fieldset',
-        checkboxToggle : false,
-        title : this.formTitleText,
-        collapsible : true,
-        autoHeight : true,
-        autoWidth: true,
-        autoScroll: true,
-        defaults: {width: 240},
-        defaultType: 'textfield',
-        buttonAlign: 'center',
-        items: [{
-            id: 'repositoryName',
-            fieldLabel: this.nameText,
-            name: 'name',
-            readOnly: update,
-            allowBlank: false,
-            helpText: this.nameHelpText
-          },{
-           fieldLabel: this.typeText,
-           name: 'type',
-           xtype: 'combo',
-           readOnly: update,
-           hiddenName : 'type',
-           typeAhead: true,
-           triggerAction: 'all',
-           lazyRender: true,
-           mode: 'local',
-           editable: false,
-           store: repositoryTypeStore,
-           valueField: 'name',
-           displayField: 'displayName',
-           allowBlank: false,
-           helpText: this.typeHelpText
-          },{
-            fieldLabel: this.contactText,
-            name: 'contact',
-            vtype: 'email',
-            helpText: this.contactHelpText
-          },{
-            fieldLabel: this.descriptionText,
-            name: 'description',
-            xtype: 'textarea',
-            helpText: this.descriptionHelpText
-          },{
-            fieldLabel: this.publicText,
-            name: 'public',
-            xtype: 'checkbox',
-            helpText: this.publicHelpText
-          },
-          // TODO remove
-          {
-            fieldLabel: 'ChangesetViewer',
-            text: 'ChangesetViewer',
-            xtype: 'button',
-            scope: this,
-            handler: function(){
-              var changesetViewer = {
-                id: this.item.id + '-changesetViewer',
-                title: 'ChangesetViewer ' + this.item.name,
-                repository: this.item,
-                xtype: 'repositoryChangesetViewerPanel',
-                closable: true,
-                autoScroll: true
-              }
-              main.addTab(changesetViewer);
-            }
-          }
-        ]
-      },{
         id: 'permissionGrid',
         xtype: 'editorgrid',
         title: this.permissionsText,
@@ -423,12 +538,12 @@ Sonia.repository.FormPanel = Ext.extend(Sonia.rest.FormPanel,{
     };
 
     Ext.apply(this, Ext.apply(this.initialConfig, config));
-    Sonia.repository.FormPanel.superclass.initComponent.apply(this, arguments);
+    Sonia.repository.PermissionFormPanel.superclass.initComponent.apply(this, arguments);
   },
   
   afterRender: function(){
     // call super
-    Sonia.repository.FormPanel.superclass.afterRender.apply(this, arguments);
+    Sonia.repository.PermissionFormPanel.superclass.afterRender.apply(this, arguments);
 
     Ext.QuickTips.register({
       target: Ext.getCmp('permissionGridHelp'),
@@ -451,92 +566,14 @@ Sonia.repository.FormPanel = Ext.extend(Sonia.rest.FormPanel,{
   },
 
   update: function(item){
-    item = Ext.apply( this.item, item );
-    if ( debug ){
-      console.debug( 'update repository: ' + item.name );
-    }
-    var url = restUrl + 'repositories/' + item.id + '.json';
-    var el = this.el;
-    var tid = setTimeout( function(){el.mask('Loading ...');}, 100);
-
     this.updatePermissions(item);
-
+    // call super
-    Ext.Ajax.request({
+    Sonia.repository.PermissionFormPanel.superclass.update.apply(this, arguments);
-      url: url,
-      jsonData: item,
-      method: 'PUT',
-      scope: this,
-      success: function(){
-        if ( debug ){
-          console.debug('update success');
-        }
-        this.clearModifications();
-        clearTimeout(tid);
-        el.unmask();
-        this.execCallback(this.onUpdate, item);
-      },
-      failure: function(){
-        clearTimeout(tid);
-        el.unmask();
-        Ext.MessageBox.show({
-          title: this.errorTitleText,
-          msg: this.updateErrorMsgText,
-          buttons: Ext.MessageBox.OK,
-          icon:Ext.MessageBox.ERROR
-        });
-      }
-    });
-  },
-
-  create: function(item){
-    if ( debug ){
-      console.debug( 'create repository: ' + item.name );
-    }
-    var url = restUrl + 'repositories.json';
-    var el = this.el;
-    var tid = setTimeout( function(){el.mask('Loading ...');}, 100);
-    
-    this.updatePermissions(item);
-
-    Ext.Ajax.request({
-      url: url,
-      jsonData: item,
-      method: 'POST',
-      scope: this,
-      success: function(){
-        if ( debug ){
-          console.debug('create success');
-        }
-        this.permissionStore.removeAll();
-        this.getForm().reset();
-        clearTimeout(tid);
-        el.unmask();
-        this.execCallback(this.onCreate, item);
-      },
-      failure: function(){
-        clearTimeout(tid);
-        el.unmask();
-        Ext.MessageBox.show({
-          title: this.errorTitleText,
-          msg: this.createErrorMsgText,
-          buttons: Ext.MessageBox.OK,
-          icon:Ext.MessageBox.ERROR
-        });
-      }
-    });
-  },
-
-  cancel: function(){
-    if ( debug ){
-      console.debug( 'cancel form' );
-    }
-    Sonia.repository.setEditPanel( Sonia.repository.DefaultPanel );
   }
 
 });
 
-// register xtype
+Ext.reg('repositoryPermissionsForm', Sonia.repository.PermissionFormPanel);
-Ext.reg('repositoryForm', Sonia.repository.FormPanel);
 
 // RepositoryPanel
 Sonia.repository.Panel = Ext.extend(Ext.Panel, {
@@ -568,7 +605,6 @@ Sonia.repository.Panel = Ext.extend(Ext.Panel, {
     var config = {
       layout: 'border',
       hideMode: 'offsets',
-      bodyCssClass: 'x-panel-mc',
       enableTabScroll: true,
       region:'center',
       autoScroll: true,
@@ -579,18 +615,18 @@ Sonia.repository.Panel = Ext.extend(Ext.Panel, {
           region: 'center'
         }, {
           id: 'repositoryEditPanel',
-          layout: 'fit',
+          xtype: 'tabpanel',
-          items: [{
+          activeTab: 0,
-            region: 'south',
-            title: this.titleText,
-            xtype: 'panel',
-            padding: 5,
-            html: this.emptyText
-          }],
           height: 250,
           split: true,
-          border: false,
+          border: true,
-          region: 'south'
+          region: 'south',
+          items: [{
+            bodyCssClass: 'x-panel-mc',
+            title: this.titleText,
+            padding: 5,
+            html: this.emptyText
+          }]
         }
       ]
     }
@@ -652,10 +688,8 @@ Sonia.repository.Panel = Ext.extend(Ext.Panel, {
 
   showAddForm: function(){
     Ext.getCmp('repoRmButton').setDisabled(true);
-    var panel = new Sonia.repository.FormPanel({
+    Sonia.repository.setEditPanel([{
-      region: 'south',
+      xtype: 'repositoryPropertiesForm',
-      title: this.titleText,
-      padding: 5,
       onUpdate: {
         fn: this.reload,
         scope: this
@@ -664,8 +698,7 @@ Sonia.repository.Panel = Ext.extend(Ext.Panel, {
         fn: this.reload,
         scope: this
       }
-    });
+    }]);
-    Sonia.repository.setEditPanel(panel);
   },
 
   reload: function(){

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

@@ -169,6 +169,7 @@ Sonia.rest.FormPanel = Ext.extend(Ext.FormPanel,{
 
   initComponent: function(){
     var config = {
+      bodyCssClass: 'x-panel-mc',
       padding: 5,
       labelWidth: 100,
       defaults: {width: 240},
@@ -176,6 +177,9 @@ Sonia.rest.FormPanel = Ext.extend(Ext.FormPanel,{
       monitorValid: true,
       defaultType: 'textfield',
       buttonAlign: 'center',
+      footerCfg: {
+        cls: 'x-panel-mc'
+      },
       buttons: [
         {text: this.okText, formBind: true, scope: this, handler: this.submit},
         {text: this.cancelText, scope: this, handler: this.cancel}