FEAT: Some work on the tree

Found some bugs with the connection creation modal. Need to work on the
parsing and such with regex.

internal/database/tree.go

@@ -34,8 +34,6 @@ func TableTree(c *gin.Context) string {
 		return ""
 	}
 
-	fmt.Printf("%+v\n", tree)
-
 	return templates.TableTree(tree)
 }
 

internal/templates/tree.go

@@ -12,18 +12,19 @@ const TREE_BODY_TEMPLATE string = `<li>%s</li>`
 
 // Table definition
 const TABLE_TEMPLATE string = `
-	<button class="w-full text-left text-gray-700 font-medium hover:bg-gray-100 p-2 rounded flex items-center"
+	<button class="w-full text-left text-gray-700 font-medium hover:bg-gray-100 p-2 rounded flex items-center">
-		title="Select this table">
+		<svg onclick="ToggleFields('%s');" id="icon-%s" class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" transform="rotate(-90)">
-		<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-			xmlns="http://www.w3.org/2000/svg">
 			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9l6 6 6-6"></path>
 		</svg>
-		%s
+		<span class="hover:underline" title="Select this table" onclick="ToggleFields('%s');">%s</span>
+		<svg class="w-8 h-8 ml-auto p-2 rounded-full hover:bg-gray-300 transition:all duration-150" xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512" onclick="LoadTableQuery('%s');">
+			<path d="M464 428L339.92 303.9a160.48 160.48 0 0030.72-94.58C370.64 120.37 298.27 48 209.32 48S48 120.37 48 209.32s72.37 161.32 161.32 161.32a160.48 160.48 0 0094.58-30.72L428 464zM209.32 319.69a110.38 110.38 0 11110.37-110.37 110.5 110.5 0 01-110.37 110.37z"/>
+		</svg>
 	</button>
 	`
 
 // Fields definition
-const FIELDS_LIST_OPEN string = `<ul class="ml-6 mt-1 space-y-1 text-gray-600">`
+const FIELDS_LIST_OPEN string = `<ul id="fields-%s" class="hidden ml-6 mt-1 space-y-1 text-gray-600">`
 const FIELDS_LIST_CLOSE string = `</ul>`
 const FIELD_TEMPLATE string = `
 	<li>
@@ -47,8 +48,9 @@ func TableTree(tree map[string][]string) string {
 
 	var body string
 	for _, table := range getSortedKeys(tree) {
-		body += fmt.Sprintf(TABLE_TEMPLATE, table)
+		body += fmt.Sprintf(TABLE_TEMPLATE, table, table, table, table, table)
-		body += FIELDS_LIST_OPEN + generateFields(tree[table]) + FIELDS_LIST_CLOSE
+		fields := fmt.Sprintf(FIELDS_LIST_OPEN, table)
+		body += fields + generateFields(tree[table]) + FIELDS_LIST_CLOSE
 	}
 
 	html += fmt.Sprintf(TREE_BODY_TEMPLATE, body)

tailwind.config.js

@@ -2,7 +2,8 @@
 module.exports = {
   content: [
     "./web/templates/*.html",
-    "./web/templates/**/*.html"
+    "./web/templates/**/*.html",
+    "./internal/templates/*.go"
   ],
   darkMode: "class",
   theme: {

web/static/scripts/tree.js

@@ -0,0 +1,25 @@
+/*
+ * This file contains the functions that are used to toggle the visibility of the fields 
+ * in the tree view of the tables.
+ *
+ * This file also contains the functions that are used to generate quick queries for the 
+ * tables.
+ */
+function ToggleFields(id) {
+  const fields = document.getElementById(`fields-${id}`);
+  const button_svg = document.getElementById(`icon-${id}`);
+  if (fields.classList.contains("hidden")) {
+    fields.classList.remove("hidden");
+    button_svg.setAttribute("transform", "rotate(0)");
+  } else {
+    fields.classList.add("hidden");
+    button_svg.setAttribute("transform", "rotate(-90)");
+  }
+}
+
+
+function LoadTableQuery(table) {
+  const sql = document.getElementById("sql")
+  sql.value = `SELECT * FROM ${table};`;
+  sql.dispatchEvent(new Event('input', { bubbles: true }));
+}

web/static/styles/main.css

@@ -613,6 +613,14 @@ video {
   margin-top: 1rem;
 }
 
+.mr-auto {
+  margin-right: auto;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
 .block {
   display: block;
 }
@@ -657,6 +665,10 @@ video {
   height: 100vh;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
 .max-h-full {
   max-height: 100%;
 }
@@ -693,6 +705,10 @@ video {
   width: 100%;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -701,6 +717,20 @@ video {
   flex-grow: 1;
 }
 
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-90 {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -854,6 +884,16 @@ video {
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
+.bg-red-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -870,6 +910,15 @@ video {
   padding: 1.5rem;
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -900,11 +949,6 @@ video {
   padding-bottom: 1rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1005,16 +1049,46 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.duration-100 {
+  transition-duration: 100ms;
+}
+
+.duration-150 {
+  transition-duration: 150ms;
+}
+
+.\*\:hidden > * {
+  display: none;
+}
+
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
 .hover\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
 .focus\:border-blue-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));

web/templates/index.html

@@ -22,7 +22,7 @@
         <div class="flex items-center justify-end space-x-4 flex-wrap">
           <form hx-post="/v1/api/connections/connect" hx-trigger="change" hx-swap="outerHTML" hx-target="#connected-database" hx-encoding="multipart/form-data" class="flex items-center justify-end space-x-2 flex-wrap">
             <label for="connected-database" class="block text-sm font-medium text-gray-700">Connected Database:</label>
-            <select hx-get="/v1/web/connections" hx-trigger="load" hx-swap="outerHTML" id="connected-database" name="connected-database" class="mt-1 block p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm md:text-base"></select>
+            <select hx-get="/v1/web/connections" hx-trigger="load" hx-swap="outerHTML" id="connected-database" name="connected-database" hx-params="none" class="mt-1 block p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm md:text-base"></select>
           </form>
           <button onclick="ShowModal();" class="bg-blue-500 text-white px-4 py-2 my-2 rounded-md text-sm md:text-base">
             Add Connection
@@ -47,7 +47,7 @@
               </svg>
             </button>
           </div>
-          <div class="p-4 max-h-full" hx-get="/v1/web/connections/tree" hx-trigger="load" hx-target="#database-table-tree">
+          <div class="p-4 max-h-full" hx-get="/v1/web/connections/tree" hx-trigger="load" hx-params="none" hx-target="#database-table-tree">
             <ul hx-swap-oob="outerHTML" id="database-table-tree" class="space-y-2"></ul>
           </div>
         </div>
@@ -174,8 +174,9 @@
     </div>
 
     <!-- Scripts -->
-    <script src="/v1/web/static/scripts/password.js"></script>
+    <script defer src="/v1/web/static/scripts/password.js"></script>
-    <script src="/v1/web/static/scripts/modal.js"></script>
+    <script defer src="/v1/web/static/scripts/modal.js"></script>
+    <script defer src="/v1/web/static/scripts/tree.js"></script>
   </body>
 
 </html>