solid_litequeen 0.8.1 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f307bf9d9eb772756d40395b38cef8f0f0a9cd905e1e0caff872855d9bedf3a6
-  data.tar.gz: 0a0a6528451d67eede41bf3a967a87aebf78da47e07adb4ebc8fab6e20b36d12
+  metadata.gz: 536ae72fe762f8bfcc75364afa5fa995199f02b6ca43d24f7b97bc118b344731
+  data.tar.gz: 87bcc08b867f182fd988bac2fe9c2eb768b46f12869d6e7bfca2a12d4e68b091
 SHA512:
-  metadata.gz: ed7ae24cd435790f31d182634a344202d6f5c839cfedae4d41660113d13b394168fb4426fc6916aeb02d2ba81d2e06f9c208f42608cea508d5b650dc39d67ee4
-  data.tar.gz: 926ec78a8f509413478913ae70fde680992dc353a362250808125c5cac7b8e3c1d69c482dc987fc9f260763a9a67f8427ed1b7645e4a70a99ba34f51d13a2ac5
+  metadata.gz: b57761f2bce146ca25e0d99812cbc30ac182365141156796edfa2a72efab0f4d4644a0a6f37c328719fa4c1db9ce60c4310f74a6b6a9da8ae23b38d74e9f0e0f
+  data.tar.gz: 71d073a29576d62ca4dab1ad01bcfdd9b4b8c0eabe0d3b2bf8b1e4efe1d46fe266eb1b2f0095c1fe887f96c0c320b8f68da4584e9df366fc0f4de03aa7f333fa

data/app/controllers/solid_litequeen/databases_controller.rb

@@ -61,16 +61,20 @@ module SolidLitequeen
       # Verify the sort column exists in the table to prevent SQL injection
       valid_columns = DynamicDatabase.connection.columns(@table_name).map(&:name)
 
+      # Use the column order from session if it exists; otherwise, default to all columns
+      ordered_columns = session["#{@database_id}_#{@table_name}_column_order"] || valid_columns
+
       order_clause = if @sort_column.present? && valid_columns.include?(@sort_column)
         "#{DynamicDatabase.connection.quote_column_name(@sort_column)} #{@sort_direction}"
       end
 
-      sql = [ "SELECT * FROM #{@table_name}" ]
+      sql = [ "SELECT #{ordered_columns.join(', ')} FROM #{@table_name}" ]
       sql << "ORDER BY #{order_clause}" if order_clause
       sql << "LIMIT 50"
 
 
       @data = DynamicDatabase.connection.select_all(sql.join(" "))
+
       @row_count = row_count = DynamicDatabase.connection.select_value("SELECT COUNT(*) FROM #{@table_name}").to_i
     end
 
@@ -93,5 +97,17 @@ module SolidLitequeen
                 type: "application/x-sqlite3",
                 disposition: "attachment"
     end
+
+    def set_column_order
+      table_name = params[:table]
+      database_id = params[:database_id]
+
+      column_order = params[:columnOrder]
+
+      # Store column order in session using database and table as key
+      session["#{database_id}_#{table_name}_column_order"] = column_order
+
+      head :ok
+    end
   end
 end

data/app/javascript/controllers/table_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="table"
+export default class extends Controller {
+  connect() {
+  }
+}

data/app/javascript/solid_litequeen/controllers/table_controller.js

@@ -0,0 +1,161 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="table"
+export default class extends Controller {
+	static targets = [];
+	// We'll store the dragged element here
+	draggedTh = null;
+
+	connect() {
+		this.element.addEventListener(
+			"dragstart",
+			this.handleThDragstart.bind(this),
+		);
+		this.element.addEventListener("dragover", this.handleThDragover.bind(this));
+		this.element.addEventListener("drop", this.handleThDrop.bind(this));
+		this.element.addEventListener("dragend", this.handleThDragend.bind(this));
+		this.element.addEventListener(
+			"dragenter",
+			this.handleThDragenter.bind(this),
+		);
+		this.element.addEventListener(
+			"dragleave",
+			this.handleThDragleave.bind(this),
+		);
+	}
+
+	disconnect() {
+		this.element.removeEventListener("dragstart", this.handleThDragstart);
+
+		this.element.removeEventListener("dragover", this.handleThDragover);
+
+		this.element.removeEventListener("drop", this.handleThDrop);
+
+		this.element.removeEventListener("dragend", this.handleThDragend);
+		this.element.removeEventListener("dragenter", this.handleThDragenter);
+		this.element.removeEventListener("dragleave", this.handleThDragleave);
+	}
+
+	handleThDragstart(e) {
+		// Only allow dragging if the target is a table header
+		if (!e.target.matches("th")) {
+			e.preventDefault();
+			return;
+		}
+
+		// Save the dragged header element
+		this.draggedTh = e.target;
+
+		this.draggedTh.setAttribute("data-is-dragging", true);
+
+		e.dataTransfer.effectAllowed = "move";
+
+		// Some browsers require data to be set in order for dragging to work
+		e.dataTransfer.setData("text/plain", "");
+	}
+
+	handleThDragover(e) {
+		const targetTh = e.target.closest("th");
+		// Only allow dragging if the target is a table header
+		if (!targetTh) {
+			e.preventDefault();
+			return;
+		}
+
+		e.preventDefault();
+
+		// Show a move indicator
+		e.dataTransfer.dropEffect = "move";
+
+		this.draggedTh.removeAttribute("data-is-dragging");
+	}
+
+	handleThDrop(e) {
+		const targetTh = e.target.closest("th");
+
+		// Only handle drop if the target is a table header and we have a dragged header
+		if (!targetTh || !this.draggedTh) {
+			e.preventDefault();
+			return;
+		}
+		e.preventDefault();
+
+		// Swap the positions of the dragged header and the target header
+		const parent = targetTh.parentElement;
+		// Insert the dragged header before the target header
+		parent.insertBefore(this.draggedTh, targetTh);
+
+		const headers = Array.from(parent.querySelectorAll("th"));
+		const columnOrder = headers.map((th) => {
+			// You might want to use data attributes to store column identifiers
+			return th.dataset.columnName;
+		});
+
+		const token = document.querySelector('meta[name="csrf-token"]').content;
+
+		fetch(this.element.dataset.setTableOrderPath, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				"X-CSRF-Token": token,
+			},
+			body: JSON.stringify({ columnOrder }),
+		}).then((result) => {
+			if (result.ok) {
+				// Get all rows in the table body
+				const tbody = this.element.querySelector("tbody");
+				const rows = Array.from(tbody.querySelectorAll("tr"));
+
+				// Reorder cells in each row to match new column order
+				for (const row of rows) {
+					const cells = Array.from(row.querySelectorAll("td"));
+					const reorderedCells = columnOrder.map((colName) => {
+						// Find cell with matching data-column attribute
+						return cells.find((cell) => cell.dataset.column === colName);
+					});
+
+					// Clear row and append cells in new order
+					row.innerHTML = "";
+					for (const cell of reorderedCells) {
+						row.appendChild(cell);
+					}
+				}
+			}
+		});
+
+		targetTh.removeAttribute("data-column-order-about-to-be-swapped");
+	}
+
+	handleThDragend(e) {
+		// Only allow dragging if the target is a table header
+		if (!e.target.matches("th")) {
+			e.preventDefault();
+			return;
+		}
+
+		// Reset the dragged header
+		this.draggedTh = null;
+	}
+
+	handleThDragenter(e) {
+		const targetTh = e.target.closest("th");
+		// If there's no valid target or the target is the dragged header itself, do nothing
+		if (!targetTh || targetTh === this.draggedTh) {
+			return;
+		}
+
+		e.preventDefault();
+
+		targetTh.setAttribute("data-column-order-about-to-be-swapped", true);
+	}
+
+	handleThDragleave(e) {
+		const targetTh = e.target.closest("th");
+		if (!targetTh) {
+			return;
+		}
+		e.preventDefault();
+
+		targetTh.removeAttribute("data-column-order-about-to-be-swapped");
+	}
+}

data/app/views/layouts/solid_litequeen/application.html.erb

@@ -5,6 +5,8 @@
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
 
+  <meta name="turbo-refresh-method" content="morph">
+  <meta name="turbo-refresh-scroll" content="preserve">
 
   <%= stylesheet_link_tag "solid_litequeen/application", media: "all", "data-turbo-track": "reload" %>
   <script src="https://unpkg.com/@tailwindcss/browser@4"></script>

data/app/views/solid_litequeen/databases/table_rows.html.erb

@@ -15,13 +15,19 @@
         <p class="text-gray-600"><%= pluralize(@row_count, "row") %> found</p>
     </div>
 
+
     <div class="bg-white rounded-lg shadow overflow-x-auto">
         <div class="min-w-full inline-block align-middle">
-            <table class="min-w-full relative">
+            <table data-controller="table" data-set-table-order-path="<%= database_set_table_column_order_path(params[:database_id], @table_name) %>" class="min-w-full relative">
                 <thead class="">
                     <tr class="bg-gray-100 border-b border-gray-200">
-                        <% @data.columns.each do |column| %>
-                            <th class="px-6 py-3 text-left text-sm font-medium text-gray-700 whitespace-nowrap">
+                        <% @data.columns.each_with_index do |column, index| %>
+                            <th 
+                                draggable="true" 
+                                data-column-index="<%= index %>"
+                                data-column-name="<%= column %>"
+                                class="hover:cursor-move px-6 py-3 text-left text-sm font-medium text-gray-700 whitespace-nowrap data-[is-dragging]:bg-orange-300/30 data-[column-order-about-to-be-swapped]:bg-green-300/30"
+                            >
                                 <%#= column %>
 
                                   <%= link_to column, 
@@ -30,19 +36,20 @@
                                         table: @table_name,
                                         sort_column: column,
                                         sort_direction: (@sort_column == column && @sort_direction == 'DESC') ? 'ASC' : 'DESC'
-                                    ) %>
+                                    ), class: "" %>
                                 <%= '▼' if @sort_column == column && @sort_direction == 'DESC' %>
                                 <%= '▲' if @sort_column == column && @sort_direction == 'ASC' %>
                             </th>
                         <% end %>
                     </tr>
                 </thead>
+
                 <tbody class="divide-y divide-gray-200">
                     <% @data.rows.each do |row| %>
-                        <tr class="hover:bg-gray-50">
-                            <% row.each do |item| %>
+                        <tr class="hover:bg-gray-50" >
+                            <% row.each_with_index do |item, index| %>
                                 <% truncated_item =  item&.truncate(80) %>
-                                <td class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap" >
+                                <td data-column="<%= @data.columns[index] %>" class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap" >
 
                                     <div class="flex justify-between">
 

data/config/routes.rb

@@ -1,6 +1,7 @@
 SolidLitequeen::Engine.routes.draw do
   resources :databases, only: [ :index, :show ] do
     get "/tables/:table", to: "databases#table_rows", as: :table_rows
+    post "/tables/:table/set-column-order", to: "databases#set_column_order", as: :set_table_column_order
     get "download", to: "databases#download", as: "download"
   end
   root to: "databases#index"

data/lib/solid_litequeen/version.rb

@@ -1,3 +1,3 @@
 module SolidLitequeen
-  VERSION = "0.8.1"
+  VERSION = "0.9.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: solid_litequeen
 version: !ruby/object:Gem::Version
-  version: 0.8.1
+  version: 0.9.0
 platform: ruby
 authors:
 - Vik Borges
@@ -157,10 +157,11 @@ files:
 - app/controllers/solid_litequeen/databases_controller.rb
 - app/helpers/solid_litequeen/application_helper.rb
 - app/helpers/solid_litequeen/databases_helper.rb
+- app/javascript/controllers/table_controller.js
 - app/javascript/solid_litequeen/application.js
 - app/javascript/solid_litequeen/controllers/application.js
 - app/javascript/solid_litequeen/controllers/index.js
-- app/javascript/solid_litequeen/controllers/tet_controller.js
+- app/javascript/solid_litequeen/controllers/table_controller.js
 - app/jobs/solid_litequeen/application_job.rb
 - app/mailers/solid_litequeen/application_mailer.rb
 - app/models/solid_litequeen/application_record.rb

data/app/javascript/solid_litequeen/controllers/tet_controller.js

@@ -1,8 +0,0 @@
-import { Controller } from "@hotwired/stimulus";
-
-// Connects to data-controller="tet"
-export default class extends Controller {
-	connect() {
-		console.log("hello potato");
-	}
-}