loading message for pictos in categories. Broken images not shown now (#494)

sails/src/api/controllers/PictoController.js

@@ -76,13 +76,35 @@ module.exports = {
    *   ]
    */
   fromcategory: function (req, res) {
+    var l = [];
+    var fs = require('fs');
+
     Supervisor.findOne({ id: req.params.id }).then(function (supervisor) {
       if (supervisor) {
         Picto.find({ category: req.params.id_cat })
         .populate('expressions', { lang: supervisor.lang })
         .then(function (pictos) {
-          sails.log.debug(pictos.length + " pictos sent for category " + req.params.id_cat + " in language " + supervisor.lang);
-          res.ok(pictos);
+          async.eachSeries(pictos, function(picto, next_cb) {
+
+            // check picto has expressions associated in student language
+            if (picto.expressions.length == 0 || picto.expressions[0].text.length == 0)
+              return next_cb();
+
+            // check picto image is available
+            picto.imageFileExists((found) => {
+                if (found) {
+                  l.push(picto);
+                  next_cb();
+                }
+                else
+                  next_cb();
+            });
+          },
+          function (err) { // loop has end
+            if (err) throw err;
+            sails.log.debug(pictos.length + " pictos sent for category " + req.params.id_cat + " in language " + supervisor.lang);
+            res.ok(l);
+          }); // end async.eachSeries
         })
         .catch(() => res.badRequest());
       } else {
@@ -277,7 +299,7 @@ module.exports = {
           return res.serverError("Error uploading " + err ? err : "");
 
         Picto.create({
-          uri: pictoFileName, 
+          uri: pictoFileName,
           source: 1, // @TODO check for other sources
           owner: supervisor.id
         })

sails/src/api/models/Picto.js

@@ -79,6 +79,25 @@ module.exports = {
         return path.join(sails.config.pictogram.paths.supervisorCustomPictoDirectory, picto.uri);
       else
         return path.join(sails.config.pictogram.paths.public, picto.uri);
+    },
+
+    /**
+    * Returns TRUE if picto image file exists, FALSE otherwise
+    */
+    imageFileExists: function (cb) {
+      var picto = this.toObject();
+      var path = require('path');
+      var fs = require('fs');
+      var picto_path;
+
+      if (picto.owner !== null)
+        picto_path = path.join(sails.config.pictogram.paths.supervisorCustomPictoDirectory, picto.uri);
+      else
+        picto_path = path.join(sails.config.pictogram.paths.public, picto.uri);
+
+      fs.access(picto_path, fs.F_OK, function(err) {
+        return cb(!err);
+      });
     }
   }
 };

sails/src/api/models/Student.js

@@ -329,6 +329,7 @@ module.exports = {
   // student
   pictos: function(id_stu, callback) {
     var l = [];
+    var fs = require('fs');
 
     Student.findOne(id_stu)
     .then((student) => {
@@ -362,22 +363,21 @@ module.exports = {
             return next_cb();
 
           // check picto image is available
-          var fs = require('fs');
-          var img_path = picto.getPath();
-          fs.access(img_path, fs.F_OK, function(err) {
-            if (err) return next_cb();
-
-            // Now we have everything, so we add the picto to the list
-            var stuPictoToAdd = {
-               "id": stuPicto.id,
-               "picto": stuPicto.picto,
-               "expression": picto.expressions[0],
-               "attributes": stuPicto.attributes,
-               "tags": picto.tags ? picto.tags : []
-            };
-
-            l.push(stuPictoToAdd);
-            next_cb();
+          picto.imageFileExists(function(found) {
+            if (found) {
+              // Now we have everything, so we add the picto to the list
+              var stuPictoToAdd = {
+                 "id": stuPicto.id,
+                 "picto": stuPicto.picto,
+                 "expression": picto.expressions[0],
+                 "attributes": stuPicto.attributes,
+                 "tags": picto.tags ? picto.tags : []
+              };
+              l.push(stuPictoToAdd);
+              next_cb();
+            } else {
+              next_cb();
+            }
           });
         })
         .catch((err) => {

sails/src/assets/scripts/modules/student/controllers/addpicto.js

@@ -29,6 +29,7 @@ dashboardControllers.controller('AddPictoCtrl', function (
   $scope.breadcrumbs = [];
   $scope.addedPictos = {};
   $scope.freeAddedPictos = [];
+  $scope.loadingCatPictos = false;
 
   $scope.categories.forEach(function (category) {
     $scope.addedPictos[category.picto.id] = [];
@@ -55,18 +56,20 @@ dashboardControllers.controller('AddPictoCtrl', function (
   // Load pictos from a category
   //
   $scope.load_pictos = function (categoryId) {
+    $scope.loadingCatPictos = true;
+    $scope.pictos = [];
     $http.get(config.backend + '/sup/' + supervisor.id + '/pic_fromcategory/' + categoryId)
     .success(function (data) {
-      if (data) {
-        $scope.pictos = data;
-      } else {
-        $scope.pictos = [];
-      }
+      if (data)
+        $scope.pictos = data;      
+      $scope.loadingCatPictos = false;
+      setTimeout(function () { $scope.$apply(); });
     })
     .error(function () {
       $translate('error_loading_pictos').then(function (translation) {
         ngToast.danger({ content: translation });
       });
+      $scope.loadingCatPictos = false;
     });
   };
 

sails/src/assets/scripts/modules/student/views/addpicto.html

@@ -34,7 +34,9 @@
       <alert ng-show="alert.show" ng-model="alert" type="{{alert.type}}" close="closeAlert()">{{alert.msg}}</alert>
     </div>
     <div class="row">
-      <div id="collections" class="col-md-9">
+      <div id="collections" class="col-md-9  category-collection"
+      ng-class="{ 'category-collection-loading': loadingCatPictos }"
+      data-loading="{{ 'loading_pictos' | translate }}">
         <div class="input-group" id="search_pictos_box">
           <input type="text" class="form-control" placeholder="{{ 'filter' | translate }}" ng-model="srch_term_picto" id="srch_term_picto">
             <span class="input-group-addon glyphicon glyphicon-search" id="basic-addon2" aria-hidden="true"></span>

sails/src/assets/styles/picto-grid.less

@@ -8,7 +8,7 @@
 /**
  * Show "loading" while pictos haven't load
  */
-.student-collection {
+.student-collection, .category-collection {
   position: relative;