Skip to content

yotta / pictogram

Go to a project
Commit 871f90dd by Sebastián Collado Montañez
Options

collections breadcrumbs

parent eee3167a
Inline Side-by-side
Showing with 34 additions and 51 deletions
sails/src/assets/scripts/modules/student/controllers/collections.js
...@@ -103,7 +103,7 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec ...@@ -103,7 +103,7 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
$scope.viewingGrid = activeGrid; $scope.viewingGrid = activeGrid;
$scope.loadingPictos = false; $scope.loadingPictos = false;
$scope.breadcrumbs = []; //clean breadcrumbs $scope.breadcrumbs = [{id:activeGrid.id,name:activeGrid.name}];
}) })
.error(function () { .error(function () {
$translate('error_loading_grid').then(function (translation) { $translate('error_loading_grid').then(function (translation) {
...@@ -115,17 +115,14 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec ...@@ -115,17 +115,14 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
/** /**
* Get a grid and show it * Get a grid and show it
* @param {[type]} idGrid ID from clicked grid * @param {[type]} idGrid ID from clicked grid
* @param {Boolean} isChild True if clicked for grid child * @param {[type]} clickOrigin What button is clicked: 'menu', 'breadcrumb' or 'parentPicto'
* @return {[type]} Show clicked grid * @return {[type]} Show clicked grid
*/ */
$scope.showGrid = function (idGrid, isChild) { $scope.showGrid = function (idGrid, clickOrigin) {
// Check if idGrid not null // Check if idGrid not null
if(idGrid == null) return; if(idGrid == null) return;
// Save last grid
var objLastGrid = {id:$scope.viewingGrid.id,name:$scope.viewingGrid.name};
$scope.loadingPictos = true; $scope.loadingPictos = true;
$scope.mainGrid = generateGrid(); $scope.mainGrid = generateGrid();
...@@ -137,11 +134,21 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec ...@@ -137,11 +134,21 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
$scope.viewingGrid = grid; $scope.viewingGrid = grid;
$scope.loadingPictos = false; $scope.loadingPictos = false;
// If clicked for child, add to breadcrumbs // Breadcrumbs update
if(isChild){ switch (clickOrigin) {
$scope.breadcrumbs.push(objLastGrid); case "menu":
}else{ // Clean breadcrumbs and put only one first element
$scope.breadcrumbs = []; //clean breadcrumbs $scope.breadcrumbs = [{id:grid.id,name:grid.name}];
break;
case "breadcrumb":
// Remove breadcrumb until selected
while(idGrid != $scope.breadcrumbs[$scope.breadcrumbs.length-1].id){
$scope.breadcrumbs.pop();
}
break;
case "parentPicto":
// Add new element
$scope.breadcrumbs.push({id:grid.id,name:grid.name});
} }
}) })
...@@ -152,31 +159,6 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec ...@@ -152,31 +159,6 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
}); });
}; };
$scope.showLastGrid = function (){
var objGrid = $scope.breadcrumbs.pop();
var idGrid = objGrid.id;
// Check if idGrid not null
if(idGrid == null) return;
$scope.loadingPictos = true;
$scope.mainGrid = generateGrid();
$http.get(config.backend + '/grid/' + idGrid)
.success(function (grid) {
grid.name = $translate.instant(grid.name);
grid.pictos.forEach(placePicto);
$scope.viewingGrid = grid;
$scope.loadingPictos = false;
})
.error(function () {
$translate('error_loading_grid').then(function (translation) {
ngToast.danger({ content: translation });
});
});
};
/** /**
* Load the grid list * Load the grid list
*/ */
......
sails/src/assets/scripts/modules/student/views/collections.html
...@@ -2,18 +2,19 @@ ...@@ -2,18 +2,19 @@
<div class="panel panel-default student_tab_panel"> <div class="panel panel-default student_tab_panel">
<div class="panel-body"> <div class="panel-body">
<!-- Grid header --> <!-- Grid breadcrumbs -->
<div class="container-fluid"> <div class="col-xs-10" ng-if="breadcrumbs.length != 0">
<div class="col-xs-8" style="margin-top:0.6em;margin-bottom:1em;"> <nav aria-label="breadcrumb" role="navigation">
<i class="fa fa-pencil-square-o fa-2x text-muted" aria-hidden="true"style="margin-right:0.25em;"></i> <ol class="breadcrumb">
<input type="text" class="grid-header-name" ng-model="viewingGrid.name" ng-blur="update_grid(viewingGrid)"> <li class="breadcrumb-item" ng-repeat="b in breadcrumbs track by $index"><a ng-click="showGrid(b.id,'breadcrumb')">{{b.name}}</a></li>
</div> </ol>
<!-- Grid header --> </nav>
<div class="col-xs-4 text-right" style="margin-bottom:1em;"> </div>
<button type="button" class="btn btn-default btn-grid-back" ng-if="breadcrumbs.length != 0" ng-click="showLastGrid()">
<i class="fa fa-arrow-circle-left" aria-hidden="true"></i> {{ 'return_to' | translate }} <b>{{ breadcrumbs[breadcrumbs.length-1].name }}</b> <!-- Grid title -->
</button> <div class="col-xs-10" style="margin-bottom:0.5em">
</div> <i class="fa fa-pencil-square-o fa-2x text-muted" aria-hidden="true" style="margin-right:0.3em;margin-left:0.3em;"></i>
<input type="text" class="grid-header-name" ng-model="viewingGrid.name" ng-blur="update_grid(viewingGrid)">
</div> </div>
<!-- Grid --> <!-- Grid -->
...@@ -55,14 +56,14 @@ ...@@ -55,14 +56,14 @@
<!-- Red cross --> <!-- Red cross -->
<img src="/app/img/redcross.png" <img src="/app/img/redcross.png"
ng-click="showGrid(studentPicto.id_child_grid,true)" ng-click="showGrid(studentPicto.id_child_grid,'parentPicto')"
class="red-cross-visibility disabled" class="red-cross-visibility disabled"
ng-if="studentPicto.attributes.status == 'disabled'"> ng-if="studentPicto.attributes.status == 'disabled'">
<!--./ Red cross --> <!--./ Red cross -->
<!-- Picto --> <!-- Picto -->
<img class="unselectable" <img class="unselectable"
ng-click="showGrid(studentPicto.id_child_grid,true)" ng-click="showGrid(studentPicto.id_child_grid,'parentPicto')"
ng-src="{{studentPicto.picto.uri}}" ng-src="{{studentPicto.picto.uri}}"
ng-class="{ 'novisible': studentPicto.attributes.status == 'invisible', 'deactivate': studentPicto.attributes.status == 'disabled' }" ng-class="{ 'novisible': studentPicto.attributes.status == 'invisible', 'deactivate': studentPicto.attributes.status == 'disabled' }"
ng-style="{ 'background-color': studentPicto.attributes.color || '#ffffff' }"> ng-style="{ 'background-color': studentPicto.attributes.color || '#ffffff' }">
...@@ -132,7 +133,7 @@ ...@@ -132,7 +133,7 @@
<label class="grid-panel-head">{{ 'show_grids' | translate }}</label> <label class="grid-panel-head">{{ 'show_grids' | translate }}</label>
<div class="form-group row"> <div class="form-group row">
<select class="grid-panel-select" ng-model="grid" ng-change="showGrid(grid,false)" size="7"> <select class="grid-panel-select" ng-model="grid" ng-change="showGrid(grid,'menu')" size="7">
<option value="{{grid.id}}" ng-repeat="grid in gridsList | orderBy: 'name' track by $index" ng-selected="grid.active" ng-class="(grid.active) ? 'grid-panel-select-optionselected' : '' "> <option value="{{grid.id}}" ng-repeat="grid in gridsList | orderBy: 'name' track by $index" ng-selected="grid.active" ng-class="(grid.active) ? 'grid-panel-select-optionselected' : '' ">
{{ grid.name }} {{ grid.name }}
</option> </option>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment