From 4fe0bec4aecb22e12a0ee3c3893ce6b55918a65d Mon Sep 17 00:00:00 2001
From: Michael Dollinger <michael.dollinger@noreply.%(DOMAIN)s>
Date: Sat, 23 Jan 2021 11:06:46 +0100
Subject: [PATCH] UI verbessert: Lange Listen werden ausgeblendet

---
 src/main/webapp/groups.jsp | 59 +++++++++++++++++++++++++++++++-------
 1 file changed, 48 insertions(+), 11 deletions(-)
diff --git a/src/main/webapp/groups.jsp b/src/main/webapp/groups.jsp
index da901c2..b852e91 100644
--- a/src/main/webapp/groups.jsp
+++ b/src/main/webapp/groups.jsp
@@ -5,6 +5,21 @@
 <!DOCTYPE html>
 <html lang="{language}">
 <jsp:include page="template/header.jsp"/>
+
+	<script type="text/javascript">
+		function showRows(classToHide) {
+			toggleRows("link_" + classToHide, "display:none");
+			toggleRows(classToHide, "");
+		}
+		function toggleRows(classToToggle, style) {
+			var titles = document.querySelectorAll("." + classToToggle);
+			var i = titles.length;
+			while (i--) {
+				titles[i].setAttribute("style", style);
+				}	
+		}
+	</script>
+
 <body>
 	<jsp:include page="template/navbar.jsp"/>
     <div class="container">
@@ -14,23 +29,45 @@
     		<a href="${newgroupurl}" class="btn btn-default pull-right additional-space-bottom"><fmt:message key="groups.create"/></a>
     	</div>
 		<table class="table table-hover">
-			<tr><th><fmt:message key="groups.column.name"/></th><th><fmt:message key="groups.column.members"/></th><th><fmt:message key="groups.column.operations"/></th></tr>
+			<tr>
+				<th><fmt:message key="groups.column.name"/></th>
+				<th><fmt:message key="groups.column.members"/>
+					<a class="link_hiddenLines" onclick="showRows('hiddenLines')" style="padding: 0px 0px 0px 100px;font-weight:normal;">... show all ...</a>
+				</th>
+				<th><fmt:message key="groups.column.operations"/></th>
+			</tr>
 			<c:forEach items="${groups}" var="groupentry">
 				<tr>
 					<c:url var="updgroupurl" value="/group/${groupentry.key}?op=edit" />
 					<td><a href="${updgroupurl}">${groupentry.value.name}</a></td>
 					<td>
 						<table>
-							<c:forEach items="${groupentry.value.members}" var="userdn">
-								<c:url var="userurl" value="/user/${userdn}" />
-								<tr>
-									<td style="padding: 0px 50px 0px 0px">
-										<a href="${userurl}">${users[userdn].login}</a>
-									</td>
-									<td style="padding: 0px 10px 0px 0px">${users[userdn].firstname}</td>
-									<td>${users[userdn].lastname}</td>
-								</tr>
-							</c:forEach>
+						<tbody>
+							<c:set var="count" value="0" scope="page" />
+							<c:set var="classHide" value="hiddenLines hiddenLines_${groupentry.value.name}"/>
+							<c:set var="classRow" value=""/>
+							<c:set var="styleRow" value=""/>
+								<c:forEach items="${groupentry.value.members}" var="userdn">
+									<c:url var="userurl" value="/user/${userdn}" />
+									<c:set var="count" value="${count + 1}" scope="page"/>
+									<c:if test="${ count eq 10 }">
+										<c:set var="classRow" value="${classHide}"/>
+										<c:set var="styleRow" value="display:none"/>
+										<tr class="link_hiddenLines link_hiddenLines_${groupentry.value.name}">
+											<td></td>
+											<td colspan="2">... <a onclick="showRows('hiddenLines_${groupentry.value.name}')">show more</a> ...</td>
+											<td></td>
+										</tr>
+									</c:if>
+									<tr class="${classRow}" style="${styleRow}">
+										<td style="padding: 0px 30px 0px 0px">
+											<a href="${userurl}">${users[userdn].login}</a>
+										</td>
+										<td style="padding: 0px 10px 0px 0px">${users[userdn].firstname}</td>
+										<td>${users[userdn].lastname}</td>
+									</tr>
+								</c:forEach>
+						</tbody>
 						</table>
 					</td>
 					<c:url var="delgroupurl" value="/group/${groupentry.key}?op=delete" />
