open-api tour

app/assets/javascripts/controllers/admin/open_api_clients.js

@@ -10,9 +10,9 @@
  * DS207: Consider shorter variations of null checks
  * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
  */
-Application.Controllers.controller('OpenAPIClientsController', ['$scope', 'clientsPromise', 'growl', 'OpenAPIClient', 'dialogs', '_t',
+Application.Controllers.controller('OpenAPIClientsController', ['$scope', 'clientsPromise', 'growl', 'OpenAPIClient', 'dialogs', '_t', 'Member', 'uiTourService',
-  function ($scope, clientsPromise, growl, OpenAPIClient, dialogs, _t) {
+  function ($scope, clientsPromise, growl, OpenAPIClient, dialogs, _t, Member, uiTourService) {
-  /* PUBLIC SCOPE */
+    /* PUBLIC SCOPE */
 
     // clients list
     $scope.clients = clientsPromise;
@@ -74,7 +74,7 @@ Application.Controllers.controller('OpenAPIClientsController', ['$scope', 'clien
         })
       );
 
-    return $scope.resetToken = client =>
+    $scope.resetToken = client =>
       dialogs.confirm({
         resolve: {
           object () {
@@ -91,6 +91,82 @@ Application.Controllers.controller('OpenAPIClientsController', ['$scope', 'clien
           return growl.success(_t('app.admin.open_api_clients.access_successfully_revoked'));
         })
       );
+
+    /**
+     * Setup the feature-tour for the admin/open_api_clients page.
+     * This is intended as a contextual help (when pressing F1)
+     */
+    $scope.setupOpenAPITour = function () {
+      // get the tour defined by the ui-tour directive
+      const uitour = uiTourService.getTourByName('open-api');
+      uitour.createStep({
+        selector: 'body',
+        stepId: 'welcome',
+        order: 0,
+        title: _t('app.admin.tour.open_api.welcome.title'),
+        content: _t('app.admin.tour.open_api.welcome.content'),
+        placement: 'bottom',
+        orphan: true
+      });
+      uitour.createStep({
+        selector: '.heading .documentation-button',
+        stepId: 'doc',
+        order: 1,
+        title: _t('app.admin.tour.open_api.doc.title'),
+        content: _t('app.admin.tour.open_api.doc.content'),
+        placement: 'bottom'
+      });
+      uitour.createStep({
+        selector: 'body',
+        stepId: 'conclusion',
+        order: 2,
+        title: _t('app.admin.tour.conclusion.title'),
+        content: _t('app.admin.tour.conclusion.content'),
+        placement: 'bottom',
+        orphan: true
+      });
+      // on tour end, save the status in database
+      uitour.on('ended', function () {
+        if (uitour.getStatus() === uitour.Status.ON && $scope.currentUser.profile.tours.indexOf('open-api') < 0) {
+          Member.completeTour({ id: $scope.currentUser.id }, { tour: 'open-api' }, function (res) {
+            $scope.currentUser.profile.tours = res.tours;
+          });
+        }
+      });
+      // if the user has never seen the tour, show him now
+      if ($scope.currentUser.profile.tours.indexOf('open-api') < 0) {
+        uitour.start();
+      }
+      // start this tour when an user press F1 - this is contextual help
+      window.addEventListener('keydown', handleF1);
+    };
+
+    /* PRIVATE SCOPE */
+
+    /**
+     * Kind of constructor: these actions will be realized first when the controller is loaded
+     */
+    const initialize = function () {
+      // listen the $destroy event of the controller to remove the F1 key binding
+      $scope.$on('$destroy', function () {
+        window.removeEventListener('keydown', handleF1);
+      });
+    };
+
+    /**
+     * Callback used to trigger the feature tour when the user press the F1 key.
+     * @param e {KeyboardEvent}
+     */
+    const handleF1 = function (e) {
+      if (e.key === 'F1') {
+        e.preventDefault();
+        const tour = uiTourService.getTourByName('open-api');
+        if (tour) { tour.start(); }
+      }
+    };
+
+    // !!! MUST BE CALLED AT THE END of the controller
+    return initialize();
   }
 
 ]);

app/assets/javascripts/controllers/admin/project_elements.js

@@ -168,8 +168,8 @@ Application.Controllers.controller('ProjectElementsController', ['$scope', '$sta
         selector: 'body',
         stepId: 'welcome',
         order: 0,
-        title: _t('app.admin.tour.projectElements.welcome.title'),
+        title: _t('app.admin.tour.project_elements.welcome.title'),
-        content: _t('app.admin.tour.projectElements.welcome.content'),
+        content: _t('app.admin.tour.project_elements.welcome.content'),
         placement: 'bottom',
         orphan: true
       });
@@ -177,8 +177,8 @@ Application.Controllers.controller('ProjectElementsController', ['$scope', '$sta
         selector: '.heading .abuses-button',
         stepId: 'abuses',
         order: 1,
-        title: _t('app.admin.tour.projectElements.abuses.title'),
+        title: _t('app.admin.tour.project_elements.abuses.title'),
-        content: _t('app.admin.tour.projectElements.abuses.content'),
+        content: _t('app.admin.tour.project_elements.abuses.content'),
         placement: 'bottom'
       });
       uitour.createStep({

app/assets/templates/admin/open_api_clients/index.html.erb

@@ -13,7 +13,7 @@
 
     <div class="col-xs-12 col-sm-12 col-md-4 b-t hide-b-md">
       <section class="heading-actions wrapper">
-        <a href="<%= apipie_apipie_path({version: 'v1'}) %>" target="_blank" class="btn btn-info b-2x rounded m-t-sm">
+        <a href="<%= apipie_apipie_path({version: 'v1'}) %>" target="_blank" class="btn btn-info b-2x rounded m-t-sm documentation-button">
           <i class="fa fa-book" aria-hidden="true"></i>&nbsp;
            <span translate>{{ 'app.admin.open_api_clients.api_documentation' }}</span>&nbsp;
           <span class="exponent"><i class="fa fa-external-link" aria-hidden="true"></i></span>
@@ -23,7 +23,13 @@
   </div>
 </section>
 
-<section class="m-lg">
+<section class="m-lg open-api-clients"
+         ui-tour="open-api"
+         ui-tour-backdrop="true"
+         ui-tour-template-url="'<%= asset_path "shared/tour-step-template.html" %>'"
+         ui-tour-use-hotkeys="true"
+         ui-tour-scroll-parent-id="content-main"
+         post-render="setupOpenAPITour">
   <div class="row">
     <div class="col-md-12">
       <div class="col-md-12">

config/locales/app.admin.fr.yml

@@ -1195,7 +1195,7 @@ fr:
           prices:
             title: "Catégories tarifaires"
             content: "Le prix des évènements ne dépend pas des groupes ou des abonnements, mais des catégories que vous définissez sur cette page."
-        projectElements:
+        project_elements:
           welcome:
             title: "Gérer les éléments projet"
             content: "Vous pouvez définir ici l'ensemble des éléments qui seront disponibles pour que les membres documentent les projets qu'ils réalisent."