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 = [];
angular.forEach($scope.agents.items, function(agent){
if(agent.selected){
@ -133,7 +133,6 @@ app.controller('agentsPreviewController', function ($scope, $mdDialog, DataFacto
if(selectedAgents.length > 0){
switch (operation){
case "delete":
if(confirm("Do you want to delete the selected agents?")){
apiReq.request('DELETE', '/agents', requestData)
.then(function (data) {
load();
@ -146,8 +145,6 @@ app.controller('agentsPreviewController', function ($scope, $mdDialog, DataFacto
notify.info(data.data.msg);
}
}, printError);
}
break;
}
}
@ -186,7 +183,7 @@ app.controller('agentsPreviewController', function ($scope, $mdDialog, DataFacto
}
}
$scope.showPrerenderedDialog = function(ev) {
$scope.showNewAgentDialog = function(ev) {
$mdDialog.show({
contentElement: '#newAgentDialog',
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.newAgentKey = '';
$mdDialog.hide();

View File

@ -9,11 +9,28 @@ body{
width: 5.6rem;
height: 5.6rem;
border-radius: 50%;
margin: 30px;
}
.md-button.md-fab md-icon{
color: white;
}
div.agent-buttons {
position: fixed;
bottom: 0;
right: 0;
position: fixed;
color: white;
margin: 30px;
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{

View File

@ -87,16 +87,6 @@
</md-input-container>
</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>
<md-toolbar layout="row">
<div class="md-toolbar-tools">
@ -134,24 +124,15 @@
</md-list-item>
</md-list>
<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>
<md-button class="md-fab" ng-click="showPrerenderedDialog($event)" >
<div class="agent-buttons">
<md-button class="md-fab add-agent-icon" ng-click="showNewAgentDialog($event)" >
<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 class="md-dialog-container" id="newAgentDialog">
<div ng-show="newAgentKey != ''">