mat_views 0.2.0 → 0.3.0

data/app/javascript/mat_views/controllers/drawer_controller.js

@@ -0,0 +1,252 @@
+/**
+ * Copyright Codevedas Inc. 2025-present
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["overlay", "panel", "frame"];
+  static currentTargetStack = [];
+
+  connect() {
+    this.currentTargetStack = [];
+    this._escHandler = (e) => {
+      if (e.key === "Escape") this.close();
+    };
+    if (this.hasFrameTarget) {
+      this._submitEndHandler = (e) => this.onSubmitEnd(e);
+      this._frameLoadHandler = (e) => this.onFrameLoad(e);
+      this.frameTarget.addEventListener(
+        "turbo:submit-end",
+        this._submitEndHandler,
+      );
+      this.frameTarget.addEventListener(
+        "turbo:frame-load",
+        this._frameLoadHandler,
+      );
+    }
+    const qs = new URLSearchParams(window.location.search);
+    const open = qs.get("open");
+    if (open) {
+      this.openDrawerByName(open);
+    }
+  }
+
+  disconnect() {
+    if (this.hasFrameTarget) {
+      this.frameTarget.removeEventListener(
+        "turbo:submit-end",
+        this._submitEndHandler,
+      );
+      this.frameTarget.removeEventListener(
+        "turbo:frame-load",
+        this._frameLoadHandler,
+      );
+    }
+    document.removeEventListener("keydown", this._escHandler);
+  }
+
+  loadAndShow() {
+    let currentTarget = this.currentTargetStack.at(-1);
+    if (!currentTarget) return;
+
+    const title =
+      currentTarget?.dataset.drawerTitle ||
+      currentTarget?.getAttribute("title") ||
+      currentTarget?.getAttribute("aria-label");
+    const url =
+      currentTarget?.dataset.drawerUrl || currentTarget?.getAttribute("href");
+    if (!url || url === "#" || url === "javascript:void(0);") return;
+
+    const header = this._drawerHeader();
+    header.setAttribute("aria-label", title);
+    const titleEle = header.querySelector("h2");
+    titleEle.textContent = title;
+    this.show();
+    this.load(url);
+  }
+
+  open(event) {
+    if (!this.currentTargetStack) {
+      this.currentTargetStack = [];
+    }
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.stopImmediatePropagation) event.stopImmediatePropagation();
+    }
+    this.currentTargetStack.push(event?.currentTarget);
+    this.loadAndShow();
+  }
+
+  show() {
+    const root = this._root();
+    document.addEventListener("keydown", this._escHandler);
+    root?.classList.add("is-open");
+    root?.setAttribute("aria-hidden", "false");
+  }
+
+  close() {
+    this.currentTargetStack.pop();
+    if (this.currentTargetStack.length > 0) {
+      this.loadAndShow();
+      return;
+    }
+
+    const root = this._root();
+    document.activeElement?.blur();
+    document.body.focus();
+    root?.classList.remove("is-open");
+    document.removeEventListener("keydown", this._escHandler);
+    root?.setAttribute("aria-hidden", "true");
+
+    const url = new URL(window.location);
+    url.searchParams.delete("open");
+    history.replaceState({}, "", url);
+
+    this.frameTarget.removeAttribute("src");
+  }
+
+  openDrawerByName(name) {
+    const type = name.split("_")[0];
+    const action = name.split("_")[1];
+    const id = name.split("_")[2];
+    switch (type) {
+      case "definitions":
+        this.openDrawerByDefinition(action, id);
+        break;
+      case "runs":
+        this.openDrawerByRun(action, id);
+        break;
+      case "preferences":
+        this.openDrawerByPreferences(action);
+        break;
+    }
+  }
+
+  openDrawerByRun(action, id) {
+    if (action == "view") {
+      this.show();
+      this.load(window.MatViewsRoutes.runsPath + `/${id}?frame_id=mv-drawer`);
+    }
+  }
+
+  openDrawerByPreferences(action) {
+    if (action == "edit") {
+      this.show();
+      this.load(window.MatViewsRoutes.preferencesPath + `?frame_id=mv-drawer`);
+    }
+  }
+
+  openDrawerByDefinition(action, id) {
+    switch (action) {
+      case "new":
+        this.show();
+        this.load(
+          window.MatViewsRoutes.definitionsPath + "/new?frame_id=mv-drawer",
+        );
+        break;
+      case "view":
+        this.show();
+        this.load(
+          window.MatViewsRoutes.definitionsPath + `/${id}?frame_id=mv-drawer`,
+        );
+        break;
+      case "edit":
+        this.show();
+        this.load(
+          window.MatViewsRoutes.definitionsPath +
+            `/${id}/edit?frame_id=mv-drawer`,
+        );
+        break;
+    }
+  }
+
+  refresh() {
+    if (this.frameTarget?.src) {
+      this.load(this.frameTarget.src);
+    }
+  }
+
+  load(url) {
+    const frame = this.frameTarget;
+    if (!frame) return;
+
+    const u = new URL(url, window.location.href);
+    frame.src = u.toString();
+  }
+
+  // ── Events ───────────────────────────────────────────────────────
+
+  onFrameLoad(event) {
+    // get title from hidden input if present
+    const frame = event.target;
+    const titleInput = frame?.querySelector("#mv-drawer-title-text")?.value;
+    if (titleInput) {
+      const header = this._drawerHeader();
+      header.setAttribute("aria-label", titleInput);
+      const titleEle = header.querySelector("h2");
+      titleEle.textContent = titleInput;
+    }
+
+    const urlIdentifier = frame?.querySelector(
+      "#mv-drawer-open-url-identifier",
+    )?.value;
+    if (urlIdentifier) {
+      const url = new URL(window.location);
+      url.searchParams.set("open", urlIdentifier);
+      history.replaceState({}, "", url);
+    }
+  }
+
+  onSubmitEnd(event) {
+    if (event.detail.fetchResponse.statusCode === 299) {
+      const url = new URL(window.location);
+      url.searchParams.delete("open");
+      history.replaceState({}, "", url);
+      window.location.reload();
+      return;
+    } else if (event.detail.fetchResponse.statusCode === 298) {
+      this.close();
+    }
+
+    this.refreshActiveFrame();
+  }
+
+  // ── Helpers ──────────────────────────────────────────────────────
+
+  refreshActiveFrame() {
+    const activeTabAnchor = document.querySelector(".mv-tab.mv-tab--on");
+    const dataName = activeTabAnchor?.dataset.name;
+    const activePanel = document.querySelector(
+      `[data-tabs-target="panel"][data-name="${dataName}"]`,
+    );
+    const activeTurboFrame = activePanel?.querySelector("turbo-frame");
+    this.refreshFrameById(activeTurboFrame.id);
+  }
+
+  refreshFrameById(id) {
+    const frame = document.getElementById(id);
+    if (!frame) return;
+    let url = frame.getAttribute("src") || frame.dataset.src;
+    if (!url) return;
+    try {
+      const u = new URL(url, window.location.href);
+      u.searchParams.set("_", Date.now().toString());
+      frame.src = u.toString();
+    } catch {
+      const sep = url.includes("?") ? "&" : "?";
+      frame.src = url + sep + "_=" + Date.now();
+    }
+  }
+
+  _root() {
+    return document.querySelector(".mv-drawer-root");
+  }
+
+  _drawerHeader() {
+    return this._root()?.querySelector(".mv-drawer-head");
+  }
+}

data/app/javascript/mat_views/controllers/filter_controller.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright Codevedas Inc. 2025-present
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    const queryParams = this.element.dataset.queryParams;
+    this.queryParamsArray = queryParams ? queryParams.split(",") : [];
+
+    if (this.queryParamsArray.length === 0) {
+      return;
+    }
+
+    const qs = new URLSearchParams(window.location.search);
+
+    // return if qs params are equal to form values, this.queryParamsArray
+    const allMatch = this.queryParamsArray.every((param) => {
+      const formElement = this.element.querySelector(`[name="${param}"]`);
+      if (!formElement) {
+        return true; // skip if form element not found
+      }
+      const formValue = formElement.value || "";
+      const qsValue = qs.get(param) || "";
+      return formValue === qsValue;
+    });
+
+    if (allMatch) {
+      return;
+    }
+
+    // set form values from qs params, this.queryParamsArray
+    this.queryParamsArray.forEach((param) => {
+      const formElement = this.element.querySelector(`[name="${param}"]`);
+      if (!formElement) {
+        return; // skip if form element not found
+      }
+      const qsValue = qs.get(param);
+      if (qsValue !== null) {
+        formElement.value = qsValue;
+      } else {
+        formElement.value = ""; // reset to empty if param not in URL
+      }
+    });
+
+    this.element.requestSubmit();
+  }
+
+  reset() {
+    const selects = this.element.querySelectorAll("select");
+    selects.forEach((select) => {
+      if (select.options.length > 0) {
+        select.selectedIndex = 0;
+      }
+    });
+
+    // remove this.queryParamsArray from URL
+    const url = new URL(window.location);
+    this.queryParamsArray.forEach((param) => {
+      url.searchParams.delete(param);
+    });
+    window.history.replaceState({}, "", url);
+
+    this.element.requestSubmit();
+  }
+
+  autoSubmit(event) {
+    if (!event.target) {
+      return;
+    }
+    if (!event.target.name) {
+      return;
+    }
+
+    const argName = event.target.name;
+    const argValue = event.target.value;
+
+    const url = new URL(window.location);
+    if (event.target.value == "") {
+      url.searchParams.delete(argName);
+    } else {
+      url.searchParams.set(argName, argValue);
+    }
+    window.history.replaceState({}, "", url);
+    this.element.requestSubmit();
+  }
+}

data/app/javascript/mat_views/controllers/flash_controller.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright Codevedas Inc. 2025-present
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    setTimeout(() => this.element.remove(), 10000);
+  }
+}

data/app/javascript/mat_views/controllers/index.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright Codevedas Inc. 2025-present
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { application } from "mat_views/controllers/application";
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading";
+
+eagerLoadControllersFrom("mat_views/controllers", application);

data/app/javascript/mat_views/controllers/mv_confirm_controller.js

@@ -0,0 +1,281 @@
+/**
+ * Copyright Codevedas Inc. 2025-present
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Controller } from "@hotwired/stimulus";
+export default class extends Controller {
+  static values = {
+    enabled: { type: Boolean, default: true },
+    gap: { type: Number, default: 8 },
+    margin: { type: Number, default: 8 },
+  };
+
+  connect() {
+    if (!this.enabledValue) return;
+    this.installConfirmHooks();
+  }
+
+  disconnect() {
+    this.uninstallConfirmHooks();
+    this.cleanup(false);
+  }
+
+  // ──────────────────────────────────────────────
+  // Turbo hook wiring
+  // ──────────────────────────────────────────────
+  installConfirmHooks() {
+    if (!this.hasTurbo()) return;
+    this.prevFormsConfirm = window.Turbo.config.forms?.confirm;
+    this.prevLinksConfirm = window.Turbo.config.links?.confirm;
+
+    const handler = this.confirm.bind(this);
+    if (window.Turbo.config.forms) window.Turbo.config.forms.confirm = handler;
+    if (window.Turbo.config.links) window.Turbo.config.links.confirm = handler;
+  }
+
+  uninstallConfirmHooks() {
+    if (!this.hasTurbo()) return;
+    if (window.Turbo.config.forms)
+      window.Turbo.config.forms.confirm = this.prevFormsConfirm;
+    if (window.Turbo.config.links)
+      window.Turbo.config.links.confirm = this.prevLinksConfirm;
+  }
+
+  hasTurbo() {
+    return !!window.Turbo?.config;
+  }
+
+  // ──────────────────────────────────────────────
+  // Confirm entry point
+  // ──────────────────────────────────────────────
+  confirm(message, element) {
+    // Fallback for Turbo < 8 or if anything is missing
+    if (!this.hasTurbo()) return Promise.resolve(window.confirm(message));
+
+    return new Promise((resolve) => {
+      this._resolver = resolve;
+      this.open(message, element);
+    });
+  }
+
+  // ──────────────────────────────────────────────
+  // Open/close lifecycle
+  // ──────────────────────────────────────────────
+  open(message, element) {
+    this.pop = this.ensurePopover();
+    this.triggerEl = element;
+
+    const { content } = this.getParts(this.pop);
+    content.textContent = message;
+
+    this.position(this.pop, element);
+    this.show(this.pop);
+    this.bindGlobalListeners();
+  }
+
+  cleanup(result) {
+    if (!this.pop) return;
+    this.hide(this.pop);
+    this.unbindGlobalListeners();
+    const resolve = this._resolver;
+    this._resolver = null;
+    if (resolve) resolve(!!result);
+  }
+
+  // ──────────────────────────────────────────────
+  // DOM helpers
+  // ──────────────────────────────────────────────
+  ensurePopover() {
+    let el = document.getElementById("mv-confirm");
+    if (el) return el;
+    el = this.createPopover();
+    document.body.appendChild(el);
+    return el;
+  }
+
+  createPopover() {
+    const el = document.createElement("div");
+    el.id = "mv-confirm";
+    el.className = "mv-confirm";
+    Object.assign(el.style, {
+      position: "fixed",
+      top: "0",
+      left: "0",
+      transform: "translate(-9999px,-9999px)",
+    });
+    el.innerHTML = `
+      <div class="mv-confirm__content"></div>
+      <div class="mv-confirm__buttons">
+        <button type="button" class="mv-btn mv-btn--sm mv-btn--negative mv-confirm__yes">Yes</button>
+        <button type="button" class="mv-btn mv-btn--sm mv-btn--secondary mv-confirm__no">No</button>
+      </div>
+      <div class="mv-confirm__arrow"></div>`;
+    return el;
+  }
+
+  getParts(pop) {
+    return {
+      content: pop.querySelector(".mv-confirm__content"),
+      yes: pop.querySelector(".mv-confirm__yes"),
+      no: pop.querySelector(".mv-confirm__no"),
+    };
+  }
+
+  show(pop) {
+    pop.setAttribute("data-show", "true");
+  }
+
+  hide(pop) {
+    pop.removeAttribute("data-show");
+    pop.style.transform = "translate(-9999px,-9999px)";
+  }
+
+  // ──────────────────────────────────────────────
+  // Listeners
+  // ──────────────────────────────────────────────
+  bindGlobalListeners() {
+    const { yes, no } = this.getParts(this.pop);
+
+    this.onYes = () => this.cleanup(true);
+    this.onNo = () => this.cleanup(false);
+    this.onEsc = (e) => (e.key === "Escape" ? this.cleanup(false) : null);
+    this.onOutside = (e) => {
+      if (!this.pop.contains(e.target) && e.target !== this.triggerEl)
+        this.cleanup(false);
+    };
+    this.onScrollOrResize = () => this.cleanup(false);
+
+    yes.addEventListener("click", this.onYes);
+    no.addEventListener("click", this.onNo);
+    document.addEventListener("keydown", this.onEsc);
+    document.addEventListener("click", this.onOutside, true);
+    window.addEventListener("scroll", this.onScrollOrResize, true);
+    window.addEventListener("resize", this.onScrollOrResize, true);
+  }
+
+  unbindGlobalListeners() {
+    if (!this.pop) return;
+    const { yes, no } = this.getParts(this.pop);
+
+    yes.removeEventListener("click", this.onYes);
+    no.removeEventListener("click", this.onNo);
+    document.removeEventListener("keydown", this.onEsc);
+    document.removeEventListener("click", this.onOutside, true);
+    window.removeEventListener("scroll", this.onScrollOrResize, true);
+    window.removeEventListener("resize", this.onScrollOrResize, true);
+
+    this.onYes =
+      this.onNo =
+      this.onEsc =
+      this.onOutside =
+      this.onScrollOrResize =
+        null;
+  }
+
+  // ──────────────────────────────────────────────
+  // Positioning
+  // ──────────────────────────────────────────────
+  position(pop, element) {
+    // Prep for measurement
+    pop.style.opacity = "1";
+    pop.style.transform = "translate(-9999px,-9999px)";
+
+    const rect = element.getBoundingClientRect();
+    const pr = pop.getBoundingClientRect();
+
+    const { x, y, placement } = this.computePlacement(rect, pr);
+    this.setPlacementClass(pop, placement);
+    pop.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
+  }
+
+  computePlacement(rect, pr) {
+    const gap = this.gapValue;
+    const margin = this.marginValue;
+    const placements = ["bottom", "top", "right", "left"];
+
+    for (const p of placements) {
+      const { x, y } = this.coordsFor(p, rect, pr, gap);
+      if (this.fits(p, x, y, pr, margin)) {
+        return {
+          x: this.clampX(x, pr, margin),
+          y: this.clampY(y, pr, margin),
+          placement: p,
+        };
+      }
+    }
+
+    // Fallback: bottom centered, clamped
+    const fx = rect.left + (rect.width - pr.width) / 2;
+    const fy = rect.bottom + gap;
+    return {
+      x: this.clampX(fx, pr, margin),
+      y: this.clampY(fy, pr, margin),
+      placement: "bottom",
+    };
+  }
+
+  coordsFor(p, rect, pr, gap) {
+    switch (p) {
+      case "bottom":
+        return {
+          x: rect.left + (rect.width - pr.width) / 2,
+          y: rect.bottom + gap,
+        };
+      case "top":
+        return {
+          x: rect.left + (rect.width - pr.width) / 2,
+          y: rect.top - pr.height - gap,
+        };
+      case "right":
+        return {
+          x: rect.right + gap,
+          y: rect.top + (rect.height - pr.height) / 2,
+        };
+      case "left":
+        return {
+          x: rect.left - pr.width - gap,
+          y: rect.top + (rect.height - pr.height) / 2,
+        };
+      default:
+        return { x: 0, y: 0 };
+    }
+  }
+
+  fits(p, x, y, pr, margin) {
+    switch (p) {
+      case "bottom":
+        return y + pr.height + margin <= window.innerHeight;
+      case "top":
+        return y >= margin;
+      case "right":
+        return x + pr.width + margin <= window.innerWidth;
+      case "left":
+        return x >= margin;
+      default:
+        return false;
+    }
+  }
+
+  clampX(x, pr, margin) {
+    return Math.max(margin, Math.min(x, window.innerWidth - pr.width - margin));
+  }
+
+  clampY(y, pr, margin) {
+    return Math.max(
+      margin,
+      Math.min(y, window.innerHeight - pr.height - margin),
+    );
+  }
+
+  setPlacementClass(pop, placement) {
+    pop.classList.remove(
+      "mv-confirm--top",
+      "mv-confirm--right",
+      "mv-confirm--bottom",
+      "mv-confirm--left",
+    );
+    pop.classList.add(`mv-confirm--${placement}`);
+  }
+}

data/app/javascript/mat_views/controllers/submitter_controller.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright Codevedas Inc. 2025-present
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  submit() {
+    this.element.disabled = true;
+    this.element.classList.add("opacity-60");
+    if (this.element.form) this.element.form.submit();
+  }
+}