dbviewer 0.9.4.pre.alpha.1 → 0.9.4.pre.alpha.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f79e82d83d69572cd7fa4331831e7fa7cc385f7d0655fec2ab9cee57bf5dcdcd
-  data.tar.gz: 8a34270cfb5f9ede4b77d9b531a67cb1c6b3a022923b359080b4e171e725dadb
+  metadata.gz: 54a9324f879a9f3be0d71ab93e1ead14ca185cc3513fe44c86aec45927899ff8
+  data.tar.gz: 139bb5d6f6bc46ef2b16e7b9c77362d3231e709cb87f79f17f2304062dd3d3a3
 SHA512:
-  metadata.gz: edfcfc4a7eb88659393cd59cac7af960339a686010aa57d6da0ccfcf000d9ad33ee18ebed955294ca741119bca0f1d63f2579682fab48f70e9ca6ec93bce936f
-  data.tar.gz: b1e37a36cee23d2e04284c957e3f865afa24da128579b811f25cede3f2afcda9230abfaab332b48a7525ab190da5f53a270a7d0acc594de22324c9c624019f72
+  metadata.gz: '06767791b1d8df0bad7f1a7e98e6df81c063a50ca0bbba1f8a91186a89e093c56db8dd400e78f3fca9ae99700d1d85bc2a2351f76d9f6f6fa6692123b16b953f'
+  data.tar.gz: 8688791ec007fedf0e4b56ad2d65b067c5f86b77b918b322007364b2500073154a641105c3c369ff25ed35633d3a5cb055080922ebf50e380521a2eaf671ab7d

data/README.md

@@ -14,7 +14,7 @@ It's designed for development, debugging, and database analysis, offering a clea
 - **Detailed Schema Information** - Column details, indexes, and constraints
 - **Entity Relationship Diagram (ERD)** - Interactive database schema visualization
 - **Data Browsing** - Paginated record viewing with search and filtering
-- **Data Creation** - Create new database records directly from the interface
+- **Data Management** - Full CRUD operations (Create, Read, Update, Delete) for database records
 - **SQL Queries** - Safe SQL query execution with validation
 - **Multiple Database Connections** - Support for multiple database sources
 - **PII Data Masking** - Configurable masking for sensitive data
@@ -80,6 +80,27 @@ This is necessary because API-only Rails applications don't include the Flash mi
 - **ERD View** (`/dbviewer/entity_relationship_diagrams`): Interactive Entity Relationship Diagram of your database
 - **SQL Query Logs** (`/dbviewer/logs`): View and analyze logged SQL queries with performance metrics
 
+### Data Management Features
+
+DBViewer provides a complete set of CRUD (Create, Read, Update, Delete) operations for your database records:
+
+- **Create**: Add new records via a user-friendly modal form with field validation
+- **Read**: Browse and view detailed record information with relationship navigation
+- **Update**: Edit existing records through an intuitive form interface
+- **Delete**: Remove records with confirmation dialogs to prevent accidental deletion
+
+All data management features can be individually enabled or disabled through configuration options:
+
+```ruby
+# config/initializers/dbviewer.rb
+Dbviewer.configure do |config|
+  # Data management options
+  config.enable_data_export = false    # Enable CSV export feature
+  config.enable_record_deletion = true # Enable record deletion feature
+  config.enable_record_editing = true  # Enable record editing feature
+end
+```
+
 ## ⚙️ Configuration Options
 
 You can configure DBViewer by using our generator to create an initializer in your application:
@@ -99,6 +120,8 @@ Dbviewer.configure do |config|
   config.cache_expiry = 300                          # Cache expiration in seconds
   config.max_records = 10000                         # Maximum records to return in any query
   config.enable_data_export = false                  # Whether to allow data exporting
+  config.enable_record_deletion = true               # Whether to allow record deletion
+  config.enable_record_editing = true                # Whether to allow record editing
   config.query_timeout = 30                          # SQL query timeout in seconds
 
   # Query logging options

data/app/assets/javascripts/dbviewer/record_deletion.js

@@ -0,0 +1,171 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const tableName = document.getElementById("table_name")?.value;
+  const deleteConfirmModal = document.getElementById("deleteConfirmModal");
+  const recordDeleteForm = document.getElementById("recordDeleteForm");
+
+  // === TOASTIFY UTIL ===
+  const showToast = (message, type = "success") => {
+    const icons = {
+      success: "clipboard-check",
+      info: "info-circle",
+      danger: "exclamation-triangle",
+      warning: "exclamation-diamond",
+    };
+
+    Toastify({
+      text: `
+        <span class="toast-icon">
+          <i class="bi bi-${icons[type] || "info-circle"}"></i>
+        </span>
+        ${message}
+      `,
+      className: `toast-factory-bot toast-${type}`,
+      duration: 3000,
+      gravity: "bottom",
+      position: "right",
+      escapeMarkup: false,
+      style: {
+        animation:
+          "slideInRight 0.3s ease-out, slideOutRight 0.3s ease-out 2.7s",
+        background: type === "danger" ? "#dc3545" : undefined,
+      },
+    }).showToast();
+  };
+
+  // === SETUP DELETE MODAL ===
+  const setupDeleteConfirmModal = (recordData, pkName, pkValue) => {
+    if (!recordData || !pkValue)
+      return console.error("Missing record data for delete confirmation");
+
+    const infoDiv = document.getElementById("deleteRecordInfo");
+    const idInput = document.getElementById("deleteRecordId");
+
+    idInput.value = pkValue;
+    recordDeleteForm.action = `${
+      window.location.pathname
+    }/records/${encodeURIComponent(pkValue)}`;
+    infoDiv.innerHTML = `<div><strong>${pkName}:</strong> ${pkValue}</div>`;
+
+    const importantFields = [
+      "name",
+      "title",
+      "email",
+      "username",
+      "code",
+      "reference",
+    ];
+    let count = 0;
+
+    for (const key of Object.keys(recordData)) {
+      if (count >= 3) break;
+      const lowerKey = key.toLowerCase();
+      if (
+        key !== pkName &&
+        importantFields.some((f) => lowerKey.includes(f)) &&
+        recordData[key]
+      ) {
+        const fieldDiv = document.createElement("div");
+        fieldDiv.className = "mt-1";
+        fieldDiv.innerHTML = `<strong>${key}:</strong> ${recordData[key]}`;
+        infoDiv.appendChild(fieldDiv);
+        count++;
+      }
+    }
+  };
+
+  // === DELETE FROM DETAIL MODAL ===
+  const detailDeleteBtn = document.getElementById("recordDetailDeleteBtn");
+  if (detailDeleteBtn) {
+    detailDeleteBtn.addEventListener("click", () => {
+      const rows = document.querySelectorAll("#recordDetailTableBody tr");
+      const recordData = {};
+
+      rows.forEach((row) => {
+        const [keyCell, valueCell] = row.querySelectorAll("td");
+        if (keyCell && valueCell) {
+          recordData[keyCell.textContent.trim()] = valueCell.textContent.trim();
+        }
+      });
+
+      const pkName =
+        Object.keys(recordData).find((k) => k.toLowerCase() === "id") ||
+        Object.keys(recordData)[0];
+      const pkValue = recordData[pkName];
+
+      setupDeleteConfirmModal(recordData, pkName, pkValue);
+
+      bootstrap.Modal.getInstance(
+        document.getElementById("recordDetailModal")
+      )?.hide();
+      setTimeout(() => new bootstrap.Modal(deleteConfirmModal).show(), 500);
+    });
+  }
+
+  // === DELETE FROM TABLE ROW ===
+  document.querySelectorAll(".delete-record-btn").forEach((button) => {
+    button.addEventListener("click", () => {
+      const recordData = JSON.parse(button.dataset.recordData || "{}");
+      const pkName =
+        Object.keys(recordData).find((k) => k.toLowerCase() === "id") ||
+        Object.keys(recordData)[0];
+      const pkValue = recordData[pkName];
+      setupDeleteConfirmModal(recordData, pkName, pkValue);
+    });
+  });
+
+  // === FORM SUBMIT (DELETE) ===
+  if (recordDeleteForm) {
+    recordDeleteForm.addEventListener("submit", async (e) => {
+      e.preventDefault();
+
+      const form = e.target;
+      const submitButton = document.querySelector(
+        "#recordDeleteForm button[type='submit']"
+      );
+      const originalText = submitButton.innerHTML;
+      const csrfToken = document.querySelector(
+        'meta[name="csrf-token"]'
+      )?.content;
+
+      disableSubmitButton(submitButton);
+
+      try {
+        const response = await fetch(form.action, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+            "X-CSRF-Token": csrfToken,
+          },
+          credentials: "same-origin",
+        });
+
+        const result = await response.json();
+
+        if (!response.ok) {
+          throw new Error(result?.error || "Failed to delete record");
+        }
+
+        showToast(result.message || "Record deleted successfully", "success");
+
+        const modal = bootstrap.Modal.getInstance(deleteConfirmModal);
+        modal.hide();
+
+        setTimeout(() => window.location.reload(), 1000);
+      } catch (error) {
+        console.error("Delete Error:", error);
+        showToast(error.message || "Unexpected error occurred", "danger");
+      } finally {
+        enableSubmitButton(submitButton, originalText);
+      }
+    });
+  }
+
+  // === BUTTON HELPERS ===
+  function disableSubmitButton(button) {
+    button.disabled = true;
+  }
+
+  function enableSubmitButton(button) {
+    button.disabled = false;
+  }
+});

data/app/assets/javascripts/dbviewer/record_editing.js

@@ -0,0 +1,208 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const tableName = document.getElementById("table_name")?.value;
+  if (!tableName) return;
+
+  // Handle edit button in record detail modal
+  const recordDetailEditBtn = document.getElementById("recordDetailEditBtn");
+  if (recordDetailEditBtn) {
+    recordDetailEditBtn.addEventListener("click", () => {
+      const recordData = extractRecordDataFromDetailModal();
+      // Use the primary key from the button's data attribute
+      const primaryKey =
+        recordDetailEditBtn.getAttribute("data-primary-key") || "id";
+      const primaryKeyValue = recordData[primaryKey];
+      loadEditForm(primaryKeyValue);
+    });
+  }
+
+  // Handle edit buttons in table rows
+  document.querySelectorAll(".edit-record-btn").forEach((button) => {
+    button.addEventListener("click", () => {
+      const recordData = JSON.parse(button.dataset.recordData || "{}");
+      const primaryKeyValue = extractPrimaryKeyValue(recordData);
+      loadEditForm(primaryKeyValue);
+    });
+  });
+
+  function extractRecordDataFromDetailModal() {
+    const tableBody = document.getElementById("recordDetailTableBody");
+    const rows = tableBody?.querySelectorAll("tr") || [];
+    const recordData = {};
+
+    rows.forEach((row) => {
+      const cells = row.querySelectorAll("td");
+      if (cells.length >= 2) {
+        const columnName = cells[0].textContent.trim();
+        const cellValue =
+          cells[1].textContent.trim() === "NULL"
+            ? ""
+            : cells[1].textContent.trim();
+        recordData[columnName] = cellValue;
+      }
+    });
+    return recordData;
+  }
+
+  function extractPrimaryKeyValue(recordData) {
+    // First try to get the primary key from the button data attribute
+    const clickedButton = document.activeElement;
+    if (
+      clickedButton &&
+      clickedButton.classList.contains("edit-record-btn") &&
+      clickedButton.dataset.primaryKey
+    ) {
+      const primaryKey = clickedButton.dataset.primaryKey;
+      return recordData[primaryKey];
+    }
+
+    // If not available, use the table-level metadata primary key from the hidden field
+    const primaryKeyMetaElement = document.getElementById("table_primary_key");
+    if (primaryKeyMetaElement && primaryKeyMetaElement.value) {
+      return recordData[primaryKeyMetaElement.value];
+    }
+
+    // Fallback: try to find 'id' or use the first key
+    const primaryKey =
+      Object.keys(recordData).find((key) => key.toLowerCase() === "id") ||
+      Object.keys(recordData)[0];
+    return recordData[primaryKey];
+  }
+
+  async function loadEditForm(recordId) {
+    const modal = document.getElementById("editRecordModal");
+    const modalBody = modal.querySelector(".modal-content");
+    const bsModal = new bootstrap.Modal(modal);
+
+    modalBody.innerHTML = `
+      <div class="modal-body text-center py-5">
+        <div class="spinner-border text-primary" role="status"></div>
+        <p class="mt-3">Loading edit form...</p>
+      </div>
+    `;
+
+    bsModal.show();
+
+    try {
+      const response = await fetch(
+        `${window.location.pathname}/records/${encodeURIComponent(
+          recordId
+        )}/edit`
+      );
+      if (!response.ok) throw new Error("Failed to load form");
+
+      const html = await response.text();
+      modalBody.innerHTML = html;
+
+      initializeEditFormElements();
+      document
+        .getElementById("editRecordForm")
+        ?.addEventListener("submit", handleEditFormSubmit);
+    } catch (error) {
+      modalBody.innerHTML = `
+        <div class="modal-header">
+          <h5 class="modal-title">Error</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+        </div>
+        <div class="modal-body">
+          <div class="alert alert-danger">${error.message}</div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        </div>
+      `;
+    }
+  }
+
+  function initializeEditFormElements() {
+    if (typeof $.fn.select2 !== "undefined") {
+      $(".select2-dropdown").select2({
+        dropdownParent: $("#editRecordModal"),
+        theme: "bootstrap-5",
+        width: "100%",
+      });
+    }
+
+    if (typeof flatpickr !== "undefined") {
+      flatpickr(".datetime-picker", {
+        enableTime: true,
+        dateFormat: "Y-m-d H:i:S",
+        time_24hr: true,
+        wrap: true,
+      });
+
+      flatpickr(".date-picker", {
+        dateFormat: "Y-m-d",
+        wrap: true,
+      });
+    }
+  }
+
+  async function handleEditFormSubmit(event) {
+    event.preventDefault();
+
+    const form = event.target;
+    const submitButton = document.getElementById("updateRecordButton");
+    const originalText = submitButton?.innerHTML;
+    const formData = new FormData(form);
+    const csrfToken = document.querySelector(
+      'meta[name="csrf-token"]'
+    )?.content;
+
+    disableSubmitButton(submitButton, "Updating...");
+
+    try {
+      const response = await fetch(form.action, {
+        method: form.method,
+        body: formData,
+        headers: { "X-CSRF-Token": csrfToken },
+        credentials: "same-origin",
+      });
+
+      const result = await response.json();
+
+      if (!response.ok)
+        throw new Error(
+          result?.messages?.join(", ") || "Failed to update record"
+        );
+
+      bootstrap.Modal.getInstance(
+        document.getElementById("editRecordModal")
+      )?.hide();
+      showToast(result.message || "Record updated successfully");
+      setTimeout(() => window.location.reload(), 1000);
+    } catch (error) {
+      showToast(error.message, "danger");
+    } finally {
+      enableSubmitButton(submitButton, originalText);
+    }
+  }
+
+  function disableSubmitButton(button, loadingText) {
+    if (!button) return;
+    button.disabled = true;
+    button.innerHTML = `<span class="spinner-border spinner-border-sm me-2"></span>${loadingText}`;
+  }
+
+  function enableSubmitButton(button, originalText) {
+    if (!button) return;
+    button.disabled = false;
+    button.innerHTML = originalText;
+  }
+
+  function showToast(message, type = "success") {
+    Toastify({
+      text: `<span class="toast-icon"><i class="bi bi-${
+        type === "success" ? "clipboard-check" : "exclamation-triangle"
+      }"></i></span> ${message}`,
+      className: "toast-factory-bot",
+      duration: 3000,
+      gravity: "bottom",
+      position: "right",
+      escapeMarkup: false,
+      style: {
+        animation: `slideInRight 0.3s ease-out, slideOutRight 0.3s ease-out 2.7s`,
+        background: type === "danger" ? "#dc3545" : undefined,
+      },
+    }).showToast();
+  }
+});

data/app/controllers/dbviewer/tables_controller.rb

@@ -3,7 +3,7 @@ module Dbviewer
     include Dbviewer::AccessControlValidation
 
     before_action :set_table_name, except: [ :index ]
-    before_action :validate_table, only: [ :show, :query, :export_csv, :new_record, :create_record ]
+    before_action :validate_table, only: [ :show, :query, :export_csv, :new_record, :create_record, :destroy_record, :edit_record, :update_record ]
     before_action :set_query_filters, only: [ :show, :export_csv ]
     before_action :set_global_filters, only: [ :show, :export_csv ]
 
@@ -89,6 +89,67 @@ module Dbviewer
                 disposition: "attachment; filename=#{filename}"
     end
 
+    def destroy_record
+      model_class = database_manager.get_model_for(@table_name)
+      primary_key = database_manager.primary_key(@table_name) || "id"
+      record = model_class.find_by(primary_key => params[:record_id])
+
+      if record.nil?
+        render json: { error: "Record not found" }, status: :not_found
+        return
+      end
+
+      begin
+        if record.destroy
+          render json: { message: "Record deleted successfully" }, status: :ok
+        else
+          render json: { errors: record.errors.full_messages, message: "Failed to delete record" }, status: :unprocessable_entity
+        end
+      rescue => e
+        Rails.logger.error("Error deleting record from #{@table_name}: #{e.message}")
+        render json: { error: "Failed to delete record: #{e.message}" }, status: :internal_server_error
+      end
+    end
+
+    def edit_record
+      model_class = database_manager.get_model_for(@table_name)
+      primary_key = database_manager.primary_key(@table_name) || "id"
+      @record = model_class.find_by(primary_key => params[:record_id])
+
+      if @record.nil?
+        render json: { error: "Record not found" }, status: :not_found
+        return
+      end
+
+      @table_columns = filter_accessible_columns(@table_name, database_manager.table_columns(@table_name))
+      @metadata = database_manager.table_metadata(@table_name)
+      @foreign_key_options = load_foreign_key_options(@metadata)
+
+      render layout: false
+    end
+
+    def update_record
+      model_class = database_manager.get_model_for(@table_name)
+      primary_key = database_manager.primary_key(@table_name) || "id"
+      record = model_class.find_by(primary_key => params[:record_id])
+
+      if record.nil?
+        render json: { error: "Record not found" }, status: :not_found
+        return
+      end
+
+      begin
+        if record.update(record_params)
+          render json: { message: "Record updated successfully" }
+        else
+          render json: { errors: record.errors, messages: record.errors.full_messages }, status: :unprocessable_entity
+        end
+      rescue => e
+        Rails.logger.error("Error updating record in #{@table_name}: #{e.message}")
+        render json: { error: "Failed to update record: #{e.message}" }, status: :internal_server_error
+      end
+    end
+
     private
 
     def record_params

data/app/helpers/dbviewer/datatable_ui_table_helper.rb

@@ -137,8 +137,45 @@ module Dbviewer
             content_tag(:i, "", class: "bi bi-clipboard")
           end
 
-          # Concatenate both buttons
-          view_button + copy_factory_button
+          # Edit Record button (only if enabled in configuration)
+          edit_button = if Dbviewer.configuration.enable_record_editing
+            button_tag(
+              type: "button",
+              class: "btn btn-sm btn-outline-primary edit-record-btn",
+              title: "Edit Record",
+              data: {
+                record_data: data_attributes.to_json,
+                table_name: table_name,
+                primary_key: metadata && metadata[:primary_key] ? metadata[:primary_key] : "id"
+              }
+            ) do
+              content_tag(:i, "", class: "bi bi-pencil")
+            end
+          else
+            "".html_safe
+          end
+
+          # Delete Record button (only if enabled in configuration)
+          delete_button = if Dbviewer.configuration.enable_record_deletion
+            button_tag(
+              type: "button",
+              class: "btn btn-sm btn-outline-danger delete-record-btn",
+              title: "Delete Record",
+              data: {
+                bs_toggle: "modal",
+                bs_target: "#deleteConfirmModal",
+                record_data: data_attributes.to_json,
+                table_name: table_name
+              }
+            ) do
+              content_tag(:i, "", class: "bi bi-trash")
+            end
+          else
+            "".html_safe
+          end
+
+          # Concatenate all buttons
+          view_button + copy_factory_button + edit_button + delete_button
         end
       end
     end

data/app/views/dbviewer/tables/_record_form_fields.html.erb

@@ -0,0 +1,105 @@
+<%
+  # Common variables:
+  # - form: The form builder
+  # - column: Current column hash with :name, :type, etc.
+  # - metadata: Table metadata with :foreign_keys etc.
+  # - foreign_key_options: Options for foreign key dropdowns
+  # - record: The record being edited (nil for new records)
+  # - is_edit_mode: Boolean flag indicating if this is an edit (vs create) operation
+  
+  column_name = column[:name]
+  is_primary_key = metadata[:primary_key] == column_name
+  
+  # For new records, skip auto-increment primary keys
+  skip_column = !is_edit_mode && is_primary_key # Skip primary key in creation mode
+  
+  # Skip timestamps for both new and edit
+  return if skip_column || %w[created_at updated_at].include?(column_name)
+  
+  # Get current value for edit mode
+  current_value = record ? record[column_name] : nil
+  
+  # Common field properties
+  field_type = determine_field_type(column[:type])
+  foreign_key = metadata[:foreign_keys].find { |fk| fk[:column] == column_name }
+  field_id = "record_#{column_name}"
+  required = !column[:null]
+  disabled = is_edit_mode && is_primary_key # Disable editing of primary key in edit mode
+%>
+
+<div class="mb-3">
+  <%= form.label "record[#{column_name}]", column_name.humanize, class: "form-label" %>
+  
+  <% if foreign_key && foreign_key_options[column_name].present? %>
+    <!-- Foreign key dropdown -->
+    <%= form.select "record[#{column_name}]", 
+                options_for_select(foreign_key_options[column_name], current_value),
+                { include_blank: column[:null] ? "-- Select --" : false }, 
+                { class: "form-control select2-dropdown", id: field_id, disabled: disabled } %>
+                
+  <% elsif field_type == :text || field_type == :text_area %>
+    <!-- Text area for long text fields -->
+    <%= form.text_area "record[#{column_name}]", 
+                    value: current_value, 
+                    class: "form-control", 
+                    id: field_id, 
+                    rows: 3, 
+                    required: required, 
+                    disabled: disabled %>
+    
+  <% elsif field_type == :boolean || field_type == :check_box %>
+    <!-- Boolean field -->
+    <div class="form-check form-switch">
+      <%= form.check_box "record[#{column_name}]", 
+                      { class: "form-check-input", 
+                        id: field_id, 
+                        checked: current_value, 
+                        disabled: disabled }, 
+                      "true", "false" %>
+    </div>
+    
+  <% elsif field_type == :datetime %>
+    <!-- Date time picker -->
+    <div class="input-group flatpickr">
+      <%= form.text_field "record[#{column_name}]", 
+                      value: current_value, 
+                      class: "form-control datetime-picker", 
+                      id: field_id, 
+                      required: required, 
+                      data: { input: "" }, 
+                      disabled: disabled %>
+      <button type="button" class="input-group-text" data-toggle><i class="bi bi-calendar-event"></i></button>
+    </div>
+    
+  <% elsif field_type == :date %>
+    <!-- Date picker -->
+    <div class="input-group flatpickr">
+      <%= form.text_field "record[#{column_name}]", 
+                      value: current_value, 
+                      class: "form-control date-picker", 
+                      id: field_id, 
+                      required: required, 
+                      data: { input: "" }, 
+                      disabled: disabled %>
+      <button type="button" class="input-group-text" data-toggle><i class="bi bi-calendar-event"></i></button>
+    </div>
+    
+  <% else %>
+    <!-- Default text input -->
+    <%= form.text_field "record[#{column_name}]", 
+                    value: current_value, 
+                    class: "form-control", 
+                    id: field_id, 
+                    required: required, 
+                    disabled: disabled %>
+  <% end %>
+  
+  <% if disabled %>
+    <!-- Add a hidden field to preserve the primary key value -->
+    <%= form.hidden_field "record[#{column_name}]", value: current_value %>
+  <% end %>
+  
+  <% if !is_edit_mode && column[:default].present? && column[:default] != "NULL" %>
+    <div class="form-text text-muted">Default: <%= column[:default] %></div>
+  <% end %>
+</div>

data/app/views/dbviewer/tables/edit_record.html.erb

@@ -0,0 +1,42 @@
+<% if @errors.present? %>
+  <div class="alert alert-danger">
+    <ul class="mb-0">
+      <% @errors.full_messages.each do |message| %>
+        <li><%= message %></li>
+      <% end %>
+    </ul>
+  </div>
+<% end %>
+
+<div class="modal-header">
+  <h5 class="modal-title" id="editRecordModalLabel">
+    <i class="bi bi-pencil-square me-1"></i> Edit <%= @table_name.humanize.titleize %> Record
+  </h5>
+  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+</div>
+
+<div class="modal-body">
+  <% primary_key = @metadata[:primary_key] || "id" %>
+  <% primary_key_value = @record[primary_key] %>
+
+  <%= form_with url: update_record_table_path(@table_name, record_id: primary_key_value), method: :patch, id: "editRecordForm" do |form| %>
+    <% @table_columns.each do |column| %>
+      <%= render partial: 'dbviewer/tables/record_form_fields', 
+                 locals: { 
+                   form: form, 
+                   column: column, 
+                   metadata: @metadata, 
+                   foreign_key_options: @foreign_key_options, 
+                   record: @record, 
+                   is_edit_mode: true 
+                 } %>
+    <% end %>
+  <% end %>
+</div>
+
+<div class="modal-footer">
+  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+  <button type="submit" form="editRecordForm" class="btn btn-primary" id="updateRecordButton">
+    <i class="bi bi-check-lg me-1"></i>Update Record
+  </button>
+</div>

data/app/views/dbviewer/tables/new_record.html.erb

@@ -18,46 +18,15 @@
 <div class="modal-body">
   <%= form_with url: create_record_table_path(@table_name), method: :post, id: "newRecordForm" do |form| %>
     <% @table_columns.each do |column| %>
-      <% 
-        column_name = column[:name]
-        is_primary_key = @metadata[:primary_key] == column_name
-        skip_column = is_primary_key && %w[id].include?(column_name.downcase) 
-        
-        # Skip auto-increment primary keys and timestamps
-        next if skip_column || %w[created_at updated_at].include?(column_name)
-      %>
-      
-      <div class="mb-3">
-        <% 
-          # Handle different field types
-          field_type = determine_field_type(column[:type])
-          foreign_key = @metadata[:foreign_keys].find { |fk| fk[:column] == column_name }
-          field_id = "record_#{column_name}"
-          required = !column[:null]
-        %>
-        
-        <%= form.label "record[#{column_name}]", column_name.humanize, class: "form-label" %>
-        
-        <% if foreign_key && @foreign_key_options[column_name].present? %>
-          <%= form.select "record[#{column_name}]", 
-            options_for_select(@foreign_key_options[column_name]), 
-            { include_blank: column[:null] ? "-- Select --" : false }, 
-            { class: "form-select form-control select2-dropdown" } 
-          %>
-        <% elsif field_type == :check_box %>
-          <div class="form-check">
-            <%= form.check_box "record[#{column_name}]", class: "form-check-input", id: field_id %>
-          </div>
-        <% elsif field_type == :text_area %>
-          <%= form.text_area "record[#{column_name}]", class: "form-control", id: field_id, rows: 3, required: required %>
-        <% else %>
-          <%= form.send(field_type, "record[#{column_name}]", class: "form-control", id: field_id, required: required) %>
-        <% end %>
-        
-        <% if column[:default].present? && column[:default] != "NULL" %>
-          <div class="form-text text-muted">Default: <%= column[:default] %></div>
-        <% end %>
-      </div>
+      <%= render partial: 'dbviewer/tables/record_form_fields', 
+                 locals: { 
+                   form: form, 
+                   column: column, 
+                   metadata: @metadata, 
+                   foreign_key_options: @foreign_key_options, 
+                   record: nil, 
+                   is_edit_mode: false 
+                 } %>
     <% end %>
   <% end %>
 </div>

data/app/views/dbviewer/tables/show.html.erb

@@ -14,6 +14,10 @@
   <%= stylesheet_link_tag "dbviewer/table", "data-turbo-track": "reload" %>
   <%= javascript_include_tag "dbviewer/table", "data-turbo-track": "reload" %>
   <%= javascript_include_tag "dbviewer/record_creation", "data-turbo-track": "reload" %>
+  <%= javascript_include_tag "dbviewer/record_deletion", "data-turbo-track": "reload" %>
+  <% if Dbviewer.configuration.enable_record_editing %>
+  <%= javascript_include_tag "dbviewer/record_editing", "data-turbo-track": "reload" %>
+  <% end %>
 <% end %>
 
 <% content_for :sidebar_active do %>active<% end %>
@@ -192,6 +196,16 @@
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <% if Dbviewer.configuration.enable_record_editing %>
+        <button type="button" class="btn btn-primary" id="recordDetailEditBtn" data-record-id="" data-primary-key="<%= @metadata[:primary_key] || 'id' %>">
+          <i class="bi bi-pencil me-1"></i>Edit Record
+        </button>
+        <% end %>
+        <% if Dbviewer.configuration.enable_record_deletion %>
+        <button type="button" class="btn btn-danger" id="recordDetailDeleteBtn" data-record-id="">
+          <i class="bi bi-trash me-1"></i>Delete Record
+        </button>
+        <% end %>
       </div>
     </div>
   </div>
@@ -382,5 +396,57 @@
   </div>
 </div>
 
+<% if Dbviewer.configuration.enable_record_deletion %>
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header bg-danger text-white">
+        <h5 class="modal-title" id="deleteConfirmModalLabel">
+          <i class="bi bi-exclamation-triangle-fill me-2"></i>Confirm Deletion
+        </h5>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <p>Are you sure you want to delete this record from <strong><%= @table_name %></strong>?</p>
+        <div class="alert alert-warning">
+          <i class="bi bi-exclamation-triangle-fill me-2"></i>
+          <strong>Warning:</strong> This action cannot be undone.
+        </div>
+        
+        <!-- Primary key info will be inserted here -->
+        <div id="deleteRecordInfo" class="mt-3 mb-2 p-2 border-start border-4 border-danger ps-3">
+          <!-- Record info will be displayed here -->
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <%= form_with(url: "#", method: :delete, id: "recordDeleteForm") do |form| %>
+          <input type="hidden" id="deleteRecordId" name="record_id" value="">
+          <button type="submit" class="btn btn-danger">
+            <i class="bi bi-trash me-1"></i>Delete Record
+          </button>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<!-- Edit Record Modal -->
+<% if Dbviewer.configuration.enable_record_editing %>
+<div id="editRecordModal" class="modal fade" tabindex="-1" aria-labelledby="editRecordModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <!-- Content will be loaded via AJAX -->
+    </div>
+  </div>
+</div>
+<% end %>
+
+<!-- Toast container for notifications -->
+<div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
+
 <input type="hidden" id="mini_erd_table_path" name="mini_erd_table_path" value="<%= dbviewer.mini_erd_api_table_path(@table_name, format: :json) %>">
 <input type="hidden" id="table_name" name="table_name" value="<%= @table_name %>">
+<input type="hidden" id="table_primary_key" name="table_primary_key" value="<%= @metadata[:primary_key] || 'id' %>">

data/config/routes.rb

@@ -6,6 +6,9 @@ Dbviewer::Engine.routes.draw do
       get "export_csv"
       get "new_record"
       post "create_record"
+      delete "records/:record_id", to: "tables#destroy_record", as: :destroy_record
+      get "records/:record_id/edit", to: "tables#edit_record", as: :edit_record
+      patch "records/:record_id", to: "tables#update_record", as: :update_record
     end
   end
 

data/lib/dbviewer/configuration.rb

@@ -117,6 +117,12 @@ module Dbviewer
     # Maximum number of security events to keep in memory
     attr_accessor :max_security_events
 
+    # Enable or disable record deletion functionality
+    attr_accessor :enable_record_deletion
+
+    # Enable or disable record editing functionality
+    attr_accessor :enable_record_editing
+
     def initialize
       @per_page_options = [ 10, 20, 50, 100 ]
       @default_per_page = 20
@@ -124,6 +130,8 @@ module Dbviewer
       @max_query_length = 10000
       @cache_expiry = 300
       @enable_data_export = false
+      @enable_record_deletion = true
+      @enable_record_editing = true
       @query_timeout = 30
       @query_logging_mode = :memory
       @query_log_path = "log/dbviewer.log"

data/lib/dbviewer/version.rb

@@ -1,3 +1,3 @@
 module Dbviewer
-  VERSION = "0.9.4-alpha.1"
+  VERSION = "0.9.4-alpha.3"
 end

data/lib/generators/dbviewer/templates/initializer.rb

@@ -13,6 +13,9 @@ Dbviewer.configure do |config|
   config.query_log_path = "log/dbviewer.log"         # Path for query log file when in :file mode
   config.max_memory_queries = 1000                   # Maximum number of queries to store in memory
 
+  # Data Management options
+  config.enable_record_deletion = true               # Whether to allow record deletion functionality
+
   # Authentication options (Basic Auth)
   # config.admin_credentials = {
   #   username: "admin",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dbviewer
 version: !ruby/object:Gem::Version
-  version: 0.9.4.pre.alpha.1
+  version: 0.9.4.pre.alpha.3
 platform: ruby
 authors:
 - Wailan Tirajoh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-07-05 00:00:00.000000000 Z
+date: 2025-07-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -87,6 +87,8 @@ files:
 - app/assets/javascripts/dbviewer/layout.js
 - app/assets/javascripts/dbviewer/query.js
 - app/assets/javascripts/dbviewer/record_creation.js
+- app/assets/javascripts/dbviewer/record_deletion.js
+- app/assets/javascripts/dbviewer/record_editing.js
 - app/assets/javascripts/dbviewer/sidebar.js
 - app/assets/javascripts/dbviewer/table.js
 - app/assets/javascripts/dbviewer/utility.js
@@ -136,7 +138,9 @@ files:
 - app/views/dbviewer/home/index.html.erb
 - app/views/dbviewer/logs/index.html.erb
 - app/views/dbviewer/shared/_tables_sidebar.html.erb
+- app/views/dbviewer/tables/_record_form_fields.html.erb
 - app/views/dbviewer/tables/_table_structure.html.erb
+- app/views/dbviewer/tables/edit_record.html.erb
 - app/views/dbviewer/tables/index.html.erb
 - app/views/dbviewer/tables/new_record.html.erb
 - app/views/dbviewer/tables/query.html.erb