Created Courses Show View #73

MatiasMercado · 2017-02-01T19:24:10Z

Courses Show View

The view contains the course's information, correlatives and final inscriptions.

Trello Card

https://trello.com/c/pqYuXGRU/49-maquetar-vista-de-curso

MatiasComercio

Nice one! Just a few fixes

MatiasComercio · 2017-02-02T18:48:26Z

app/scripts/controllers/courses/CoursesShowCtrl.js

+    var _this = this;
+    var courseId = $routeParams.courseId; // For future Service calls
+
+    this.formatDate = function(finalExamDate) {


This should not be here. Controllers don't have to know how data should be manipulated or styled. They should called Angular's filters to perform these kind of tasks.
Move this logic to a filter.

MatiasComercio · 2017-02-02T18:53:45Z

app/scripts/controllers/courses/CoursesShowCtrl.js

+      'semester': 3
+    };
+
+    this.correlatives = [


Correlatives information should be related to the course, because they are correlatives of that course. Nest this correlatives inside the above course definition. That's the way data should be received by the controller when fetching it from the Courses service.

MatiasComercio · 2017-02-02T18:53:55Z

app/scripts/controllers/courses/CoursesShowCtrl.js

+      }
+    ];
+
+    this.finalInscriptions = [


Same as above.

MatiasComercio · 2017-02-02T18:55:50Z

app/specs/controllers/courses/CoursesShowCtrl.spec.js

+    var expectedCourseId = '93.42';
+    var expectedParams = {courseId: expectedCourseId};
+
+    var expectedCourse = {


Update all this object to match the one modified with the suggestions. Also, use the apiResonses API to store data there and retrieve it on different tests.
There are few examples of its usage all along other tests.

MatiasComercio · 2017-02-02T18:56:53Z

app/specs/controllers/courses/CoursesShowCtrl.spec.js

+        it('correctly fetch the final inscriptions', function() {
+          expect(controller.finalInscriptions).toEqual(expectedFinalInscriptions);
+        });
+        it('correctly format the final exam date', function() {


This is the filter test case 😄

MatiasComercio · 2017-02-02T18:58:41Z

app/styles/partials/courses/_show.scss

@@ -0,0 +1,35 @@
+@import 'modules/variables/importer';


I'll check this style out later, but syntax and structure seem OK

MatiasComercio · 2017-02-02T19:00:42Z

app/views/courses/show.html

+          <td colspan='4' class='text-danger text-center' translate='i18nNoFinalExamsFound'></td>
+        </tr>
+        <tr ng-repeat='inscription in controller.finalInscriptions'>
+          <td>{{controller.formatDate(inscription.finalExamDate)}}</td>


Filter here (just to remind you where you were using the method)

MatiasComercio · 2017-02-02T19:01:47Z

app/views/courses/show.html

@@ -0,0 +1,107 @@
+<div class='courses-show-container' ng-controller='CoursesShowCtrl as controller'>


I'll check this view out later, but syntax and structure seem OK

MatiasComercio · 2017-02-02T19:44:15Z

app/views/modals/delete_course.html

@@ -3,10 +3,10 @@ <h4 class='modal-title' id='modal-title' translate='i18nCourseDelete'></h4>
 </div>
 <div class='modal-body'>
  <p class='break-words'>
-    <span class='bold' translate='i18nId'></span>: {{ controller.id }}
+    <span class='bold' translate='i18nCourseId'></span>: {{ controller.id }}


Good catches! 😄

MatiasComercio

The rest of the style is pretty nice! Congrats! 🎉

MatiasComercio · 2017-02-02T21:23:30Z

app/styles/partials/courses/_show.scss

+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      justify-content: space-between;


Try this: justify-content: flex-start;

MatiasComercio · 2017-02-02T21:24:18Z

app/styles/partials/courses/_show.scss

+      .btn {
+        flex: 1;
+        min-width: 175px;
+        max-width: 250px;


Try this:

max-width: 200px; margin: 10px; margin-left: 0;

MatiasComercio · 2017-02-02T21:24:45Z

app/styles/partials/courses/_show.scss

+    justify-content: space-between;
+
+    .data-item {
+      width: 230px;


Try this: width: 200px;

MatiasComercio · 2017-02-02T21:25:15Z

app/styles/partials/courses/_show.scss

+      .break-words {
+        display: inline-block;
+        word-wrap: break-word; /* Internet Explorer 5.5+ */
+        width: 220px; /* width is mandatory to make break-word work on Mozzila */


Try this: 190px

MatiasComercio · 2017-02-02T21:27:12Z

app/views/courses/show.html

+  <!-- /Course Data -->
+
+  <!-- Correlatives -->
+  <h3 translate='i18nCorrelatives' class='page-header'></h3>


I would apply page-header class to this item, but yes a similar style.
I would create a class page-sub-header with the same style as the page header, and additionally, a padding-top: 15px so as to separate the previous content of the current one.

MatiasComercio · 2017-02-02T21:27:43Z

app/views/courses/show.html

+  <!-- /Correlatives -->
+
+  <!-- Final Exams -->
+  <h3 translate='i18nFinalExams' class='page-header'></h3>


Same as 'Correlatives' subheader

Add style for actions buttons

* Created Courses Show View Add style for actions buttons Add style for h3 headers

MatiasComercio self-requested a review February 2, 2017 18:46

MatiasComercio self-assigned this Feb 2, 2017

MatiasComercio requested changes Feb 2, 2017

View reviewed changes

MatiasComercio assigned MatiasMercado and unassigned MatiasComercio Feb 2, 2017

MatiasComercio reviewed Feb 2, 2017

View reviewed changes

MatiasComercio requested changes Feb 2, 2017

View reviewed changes

MatiasMercado added 2 commits February 3, 2017 11:47

Created Courses Show View

69bfd04

Add style for actions buttons

Fixed Style issues

58b6c16

MatiasMercado force-pushed the courses-show-view branch from 585f31a to 58b6c16 Compare February 3, 2017 14:47

Fix PR - 2

82fc894

MatiasMercado merged commit d1d97fc into development Feb 3, 2017

MatiasMercado deleted the courses-show-view branch February 3, 2017 18:28

MatiasComercio mentioned this pull request Feb 5, 2017

Pre-release 2017-02-05 #121

Merged

MatiasComercio pushed a commit that referenced this pull request Feb 5, 2017

Created Courses Show View (#73)

6bdbbb7

* Created Courses Show View Add style for actions buttons Add style for h3 headers

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Created Courses Show View #73

Created Courses Show View #73

MatiasMercado commented Feb 1, 2017

MatiasComercio left a comment

MatiasComercio Feb 2, 2017

MatiasComercio Feb 2, 2017

MatiasComercio Feb 2, 2017

MatiasComercio Feb 2, 2017

MatiasComercio Feb 2, 2017

MatiasComercio Feb 2, 2017

MatiasComercio Feb 2, 2017

MatiasComercio Feb 2, 2017

MatiasComercio Feb 2, 2017

MatiasComercio left a comment

MatiasComercio Feb 2, 2017

MatiasComercio Feb 2, 2017

MatiasComercio Feb 2, 2017

MatiasComercio Feb 2, 2017

MatiasComercio Feb 2, 2017

MatiasComercio Feb 2, 2017

		@@ -0,0 +1,107 @@
		<div class='courses-show-container' ng-controller='CoursesShowCtrl as controller'>

Created Courses Show View #73

Created Courses Show View #73

Conversation

MatiasMercado commented Feb 1, 2017

Courses Show View

Trello Card

MatiasComercio left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MatiasComercio left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment