flexi_admin 0.0.5

data/lib/flexi_admin/javascript/controllers/autocomplete_controller.js

@@ -0,0 +1,142 @@
+import { Controller } from "@hotwired/stimulus";
+import { markValid } from "../utils";
+
+// Connects to data-controller="autocomplete"
+export default class extends Controller {
+  static targets = [
+    "input",
+    "list",
+    "clearIcon",
+    "loadingIcon",
+    "resourceId",
+    "isDisabled",
+  ];
+
+  connect() {
+    this._disableInput(this.inputTarget.dataset.autocompleteIsDisabled);
+    this.timeout = null;
+    this.blurTimeout = null;
+    if (this.inputTarget.value && !this.inputTarget.disabled) {
+      this._clearIcon("show");
+    } else {
+      this._clearIcon("hide");
+    }
+    this._loadingIcon("hide");
+  }
+
+  disconnect() {
+    clearTimeout(this.timeout);
+    clearTimeout(this.blurTimeout);
+    this.hideResults();
+  }
+
+  keyup(event) {
+    if (this.inputTarget.value.length > 0) {
+      this.listTarget.classList.remove("d-none");
+      this._clearIcon("show");
+      markValid(event);
+    } else {
+      this.hideResults();
+      this._clearIcon("hide");
+      return;
+    }
+
+    clearTimeout(this.timeout);
+
+    this.timeout = setTimeout(() => {
+      this._search(this.inputTarget.value);
+    }, 200);
+  }
+
+  hideResults() {
+    this.listTarget.classList.add("d-none");
+  }
+
+  onFocusOut(event) {
+    // Delay hiding results to allow for click events on results
+    this.blurTimeout = setTimeout(() => {
+      this.hideResults();
+    }, 200);
+  }
+
+  preventBlur(event) {
+    // Prevent the blur event when clicking on a result
+    event.preventDefault();
+    clearTimeout(this.blurTimeout);
+  }
+
+  select(event) {
+    this.resourceIdTarget.value =
+      event.currentTarget.dataset.autocompleteResourceIdValue;
+    this.inputTarget.value = event.currentTarget.innerText;
+    this.inputTarget.dispatchEvent(new Event("input"));
+    clearTimeout(this.blurTimeout);
+    this.hideResults();
+  }
+
+  inputValue(event) {
+    this.inputTarget.value = event.currentTarget.innerText;
+    this.inputTarget.dispatchEvent(new Event("input"));
+    this.hideResults();
+  }
+
+  clear() {
+    this.inputTarget.value = "";
+    this.resourceIdTarget.value = "";
+    this.inputTarget.dispatchEvent(new Event("input"));
+    this.hideResults();
+    this._clearIcon("hide");
+    this.inputTarget.focus();
+  }
+
+  _loadingIcon(string) {
+    if (string === "show") {
+      this.loadingIconTarget.classList.remove("d-none");
+    } else {
+      this.loadingIconTarget.classList.add("d-none");
+    }
+  }
+
+  _clearIcon(string) {
+    if (string === "show") {
+      this.clearIconTarget.classList.remove("d-none");
+    } else {
+      this.clearIconTarget.classList.add("d-none");
+    }
+  }
+
+  _disableInput(string) {
+    if (string === "true") {
+      this.inputTarget.disabled = true;
+    } else {
+      this.inputTarget.disabled = false;
+    }
+  }
+
+  async _search(string) {
+    const path = this.inputTarget.dataset.autocompleteSearchPath;
+    const url = new URL(path, window.location.origin);
+    url.searchParams.set("q", string);
+
+    try {
+      this.loadingIconTarget.classList.remove("d-none"); // Show loading icon
+      const response = await fetch(url.toString(), {
+        headers: {
+          Accept: "text/html",
+        },
+      });
+
+      if (response.ok) {
+        const html = await response.text();
+        this._clearIcon("show");
+        this.listTarget.innerHTML = html; // Set the results as inner HTML
+      } else {
+        console.error("Error fetching search results:", response.statusText);
+      }
+    } catch (error) {
+      console.error("Network error:", error);
+    } finally {
+      this.loadingIconTarget.classList.add("d-none"); // Hide loading icon
+    }
+  }
+}

data/lib/flexi_admin/javascript/controllers/bulk_action_controller.js

@@ -0,0 +1,158 @@
+import { Controller } from "@hotwired/stimulus";
+import { fetchTurboContent } from "../utils";
+
+// Connects to data-controller="bulk-action"
+export default class extends Controller {
+  static values = {
+    scope: String,
+  };
+
+  connect() {
+    this.selectedIds = [];
+
+    document.addEventListener("bulk-action-modal-opened", (event) => {
+      this._modalOpened(event);
+    });
+  }
+
+  disconnect() {
+    document.removeEventListener("bulk-action-modal-opened", this._modalOpened);
+  }
+
+  async requestModal(event) {
+    const url = await event.target.dataset.urlWithId;
+    fetchTurboContent(event, url);
+  }
+
+  submitForm(event) {
+    event.preventDefault();
+
+    const modal = this._withModal();
+    const form = modal.querySelector("form");
+    form.requestSubmit();
+  }
+
+  toggle(event) {
+    const id = event.target.value;
+
+    if (event.target.checked) {
+      // Add ID to the array if the checkbox is checked
+      this.selectedIds.push(id);
+    } else {
+      // Remove ID from the array if the checkbox is unchecked
+      this.selectedIds = this.selectedIds.filter(
+        (selectedId) => selectedId !== id
+      );
+    }
+
+    if (this.selectedIds.length > 0) {
+      this._enableActions();
+    } else {
+      this._disableActions();
+    }
+
+    this._persist();
+    // console.log(`${this.scopeValue} select one`, this.selectedIds.length);
+  }
+
+  toggleAll(event) {
+    if (event.target.checked) {
+      this._selectAll();
+    } else {
+      this._unselectAll();
+    }
+  }
+
+  _modalOpened(event) {
+    if (event.detail.scope !== this.scopeValue) {
+      return;
+    }
+
+    const modal = this._withModal();
+
+    this._populateCountElements(modal);
+    this._populateIds(modal);
+    this._addProcessor(modal, event.detail.modalId);
+  }
+
+  _populateCountElements(modal) {
+    const countElements = modal.querySelectorAll("span.count");
+    countElements.forEach((countElement) => {
+      countElement.textContent = this.selectedIds.length;
+    });
+  }
+
+  _addProcessor(modal, processor) {
+    const form = modal.querySelector("form");
+    const hiddenInput = document.createElement("input");
+    hiddenInput.type = "hidden";
+    hiddenInput.name = "processor";
+    hiddenInput.value = processor;
+    form.appendChild(hiddenInput);
+  }
+
+  _populateIds(modal) {
+    const form = modal.querySelector("form");
+    const hiddenInput = document.createElement("input");
+    hiddenInput.type = "hidden";
+    hiddenInput.name = "ids";
+    hiddenInput.value = JSON.stringify(this.selectedIds);
+    form.appendChild(hiddenInput);
+  }
+
+  _withModal() {
+    return document.querySelector(`#modalx_${this.scopeValue}`);
+  }
+
+  _selectAll() {
+    // find all checkboxes with the name of the actionScope
+    const checkboxes = document.querySelectorAll(
+      `.bulk-action-checkbox > input[name="${this.scopeValue}"]`
+    );
+
+    this.selectedIds = Array.from(checkboxes).map((checkbox) => checkbox.value);
+
+    Array.from(checkboxes).forEach((checkbox) => {
+      checkbox.checked = true;
+    });
+
+    this._persist();
+    this._enableActions();
+    // console.log(`${this.scopeValue} select all`, this.selectedIds.length);
+  }
+
+  _unselectAll() {
+    this.selectedIds = [];
+    const checkboxes = document.querySelectorAll(
+      `.bulk-action-checkbox > input[name="${this.scopeValue}"]`
+    );
+    Array.from(checkboxes).forEach((checkbox) => {
+      checkbox.checked = false;
+    });
+
+    this._persist();
+    this._disableActions();
+    // console.log(`${this.scopeValue} unselect all`, this.selectedIds.length);
+  }
+
+  _persist() {
+    this.element.dataset.ids = JSON.stringify(this.selectedIds);
+    // console.log("persist", this.element.dataset.ids);
+  }
+
+  _enableActions() {
+    document
+      .querySelectorAll(".dropdown-item.bulk-action.selection-dependent")
+      .forEach((item) => {
+        item.classList.remove("disabled");
+      });
+  }
+
+  _disableActions() {
+    document
+      .querySelectorAll(".dropdown-item.bulk-action.selection-dependent")
+      .forEach((item) => {
+        item.classList.add("disabled");
+      });
+  }
+}

data/lib/flexi_admin/javascript/controllers/button_select_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="button-select"
+export default class extends Controller {
+  static targets = ["button", "input"];
+  static values = { disabled: Boolean };
+
+  connect() {
+    this._updateSelectedButton();
+  }
+
+  select(event) {
+    if (this.disabledValue) {
+      return;
+    }
+
+    event.preventDefault();
+    const selectedValue = event.currentTarget.dataset.value;
+    this.inputTarget.value = selectedValue;
+    this._updateSelectedButton();
+  }
+
+  _updateSelectedButton() {
+    this.buttonTargets.forEach((button) => {
+      button.classList.toggle(
+        "selected",
+        button.dataset.value === this.inputTarget.value
+      );
+      button.classList.toggle("disabled", this.disabledValue);
+    });
+  }
+}

data/lib/flexi_admin/javascript/controllers/datalist_controller.js

@@ -0,0 +1,104 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="autocomplete"
+export default class extends Controller {
+  static targets = ["input", "datalist", "clearIcon", "loadingIcon"];
+
+  static values = {
+    searchPath: String,
+    isDisabled: Boolean,
+    resourceId: String,
+  };
+
+  connect() {
+    this._disableInput(this.isDisabledValue);
+    this.timeout = null;
+    if (this.inputTarget.value && !this.inputTarget.disabled) {
+      this._clearIcon("show");
+    } else {
+      this._clearIcon("hide");
+    }
+    this._loadingIcon("hide");
+  }
+
+  disconnect() {
+    clearTimeout(this.timeout);
+    while (this.datalistTarget.firstChild) {
+      this.datalistTarget.removeChild(this.datalistTarget.firstChild);
+    }
+  }
+
+  keyup() {
+    if (this.inputTarget.value.length > 0) {
+      this._clearIcon("show");
+    } else {
+      this._clearIcon("hide");
+      return;
+    }
+
+    clearTimeout(this.timeout);
+
+    this.timeout = setTimeout(() => {
+      this._search(this.inputTarget.value);
+    }, 200);
+  }
+
+  clear() {
+    this.inputTarget.value = "";
+    this.inputTarget.dispatchEvent(new Event("input"));
+    this._clearIcon("hide");
+    this.inputTarget.focus();
+  }
+
+  _loadingIcon(string) {
+    if (string === "show") {
+      this.loadingIconTarget.classList.remove("d-none");
+    } else {
+      this.loadingIconTarget.classList.add("d-none");
+    }
+  }
+
+  _clearIcon(string) {
+    if (string === "show") {
+      this.clearIconTarget.classList.remove("d-none");
+    } else {
+      this.clearIconTarget.classList.add("d-none");
+    }
+  }
+
+  _disableInput(string) {
+    if (string === "true") {
+      this.inputTarget.disabled = true;
+    } else {
+      this.inputTarget.disabled = false;
+    }
+  }
+
+  async _search(string) {
+    const path = this.searchPathValue;
+    const url = new URL(path, window.location.origin);
+    url.searchParams.set("q", string);
+
+    try {
+      this.loadingIconTarget.classList.remove("d-none"); // Show loading icon
+      const response = await fetch(url.toString(), {
+        headers: {
+          Accept: "text/html",
+        },
+      });
+
+      if (response.ok) {
+        const html = await response.text();
+        this._clearIcon("show");
+        this.datalistTarget.innerHTML = html; // Set the results as inner HTML
+        this.inputTarget.dispatchEvent(new Event("input"));
+      } else {
+        console.error("Error fetching search results:", response.statusText);
+      }
+    } catch (error) {
+      console.error("Network error:", error);
+    } finally {
+      this.loadingIconTarget.classList.add("d-none"); // Hide loading icon
+    }
+  }
+}

data/lib/flexi_admin/javascript/controllers/floating_toc_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="floating-toc"
+export default class extends Controller {
+  static targets = ["toc"];
+
+  connect() {
+    this._buildToc();
+  }
+
+  _buildToc() {
+    // Find the TOC target element
+    const tocTarget = this.tocTarget;
+    if (!tocTarget) return;
+
+    // Find all elements with the .toc class
+    const tocChapters = document.querySelectorAll(".toc");
+
+    // Create a list item for each chapter
+    tocChapters.forEach((chapter) => {
+      const title = chapter.innerHTML;
+      const id = chapter.id;
+
+      // Create the list item and link
+      const listItem = document.createElement("li");
+      listItem.classList.add("nav-item");
+
+      const link = document.createElement("a");
+      link.classList.add("nav-link");
+      link.href = `#${id}`;
+      link.textContent = title;
+      link.setAttribute("data-turbo", "false");
+
+      // Append the link to the list item, and the list item to the TOC target
+      listItem.appendChild(link);
+      tocTarget.appendChild(listItem);
+    });
+  }
+}

data/lib/flexi_admin/javascript/controllers/form_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus";
+import { fetchTurboContent } from "../utils";
+
+// Connects to data-controller="form"
+export default class extends Controller {
+  static values = {
+    resourcePath: String,
+  };
+
+  enable(event) {
+    fetchTurboContent(event, this.resourcePathValue);
+  }
+
+  disable(event) {
+    fetchTurboContent(event, this.resourcePathValue);
+  }
+}

data/lib/flexi_admin/javascript/controllers/form_validation_controller.js

@@ -0,0 +1,86 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    this.setCustomValidationMessages();
+    this._unhideValidationMessages();
+  }
+
+  disconnect() {
+    this.removeCustomValidationMessages();
+  }
+
+  setCustomValidationMessages() {
+    this.getInputFields().forEach((field) => {
+      field.addEventListener("invalid", this.handleInvalid);
+    });
+  }
+
+  removeCustomValidationMessages() {
+    this.getInputFields().forEach((field) => {
+      field.removeEventListener("invalid", this.handleInvalid);
+    });
+  }
+
+  getInputFields() {
+    return Array.from(
+      this.element.querySelectorAll(
+        'input:not([type="hidden"]), select, textarea'
+      )
+    );
+  }
+
+  handleInvalid = (event) => {
+    const field = event.target;
+    if (this.isFieldValid(field)) {
+      field.setCustomValidity("");
+      return;
+    }
+
+    const type = this._isCustomType(field)
+      ? field.dataset.fieldType
+      : field.type;
+    let message = "Toto je povinné pole.";
+
+    switch (type) {
+      case "text":
+        message = "Toto je povinné pole.";
+        break;
+      case "autocomplete":
+        message = "Najděte a vyberte si položku ze seznamu.";
+        break;
+      case "email":
+        message = "Zadejte platnou emailovou adresu.";
+        break;
+      case "tel":
+        message = "Zadejte platné telefonní číslo.";
+        break;
+      // Add more cases for other field types as needed
+    }
+
+    field.setCustomValidity(message);
+  };
+
+  isFieldValid(field) {
+    return (
+      !field.validity.badInput &&
+      !field.validity.valueMissing &&
+      !field.validity.typeMismatch &&
+      !field.validity.patternMismatch &&
+      !field.validity.tooShort &&
+      !field.validity.tooLong &&
+      !field.validity.rangeUnderflow &&
+      !field.validity.rangeOverflow
+    );
+  }
+
+  _isCustomType(field) {
+    return field.dataset.fieldType !== undefined;
+  }
+
+  _unhideValidationMessages() {
+    this.element.querySelectorAll(".invalid-feedback").forEach((el) => {
+      el.classList.add("d-table-cell");
+    });
+  }
+}

data/lib/flexi_admin/javascript/controllers/index.js

@@ -0,0 +1,44 @@
+// This file is auto-generated by ./bin/rails stimulus:manifest:update
+// Run that command whenever you add a new controller or create them with
+// ./bin/rails generate stimulus controllerName
+
+import { application } from "./application";
+
+import AutocompleteController from "./autocomplete_controller";
+application.register("autocomplete", AutocompleteController);
+
+import BulkActionController from "./bulk_action_controller";
+application.register("bulk-action", BulkActionController);
+
+import ButtonSelectController from "./button_select_controller";
+application.register("button-select", ButtonSelectController);
+
+import DatalistController from "./datalist_controller";
+application.register("datalist", DatalistController);
+
+import FormController from "./form_controller";
+application.register("form", FormController);
+
+import FormValidationController from "./form_validation_controller";
+application.register("form-validation", FormValidationController);
+
+import PaginationController from "./pagination_controller";
+application.register("pagination", PaginationController);
+
+import SwitchViewController from "./switch_view_controller";
+application.register("switch-view", SwitchViewController);
+
+import ToastController from "./toast_controller";
+application.register("toast", ToastController);
+
+import TrixController from "./trix_controller";
+application.register("trix", TrixController);
+
+import UploadsController from "./uploads_controller";
+application.register("uploads", UploadsController);
+
+import SortingController from "./sorting_controller";
+application.register("sorting", SortingController);
+
+import FloatingTocController from "./floating_toc_controller";
+application.register("floating-toc", FloatingTocController);

data/lib/flexi_admin/javascript/controllers/pagination_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus";
+import { fetchTurboContent } from "../utils";
+
+// Connects to data-controller="pagination"
+export default class extends Controller {
+  connect() {}
+
+  paginate(event) {
+    const path = event.target.dataset.resourcePath;
+
+    fetchTurboContent(event, path);
+  }
+}

data/lib/flexi_admin/javascript/controllers/sorting_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus";
+import { fetchTurboContent } from "../utils";
+
+// Connects to data-controller="sorting"
+export default class extends Controller {
+  static values = {
+    sortPath: String,
+  };
+
+  // connect() {}
+
+  sort(event) {
+    event.preventDefault();
+
+    fetchTurboContent(event, this.sortPathValue);
+  }
+}

data/lib/flexi_admin/javascript/controllers/switch_view_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus";
+import { fetchTurboContent } from "../utils";
+
+// Connects to data-controller="switch-view"
+export default class extends Controller {
+  static values = {
+    resourcePath: String,
+  };
+
+  connect() {}
+
+  switch(event) {
+    fetchTurboContent(event, this.resourcePathValue);
+  }
+}

data/lib/flexi_admin/javascript/controllers/toast_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="toast"
+export default class extends Controller {
+  connect() {
+    //Set a delay to hide the toast message after 5 seconds (5000 milliseconds)
+    setTimeout(() => {
+      this.element.classList.add("slide-out");
+      this.element.addEventListener(
+        "transitionend",
+        () => {
+          this.element.style.display = "none";
+        },
+        { once: true }
+      );
+    }, 5000);
+  }
+}