Add entity and column selection

Author: Kamshory, MT

index.html

@@ -23,7 +23,7 @@
   <script src="js/sql-wasm.min.js"></script>
   <script src="js/Main.min.js"></script>
   <style>
-    .erd-wrapper, #erd-description, #entity-selection{
+    .erd-wrapper, #erd-selection, #entity-primary-key{
       position: relative;
       max-height: 320px;
       overflow: auto;
@@ -68,13 +68,13 @@ <h4 class="mb-0">Spring GraphQL Project Generator</h4>
                   </button>
                 </li>
                 <li class="nav-item" role="presentation">
-                  <button class="nav-link" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="false">
-                    Description
+                  <button class="nav-link" id="selection-tab" data-bs-toggle="tab" data-bs-target="#selection" type="button" role="tab" aria-controls="description" aria-selected="false">
+                    Selection
                   </button>
                 </li>
                 <li class="nav-item" role="presentation">
-                  <button class="nav-link" id="selection-tab" data-bs-toggle="tab" data-bs-target="#selection" type="button" role="tab" aria-controls="description" aria-selected="false">
-                    Selection
+                  <button class="nav-link" id="primaty-key-tab" data-bs-toggle="tab" data-bs-target="#primaty-key" type="button" role="tab" aria-controls="description" aria-selected="false">
+                    Primary Keys
                   </button>
                 </li>
               </ul>
@@ -87,34 +87,33 @@ <h4 class="mb-0">Spring GraphQL Project Generator</h4>
                   </div>
                 </div>
 
-                <!-- Tab: Description -->
-                <div class="tab-pane fade" id="description" role="tabpanel" aria-labelledby="description-tab">
+                <!-- Tab: Selection -->
+                <div class="tab-pane fade" id="selection" role="tabpanel" aria-labelledby="selection-tab">
                   <!-- Anda bisa isi tabel deskripsi di sini -->
-                  <div id="erd-description">
+                  <div id="erd-selection">
                     <table class="table table-sm table-striped align-middle">
                       <thead>
                       <tr>
                         <th>Column</th><th>Type</th><th>PK</th><th>Nullable</th><th>Default</th>
                       </tr>
                       </thead>
-                      <tbody id="erd-description-body"></tbody>
+                      <tbody id="erd-selection-body"></tbody>
                     </table>
                   </div>
                 </div>
 
 
-              <!-- Tab: Selection -->
-                <div class="tab-pane fade" id="selection" role="tabpanel" aria-labelledby="selection-tab">
-                  <div id="entity-selection">
+              <!-- Tab: Primary Keys -->
+                <div class="tab-pane fade" id="primaty-key" role="tabpanel" aria-labelledby="primaty-key-tab">
+                  <div id="entity-primary-key">
                     <table class="table table-sm table-striped align-middle">
                       <thead>
                       <tr>
-                        <th width="20"><input type="checkbox" class="check-all" checked></th>
                         <th width="50%">Entity Name</th>
                         <th>Primary Keys</th>
                       </tr>
                       </thead>
-                      <tbody id="entity-selection-body"></tbody>
+                      <tbody id="entity-primary-key-body"></tbody>
                     </table>
                   </div>
                 </div>

js/EntityRenderer.js

@@ -840,13 +840,22 @@ class EntityRenderer {
     addDescription(entity, wrapper) {
         let container = document.createElement("div");
         container.classList.add("mb-4");
+        
+        let entitySelector = document.createElement("input");
+        entitySelector.type = "checkbox";
+        entitySelector.className = "entity-selector";
+        entitySelector.value = entity.name;
+        entitySelector.checked = true;
 
         let title = document.createElement("h5");
-        title.textContent = entity.name;
+        title.appendChild(entitySelector);
+        title.appendChild(document.createTextNode(" "));
+        title.appendChild(document.createTextNode(entity.name));
         container.appendChild(title);
 
         let table = document.createElement("table");
         table.className = "table table-bordered table-striped table-sm";
+        table.dataset.entity = entity.name;
 
         // Tambahkan styling khusus
         table.style.width = "100%";
@@ -855,11 +864,12 @@ class EntityRenderer {
         let thead = document.createElement("thead");
         thead.innerHTML = `
             <tr>
-                <th style="width: 25%;">Column</th>
+                <th style="width: 23px;"><input type="checkbox" class="check-all" onchange="checkAllColumns(this)" checked></th>
+                <th style="width: 24%;">Column</th>
                 <th style="width: 20%;">Type</th>
                 <th style="width: 10%;">PK</th>
                 <th style="width: 10%;">Serial</th>
-                <th style="width: 15%;">Nullable</th>
+                <th style="width: 14%;">Nullable</th>
                 <th style="width: 20%;">Default</th>
             </tr>
         `;
@@ -877,10 +887,11 @@ class EntityRenderer {
             }
 
             tr.innerHTML = `
+                <td><input type="checkbox" class="check-column" value="${col.name || ''}" checked></td>
                 <td>${col.name || ""}</td>
                 <td>${typeDisplay}</td>
-                <td style="text-align: center;">${col.primaryKey ? "✓" : ""}</td>
-                <td style="text-align: center;">${col.autoIncrement ? "✓" : ""}</td>
+                <td style="text-align: center;">${col.primaryKey ? "YES" : "NO"}</td>
+                <td style="text-align: center;">${col.autoIncrement ? "YES" : "NO"}</td>
                 <td style="text-align: center;">${col.nullable ? "YES" : "NO"}</td>
                 <td>${col.defaultValue != null ? col.defaultValue : ""}</td>
             `;