Using material dialog

This commit is contained in:
malbarral 2017-08-02 17:49:23 +02:00
parent 4fd3c06563
commit c4e16906c9
3 changed files with 58 additions and 47 deletions

View File

@ -120,7 +120,7 @@ app.controller('agentsPreviewController', function ($scope, $mdDialog, DataFacto
}; };
$scope.bulkOperation = function (operation){ function bulkOperation(operation){
var selectedAgents = []; var selectedAgents = [];
angular.forEach($scope.agents.items, function(agent){ angular.forEach($scope.agents.items, function(agent){
if(agent.selected){ if(agent.selected){
@ -133,21 +133,18 @@ app.controller('agentsPreviewController', function ($scope, $mdDialog, DataFacto
if(selectedAgents.length > 0){ if(selectedAgents.length > 0){
switch (operation){ switch (operation){
case "delete": case "delete":
if(confirm("Do you want to delete the selected agents?")){ apiReq.request('DELETE', '/agents', requestData)
apiReq.request('DELETE', '/agents', requestData) .then(function (data) {
.then(function (data) { load();
load(); if(data.data.ids.length!=0){
if(data.data.ids.length!=0){ data.data.ids.forEach(function(id) {
data.data.ids.forEach(function(id) { notify.error('The agent ' + id + ' was not deleted.');
notify.error('The agent ' + id + ' was not deleted.'); });
}); }
} else{
else{ notify.info(data.data.msg);
notify.info(data.data.msg); }
} }, printError);
}, printError);
}
break; break;
} }
} }
@ -186,7 +183,7 @@ app.controller('agentsPreviewController', function ($scope, $mdDialog, DataFacto
} }
} }
$scope.showPrerenderedDialog = function(ev) { $scope.showNewAgentDialog = function(ev) {
$mdDialog.show({ $mdDialog.show({
contentElement: '#newAgentDialog', contentElement: '#newAgentDialog',
parent: angular.element(document.body), parent: angular.element(document.body),
@ -195,6 +192,22 @@ app.controller('agentsPreviewController', function ($scope, $mdDialog, DataFacto
}); });
}; };
$scope.showDeletePrompt = function(ev) {
// Appending dialog to document.body to cover sidenav in docs app
var confirm = $mdDialog.prompt()
.title('Remove selected agents')
.textContent('Write REMOVE to remove all the selected agents. CAUTION! This action can not be undone.')
.targetEvent(ev)
.ok('Remove')
.cancel('Close');
$mdDialog.show(confirm).then(function(result) {
if(result==='REMOVE'){
bulkOperation('delete');
};
});
};
$scope.hidePrerenderedDialog = function(ev) { $scope.hidePrerenderedDialog = function(ev) {
$scope.newAgentKey = ''; $scope.newAgentKey = '';
$mdDialog.hide(); $mdDialog.hide();

View File

@ -9,11 +9,28 @@ body{
width: 5.6rem; width: 5.6rem;
height: 5.6rem; height: 5.6rem;
border-radius: 50%; border-radius: 50%;
margin: 30px; }
.md-button.md-fab md-icon{
color: white;
}
div.agent-buttons {
position: fixed;
bottom: 0; bottom: 0;
right: 0; right: 0;
position: fixed; margin: 30px;
color: white; z-index: 5;
}
.md-button.add-agent-icon {
position:relative;
margin: 0 10px 20px 0;
}
.md-button.delete-agent-icon {
background-color: #e8488b;
position: relative;
margin: 0 30px 20px 0;
} }
.new-agent-key{ .new-agent-key{

View File

@ -87,16 +87,6 @@
</md-input-container> </md-input-container>
</div> </div>
</div> </div>
<div layout="row" layout-align="start stretch">
<div class="top-bulk-action" layout="row" class="sideNavBox" flex="20">
<md-input-container flex class="md-whiteframe-z1 md-input-margin">
<md-select id="eventBox" ng-model="$parent._bulkOperation" ng-change="bulkOperation($parent._bulkOperation)" aria-label="Filter by status">
<md-option value="nothing">Action</md-option>
<md-option value="delete">Delete selected</md-option>
</md-select>
</md-input-container>
</div>
</div>
<div> <div>
<md-toolbar layout="row"> <md-toolbar layout="row">
<div class="md-toolbar-tools"> <div class="md-toolbar-tools">
@ -134,24 +124,15 @@
</md-list-item> </md-list-item>
</md-list> </md-list>
<md-divider></md-divider> <md-divider></md-divider>
<div flex layout="column" layout-align="space-between stretch">
<div layout="row" layout-align="start stretch">
<div layout="row" class="sideNavBox" flex="20">
<md-input-container flex class="md-whiteframe-z1 md-input-margin">
<md-select id="eventBox" ng-model="$parent._bulkOperation" ng-change="bulkOperation($parent._bulkOperation)" aria-label="Filter by status">
<md-option value="nothing">Action</md-option>
<md-option value="delete">Delete selected</md-option>
</md-select>
</md-input-container>
</div>
</div>
</div>
</div> </div>
<md-button class="md-fab" ng-click="showPrerenderedDialog($event)" > <div class="agent-buttons">
<md-icon md-font-library="material-icons">add</md-icon> <md-button class="md-fab add-agent-icon" ng-click="showNewAgentDialog($event)" >
</md-button> <md-icon md-font-library="material-icons">add</md-icon>
</md-button>
<md-button class="md-fab delete-agent-icon" ng-click="showDeletePrompt($event)" >
<md-icon md-font-library="material-icons">delete</md-icon>
</md-button>
</div>
<div style="visibility: hidden"> <div style="visibility: hidden">
<div class="md-dialog-container" id="newAgentDialog"> <div class="md-dialog-container" id="newAgentDialog">
<div ng-show="newAgentKey != ''"> <div ng-show="newAgentKey != ''">