[Summary view] [Print] [Text view]

   1  /* global bpGroupManageMembersSettings, _, Backbone */
   2  /* @version 5.0.0 */
   3  
   4  ( function( wp, bp, $ ) {
   5  
   6      // Bail if not set
   7      if ( typeof bpGroupManageMembersSettings === 'undefined' ) {
   8          return;
   9      }
  10  
  11      // Copy useful WP Objects into BP.
  12      _.extend( bp, _.pick( wp, 'Backbone', 'template' ) );
  13  
  14      bp.Models      = bp.Models || {};
  15      bp.Collections = bp.Collections || {};
  16      bp.Views       = bp.Views || {};
  17  
  18      /**
  19       * Model for the Member of the displayed group.
  20       */
  21      bp.Models.groupMember = Backbone.Model.extend( {
  22          defaults: {
  23              id: 0,
  24              name: '',
  25              avatar_urls : {},
  26              is_admin: false,
  27              is_banned: false,
  28              is_confirmed: false,
  29              is_mod: false,
  30              link: ''
  31          },
  32          options : {
  33              path: bpGroupManageMembersSettings.path,
  34              type: 'POST',
  35              data: {},
  36              dataType: 'json'
  37          },
  38  
  39          initialize: function() {
  40              // Make sure to reset data & path on model's sync.
  41              this.on( 'sync', this.resetRequestOptions, this );
  42          },
  43  
  44          resetRequestOptions: function() {
  45              this.options.data = {};
  46              this.options.path = bpGroupManageMembersSettings.path;
  47          },
  48  
  49          sync: function( method, model, options ) {
  50              options  = options || {};
  51              options.context = this;
  52              var data = options.data || {};
  53              this.options.path = this.options.path.concat( '/' + model.get( 'id' ) );
  54  
  55              _.extend( options, this.options );
  56              _.extend( options.data, data );
  57  
  58              if ( 'delete' === method || 'update' === method ) {
  59                  if ( 'delete' === method ) {
  60                      options.headers = { 'X-HTTP-Method-Override': 'DELETE' };
  61                  } else {
  62                      options.headers = { 'X-HTTP-Method-Override': 'PUT' };
  63                  }
  64  
  65                  return wp.apiRequest( options );
  66              }
  67          },
  68  
  69          parse: function( response ) {
  70              if ( _.isArray( response ) ) {
  71                  response = _.first( response );
  72              }
  73  
  74              return response;
  75          }
  76      } );
  77  
  78      /**
  79       * Collection for the Members of the displayed group.
  80       */
  81      bp.Collections.groupMembers = Backbone.Collection.extend( {
  82          model: bp.Models.groupMember,
  83          options : {
  84              path: bpGroupManageMembersSettings.path,
  85              type: 'GET',
  86              data: {},
  87              dataType: 'json'
  88          },
  89  
  90          initialize: function() {
  91              // Make sure to reset data on collection's reset.
  92              this.on( 'reset', function() {
  93                  this.options.data = {};
  94              }, this );
  95          },
  96  
  97          sync: function( method, collection, options ) {
  98              options  = options || {};
  99              options.context = this;
 100              var data = options.data || {};
 101  
 102              _.extend( options, this.options );
 103              _.extend( options.data, data );
 104  
 105              if ( 'read' === method ) {
 106                  var self = this, success = options.success;
 107                  options.success = function( data, textStatus, request ) {
 108                      if ( ! _.isUndefined( request ) ) {
 109                          self.totalPages        = parseInt( request.getResponseHeader( 'X-WP-TotalPages' ), 10 );
 110                          self.totalGroupMembers = parseInt( request.getResponseHeader( 'X-WP-Total' ), 10 );
 111                      }
 112  
 113                      self.currentPage = options.data.page || 1;
 114  
 115                      if ( success ) {
 116                          return success.apply( this, arguments );
 117                      }
 118                  };
 119  
 120                  return wp.apiRequest( options );
 121              }
 122          }
 123      } );
 124  
 125      // Extend wp.Backbone.View with .prepare().
 126      bp.View = bp.View || bp.Backbone.View.extend( {
 127          prepare: function() {
 128              if ( ! _.isUndefined( this.model ) && _.isFunction( this.model.toJSON ) ) {
 129                  return this.model.toJSON();
 130              } else {
 131                  return {};
 132              }
 133          }
 134      } );
 135  
 136      bp.Views.GroupMemberUpdatingInfo = bp.View.extend( {
 137          tagName: 'p',
 138          template : bp.template( 'bp-manage-members-updating' ),
 139  
 140          initialize: function() {
 141              this.model = new Backbone.Model( {
 142                  type: this.options.value
 143              } );
 144          }
 145      } );
 146  
 147      bp.Views.GroupMemberErrorInfo = bp.View.extend( {
 148          tagName: 'p',
 149          template : bp.template( 'bp-manage-members-error' ),
 150  
 151          initialize: function() {
 152              this.model = new Backbone.Model( {
 153                  message: this.options.value
 154              } );
 155          }
 156      } );
 157  
 158      bp.Views.GroupsMembersLabel = bp.Views.GroupMemberUpdatingInfo.extend( {
 159          tagName: 'label',
 160          template:  bp.template( 'bp-manage-members-label' )
 161      } );
 162  
 163      bp.Views.GroupRolesDropDown = bp.View.extend( {
 164          tagName: 'select',
 165          filters: _.extend( { all: { name: bpGroupManageMembersSettings.strings.allMembers } }, bpGroupManageMembersSettings.roles ),
 166  
 167          events: {
 168              change: 'change'
 169          },
 170  
 171          initialize: function() {
 172              if ( this.options.omits ) {
 173                  this.filters = _.omit( this.filters, this.options.omits );
 174              }
 175  
 176              // Build `<option>` elements.
 177              this.$el.html( _.chain( this.filters ).map( function( filter, value ) {
 178                  var optionOutput = $( '<option></option>' ).val( value ).html( filter.name )[0];
 179  
 180                  if ( this.options.currentRole && value === this.options.currentRole ) {
 181                      return {
 182                          el: $( optionOutput ).prop( 'selected', true )
 183                      };
 184                  } else {
 185                      return {
 186                          el: optionOutput
 187                      };
 188                  }
 189              }, this ).pluck( 'el' ).value() );
 190          },
 191  
 192          change: function( event ) {
 193              var role =  $( event.target ).val(), queryArgs = { roles: [ role ] };
 194  
 195              if ( ! this.collection ) {
 196                  return;
 197              }
 198  
 199              if ( 'all' === role ) {
 200                  // Unset the current role.
 201                  this.collection.currentRole = '';
 202  
 203                  queryArgs = { 'exclude_admins': false };
 204              } else {
 205                  // Set the current role.
 206                  this.collection.currentRole = role;
 207              }
 208  
 209              // Reset the current page.
 210              this.collection.currentPage = 1;
 211  
 212              queryArgs.page = 1;
 213              $( '#manage-members-search' ).val( '' );
 214  
 215              this.collection.fetch( {
 216                  data: queryArgs,
 217                  reset: true
 218              } );
 219          }
 220      } );
 221  
 222      bp.Views.GroupMembersSearch = bp.View.extend( {
 223          className: 'bp-dir-search-form',
 224          tagName: 'form',
 225          template:  bp.template( 'bp-manage-members-search' ),
 226  
 227          events: {
 228              'click #manage-members-search-submit' : 'searchMember'
 229          },
 230  
 231          searchMember: function( event ) {
 232              event.preventDefault();
 233  
 234              var searchTerms = $( '#manage-members-search' ).val(),
 235                  queryArgs = _.extend( this.collection.options.data, { search: searchTerms, page: 1 } );
 236  
 237              // Reset the current page.
 238              this.collection.currentPage = 1;
 239  
 240              if ( ! this.collection.currentRole ) {
 241                  queryArgs.exclude_admins = false;
 242              } else {
 243                  queryArgs.roles = [ this.collection.currentRole ];
 244              }
 245  
 246              this.collection.fetch( {
 247                  data: queryArgs,
 248                  reset: true
 249              } );
 250          }
 251      } );
 252  
 253      bp.Views.GroupsMembersPagination = bp.View.extend( {
 254          className: 'bp-pagination',
 255          template:  bp.template( 'bp-manage-members-paginate' ),
 256  
 257          events: {
 258              'click .group-members-paginate-button' : 'queryPage'
 259          },
 260  
 261          initialize: function() {
 262              this.collection.on( 'reset', this.setPagination, this );
 263          },
 264  
 265          setPagination: function( collection ) {
 266              var attributes = _.pick( collection, [ 'currentPage', 'totalGroupMembers', 'totalPages' ] );
 267  
 268              if ( attributes.totalPages > 1 ) {
 269                  attributes.nextPage = attributes.currentPage + 1;
 270                  attributes.prevPage = attributes.currentPage - 1;
 271              }
 272  
 273              this.model = new Backbone.Model( attributes );
 274              this.render();
 275          },
 276  
 277          queryPage: function( event ) {
 278              event.preventDefault();
 279  
 280              var page = $( event.currentTarget ).data( 'page' ),
 281                  searchTerms = $( '#manage-members-search' ).val(),
 282                  queryArgs = _.extend( this.collection.options.data, { search: searchTerms, page: page } );
 283  
 284              if ( ! this.collection.currentRole ) {
 285                  queryArgs.exclude_admins = false;
 286              } else {
 287                  queryArgs.roles = [ this.collection.currentRole ];
 288              }
 289  
 290              this.collection.fetch( {
 291                  data: queryArgs,
 292                  reset: true
 293              } );
 294          }
 295      } );
 296  
 297      bp.Views.GroupMembersNoMatches = bp.View.extend( {
 298          tagName: 'tr',
 299          template : bp.template( 'bp-manage-members-empty-row' )
 300      } );
 301  
 302      bp.Views.GroupMembersListRow = bp.View.extend( {
 303          tagName: 'tr',
 304          template : bp.template( 'bp-manage-members-row' ),
 305  
 306          events: {
 307              'click .group-member-actions a' : 'doMemberAction',
 308              'change .group-member-edit select' : 'editMemberRole'
 309          },
 310  
 311          initialize: function() {
 312              var roleProps = [ 'is_admin', 'is_banned', 'is_confirmed', 'is_mod' ],
 313                  self = this;
 314  
 315              _.each( bpGroupManageMembersSettings.roles, function( props ) {
 316                  if ( _.isMatch( self.model.attributes,  _.pick( props, roleProps ) ) ) {
 317                      self.model.set( 'role', _.pick( props, ['id', 'name'] ), { silent: true } );
 318                  }
 319              } );
 320  
 321              this.model.collection.on( 'reset', this.clearRow, this );
 322          },
 323  
 324          clearRow: function() {
 325              this.views.view.remove();
 326          },
 327  
 328          renderEditForm: function() {
 329              var userId = this.model.get( 'id' );
 330  
 331              this.render();
 332  
 333              this.views.set( '#edit-group-member-' + userId, [
 334                  new bp.Views.GroupsMembersLabel( { value: userId, attributes: { 'for': 'group-member' + userId + '-role' } } ),
 335                  new bp.Views.GroupRolesDropDown( { id: 'group-member' + userId + '-role', omits: [ 'all', 'banned' ], currentRole: this.model.get( 'role' ).id } ).render()
 336              ] );
 337          },
 338  
 339          resetRow: function() {
 340              this.model.set( 'editing', false );
 341  
 342              return this.render();
 343          },
 344  
 345          getRoleObject: function( roleId ) {
 346              var roles = bpGroupManageMembersSettings.roles;
 347  
 348              if ( _.isUndefined( roles[ roleId ] ) ) {
 349                  return {};
 350              }
 351  
 352              return _.extend(
 353                  { role: _.pick( roles[ roleId ], ['id', 'name'] ) },
 354                  _.pick( roles[ roleId ], [ 'is_admin', 'is_banned', 'is_confirmed', 'is_mod' ] )
 355              );
 356          },
 357  
 358          doMemberAction: function( event ) {
 359              event.preventDefault();
 360  
 361              var action = $( event.target ).data( 'action' ), self = this;
 362  
 363              if ( 'edit' === action ) {
 364                  this.model.set( 'editing', true );
 365                  return this.renderEditForm();
 366  
 367              } else if ( 'abort' === action ) {
 368                  return this.resetRow();
 369  
 370              } else if ( 'ban' === action || 'unban' === action ) {
 371                  var newRole = ( 'ban' === action ) ? 'banned' : 'member', roleObject = this.getRoleObject( newRole );
 372  
 373                  if ( ! roleObject ) {
 374                      return this.resetRow();
 375                  } else {
 376                      this.model.set( 'managingBan', true );
 377                      this.render();
 378                  }
 379  
 380                  // Display user feedback.
 381                  this.views.set( '#edit-group-member-' + this.model.get( 'id' ), new bp.Views.GroupMemberUpdatingInfo( { value: action } ).render() );
 382  
 383                  // Update Group member's role.
 384                  this.model.save( roleObject, {
 385                      wait: true,
 386                      data: { action: action },
 387                      success: function( model) {
 388                          self.model.collection.remove( model );
 389                          return self.clearRow();
 390                      },
 391                      error: function( model, response ) {
 392                          self.views.set( '#edit-group-member-' + model.get( 'id' ), new bp.Views.GroupMemberErrorInfo( { value: response.responseJSON.message } ).render() );
 393  
 394                          // Make sure to reset request options.
 395                          model.resetRequestOptions();
 396                          model.set( 'managingBan', false );
 397                      }
 398                  } );
 399              } else if ( 'remove' === action ) {
 400                  this.model.set( 'removing', true );
 401                  this.render();
 402  
 403                  // Display user feedback.
 404                  this.views.set( '#edit-group-member-' + this.model.get( 'id' ), new bp.Views.GroupMemberUpdatingInfo( { value: action } ).render() );
 405  
 406                  // Destroy the membership model.
 407                  this.model.destroy( {
 408                      wait: true,
 409                      data: {},
 410                      success: function() {
 411                          return self.clearRow();
 412                      },
 413                      error: function( model, response ) {
 414                          self.views.set( '#edit-group-member-' + model.get( 'id' ), new bp.Views.GroupMemberErrorInfo( { value: response.responseJSON.message } ).render() );
 415  
 416                          // Make sure to reset request options.
 417                          model.resetRequestOptions();
 418                          model.set( 'removing', false );
 419                      }
 420                  } );
 421              }
 422          },
 423  
 424          editMemberRole: function( event ) {
 425              var newRole = $( event.target ).val(), roleObject = this.getRoleObject( newRole ),
 426                  currentRole = this.model.get( 'role').id, roleAction = 'promote', self = this;
 427  
 428              if ( newRole === this.model.get( 'role' ).id || ! roleObject ) {
 429                  return this.resetRow();
 430              }
 431  
 432              this.views.set( '#edit-group-member-' + this.model.get( 'id' ), new bp.Views.GroupMemberUpdatingInfo().render() );
 433  
 434              if ( 'admin' === currentRole || ( 'mod' === currentRole && 'member' === newRole ) ) {
 435                  roleAction = 'demote';
 436              }
 437  
 438              // Update Group member's role
 439              this.model.save( roleObject, {
 440                  wait: true,
 441                  data: {
 442                      action: roleAction,
 443                      role: newRole
 444                  },
 445                  success: function( model ) {
 446                      if ( self.model.collection.currentRole && newRole !== self.model.collection.currentRole ) {
 447                          self.model.collection.remove( model );
 448                          return self.clearRow();
 449                      } else {
 450                          return self.resetRow();
 451                      }
 452                  },
 453                  error: function( model, response ) {
 454                      self.views.set( '#edit-group-member-' + model.get( 'id' ), new bp.Views.GroupMemberErrorInfo( { value: response.responseJSON.message } ).render() );
 455  
 456                      // Make sure to reset request options.
 457                      model.resetRequestOptions();
 458                      model.set( 'editing', false );
 459                  }
 460              } );
 461          }
 462      } );
 463  
 464      bp.Views.GroupMembersListHeader = bp.View.extend( {
 465          tagName: 'thead',
 466          template : bp.template( 'bp-manage-members-header' )
 467      } );
 468  
 469      bp.Views.GroupMembersListTable = bp.View.extend( {
 470          tagName: 'tbody',
 471  
 472          initialize: function() {
 473              var preloaded = bpGroupManageMembersSettings.preloaded || {},
 474                  models = [];
 475  
 476              this.collection.on( 'reset', this.addListTableRows, this );
 477  
 478              if ( preloaded.body && preloaded.body.length > 0 ) {
 479                  _.each( preloaded.body, function( member ) {
 480                      models.push( new bp.Models.groupMember( member ) );
 481                  } );
 482  
 483                  this.collection.currentPage = 1;
 484                  if ( preloaded.headers && preloaded.headers[ 'X-WP-TotalPages' ] ) {
 485                      this.collection.totalPages = parseInt( preloaded.headers[ 'X-WP-TotalPages' ], 10 );
 486                  }
 487  
 488                  if ( preloaded.headers && preloaded.headers[ 'X-WP-Total' ] ) {
 489                      this.collection.totalGroupMembers = parseInt( preloaded.headers[ 'X-WP-Total' ], 10 );
 490                  }
 491  
 492                  this.collection.reset( models );
 493              } else {
 494                  this.collection.fetch( {
 495                      data: { 'exclude_admins': false },
 496                      reset: true
 497                  } );
 498              }
 499          },
 500  
 501          addListTableRows: function( collection ) {
 502              if ( this.views._views ) {
 503                  var noMembersRow = _.findWhere( this.views._views[''] , { id: 'bp-no-group-members' } );
 504  
 505                  if ( noMembersRow ) {
 506                      noMembersRow.remove();
 507                  }
 508              }
 509  
 510              if ( ! collection.length ) {
 511                  this.views.add( new bp.Views.GroupMembersNoMatches( { id: 'bp-no-group-members' } ) );
 512              } else {
 513                  _.each( collection.models, function( member ) {
 514                      this.views.add( new bp.Views.GroupMembersListRow( { model: member } ) );
 515                  }, this );
 516              }
 517          }
 518      } );
 519  
 520      bp.Views.GroupMembersUI = bp.View.extend( {
 521          className: 'group-members',
 522  
 523          initialize: function() {
 524              var groupMembers = new bp.Collections.groupMembers();
 525  
 526              // Set filters.
 527              this.views.set( '#group-roles-filter', [
 528                  new bp.Views.GroupsMembersLabel( { attributes: { 'for': 'group-members-role-filter' } } ),
 529                  new bp.Views.GroupRolesDropDown( { id: 'group-members-role-filter', collection: groupMembers } )
 530              ] );
 531  
 532              // Set the search form.
 533              this.views.set( '#group-members-search-form', new bp.Views.GroupMembersSearch( { id: 'group-members-search', collection: groupMembers } ) );
 534  
 535              // Set Paginate links.
 536              this.views.set( '#group-members-pagination', new bp.Views.GroupsMembersPagination( { collection: groupMembers } ) );
 537  
 538              // Set Group members list header and body.
 539              this.views.set( '#group-members-list-table', [
 540                  new bp.Views.GroupMembersListHeader(),
 541                  new bp.Views.GroupMembersListTable( { collection: groupMembers } )
 542              ] );
 543          }
 544      } );
 545  
 546      // Inject the UI to manage Group Members into the DOM.
 547      bp.manageGroupMembersUI = new bp.Views.GroupMembersUI( { el:'#group-manage-members-ui' } ).render();
 548  
 549  } )( window.wp || {}, window.bp || {}, jQuery );