mensa 0.6.10 → 0.6.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 14b28a5dcb74e6d3bfccaa9180f0ba2299b1c5bff0adc6e9bbd2a17ff2d91c19
-  data.tar.gz: 552b80421e290566218fe4e7e495785f7208ffa8f397fd88859b4e4ad20d6a21
+  metadata.gz: 72a11ca0b316e616b3705f54523e4fe6f6ae408f7e767f9a130db02d1afc088f
+  data.tar.gz: ae13275d6ead1adece9e27ea3f82143c3dc88bb1aa7f443ad8aaf8dca251eff1
 SHA512:
-  metadata.gz: 4848da1b5f33354d6dc79a8b6f76ed68e43744706ce34b808910186de399ae19d49e85409a561d11d74376c3a067f411697432664d2274c28a869e83136fdde9
-  data.tar.gz: 400e3c6400043dea964f3958a27704ae1b56dd7c475de8ba4f20a16b3b3b4682582e3229589d285b3f62377db326ff56b0ac17160544aa38369a11f6f4cc92ca
+  metadata.gz: 1a5f0d0e105762e8542af697c8bc1af5816ac2d628b9ba1e22bab262828ddf47ffbfe5e8f8a9d03ca78990caa8cf6b313748199eaa2f2eae0658cf6a2ad0c8f0
+  data.tar.gz: 8ba1ab12c0c48b03f4b425cc933614bbc5880fed150fbf70f2e32e39dd90307eca0a530c2cf43e81450708ba094fcab9dfe6dd81258b2cb77a72818f4f48fed9

data/.devcontainer/devcontainer-lock.json

@@ -0,0 +1,34 @@
+{
+  "features": {
+    "ghcr.io/devcontainers/features/common-utils:2": {
+      "version": "2.5.9",
+      "resolved": "ghcr.io/devcontainers/features/common-utils@sha256:cb0c4d3c276f157eed17935747e364178d75fee17f55c4e129966f64633deb3a",
+      "integrity": "sha256:cb0c4d3c276f157eed17935747e364178d75fee17f55c4e129966f64633deb3a"
+    },
+    "ghcr.io/devcontainers/features/docker-in-docker:2": {
+      "version": "2.17.0",
+      "resolved": "ghcr.io/devcontainers/features/docker-in-docker@sha256:25b9f05705ffba7dbe503230ac76081419306f8c8bc88e0ce78c4ecd99a0c78c",
+      "integrity": "sha256:25b9f05705ffba7dbe503230ac76081419306f8c8bc88e0ce78c4ecd99a0c78c"
+    },
+    "ghcr.io/devcontainers/features/github-cli:1": {
+      "version": "1.1.0",
+      "resolved": "ghcr.io/devcontainers/features/github-cli@sha256:d22f50b70ed75339b4eed1ba9ecde3a1791f90e88d37936517e3bace0bbad671",
+      "integrity": "sha256:d22f50b70ed75339b4eed1ba9ecde3a1791f90e88d37936517e3bace0bbad671"
+    },
+    "ghcr.io/devcontainers/features/node:2": {
+      "version": "2.1.0",
+      "resolved": "ghcr.io/devcontainers/features/node@sha256:586c9a6f7dd40bd3ba2cd41e7f2f88dcc31fbe5d1442afcbf07ffbc66b686857",
+      "integrity": "sha256:586c9a6f7dd40bd3ba2cd41e7f2f88dcc31fbe5d1442afcbf07ffbc66b686857"
+    },
+    "ghcr.io/rails/devcontainer/features/activestorage": {
+      "version": "1.1.1",
+      "resolved": "ghcr.io/rails/devcontainer/features/activestorage@sha256:7fa8fff898ac33076ebf65631d3c6c902dc9bad87de3e5dfa645f3e2d7a35c07",
+      "integrity": "sha256:7fa8fff898ac33076ebf65631d3c6c902dc9bad87de3e5dfa645f3e2d7a35c07"
+    },
+    "ghcr.io/rails/devcontainer/features/postgres-client": {
+      "version": "1.2.0",
+      "resolved": "ghcr.io/rails/devcontainer/features/postgres-client@sha256:7e6b118646d6e0d82a9ec06e81ad1b5406f7042f0279d35fff3a7a612be7a050",
+      "integrity": "sha256:7e6b118646d6e0d82a9ec06e81ad1b5406f7042f0279d35fff3a7a612be7a050"
+    }
+  }
+}

data/.devcontainer/devcontainer.json

@@ -1,37 +1,34 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
-// README at: https://github.com/devcontainers/templates/tree/main/src/ruby
+// README at: https://github.com/devcontainers/templates/tree/main/src/ruby-rails-postgres
 {
     "name": "mensa",
-    "dockerComposeFile": "compose.yaml",
+    "dockerComposeFile": "docker-compose.yml",
     "service": "app",
-    "workspaceFolder": "/workspaces/mensa",
-    // Features to add to the dev container. More info: https://containers.dev/features.
     "features": {
-        "ghcr.io/devcontainers/features/github-cli:1": {},
+        "ghcr.io/devcontainers/features/node:2": {},
+        "ghcr.io/devcontainers/features/common-utils:2": {
+            "configureZshAsDefaultShell": true,
+            "installOhMyZsh": false,
+            "installOhMyZshConfig": false
+        },
         "ghcr.io/rails/devcontainer/features/activestorage": {},
         "ghcr.io/rails/devcontainer/features/postgres-client": {
-            "version": "17"
+            "version": "18"
         },
-        "ghcr.io/devcontainers/features/node:1": {},
-        "ghcr.io/duduribeiro/devcontainer-features/tmux:1": {}
+        "ghcr.io/devcontainers/features/github-cli:1": {},
+        "ghcr.io/devcontainers/features/docker-in-docker:2": {
+            "moby": false
+        }
     },
     "mounts": [
-        "source=/run/host-services/ssh-auth.sock,target=/ssh-agent,type=bind",
+        "source=/run/host-services/ssh-auth.sock,target=/ssh-agent,type=bind,consistency=cached",
         "source=${localEnv:HOME}/.gitconfig,target=/home/vscode/.gitconfig,type=bind,consistency=cached"
     ],
-    "postCreateCommand": ".devcontainer/postCreate.sh",
     "postStartCommand": ".devcontainer/postStart.sh",
     "containerEnv": {
-        "CAPYBARA_SERVER_PORT": "45678",
-        "SELENIUM_URL": "http://host.docker.internal:4444/",
         "VISUAL": "vi",
-        "DB_HOST": "postgres",
         "SSH_AUTH_SOCK": "/ssh-agent"
     },
-    "build": {
-        "args": {
-            "RUBY_VERSION": "3.4.7"
-        },
-        "dockerfile": "./devcontainer/Dockerfile"
-    }
+    "customizations": {},
+    "workspaceFolder": "/workspaces/mensa"
 }

data/.devcontainer/docker-compose.yml

@@ -0,0 +1,35 @@
+name: mensa
+
+services:
+  app:
+    image: ghcr.io/rails/devcontainer/images/ruby:4.0.5
+
+    volumes:
+      - ../..:/workspaces
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: sleep infinity
+
+    depends_on:
+      - postgres
+      - redis
+
+  postgres:
+    image: postgres:18
+    restart: unless-stopped
+    volumes:
+      - postgres-data:/var/lib/postgresql/18/docker
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+
+  redis:
+    image: valkey/valkey:8
+    restart: unless-stopped
+
+  selenium:
+    image: selenium/standalone-firefox
+    restart: unless-stopped
+
+volumes:
+  postgres-data:

data/.devcontainer/postStart.sh

@@ -1,9 +1,13 @@
 #!/usr/bin/env bash
 set -e
 
-MISE=$(which mise)
-eval "$($MISE activate bash)"
+MISE="$HOME/.local/bin/mise"
+eval "$("$MISE" activate bash)"
+"$MISE" trust
+"$MISE" install
+sudo chmod 666 /ssh-agent
 
-npm install
-bundle install
-rake db:prepare
+"$MISE" exec -- npm install
+"$MISE" exec -- bundle install
+"$MISE" exec --cd test/dummy -- rake db:prepare
+"$MISE" exec --cd test/dummy -- rake tailwindcss:config

data/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+    "semi": false
+}

data/.shipkit.yml

@@ -0,0 +1,2 @@
+---
+previous_version: 0.6.11

data/.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "i18n-ally-next.localesPaths": [
+    "config/locales/**"
+  ],
+  "i18n-ally-next.displayLanguage": "nl",
+  "i18n-ally-next.annotationMaxLength": 60,
+  "i18n-ally-next.keystyle": "nested",
+}

data/.vscode/tasks.json

@@ -0,0 +1,47 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "server",
+      "type": "shell",
+      "command": "if [ -f tmp/pids/server.pid ]; then pid=$(cat tmp/pids/server.pid); kill \"$pid\" 2>/dev/null || true; rm -f tmp/pids/server.pid; fi; mise exec -- bin/rails server -p 3000 -b 0.0.0.0",
+      "presentation": {
+        "reveal": "always",
+        "panel": "new"
+      },
+      "isBackground": true,
+      "problemMatcher": [],
+      "icon": {
+        "id": "server"
+      }
+    },
+    {
+      "label": "css",
+      "type": "shell",
+      "command": "cd test/dummy && mise exec -- bin/rails tailwindcss:config && mise exec -- bin/rails tailwindcss:watch",
+      "presentation": {
+        "reveal": "always",
+        "panel": "new"
+      },
+      "isBackground": true,
+      "problemMatcher": [],
+      "icon": {
+        "id": "json"
+      }
+    },
+    {
+      "label": "start all",
+      "dependsOn": [
+        "server",
+        "css"
+      ],
+      "problemMatcher": [],
+      "presentation": {
+        "reveal": "always",
+        "panel": "new"
+      }
+    }
+  ]
+}

data/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.6.12
+
+- Tables built with `params` (`table :name, params: {...}`) now work in filters,
+  views, batch actions and exports. The params are sent to these endpoints as
+  `params[...]` query parameters and stored on `Mensa::Export#config`, so
+  `Mensa::ExportJob` (and recurring exports) rebuild the table with them.
+  Host apps can remove their FiltersController, ExportsController and
+  Table::Component patches for this.
+- The export list, badge and Turbo stream are scoped per table params, so
+  exports of e.g. two different queries on the same table are no longer mixed.
+- Browser state (filters, search, order, column order, hidden columns) is
+  stored per table params. Unknown column names in `column_order`,
+  `hidden_columns`, `order` and `filters` are ignored instead of raising.
+- The export completed callback is now `export_completed`, as documented in the
+  generated initializer. The old `export_complete` name still works. Unknown
+  callback names are logged as a warning.
+- `selected_scope` only selects `id` when the relation has an `id` column.
+
 ## 0.2.4
 
 - Renames the data column on table_views to config

data/Gemfile

@@ -22,3 +22,7 @@ group :development, :test do
   gem "ruby-lsp", require: false
   gem "ruby-lsp-rails", require: false
 end
+
+source "https://rubygems.pkg.github.com/entdec" do
+  gem "shipkit"
+end

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    mensa (0.6.9)
+    mensa (0.6.11)
       csv
       importmap-rails
       pagy (>= 43)
@@ -366,6 +366,11 @@ GEM
     yaml (0.4.0)
     zeitwerk (2.8.2)
 
+GEM
+  remote: https://rubygems.pkg.github.com/entdec/
+  specs:
+    shipkit (0.1.2)
+
 PLATFORMS
   aarch64-linux-gnu
   aarch64-linux-musl
@@ -391,8 +396,9 @@ DEPENDENCIES
   ruby-lsp
   ruby-lsp-rails
   selenium-webdriver (~> 4.17)
+  shipkit!
   sprockets-rails
   standard
 
 BUNDLED WITH
-   2.6.2
+   2.6.9

data/README.md

@@ -186,12 +186,44 @@ Next you can run the generator to generate a table:
 $ rails g mensa:table:generate <model_name>
 ```
 
+### Table params
+
+A table can be built with extra params, for example when its scope or columns
+depend on a record:
+
+```erb
+<%= table :query_results, params: {query_id: @query.id} %>
+```
+
+They are available as `params` inside the table (e.g. `params[:query_id]`) and
+are sent along whenever Mensa rebuilds the table: paging, filters, views, batch
+actions and exports (including recurring exports, which store them on the
+`Mensa::Export`). Exports and the state the browser remembers (filters, order,
+columns) are kept per table *and* params.
+
 ### Exports
 
 Exporting is built into the table's control bar. Clicking the export button opens
 a dialog that lists the user's previous downloads and lets them request a new
 export (scope and CSV format). 
 
+#### Export callbacks
+
+Configure callbacks in your Mensa initializer to act on exports, for example to
+email the user once their download is ready:
+
+```ruby
+Mensa.setup do |config|
+  config.callbacks = {
+    export_started: ->(export) {},
+    export_completed: ->(export) { ExportMailer.with(export: export).ready.deliver_later }
+  }
+end
+```
+
+`export_completed` was called `export_complete` before 0.6.12; that name still
+works. Unknown callback names are logged as a warning.
+
 #### Repeating exports
 
 The user can choose to export a table on a regular basis (daily, weekly, monthly, quarterly, bi-yearly, yearly).

data/app/components/mensa/column_customizer/component.html.erb

@@ -1,6 +1,7 @@
 <div class="relative"
      data-controller="mensa-column-customizer"
      data-mensa-column-customizer-table-name-value="<%= table.name %>"
+     data-mensa-column-customizer-storage-key-value="<%= table.storage_key %>"
      data-mensa-column-customizer-turbo-frame-id-value="<%= table.table_id %>"
      data-mensa-column-customizer-mensa-table-outlet="#table-<%= table.table_id %>">
   <button class="mensa-table__control_bar__button" type="button" data-action="click->mensa-column-customizer#toggle">

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

@@ -3,7 +3,7 @@ import ApplicationController from "mensa/controllers/application_controller";
 export default class ColumnCustomizerController extends ApplicationController {
     static outlets = ["mensa-table"];
     static targets = ["popover", "columnRow"];
-    static values = { turboFrameId: String, tableName: String };
+    static values = { turboFrameId: String, tableName: String, storageKey: String };
 
     connect() {
         super.connect();
@@ -340,12 +340,17 @@ export default class ColumnCustomizerController extends ApplicationController {
         if (view) url.searchParams.set("table_view_id", view);
     }
 
+    // Tables built with different params keep separate browser state.
+    get storageName() {
+        return this.storageKeyValue || this.tableNameValue;
+    }
+
     get _columnOrderKey() {
-        return `mensa:column_order:${this.tableNameValue}`;
+        return `mensa:column_order:${this.storageName}`;
     }
 
     get _hiddenColumnsKey() {
-        return `mensa:hidden_columns:${this.tableNameValue}`;
+        return `mensa:hidden_columns:${this.storageName}`;
     }
 
     _writeStorage(key, value) {

data/app/components/mensa/control_bar/component.html.erb

@@ -45,13 +45,13 @@
     <% if table.exportable? %>
       <button class="mensa-table__control_bar__button relative" type="button" data-action="mensa-table#export">
         <i data-mensa-table-target="exportIcon" class="<%= Mensa.config.icons[:control_bar_export] %>"></i>
-        <%= helpers.render partial: "mensa/exports/badge", locals: {table_name: table.name, user: table.current_user} %>
+        <%= helpers.render partial: "mensa/exports/badge", locals: {table_name: table.name, user: table.current_user, table_params: table.params} %>
       </button>
     <% end %>
   </div>
 
   <% if table.exportable? %>
-    <%= helpers.turbo_stream_from Mensa::Export.stream_name(table.name, table.current_user) %>
+    <%= helpers.turbo_stream_from Mensa::Export.stream_name(table.name, table.current_user, params: table.params) %>
     <%= helpers.render partial: "mensa/exports/dialog", locals: {table: table} %>
   <% end %>
 </div>

data/app/components/mensa/filter_pill_list/component.html.erb

@@ -4,6 +4,7 @@
      data-controller="mensa-filter-pill-list"
      data-mensa-table-target="filterList"
      data-mensa-filter-pill-list-table-name-value="<%= table.name %>"
+     data-mensa-filter-pill-list-storage-key-value="<%= table.storage_key %>"
      data-mensa-filter-pill-list-mensa-table-outlet=".mensa-table#table-<%= table.table_id %>"
      data-mensa-filter-pill-list-mensa-filter-pill-outlet=".mensa-filter-pill"
      data-mensa-filter-pill-list-mensa-add-filter-outlet="[data-controller=mensa-add-filter]">

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

@@ -8,6 +8,7 @@ export default class FilterPillListComponentController extends ApplicationContro
     static values = {
         supportsViews: Boolean,
         tableName: String,
+        storageKey: String,
     };
 
     connect() {
@@ -567,8 +568,8 @@ export default class FilterPillListComponentController extends ApplicationContro
         this.writeStorage(this.filtersStorageKey, null);
         this.writeStorage(this.searchStorageKey, null);
         this.writeStorage(this.orderStorageKey, null);
-        this.writeStorage(`mensa:column_order:${this.tableNameValue}`, null);
-        this.writeStorage(`mensa:hidden_columns:${this.tableNameValue}`, null);
+        this.writeStorage(`mensa:column_order:${this.storageName}`, null);
+        this.writeStorage(`mensa:hidden_columns:${this.storageName}`, null);
     }
 
     // Keep these for backward-compatibility with other controllers that look up
@@ -698,7 +699,7 @@ export default class FilterPillListComponentController extends ApplicationContro
             return (
                 JSON.parse(
                     this.readStorage(
-                        `mensa:column_order:${this.tableNameValue}`,
+                        `mensa:column_order:${this.storageName}`,
                     ),
                 ) || []
             );
@@ -712,7 +713,7 @@ export default class FilterPillListComponentController extends ApplicationContro
             return (
                 JSON.parse(
                     this.readStorage(
-                        `mensa:hidden_columns:${this.tableNameValue}`,
+                        `mensa:hidden_columns:${this.storageName}`,
                     ),
                 ) || []
             );
@@ -721,20 +722,25 @@ export default class FilterPillListComponentController extends ApplicationContro
         }
     }
 
+    // Tables built with different params keep separate browser state.
+    get storageName() {
+        return this.storageKeyValue || this.tableNameValue;
+    }
+
     get filtersStorageKey() {
-        return `mensa:filters:${this.tableNameValue}`;
+        return `mensa:filters:${this.storageName}`;
     }
     get searchStorageKey() {
-        return `mensa:search:${this.tableNameValue}`;
+        return `mensa:search:${this.storageName}`;
     }
     get viewStorageKey() {
-        return `mensa:view:${this.tableNameValue}`;
+        return `mensa:view:${this.storageName}`;
     }
     get pageStorageKey() {
-        return `mensa:page:${this.tableNameValue}`;
+        return `mensa:page:${this.storageName}`;
     }
     get orderStorageKey() {
-        return `mensa:order:${this.tableNameValue}`;
+        return `mensa:order:${this.storageName}`;
     }
 
     get ourUrl() {

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

@@ -2,7 +2,7 @@
   <% 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" do %>
       <span><%= column.human_name %></span>
-      <i class="<%= Mensa.config.icons["header_order_indicator#{column.sort_direction.to_s.present? ? "_#{column.sort_direction}" : ""}".to_sym] %>"></i>
+      <i class="<%= Mensa.config.icons[column.sort_indicator_icon_key.to_sym] %>"></i>
     <% end %>
   <% else %>
     <div class="container">

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

@@ -2,9 +2,9 @@
      id="table-<%= table.table_id %>"
      data-mensa-table-supports-views-value="<%= table.views? %>"
      data-mensa-table-table-url-value="<%= table.path(turbo_frame_id: table.table_id, user_params: 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-mensa-table-save-view-url-value="<%= table.path_with_params(helpers.mensa.table_views_path(table.name)) %>"
+     data-mensa-table-views-url-value="<%= table.path_with_params(helpers.mensa.table_views_path(table.name)) %>"
+     data-mensa-table-exports-url-value="<%= table.path_with_params(helpers.mensa.table_exports_path(table.name)) %>"
      data-controller="mensa-table"
      data-action="click@document->mensa-table#saveDropdownOutsideHandler"
      data-mensa-table-mensa-filter-pill-outlet="[data-controller='mensa-filter-pill']"

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

@@ -255,7 +255,7 @@ export default class TableComponentController extends ApplicationController {
         const state = this.currentViewState();
         this.hideSaveReset();
 
-        const response = await patch(`${this.saveViewUrlValue}/${viewId}`, {
+        const response = await patch(this.memberUrl(this.saveViewUrlValue, viewId), {
             body: JSON.stringify({
                 query: state.query,
                 filters: state.filters,
@@ -439,17 +439,21 @@ export default class TableComponentController extends ApplicationController {
     // --- View filter visibility persistence ---
 
     _viewFiltersStorageKey() {
-        return `mensa:view-filters-visible:${this._tableName()}`;
+        return `mensa:view-filters-visible:${this._storageName()}`;
     }
 
-    _tableName() {
+    _storageName() {
         if (this.hasMensaFilterPillListOutlet) {
-            return this.mensaFilterPillListOutlet.tableNameValue;
+            return this.mensaFilterPillListOutlet.storageName;
         }
         const el = this.element.querySelector(
             "[data-mensa-filter-pill-list-table-name-value]",
         );
-        return el?.dataset?.mensaFilterPillListTableNameValue || "";
+        return (
+            el?.dataset?.mensaFilterPillListStorageKeyValue ||
+            el?.dataset?.mensaFilterPillListTableNameValue ||
+            ""
+        );
     }
 
     _loadViewFiltersVisible() {

data/app/components/mensa/view/component.html.erb

@@ -2,7 +2,7 @@
   <div class="overflow-y-auto relative"
        data-mensa-table-target="scrollContainer"
        data-controller="mensa-selection"
-       data-mensa-selection-batch-url-value="<%= table.batch_actions? ? helpers.mensa.table_batch_actions_path(table.name) : "" %>">
+       data-mensa-selection-batch-url-value="<%= table.batch_actions? ? table.path_with_params(helpers.mensa.table_batch_actions_path(table.name)) : "" %>">
     <% if table.batch_actions? %>
       <div class="mensa-batch-bar hidden" data-mensa-selection-target="batchBar">
         <div class="mensa-batch-bar__content">

data/app/components/mensa/view/paging.css

@@ -1,44 +1,44 @@
 .mensa-table {
-  .paging {
-    @apply flex items-center justify-between border-t border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-3 sm:px-6 text-sm;
-
-    .pagy {
-      @apply isolate inline-flex -space-x-px text-gray-500 dark:text-gray-400;
-
-      a:not(.gap) {
-        @apply relative inline-flex items-center px-4 py-1.5 text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:z-20 no-underline;
-
-        &:first-child {
-          border-top-left-radius: 4px;
-          border-bottom-left-radius: 4px;
-        }
-
-        &:last-child {
-          border-top-right-radius: 4px;
-          border-bottom-right-radius: 4px;
-        }
-
-        &:hover {
-          @apply bg-gray-300 dark:bg-gray-600;
-        }
-
-        &:not([href]) {
-          /* disabled links */
-          @apply bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 hover:dark:bg-gray-800 text-gray-700 dark:text-gray-100 text-opacity-25 dark:text-opacity-50 cursor-default;
-        }
-
-        &.current {
-          @apply z-10 bg-primary-200 dark:bg-primary-800 hover:bg-primary-200 hover:dark:bg-primary-400 text-opacity-75 dark:text-opacity-75 border-none;
-        }
-      }
-
-      label {
-        @apply inline-block whitespace-nowrap bg-gray-200 dark:bg-gray-600 rounded-lg px-4 py-1.5;
-
-        input {
-          @apply bg-gray-100 dark:bg-gray-700 border-none rounded-md;
+    .paging {
+        @apply flex items-center justify-between border-t border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-3 sm:px-6 text-sm;
+
+        .pagy {
+            @apply isolate inline-flex -space-x-px text-gray-500 dark:text-gray-400;
+
+            a:not(.gap) {
+                @apply relative inline-flex items-center px-4 py-1.5 text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:z-20 no-underline;
+
+                &:first-child {
+                    border-top-left-radius: 4px;
+                    border-bottom-left-radius: 4px;
+                }
+
+                &:last-child {
+                    border-top-right-radius: 4px;
+                    border-bottom-right-radius: 4px;
+                }
+
+                &:hover {
+                    @apply bg-gray-300 dark:bg-gray-600;
+                }
+
+                &:not([href]) {
+                    /* disabled links */
+                    @apply bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 hover:dark:bg-gray-800 text-gray-700 dark:text-gray-100 text-opacity-25 dark:text-opacity-50 cursor-default;
+                }
+
+                &[aria-current="page"] {
+                    @apply z-10 bg-primary-200 dark:bg-primary-800 hover:bg-primary-200 hover:dark:bg-primary-800 text-gray-900 dark:text-white text-opacity-100 dark:text-opacity-100 border-none font-semibold;
+                }
+            }
+
+            label {
+                @apply inline-block whitespace-nowrap bg-gray-200 dark:bg-gray-600 rounded-lg px-4 py-1.5;
+
+                input {
+                    @apply bg-gray-100 dark:bg-gray-700 border-none rounded-md;
+                }
+            }
         }
-      }
     }
-  }
 }

data/app/components/mensa/views/component.html.erb

@@ -8,7 +8,7 @@
      data-controller="mensa-views"
      data-mensa-views-mensa-filter-pill-list-outlet="#mensa-filter-pill-list-<%= table.table_id %>"
      data-mensa-views-table-id-value="<%= table.table_id %>"
-     data-mensa-views-views-url-value="<%= helpers.mensa.table_views_path(table.name) %>">
+     data-mensa-views-views-url-value="<%= table.path_with_params(helpers.mensa.table_views_path(table.name)) %>">
   <button class="mensa-table__views__trigger" type="button" data-action="mensa-views#toggleDropdown" data-mensa-views-target="trigger" aria-haspopup="listbox">
     <span class="mensa-table__views__trigger-label" data-mensa-views-target="triggerLabel"><%= current_view_name %></span>
     <i class="<%= Mensa.config.icons[:views_trigger] %> mensa-table__views__trigger-icon"></i>