Created Students Index View (#63)

Fix PR - 1

- Fix bootstrap style issues
- Refactor filter style
- Reorganize some styles files
- Update StudentsIndexCtrl to use $routeParams to grab filter's values

Removed students _index.scss

app/scripts/controllers/StudentsIndexCtrl.js

@@ -0,0 +1,47 @@
+'use strict';
+define(['paw'], function(paw) {
+  paw.controller('StudentsIndexCtrl', ['$routeParams', function($routeParams) {
+    var _this = this;
+    this.filter = {
+      docket: $routeParams.docket,
+      firstName: $routeParams.firstName,
+      lastName: $routeParams.lastName
+    };
+
+    this.resetSearch = function() {
+      this.filter = {};
+    };
+
+    this.students = [
+      {
+        firstName: 'Matías',
+        lastName: 'Mercado',
+        docket: '55019'
+      },
+      {
+        firstName: 'Facundo',
+        lastName: 'Mercado',
+        docket: '51202'
+      },
+      {
+        firstName: 'Gibar',
+        lastName: 'Sin',
+        docket: '54655'
+      },
+      {
+        firstName: 'Obi Wan',
+        lastName: 'Kenobi',
+        docket: '12000'
+      },
+      {
+        firstName: 'Darth',
+        lastName: 'Vader',
+        docket: '66666'
+      },
+      {
+        firstName: 'Luke',
+        lastName: 'Skywalker',
+        docket: '53222'
+      }];
+    }]);
+  });

app/scripts/i18n/translations.es.js

@@ -52,11 +52,19 @@ define([], function() {
 
     //
     i18nDni: 'DNI',
+    i18Docket: 'Legajo',
     i18nFirstName: 'Nombre',
     i18nLastName: 'Apellido',
+    i18Actions: 'Acciones',
 
     //
     i18nId: 'Código',
-    i18nName: 'Nombre'
+    i18nName: 'Nombre',
+
+    // Search filters
+    i18SearchButton: 'Buscar',
+    i18ResetButton: 'Resetear',
+    i18NoStudentsFound: 'No se encontraron alumnos'
+
   };
 });

app/scripts/routes.js

@@ -11,6 +11,10 @@ define([], function() {
             '/login': {
                 templateUrl: '/views/login.html',
                 controller: 'LoginCtrl'
+            },
+            '/students': {
+                templateUrl: '/views/students/index.html',
+                controller: 'StudentsIndexCtrl'
             }
             /* ===== yeoman hook ===== */
             /* Do not remove these commented lines! Needed for auto-generation */

app/specs/controllers/StudentsIndexCtrl.spec.js

@@ -0,0 +1,103 @@
+// disable max-nested-callbacks linter for this test
+// it is good to have a good separation of contexts inside tests
+
+/* eslint-disable max-nested-callbacks */
+
+'use strict';
+
+define(['paw',
+'angular-mocks',
+'controllers/StudentsIndexCtrl'],
+function() {
+  describe('Students Index Ctrl', function() {
+    beforeEach(module('paw'));
+
+    // Hardcoded data until Service call is tested
+    var expectedStudents = [
+      {
+        firstName: 'Matías',
+        lastName: 'Mercado',
+        docket: '55019'
+      },
+      {
+        firstName: 'Facundo',
+        lastName: 'Mercado',
+        docket: '51202'
+      },
+      {
+        firstName: 'Gibar',
+        lastName: 'Sin',
+        docket: '54655'
+      },
+      {
+        firstName: 'Obi Wan',
+        lastName: 'Kenobi',
+        docket: '12000'
+      },
+      {
+        firstName: 'Darth',
+        lastName: 'Vader',
+        docket: '66666'
+      },
+      {
+        firstName: 'Luke',
+        lastName: 'Skywalker',
+        docket: '53222'
+      }];
+
+      var $controller, $rootScope, controller;
+
+      var expectedParams = {
+        docket: 123,
+        firstName: 'Hello',
+        lastName: 'Test'
+      };
+
+      beforeEach(inject(
+        function(_$controller_, _$rootScope_) {
+          $controller = _$controller_;
+          $rootScope = _$rootScope_;
+          controller = $controller('StudentsIndexCtrl', {$routeParams: expectedParams});
+        }));
+
+        it('correctly fetch the students', function() {
+          expect(controller.students).toEqual(expectedStudents);
+        });
+
+        describe('when initializing the filter values', function() {
+          it('correctly fetch the docket', function() {
+            expect(controller.filter.docket).toEqual(expectedParams.docket);
+          });
+
+          it('correctly fetch the first name', function() {
+            expect(controller.filter.firstName).toEqual(expectedParams.firstName);
+          });
+
+          it('correctly fetch the last name', function() {
+            expect(controller.filter.lastName).toEqual(expectedParams.lastName);
+          });
+        });
+
+        describe('when reset button is clicked', function() {
+          beforeEach(function() {
+            controller.filter = {};
+            controller.filter.docket = 12345;
+            controller.filter.firstName = 'John';
+            controller.filter.lastName = 'Doe';
+            controller.resetSearch();
+          });
+
+          it('clears the docket search input', function() {
+            expect(controller.filter).toEqual({});
+          });
+
+          it('clears the firstName search input', function() {
+            expect(controller.filter).toEqual({});
+          });
+
+          it('clears the lastName search input', function() {
+            expect(controller.filter).toEqual({});
+          });
+        });
+      });
+    });

app/styles/main.scss

@@ -7,8 +7,11 @@ $fa-font-path: "/bower_components/font-awesome/fonts";
 
 @import 'modules/variables/importer';
 @import 'modules/common';
+@import 'modules/_tables';
+@import 'modules/filters';
 @import 'directives/navbar';
 @import 'directives/sidebar';
 @import 'directives/backdrop';
 @import 'partials/index';
 @import 'partials/home';
+@import 'partials/students/_index';

app/styles/modules/_filters.scss

@@ -0,0 +1,63 @@
+.filter-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 15px;
+
+  .filter-fields {
+    width: 100%;
+
+    .own-input-group {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      justify-content: center;
+
+      .search-label {
+        flex: 2;
+        min-width: 80px;
+        max-width: 120px;
+        width: 100%;
+        font-weight: 700;
+        height: 35px;
+        line-height: 35px;
+        text-align: center;
+        border: 1px solid $silver;
+      }
+
+      .form-input-field {
+        flex: 8;
+        display: block;
+        min-width: 100px;
+        max-width: 500px;
+        width: 100%;
+        height: 35px;
+        padding: 6px 12px;
+        background-color: $white;
+        background-image: none;
+        border: 1px solid $silver;
+        border-radius: 0;
+        transition: border-color ease-in-out 0.15s;
+
+        &:focus {
+          border-color: $mine-shaft;
+          outline: none;
+        }
+      }
+    }
+  }
+
+  .filter-buttons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 15px;
+
+    .btn {
+      min-width: 150px;
+      margin: 0 15px;
+    }
+  }
+}

app/styles/modules/_tables.scss

@@ -0,0 +1,22 @@
+.table {
+  > tbody,
+  > tfoot,
+  > thead {
+    > tr {
+      > th,
+      > td {
+        border-bottom: none;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .actions-container {
+    display: flex;
+    flex-wrap: wrap;
+
+    .btn {
+      flex: 1;
+    }
+  }
+}

app/styles/modules/common.scss

@@ -58,6 +58,7 @@ hr {
 // Customize scrollbar for Chrome and Opera browsers
 ::-webkit-scrollbar {
   width: 8px;
+  height: 8px;
 }
 
 /* Track */
@@ -69,3 +70,16 @@ hr {
 ::-webkit-scrollbar-thumb {
   background: $silver-chalice;
 }
+
+.row {
+  margin: 0;
+}
+
+.page-header {
+  margin: 0 0 10px;
+  padding-bottom: 15px;
+}
+
+.btn {
+  border-radius: 0;
+}

app/styles/modules/variables/sizes.scss

@@ -3,7 +3,7 @@ $topNavMaxWidth: 300px;
 $topNavDropdownMenuMaxWidth: 300px;
 $sidebarWidth: 225px;
 $sidebarButtonHeight: 50px;
-$navbarZIndex: 1;
-$sidebarZIndex: 2;
+$navbarZIndex: 1001;
+$sidebarZIndex: 1002;
 $containerPadding: 30px;
 $bootstrapMobileMaxWidth: 768px;

app/styles/partials/_index.scss

@@ -5,7 +5,6 @@
   margin-left: $sidebarWidth;
   margin-right: 0;
   margin-bottom: 0;
-  width: 100%;
   padding: $containerPadding;
   width: calc(100% - #{$sidebarWidth});
   transition: all linear $sidebarTransitionTime;

app/views/students/index.html

@@ -0,0 +1,71 @@
+<div ng-controller='StudentsIndexCtrl as controller'>
+  <div class='students-index-container'>
+    <!-- Page Heading -->
+    <div class='row'>
+      <div class='col-xs-12'>
+        <h1 translate='i18nStudentsPanelSection' class='page-header'></h1>
+      </div>
+    </div>
+    <!-- /Page Heading -->
+
+    <!-- Filter -->
+    <div class='filter-container'>
+      <div class='filter-fields'>
+        <div class='own-input-group'>
+          <span class='search-label' translate=i18Docket></span>
+          <input type='text' class='form-input-field' ng-model='controller.filter.docket' placeholder="{{ 'i18Docket' | translate }}..."/>
+        </div>
+        <div class='own-input-group'>
+          <span class='search-label' translate='i18nFirstName'></span>
+          <input type='text' class='form-input-field' ng-model='controller.filter.firstName' placeholder="{{ 'i18nFirstName' | translate }}..."/>
+        </div>
+        <div class='own-input-group'>
+          <span class='search-label' translate='i18nLastName'></span>
+          <input type='text' class='form-input-field' ng-model='controller.filter.lastName' placeholder="{{ 'i18nLastName' | translate }}..."/>
+        </div>
+      </div>
+      <div class='filter-buttons'>
+        <button class='btn btn-default' type='submit'>
+          <span class='fa fa-search' aria-hidden='true'></span>
+          <span translate='i18SearchButton' translate ></span>
+        </button>
+        <button class='btn btn-default' ng-click='controller.resetSearch()' type='submit'>
+          <span class='fa fa-repeat' aria-hidden='true'></span>
+          <span translate='i18ResetButton'></span>
+        </button>
+      </div>
+    </div>
+    <!-- /Filter -->
+
+    <!-- Students -->
+    <div class='table-responsive'>
+      <table class='table table-hover'>
+        <thead>
+          <tr>
+            <th translate='i18Docket'></th>
+            <th translate='i18nFirstName'></th>
+            <th translate='i18nLastName'></th>
+            <th translate='i18Actions'></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-hide='controller.students.length > 0' class='bg-warning'>
+            <td colspan='4' class='text-danger text-center' translate='i18NoStudentsFound'></td>
+          </tr>
+          <tr ng-repeat='student in controller.students'>
+            <td>{{ student.docket }}</td>
+            <td>{{ student.firstName }}</td>
+            <td>{{ student.lastName }}</td>
+            <td class='actions-container'>
+              <a class='btn btn-default fullWidthButton' role='button'>
+                <span class='fa fa-user' aria-hidden='true'></span>
+                <span translate='i18nStudentShow'></span>
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!-- /Students -->
+  </div>
+</div>