solid_litequeen 0.8.1 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f307bf9d9eb772756d40395b38cef8f0f0a9cd905e1e0caff872855d9bedf3a6
-  data.tar.gz: 0a0a6528451d67eede41bf3a967a87aebf78da47e07adb4ebc8fab6e20b36d12
+  metadata.gz: 2193fbf74ea85b0636eacfaf274db08f75fc6e3df3f20ff92092f332665cc5ae
+  data.tar.gz: 1916c89aa9c9091fd562535e1f415f8f3844e7b686241ecd5ca19800bf5a82c6
 SHA512:
-  metadata.gz: ed7ae24cd435790f31d182634a344202d6f5c839cfedae4d41660113d13b394168fb4426fc6916aeb02d2ba81d2e06f9c208f42608cea508d5b650dc39d67ee4
-  data.tar.gz: 926ec78a8f509413478913ae70fde680992dc353a362250808125c5cac7b8e3c1d69c482dc987fc9f260763a9a67f8427ed1b7645e4a70a99ba34f51d13a2ac5
+  metadata.gz: ff33367977208e249b3d4eb19a1a0ab4aba4744868dd8c40a52375fe48535ba9eacb2f145c38f58fae57041fc5322ae0047c9cf9038a49568f277358d78b7579
+  data.tar.gz: 7da74f483615c35208adf2fa98673896e74d45ed31c64ba6f040aad43637832ec0c2c254d6d3542983892b0bdfd2674df22d01709b854996fa6269ff789af95a

data/app/controllers/solid_litequeen/databases_controller.rb

@@ -49,8 +49,6 @@ module SolidLitequeen
       @sort_column = sort_prefs["sort_column"]
       @sort_direction = sort_prefs["sort_direction"]
 
-      # debugger
-
       @database_location = Base64.urlsafe_decode64(@database_id)
 
       DynamicDatabase.establish_connection(
@@ -58,19 +56,37 @@ module SolidLitequeen
         database: @database_location
       )
 
+      table_columns = DynamicDatabase.connection.columns(@table_name)
+
+      @columns_info = table_columns.each_with_object({}) do |column, hash|
+        hash[column.name] = {
+          sql_type: column.sql_type_metadata.sql_type,
+          type: column.sql_type_metadata.type,
+          limit: column.sql_type_metadata.limit,
+          precision: column.sql_type_metadata.precision,
+          scale: column.sql_type_metadata.scale,
+          null: column.null,
+          default: column.default
+        }
+      end
+
       # Verify the sort column exists in the table to prevent SQL injection
-      valid_columns = DynamicDatabase.connection.columns(@table_name).map(&:name)
+      valid_columns = table_columns.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 +109,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/solid_litequeen/controllers/table_controller.js

@@ -0,0 +1,198 @@
+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),
+		);
+
+		this.#load_datetime_local_title();
+	}
+
+	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");
+	}
+
+	#load_datetime_local_title() {
+		setTimeout(() => {
+			const datetime_items = this.element.querySelectorAll(
+				'td[data-data_type="datetime"]',
+			);
+
+			for (const item of datetime_items) {
+				const column_item_datetime = item.querySelector(
+					"span[data-column_item]",
+				)?.textContent;
+
+				if (column_item_datetime) {
+					try {
+						// Parse the UTC datetime string
+						const utcDate = new Date(`${column_item_datetime.trim()}Z`);
+
+						// Format to local datetime using Intl.DateTimeFormat
+						const localDatetime = new Intl.DateTimeFormat("default", {
+							year: "numeric",
+							month: "short",
+							day: "numeric",
+							hour: "numeric",
+							minute: "numeric",
+							second: "numeric",
+						}).format(utcDate);
+
+						item.setAttribute("title", `${localDatetime} local time.`);
+					} catch (error) {
+						console.error("Error converting datetime:", error);
+					}
+				}
+			}
+		}, 2000);
+	}
+}

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,20 @@
         <p class="text-gray-600"><%= pluralize(@row_count, "row") %> found</p>
     </div>
 
+    <%= console %>
+
     <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,23 +37,29 @@
                                         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" >
+                                <% column_name = @data.columns[index] %>
+                                <td 
+                                    data-column="<%= column_name %>" 
+                                    data-data_type="<%= @columns_info.dig(column_name).dig(:type) %>"
+                                    class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap" 
+                                >
 
                                     <div class="flex justify-between">
 
-                                        <span><%= truncated_item %></span>
+                                        <span data-column_item><%= truncated_item %></span>
 
                                         <% if truncated_item&.to_s&.ends_with?("...") %>
                                             <span title="<%= item %>" class="cursor-pointer size-4">

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.10.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: solid_litequeen
 version: !ruby/object:Gem::Version
-  version: 0.8.1
+  version: 0.10.0
 platform: ruby
 authors:
 - Vik Borges
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-10 00:00:00.000000000 Z
+date: 2025-03-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -160,7 +160,7 @@ files:
 - 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");
-	}
-}