List the letter-sound correspondences where a letter is used #1701

src/main/java/ai/elimu/web/content/letter/LetterEditController.java

@@ -1,20 +1,15 @@
 package ai.elimu.web.content.letter;
 
 import java.util.Calendar;
-import javax.validation.Valid;
+import java.util.List;
 
-import org.apache.logging.log4j.Logger;
-import ai.elimu.dao.LetterContributionEventDao;
-import ai.elimu.dao.LetterDao;
-import ai.elimu.model.content.Letter;
-import ai.elimu.model.contributor.Contributor;
-import ai.elimu.model.contributor.LetterContributionEvent;
-import ai.elimu.util.DiscordHelper;
-import ai.elimu.web.context.EnvironmentContextLoaderListener;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpSession;
+import javax.validation.Valid;
+
 import org.apache.commons.lang.StringUtils;
 import org.apache.logging.log4j.LogManager;
+import org.apache.logging.log4j.Logger;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
@@ -23,6 +18,16 @@
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
 
+import ai.elimu.dao.LetterContributionEventDao;
+import ai.elimu.dao.LetterDao;
+import ai.elimu.dao.LetterSoundDao;
+import ai.elimu.model.content.Letter;
+import ai.elimu.model.content.LetterSound;
+import ai.elimu.model.contributor.Contributor;
+import ai.elimu.model.contributor.LetterContributionEvent;
+import ai.elimu.util.DiscordHelper;
+import ai.elimu.web.context.EnvironmentContextLoaderListener;
+
 @Controller
 @RequestMapping("/content/letter/edit")
 public class LetterEditController {
@@ -31,6 +36,9 @@ public class LetterEditController {
 
     @Autowired
     private LetterDao letterDao;
+
+     @Autowired
+    private LetterSoundDao letterSoundDao;
 
     @Autowired
     private LetterContributionEventDao letterContributionEventDao;
@@ -46,7 +54,18 @@ public String handleRequest(
         model.addAttribute("timeStart", System.currentTimeMillis());
 
         model.addAttribute("letterContributionEvents", letterContributionEventDao.readAll(letter));
-
+
+        List<LetterSound> letterSounds = letterSoundDao.readAllOrderedByUsage();
+        model.addAttribute("letterSounds", letterSounds);
+
+        int maxUsageCount = 0;
+        for (LetterSound letterSound : letterSounds) {
+            if (letterSound.getUsageCount() > maxUsageCount) {
+                maxUsageCount = letterSound.getUsageCount();
+            }
+        }
+        model.addAttribute("maxUsageCount", maxUsageCount);
+
         return "content/letter/edit";
     }
 

src/main/webapp/WEB-INF/jsp/content/letter/edit.jsp

@@ -185,4 +185,39 @@
             </li>
         </ol>
     </div>
+    <h5 class="center">
+        <fmt:message key="letter.sound.correspondences" /> (${fn:length(letterSounds)})
+    </h5>
+    <div class="card-panel">
+        <c:if test="${not empty letterSounds}">
+            <div class="scrollable-table-container">
+                <table class="bordered highlight fixed-header">
+                    <thead>
+                        <tr>
+                            <th><fmt:message key="usage.count" /></th>
+                            <th class="letters-column"><fmt:message key="letters" /></th>
+                            <th></th>
+                            <th class="sounds-column"><fmt:message key="sounds" /></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <c:forEach var="letterSound" items="${letterSounds}">
+                            <tr class="letterSound">
+                                <td>${letterSound.usageCount}</td>
+                                <td class="letters-column" style="font-size: 1em;">
+                                    " <c:forEach var="letter" items="${letterSound.letters}"><a href="<spring:url value='/content/letter/edit/${letter.id}' />">${letter.text}</a> </c:forEach> "
+                                </td>
+                                <td >
+                                    ➞
+                                </td>
+                                <td class="sounds-column"style="font-size: 1em;">
+                                    / <c:forEach var="sound" items="${letterSound.sounds}"><a href="<spring:url value='/content/sound/edit/${sound.id}' />">${sound.valueIpa}</a> </c:forEach> /
+                                </td>
+                            </tr>
+                        </c:forEach>
+                    </tbody>
+                </table>
+            </div>
+        </c:if>
+    </div>
 </content:aside>

src/main/webapp/static/css/content/styles.css

@@ -127,3 +127,24 @@ blockquote,
     border-radius: 4px;
     padding: 4px;
 }
+.scrollable-table-container {
+    max-height: 250px;
+    overflow-y: auto;
+}
+.fixed-header thead {
+    position: sticky;
+    top: 0;
+    background-color: white;
+    z-index: 1;
+}
+.fixed-header th,
+    .fixed-header td {
+        text-align: center;
+        vertical-align: middle;
+}
+.letters-column {
+    min-width: 90px;
+}
+.sounds-column {
+    min-width: 90px;
+}