fix: closes #37

views/js/main.js

@@ -15,6 +15,13 @@ function tabs() {
                                 elm.classList.remove("selected");
                             }
                             child.classList.add("selected");
+
+                            for (const childElm of child.parentElement.children) {
+                                if (childElm.classList.contains("selected")) {
+                                    childElm.classList.remove("selected")
+                                }
+                            }
+
                             document.querySelector(`.tabs .content[data-tab="${
                                 child.getAttribute("data-tab")
                             }"]`)?.classList.add("selected");
@@ -41,6 +48,55 @@ function tabs() {
 
         }
     }
+    for (const elm of document.querySelectorAll(".tabs-header")) {
+        let count = 0;
+        let selected = 0;
+        for (const child of elm.children[0].children) {
+            if (child.tagName == "BUTTON")  {
+                count++;
+                if (child.classList.contains("selected")) {
+                    selected++;
+                }
+                if (!child.getAttribute("data-armed")) {
+                    child.addEventListener("click", () => {
+                        if (!child.classList.contains("selected")) {
+                            for (const elm of child.parentElement.children) {
+                                elm.classList.remove("selected");
+                            }
+                            child.classList.add("selected");
+
+                            for (const childElm of child.parentElement.parentElement.children) {
+                                if (childElm.classList.contains("selected")) {
+                                    childElm.classList.remove("selected")
+                                }
+                            }
+
+                            document.querySelector(`.tabs-header .content[data-tab="${
+                                child.getAttribute("data-tab")
+                            }"]`)?.classList.add("selected");
+                        }
+                    });
+                    child.setAttribute("data-armed", "true")
+                }
+            }
+        }
+
+        if (selected > 1 || selected == 0) {
+            for (const child of elm.children) {
+                child.classList.remove("selected");
+            }
+            for (const child of elm.children[0].children) {
+                if (child.tagName == "BUTTON") {
+                    child.classList.add("selected");
+                    document.querySelector(`.tabs .content[data-tab="${
+                        child.getAttribute("data-tab")
+                    }"]`)?.classList.add("selected");
+                    break;
+                }
+            }
+
+        }
+    }
 }
 function load() {
     for (const elm of document.querySelectorAll("form > button")) {

views/models/edit.html

@@ -126,30 +126,40 @@
     {{ if eq (len .Classes) 0 }}
         TODO CREATE TABLE
     {{else}}
-        <div class="tabs">
+        <div class="tabs-header">
             {{/* Handle the case where there are to many buttons */}}
-            {{ range .Classes }}
+            <div class="header">
-                {{/* TODO Auto Load 1st */}}
+                {{ range .Classes }}
-                <button 
+                    {{/* TODO Auto Load 1st */}}
-                    hx-get="/models/data/list?id={{ .Id }}"
+                    <button 
-                    hx-target=".content[data-tab='{{ .Name }}']"
+                        hx-get="/models/data/list?id={{ .Id }}"
-                    hx-swap="innerHTML"
+                        hx-target=".content[data-tab='{{ .Name }}']"
-                    hx-headers='{"REQUEST-TYPE": "html"}'
+                        hx-swap="innerHTML"
-                    class="tab" 
+                        hx-headers='{"REQUEST-TYPE": "html"}'
-                    data-tab="{{ .Name }}">
+                        hx-trigger="click"
-                    {{ .Name }}
+                        class="tab" 
-                </button>
+                        data-tab="{{ .Name }}">
-            {{ end }}
+                        {{ .Name }}
-            {{ range .Classes }}
+                    </button>
-                <div 
+                {{ end }}
-                    class="content" 
+            </div>
-                    data-tab="{{ .Name }}"
+            {{ range $i, $a := .Classes }}
-                    hx-get="/models/data/list?id={{ .Id }}"
+                {{ if eq $i 0}}
-                    hx-target=".content[data-tab='{{ .Name }}']"
+                    <div 
-                    hx-trigger="load"
+                        hx-get="/models/data/list?id={{ .Id }}"
-                    hx-swap="innerHTML"
+                        hx-target=".content[data-tab='{{ $a.Name }}']"
-                    hx-headers='{"REQUEST-TYPE": "html"}'>
+                        hx-swap="innerHTML"
-                </div>
+                        hx-headers='{"REQUEST-TYPE": "html"}'
+                        hx-trigger="load"
+                        class="content" 
+                        data-tab="{{ $a.Name }}">
+                    </div>
+                {{ else }}
+                    <div 
+                        class="content" 
+                        data-tab="{{ $a.Name }}" >
+                    </div>
+                {{ end }}
             {{ end }}
         </div>
     {{end}}

views/styles/main.css

@@ -391,6 +391,11 @@ table tr td .button {
     gap: 0 5px;
 }
 
+.tabs-header .header {
+    display: flex;
+    overflow-x: scroll;
+}
+
 .tabs .content {
     display: none;
     padding: 5px;