[ongoing] members tour

app/assets/javascripts/controllers/admin/members.js.erb

@@ -126,8 +126,8 @@ class MembersController {
 /**
  * Controller used in the members/groups management page
  */
-Application.Controllers.controller('AdminMembersController', ['$scope', '$sce', 'membersPromise', 'adminsPromise', 'growl', 'Admin', 'dialogs', '_t', 'Member', 'Export',
-  function ($scope, $sce, membersPromise, adminsPromise, growl, Admin, dialogs, _t, Member, Export) {
+Application.Controllers.controller('AdminMembersController', ['$scope', '$sce', 'membersPromise', 'adminsPromise', 'growl', 'Admin', 'dialogs', '_t', 'Member', 'Export', 'uiTourService',
+  function ($scope, $sce, membersPromise, adminsPromise, growl, Admin, dialogs, _t, Member, Export, uiTourService) {
   /* PRIVATE STATIC CONSTANTS */
 
     // number of users loaded each time we click on 'load more...'
@@ -163,6 +163,9 @@ Application.Controllers.controller('AdminMembersController', ['$scope', '$sce',
     // Admins ordering/sorting. Default: not sorted
     $scope.orderAdmin = null;
 
+    // default tab: members list
+    $scope.tabs = { active: 0 };
+
     /**
      * Change the members ordering criterion to the one provided
      * @param orderBy {string} ordering criterion
@@ -289,6 +292,92 @@ Application.Controllers.controller('AdminMembersController', ['$scope', '$sce',
       });
     };
 
+
+    /**
+     * Setup the feature-tour for the admin/members page.
+     * This is intended as a contextual help (when pressing F1)
+     */
+    $scope.setupMembersTour = function () {
+      // get the tour defined by the ui-tour directive
+      const uitour = uiTourService.getTourByName('members');
+      // TODO add the steps
+      uitour.createStep({
+        selector: 'body',
+        stepId: 'welcome',
+        order: 0,
+        title: _t('app.admin.tour.members.welcome.title'),
+        content: _t('app.admin.tour.members.welcome.content'),
+        placement: 'bottom',
+        orphan: true
+      });
+      uitour.createStep({
+        selector: '.members-management .members-list',
+        stepId: 'list',
+        order: 1,
+        title: _t('app.admin.tour.members.list.title'),
+        content: _t('app.admin.tour.members.list.content'),
+        placement: 'top'
+      });
+      uitour.createStep({
+        selector: '.members-management .search-members',
+        stepId: 'search',
+        order: 2,
+        title: _t('app.admin.tour.members.search.title'),
+        content: _t('app.admin.tour.members.search.content'),
+        placement: 'bottom'
+      });
+      uitour.createStep({
+        selector: '.members-management .filter-members',
+        stepId: 'filter',
+        order: 3,
+        title: _t('app.admin.tour.members.filter.title'),
+        content: _t('app.admin.tour.members.filter.content'),
+        placement: 'bottom'
+      });
+      uitour.createStep({
+        selector: '.members-management .show-more',
+        stepId: 'more',
+        order: 4,
+        title: _t('app.admin.tour.members.more.title'),
+        content: _t('app.admin.tour.members.more.content', { MAX: USERS_PER_PAGE }),
+        placement: 'top'
+      });
+      uitour.createStep({
+        selector: 'body',
+        stepId: 'conclusion',
+        order: 4,
+        title: _t('app.admin.tour.conclusion.title'),
+        content: _t('app.admin.tour.conclusion.content'),
+        placement: 'bottom',
+        orphan: true
+      });
+      // on step change, change the active tab if needed
+      uitour.on('stepChanged', function (nextStep) {
+        if (nextStep.stepId === 'list') {
+          $scope.tabs.active = 0;
+        }
+      });
+      // on tour end, save the status in database
+      uitour.on('ended', function () {
+        if (uitour.getStatus() === uitour.Status.ON && $scope.currentUser.profile.tours.indexOf('members') < 0) {
+          Member.completeTour({ id: $scope.currentUser.id }, { tour: 'members' }, 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('members') < 0) {
+        uitour.start();
+      }
+      // start this tour when an user press F1 - this is contextual help
+      window.addEventListener('keydown', function (e) {
+        if (e.key === 'F1') {
+          e.preventDefault();
+          uitour.start();
+        }
+      });
+    }
+
     /* PRIVATE SCOPE */
 
     /**

app/assets/javascripts/controllers/admin/trainings.js.erb

@@ -183,9 +183,7 @@ Application.Controllers.controller('TrainingsAdminController', ['$scope', '$stat
     ];
 
     // default tab: trainings list
-    $scope.tabs = {
-      active: 0
-    };
+    $scope.tabs = { active: 0 };
 
     /**
      * In the trainings listing tab, return the stringified list of machines associated with the provided training
@@ -341,7 +339,7 @@ Application.Controllers.controller('TrainingsAdminController', ['$scope', '$stat
 
     /**
      * Setup the feature-tour for the admin/trainings page.
-     * This is intended as a contextual help
+     * This is intended as a contextual help (when pressing F1)
      */
     $scope.setupTrainingsTour = function () {
       // get the tour defined by the ui-tour directive

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

@@ -21,28 +21,33 @@
   </div>
 </section>
 
-<section class="m-lg">
+<section class="m-lg members-management"
+         ui-tour="members"
+         ui-tour-backdrop="true"
+         ui-tour-template-url="'<%= asset_path "shared/tour-step-template.html" %>'"
+         ui-tour-use-hotkeys="true"
+         post-render="setupMembersTour">
   <div class="row">
     <div class="col-md-12">
-      <uib-tabset justified="true">
+      <uib-tabset justified="true" active="tabs.active">
 
-        <uib-tab heading="{{ 'app.admin.members.members' | translate }}">
+        <uib-tab heading="{{ 'app.admin.members.members' | translate }}" index="0">
           <ng-include src="'<%= asset_path "admin/members/members.html" %>'"></ng-include>
         </uib-tab>
 
-        <uib-tab heading="{{ 'app.admin.members.administrators' | translate }}">
+        <uib-tab heading="{{ 'app.admin.members.administrators' | translate }}" index="1">
           <ng-include src="'<%= asset_path "admin/members/administrators.html" %>'"></ng-include>
         </uib-tab>
 
-        <uib-tab heading="{{ 'app.admin.members.groups' | translate }}">
+        <uib-tab heading="{{ 'app.admin.members.groups' | translate }}" index="2">
           <div ui-view="groups"></div>
         </uib-tab>
 
-        <uib-tab heading="{{ 'app.admin.members.tags' | translate }}">
+        <uib-tab heading="{{ 'app.admin.members.tags' | translate }}" index="3">
           <div ui-view="tags"></div>
         </uib-tab>
 
-        <uib-tab heading="{{ 'app.admin.members.authentication' | translate }}">
+        <uib-tab heading="{{ 'app.admin.members.authentication' | translate }}" index="4">
           <div ui-view="authentification"></div>
         </uib-tab>
       </uib-tabset>

app/assets/templates/admin/members/members.html.erb

@@ -1,7 +1,7 @@
 <div class="col-md-5 m-t-lg">
   <div class="row">
     <div class="col-lg-7">
-      <div class="form-group">
+      <div class="form-group search-members">
         <div class="input-group">
           <span class="input-group-addon"><i class="fa fa-filter"></i></span>
           <input type="text" ng-model="member.searchText" class="form-control" placeholder="{{ 'app.admin.members.search_for_an_user' | translate }}" ng-change="updateTextSearch()">
@@ -9,7 +9,7 @@
       </div>
     </div>
     <div class="col-lg-5">
-      <div class="form-group">
+      <div class="form-group filter-members">
         <select ng-model="member.memberFilter" ng-change="updateMemberFilter()" class="form-control">
           <option ng-repeat="filter in member.memberFilters" value="{{filter}}" translate>{{ 'app.admin.members.group_form.member_filter_'+filter }}</option>
         </select>
@@ -32,7 +32,7 @@
     <iframe name="export-frame" height="0" width="0" class="none"></iframe>
   </div>
 
-  <table class="table">
+  <table class="table members-list">
     <thead>
     <tr>
       <th style="width:15%"><a href="" ng-click="setOrderMember('last_name')">{{ 'app.admin.members.surname' | translate }} <i class="fa fa-arrows-v" ng-class="{'fa fa-sort-alpha-asc': member.order=='last_name', 'fa fa-sort-alpha-desc': member.order=='-last_name', 'fa fa-arrows-v': member.order }"></i></a></th>
@@ -67,6 +67,6 @@
     </tbody>
   </table>
   <div class="text-center">
-    <button class="btn btn-warning" ng-click="showNextMembers()" ng-hide="member.noMore"><i class="fa fa-search-plus" aria-hidden="true"></i> {{ 'app.admin.members.display_more_users' | translate }}</button>
+    <button class="btn btn-warning show-more" ng-click="showNextMembers()" ng-hide="member.noMore"><i class="fa fa-search-plus" aria-hidden="true"></i> {{ 'app.admin.members.display_more_users' | translate }}</button>
   </div>
 </div>

config/locales/app.admin.fr.yml

@@ -1076,3 +1076,19 @@ fr:
           tracking:
             title: "Suivi formations"
             content: "Une fois qu'une session de formation est terminée, vous pourrez valider la formation pour les membres présents depuis cet écran. Cette validation est indispensable pour leur permettre d'utiliser les machines associées."
+        members:
+          welcome:
+            title: "Gestion des utilisateurs"
+            content: "Ici vous pourrez créer, modifier et supprimer des membres et des administrateurs. Vous pourrez également réaliser des imports et des exports avec des fichiers de tableur, ou connecter un logiciel de SSO."
+          list:
+            title: "Liste des membres"
+            content: "Par défaut, ce tableau liste l'ensemble des membres de votre Fab-Manager. Vous pouvez trier la liste dans un ordre différent en cliquant sur l'entête de chaque colonne."
+          search:
+            title: "Rechercher un utilisateur"
+            content: "Ce champ de saisie vous permet de faire une recherche en texte libre sur l'ensemble des colonnes du tableau ci-dessous."
+          filter:
+            title: "Filtrer la liste"
+            content: "Filtrez la liste ci-dessous pour afficher uniquement les utilisateurs n'ayant pas confirmé leur adresse mail ou les comptes inactifs depuis plus de 3 ans.<br>Pour information, la RGPD impose de supprimer les comptes inactifs depuis plus de 3 ans."
+          more:
+            title: "Afficher plus d'utilisateurs"
+            content: "Par défaut, seuls les {MAX} premiers membres correspondant à la recherche courante sont affichés. Cliquez ici pour afficher les résultats suivants."