From 7fd772c772619f38287e410f39c7f3b8c36d84c3 Mon Sep 17 00:00:00 2001
From: Graham Triggs <gtriggs@duraspace.org>
Date: Sun, 26 Feb 2017 21:02:02 +0000
Subject: [PATCH] Updates to Tenderfoot individual display

---
 .../js/propertyGroupControls-bootstrap.js     |  8 +++
 .../individual-property-group-tabs.ftl        | 67 ++++++++++---------
 2 files changed, 42 insertions(+), 33 deletions(-)
 create mode 100644 webapp/src/main/webapp/themes/tenderfoot/js/propertyGroupControls-bootstrap.js

diff --git a/webapp/src/main/webapp/themes/tenderfoot/js/propertyGroupControls-bootstrap.js b/webapp/src/main/webapp/themes/tenderfoot/js/propertyGroupControls-bootstrap.js
new file mode 100644
index 00000000..f3584742
--- /dev/null
+++ b/webapp/src/main/webapp/themes/tenderfoot/js/propertyGroupControls-bootstrap.js
@@ -0,0 +1,8 @@
+$(document).ready(function(){
+    $("#viewAllTab").on("click",function(){
+        $('[data-toggle="tab"]').parent().removeClass("active");
+        $("#viewAllTab").parent().addClass("active");
+        $("#viewAllTab").addClass("active");
+        $(".tab-pane").addClass("fade active in");
+    });
+});
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/body/partials/individual/individual-property-group-tabs.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/body/partials/individual/individual-property-group-tabs.ftl
index 21a34625..e3fe6fa9 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/body/partials/individual/individual-property-group-tabs.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/body/partials/individual/individual-property-group-tabs.ftl
@@ -8,58 +8,58 @@
 <#assign sectionCount = 1 >
 
 <div class="row">
-	<div class="col-md-12">
-		<ul class="nav nav-tabs">
-			<#list propertyGroups.all as groupTabs>
-				<#if ( groupTabs.properties?size > 0 ) >
-					<#assign groupName = groupTabs.getName(nameForOtherGroup)>
-					<#if groupName?has_content>
-						<#--the function replaces spaces in the name with underscores, also called for the property group menu-->
-						<#assign groupNameHtmlId = p.createPropertyGroupHtmlId(groupName) >
-					<#else>
-						<#assign groupName = "${i18n().properties_capitalized}">
-						<#assign groupNameHtmlId = "${i18n().properties}" >
-					</#if>
-					<#if tabCount = 1 >
-						<li data-toggle="tab" class="active" href="#${groupNameHtmlId?replace("/","-")}"><a href="#">${groupName?capitalize}</a></li>
-						<#assign tabCount = 2>
-					<#else>
-						<li data-toggle="tab" href="#${groupNameHtmlId?replace("/","-")}"><a href="#">${groupName?capitalize}</a></li>
-					</#if>
+    <div class="col-md-12">
+        <ul class="nav nav-tabs">
+		<#list propertyGroups.all as groupTabs>
+			<#if ( groupTabs.properties?size > 0 ) >
+				<#assign groupName = groupTabs.getName(nameForOtherGroup)>
+				<#if groupName?has_content>
+				<#--the function replaces spaces in the name with underscores, also called for the property group menu-->
+					<#assign groupNameHtmlId = p.createPropertyGroupHtmlId(groupName) >
+				<#else>
+					<#assign groupName = "${i18n().properties_capitalized}">
+					<#assign groupNameHtmlId = "${i18n().properties}" >
 				</#if>
-			</#list>
-			<#-- if (propertyGroups.all?size > 1) >
-				<li data-toggle="tab" href="viewAll"><a href="#">${i18n().view_all_capitalized}</a></li>
-			</#if -->
-		</ul>
-	</div>
+				<#if tabCount = 1 >
+                    <li data-toggle="tab" class="active" href="#${groupNameHtmlId?replace("/","-")}"><a href="#">${groupName?capitalize}</a></li>
+					<#assign tabCount = 2>
+				<#else>
+                    <li data-toggle="tab" href="#${groupNameHtmlId?replace("/","-")}"><a href="#">${groupName?capitalize}</a></li>
+				</#if>
+			</#if>
+		</#list>
+		<#if (propertyGroups.all?size > 1) >
+            <li id="viewAllTab" data-toggle="tab" href="#viewAll"><a href="#">${i18n().view_all_capitalized}</a></li>
+		</#if>
+        </ul>
+    </div>
 </div>
 <div class="row">
-	<div class="col-md-12 tab-content">
+    <div class="col-md-12 tab-content">
 		<#list propertyGroups.all as group>
 			<#if (group.properties?size > 0)>
 				<#assign groupName = group.getName(nameForOtherGroup)>
 				<#assign groupNameHtmlId = p.createPropertyGroupHtmlId(groupName) >
 				<#assign verbose = (verbosePropertySwitch.currentValue)!false>
 
-				<div id="${groupNameHtmlId?replace("/","-")}"
+                <div id="${groupNameHtmlId?replace("/","-")}"
                      class="tab-pane <#if (sectionCount == 1) >active</#if>"
                      role="tabpanel">
-					<#-- Display the group heading --> 
+				<#-- Display the group heading -->
 					<#if groupName?has_content>
-						<#--the function replaces spaces in the name with underscores, also called for the property group menu-->
+					<#--the function replaces spaces in the name with underscores, also called for the property group menu-->
 						<#assign groupNameHtmlId = p.createPropertyGroupHtmlId(groupName) >
-						<h2 id="${groupNameHtmlId?replace("/","-")}" pgroup="tabs" class="hidden">${groupName?capitalize}</h2>
+                        <h2 id="${groupNameHtmlId?replace("/","-")}" pgroup="tabs" class="hidden">${groupName?capitalize}</h2>
 					<#else>
-						<h2 id="properties" pgroup="tabs" class="hidden">${i18n().properties_capitalized}</h2>
+                        <h2 id="properties" pgroup="tabs" class="hidden">${i18n().properties_capitalized}</h2>
 					</#if>
-					<#-- List the properties in the group   -->
+				<#-- List the properties in the group   -->
 					<#include "individual-properties.ftl">
-				</div>
+                </div>
 				<#assign sectionCount = 2 >
 			</#if>
 		</#list>
-	</div>
+    </div>
 </div>
 <script>
     var individualLocalName = "${individual.localName}";
@@ -68,3 +68,4 @@
 ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/individual/individual-property-groups.css" />')}
 ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/amplify/amplify.store.min.js"></script>')}
 ${scripts.add('<script type="text/javascript" src="${urls.base}/js/individual/propertyGroupControls.js"></script>')}
+${scripts.add('<script src="${urls.theme}/js/propertyGroupControls-bootstrap.js"></script>')}