UI improvements

BjoernKW · Dec 23, 2022 · 82460b9 · 82460b9
1 parent 919ce75
commit 82460b9
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 14 deletions.
diff --git a/pom.xml b/pom.xml
@@ -10,7 +10,7 @@
 	</parent>
 	<groupId>com.bjoernkw</groupId>
 	<artifactId>schematic</artifactId>
-	<version>0.0.9-SNAPSHOT</version>
+	<version>0.0.9</version>
 	<name>Schematic</name>
 	<description>Database management UI for Spring Boot</description>
 	<properties>
@@ -73,6 +73,11 @@
 			<version>${htmx.org.version}</version>
 		</dependency>
 
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-configuration-processor</artifactId>
+			<optional>true</optional>
+		</dependency>
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-devtools</artifactId>

diff --git a/src/main/java/com/bjoernkw/schematic/IndexController.java b/src/main/java/com/bjoernkw/schematic/IndexController.java
@@ -6,10 +6,10 @@
 
 @Controller
 @RequestMapping("/")
-class IndexController {
+public class IndexController {
 
     @GetMapping
-    String redirect() {
+    public String redirect() {
         return "redirect:/schematic/tables";
     }
 }
diff --git a/src/main/java/com/bjoernkw/schematic/SchematicProperties.java b/src/main/java/com/bjoernkw/schematic/SchematicProperties.java
@@ -0,0 +1,29 @@
+package com.bjoernkw.schematic;
+
+import org.springframework.boot.context.properties.ConfigurationProperties;
+import org.springframework.stereotype.Component;
+
+@Component
+@ConfigurationProperties("schematic")
+public class SchematicProperties {
+
+    private String name;
+
+    private String version;
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getVersion() {
+        return version;
+    }
+
+    public void setVersion(String version) {
+        this.version = version;
+    }
+}
diff --git a/src/main/java/com/bjoernkw/schematic/TablesController.java b/src/main/java/com/bjoernkw/schematic/TablesController.java
@@ -7,6 +7,7 @@
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.*;
 
+import java.sql.SQLException;
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
@@ -15,7 +16,7 @@
 @RequestMapping("/schematic/tables")
 public class TablesController {
 
-    private static final String VIEW_MODEL_NAME = "tables";
+    private static final String TABLE_VIEW_MODEL_NAME = "tables";
 
     private static final String TABLE_VIEW_FRAGMENT_NAME = "fragments/tables";
 
@@ -28,7 +29,7 @@ public TablesController(JdbcTemplate jdbcTemplate) {
     @GetMapping
     public String listTables(Model model) {
         model.addAttribute(
-                VIEW_MODEL_NAME,
+                TABLE_VIEW_MODEL_NAME,
                 getTables()
         );
 
@@ -60,7 +61,7 @@ public String queryDatabase(@RequestParam String sqlQuery, Model model) {
         tables.addAll(getTables());
 
         model.addAttribute(
-                VIEW_MODEL_NAME,
+                TABLE_VIEW_MODEL_NAME,
                 tables
         );
 
@@ -76,7 +77,7 @@ public String dropTable(@PathVariable String tableName, Model model) {
         }
 
         model.addAttribute(
-                VIEW_MODEL_NAME,
+                TABLE_VIEW_MODEL_NAME,
                 getTables()
         );
 
@@ -92,7 +93,23 @@ public String truncateTable(@PathVariable String tableName, Model model) {
         }
 
         model.addAttribute(
-                VIEW_MODEL_NAME,
+                TABLE_VIEW_MODEL_NAME,
+                getTables()
+        );
+
+        return TABLE_VIEW_FRAGMENT_NAME;
+    }
+
+    @ExceptionHandler(SQLException.class)
+    @HxRequest
+    public String error(SQLException sqlException, Model model) {
+        model.addAttribute(
+                "error",
+                sqlException.getMessage()
+        );
+
+        model.addAttribute(
+                TABLE_VIEW_MODEL_NAME,
                 getTables()
         );
 

diff --git a/src/main/java/com/bjoernkw/schematic/autoconfiguration/SchematicAutoConfiguration.java b/src/main/java/com/bjoernkw/schematic/autoconfiguration/SchematicAutoConfiguration.java
@@ -1,5 +1,6 @@
 package com.bjoernkw.schematic.autoconfiguration;
 
+import com.bjoernkw.schematic.SchematicProperties;
 import com.bjoernkw.schematic.TablesController;
 import org.springframework.boot.autoconfigure.AutoConfiguration;
 import org.springframework.boot.autoconfigure.condition.ConditionalOnMissingBean;
@@ -22,4 +23,10 @@ public SchematicAutoConfiguration(JdbcTemplate jdbcTemplate) {
     public TablesController tablesController() {
         return new TablesController(jdbcTemplate);
     }
+
+    @Bean
+    @ConditionalOnMissingBean
+    public SchematicProperties schematicApplicationProperties() {
+        return new SchematicProperties();
+    }
 }
diff --git a/src/main/resources/application.yml b/src/main/resources/application.yml
@@ -1,3 +1,7 @@
+schematic:
+  name: @project.name@
+  version: @project.version@
+
 spring:
   datasource:
     url: jdbc:postgresql://localhost:5432/postgres

diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css
@@ -17,3 +17,21 @@ button.collapsed .show-table-icon {
 button:not(.collapsed) .hide-table-icon {
     display: inline-block;
 }
+
+.fade-in {
+    opacity: 1;
+    animation-name: fadeInOpacity;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-duration: 0.5s;
+}
+
+@keyframes fadeInOpacity {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
diff --git a/src/main/resources/templates/fragments/header.html b/src/main/resources/templates/fragments/header.html
@@ -7,6 +7,9 @@
 <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 class="float-end small">
+      v<span th:text="${@schematicProperties.version}"></span>
+    </div>
   </div>
 </nav>
 </html>
diff --git a/src/main/resources/templates/fragments/tables.html b/src/main/resources/templates/fragments/tables.html
@@ -2,25 +2,34 @@
 <html lang="en"
       xmlns:th="http://www.thymeleaf.org"
       xmlns:hx="https://github.com/wimdeblauwe/htmx-spring-boot-thymeleaf">
-<div class="container" th:if="${tables}" th:fragment="tables">
+<div class="container fade-in" th:if="${tables}" th:fragment="tables">
+    <div class="alert alert-danger alert-dismissible fade show" role="alert" th:if="${error}">
+        [[${error}]]
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
     <div class="m-4 p-4 border bg-light" th:each="table : ${tables}">
         <div class="mb-4 p-4 border bg-success bg-opacity-10">
             <strong>[[${table.tableName}]]</strong>
             <div class="float-end">
-                <button class="btn btn-sm btn-info"
+                <button type="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 th:unless="${table.queryResult}" class="btn btn-sm btn-outline-warning"
+                <button th:unless="${table.queryResult}"
+                        type="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 th:unless="${table.queryResult}" class="btn btn-sm btn-outline-danger"
+                <button th:unless="${table.queryResult}"
+                        type="button"
+                        class="btn btn-sm btn-outline-danger"
                         title="Drop table"
                         data-bs-toggle="modal"
                         th:attr="data-bs-target='#dropTableModal_' + ${table.tableName}">

diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -12,7 +12,8 @@
   <div class="container pt-5">
     <h2>
       Query database
-      <button class="btn btn-sm btn-info"
+      <button type="button"
+              class="btn btn-sm btn-info"
               title="Hide / show database query tool"
               data-bs-toggle="collapse"
               data-bs-target="#collapsible_query_database">
@@ -32,7 +33,7 @@ <h2>
       </form>
     </div>
     <h2>Tables</h2>
-    <div id="tables" class="smooth" th:insert="~{fragments/tables}"></div>
+    <div id="tables" th:insert="~{fragments/tables}"></div>
   </div>
 </section>
 </html>