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);
if (rs == null) {
// need to load it directly
var claims = new ClaimCollection();
var policy = new PolicyCollection([], {rsid: rsid});
} else {
// the resource set is loaded, preload the claims
var claims = new ClaimCollection(rs.get('claimsRequired'));
claims.isFetched = true;
var policy = new PolicyCollection(rs.get('policies'), {rsid: rsid});
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() {
$('#content').html(view.render().el);

View File

@ -30,7 +30,12 @@ var PolicyModel = Backbone.Model.extend({
var PolicyCollection = Backbone.Collection.extend({
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({
@ -228,7 +233,7 @@ var ResourceSetView = Backbone.View.extend({
});
var ClaimListView = Backbone.View.extend({
var PolicyListView = Backbone.View.extend({
tagName: 'span',
initialize:function(options) {
@ -243,10 +248,10 @@ var ClaimListView = Backbone.View.extend({
$('#loadingbox').sheet('show');
$('#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() {
$('#loadingbox').sheet('hide');
callback();
@ -256,7 +261,7 @@ var ClaimListView = Backbone.View.extend({
events:{
'click .btn-save':'savePolicy',
'click .btn-cancel':'cancel',
'click #add-email':'addClaim'
'click #add-email':'addPolicy'
},
cancel:function(e) {
@ -299,7 +304,7 @@ var ClaimListView = Backbone.View.extend({
});
},
addClaim:function(e) {
addPolicy:function(e) {
e.preventDefault();
// post to the webfinger helper and get the response back
@ -333,50 +338,50 @@ var ClaimListView = Backbone.View.extend({
togglePlaceholder:function() {
if (this.model.length > 0) {
$('#required-claim-table', this.el).show();
$('#required-claim-table-empty', this.el).hide();
$('#policy-table', this.el).show();
$('#policy-table-empty', this.el).hide();
} else {
$('#required-claim-table', this.el).hide();
$('#required-claim-table-empty', this.el).show();
$('#policy-table', this.el).hide();
$('#policy-table-empty', this.el).show();
}
},
render:function (eventName) {
$(this.el).html($('#tmpl-required-claim-table').html());
$(this.el).html($('#tmpl-policy-table').html());
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;
$('#required-claim-table', this.el).append(view.render().el);
$('#policy-table', this.el).append(view.render().el);
}, this);
this.togglePlaceholder();
$(this.el).i18n();
// $(this.el).i18n();
return this;
}
});
var ClaimView = Backbone.View.extend({
var PolicyView = Backbone.View.extend({
tagName: 'tr',
initialize:function(options) {
this.options = options;
if (!this.template) {
this.template = _.template($('#tmpl-required-claim').html());
this.template = _.template($('#tmpl-policy').html());
}
},
events:{
'click .btn-remove':'removeClaim'
'click .btn-remove':'removePolicy'
},
removeClaim:function(e) {
removePolicy:function(e) {
e.preventDefault();
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 type="text/html" id="tmpl-required-claim-table">
<script type="text/html" id="tmpl-policy-table">
<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-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.
</div>
<div id="required-claim-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.
<div id="policy-table-empty" class="alert alert-danger" data-i18n="policy.policy-table.no-required-claims">
There are no policies for this resource set: This resource set is inaccessible by others.
</div>
<table id="required-claim-table" class="table table-hover table-striped">
<table id="policy-table" class="table table-hover table-striped">
<thead>
<tr>
<th data-i18n="policy.policy-table.issuers">Issuers</th>
<th data-i18n="policy.policy-table.claim">Claim</th>
<th data-i18n="policy.policy-table.value">Value</th>
<th data-i18n="policy.policy-table.issuers">Required Claims</th>
<th data-i18n="policy.policy-table.claim">Scopes</th>
<th></th>
</thead>
<tbody>
@ -109,21 +108,36 @@
</script>
<script type="text/html" id="tmpl-required-claim">
<script type="text/html" id="tmpl-policy">
<td>
<% _.each(issuer, function(issuer) { %>
<span class="label label-info"><%- issuer %></span>
<% }); %>
<div class="well">
<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>
<%- name %>
<div class="scope-list"></div>
</td>
<td>
<%- value %>
</td>
<td>
<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;