added extjs ui

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

@@ -0,0 +1,363 @@
+/* 
+ * To change this template, choose Tools | Templates
+ * and open the template in the editor.
+ */
+
+Ext.ns('Sonia.group');
+
+var addGroupWindow = null;
+
+/** Sonia.GroupGrid **/
+function addGroup(){
+  console.debug( 'add group' );
+  addGroupWindow = new Sonia.group.DetailWindow();
+  addGroupWindow.show();
+}
+
+function removeGroup(){
+  if (groupSelModel.hasSelection()){
+    var group = groupSelModel.getSelected().data.name;
+    console.debug( 'remove group ' + group );
+
+    Ext.MessageBox.show({
+      title: "Remove Group",
+      msg: "Remove Group '" + group + "'?",
+      buttons: Ext.MessageBox.OKCANCEL,
+      icon: Ext.MessageBox.QUESTION,
+      fn: function(result){
+        if ( result == "ok" ){
+          Ext.Ajax.request({
+            url: 'api/rest/groups/' + group + ".json",
+            method: 'DELETE',
+            success: function(){
+              groupStore.reload();
+            },
+            failure: function(){
+              alert("ERROR!!!")
+            }
+          });
+        }
+      }
+    });
+  }
+}
+
+function editGroup(){
+  if (groupSelModel.hasSelection()){
+    var group = groupSelModel.getSelected().data;
+
+    var store = new Ext.data.ArrayStore({
+      fields: [ 'name' ]
+    });
+
+    Ext.each(group.members, function(g,i){
+      store.add( [new Ext.data.Record( {name: g} )] );
+    });
+
+    var groupForm = new Sonia.group.AddForm({
+      name: group.name,
+      update: true,
+      store: store
+    });
+    
+    var win = new Sonia.group.DetailWindow({
+      form: groupForm
+    });
+    win.show();
+  }
+}
+
+var groupToolbar = new Ext.Toolbar({
+  items: [
+    {xtype: 'tbbutton', text: 'Add', handler: addGroup},
+    {xtype: 'tbbutton', text: 'Edit', handler: editGroup},
+    {xtype: 'tbbutton', text: 'Remove', handler: removeGroup},
+    {xtype: 'tbseparator'},
+    {xtype: 'label', text: 'Search: '},
+    {xtype: 'textfield', id: 'searchfield', listeners: {
+      specialkey: function(field, e){
+        if (e.getKey() == e.ENTER) {
+          var value = this.getValue();
+          console.log( "Filter: " + value );
+          // TODO filter by member
+          groupStore.filter('name', new RegExp('.*' + value + '.*'));
+        }
+      }
+    }}
+  ]
+});
+
+var groupColModel = new Ext.grid.ColumnModel({
+  columns: [
+    {header: 'Name', sortable: true, width: 200, dataIndex: 'name'},
+    {header: 'Members', sortable: true, dataIndex: 'members'}
+  ]
+});
+
+var groupSelModel = new Ext.grid.RowSelectionModel({
+  singleSelect: true
+});
+
+var groupStore = new Ext.data.JsonStore({
+  url: 'api/rest/groups.json',
+  root: 'groups',
+  fields: [
+    'name', "members"
+  ],
+  sortInfo: {
+    field: 'name'
+  }
+});
+
+groupStore.load();
+
+Sonia.GroupGrid = Ext.extend(Ext.grid.GridPanel, {
+  initComponent: function(){
+    var config = {
+      store: groupStore,
+      colModel: groupColModel,
+      selModel: groupSelModel,
+      tbar: groupToolbar,
+      viewConfig: {
+        forceFit: true
+      },
+      loadMask: true,
+      listeners: {
+        celldblclick: editGroup
+      }
+    };
+
+    Ext.apply(this, Ext.apply(this.initialConfig, config));
+    Sonia.GroupGrid.superclass.initComponent.apply(this, arguments);
+  }
+});
+
+Ext.reg('groupGrid', Sonia.GroupGrid);
+
+Sonia.group.AddForm = new Ext.extend(Ext.FormPanel, {
+
+  containerWindow: null,
+  store: null,
+  name: '',
+  update: false,
+
+  initComponent: function(){
+    if ( this.store == null ){
+      this.store = new Ext.data.ArrayStore({
+        fields: [ 'name' ]
+      });
+    }
+
+    this.update = this.name != '';
+
+    var config = {
+      labelWidth: 80,
+      autoHeight: true,
+      //url: null,
+      frame: true,
+      title: 'Add Group',
+      defaultType:'textfield',
+      monitorValid: true,
+      items:[{
+        fieldLabel:'Name',
+        name:'name',
+        focus: ! this.update,
+        value: this.name,
+        readOnly: this.update,
+        anchor: '100%',
+        allowBlank: false
+      },{
+        fieldLabel: 'Members',
+        xtype: 'fieldset',
+        items: [{
+          id: 'addMembersView',
+          name: 'members',
+          xtype: 'listview',
+          columnResize: false,
+          multiSelect: true,
+          hideHeaders: true,
+          store: this.store,
+          columns: [{
+            xtype: 'lvcolumn',
+            header: 'Member',
+            dataIndex: 'name'
+          }]
+        }]
+      },{
+        fieldLabel: 'Add Member',
+        xtype: 'compositefield',
+        items: [{
+          id: 'addMemberField',
+          name: 'addMember',
+          width: '60%',
+          xtype: 'textfield',
+          scope: this,
+          listeners: {
+            specialkey: {
+              fn: function(field, e){
+                if (e.getKey() == e.ENTER) {
+                  this.addMember();
+                }
+              },
+              scope: this
+            }
+          }
+        },{
+          xtype: 'button',
+          text: 'Add',
+          scope: this,
+          handler: this.addMember
+        },{
+          xtype: 'button',
+          text: 'Del',
+          scope: this,
+          handler: this.removeSelectedMember
+        }]
+      }],
+
+      buttons:[{
+        text:'Ok',
+        scope: this,
+        formBind: true,
+        handler: this.submit
+      },{
+        text: 'Cancel',
+        scope: this,
+        handler: this.close
+      }]
+    };
+
+    Ext.apply(this, Ext.apply(this.initialConfig, config));
+    Sonia.group.AddForm.superclass.initComponent.apply(this, arguments);
+  },
+
+  addMemberBySpecialKey: function(field, e){
+    if (e.getKey() == e.ENTER) {
+      addMember();
+    }
+  },
+
+  addMember: function(){
+    var field = Ext.getCmp('addMemberField');
+    var value = field.getValue();
+    if ( value != '' ){
+      this.store.add( [ new Ext.data.Record( {name: value}) ] );
+      field.setValue('');
+    }
+  },
+
+  removeSelectedMember: function(){
+    var list = Ext.getCmp('addMembersView');
+    var nodes = list.getSelectedIndexes();
+    if ( nodes != null ){
+      Ext.each(nodes, function(data, index){
+        this.store.removeAt(data);
+      }, this);
+    }
+  },
+
+  submit: function(){
+    var containerWindow = this.containerWindow;
+    var form = this.getForm();
+    var memberArray = [];
+    this.store.each(function(data){
+      memberArray.push( data.get('name') );
+    });
+
+    var name = form.findField('name').getValue();
+    var group = { name: name, members: memberArray }
+
+    var url = null;
+    if ( this.update ){
+      url = "api/rest/groups/" + this.name + ".json";
+    } else {
+      url = "api/rest/groups.json";
+    }
+
+    Ext.Ajax.request({
+      url: url,
+      jsonData: group,
+      method: this.update ? "PUT" : "POST",
+      success: function(){
+        // TODO make this in a nice way
+        groupStore.reload();
+
+        if ( containerWindow ){
+          containerWindow.close();
+        }
+      },
+      failure: function(){
+        alert( "failure" );
+      }
+    });
+
+
+    /*form.submit({
+      params: {
+        members: memberArray
+      },
+      method: this.update ? "PUT" : "POST",
+      waitTitle:'Connecting',
+      waitMsg:'Sending data...',
+      success: function(){
+        // TODO make this in a nice way
+        groupStore.reload();
+
+        if ( containerWindow ){
+          containerWindow.close();
+        }
+      },
+      failure: function(){
+        alert( "failure" );
+      }
+    });*/
+  },
+
+  close: function(){
+    if ( this.containerWindow ){
+      this.containerWindow.close();
+    }
+  },
+
+  load : function(data){
+    this.store.loadData( data );
+  }
+  
+});
+
+Ext.reg('groupAddForm', Sonia.group.AddForm);
+
+Sonia.group.DetailWindow = Ext.extend(Ext.Window, {
+
+  form: null,
+
+  initComponent: function(){
+    var config = {
+      layout:'fit',
+      width:300,
+      autoScroll: true,
+      closable: false,
+      resizable: false,
+      plain: true,
+      border: false,
+      modal: true
+    };
+
+    var win = this;
+    if ( this.form != null ){
+      this.form.containerWindow = win;
+      config.items = [ this.form ];
+    } else {
+      config.items = [{
+        xtype: 'groupAddForm',
+        containerWindow: win
+      }];
+    }
+
+    Ext.apply(this, Ext.apply(this.initialConfig, config));
+    Sonia.group.DetailWindow.superclass.initComponent.apply(this, arguments);
+  }
+
+});
+
+Ext.reg('groupDetailWindow', Sonia.group.DetailWindow);