integration from clubs to teams

Author: PaulL1

app/controllers/teams_controller.rb

@@ -7,7 +7,7 @@ class TeamsController < ApplicationController
   # GET /teams
   # GET /teams.json
   def index
-    @teams = Team.all
+    @teams = Team.joins('LEFT OUTER JOIN clubs on teams.club_id = clubs.id').select('teams.*, clubs.name as club_name')
     render_with_protection @teams
   end
 

src/app/club/club.js

@@ -46,7 +46,8 @@ angular.module( 'league.club', [
       {field: 'name', displayName: 'Club Name'},
       {field: 'contact_officer', displayName: 'Contact Officer'},
       {displayName: 'Edit', cellTemplate: '<button id="editBtn" type="button" class="btn-small" ng-click="editClub(row.entity)" >Edit</button> '},
-      {displayName: 'Delete', cellTemplate: '<button id="deleteBtn" type="button" class="btn-small" ng-click="deleteClub(row.entity)" >Delete</button> '}
+      {displayName: 'Delete', cellTemplate: '<button id="deleteBtn" type="button" class="btn-small" ng-click="deleteClub(row.entity)" >Delete</button> '},
+      {displayName: 'Show Teams', cellTemplate: '<button id="showBtn" type="button" class="btn-small" ng-click="showTeams(row.entity)" >Show Teams</button> '}
     ],
     multiSelect: false
   };
@@ -66,6 +67,10 @@ angular.module( 'league.club', [
   $scope.newClub = function() {
     $state.transitionTo('club');
   };
+  
+  $scope.showTeams = function(club) {
+    $state.transitionTo('teams', {clubId: club.id});
+  };  
 
 })
 

src/app/team/team.js

@@ -3,6 +3,7 @@
  */
 angular.module( 'league.team', [
   'ui.state',
+  'league.club',
   'ngResource',
   'ngGrid'
 ])
@@ -12,7 +13,7 @@ angular.module( 'league.team', [
  */
 .config(function config( $stateProvider ) {
   $stateProvider.state( 'teams', {
-    url: '/teams',
+    url: '/teams?clubId',
     views: {
       "main": {
         controller: 'TeamsCtrl',
@@ -37,18 +38,37 @@ angular.module( 'league.team', [
 /**
  * And of course we define a controller for our route.
  */
-.controller( 'TeamsCtrl', function TeamsController( $scope, TeamRes, $state ) {
+.controller( 'TeamsCtrl', function TeamsController( $scope, TeamRes, $state, $stateParams ) {
   $scope.teams = TeamRes.query();
+
+  $scope.clubId = $stateParams.clubId;
+
+  if($scope.clubId) {
+    $scope.filterOptions = {
+      filterText: 'club_id:' + $scope.clubId
+    };
+  }
+  else {
+    $scope.filterOptions = {
+      filterText: ''
+    };
+  }
+
   $scope.gridOptions = {
     data: 'teams',
     columnDefs: [
       {field: 'id', displayName: 'Id'},
+      {field: 'club_id', displayName: 'Club Id', visible: false},
+      {field: 'club_name', displayName: 'Club Name'},
       {field: 'name', displayName: 'Team Name'},
       {field: 'captain', displayName: 'Captain'},
+      {field: 'date_created', displayName: 'Date Created', cellFilter: "date:mediumDate"},
       {displayName: 'Edit', cellTemplate: '<button id="editBtn" type="button" class="btn-small" ng-click="editTeam(row.entity)" >Edit</button> '},
       {displayName: 'Delete', cellTemplate: '<button id="deleteBtn" type="button" class="btn-small" ng-click="deleteTeam(row.entity)" >Delete</button> '}
     ],
-    multiSelect: false
+    multiSelect: false,
+    filterOptions: $scope.filterOptions,
+    showColumnMenu: true    
   };
 
   $scope.editTeam = function(team) {
@@ -69,15 +89,16 @@ angular.module( 'league.team', [
 
 })
 
-.controller('TeamCtrl', function TeamController( $scope, TeamRes, $state, $stateParams ) {
+.controller('TeamCtrl', function TeamController( $scope, TeamRes, ClubRes, $state, $stateParams ) {
   $scope.teamId = parseInt($stateParams.teamId, 10);
 
   if ($scope.teamId) {
     $scope.team = TeamRes.get({id: $scope.teamId});
   } else {
     $scope.team = new TeamRes();
   }  
-
+  $scope.clubs = ClubRes.query();
+  
   $scope.submit = function() {
     if ($scope.teamId) {
       $scope.team.$update(function(response) {

src/app/team/team.spec.js

@@ -111,6 +111,7 @@ describe( 'Team functionality', function() {
         expect(scope.teamId).toEqual(2);
 
         scope.httpBackend.expectGET('../teams/2.json').respond({"captain":"Captain 2","created_at":"2012-02-02T00:00:00Z","date_created":"2012-01-01T00:00:00Z","id":2,"name":"Team 2","updated_at":"2012-03-03T00:00:00Z"});
+        scope.httpBackend.expect('GET', '../clubs.json').respond([]);
 
         scope.$digest();  
         scope.httpBackend.flush();
@@ -122,6 +123,10 @@ describe( 'Team functionality', function() {
         scope.fakeStateParams.teamId = null;
 
         $controller('TeamCtrl', { $scope: scope, $stateParams: scope.fakeStateParams });
+        scope.httpBackend.expect('GET', '../clubs.json').respond([]);
+
+        scope.$digest();  
+        scope.httpBackend.flush();
         expect(scope.teamId).toBeNaN();
       }));             
     });
@@ -132,6 +137,7 @@ describe( 'Team functionality', function() {
 
         // The initial render triggers a get, drain that before we start the test proper
         scope.httpBackend.expectGET('../teams/2.json').respond({"captain":"Captain 2","created_at":"2012-02-02T00:00:00Z","date_created":"2012-01-01T00:00:00Z","id":2,"name":"Team 2","updated_at":"2012-03-03T00:00:00Z"});
+        scope.httpBackend.expect('GET', '../clubs.json').respond([]);
 
         scope.$digest();
         scope.httpBackend.flush();
@@ -167,6 +173,10 @@ describe( 'Team functionality', function() {
       beforeEach(angular.mock.inject(function($controller){
         scope.fakeStateParams.teamId = null;
         $controller('TeamCtrl', {$scope: scope, $stateParams: scope.fakeStateParams});
+        scope.httpBackend.expect('GET', '../clubs.json').respond([]);
+
+        scope.$digest();
+        scope.httpBackend.flush();
        }));
 
       it('Submit with teamId calls post on server, post succeeds', function(){

src/app/team/team.tpl.html

@@ -1,5 +1,13 @@
 <div class="body">
   <div class="form-horizontal">
+    <div class="control-group" ng-class="error.club ? 'error' : ''">
+      <label class="control-label">Club:</label>
+      <div class="controls">
+        <select ng-model="team.club_id" ng-options="club.id as club.name for club in clubs"></select>
+      </div>
+      <div field_error errors="error" field="club"></div>
+    </div>
+
     <div class="control-group" ng-class="error.name ? 'error' : ''">
       <label class="control-label">Team name:</label>
       <div class="controls">

src/app/team/teams.tpl.html

@@ -8,6 +8,7 @@ <h1 id="title">Team functions</h1>
 </div>
 
 <div>
+  <strong>Filter:</strong><input type="text" ng-model="filterOptions.filterText" />
   <div class="gridStyle" ng-grid="gridOptions"></div>
   <button ng-click="newTeam()" class="btn btn-primary" >New</button>  
 </div>