converted prperty groups listing to new design, like class groups and class hierarchy

This commit is contained in:
tworrall 2012-07-03 15:33:52 +00:00
parent 1f1adb31cc
commit de276020aa
4 changed files with 270 additions and 20 deletions

View file

@ -616,11 +616,11 @@
</servlet-mapping>
<servlet>
<servlet-name>PropertyGroupsListingController</servlet-name>
<servlet-class>edu.cornell.mannlib.vitro.webapp.controller.edit.listing.PropertyGroupsListingController</servlet-class>
<servlet-name>ListPropertyGroupsController</servlet-name>
<servlet-class>edu.cornell.mannlib.vitro.webapp.controller.freemarker.ListPropertyGroupsController</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>PropertyGroupsListingController</servlet-name>
<servlet-name>ListPropertyGroupsController</servlet-name>
<url-pattern>/listPropertyGroups</url-pattern>
</servlet-mapping>

View file

@ -6,6 +6,7 @@
this.propType = type;
this.initObjects();
this.expandAll.hide();
// this.toggleDiv.hide();
this.checkJsonTree();
if ( noProps ) {
@ -14,14 +15,20 @@
else if ( displayOption == "all" ) {
this.buildAllPropsHtml();
}
else if ( displayOption == "group" ) {
this.buildPropertyGroupHtml();
}
else {
this.buildPropertyHierarchyHtml();
this.wireExpandLink();
}
if ( displayOption == "hierarchy" ) {
if ( displayOption == "hierarchy" || displayOption == "group") {
this.expandAll.show();
}
// else if ( displayOption == "group" ) {
// this.toggleDiv.show();
// }
this.bindEventListeners();
},
@ -34,18 +41,24 @@
this.form = $('form#classHierarchyForm');
this.select = $('select#displayOption');
this.addProperty = $('input#addProperty');
// this.toggleDiv = $('div#propsToggleDiv');
// this.toggleSpan = $('span#propsToggle');
// this.toggleLink = $('span#propsToggle').find('a');
noProps = new Boolean;
},
bindEventListeners: function() {
if ( this.propType == "object" ) {
this.select.change(function() {
if ( objectPropHierarchyUtils.select.val() == "all") {
if ( objectPropHierarchyUtils.select.val() == "all" ) {
objectPropHierarchyUtils.form.attr("action", "listPropertyWebapps");
}
else {
else if ( objectPropHierarchyUtils.select.val() == "hierarchy") {
objectPropHierarchyUtils.form.attr("action", "showObjectPropertyHierarchy");
}
else {
objectPropHierarchyUtils.form.attr("action", "listPropertyGroups");
}
objectPropHierarchyUtils.form.submit();
});
@ -54,14 +67,17 @@
objectPropHierarchyUtils.form.submit();
});
}
else {
else {
this.select.change(function() {
if ( objectPropHierarchyUtils.select.val() == "all") {
if ( objectPropHierarchyUtils.select.val() == "all" ) {
objectPropHierarchyUtils.form.attr("action", "listDatatypeProperties");
}
else {
else if ( objectPropHierarchyUtils.select.val() == "hierarchy" ) {
objectPropHierarchyUtils.form.attr("action", "showDataPropertyHierarchy");
}
else {
objectPropHierarchyUtils.form.attr("action", "listPropertyGroups");
}
objectPropHierarchyUtils.form.submit();
});
@ -70,6 +86,19 @@
objectPropHierarchyUtils.form.submit();
});
}
if ( this.propType == "group" ) {
this.expandAll.click(function() {
if ( objectPropHierarchyUtils.expandAll.text() == "hide properties" ) {
$('td.subclassCell').parent('tr').hide();
objectPropHierarchyUtils.expandAll.text("show properties");
}
else {
$('td.subclassCell').parent('tr').show();
objectPropHierarchyUtils.expandAll.text("hide properties");
}
});
}
},
checkJsonTree: function() {
@ -289,5 +318,50 @@
$newClassSection.appendTo($('section#container'));
objectPropHierarchyUtils.classHtml = "";
});
},
buildPropertyGroupHtml: function() {
$.each(json, function() {
$newClassSection = jQuery("<section></section>", {
id: "classContainer" + objectPropHierarchyUtils.classCounter
});
var descendants = "";
if ( this.children.length ) {
var ctr = 0;
$.each(this.children, function() {
if ( ctr == 0 ) {
descendants += "<tr><td class='classDetail'>Properties:</td>";
ctr = ctr + 1;
}
else {
descendants += "<tr><td></td>" ;
}
descendants += "<td class='subclassCell'>" + this.name + "</td></tr>";
// descendants += "<tr><td></td><td><table class='innerDefinition'><tr><td>" + this.data.shortDef + "</td></tr></table></td></tr>";
});
descendants += "</table></td></tr>";
}
objectPropHierarchyUtils.classHtml += "<div>" + this.name + "</div>" + "<table class='classHierarchy' id='classHierarchy"
+ objectPropHierarchyUtils.classCounter + "'>" ;
if ( this.data.displayRank.length > 0 ) {
objectPropHierarchyUtils.classHtml += "<tr><td class='classDetail'>Display Rank:</td><td>" + this.data.displayRank + "</td></tr>"
}
objectPropHierarchyUtils.classHtml += descendants;
objectPropHierarchyUtils.classHtml += "</table>";
// alert(objectPropHierarchyUtils.classHtml);
$newClassSection.html(objectPropHierarchyUtils.classHtml);
$newClassSection.appendTo($('section#container'));
objectPropHierarchyUtils.classHtml = "";
objectPropHierarchyUtils.classCounter += 1;
});
}
}

View file

@ -5,6 +5,11 @@
separate controllers for those. Also used to display lists of "all" object and
data properties, though there are separate controllers for those, too.
-->
<#if propertyType??>
<#assign propType = propertyType>
<#else>
<#assign propType = "group">
</#if>
<section role="region">
@ -15,16 +20,24 @@
<#assign displayOption = "hierarchy">
</#if>
<form name="classHierarchyForm" id="classHierarchyForm" action="show<#if propertyType == "object">Object<#else>Data</#if>PropertyHierarchy" method="post" role="classHierarchy">
<label id="displayOptionLabel" class="inline">Display Options</label>
<select id="displayOption" name="displayOption">
<option value="hierarchy" <#if displayOption == "asserted">selected</#if> >Property Hierarchy</option>
<option value="all" <#if displayOption == "all">selected</#if> >All Properties</option>
</select>
<input type="submit" class="form-button" id="addProperty" value="Add new <#if propertyType == "object">object<#else>data</#if> property"/>
</form>
<div id="expandLink"><span id="expandAll" ><a href="#" title="expand all">expand all</a></span></div>
<#if propType == "group">
<form action="editForm" method="get">
<input type="submit" class="form-button" id="addProperty" value="Add new property group"/>
<input type="hidden" name="controller" value="PropertyGroup"/>
</form>
<div id="expandLink"><span id="expandAll" ><a href="javascript:" title="hide/show properties">hide properties</a></span></div>
<#else>
<form name="classHierarchyForm" id="classHierarchyForm" action="show<#if propType == "object">Object<#else>Data</#if>PropertyHierarchy" method="post" role="classHierarchy">
<label id="displayOptionLabel" class="inline">Display Options</label>
<select id="displayOption" name="displayOption">
<option value="hierarchy" <#if displayOption == "asserted">selected</#if> >${propType?capitalize} Property Hierarchy</option>
<option value="all" <#if displayOption == "all">selected</#if> >All ${propType?capitalize} Properties</option>
<option value="group" <#if displayOption == "group">selected</#if> >Property Groups</option>
</select>
<input type="submit" class="form-button" id="addProperty" value="Add new <#if propType == "object">object<#else>data</#if> property"/>
</form>
<div id="expandLink"><span id="expandAll" ><a href="#" title="expand all">expand all</a></span></div>
</#if>
<section id="container">
</section>
@ -37,7 +50,7 @@
<script language="javascript" type="text/javascript" >
$(document).ready(function() {
objectPropHierarchyUtils.onLoad("${urls.base!}","${displayOption!}","${propertyType}");
objectPropHierarchyUtils.onLoad("${urls.base!}","${displayOption!}","${propType}");
});
</script>