Created Courses Students Index View (#81)

Add style for view
MatiasComercio · Feb 3, 2017 · 7d7a062 · 7d7a062
1 parent d1d97fc
commit 7d7a062
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 0 deletions.
diff --git a/app/scripts/controllers/courses/CoursesStudentsIndexCtrl.js b/app/scripts/controllers/courses/CoursesStudentsIndexCtrl.js
@@ -0,0 +1,56 @@
+'use strict';
+
+define(['paw'], function(paw) {
+  paw.controller('CoursesStudentsIndexCtrl', ['$routeParams', function($routeParams) {
+    var _this = this;
+    var courseId = $routeParams.courseId; // For future Service calls
+
+    this.course = {
+      courseId: '72.03',
+      name: 'Introducción a Informática',
+      credits: 3,
+      semester: 1,
+      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'
+        }]
+      };
+
+      this.filter = {
+        docket: $routeParams.docket,
+        firstName: $routeParams.firstName,
+        lastName: $routeParams.lastName
+      };
+
+      this.resetSearch = function() {
+        this.filter = {};
+      };
+    }]);
+  });
diff --git a/app/scripts/i18n/translations.es.js b/app/scripts/i18n/translations.es.js
@@ -99,6 +99,9 @@ define([], function() {
     i18nInscriptionOpen: 'Abierto',
     i18nInscriptionClosed: 'Cerrado',
 
+    // Courses Students Index
+    i18nQualify: 'Calificar',
+
     // Search filters
     i18nSearchButton: 'Buscar',
     i18nResetButton: 'Resetear',

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

diff --git a/app/styles/main.scss b/app/styles/main.scss
@@ -18,3 +18,4 @@ $fa-font-path: '../bower_components/font-awesome/fonts';
 @import 'partials/students/show';
 @import 'partials/students/edit';
 @import 'partials/courses/show';
+@import 'partials/courses/students_index';
diff --git a/app/styles/partials/courses/_students_index.scss b/app/styles/partials/courses/_students_index.scss
@@ -0,0 +1,20 @@
+@import 'modules/variables/importer';
+
+.courses-students-index-container {
+  .table {
+    .actions-container {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      justify-content: flex-start;
+
+      .btn {
+        flex: 1;
+        min-width: 175px;
+        max-width: 200px;
+        margin: 10px;
+        margin-left: 0;
+      }
+    }
+  }
+}
diff --git a/app/views/courses/students_index.html b/app/views/courses/students_index.html
@@ -0,0 +1,79 @@
+<div ng-controller='CoursesStudentsIndexCtrl as controller' class='courses-students-index-container'>
+  <!-- Page Heading -->
+  <div class='page-header break-words'>
+    <h1 class='inline'>
+      <span translate='i18nCoursesPanelSection'></span>
+    </h1>
+    <h2 class='inline'>
+      <span> - </span>
+      <span> {{controller.course.name}} </span>
+      <small> - </small>
+      <small translate='i18nCourseStudents'></small>
+    </h2>
+  </div>
+  <!-- /Page Heading -->
+
+  <!-- Filter -->
+  <div class='filter-container'>
+    <div class='filter-fields'>
+      <div class='own-input-group'>
+        <span class='search-label' translate=i18nDocket></span>
+        <input type='text' class='form-input-field' ng-model='controller.filter.docket' placeholder="{{ 'i18nDocket' | 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='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 -->
+
+  <!-- Students -->
+  <div class='table-responsive'>
+    <table class='table table-hover'>
+      <thead>
+        <tr>
+          <th translate='i18nDocket'></th>
+          <th translate='i18nFirstName'></th>
+          <th translate='i18nLastName'></th>
+          <th translate='i18nActions'></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr ng-hide='controller.course.students.length > 0' class='bg-warning'>
+          <td colspan='4' class='text-danger text-center' translate='i18nNoStudentsFound'></td>
+        </tr>
+        <tr ng-repeat='student in controller.course.students'>
+          <td>{{ student.docket }}</td>
+          <td>{{ student.firstName }}</td>
+          <td>{{ student.lastName }}</td>
+          <td class='actions-container'>
+            <a class='btn btn-default' role='button'>
+              <span class='fa fa-user' aria-hidden='true'></span>
+              <span translate='i18nStudentShow'></span>
+            </a>
+            <a class='btn btn-info' role='button'>
+              <span class='fa fa-graduation-cap' aria-hidden='true'></span>
+              <span translate='i18nQualify'></span>
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <!-- /Students -->
+</div>