Show remaining training credits in the dashboard

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog Fab-manager
 
 ## Next release
+- Show remaining training credits in the dashboard
 - Allow writing short rich descriptions for each subscription plan
 - Allow inserting hyperlinks in customized info messages
 - Use the primary color to display plans' price in the public view

app/frontend/src/javascript/controllers/dashboard.js

@@ -12,7 +12,7 @@
  */
 'use strict';
 
-Application.Controllers.controller('DashboardController', ['$scope', 'memberPromise', 'SocialNetworks', function ($scope, memberPromise, SocialNetworks) {
+Application.Controllers.controller('DashboardController', ['$scope', 'memberPromise', 'trainingsPromise', 'SocialNetworks', function ($scope, memberPromise, trainingsPromise, SocialNetworks) {
   // Current user's profile
   $scope.user = memberPromise;
 
@@ -22,6 +22,24 @@ Application.Controllers.controller('DashboardController', ['$scope', 'memberProm
     networks: SocialNetworks
   };
 
+  /**
+   * Check if the member has used his training credits for the given credit
+   * @param trainingCredits array of credits used by the member
+   * @param trainingId id of the training to find
+   */
+  $scope.hasUsedTrainingCredit = function (trainingCredits, trainingId) {
+    return trainingCredits.find(tc => tc.training_id === trainingId);
+  };
+
+  /**
+   * Return the name associated with the provided training ID
+   * @param trainingId training identifier
+   * @return {string}
+   */
+  $scope.getTrainingName = function (trainingId) {
+    return trainingsPromise.find(t => t.id === trainingId).name;
+  };
+
   /* PRIVATE SCOPE */
 
   /**

app/frontend/src/javascript/router.js

@@ -143,7 +143,8 @@ angular.module('application.router', ['ui.router'])
         abstract: true,
         url: '/dashboard',
         resolve: {
-          memberPromise: ['Member', 'currentUser', function (Member, currentUser) { return Member.get({ id: currentUser.id }).$promise; }]
+          memberPromise: ['Member', 'currentUser', function (Member, currentUser) { return Member.get({ id: currentUser.id }).$promise; }],
+          trainingsPromise: ['Training', function (Training) { return Training.query().$promise; }]
         }
       })
       .state('app.logged.dashboard.profile', {

app/frontend/templates/dashboard/trainings.html

@@ -7,11 +7,33 @@
 
   </section>
 
+  <div class="row no-gutter">
+    <div class="col-md-10">
+      <div class="widget panel b-a m m-t-lg">
+        <div class="panel-heading b-b">
+          <h4 class="text-u-c"><i class="fa fa-tag m-r-xs"></i>{{ 'app.logged.dashboard.trainings.your_training_credits' |  translate }}</h4>
+        </div>
+        <div class="widget-content bg-light wrapper r-b">
+          <span ng-show="!user.subscribed_plan" translate>{{ 'app.logged.dashboard.trainings.subscribe_for_credits' }}</span>
+          <span ng-show="user.subscribed_plan" translate>{{ 'app.logged.dashboard.trainings.register_for_free' }}</span>
+          <ul ng-if="user.subscribed_plan" class="list-unstyled">
+            <li ng-repeat="c in user.subscribed_plan.training_credits" ng-show="!hasUsedTrainingCredit(user.training_credits, c.training_id)">
+              {{getTrainingName(c.training_id)}}
+              <button type="button" class="btn btn-default m-l btn-sm" ui-sref="app.logged.trainings_reserve({id: c.training_id})" translate>
+                {{ 'app.logged.dashboard.trainings.book_here' }}
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+
 
   <div class="row no-gutter">
 
     <div class="col-md-4">
-      <div class="widget panel b-a m m-t-lg">
+      <div class="widget panel b-a m">
         <div class="panel-heading b-b">
           <h4 class="text-u-c"><i class="fa fa-tag m-r-xs"></i> {{ 'app.logged.dashboard.trainings.your_next_trainings' | translate }}</h4>
         </div>

config/locales/app.logged.en.yml

@@ -109,6 +109,10 @@ en:
           your_previous_trainings: "Your previous trainings"
           your_approved_trainings: "Your approved trainings"
           no_trainings: "No trainings"
+          your_training_credits: "Your training credits"
+          subscribe_for_credits: "Subscribe to benefit from free trainings"
+          register_for_free: "Register for free to the following trainings:"
+          book_here: "Book here"
         #dashboard: my events
         events:
           your_next_events: "Your next events"

config/locales/app.logged.fr.yml

@@ -109,6 +109,10 @@ fr:
           your_previous_trainings: "Vos formations passées"
           your_approved_trainings: "Vos formations validées"
           no_trainings: "Aucune formation"
+          your_training_credits: "Vos crédits formation"
+          subscribe_for_credits: "Abonnez-vous pour bénéficier de formations gratuites"
+          register_for_free: "Inscrivez-vous gratuitement aux formations suivantes :"
+          book_here: "Réserver"
         #dashboard: my events
         events:
           your_next_events: "Vos prochains événements"