solid_litequeen 0.11.1 → 0.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 90243fc8ba17fd413d9237ad0f4d6361f73f9dbf1497b5383ffadf5f484a67e1
-  data.tar.gz: f0e9b68b711aa9c2866cfcab0117d34baf3199413fc0772d7946f62059dd3a00
+  metadata.gz: 133668d3a4340adb9111ea7e7e9aeea464173c2e87839e4dad82a2b5751e4058
+  data.tar.gz: 2d84c8ffef4315afcc3ac17bfa06f086efc8923c358d5ebf358daeb3438b057a
 SHA512:
-  metadata.gz: a202ac2d37b116b661e89b54e25751a9459647d4f3fc52eb152d79c063e932b7c5fe1c4add8010caee6af07f392781ef1a773ed4ad3a5b1c3a180250050a7b2a
-  data.tar.gz: c8faf1143ed4208d12f302553a34a8f2b132e784d9921380c5b2b4b192989581a069397b996de15c3139836156665a478efd7a8f4980008fcec377ecd8415625
+  metadata.gz: ae9e8e0f6b912011d11d857318d005dfe6f70850997ece81a48c529d277f9ac7c3832b7e1144f39fb51c964d0788a00fa8e9e7adf1e54c0b1912dc525b2e12a6
+  data.tar.gz: 73d39ca407117d57fea0ab2c753342fada254c6eda13816ef5d3806b84ee60f861f4d2f13257d8e885d2c3f8b7f824dfe03c3ca5cd0d62cfff4fa9a0e44e32db

data/app/assets/images/solid_litequeen/icons/circle-elipsis.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-ellipsis"><circle cx="12" cy="12" r="10"></circle><path d="M17 12h.01"></path><path d="M12 12h.01"></path><path d="M7 12h.01"></path></svg>

data/app/assets/images/solid_litequeen/icons/spline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-spline"><circle cx="19" cy="5" r="2"></circle><circle cx="5" cy="19" r="2"></circle><path d="M5 17A12 12 0 0 1 17 5"></path></svg>

data/app/controllers/solid_litequeen/databases_controller.rb

@@ -93,8 +93,17 @@ module SolidLitequeen
 
       table_columns = DynamicDatabase.connection.columns(@table_name)
 
+      foreign_keys = DynamicDatabase.connection.foreign_keys(@table_name)
+
+      # Build a mapping from column name to its foreign key details
+      fk_info = {}
+      foreign_keys.each do |fk|
+        # Depending on your Rails version, you might access these properties as below:
+        fk_info[fk.column] = { to_table: fk.to_table, primary_key: fk.primary_key }
+      end
+
       @columns_info = table_columns.each_with_object({}) do |column, hash|
-        hash[column.name] = {
+        info = {
           sql_type: column.sql_type_metadata.sql_type,
           type: column.sql_type_metadata.type,
           limit: column.sql_type_metadata.limit,
@@ -103,6 +112,12 @@ module SolidLitequeen
           null: column.null,
           default: column.default
         }
+
+        # Append foreign key info if available for this column
+        if fk_info[column.name]
+          info[:foreign_key] = fk_info[column.name]
+        end
+        hash[column.name] = info
       end
 
       # Verify the sort column exists in the table to prevent SQL injection
@@ -170,5 +185,29 @@ module SolidLitequeen
 
       head :ok
     end
+    
+    def get_foreign_key_data
+      @database_id = params.expect(:database_id)
+      @table_name = params.expect(:table)
+      @target_table = params.expect(:target_table)
+      @target_field = params.expect(:target_field)
+      @target_field_value = params.expect(:target_field_value)
+
+      @database_location = Base64.urlsafe_decode64(@database_id)
+
+      DynamicDatabase.establish_connection(
+        adapter: "sqlite3",
+        database: @database_location
+      )
+
+
+      # Query the target table for the record matching the foreign key value
+      query = "SELECT * FROM #{@target_table} WHERE #{@target_field} = ? LIMIT 1"
+      @result = DynamicDatabase.connection.exec_query(query, "SQL", [@target_field_value])
+
+      
+      render partial: "foreign-key-data"
+      
+    end
   end
 end

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

@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="dialog"
+export default class extends Controller {
+	connect() {
+		// this.element === dialog
+		this.element.addEventListener(
+			"click",
+			this.handleClickOusideDialog.bind(this),
+		);
+	}
+
+	disconnect() {
+		this.element.removeEventListener(
+			"click",
+			this.handleClickOusideDialog.bind(this),
+		);
+
+		this.element?.close();
+	}
+
+	/**
+	 * Handles mouse events for the search dialog.
+	 * @param {MouseEvent} event - The mouse event triggered by user interaction.
+	 */
+	handleClickOusideDialog(event) {
+		const rect = this.element.getBoundingClientRect();
+		const isInDialog =
+			rect.top <= event.clientY &&
+			event.clientY <= rect.top + rect.height &&
+			rect.left <= event.clientX &&
+			event.clientX <= rect.left + rect.width;
+		if (!isInDialog) {
+			this.element?.close();
+		}
+	}
+}

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

@@ -161,6 +161,38 @@ export default class extends Controller {
 		targetTh.removeAttribute("data-column-order-about-to-be-swapped");
 	}
 
+	load_foreign_key_data(e) {
+		const foreign_key_data_dialog = document.querySelector(
+			"dialog#foreign-key-data",
+		);
+
+		const foreign_key_data_frame = document.querySelector(
+			"#foreign-key-data-frame",
+		);
+
+		const fk_data_dialog_button = e.currentTarget;
+		const fk_target_table = fk_data_dialog_button.dataset.fk_target_table;
+		const fk_target_field = fk_data_dialog_button.dataset.fk_target_field;
+		const fk_target_field_value =
+			fk_data_dialog_button.dataset.fk_target_field_value;
+
+		const new_frame_src = `${this.element.dataset.database_table_path}/foreign-key-data/${fk_target_table}/${fk_target_field}/${fk_target_field_value}`;
+
+		// if the src didn't change let's just show what we have
+		if (foreign_key_data_frame.src) {
+			const frame_src_current_path = new URL(foreign_key_data_frame.src)
+				?.pathname;
+
+			if (new_frame_src === frame_src_current_path) {
+				foreign_key_data_dialog.showModal();
+				return;
+			}
+		}
+
+		foreign_key_data_frame.src = new_frame_src;
+		foreign_key_data_dialog.showModal();
+	}
+
 	#load_datetime_local_title() {
 		setTimeout(() => {
 			const datetime_items = this.element.querySelectorAll(

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

@@ -18,6 +18,12 @@
     @theme {
       --color-clifford: #da373d;
     }
+
+    @utility filter-blue{
+      filter: invert(32%) sepia(65%) saturate(6380%) hue-rotate(219deg) brightness(98%) contrast(102%);
+    }
+
+    
   </style>
 
 

data/app/views/solid_litequeen/databases/_foreign-key-data.html.erb

@@ -0,0 +1,38 @@
+<turbo-frame id="foreign-key-data-frame">
+
+        
+    <h1 class="text-lg  text-center">
+        <span> <%= @table_name %></span>
+        <span> &gt;</span>
+        <span class="font-semibold"><%= @target_table %></span>
+      
+    </h1>
+    
+    <div class="mx-auto my-4 p-4 max-w-[90%]">
+        <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Column Name
+                    </th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Value
+                    </th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+                <% @result.rows.each do |row| %>
+                    <% @result.columns.zip(row).each do |column, value| %>
+                        <tr>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 font-semibold"><%= column %></td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800"><%= value&.truncate(80) %></td>
+                        </tr>
+                    <% end %>
+                <% end %>
+
+            </tbody>
+        </table>
+    </div>
+
+
+</turbo-frame>

data/app/views/solid_litequeen/databases/_table-data-context-dialog.html.erb

@@ -0,0 +1,15 @@
+<dialog id="<%= dialog_id %>" data-controller="dialog" class="w-[800px]  m-auto overscroll-y-contain"> 
+    <form method="submit" class="flex  flex-row-reverse">
+        <button formmethod="dialog" class="cursor-pointer mr-4 mt-2 outline-none"> 
+            <%= image_tag "solid_litequeen/icons/x.svg", class: "size-5" %>
+        </button>
+    </form>
+
+    <h1 class="text-lg font-semibold text-center"><%= column_name %></h1>
+
+    <div class="flex items-center max-w-[90%] h-80 max-h-80 mx-auto my-4 p-2  bg-gray-100 rounded ">
+        <p class="text-wrap overflow-auto w-[inherit] h-[inherit] p-2">
+            <%= data %>
+        </p>
+    </div>
+</dialog>

data/app/views/solid_litequeen/databases/_table-relationships-dialog.html.erb

@@ -1,4 +1,4 @@
-<dialog id="table_relationships" data-controller="table-relations" data-relations="<%= @table_relations.to_json %>" class="w-[1000px] h-full m-auto overscroll-y-contain">
+<dialog id="table_relationships" data-controller="dialog table-relations" data-relations="<%= @table_relations.to_json %>" class="w-[1000px] h-full m-auto overscroll-y-contain">
     <form method="submit" class="flex  flex-row-reverse">
         <button formmethod="dialog" class="cursor-pointer mr-4 mt-2 outline-none"> 
             <%= image_tag "solid_litequeen/icons/x.svg", class: "size-5" %>

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

@@ -18,7 +18,12 @@
 
     <div class="bg-white rounded-lg shadow overflow-x-auto">
         <div class="min-w-full inline-block align-middle">
-            <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">
+            <table 
+                data-controller="table" 
+                data-database_table_path="<%= database_table_rows_path %>"
+                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_with_index do |column, index| %>
@@ -43,35 +48,81 @@
                         <% end %>
                     </tr>
                 </thead>
-
+                
                 <tbody class="divide-y divide-gray-200">
                     <% @data.rows.each do |row| %>
                         <tr class="hover:bg-gray-50" >
                             <% row.each_with_index do |item, index| %>
                                 <% truncated_item =  item&.truncate(80) %>
                                 <% column_name = @data.columns[index] %>
+                                <% foreign_key = @columns_info[column_name]&.dig(:foreign_key) %>
                                 <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">
+                                    <div class="flex justify-between gap-1">
 
                                         <span data-column_item><%= truncated_item %></span>
+                                        
+                                        <% if item.present? and foreign_key.present? %>
+                                            <button 
+                                                data-action="click->table#load_foreign_key_data"
+                                                data-fk_target_table="<%= foreign_key[:to_table] %>" 
+                                                data-fk_target_field="<%=  foreign_key[:primary_key]%>" 
+                                                data-fk_target_field_value="<%=  truncated_item %>" 
+                                                class="size-4 mt-0.5 hover:cursor-pointer flex-grow outline-none"
+                                                >
+                                                <%= image_tag "solid_litequeen/icons/spline.svg", class: "size-4 filter-blue" %>
+                                            </button>
+                                          
+                                        <% end %>
+
 
+                                        <%# TODO: we can use one dynamic modal instead and fetch the data. for now this works and is (s)crapy! %>
                                         <% if truncated_item&.to_s&.ends_with?("...") %>
-                                            <span title="<%= item %>" class="cursor-pointer size-4">
-                                                <%= image_tag "solid_litequeen/icons/info.svg", class: "size-4" %>
-                                            </span>
+                                            <% dialog_id = "#{column_name}_#{SecureRandom.hex(8)}_context_dialog"  %>
+
+                                            <%= render "table-data-context-dialog", dialog_id: dialog_id, column_name: column_name, data: item %>
+
+                                            <button onclick="document.getElementById('<%= dialog_id %>').showModal()" class="cursor-pointer size-4 outline-none">
+                                                <%= image_tag "solid_litequeen/icons/circle-elipsis.svg", class: "size-4" %>
+                                                
+                                            </button>
+
+                                         
                                         <% end %>
+
+                                        
                                     </div>
                                 </td>
                             <% end %>
                         </tr>
                     <% end %>
                 </tbody>
+
+                <dialog id="foreign-key-data" data-controller="dialog" class="w-[900px] m-auto overscroll-y-contain">
+                    <form method="submit" class="">
+                        <div class="flex flex-row-reverse">
+                            <button formmethod="dialog" class="cursor-pointer mr-4 mt-2 outline-none"> 
+                                <%= image_tag "solid_litequeen/icons/x.svg", class: "size-5" %>
+                            </button>
+
+                        </div>
+                    </form>
+
+                    <div class="overflow-x-auto">
+                        <turbo-frame id="foreign-key-data-frame" >
+                            <h1>loading...</h1>
+                        </turbo-frame>
+                    </div>
+                     
+
+                </dialog>
             </table>
+           
+      
         </div>
     </div>
 </div>

data/config/routes.rb

@@ -2,6 +2,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 "/tables/:table/foreign-key-data/:target_table/:target_field/:target_field_value", to: "databases#get_foreign_key_data", as: :get_table_foreign_key_data
     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.11.1"
+  VERSION = "0.13.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: solid_litequeen
 version: !ruby/object:Gem::Version
-  version: 0.11.1
+  version: 0.13.0
 platform: ruby
 authors:
 - Vik Borges
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-17 00:00:00.000000000 Z
+date: 2025-03-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -164,8 +164,10 @@ files:
 - app/assets/config/solid_litequeen_manifest.js
 - app/assets/images/solid_litequeen/icons/chevron-left.svg
 - app/assets/images/solid_litequeen/icons/chevron-right.svg
+- app/assets/images/solid_litequeen/icons/circle-elipsis.svg
 - app/assets/images/solid_litequeen/icons/database.svg
 - app/assets/images/solid_litequeen/icons/info.svg
+- app/assets/images/solid_litequeen/icons/spline.svg
 - app/assets/images/solid_litequeen/icons/workflow.svg
 - app/assets/images/solid_litequeen/icons/x.svg
 - app/assets/stylesheets/solid_litequeen/application.css
@@ -175,6 +177,7 @@ files:
 - app/helpers/solid_litequeen/databases_helper.rb
 - app/javascript/solid_litequeen/application.js
 - app/javascript/solid_litequeen/controllers/application.js
+- app/javascript/solid_litequeen/controllers/dialog_controller.js
 - app/javascript/solid_litequeen/controllers/index.js
 - app/javascript/solid_litequeen/controllers/table_controller.js
 - app/javascript/solid_litequeen/controllers/table_relations_controller.js
@@ -183,6 +186,8 @@ files:
 - app/models/solid_litequeen/application_record.rb
 - app/views/layouts/solid_litequeen/application.html.erb
 - app/views/solid_litequeen/_database-selector.html.erb
+- app/views/solid_litequeen/databases/_foreign-key-data.html.erb
+- app/views/solid_litequeen/databases/_table-data-context-dialog.html.erb
 - app/views/solid_litequeen/databases/_table-relationships-dialog.html.erb
 - app/views/solid_litequeen/databases/index.html.erb
 - app/views/solid_litequeen/databases/show.html.erb