Courses index view (#68)

* Finished View * Add test for Ctrl
MatiasComercio · Feb 1, 2017 · 40d59e0 · 40d59e0
1 parent 873ce2b
commit 40d59e0
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 4 deletions.
diff --git a/app/scripts/controllers/courses/CoursesIndexCtrl.js b/app/scripts/controllers/courses/CoursesIndexCtrl.js
@@ -0,0 +1,27 @@
+'use strict';
+define(['paw'], function(paw) {
+  paw.controller('CoursesIndexCtrl', ['$routeParams', function($routeParams) {
+    var _this = this;
+    this.filter = {
+      courseId: $routeParams.courseId,
+      courseName: $routeParams.courseName
+    };
+    this.resetSearch = function() {
+      this.filter = {};
+    };
+    this.courses = [
+      {
+        courseId: '72.03',
+        credits: 3,
+        name: 'Introducción a Informática',
+        semester: 1
+      },
+      {
+        courseId: '94.21',
+        credits: 6,
+        name: 'Formacion General I',
+        semester: 5
+      }
+    ];
+  }]);
+});
diff --git a/app/scripts/i18n/translations.es.js b/app/scripts/i18n/translations.es.js
@@ -81,14 +81,18 @@ define([], function() {
     i18nDoor: 'Dpto.',
     i18nZipCode: 'Cód. Postal',
 
-    //
-    i18nId: 'Código',
-    i18nName: 'Nombre',
+    // Courses Index
+    i18nCourseId: 'Código',
+    i18nCourseName: 'Nombre',
+    i18nCredits: 'Créditos',
+    i18nSemester: 'Cuatrimestre',
+
 
     // Search filters
     i18nSearchButton: 'Buscar',
     i18nResetButton: 'Resetear',
-    i18nNoStudentsFound: 'No se encontraron alumnos',
+    i18nNoStudentsFound: 'No se encontraron alumnos disponibles',
+    i18nNoCoursesFound: 'No se encontraron materias disponibles',
 
     // Form errors
     i18nRequiredField: 'Este campo es requerido',

diff --git a/app/scripts/routes.js b/app/scripts/routes.js
@@ -26,6 +26,11 @@ define([], function() {
               templateUrl: 'views/students/edit.html',
               controller: 'StudentsEditCtrl',
               relativePath: '/students'
+            },
+            '/courses': {
+                templateUrl: 'views/courses/index.html',
+                controller: 'CoursesIndexCtrl',
+                relativePath: '/courses'
             }
             /* ===== yeoman hook ===== */
             /* Do not remove these commented lines! Needed for auto-generation */

diff --git a/app/specs/controllers/courses/CoursesIndexController.spec.js b/app/specs/controllers/courses/CoursesIndexController.spec.js
@@ -0,0 +1,76 @@
+// 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/courses/CoursesIndexCtrl'],
+function() {
+  describe('Courses Index Ctrl', function() {
+    beforeEach(module('paw'));
+
+    // Hardcoded data until Service call is tested
+    var expectedCourses = [
+      {
+        courseId: '72.03',
+        credits: 3,
+        name: 'Introducción a Informática',
+        semester: 1
+      },
+      {
+        courseId: '94.21',
+        credits: 6,
+        name: 'Formacion General I',
+        semester: 5
+      }
+    ];
+
+    var $controller, $rootScope, controller;
+
+    var expectedParams = {
+      courseId: '72.',
+      courseName: 'Introducción a'
+    };
+
+    beforeEach(inject(
+      function(_$controller_, _$rootScope_) {
+        $controller = _$controller_;
+        $rootScope = _$rootScope_;
+        controller = $controller('CoursesIndexCtrl', {$routeParams: expectedParams});
+      }));
+
+      it('correctly fetch the courses', function() {
+        expect(controller.courses).toEqual(expectedCourses);
+      });
+
+      describe('when initializing the filter values', function() {
+        it('correctly fetch the course id', function() {
+          expect(controller.filter.courseId).toEqual(expectedParams.courseId);
+        });
+
+        it('correctly fetch the course name', function() {
+          expect(controller.filter.courseName).toEqual(expectedParams.courseName);
+        });
+      });
+
+      describe('when reset button is clicked', function() {
+        beforeEach(function() {
+          controller.filter = {};
+          controller.filter.courseId = '72.';
+          controller.filter.courseName = 'Introducción a';
+          controller.resetSearch();
+        });
+
+        it('clears the course id search input', function() {
+          expect(controller.filter).toEqual({});
+        });
+
+        it('clears the course name search input', function() {
+          expect(controller.filter).toEqual({});
+        });
+      });
+    });
+  });
diff --git a/app/views/courses/index.html b/app/views/courses/index.html
@@ -0,0 +1,65 @@
+<div ng-controller='CoursesIndexCtrl as controller'>
+  <div class='courses-index-container'>
+    <!-- Page Heading -->
+    <h1 translate='i18nCoursesPanelSection' class='page-header'></h1>
+    <!-- /Page Heading -->
+
+    <!-- Filter -->
+    <div class='filter-container'>
+      <div class='filter-fields'>
+        <div class='own-input-group'>
+          <span class='search-label' translate=i18nCourseId></span>
+          <input type='text' class='form-input-field' ng-model='controller.filter.courseId' placeholder="{{ 'i18nCourseId' | translate }}..."/>
+        </div>
+        <div class='own-input-group'>
+          <span class='search-label' translate='i18nCourseName'></span>
+          <input type='text' class='form-input-field' ng-model='controller.filter.courseName' placeholder="{{ 'i18nCourseName' | 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='i18nSearchButton' 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='i18nResetButton'></span>
+        </button>
+      </div>
+    </div>
+    <!-- /Filter -->
+
+    <!-- Content -->
+    <div class='table-responsive'>
+      <table class='table table-hover'>
+        <thead>
+          <tr>
+            <th translate='i18nCourseId'></th>
+            <th translate='i18nCourseName'></th>
+            <th translate='i18nCredits'></th>
+            <th translate='i18nSemester'></th>
+            <th translate='i18nActions'></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-hide='controller.courses.length > 0' class='bg-warning'>
+            <td colspan='5' class='text-danger text-center' translate='i18nNoCoursesFound'></td>
+          </tr>
+          <tr ng-repeat='course in controller.courses'>
+            <td>{{ course.courseId }}</td>
+            <td>{{ course.name }}</td>
+            <td>{{ course.credits }}</td>
+            <td>{{ course.semester }}</td>
+            <td class='actions-container'>
+              <a class='btn btn-default' role='button'>
+                <span class='fa fa-info-circle' aria-hidden='true'></span>
+                <span translate='i18nCourseShow'></span>
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!-- Content -->
+  </div>
+</div>