UI improvements

BjoernKW · Dec 21, 2022 · f905bcc · f905bcc
1 parent d02d3cd
commit f905bcc
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 29 deletions.
diff --git a/pom.xml b/pom.xml
@@ -10,7 +10,7 @@
 	</parent>
 	<groupId>com.bjoernkw</groupId>
 	<artifactId>schematic</artifactId>
-	<version>0.0.7-SNAPSHOT</version>
+	<version>0.0.7</version>
 	<name>Schematic</name>
 	<description>Database management UI for Spring Boot</description>
 	<properties>

diff --git a/src/main/java/com/bjoernkw/schematic/IndexController.java b/src/main/java/com/bjoernkw/schematic/IndexController.java
@@ -0,0 +1,15 @@
+package com.bjoernkw.schematic;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+@Controller
+@RequestMapping("/")
+public class IndexController {
+
+    @GetMapping
+    public String redirect() {
+        return "redirect:/schematic/tables";
+    }
+}
diff --git a/src/main/java/com/bjoernkw/schematic/Table.java b/src/main/java/com/bjoernkw/schematic/Table.java
@@ -9,7 +9,7 @@ class Table {
 
     List<Column> columns;
 
-    List<Map<String, Object>> entries;
+    List<Map<String, Object>> rows;
 
     public String getTableName() {
         return tableName;
@@ -27,11 +27,11 @@ public void setColumns(List<Column> columns) {
         this.columns = columns;
     }
 
-    public List<Map<String, Object>> getEntries() {
-        return entries;
+    public List<Map<String, Object>> getRows() {
+        return rows;
     }
 
-    public void setEntries(List<Map<String, Object>> entries) {
-        this.entries = entries;
+    public void setRows(List<Map<String, Object>> rows) {
+        this.rows = rows;
     }
 }
diff --git a/src/main/java/com/bjoernkw/schematic/TablesController.java b/src/main/java/com/bjoernkw/schematic/TablesController.java
@@ -79,7 +79,7 @@ private List<Table> getTables() {
                             table.getTableName()
                     )
             );
-            table.setEntries(jdbcTemplate.queryForList("SELECT * FROM " + table.getTableName()));
+            table.setRows(jdbcTemplate.queryForList("SELECT * FROM " + table.getTableName() + " FETCH FIRST 10 ROWS ONLY"));
         });
 
         return tables;

diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css
@@ -5,3 +5,15 @@ h1.app-title {
 #tables {
     overflow-x: scroll;
 }
+
+.show-table-icon, .hide-table-icon {
+    display: none;
+}
+
+button.collapsed .show-table-icon {
+    display: inline-block;
+}
+
+button:not(.collapsed) .hide-table-icon {
+    display: inline-block;
+}
diff --git a/src/main/resources/templates/fragments/header.html b/src/main/resources/templates/fragments/header.html
@@ -4,7 +4,7 @@
 
 <!--/*@thymesVar id="activeMenuItem" type="java.lang.String"*/-->
 
-<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" th:fragment="header">
+<nav class="navbar navbar-expand-lg navbar-light bg-info bg-opacity-10 fixed-top p-4" th:fragment="header">
   <div class="container">
     <h1 class="app-title">Schematic - a database management UI for Spring Boot</h1>
   </div>

diff --git a/src/main/resources/templates/fragments/tables.html b/src/main/resources/templates/fragments/tables.html
@@ -4,44 +4,56 @@
       xmlns:hx="https://github.com/wimdeblauwe/htmx-spring-boot-thymeleaf">
 <div class="container" th:if="${tables}" th:fragment="tables">
     <div class="m-4 p-4 border bg-light" th:each="table : ${tables}">
-        <div class="mb-2">
+        <div class="mb-4 p-4 border bg-success bg-opacity-10">
             <strong>[[${table.tableName}]]</strong>
-            <button class="btn btn-outline-warning"
-                    title="Delete entries"
-                    data-bs-toggle="modal"
-                    th:attr="data-bs-target='#deleteEntriesModal_' + ${table.tableName}">
-                <i class="fas fa-eraser"></i>
-            </button>
-            <button class="btn btn-outline-danger"
-                    title="Drop table"
-                    data-bs-toggle="modal"
-                    th:attr="data-bs-target='#dropTableModal_' + ${table.tableName}">
-                <i class="fas fa-trash"></i>
-            </button>
+            <div class="float-end">
+                <button class="btn btn-sm btn-info"
+                        title="Hide / show table rows"
+                        data-bs-toggle="collapse"
+                        th:attr="data-bs-target='#collapsible_' + ${table.tableName}">
+                    <i class="fas fa-eye show-table-icon"></i>
+                    <i class="fas fa-eye-slash hide-table-icon"></i>
+                </button>
+                <button class="btn btn-sm btn-outline-warning"
+                        title="Delete rows"
+                        data-bs-toggle="modal"
+                        th:attr="data-bs-target='#deleteRowsModal_' + ${table.tableName}">
+                    <i class="fas fa-eraser"></i>
+                </button>
+                <button class="btn btn-sm btn-outline-danger"
+                        title="Drop table"
+                        data-bs-toggle="modal"
+                        th:attr="data-bs-target='#dropTableModal_' + ${table.tableName}">
+                    <i class="fas fa-trash"></i>
+                </button>
+            </div>
         </div>
-        <table class="table table-striped table-hover" th:if="${table.columns}">
+        <table th:id="'collapsible_' + ${table.tableName}"
+               class="table table-striped table-hover collapse show"
+               th:if="${table.columns}">
+            <caption>showing the first 10 rows here</caption>
             <tbody>
             <tr>
                 <td th:each="column : ${table.columns}">
                     <strong>[[${column.columnName}]]</strong> ([[${column.dataType}]])
                 </td>
             </tr>
-            <tr th:each="entry : ${table.entries}">
+            <tr th:each="entry : ${table.rows}">
                 <td th:each="column : ${table.columns}">
                     [[${entry.get(column.columnName)}]]
                 </td>
             </tr>
             </tbody>
         </table>
         <div class="modal fade"
-             th:id="'deleteEntriesModal_' + ${table.tableName}"
+             th:id="'deleteRowsModal_' + ${table.tableName}"
              tabindex="-1"
-             aria-labelledby="deleteEntriesModalLabel"
+             aria-labelledby="deleteRowsModalLabel"
              aria-hidden="true">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <h1 class="modal-title fs-5" id="deleteEntriesModalLabel">Truncate table "[[${table.tableName}]]"?</h1>
+                        <h1 class="modal-title fs-5" id="deleteRowsModalLabel">Truncate table "[[${table.tableName}]]"?</h1>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-footer">

diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -3,11 +3,11 @@
       xmlns:th="http://www.thymeleaf.org"
       xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
       layout:decorate="~{layouts/layout}"
-      th:with="headline='Welcome to Schema - a database management UI for Spring Boot!'">
+      th:with="headline='Welcome to Schematic - a database management UI for Spring Boot!'">
 <head>
-  <title>Tables</title>
+  <title>Schematic - a database management UI for Spring Boot</title>
 </head>
-<section class="section" layout:fragment="page-content">
+<section class="section pt-5" layout:fragment="page-content">
   <div class="container pt-5">
     <h2>Tables</h2>
     <div id="tables" class="smooth" th:insert="~{fragments/tables}"></div>