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

/* 
 * 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(){
  addGroupWindow = new Sonia.group.DetailWindow();
  addGroupWindow.show();
}

function removeGroup(){
  if (groupSelModel.hasSelection()){
    var group = groupSelModel.getSelected().data.name;

    if ( debug ){
      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: restUrl + '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();
          if ( debug ){
            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 Sonia.rest.JsonStore({
  url: restUrl + 'groups.json',
  root: 'groups',
  fields: [
    'name', 'members'
  ],
  sortInfo: {
    field: 'name'
  }
});

//groupStore.load();

Sonia.group.Grid = 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
      }
    };

    groupStore.load();

    Ext.apply(this, Ext.apply(this.initialConfig, config));
    Sonia.group.Grid.superclass.initComponent.apply(this, arguments);
  }
});

Ext.reg('groupGrid', Sonia.group.Grid);

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 = restUrl + 'groups/' + this.name + '.json';
    } else {
      url = restUrl + 'groups.json';
    }

    if ( debug ){
      var action = this.update ? 'edit' : 'add';
      console.debug( action + ' group ' + name );
    }

    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' );
      }
    });

  },

  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);