mensa 0.2.5 → 0.2.6

data/app/components/mensa/header/component.css

@@ -1,54 +1,52 @@
 .mensa-table {
-  thead {
-    tr {
-      @apply divide-x divide-gray-200 dark:divide-gray-600
-    }
+    thead {
+        tr {
+        }
+
+        th {
+            @apply top-0 z-10 py-2 px-2 align-bottom text-left text-sm font-medium text-gray-500 border-b border-gray-200 dark:border-gray-600 whitespace-nowrap;
+
+            &:first-child {
+                @apply pl-4;
+            }
+
+            &:last-child {
+                @apply pr-4;
+            }
 
-    th {
-      @apply top-0 z-10 py-3.5 pl-6 pr-6 px-6 align-bottom text-left text-xs font-medium text-gray-500 uppercase border-b border-gray-200 dark:border-gray-600;
+            .container {
+                @apply h-4 flex items-center;
+            }
 
-      .container {
-        @apply h-4 flex items-center;
-      }
+            .title {
+                @apply w-full;
+            }
 
-      .title {
-        @apply w-full pr-3;
-      }
+            /* For sortable columns the link takes over the cell's padding so
+               the entire th area — including what was padding — is clickable. */
+            &:has(.order) {
+                @apply p-0;
 
-      .actions {
-        @apply pr-3 flex items-center;
+                .order {
+                    @apply flex items-center gap-1 w-full py-2 px-2;
+                }
 
-        .action {
-          @apply cursor-pointer;
-          /*.fa-arrow-down-arrow-up {*/
-            @apply opacity-0;
-          /*}*/
+                &:first-child .order {
+                    @apply pl-4;
+                }
+
+                &:last-child .order {
+                    @apply pr-4;
+                }
+            }
         }
-      }
     }
 
-    th:hover {
-      .actions {
-        .action {
-          /*.fa-arrow-down-arrow-up {*/
-            @apply opacity-100;
-          /*}*/
+    &__column_edit {
+        thead {
+            th {
+                @apply cursor-grab;
+            }
         }
-      }
-    }
-  }
-  &__condensed {
-    thead {
-      th {
-        @apply whitespace-nowrap py-2 pl-4 pr-3 px-0;
-      }
-    }
-  }
-  &__column_edit {
-    thead {
-      th {
-        @apply cursor-grab;
-      }
     }
-  }
-}
+}

data/app/components/mensa/header/component.html.slim

@@ -1,8 +1,8 @@
 th
-  .container
-    .title = column.human_name
-    .actions
-      - if column.sortable?
-        .action
-          = link_to table.path(order: {column.name => column.next_sort_direction}, turbo_frame_id: table.table_id), "data-turbo-frame": "_self"
-            i class=Mensa.config.icons["order_indicator#{column.sort_direction.to_s.present? ? "_#{column.sort_direction.to_s}" : ""}".to_sym]
+  - if column.sortable?
+    = link_to table.path(order: {column.name => column.next_sort_direction}, turbo_frame_id: table.table_id), "data-turbo-frame": "_self", class: "order cursor-pointer"
+      span = column.human_name
+      i class=Mensa.config.icons["order_indicator#{column.sort_direction.to_s.present? ? "_#{column.sort_direction.to_s}" : ""}".to_sym]
+  - else
+    .container
+      .title = column.human_name

data/app/components/mensa/row_action/component.html.slim

@@ -1,6 +1,6 @@
 - if action.show.call(row.record)
-  a href=(action.link ? table.original_view_context.instance_exec(row.record, &action.link) : '') title=action.title *action.link_attributes
+  a.action href=(action.link ? table.original_view_context.instance_exec(row.record, &action.link) : '') title=action.title *action.link_attributes
     - if action.icon
       i.fa class=action.icon
     - else
-      = name
+      = name

data/app/components/mensa/search/component.css

@@ -1,13 +1,72 @@
 .mensa-table {
-  &__search {
-    @apply dark:bg-gray-800 dark:border-gray-800 border-b p-2;
+    &__search {
+        @apply dark:bg-gray-800 dark:border-gray-800 border-b p-2;
 
-    &__button {
-      @apply cursor-pointer w-6 h-full text-gray-400;
+        &__button {
+            @apply cursor-pointer w-6 h-full text-gray-400;
+        }
+
+        input&__input {
+            @apply pl-2 h-6 w-full border-0 bg-transparent pr-4 text-gray-600 dark:text-gray-400 placeholder:text-gray-400 focus:ring-0 text-sm;
+        }
     }
-    
-    input&__input {
-      @apply pl-2 h-6 w-full border-0 bg-transparent pr-4 text-gray-600 dark:text-gray-400 placeholder:text-gray-400 focus:ring-0 text-sm;
+
+    &__save-view-dialog {
+        @apply w-[26rem] max-w-[90vw] rounded-2xl border-0 p-0 bg-white dark:bg-gray-800 shadow-2xl ring-1 ring-black/5 dark:ring-white/10 text-gray-900 dark:text-gray-100;
+
+        &::backdrop {
+            @apply bg-gray-900/40;
+            backdrop-filter: blur(2px);
+        }
+
+        &__form {
+            @apply flex flex-col gap-5 p-6;
+        }
+
+        &__header {
+            @apply flex flex-col gap-1;
+        }
+
+        &__title {
+            @apply text-lg font-semibold leading-6 text-gray-900 dark:text-gray-100;
+        }
+
+        &__subtitle {
+            @apply text-sm text-gray-500 dark:text-gray-400;
+        }
+
+        &__field {
+            @apply flex flex-col gap-1.5;
+        }
+
+        &__label {
+            @apply text-sm font-medium text-gray-700 dark:text-gray-300;
+        }
+
+        input&__input,
+        textarea&__textarea {
+            @apply w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:outline-none;
+            border-radius: 0.5rem;
+        }
+
+        textarea&__textarea {
+            @apply resize-y min-h-[5rem];
+        }
+
+        &__actions {
+            @apply flex justify-end gap-2 pt-1;
+        }
+
+        &__button {
+            @apply rounded-lg px-3.5 py-2 text-sm font-semibold shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors;
+
+            &--secondary {
+                @apply bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 focus:ring-gray-400;
+            }
+
+            &--primary {
+                @apply bg-primary-600 text-white hover:bg-primary-500 focus:ring-primary-500;
+            }
+        }
     }
-  }
-}
+}

data/app/components/mensa/search/component.html.slim

@@ -1,17 +1,21 @@
-.mensa-table__search data-mensa-table-target="search" data-controller="mensa-search" data-mensa-search-target="search" class="#{table.supports_views? ? 'hidden' : ''}" data-mensa-search-mensa-table-outlet=".mensa-table#table-#{table.table_id}"
-  .flex
-    .flex-none.w-6.h-22.text-right.text-gray-500.dark:text-gray-400
-      i.cursor-pointer class=Mensa.config.icons[:search]
-    .flex-1
-      input.mensa-table__search__input type="text" name="search_query" placeholder=t("search", default: "Search") data-mensa-search-target="searchInput" data-action="mensa-search#monitorSearch keydown.enter->mensa-search#search keydown.esc->mensa-search#resetSearch" value=params[:query]
-    .flex.space-x-2.justify-right.pr-2
-      button.mensa-table__search__button.hidden.pr-6 data-mensa-search-target="resetSearchButton" data-action="mensa-search#resetSearch"
-        i.fas.fa-xmark
-      .view-buttons.space-x-2.hidden data-mensa-table-target="viewButtons"
-        button class="rounded bg-white px-2 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" data-action="mensa-table#cancelFiltersAndSearch"
+- if table.current_user
+  dialog.mensa-table__save-view-dialog data-mensa-table-target="saveViewDialog" data-action="click->mensa-table#saveViewDialogBackdrop"
+    form.mensa-table__save-view-dialog__form data-action="submit->mensa-table#confirmSaveView"
+      header.mensa-table__save-view-dialog__header
+        h2.mensa-table__save-view-dialog__title
+          = t('.save_view_title', default: 'Save view')
+        p.mensa-table__save-view-dialog__subtitle
+          = t('.save_view_subtitle', default: 'Save the current filters, ordering and search as a reusable view.')
+      label.mensa-table__save-view-dialog__field
+        span.mensa-table__save-view-dialog__label
+          = t('.view_name', default: 'Name')
+        input.mensa-table__save-view-dialog__input type="text" required=true placeholder=t('.view_name_placeholder', default: 'e.g. Active customers') data-mensa-table-target="saveViewName"
+      label.mensa-table__save-view-dialog__field
+        span.mensa-table__save-view-dialog__label
+          = t('.view_description', default: 'Description')
+        textarea.mensa-table__save-view-dialog__textarea rows="3" placeholder=t('.view_description_placeholder', default: 'Optional notes about this view') data-mensa-table-target="saveViewDescription"
+      .mensa-table__save-view-dialog__actions
+        button.mensa-table__save-view-dialog__button.mensa-table__save-view-dialog__button--secondary type="button" data-action="mensa-table#cancelSaveView"
           = t('.cancel')
-        button class="rounded bg-white px-2 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" data-action="mensa-table#saveFiltersAndSearch"
+        button.mensa-table__save-view-dialog__button.mensa-table__save-view-dialog__button--primary type="submit"
           = t('.save')
-    - unless table.supports_views?
-      = render Mensa::ControlBar::Component.new(table: table)
-

data/app/components/mensa/search/component_controller.js

@@ -1,64 +1,54 @@
-import ApplicationController from "mensa/controllers/application_controller"
-
-import { get } from "@rails/request.js"
+import ApplicationController from "mensa/controllers/application_controller";
 
 export default class SearchComponentController extends ApplicationController {
-  static targets = ["resetSearchButton", "searchInput"]
-  static outlets = ["mensa-table"]
-  connect() {
-    super.connect()
-    this.monitorSearch()
-  }
-
-  monitorSearch(event) {
-    event && event.preventDefault()
+    static targets = ["resetSearchButton", "searchInput"];
+    static outlets = ["mensa-filter-pill-list"];
 
-    if (this.searchInputTarget.value.length >= 1) {
-      this.resetSearchButtonTarget.classList.remove("hidden")
-      this.searchInputTarget.focus()
-    } else {
-      this.resetSearchButtonTarget.classList.add("hidden")
+    connect() {
+        super.connect();
+        this.monitorSearch();
     }
-  }
 
-  resetSearch(event) {
-    event.preventDefault()
+    monitorSearch(event) {
+        event && event.preventDefault();
 
-    this.searchInputTarget.value = ""
-    this.searchInputTarget.focus()
-    this.resetSearchButtonTarget.classList.add("hidden")
-
-    let turboFrame = this.element.closest("turbo-frame")
-    let url = this.mensaTableOutlet.ourUrl
-    url.searchParams.delete("query")
+        if (this.searchInputTarget.value.length >= 1) {
+            this.resetSearchButtonTarget.classList.remove("hidden");
+            this.searchInputTarget.focus();
+        } else {
+            this.resetSearchButtonTarget.classList.add("hidden");
+        }
+    }
 
-    get(url, {
-      responseKind: "turbo-stream",
-    })
-  }
+    resetSearch(event) {
+        event.preventDefault();
 
-  search(event) {
-    event.preventDefault()
+        this.searchInputTarget.value = "";
+        this.searchInputTarget.focus();
+        this.resetSearchButtonTarget.classList.add("hidden");
 
-    if (this.query.length < 3) {
-      return
+        // Re-request the table without a query (keeping any active filters) and
+        // forget the persisted query. The filter pill list owns persistence and the
+        // request so filters and search stay composed in a single call.
+        if (this.hasMensaFilterPillListOutlet) {
+            this.mensaFilterPillListOutlet.setQuery("");
+        }
     }
 
-    // FIXME: This doesn't prevent searching twice on enter, the turbo-frame URL doesn't change
-    let url = this.mensaTableOutlet.ourUrl
-    if (url.searchParams.get("query") === this.query) {
-      return
-    }
+    search(event) {
+        event.preventDefault();
 
-    url.searchParams.set("page", 1)
-    url.searchParams.set("query", this.query)
+        if (this.query.length < 3) {
+            return;
+        }
 
-    get(url, {
-      responseKind: "turbo-stream",
-    })
-  }
+        // Persist the query and re-request the table, keeping any active filters.
+        if (this.hasMensaFilterPillListOutlet) {
+            this.mensaFilterPillListOutlet.setQuery(this.query);
+        }
+    }
 
-  get query() {
-    return this.searchInputTarget.value
-  }
+    get query() {
+        return this.searchInputTarget.value;
+    }
 }

data/app/components/mensa/selection/component_controller.js

@@ -0,0 +1,147 @@
+import ApplicationController from "mensa/controllers/application_controller";
+
+// Manages row-level checkbox selection and the batch-action bar.
+//
+// The controller lives on the .overflow-y-auto.relative wrapper element.
+//
+// The batch bar is a div.mensa-batch-bar that is a sibling of the <table>,
+// absolutely positioned at top:0/left:0 inside that wrapper. Its width is
+// set to the <table>'s offsetWidth so it covers the full table — including
+// any overflow that causes horizontal scrolling.
+export default class SelectionController extends ApplicationController {
+    static targets = [
+        "headerCheckbox", // select-all checkbox in the header <th>
+        "rowCheckbox", // per-row checkboxes in <tbody>
+        "batchBar", // absolutely-positioned div overlaying the header row
+        "selectedCount", // span inside the batch bar showing "N selected"
+        "batchAllCheckbox", // checkbox inside the batch bar (clicking deselects all)
+    ];
+
+    static values = {
+        batchUrl: String, // POST endpoint for batch actions
+    };
+
+    connect() {
+        super.connect();
+        this.resizeHandler = () => this.syncBatchBarWidth();
+        window.addEventListener("resize", this.resizeHandler);
+    }
+
+    disconnect() {
+        window.removeEventListener("resize", this.resizeHandler);
+    }
+
+    // Sets the batch bar's width to match the <table> element so it covers
+    // the full scrollable width, not just the visible viewport portion.
+    syncBatchBarWidth() {
+        if (!this.hasBatchBarTarget) return;
+        const table = this.element.querySelector("table");
+        if (!table) return;
+        this.batchBarTarget.style.width = `${table.offsetWidth}px`;
+    }
+
+    // Called when the select-all checkbox in the header changes.
+    toggleAll(event) {
+        const checked = event.target.checked;
+        this.rowCheckboxTargets.forEach((cb) => {
+            cb.checked = checked;
+        });
+        this.updateSelectionState();
+    }
+
+    // Called when an individual row checkbox changes.
+    toggleRow() {
+        this.updateSelectionState();
+    }
+
+    // Called when the batch bar's checkbox is clicked — always deselects all.
+    deselectAll() {
+        this.rowCheckboxTargets.forEach((cb) => (cb.checked = false));
+        this.updateSelectionState();
+    }
+
+    // Stops click events from bubbling up to the row's satis-link handler,
+    // preventing accidental navigation when the user clicks a checkbox cell.
+    stopPropagation(event) {
+        event.stopPropagation();
+    }
+
+    // Builds and submits a hidden form for the chosen batch action.
+    // Reads selected record IDs from the checked row checkboxes.
+    executeBatch(event) {
+        event.preventDefault();
+
+        const actionName = event.params.batchAction;
+        const selectedIds = this.rowCheckboxTargets
+            .filter((cb) => cb.checked)
+            .map((cb) => cb.value);
+
+        if (selectedIds.length === 0) return;
+        if (!this.batchUrlValue) return;
+
+        const form = document.createElement("form");
+        form.method = "post";
+        form.action = this.batchUrlValue;
+
+        // Rails CSRF token
+        const csrfMeta = document.querySelector('meta[name="csrf-token"]');
+        if (csrfMeta) {
+            const csrfInput = document.createElement("input");
+            csrfInput.type = "hidden";
+            csrfInput.name = "authenticity_token";
+            csrfInput.value = csrfMeta.getAttribute("content");
+            form.appendChild(csrfInput);
+        }
+
+        // Batch action name
+        const actionInput = document.createElement("input");
+        actionInput.type = "hidden";
+        actionInput.name = "batch_action_name";
+        actionInput.value = actionName;
+        form.appendChild(actionInput);
+
+        // One hidden input per selected record ID
+        selectedIds.forEach((id) => {
+            const input = document.createElement("input");
+            input.type = "hidden";
+            input.name = "record_ids[]";
+            input.value = id;
+            form.appendChild(input);
+        });
+
+        document.body.appendChild(form);
+        form.submit();
+    }
+
+    // Syncs the header checkbox state and shows/hides the batch bar overlay.
+    updateSelectionState() {
+        const all = this.rowCheckboxTargets;
+        const checked = all.filter((cb) => cb.checked);
+        const hasSelection = checked.length > 0;
+        const allSelected = all.length > 0 && checked.length === all.length;
+        const someSelected = checked.length > 0 && checked.length < all.length;
+
+        // Keep the header select-all checkbox in sync
+        if (this.hasHeaderCheckboxTarget) {
+            this.headerCheckboxTarget.checked = allSelected;
+            this.headerCheckboxTarget.indeterminate = someSelected;
+        }
+
+        // Mirror the state on the batch bar's deselect-all checkbox
+        if (this.hasBatchAllCheckboxTarget) {
+            this.batchAllCheckboxTarget.checked = allSelected;
+            this.batchAllCheckboxTarget.indeterminate = someSelected;
+        }
+
+        // Show / hide the batch bar overlay
+        if (this.hasBatchBarTarget) {
+            if (hasSelection) this.syncBatchBarWidth();
+            this.batchBarTarget.classList.toggle("hidden", !hasSelection);
+        }
+
+        // Update "N selected" label
+        if (this.hasSelectedCountTarget) {
+            this.selectedCountTarget.textContent = `${checked.length} selected`;
+        }
+    }
+}

data/app/components/mensa/table/component.css

@@ -0,0 +1,28 @@
+/* Hide view-origin filter pills when the eye toggle is in hidden state */
+.mensa-table--view-filters-hidden [data-view-filter="true"] {
+    display: none;
+}
+
+/* Hide the + trigger when view filters are collapsed AND no user-added pills exist.
+   Using :not(:has(...)) keeps it visible whenever the user has their own filters.
+   The controller and its column-list ul stay in the DOM so the search-input focus
+   handler can still open the column list. */
+.mensa-table--view-filters-hidden
+    .mensa-table__search-bar__pills-area:not(:has(.mensa-filter-pill:not([data-view-filter="true"])))
+    .mensa-table__add_filter__trigger {
+    display: none;
+}
+
+.mensa-table {
+    select {
+        @apply w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 py-2 pl-3 pr-10 text-gray-900 dark:text-gray-100 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 sm:text-sm;
+    }
+
+    &__toolbar {
+        @apply flex items-center gap-2 px-2 py-1 border-b border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800;
+    }
+
+    &__search-container {
+        @apply flex flex-1 min-w-0 items-stretch h-8 rounded-md bg-white dark:bg-gray-800;
+    }
+}

data/app/components/mensa/table/component.html.slim

@@ -1,7 +1,10 @@
-.mensa-table id="table-#{table.table_id}" data-mensa-table-view-condensed-value="#{table.view_condensed?}" data-mensa-table-supports-views-value="#{table.supports_views?}" data-controller="mensa-table" data-mensa-table-mensa-filter-pill-outlet="[data-controller='mensa-filter-pill']"
+.mensa-table id="table-#{table.table_id}" data-mensa-table-supports-views-value="#{table.supports_views?}" data-mensa-table-table-url-value=helpers.mensa.table_url(table.name, {turbo_frame_id: table.table_id}.merge(params)) data-mensa-table-save-view-url-value=helpers.mensa.table_views_path(table.name) data-mensa-table-views-url-value=helpers.mensa.table_views_path(table.name) data-mensa-table-exports-url-value=helpers.mensa.table_exports_path(table.name) data-controller="mensa-table" data-mensa-table-mensa-filter-pill-outlet="[data-controller='mensa-filter-pill']" data-mensa-table-mensa-filter-pill-list-outlet="#mensa-filter-pill-list-#{table.table_id}" data-mensa-table-mensa-column-customizer-outlet="[data-controller='mensa-column-customizer']"
+  .mensa-table__toolbar
+    .mensa-table__search-container
+      - if table.supports_views? && table.show_header?
+        = render Mensa::Views::Component.new(table: table)
+      div.flex.flex-1.min-w-0 id="filters-#{table.table_id}"
+        = render Mensa::FilterPillList::Component.new(table: table)
+    = render Mensa::ControlBar::Component.new(table: table)
   = render Mensa::Search::Component.new(table: table)
-  div id="filters-#{table.table_id}"
-    = render Mensa::FilterPillList::Component.new(table: table)
-  - if table.supports_views? && table.show_header?
-    = render Mensa::Views::Component.new(table: table)
-  turbo-frame id=table.table_id src=helpers.mensa.table_url(table.name, {turbo_frame_id: table.table_id}.merge(params)) target="_top" loading="lazy" data-mensa-table-target="turboFrame" data-turbo-permanent=""
+  turbo-frame id=table.table_id target="_top" data-mensa-table-target="turboFrame" data-turbo-permanent=""

data/app/components/mensa/table/component.rb

@@ -10,6 +10,7 @@ module Mensa
 
       def initialize(table_name, config = {}, **options)
         @table = Mensa.for_name(table_name, config)
+        @table.original_view_context = options[:original_view_context]
         @table.component = self
         @params = options[:params] || {}
       end