IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-19 13:03:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

dashboard_history: restored unsaved changes modal to simple cancel, discard, save

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-06-06 14:27:30 +02:00
parent 88da3a99e1
commit 546d489dd3
4 changed files with 86 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/features/dashboard/all.js
View File

@ -13,6 +13,7 @@ define([
'./viewStateSrv',
'./time_srv',
'./unsavedChangesSrv',
'./unsaved_changes_modal',
'./timepicker/timepicker',
'./graphiteImportCtrl',
'./impression_store',

46
public/app/features/dashboard/unsavedChangesSrv.js
View File

@ -134,34 +134,31 @@ function(angular, _) {
return currentJson !== originalJson;
};
p.discardChanges = function() {
this.original = null;
this.gotoNext();
};
p.open_modal = function() {
var tracker = this;
var dashboard = this.current;
var modalScope = this.scope.$new();
var clone = dashboard.getSaveModelClone();
modalScope.clone = clone;
modalScope.ignore = function() {
tracker.original = null;
tracker.goto_next();
};
var cancel = $rootScope.$on('dashboard-saved', function() {
cancel();
$timeout(function() {
tracker.goto_next();
});
});
$rootScope.appEvent('show-modal', {
src: 'public/app/partials/unsaved-changes.html',
scope: modalScope,
modalClass: 'modal--narrow'
templateHtml: '<unsaved-changes-modal dismiss="dismiss()"></unsaved-changes-modal>',
modalClass: 'modal--narrow confirm-modal'
});
};
p.goto_next = function() {
p.saveChanges = function() {
var self = this;
var cancel = $rootScope.$on('dashboard-saved', function() {
cancel();
$timeout(function() {
self.gotoNext();
});
});
$rootScope.appEvent('save-dashboard');
};
p.gotoNext = function() {
var baseLen = $location.absUrl().length - $location.url().length;
var nextUrl = this.next.substring(baseLen);
$location.url(nextUrl);
@ -169,7 +166,8 @@ function(angular, _) {
this.Tracker = Tracker;
this.init = function(dashboard, scope) {
return new Tracker(dashboard, scope, 1000);
this.tracker = new Tracker(dashboard, scope, 1000);
return this.tracker;
};
});
});

63
public/app/features/dashboard/unsaved_changes_modal.ts Normal file
View File

@ -0,0 +1,63 @@
///<reference path="../../headers/common.d.ts" />
import coreModule from 'app/core/core_module';
const template = `
<div class="modal-body">
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa fa-exclamation"></i>
<span class="p-l-1">Unsaved changes</span>
</h2>
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<div class="modal-content text-center">
<div class="confirm-modal-text">
What do you want to do?
</div>
<div class="confirm-modal-buttons">
<button type="button" class="btn btn-inverse" ng-click="ctrl.dismiss()">Cancel</button>
<button type="button" class="btn btn-danger" ng-click="ctrl.discard()">Discard</button>
<button type="button" class="btn btn-success" ng-click="ctrl.save()">Save</button>
</div>
</div>
</div>
`;
export class UnsavedChangesModalCtrl {
clone: any;
dismiss: () => void;
/** @ngInject */
constructor(private $rootScope, private unsavedChangesSrv) {
}
discard() {
this.dismiss();
this.unsavedChangesSrv.tracker.discardChanges();
}
save() {
this.dismiss();
this.unsavedChangesSrv.tracker.saveChanges();
}
}
export function unsavedChangesModalDirective() {
return {
restrict: 'E',
template: template,
controller: UnsavedChangesModalCtrl,
bindToController: true,
controllerAs: 'ctrl',
scope: {dismiss: "&"}
};
}
coreModule.directive('unsavedChangesModal', unsavedChangesModalDirective);

54
public/app/partials/unsaved-changes.html
View File

@ -1,54 +0,0 @@
<div class="modal-body" ng-controller="SaveDashboardMessageCtrl" ng-init="init();">
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa fa-exclamation"></i>
<span class="p-l-1">Unsaved changes</span>
</h2>
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<form name="saveMessage" ng-submit="saveVersion(saveMessage.$valid)" class="modal-content" novalidate>
<h6 class="text-center">
You're leaving without saving your changes, are you sure you want to leave? To save, add a small note to describe the changes in this version.
</h6>
<div class="p-t-2">
<div class="gf-form">
<label class="gf-form-hint">
<input
type="text"
name="message"
class="gf-form-input"
placeholder="Updates to &hellip;"
give-focus="true"
ng-model="clone.message"
ng-model-options="{allowInvalid: true}"
ng-keydown="keyDown($event)"
ng-maxlength="clone.max"
autocomplete="off"
required />
<small class="gf-form-hint-text muted" ng-cloak>
<span ng-class="{'text-error': saveMessage.message.$invalid && saveMessage.message.$dirty }">
{{clone.message.length || 0}}
</span>
/ {{clone.max}} characters
</small>
</label>
</div>
</div>
<div class="gf-form-button-row text-center">
<button type="submit" class="btn btn-success" ng-disabled="saveMessage.$invalid">
Save changes
</button>
<button type="button" class="btn btn-danger" ng-click="ignore();dismiss()">
Discard changes and leave
</button>
<button class="btn btn-inverse" ng-click="dismiss();">Cancel</button>
</div>
</form>
</div>