databasium 0.1.0

data/app/assets/javascript/databasium/controllers/new_migration_controller.js

@@ -0,0 +1,107 @@
+import { Controller } from "@hotwired/stimulus";
+
+const MIGRATION_ACTION_UI = {
+  create: {
+    show: ["table_name", "add_model_container", "validations"],
+    hide: ["table_name_from", "table_name_to"],
+    addModelDisabled: false
+  },
+  remove: {
+    show: ["table_name_from"],
+    hide: ["table_name_to", "table_name", "add_model_container", "validations"],
+    addModelDisabled: true
+  },
+  add: {
+    show: ["table_name_to"],
+    hide: ["table_name_from", "table_name", "add_model_container", "validations"],
+    addModelDisabled: true
+  }
+};
+
+// Connects to data-controller="new-migration"
+export default class extends Controller {
+  static targets = [
+    "column",
+    "table_name_from",
+    "table_name_to",
+    "table_name",
+    "add_model_container",
+    "add_model",
+    "validation",
+    "validations",
+    "validation_column_name"
+  ];
+
+  connect() {
+    this.addedColumns = [];
+    this.columnsNames = [];
+  }
+
+  addColumn(e) {
+    const column = this.columnTarget.cloneNode(true);
+    this.addedColumns.push(column);
+    column.classList.remove("hidden");
+    e.currentTarget.before(column);
+  }
+
+  updateColumnNames() {
+    this.columnsNames = this.addedColumns.map((column) => column.querySelector("input").value);
+
+    const options = [new Option("Select a column", "")];
+
+    this.columnsNames.forEach((name) => {
+      options.push(new Option(name, name));
+    });
+
+    if (!this.hasValidationTarget) return;
+
+    this.validation_column_nameTargets.forEach((target) => {
+      const selected = target.options[target.selectedIndex].value;
+      target.innerHTML = "";
+      options.forEach((opt) => {
+        const clone = opt.cloneNode(true);
+        clone.selected = selected === opt.value;
+        target.add(clone);
+      });
+    });
+  }
+
+  removeColumn(e) {
+    if (this.columnTargets.length <= 1) {
+      alert("You need at least one column");
+      return;
+    }
+    this.addedColumns = this.addedColumns.filter(
+      (column) => column !== e.currentTarget.parentElement
+    );
+    e.currentTarget.parentElement.remove();
+    this.updateColumnNames();
+  }
+
+  addValidation(e) {
+    const validation = this.validationTarget.cloneNode(true);
+    validation.classList.remove("hidden");
+    e.currentTarget.before(validation);
+  }
+
+  getColumnNames() {
+    this.columnsNames = this.addedColumns.map((column) => column.querySelector("input").value);
+  }
+
+  removeValidation(e) {
+    e.currentTarget.parentElement.remove();
+  }
+
+  set_action(e) {
+    const config = MIGRATION_ACTION_UI[e.currentTarget.value];
+    if (!config) return;
+
+    for (const name of config.show) {
+      this[`${name}Target`].classList.remove("hidden");
+    }
+    for (const name of config.hide) {
+      this[`${name}Target`].classList.add("hidden");
+    }
+    this.add_modelTarget.disabled = config.addModelDisabled;
+  }
+}

data/app/assets/javascript/databasium/controllers/relation_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="relation"
+export default class extends Controller {
+  connect() {}
+
+  removeRelation(e) {
+    e.currentTarget.parentElement.remove();
+  }
+}

data/app/assets/javascript/databasium/controllers/search_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="search"
+export default class extends Controller {
+  static targets = [];
+
+  connect() {
+    this.debounceTimer = null;
+    this.lastSubmittedValue = null;
+  }
+
+  update(event) {
+    const currentValue = event.target.value;
+    clearTimeout(this.debounceTimer);
+    this.debounceTimer = setTimeout(() => {
+      if (this.lastSubmittedValue === currentValue) return;
+
+      this.lastSubmittedValue = currentValue;
+
+      if (event.target.form) event.target.form.requestSubmit();
+    }, 100);
+  }
+}

data/app/assets/javascript/databasium/controllers/table_controller.js

@@ -0,0 +1,283 @@
+import { Controller } from "@hotwired/stimulus";
+
+const SPACES_UP_TO_OPEN_FORM = 135;
+const CLICK_DELAY = 200;
+
+// Connects to data-controller="table"
+export default class extends Controller {
+  static targets = [
+    "deleteButton",
+    "recordsPanel",
+    "recordTab",
+    "recordTabs",
+    "addRecordForm",
+    "recordTabsContent",
+    "toggleAllRecordsButton",
+    "checkbox"
+  ];
+
+  connect() {
+    this.selectedRecords = 0;
+    this.enableUpdate = false;
+    this.opened_tabs = new Map();
+    this.opened_form = null;
+    this.opened_tab = null;
+    this.opened_record_id = null;
+    this.allRecordsSelected = false;
+    this.clickTimer = null;
+  }
+
+  handleClick(e) {
+    if (this.clickTimer === null) {
+      this.clickTimer = setTimeout(() => {
+        this.clickTimer = null;
+        this.selectRecord(e);
+      }, CLICK_DELAY);
+    } else {
+      clearTimeout(this.clickTimer);
+      this.clickTimer = null;
+      this.appendRecordCard(e);
+    }
+  }
+
+  selectRecord(e) {
+    const tr = e.target.closest("tr");
+    if (!tr) return;
+    const checkbox = tr.querySelector("input[type='checkbox']");
+    if (!checkbox) return;
+    if (!e.target.closest("input, label, a, button")) {
+      checkbox.checked = !checkbox.checked;
+    }
+    this.updateDeleteButton(checkbox.checked);
+    this.allRecordsSelected = this.checkboxTargets.length === this.selectedRecords;
+    this.updateStyleOfToggleAllRecordsButton();
+  }
+
+  toggleAllRecords() {
+    // this.allRecordsSelected = !this.allRecordsSelected;
+    this.checkboxTargets.forEach((checkbox) => {
+      checkbox.checked = !this.allRecordsSelected;
+    });
+    this.allRecordsSelected = !this.allRecordsSelected;
+    this.updateStyleOfToggleAllRecordsButton();
+    this.updateDeleteButtonAllRecordsSelected();
+    this.updateDeleteButtonText();
+  }
+
+  updateStyleOfToggleAllRecordsButton() {
+    if (this.allRecordsSelected) {
+      this.toggleAllRecordsButtonTarget.classList.add("text-selected");
+    } else {
+      this.toggleAllRecordsButtonTarget.classList.remove("text-selected");
+    }
+  }
+
+  updateDeleteButtonAllRecordsSelected() {
+    if (this.allRecordsSelected) {
+      this.selectedRecords = this.checkboxTargets.length;
+    } else if (this.allRecordsSelected === false) {
+      this.selectedRecords = 0;
+    }
+    this.updateDeleteButtonText();
+  }
+
+  updateDeleteButton(checked) {
+    if (!checked) {
+      this.selectedRecords--;
+    } else {
+      this.selectedRecords++;
+    }
+    this.updateDeleteButtonText();
+  }
+
+  updateDeleteButtonText() {
+    if (this.selectedRecords > 0) {
+      this.deleteButtonTarget.parentElement.classList.remove("hidden");
+    } else {
+      this.deleteButtonTarget.parentElement.classList.add("hidden");
+    }
+    this.deleteButtonTarget.innerHTML = `Delete records (${this.selectedRecords})`;
+  }
+
+  resetDeleteButton() {
+    this.selectedRecords = 0;
+    this.deleteButtonTarget.parentElement.classList.add("hidden");
+  }
+
+  openRecordsPanel() {
+    this.recordsPanelTarget.classList.remove("hidden");
+  }
+
+  closeRecordsPanel() {
+    this.recordsPanelTarget.classList.add("hidden");
+  }
+
+  appendRecordCard(e) {
+    this.openRecordsPanel();
+    const row = e.currentTarget.closest("tr");
+    if (this.opened_tabs.has(row.id)) {
+      this.openTab(e, row.id);
+      this.scrollToOpenedTab();
+      return;
+    }
+    this.opened_record_id = row.id;
+    if (this.opened_form === null) {
+      this.recordTabsContentTarget.innerHTML = "";
+    }
+
+    if (this.opened_tab) {
+      this.opened_tab.classList.remove("bg-accent");
+    }
+
+    const copy = this.recordTabTarget.content.cloneNode(true);
+    copy.firstElementChild.querySelector("[data-table-target='recordTabTitle']").innerHTML = row.id;
+    copy.firstElementChild.dataset.recordId = row.id;
+    copy.firstElementChild.classList.add("bg-accent");
+    copy.firstElementChild.id = `record-tab-${row.id}`;
+
+    this.opened_tab = copy.firstElementChild;
+    this.recordTabsTarget.appendChild(copy);
+    this.scrollToOpenedTab();
+
+    const form = this.createAddRecordForm(row);
+    this.opened_tabs.set(row.id, form);
+
+    if (this.opened_form) {
+      this.opened_form.classList.add("hidden");
+    }
+    this.opened_form = form;
+    this.recordTabsContentTarget.appendChild(form);
+  }
+
+  scrollToOpenedTab() {
+    this.opened_tab.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "end"
+    });
+  }
+
+  createAddRecordForm(row) {
+    const form = this.element.querySelector("#addRecord").cloneNode(true);
+    form.id = `record-form-${row.id}`;
+    form.classList.remove("hidden", "max-h-100");
+    // 135px is the space up to the open form cant define as constants because of tailwind dynamic classes
+    form.classList.add(`max-h-[calc(100dvh-135px)]`, "pb-6");
+    const addRecordButton = form.querySelector("#add_record_button");
+    addRecordButton.value = `Update record ${row.id}`;
+    const inputs = {};
+    form.method = "patch";
+    form.action = `/databasium/records/${row.dataset.recordId}`;
+
+    form.querySelectorAll("input, select, textarea").forEach((i) => {
+      const match = i.name.match(/\[(\w+)\]/);
+      if (match) inputs[match[1]] = i;
+    });
+
+    [...row.children].forEach((child) => {
+      const attr = child.dataset.attributeName;
+      const input = inputs[attr];
+      if (!input) return;
+      const value = child.textContent.trim();
+      switch (input.type) {
+        case "file":
+          // this.showExistingFile(input, value);
+          break;
+        case "checkbox":
+          input.checked = value === "true" || value === "1";
+          break;
+        case "datetime-local":
+          input.value = this.toDatetimeLocal(value);
+          break;
+        case "date":
+          input.value = this.toDate(value);
+          break;
+        case "time":
+          input.value = this.toTime(value);
+          break;
+        default:
+          input.value = value;
+      }
+    });
+
+    return form;
+  }
+
+  openTab(e, givenRecordId = null) {
+    const recordId = givenRecordId || e.currentTarget.dataset.recordId;
+    if (!this.opened_tabs.has(recordId)) return;
+    this.opened_record_id = recordId;
+    if (this.opened_tab) {
+      this.opened_tab.classList.remove("bg-accent");
+    }
+
+    if (this.opened_form) {
+      this.opened_form.classList.add("hidden");
+    }
+    const form = this.opened_tabs.get(recordId);
+
+    const recordTab = this.recordTabsTarget.querySelector(`[data-record-id="${recordId}"]`);
+    recordTab.classList.add("bg-accent");
+    this.opened_tab = recordTab;
+
+    form.classList.remove("hidden");
+    this.opened_form = form;
+  }
+
+  closeTab(e) {
+    const recordTab = e.currentTarget.parentElement;
+    const recordId = recordTab.dataset.recordId;
+
+    if (!this.opened_tabs.has(recordId)) return;
+
+    recordTab.remove();
+    this.opened_tabs.get(recordId).remove();
+
+    this.opened_tabs.delete(recordId);
+
+    if (this.opened_record_id === recordId) {
+      this.opened_tab.remove();
+      this.opened_form.remove();
+      this.opened_form = null;
+      this.opened_tab = null;
+      this.opened_record_id = null;
+    }
+  }
+
+  showExistingFile(input, filename) {
+    if (!filename) return;
+    let label = input.parentElement.querySelector("[data-existing-file]");
+    if (!label) {
+      label = document.createElement("span");
+      label.dataset.existingFile = "true";
+      label.className = "text-sm text-muted ml-2";
+      input.insertAdjacentElement("afterend", label);
+    }
+    label.textContent = `Current: ${filename}`;
+  }
+
+  toDatetimeLocal(v) {
+    if (!v) return "";
+    const d = new Date(v.includes("T") ? v : v.replace(" ", "T"));
+    if (isNaN(d)) return "";
+    const pad = (n) => String(n).padStart(2, "0");
+    return (
+      `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}` +
+      `T${pad(d.getHours())}:${pad(d.getMinutes())}`
+    );
+  }
+
+  toDate(v) {
+    if (!v) return "";
+    const d = new Date(v.includes("T") ? v : v.replace(" ", "T"));
+    if (isNaN(d)) return "";
+    const pad = (n) => String(n).padStart(2, "0");
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+  }
+
+  toTime(v) {
+    if (!v) return "";
+    const match = v.match(/(\d{2}):(\d{2})(?::(\d{2}))?/);
+    return match ? match[0] : "";
+  }
+}

data/app/assets/javascript/databasium/controllers/table_select_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="table-select"
+export default class extends Controller {
+  static targets = ["foreignKeyInput", "table", "selectedRecord"];
+
+  connect() {}
+
+  toggleVisibility() {
+    this.tableTarget.remove();
+  }
+
+  selectRecord(e) {
+    e.preventDefault();
+    const record = e.currentTarget;
+    this.foreignKeyInputTarget.value = record.dataset.recordId;
+    this.selectedRecordTarget.textContent = record.dataset.recordId;
+  }
+}

data/app/assets/javascript/databasium/controllers/toggle_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="toggle"
+export default class extends Controller {
+  connect() {
+    this.openEl = null;
+  }
+
+  toggle(e) {
+    const el = document.getElementById(e.currentTarget.dataset.toggle);
+    if (!el) return;
+    const isOpen = !el.classList.contains("hidden");
+
+    if (this.openEl && this.openEl !== el) {
+      this.openEl.classList.add("hidden");
+    }
+
+    el.classList.toggle("hidden", isOpen);
+    this.openEl = isOpen ? (this.openEl === el ? null : this.openEl) : el;
+  }
+
+  toggleSticky(e) {
+    const el = document.getElementById(e.currentTarget.dataset.toggle);
+    if (!el) return;
+    const isOpen = !el.classList.contains("hidden");
+    el.classList.toggle("hidden", isOpen);
+  }
+}

data/app/assets/javascript/databasium/controllers/validation_controller.js

@@ -0,0 +1,78 @@
+import { Controller } from "@hotwired/stimulus";
+
+const BASIC_INFO = {
+  presence:
+    'Ensures the attribute is not blank — i.e. not nil and not an empty or whitespace-only string. Default error: "can\'t be blank".',
+  absence:
+    'Ensures the attribute is blank — i.e. nil or an empty/whitespace-only string. Often used with conditional validations (e.g. `if: :invited?`). Default error: "must be blank".',
+  uniqueness:
+    'Ensures the attribute\'s value is unique across rows by running a SELECT before save. Supports `:scope`, `:case_sensitive`, and `:conditions`. Note: this is not a DB constraint — add a unique index too. Default error: "has already been taken".',
+  inclusion:
+    "Ensures the attribute's value is in a given set passed via `:in` (array, range, proc, or lambda). Uses `Range#cover?` for ranges, otherwise `include?`.",
+  exclusion:
+    "Ensures the attribute's value is NOT in a given set passed via `:in` (array, range, proc, or lambda). Mirror of `inclusion`.",
+  validates_associated:
+    'Calls `valid?` on each associated object when this record is validated. Use only on one side of an association to avoid infinite loops. Default error: "is invalid".',
+  numericality:
+    "Ensures the attribute is a number. Use `only_integer: true` to require integers, plus comparison options (`:greater_than`, `:less_than`, `:in`, `:odd`, `:even`, etc.). Doesn't allow nil unless `allow_nil: true`.",
+  length:
+    "Validates the length of the attribute. Use `:minimum`, `:maximum`, `:in` (range), or `:is`. Customize messages with `:too_short`, `:too_long`, `:wrong_length`.",
+  acceptance:
+    "Validates that a checkbox was checked (e.g. terms of service). Creates a virtual attribute if no DB column exists. `:accept` defaults to `['1', true]`. Default error: \"must be accepted\".",
+  confirmation:
+    'Validates that two fields match — e.g. `email` and `email_confirmation`. Adds a virtual `_confirmation` attribute. Use `case_sensitive: false` to ignore case. Default error: "doesn\'t match confirmation".',
+  comparison:
+    "Validates a comparison between two comparable values via `:greater_than`, `:greater_than_or_equal_to`, `:equal_to`, `:less_than`, `:less_than_or_equal_to`, or `:other_than`. Each option accepts a value, proc, or symbol.",
+  format:
+    'Validates the attribute against a regular expression via `:with` (must match) or `:without` (must not match). Prefer `\\A` and `\\z` over `^`/`$`. Default error: "is invalid".'
+};
+const PRESELECTED_TYPE = "presence";
+// Connects to data-controller="validation"
+export default class extends Controller {
+  static targets = ["valueInput", "basicInfo", "basicInfoText"];
+
+  static values = {
+    selectedType: String
+  };
+  connect() {
+    this.selectedType = this.selectedTypeValue || PRESELECTED_TYPE;
+    this.valueInputTarget.setAttribute("list", `${this.selectedType}-options`);
+  }
+
+  updateType(event) {
+    this.selectedType = event.target.value;
+    this.valueInputTarget.setAttribute("list", `${this.selectedType}-options`);
+  }
+
+  allowNil() {
+    const value = this.valueInputTarget.value;
+    const isEmpty = value.trim() === "";
+    this.valueInputTarget.value = `${value} ${isEmpty ? "" : ","} allow_nil: true`;
+  }
+
+  allowBlank() {
+    const value = this.valueInputTarget.value;
+    const isEmpty = value.trim() === "";
+
+    this.valueInputTarget.value = `${value} ${isEmpty ? "" : ","} allow_blank: true`;
+  }
+
+  onAction() {
+    const value = this.valueInputTarget.value;
+    const isEmpty = value.trim() === "";
+    this.valueInputTarget.value = `${value} ${isEmpty ? "" : ","} on: :action`;
+  }
+
+  remove() {
+    this.element.remove();
+  }
+
+  showBasicInfo() {
+    this.basicInfoTarget.classList.remove("hidden");
+    this.basicInfoTextTarget.textContent = BASIC_INFO[this.selectedType] || "";
+  }
+
+  hideBasicInfo() {
+    this.basicInfoTarget.classList.add("hidden");
+  }
+}

data/app/assets/javascript/databasium/shapes/erd_table_shape.js

@@ -0,0 +1,54 @@
+import { Shape, ShapeRegistry } from "@maxgraph/core";
+
+export default class ErdTableShape extends Shape {
+  paintVertexShape(c, x, y, w, h) {
+    const { name, fields } = this.state.cell.value;
+    const headerHeight = 32;
+
+    c.setFillColor("var(--color-panel)");
+    c.setStrokeColor("var(--color-border)");
+    c.setStrokeWidth(2);
+    c.rect(x, y, w, fields.length * 32 + headerHeight);
+    c.fillAndStroke();
+
+    c.setFillColor("var(--color-panel)");
+    c.rect(x, y, w, headerHeight);
+    c.fillAndStroke();
+
+    c.setFontStyle(1);
+    c.setFontSize(16);
+    c.setFontColor("var(--color-main-text)");
+    c.text(x + 4, y + 4, 0, 0, name, "left", "top", false, false);
+
+    c.setFontStyle(0);
+    c.setFontSize(16);
+
+    let rowY = y + headerHeight;
+    const rowHeight = 32;
+    fields?.forEach((field) => {
+      c.setStrokeWidth(1);
+      c.setStrokeColor("var(--color-border)");
+      c.stroke();
+      c.begin();
+      c.moveTo(x, rowY);
+      c.lineTo(x + w, rowY);
+      c.stroke();
+      c.setFontColor("var(--color-main-text)");
+      c.text(
+        x + 6,
+        rowY + 4,
+        0,
+        0,
+        `${field.name} ${" - " + field.sql_type}`,
+        "left",
+        "top",
+        false,
+        false
+      );
+
+      rowY += rowHeight;
+    });
+  }
+}
+
+ShapeRegistry.add("erdTable", ErdTableShape);

data/app/assets/stylesheets/databasium/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/assets/stylesheets/databasium/colors.css

@@ -0,0 +1,55 @@
+:root {
+  --databasium-primary: var(--color-blue-500);
+  --databasium-secondary: var(--color-blue-500);
+
+  --databasium-accent: var(--color-blue-500);
+  --databasium-background: var(--color-slate-900);
+  --databasium-text: var(--color-slate-100);
+  --databasium-border: var(--color-slate-600);
+  --databasium-panel: var(--color-slate-800);
+  --databasium-hover: var(--color-yellow-400);
+  --databasium-selected: var(--color-green-500);
+  --databasium-shadow: 0 0 6px rgba(96, 165, 250, 0.5);
+
+  --databasium-active: var(--color-blue-500);
+  --databasium-focus: var(--color-blue-500);
+  --databasium-disabled: var(--color-blue-500);
+  --databasium-error: var(--color-blue-500);
+  --databasium-success: var(--color-blue-500);
+  --databasium-warning: var(--color-blue-500);
+}
+
+[data-theme="white"] {
+  --app-primary: #ffffff;
+  --app-secondary: yellow;
+  --app-accent: #888888;
+  --app-background: #111111;
+  --app-text: #ffffff;
+}
+
+[data-theme="ocean"] {
+  --app-primary: #0f172a;
+  --app-secondary: #38bdf8;
+  --app-accent: #06b6d4;
+  --app-background: #ecfeff;
+  --app-text: #082f49;
+}
+
+@theme inline {
+  --color-primary: var(--databasium-primary);
+  --color-secondary: var(--databasium-secondary);
+  --color-accent: var(--databasium-accent);
+
+  --color-background: var(--databasium-background);
+  --color-main-text: var(--databasium-text);
+  --color-border: var(--databasium-border);
+  --color-panel: var(--databasium-panel);
+
+  --shadow-accent: var(--databasium-shadow);
+  --color-hover: var(--databasium-hover);
+  --color-active: var(--databasium-active);
+  --color-focus: var(--databasium-focus);
+  --color-disabled: var(--databasium-disabled);
+  --color-error: var(--databasium-error);
+  --color-selected: var(--databasium-selected);
+}