Skip to content

Commit

Permalink
Add sidebar UI & a pack of services and directives (#50)
Browse files Browse the repository at this point in the history
- Add directives: sidebar, sidebar item, backdrop, prevent scroll
- Add services: memory factory, modal factory, nav data service, window size
- Add modal controllers: inscriptions, reset password, delete user,
  delete course

- Add sidebar directive
  - Add responsive behavior
  - Add animations to each link inside it
  - Add admins section
    - Add dynamic update for enable/disable inscriptions option
  - Add students section
  - Add courses section
  - Add sub sidebar section
    - Add admin section
    - Add student section
    - Add course section
- Add sidebar item directive
  - Add shown style
  - Add animations for showing and closing content
- Add modals through angular-bootstrap
  - Add modalFactory service wrapping angular-bootstrap service
    - Use modalFactory to create modal controllers
    - Use other existant modal views as base for compatibility reasons
  - Add inscriptions modals
  - Add reset password modal
  - Add delete user modal
  - Add delete course modal
- Add prevent scroll directive
  - Prevent other parent elements to be scrolled with the mousewheel action
  - Improve background scrolling for all browsers
  - Add cross-browser support through jquery-mousewheel dependency
- Add memory factory service
  - Create multiple memory objects holding key-value pairs with two
    lines. Each memory can hold different related key-value pairs.
  - Use observer pattern to notify subscribed observers on key change
- Add window size directive
  - Detect when window resizes
  - Update values based on window's size
    - Update windowIsMobile boolean variable
    - Update bootstrapWindowSize string variable
      - Possible values: 'xs', 'sm', 'md', 'lg'
- Add navigation data service
  - Hold values related to main's app navigation
- Add backdrop directive
  - Show when window is on mobile size and sidebar is opened
  - Block the entire page and capture click events otuside the sidebar
    so as to close it
- Add style for all the new elements
  - Add custom scrollbar for Chrome and Opera
    - Firefox does not take into account these style tools
  - Add responsive style to sidebar
- Improve style for existant elements
  - Improve sandwich icon style
  - Improve content style to fit navbar and sidebar
- Add fontawesome fonts on main.scss
- Add test cases for all directives, services and controllers
  - Karma current coverage: 100%
  - Increment required front-end code coverage to 90%
- Add dependencies
  - Add angular-animate
  - Add angular-bootstrap
  - Add jquery-mousewheel
  - Add angular-material

- Add HomeCtrl simulation to fetch data
  - Add fetch admin
  - Add fetch student
  - Add fetch course
  - Update JS object where data is saved
- Move directive templates to /views/directives/*
- Remove static external resources
- Add code climate reports

- Notes
  - UI tested on Chrome, Firefox and Opera
  - Modals don't have forms anymore due to there is no need to send all data
    (just hit the corresponding API endpoint with the specified data, sent
    to the modal's controller)
  - Consider making a generic modal (e.g.: reset password and delete user
    modals are the same)
  - All rootScope or scope usage has been mitigated in favour of isolated
    scopes and services managing data across different directives and
    controllers
  • Loading branch information
MatiasComercio authored Jan 23, 2017
1 parent 9e8325e commit 4449176
Show file tree
Hide file tree
Showing 84 changed files with 3,602 additions and 11,697 deletions.
21 changes: 21 additions & 0 deletions .codeclimate.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
engines:
csslint:
enabled: false
duplication:
enabled: true
exclude_fingerprints:
- f8ff5182bf5ef6e61d42e67f19c2f626
- f6bb76a706e7f9228733a0dce397756f
exclude_paths:
- "app/specs/"
config:
languages:
- javascript
eslint:
enabled: true
fixme:
enabled: true
ratings:
paths:
- "**.js"
exclude_paths: []
5 changes: 3 additions & 2 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,11 @@ install:
script:
- npm test
- mvn clean package sonar:sonar -Dsonar.host.url=https://sonarqube.com -Dsonar.login=${SONAR_TOKEN}
- mvn sonar:sonar -Dsonar.sourceEncoding=UTF-8 -Dsonar.analysis.mode=preview -Dsonar.github.repository=MatiasComercio/paw -Dsonar.github.login=MatiasComercio -Dsonar.github.oauth=${GITHUB_ACCESS_TOKEN} -Dsonar.host.url=https://sonarqube.com -Dsonar.login=${SONAR_TOKEN} -Dsonar.github.pullRequest=${TRAVIS_PULL_REQUEST}
after_success:
- mvn clean test jacoco:report coveralls:report
- mvn clean test jacoco:report
- npm install -g codeclimate-test-reporter
- codecov
- codeclimate-test-reporter < coverage/**/lcov.info
cache:
directories:
- '$HOME/.m2'
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# SGA - Sistema de Gestión Académica


[![Build Status](https://travis-ci.org/MatiasComercio/paw.svg?branch=development)](https://travis-ci.org/MatiasComercio/paw) [![codecov](https://codecov.io/gh/MatiasComercio/paw/branch/development/graph/badge.svg)](https://codecov.io/gh/MatiasComercio/paw) [![Code Climate](https://codeclimate.com/github/MatiasComercio/paw/badges/gpa.svg)](https://codeclimate.com/github/MatiasComercio/paw)
[![Build Status](https://travis-ci.org/MatiasComercio/paw.svg?branch=development)](https://travis-ci.org/MatiasComercio/paw) [![Code Climate](https://codeclimate.com/github/MatiasComercio/paw/badges/gpa.svg)](https://codeclimate.com/github/MatiasComercio/paw)

[![alt text][2]][1]

Expand Down
54 changes: 27 additions & 27 deletions app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,39 +11,39 @@

</head>
<body ng-controller='BodyController as controller'>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class='container'>
<xnavbar></xnavbar>

<div class='content'>
<div class='header'>
<h3 class='text-muted'>paw</h3>
<!-- site navigation elements -->
<xnavbar></xnavbar>
<xsidebar></xsidebar>
<!-- \site navigation elements -->

<!-- dynamic content -->
<div class='container'>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<!-- content -->
<div class='content-container'>
<!-- ng-view -->
<div ng-view='' class='ng-view-container'></div>
<!-- \ng-view -->

<!-- footer -->
<div class='footer'>
<hr />
<p><span class='glyphicon glyphicon-heart'></span> from the Yeoman team</p>
</div>
<p translate='{{ controller.bodyControllerText }}'></p>

<div ng-view=''></div>
</div>

<div class='footer'>
<hr />
<p><span class='glyphicon glyphicon-heart'></span> from the Yeoman team</p>
<!-- \footer -->
</div>
<!-- \content -->
</div>
<!-- \dynamic content -->

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!-- where modals are injected when loaded -->
<div class='modal-parent'>
</div>
<!-- \where modals are injected when loaded -->

<!-- build:js(.) scripts/oldieshim.js -->
<!--[if lt IE 9]>
Expand Down
27 changes: 26 additions & 1 deletion app/scripts/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,12 @@ require.config({
tooltip: '../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip',
transition: '../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/transition',
'font-awesome': '../../bower_components/font-awesome',
'bootstrap-sass-official': '../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap'
'bootstrap-sass-official': '../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap',
'angular-animate': '../../bower_components/angular-animate/angular-animate',
'angular-bootstrap': '../../bower_components/angular-bootstrap/ui-bootstrap-tpls',
'jquery-mousewheel': '../../bower_components/jquery-mousewheel/jquery.mousewheel',
'angular-material': '../../bower_components/angular-material/angular-material',
'angular-aria': '../../bower_components/angular-aria/angular-aria'
},
shim: {
angular: {
Expand All @@ -39,6 +44,11 @@ require.config({
'angular'
]
},
'angular-animate': {
deps: [
'angular'
]
},
bootstrap: {
deps: [
'jquery',
Expand All @@ -59,6 +69,21 @@ require.config({
deps: [
'angular'
]
},
'angular-bootstrap': {
deps: [
'angular'
]
},
'angular-material': {
deps: [
'angular'
]
},
'angular-aria': {
deps: [
'angular'
]
}
},
packages: [
Expand Down
14 changes: 9 additions & 5 deletions app/scripts/controllers/BodyController.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
'use strict';

define(['paw', 'directives/navbar'], function(paw) {
paw.controller('BodyController', ['$scope', function($scope) {
this.bodyControllerText = 'bodyControllerText';
}]);
});
define(
['paw',
'directives/navbar',
'directives/sidebar'],
function(paw) {
paw.controller('BodyController', [function() {
}]);
}
);
121 changes: 118 additions & 3 deletions app/scripts/controllers/HomeCtrl.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,121 @@
'use strict';

define(['paw'], function(paw) {
paw.controller('HomeCtrl', function($scope) {
});
define(['paw', 'services/navDataService'], function(paw) {
paw.controller('HomeCtrl',
['navDataService',
function(navDataService) {

this.fetchCourse = function() {
return {
id: '123',
name: 'Introducción a la informática y todoestechoclodetextoparaverqueandebien',
actions: {
show: {
path: '/courses/123'
},
edit: {
path: '/courses/123/edit'
},
students: {
path: '/courses/123/students'
},
approved: {
path: '/courses/123/approved'
},
addCorrelative: {
path: '/courses/123/correlatives/new'
},
delete: {
path: '/courses/123/delete'
}
}
};
};

this.fetchAdmin = function() {
return {
dni: '38457013',
firstName: '[ADMIN] Matías Nicolás',
lastName: 'Comercio Vázquez asdasdasdasdasdasdasdasdadasdasdas',
actions: {
show: {
path: '/admins/123'
},
edit: {
path: '/admins/123/edit'
},
resetPassword: {
path: '/admins/123/resetPassword'
},
updatePassword: {
path: '/admins/123/updatePassword'
}
}
};
};

this.fetchStudent = function() {
return {
dni: '38457013',
firstName: 'Matías Nicolás',
lastName: 'Comercio Vázquez asdasdasdasdasdasdasdasdadasdasdas',
actions: {
show: {
path: '/students/123'
},
edit: {
path: '/students/123/edit'
},
resetPassword: {
path: '/students/123/resetPassword'
},
updatePassword: {
path: '/students/123/updatePassword'
},
courses: {
path: '/students/123/courses'
},
grades: {
path: '/students/123/grades'
},
inscriptions: {
path: '/students/123/inscriptions'
},
finals: {
path: '/students/123/finals'
},
delete: {
path: '/users/123/delete'
}
}
};
};

var _this = this;
function fetchData() {
return {
// admin: _this.fetchAdmin()
student: _this.fetchStudent()
// course: _this.fetchCourse()
};
};

this.subSidebarUpdate = function(subSidebar) {
this.subSidebar = subSidebar;
var student = this.subSidebar.student;
if (student) {
student.fullName = student.firstName + ' ' + student.lastName;
}

var admin = this.subSidebar.admin;
if (admin) {
admin.fullName = admin.firstName + ' ' + admin.lastName;
}
};

this.subSidebarUpdate(fetchData());

navDataService.set('subSidebar', this.subSidebar);
}]
);
});
50 changes: 50 additions & 0 deletions app/scripts/controllers/modals/DeleteCourseController.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
'use strict';

define(['paw', 'services/modalFactory'], function(paw) {
paw.controller('DeleteCourseController',
['modalFactory', '$log',
function (modalFactory, $log) {
var modalTemplateUrl = '/views/modals/delete_course.html';
var onSuccess = function(url) {
$log.info('POST ' + url);
};

var onFailure = function(msg) {
$log.info(msg);
};

this.open = function (size, url, id, name) {
var resolve = getResolve(url, id, name);
modalFactory.create(size, 'DeleteCourseModalInstanceController', modalTemplateUrl, resolve, onSuccess, onFailure);
};
}]);

paw.controller('DeleteCourseModalInstanceController',
function ($uibModalInstance, url, id, name) {
this.id = id;
this.name = name;

this.ok = function () {
$uibModalInstance.close(url);
};

this.cancel = function () {
$uibModalInstance.dismiss('Delete Course modal dismissed at: ' + new Date());
};
});

function getResolve(url, id, name) {
return {
url: function () {
return url;
},
id: function () {
return id;
},
name: function () {
return name;
}
};
};
}
);
Loading

0 comments on commit 4449176

Please sign in to comment.