diff --git a/app/js/directives/droitsEligiblesList.js b/app/js/directives/droitsEligiblesList.js index 991bb3017e..0fcffdaf48 100644 --- a/app/js/directives/droitsEligiblesList.js +++ b/app/js/directives/droitsEligiblesList.js @@ -1,23 +1,76 @@ 'use strict'; +var SmoothScroll = require('smooth-scroll'); +var scroll = new SmoothScroll(); + +var mergeDroits = function(prestationsNationales, partenairesLocaux) { + + var droits = _.values(prestationsNationales); + _.forEach(partenairesLocaux, function(partenaireLocal) { + droits = droits.concat(_.values(partenaireLocal.prestations)); + }); + + droits.sort(function(a, b) { + return a.label < b.label ? -1 : 1; + }); + + return droits; +}; + +angular.module('ddsApp').controller('droitsEligiblesListCtrl', function($scope, TrampolineService) { + + $scope.isNumber = _.isNumber; + $scope.isString = _.isString; + $scope.isBoolean = _.isBoolean; + + $scope.$watch('droits', function(value) { + if (value) { + var list = mergeDroits(value.prestationsNationales, value.partenairesLocaux); + if ($scope.filter) { + list = _.filter(list, function(value) { + + return _.includes($scope.filter, value.id); + }); + } + $scope.list = list; + } + }); + + $scope.trampoline = TrampolineService; + $scope.isNumber = _.isNumber; + $scope.isString = _.isString; + $scope.list = []; + + $scope.scrollTo = function(droit, $event) { + $event.preventDefault(); + scroll.animateScroll(document.querySelector('#' + droit.id), $event.target, { + updateURL: false, + offset: function () { + return document.querySelector('header').offsetHeight; + } + }); + }; + + $scope.scrollToTop = function($event) { + $event.preventDefault(); + scroll.animateScroll(document.querySelector('body'), $event.target, { + updateURL: false + }); + }; + +}); + var controllerOptions = function(templateUrl) { return function() { return { restrict: 'E', templateUrl: templateUrl, - scope: true, + scope: { + droits: '=', + yearMoins2: '=', + filter: '=', + }, controller: 'droitsEligiblesListCtrl', - // Inject list into scope, filtered by benefits specified via the "filter" attribute - link: function ($scope, $element, $attributes) { - if ($attributes.hasOwnProperty('filter')) { - var filter = $scope.$eval($attributes.filter); - $scope.list = _.pickBy($scope.$eval($attributes.list), function(value, key) { - return _.includes(filter, key); - }); - } else { - $scope.list = $scope.$eval($attributes.list); - } - } }; }; }; @@ -26,20 +79,22 @@ angular.module('ddsApp') .directive('droitEligiblesList', controllerOptions('/partials/droits-eligibles-list.html')); angular.module('ddsApp') - .directive('droitNonEligiblesList', controllerOptions('/partials/droits-non-eligibles-list.html')); - -angular.module('ddsApp').controller('droitsEligiblesListCtrl', function($scope, TrampolineService) { - $scope.isNumber = _.isNumber; - $scope.isString = _.isString; - $scope.shouldDisplayYM2Warning = function(droit) { - return droit.isBaseRessourcesYearMoins2 && ! $scope.ressourcesYearMoins2Captured && ! _.isString(droit.montant); - }; + .directive('droitEligiblesDetails', controllerOptions('/partials/droits-eligibles-details.html')); - $scope.trampoline = TrampolineService; +angular.module('ddsApp') + .directive('droitNonEligiblesList', controllerOptions('/partials/droits-non-eligibles-list.html')); - // ng-class and uib-accordion don't work well together, hence this extra function. - // See https://github.com/angular-ui/bootstrap/issues/4172 - $scope.getAccordionClass = function(droit) { - return [$scope.shouldDisplayYM2Warning(droit) ? 'needs-n-2' : '', droit.open ? 'panel-opened': ''].join(' '); - }; -}); +angular.module('ddsApp') + .directive('droitMontant', function() { + return { + restrict: 'E', + templateUrl: '/partials/droit-montant.html', + scope: { + droit: '=', + }, + link: function(scope) { + scope.isNumber = _.isNumber; + scope.isString = _.isString; + } + }; + }); diff --git a/app/scripts.js b/app/scripts.js index a91cd64208..d2fd347825 100644 --- a/app/scripts.js +++ b/app/scripts.js @@ -29,7 +29,7 @@ require('./styles/enfants.css'); require('./styles/foyer/capture-montant-ressource.css'); require('./styles/foyer/capture-continuation-ressource.css'); require('./styles/recap-situation.css'); -require('./styles/droits-eligibles-list.css'); +require('./styles/droits-eligibles-list.scss'); require('./styles/breadcrumb.css'); require('./js/common.js'); diff --git a/app/styles/droits-eligibles-list.css b/app/styles/droits-eligibles-list.css deleted file mode 100644 index 672268b2eb..0000000000 --- a/app/styles/droits-eligibles-list.css +++ /dev/null @@ -1,62 +0,0 @@ -.result .panel-opened .panel-heading { - background-color: whitesmoke; -} - -.result .panel-heading { - background-color: white; - padding: 5px 0; -} - -.result .panel-heading:hover { - background-color: #ededed; -} - -.result .panel-heading .montant { - font-weight: 600; - font-size: 18px; -} - -.result .panel-heading .montant-inconnu { - position: relative; - top: .25em; -} - -.result .panel-heading .montant-detail { - font-size: 12px; -} - -.result .panel-title .description { - padding-top: 0.5em; -} - -.needs-n-2 .panel-heading { - background-color: whitesmoke; - color: #888; -} - -.montant i { - position: relative; - top: .4em; -} - -.droit-logo { - height: 2em; - padding-left: 20px; -} - -.droit-logo img { - height: 100%; -} - -@media print { - .result .cta, .result .fa-chevron-down, .result .fa-chevron-right { - display: none; - } - .result .panel-collapse { - display: inline; - } -} - -.result { - page-break-inside: avoid; -} diff --git a/app/styles/droits-eligibles-list.scss b/app/styles/droits-eligibles-list.scss new file mode 100644 index 0000000000..f72920f9a9 --- /dev/null +++ b/app/styles/droits-eligibles-list.scss @@ -0,0 +1,211 @@ +@import '~font-awesome/scss/variables'; +$fa-font-path: '~font-awesome/fonts'; +@import '~font-awesome/scss/mixins'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables'; +@import 'variables'; +@import 'theme-variables'; + +.result .panel-opened .panel-heading { + background-color: whitesmoke; +} + +.result .panel-heading { + background-color: white; + padding: 5px 0; +} + +.result .panel-heading:hover { + background-color: #ededed; +} + +.result .panel-heading .montant { + font-weight: 600; + font-size: 18px; +} + +.result .panel-heading .montant-detail { + font-size: 12px; +} + +.result .panel-title .description { + padding-top: 0.5em; +} + +.needs-n-2 .panel-heading { + background-color: whitesmoke; + color: #888; +} + +.montant i { + position: relative; + top: .4em; +} + +.droit-logo { + height: 2em; + padding-left: 20px; +} + +.droit-logo img { + height: 100%; +} + +@media print { + .result .cta, .result .fa-chevron-down, .result .fa-chevron-right { + display: none; + } + .result .panel-collapse { + display: inline; + } +} + +.result { + page-break-inside: avoid; +} + +.dotted-line { + flex: 1; + display: block; + border-top: 1px dotted lighten(#333, 20%); + margin: 0 15px; +} + +.dotted-line:last-child { + margin-right: 0; +} + +.droits-eligibles-list { + display: block; + background-color: white; + box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); + margin-bottom: 40px; +} + +.droits-eligibles-list-item { + + padding: 10px 15px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + color: #333; + position: relative; + + @media (max-width: $screen-sm-max) { + + padding: 10px 15px; + border-bottom: 1px solid #e0e0e0; + + &:after { + @include fa-icon(); + content: $fa-var-chevron-right; + color: #ccc; + text-align: right; + margin-left: 15px; + } + } + + &:active, + &:focus, + &:hover { + text-decoration: none; + color: #999; + } + + &-left { + + display: flex; + flex-direction: row; + align-items: center; + + @media (max-width: $screen-sm-max) { + width: 80%; + } + + img { + width: 60px; + margin-right: 15px; + @media (max-width: $screen-xs-max) { + width: 40px; + } + } + + h2 { + margin: 0; + @media (max-width: $screen-xs-max) { + font-size: ($font-size-h2 * 0.6); + } + small { + display: block; + color: $link-color; + margin-top: 6px; + } + } + + &:hover { + h2 { + small { + text-decoration: underline; + } + } + } + } +} + +.droit-montant { + + display: inline-block; + text-align: right; + + .montant { + font-weight: 600; + font-size: 18px; + @media (min-width: $screen-md-min) { + font-size: 22px; + } + } + .montant-detail { + display: inline-block; + } +} + +.droit-detail { + + margin-bottom: 30px; + + &-heading { + + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + position: relative; + margin-bottom: 15px; + padding: 15px 0; + + h3 { + margin: 0; + font-weight: 600; + } + + } + + &-description { + margin-bottom: 15px; + } + + &-buttons { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; + } + + .alert-warning { + display: flex; + justify-content: space-between; + align-items: center; + font-weight: 400; + } +} diff --git a/app/views/partials/droit-montant.html b/app/views/partials/droit-montant.html new file mode 100644 index 0000000000..6593c42ef3 --- /dev/null +++ b/app/views/partials/droit-montant.html @@ -0,0 +1,11 @@ +
Pour en bénéficier, vous devez également :
+