mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-25 18:55:31 -06:00
Grant wizard.
This commit is contained in:
Surinder Kumar
committed by
Dave Page
Dave Page
parent
6e237d16ca
commit
40c592a988
143
web/pgadmin/browser/static/css/wizard.css
Normal file
143
web/pgadmin/browser/static/css/wizard.css
Normal file
@@ -0,0 +1,143 @@
|
||||
/** CSS for Wizard **/
|
||||
.pgadmin_grant_wizard_body .ajs-content {
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
|
||||
.wizard-header {
|
||||
background: #428bca;
|
||||
padding-left: 15px;
|
||||
padding-bottom: 7px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
height: 76px;
|
||||
line-height: 76px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
|
||||
.wizard-header h3 {
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.wizard_dlg {
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grant_wizard_container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.grant_wizard_container .pgadmin-wizard {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.grant_wizard_container .wizard-content {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
height: 78%;
|
||||
}
|
||||
|
||||
.grant_wizard_container .wizard-right-panel {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.grant_wizard_container .wizard-left-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.grant_wizard_container .wizard-left-panel img {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.grant_wizard_container .wizard-right-panel_content {
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.grant_wizard_container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Wizard Footer CSS */
|
||||
.grant_wizard_container .footer {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
bottom: 0px;
|
||||
height: 62px;
|
||||
right: 0px;
|
||||
padding-top: 22px;
|
||||
border-radius: 0 0 6px 6px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Wizard Button CSS */
|
||||
.grant_wizard_container .wizard-buttons {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.grant_wizard_container .wizard-buttons button {
|
||||
float: left;
|
||||
padding: 7px 15.2px;
|
||||
font-size: 14px;
|
||||
margin: 0px 5px 0 0 !important;
|
||||
}
|
||||
|
||||
.grant_wizard_container .wizard-buttons button.wizard-next i.fa {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.grant_wizard_container .wizard-buttons button.wizard-back i.fa,
|
||||
.grant_wizard_container .wizard-buttons button.wizard-cancel i.fa {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.grant_wizard_container .wizard-buttons .wizard-finish {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
/* Wizard Status bar CSS */
|
||||
.grant_wizard_container .wizard-description {
|
||||
padding: 1.7em 0.1em;
|
||||
}
|
||||
|
||||
/* Error message css */
|
||||
.grant_wizard_container .error_msg_div {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 55px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.grant_wizard_container .error_msg_div p {
|
||||
background: #fff;
|
||||
color: #b92c28;
|
||||
}
|
||||
|
||||
/* In wizard select2 dropdown doesn't
|
||||
* popup because z-index of alertify
|
||||
* wizard is greater than the z-index
|
||||
* of select2 dropdown. To make select2
|
||||
* visible, set z-index of select2
|
||||
* higher value than wizard's
|
||||
*/
|
||||
.select2-container--open {
|
||||
z-index: 10000;
|
||||
}
|
||||
@@ -280,7 +280,8 @@ function($, _, pgAdmin, Backbone, Backform, Alertify, Node) {
|
||||
return false;
|
||||
};
|
||||
|
||||
while(p) {
|
||||
// check if p is not empty
|
||||
while(p && p.length > 0) {
|
||||
top = p.get(0).offsetTop + p.height();
|
||||
p = p.parent();
|
||||
if (hasScrollbar(p)) {
|
||||
|
||||
233
web/pgadmin/browser/static/js/wizard.js
Normal file
233
web/pgadmin/browser/static/js/wizard.js
Normal file
@@ -0,0 +1,233 @@
|
||||
define(
|
||||
['underscore', 'backbone', 'pgadmin', 'pgadmin.browser'],
|
||||
function(_, Backbone, pgAdmin, pgBrowser) {
|
||||
|
||||
pgBrowser = pgBrowser || pgAdmin.Browser || {};
|
||||
|
||||
/* Wizard individual Page Model */
|
||||
var WizardPage = pgBrowser.WizardPage = Backbone.Model.extend({
|
||||
defaults: {
|
||||
id: undefined, /* Id */
|
||||
page_title: undefined, /* Page Title */
|
||||
view: undefined, /* A Backbone View */
|
||||
html: undefined, /* HTML tags to be rendered */
|
||||
image: undefined, /* Left hand side image */
|
||||
disable_prev: false, /* Previous Button Flag */
|
||||
disable_next: false, /* Next Button Flag */
|
||||
disable_cancel: false, /* Cancel Button Flag */
|
||||
show_progress_bar: '',
|
||||
/* Callback for OnLoad */
|
||||
onLoad: function() {
|
||||
return true;
|
||||
},
|
||||
/* Callback for before Next */
|
||||
beforeNext: function() {
|
||||
return true;
|
||||
},
|
||||
onNext: function(){},
|
||||
onBefore: function() {},
|
||||
/* Callback for before Previous */
|
||||
beforePrev: function() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var Wizard = pgBrowser.Wizard = Backbone.View.extend({
|
||||
options: {
|
||||
title: 'Wizard', /* Main Wizard Title */
|
||||
image: 'left_panel.png', /* TODO:: We can use default image here */
|
||||
curr_page: 0, /* Current Page to Load */
|
||||
disable_next: false,
|
||||
disable_prev: false,
|
||||
disable_finish: false,
|
||||
disable_cancel: false,
|
||||
height: 400,
|
||||
width: 650,
|
||||
show_left_panel: true
|
||||
},
|
||||
tmpl: _.template(
|
||||
" <div class='pgadmin-wizard' style='height: <%= this.options.height %>px;"
|
||||
+ " width: <%= this.options.width %>px'>"
|
||||
+ " <div class='wizard-header wizard-badge'>"
|
||||
+ " <div class='row'>"
|
||||
+ " <div class='col-sm-9'>"
|
||||
+ " <h3><span id='main-title'><%= this.options.title %></span> -"
|
||||
+ " <span id='step-title'><%= page_title %></span></h3>"
|
||||
+ " </div>"
|
||||
+ " </div>"
|
||||
+ " </div>"
|
||||
+ " <div class='wizard-content col-sm-12'>"
|
||||
+ " <% if(this.options.show_left_panel) { %>"
|
||||
+ " <div class='col-sm-3 wizard-left-panel'>"
|
||||
+ " <img src='<%= this.options.image %>'></div>"
|
||||
+ " <% } %>"
|
||||
+ " <div class='col-sm-<% if(this.options.show_left_panel){ %>9<% }"
|
||||
+ " else { %>12<% } %> wizard-right-panel'>"
|
||||
+ " <% if( typeof show_description != 'undefined'){ %>"
|
||||
+ " <div class='wizard-description'>"
|
||||
+ " <%= show_description %>"
|
||||
+ " </div>"
|
||||
+ " <% } %>"
|
||||
+ " <div class='wizard-right-panel_content'>"
|
||||
+ " </div>"
|
||||
+ " </div>"
|
||||
+ " </div>"
|
||||
+ " <div class='col-sm-12 error_msg_div'>"
|
||||
+ " <p></p>"
|
||||
+ " </div>"
|
||||
+ " <div class='footer col-sm-12'>"
|
||||
+ " <div class='row'>"
|
||||
+ " <div class='col-sm-4 wizard-progress-bar'>"
|
||||
+ " <p><% if(show_progress_bar){ %><%= show_progress_bar %><% } %></p>"
|
||||
+ " </div>"
|
||||
+ " <div class='col-sm-8'>"
|
||||
+ " <div class='wizard-buttons'>"
|
||||
+ " <button class='btn btn-primary wizard-back' <%=this.options.disable_prev ? 'disabled' : ''%>>"
|
||||
+ " <i class='fa fa-backward'></i>Back</button>"
|
||||
+ " <button class='btn btn-primary wizard-next' <%=this.options.disable_next ? 'disabled' : ''%>>Next"
|
||||
+ " <i class='fa fa-forward'></i></button>"
|
||||
+ " <button class='btn btn-danger wizard-cancel' <%=this.options.disable_cancel ? 'disabled' : ''%>>"
|
||||
+ " <i class='fa fa-lg fa-close'></i>Cancel</button>"
|
||||
+ " <button class='btn btn-primary wizard-finish' <%=this.options.disable_finish ? 'disabled' : ''%>>"
|
||||
+ " Finish</button>"
|
||||
+ " </div>"
|
||||
+ " </div>"
|
||||
+ " </div>"
|
||||
+ " </div>"
|
||||
+ " </div>"),
|
||||
events: {
|
||||
"click button.wizard-next" : "nextPage",
|
||||
"click button.wizard-back" : "prevPage",
|
||||
"click button.wizard-cancel" : "onCancel",
|
||||
"click button.wizard-finish" : "finishWizard",
|
||||
},
|
||||
initialize: function(options) {
|
||||
this.options = _.extend({}, this.options, options.options);
|
||||
this.currPage = this.collection.at(this.options.curr_page).toJSON();
|
||||
},
|
||||
render: function() {
|
||||
var data = this.currPage;
|
||||
|
||||
/* Check Status of the buttons */
|
||||
this.options.disable_next = (this.options.disable_next ? true : this.evalASFunc(this.currPage.disable_next));
|
||||
this.options.disable_prev = (this.options.disable_prev ? true : this.evalASFunc(this.currPage.disable_prev));
|
||||
this.options.disable_cancel = (this.currPage.canCancel ? true : this.evalASFunc(this.currPage.disable_cancel));
|
||||
|
||||
that = this;
|
||||
|
||||
/* HTML Content */
|
||||
if (data.html) { data.content = data.html; }
|
||||
/* Backbone View */
|
||||
else if (data.view) { data.content = data.view.render().el;}
|
||||
|
||||
$(this.el).html(this.tmpl(data));
|
||||
$(this.el).find(".wizard-right-panel_content").html(data.content);
|
||||
|
||||
/* OnLoad Callback */
|
||||
this.onLoad();
|
||||
|
||||
return this;
|
||||
},
|
||||
nextPage: function() {
|
||||
this.options.curr_page.el = this.$el;
|
||||
if (!this.beforeNext()) { return false; }
|
||||
|
||||
page_id = this.onNext();
|
||||
|
||||
if (page_id ) {
|
||||
this.currPage = this.collection.get(page_id).toJSON();
|
||||
this.options.curr_page = this.collection.indexOf(this.collection.get(page_id));
|
||||
}
|
||||
else if (this.options.curr_page < (this.collection.length-1)) {
|
||||
this.options.curr_page = this.options.curr_page + 1;
|
||||
this.currPage = this.collection.at(this.options.curr_page).toJSON();
|
||||
}
|
||||
|
||||
this.enableDisableNext();
|
||||
this.enableDisablePrev();
|
||||
|
||||
return this.render();
|
||||
},
|
||||
prevPage: function() {
|
||||
if (!this.beforePrev()) { return false; }
|
||||
|
||||
page_id = this.onPrev();
|
||||
|
||||
if (page_id){
|
||||
this.currPage = this.collection.get(page_id).toJSON();
|
||||
this.options.curr_page = this.collection.indexOf(this.collection.get(page_id));
|
||||
}
|
||||
else if (this.options.curr_page > 0) {
|
||||
this.options.curr_page = this.options.curr_page - 1;
|
||||
this.currPage = this.collection.at(this.options.curr_page).toJSON();
|
||||
}
|
||||
|
||||
this.enableDisableNext();
|
||||
this.enableDisablePrev();
|
||||
|
||||
return this.render();
|
||||
},
|
||||
finishWizard: function() {
|
||||
this.onFinish();
|
||||
this.remove(); // Remove view from DOM
|
||||
this.unbind(); // Unbind all local event bindings
|
||||
delete this.$el; // Delete the jQuery wrapped object variable
|
||||
delete this.el; // Delete the variable reference to this node
|
||||
return true;
|
||||
},
|
||||
enableDisableNext: function(disable) {
|
||||
if (typeof(disable) != 'undefined') {
|
||||
this.options.disable_next = disable;
|
||||
}
|
||||
else if (this.options.curr_page >= (this.collection.length-1)) {
|
||||
this.options.disable_next = true;
|
||||
}
|
||||
else {
|
||||
this.options.disable_next = false;
|
||||
}
|
||||
},
|
||||
enableDisablePrev: function(disable) {
|
||||
if (typeof(disable) != 'undefined') {
|
||||
this.options.disable_prev = disable;
|
||||
}
|
||||
else if (this.options.curr_page <= 0) {
|
||||
this.options.disable_prev = true;
|
||||
}
|
||||
else {
|
||||
this.options.disable_prev = false;
|
||||
}
|
||||
},
|
||||
beforeNext: function(){
|
||||
return this.evalASFunc(this.currPage.beforeNext);
|
||||
},
|
||||
beforePrev: function(){
|
||||
return this.evalASFunc(this.currPage.beforePrev);
|
||||
},
|
||||
onPrev: function(){
|
||||
return this.evalASFunc(this.currPage.onPrev);
|
||||
},
|
||||
onNext: function(){
|
||||
return this.evalASFunc(this.currPage.onNext);
|
||||
},
|
||||
onLoad: function() {
|
||||
return this.evalASFunc(this.currPage.onLoad);
|
||||
},
|
||||
onFinish: function() {
|
||||
return true;
|
||||
},
|
||||
onCancel: function() {
|
||||
this.$el.remove();
|
||||
return true;
|
||||
},
|
||||
evalASFunc: function(func, ctx) {
|
||||
var self = this;
|
||||
ctx = ctx || self.currPage;
|
||||
|
||||
return (_.isFunction(func) ? func.apply(ctx, [self]) : func);
|
||||
}
|
||||
});
|
||||
|
||||
return pgBrowser;
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user