basic display of Policy Table

pull/820/merge
Justin Richer 2015-07-02 16:20:03 -04:00
parent 1259b8cd68
commit 72bb09550c
3 changed files with 78 additions and 41 deletions

View File

@ -1109,16 +1109,14 @@ var AppRouter = Backbone.Router.extend({
var rs = this.resourceSetList.get(rsid); var rs = this.resourceSetList.get(rsid);
if (rs == null) { if (rs == null) {
// need to load it directly // need to load it directly
var claims = new ClaimCollection(); var policy = new PolicyCollection([], {rsid: rsid});
} else { } else {
// the resource set is loaded, preload the claims // the resource set is loaded, preload the claims
var claims = new ClaimCollection(rs.get('claimsRequired')); var policy = new PolicyCollection(rs.get('policies'), {rsid: rsid});
claims.isFetched = true; policy.isFetched = true;
} }
// set the URL for the collection
claims.url = 'api/claims/' + rsid;
var view = new ClaimListView({model: claims, rs: rs}); var view = new PolicyListView({model: policy, rs: rs});
view.load(function() { view.load(function() {
$('#content').html(view.render().el); $('#content').html(view.render().el);

View File

@ -30,7 +30,12 @@ var PolicyModel = Backbone.Model.extend({
var PolicyCollection = Backbone.Collection.extend({ var PolicyCollection = Backbone.Collection.extend({
model: PolicyModel, model: PolicyModel,
baseUrl: 'api/policy' url: function() {
return 'api/policy/' + this.options.rsid;
},
initialize: function(models, options) {
this.options = options;
}
}); });
var ResourceSetListView = Backbone.View.extend({ var ResourceSetListView = Backbone.View.extend({
@ -228,7 +233,7 @@ var ResourceSetView = Backbone.View.extend({
}); });
var ClaimListView = Backbone.View.extend({ var PolicyListView = Backbone.View.extend({
tagName: 'span', tagName: 'span',
initialize:function(options) { initialize:function(options) {
@ -243,10 +248,10 @@ var ClaimListView = Backbone.View.extend({
$('#loadingbox').sheet('show'); $('#loadingbox').sheet('show');
$('#loading').html( $('#loading').html(
'<span class="label" id="loading-claims">' + $.t('policy.required-claims') + '</span> ' '<span class="label" id="loading-policies">' + $.t('policy.loading-policies') + '</span> '
); );
$.when(this.model.fetchIfNeeded({success:function(e) {$('#loading-claims').addClass('label-success');}})) $.when(this.model.fetchIfNeeded({success:function(e) {$('#loading-policies').addClass('label-success');}}))
.done(function() { .done(function() {
$('#loadingbox').sheet('hide'); $('#loadingbox').sheet('hide');
callback(); callback();
@ -256,7 +261,7 @@ var ClaimListView = Backbone.View.extend({
events:{ events:{
'click .btn-save':'savePolicy', 'click .btn-save':'savePolicy',
'click .btn-cancel':'cancel', 'click .btn-cancel':'cancel',
'click #add-email':'addClaim' 'click #add-email':'addPolicy'
}, },
cancel:function(e) { cancel:function(e) {
@ -299,7 +304,7 @@ var ClaimListView = Backbone.View.extend({
}); });
}, },
addClaim:function(e) { addPolicy:function(e) {
e.preventDefault(); e.preventDefault();
// post to the webfinger helper and get the response back // post to the webfinger helper and get the response back
@ -333,50 +338,50 @@ var ClaimListView = Backbone.View.extend({
togglePlaceholder:function() { togglePlaceholder:function() {
if (this.model.length > 0) { if (this.model.length > 0) {
$('#required-claim-table', this.el).show(); $('#policy-table', this.el).show();
$('#required-claim-table-empty', this.el).hide(); $('#policy-table-empty', this.el).hide();
} else { } else {
$('#required-claim-table', this.el).hide(); $('#policy-table', this.el).hide();
$('#required-claim-table-empty', this.el).show(); $('#policy-table-empty', this.el).show();
} }
}, },
render:function (eventName) { render:function (eventName) {
$(this.el).html($('#tmpl-required-claim-table').html()); $(this.el).html($('#tmpl-policy-table').html());
var _self = this; var _self = this;
_.each(this.model.models, function (claim) { _.each(this.model.models, function (policy) {
var view = new ClaimView({model: claim}); var view = new PolicyView({model: policy});
view.parentView = _self; view.parentView = _self;
$('#required-claim-table', this.el).append(view.render().el); $('#policy-table', this.el).append(view.render().el);
}, this); }, this);
this.togglePlaceholder(); this.togglePlaceholder();
$(this.el).i18n(); // $(this.el).i18n();
return this; return this;
} }
}); });
var ClaimView = Backbone.View.extend({ var PolicyView = Backbone.View.extend({
tagName: 'tr', tagName: 'tr',
initialize:function(options) { initialize:function(options) {
this.options = options; this.options = options;
if (!this.template) { if (!this.template) {
this.template = _.template($('#tmpl-required-claim').html()); this.template = _.template($('#tmpl-policy').html());
} }
}, },
events:{ events:{
'click .btn-remove':'removeClaim' 'click .btn-remove':'removePolicy'
}, },
removeClaim:function(e) { removePolicy:function(e) {
e.preventDefault(); e.preventDefault();
var _self = this; var _self = this;
@ -402,4 +407,24 @@ var ClaimView = Backbone.View.extend({
} }
});
var PolicyFormView = Backbone.View.extend({
tagName: 'span',
initialize:function(options) {
this.options = options;
if (!this.template) {
this.template = _.template($('#tmpl-policy-form').html());
}
},
render:function (eventName) {
return this;
}
}); });

View File

@ -67,7 +67,7 @@
</script> </script>
<script type="text/html" id="tmpl-required-claim-table"> <script type="text/html" id="tmpl-policy-table">
<div class="well well-small"> <div class="well well-small">
<button class="btn btn-small btn-save btn-success"><i class="icon-ok-circle icon-white"></i> <span data-i18n="common.save">Save</span></button> &nbsp; <button class="btn btn-small btn-save btn-success"><i class="icon-ok-circle icon-white"></i> <span data-i18n="common.save">Save</span></button> &nbsp;
<button class="btn btn-small btn-cancel"><i class="icon-ban-circle"></i> <span data-i18n="common.cancel">Cancel</span></button> <button class="btn btn-small btn-cancel"><i class="icon-ban-circle"></i> <span data-i18n="common.cancel">Cancel</span></button>
@ -86,16 +86,15 @@
Users that you share this resource will with need to be able to present the following claims in order to access the resource. Users that you share this resource will with need to be able to present the following claims in order to access the resource.
</div> </div>
<div id="required-claim-table-empty" class="alert alert-danger" data-i18n="policy.policy-table.no-required-claims"> <div id="policy-table-empty" class="alert alert-danger" data-i18n="policy.policy-table.no-required-claims">
There are no required claims for this resource set: This resource set is inaccessible by others. There are no policies for this resource set: This resource set is inaccessible by others.
</div> </div>
<table id="required-claim-table" class="table table-hover table-striped"> <table id="policy-table" class="table table-hover table-striped">
<thead> <thead>
<tr> <tr>
<th data-i18n="policy.policy-table.issuers">Issuers</th> <th data-i18n="policy.policy-table.issuers">Required Claims</th>
<th data-i18n="policy.policy-table.claim">Claim</th> <th data-i18n="policy.policy-table.claim">Scopes</th>
<th data-i18n="policy.policy-table.value">Value</th>
<th></th> <th></th>
</thead> </thead>
<tbody> <tbody>
@ -109,21 +108,36 @@
</script> </script>
<script type="text/html" id="tmpl-required-claim"> <script type="text/html" id="tmpl-policy">
<td> <td>
<% _.each(issuer, function(issuer) { %> <div class="well">
<span class="label label-info"><%- issuer %></span> <table class="table table-condensed">
<% }); %> <tbody>
<% _.each(claimsRequired, function(claim) { %>
<tr>
<td>
<% _.each(claim.issuer, function(issuer) { %>
<span class="label label-info"><%- issuer %></span>
<% }); %>
</td>
<td>
<%- claim.friendlyName ? claim.friendlyName : claim.name %>
</td>
<td>
<%- JSON.stringify(claim.value) %>
</td>
</tr>
<% }); %>
</tbody>
</table>
</div>
</td> </td>
<td> <td>
<%- name %> <div class="scope-list"></div>
</td> </td>
<td>
<%- value %>
</td>
<td> <td>
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<button class="btn btn-danger btn-remove"><i class="icon-trash icon-white"></i> <span data-i18n="policy.policy-table.remove">Remove</span></button> &nbsp; <button class="btn btn-danger btn-remove"><i class="icon-trash icon-white"></i> <span data-i18n="policy.policy-table.remove">Remove</span></button> &nbsp;