mensa 0.2.4 → 0.2.6

data/README.md

@@ -4,6 +4,8 @@ Fast and awesome tables, with pagination, sorting, filtering and custom views.
 
 ![table](./docs/table.png)
 ![filters](./docs/filters.png)
+![columns](./docs/columns.png)
+![export](./docs/export.png)
 
 Features:
 
@@ -13,84 +15,105 @@ Features:
 - [x] tables without headers (and without most of the above)
 - [x] filtering of multiple columns
 - [X] Hide filter icon in case there are no filters
+- [X] column ordering
+- [X] editing of existing filters
+- [X] view selection and exports per view
+- [X] multiple selection of rows and batch processing
 
-Still to do:
-- [ ] column sorting
-- [ ] editing of existing filters
-- [ ] view selection and exports per view
-- [ ] multiple selection of rows
+Todo/Fixme:
+- [ ] exports can be mailed - daily/weekly/monthly/quarterly/bi-yearly/yearly (time configurable)
+- [ ] Search only works on table text columns
 
-Optionally:
+Nice to haves:
 
 - [ ] group by
 - [ ] sum/max/min
 - [ ] tables backed by arrays (of ActiveModel)
 
-Todo/Fixme:
-
-- [ ] Search only works on table text columns
-
 ## Usage
 
 Add tables in your app/tables folder, inheriting from ApplicationTable.
 This in turn should inherit from Mensa::Base.
 
+You can give columns an arbitrary name, it can match the database column, translations will be taken from `activerecord.attributes.<model>.<column>`:
+
+```yaml
+en: 
+  activerecord:
+    attributes:
+      user:
+        name: Full name
+```
+
 ```ruby
 class UserTable < ApplicationTable
-  definition do
-    model User # implicit from name
-
-    order name: :desc
-
-    column(:name) do
-      attribute :name # Optional, we can deduct this from the column name
-      sortable true
-      sanitize true
-      internal false
-      visible true
-      filter do
-        collection -> { }
-        scope -> { where(name: ...) }
-      end
+  model User # implicit from name
+
+  order name: :desc
+
+  column(:name) do
+    attribute :name # Optional, we can deduct this from the column name
+    sortable true
+    sanitize true
+    internal false
+    visible true
+    filter do
+      collection -> { }
+      scope -> { where(name: ...) }
     end
+    operators [:is, :isnt] # Optional, mensa tries to deduce this from the column information
+  end
 
-    column(:nr_of_roles) do
-      attribute "roles_count" # We use a database column here
-    end
+  column(:nr_of_roles) do
+    attribute "roles_count" # We use a database column here
+  end
 
-    # You can add one or more actions to a row
-    action :delete do
-      title "Delete row"
-      link { |user| user_path(user) }
-      icon "fa-regular fa-trash"
-      link_attributes data: {"turbo-confirm": "Are you sure you want to delete the user?", "turbo-method": :delete}
-      show ->(user) { true }
-    end
+  # You can add one or more actions to a row
+  action :delete do
+    title "Delete row"
+    link { |user| user_path(user) }
+    icon "fa-regular fa-trash"
+    link_attributes data: {"turbo-confirm": "Are you sure you want to delete the user?", "turbo-method": :delete}
+    show ->(user) { true }
+  end
 
-    link { |user| edit_user_path(user) }
-    supports_views true # This table supports custom views
-    show_header true
-    view_columns_sorting false # Disabled for now
-    view_condensed false # Default false
-    view_condensed_toggle true # Whether to show the toggle, default true
-
-    # Add system views
-    view :concept do
-      name "Concept"
-      filter :state do
-        operator :equals
-        value "concept"
-      end
+  link { |user| edit_user_path(user) }
+  supports_views true # This table supports custom views
+  show_header true
+  view_columns_ordering false # Disabled for now
+
+  # Add system views
+  # Mensa will always create a systemview (:default) with name 'All' showing all records. 
+  # If you want to rename it, for example because you don't show all records in your default scope, add it and give it a name like below.
+  view :default do
+    name "Default"
+    description "Some descriptive text"
+  end
+  view :concept do
+    name "Concept"
+    filter :state do
+      operator :is
+      value "concept"
+    end
+  end
+  
+  batch :confirm do
+    description "Confirm users"
+    process do |records|
+      ConfirmUsersJob.perform_later(records.to_a)
     end
   end
+
+  scope do
+    User.all
+  end
 end
 ```
 
-Currently mensa depends on satis, but that is something we might remove in a future version.
 You can show your tables on the page using the following:
 
 ```slim
-  = sts.table :users
+  = table :users
 ```
 
 #### Custom views
@@ -99,17 +122,16 @@ Custom views are views not defined by the developer (SystemViews) but by the end
 
 Initial support for custom-views is there, but pretty rudimentary:
 
-`Mensa::TableView.create(table: "users", name: "Guests", data: {filters: {role: {value: "guest"}}})`
+`Mensa::TableView.create(table: "users", name: "Guests", config: {filters: {role: {value: "guest"}}})`
 
 ### Fast
 
-Mensa selects only the data it needs, based on the columns. Sometimes it needs additional columns to do it's work, but you don't want them displayed.
-This can be done by adding `internal true` to the column definition, or shorter: use `internal` instead
+Mensa selects only the data it needs, based on the columns. Sometimes it needs additional columns to do it's work, but you don't want them displayed. This can be done by adding `internal true` to the column definition, or shorter: use `internal` instead. If your table scope joins an association, Mensa also auto-adds the foreign key column as internal when it is needed.
 
 ```ruby
-internal :born_on 
+internal :born_on
 column :age do
-  attribute "EXTRACT(YEAR FROM AGE(born_on))::int"
+  attribute "EXTRACT(YEAR FROM AGE(born_on))::int" # here born_on is used internally, so we ned to select is
 end
 ```
 
@@ -124,26 +146,33 @@ end
   export BUNDLE_RUBYGEMS__PKG__GITHUB__COM=ghp_xxxxxxw
   export RBENV_VERSION=$(cat .ruby-version)
   ```
+
 - Run `direnv allow`
+
+If you use devcontainers:
 - Open with Visual Studio Code (or with any other editor) and reopen in container.
 - Run `bin/overmind s`
 
+If you're not using devcontainers:
+- Run `bin/overmind s`
+
 ### Docs
 
 Using the following in your view will render Mensa::Table::Component
 ```slim
-  = sts.table :users
+  = table :users
 ```
 
 The Mensa::Table::Component will render:
 - Mensa::Search::Component
-- Mensa::FilterList::Component
+- Mensa::FilterPillList::Component
+  - Mensa::FilterPill::Component
+  - Mensa::AddFilter::Component
 - Mensa::Views::Component
   - renders a views list
   - Mensa::ControlBar::Component
     - search icon
     - filter icon
-    - condensed toggle
     - export icon
 - turbo-frame with the actual table you see  (which is rendered by Mensa::View::Component)
 
@@ -173,6 +202,12 @@ Always use `bundle` to install the gem. Next use the install generator to instal
 $  bin/rails g mensa:install
 ```
 
+### 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). 
+
 ## Contributing
 
 ```

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

@@ -1,11 +1,14 @@
-@import '../../../components/mensa/add_filter/component.css';
-@import '../../../components/mensa/cell/component.css';
-@import '../../../components/mensa/control_bar/component.css';
-@import '../../../components/mensa/filter_list/component.css';
-@import '../../../components/mensa/header/component.css';
-@import '../../../components/mensa/row_action/component.css';
-@import '../../../components/mensa/search/component.css';
-@import '../../../components/mensa/table/component.css';
-@import '../../../components/mensa/table_row/component.css';
-@import '../../../components/mensa/view/component.css';
-@import '../../../components/mensa/views/component.css';
+@import "../../../components/mensa/add_filter/component.css";
+@import "../../../components/mensa/column_customizer/component.css";
+@import "../../../components/mensa/cell/component.css";
+@import "../../../components/mensa/control_bar/component.css";
+@import "../../../components/mensa/empty_state/component.css";
+@import "../../../components/mensa/filter_pill/component.css";
+@import "../../../components/mensa/filter_pill_list/component.css";
+@import "../../../components/mensa/header/component.css";
+@import "../../../components/mensa/row_action/component.css";
+@import "../../../components/mensa/search/component.css";
+@import "../../../components/mensa/table/component.css";
+@import "../../../components/mensa/table_row/component.css";
+@import "../../../components/mensa/view/component.css";
+@import "../../../components/mensa/views/component.css";

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

@@ -1,13 +1,118 @@
-.sts-table {
+.mensa-table {
     &__add_filter {
-        @apply relative;
+        @apply relative inline-flex items-center;
+
+        &__trigger {
+            /* Hidden by default; shown via sibling selector when filter pills exist */
+            @apply hidden items-center justify-center w-5 h-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 cursor-pointer transition-colors text-sm;
+        }
+
+        &__enter-hint {
+            display: none;
+            @apply text-xs text-gray-400 bg-gray-100 dark:bg-gray-700 rounded px-1.5 py-0.5 whitespace-nowrap;
+        }
+
+        &__checkbox {
+            @apply h-4 w-4 flex-none rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 inline-block;
+
+            &--checked {
+                @apply bg-gray-900 border-gray-900 dark:bg-white dark:border-white;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+                background-position: center;
+            }
+        }
 
         &__popover_container {
-            @apply p-2 absolute z-10 mt-1 max-h-60 w-64 overflow-auto rounded-md bg-white dark:bg-gray-800 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm;
+            @apply p-4 fixed z-50 w-72 rounded-lg bg-white dark:bg-gray-800 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm;
+
+            &__heading {
+                @apply font-semibold text-gray-900 dark:text-gray-100 mb-2;
+            }
+
+            input&__input {
+                @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;
+            }
+
+            &__separator {
+                @apply border-t border-gray-200 dark:border-gray-600 my-3 -mx-4;
+            }
+
+            &__values {
+                @apply mb-2 max-h-[20rem] overflow-y-scroll;
+            }
+
+            &__value {
+                @apply flex items-center gap-2 py-1.5 px-2 rounded-md cursor-pointer text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 select-none;
+
+                &__check {
+                    @apply w-4 flex-none inline-flex items-center justify-center text-xs;
+                }
+            }
+
+            &__operators {
+                @apply mb-2;
+            }
+
+            &__operator {
+                @apply flex items-center gap-2 py-1.5 rounded-md cursor-pointer text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 select-none;
+
+                &__check {
+                    @apply w-4 flex-none inline-flex items-center justify-center text-xs;
+                }
+            }
 
             &__clear {
-                @apply text-gray-600 dark:text-gray-400 no-underline;
+                @apply block mt-3 text-gray-500 dark:text-gray-400 no-underline hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer;
             }
         }
     }
-}
+}
+
+/* Show enter hint on hover or keyboard highlight — covers column list and value popover */
+.mensa-table__add_filter li:hover .mensa-table__add_filter__enter-hint,
+.mensa-table__add_filter li.highlighted .mensa-table__add_filter__enter-hint {
+    display: inline-flex;
+}
+
+/* Keyboard highlight background — mirrors the hover style */
+.mensa-table__add_filter li.highlighted {
+    @apply bg-gray-100 dark:bg-gray-700;
+}
+
+/* Show + when user-added (non-view-filter) committed pills are present.
+   User pills are always visible, so no ancestor visibility check needed. */
+.mensa-table__search-bar__pills-area:has(
+        .mensa-filter-pill:not([data-view-filter="true"]):not(
+                .mensa-filter-pill--pending
+            )
+    ):not(:has(.mensa-filter-pill--pending))
+    .mensa-table__add_filter
+    .mensa-table__add_filter__trigger {
+    @apply inline-flex;
+}
+
+/* Show + when view-defined filter pills are present AND currently visible
+   (eye toggle on). Hidden view filters must not reveal the + button. */
+.mensa-table:not(.mensa-table--view-filters-hidden)
+    .mensa-table__search-bar__pills-area:has(
+        .mensa-filter-pill[data-view-filter="true"]
+    ):not(:has(.mensa-filter-pill--pending))
+    .mensa-table__add_filter
+    .mensa-table__add_filter__trigger {
+    @apply inline-flex;
+}
+
+/* While a filter is being configured, collapse the add-filter wrapper so it
+   doesn't create an extra flex gap between the pending pill and the search input.
+   The value popover inside is position:fixed so display:contents doesn't affect it. */
+.mensa-table__search-bar__pills-area:has(.mensa-filter-pill--pending)
+    .mensa-table__add_filter {
+    display: contents;
+}
+
+/* Pending pill while the value popover is open — rounded on both sides (no remove button) */
+.mensa-filter-pill--pending .mensa-filter-pill__chip {
+    @apply rounded-md opacity-70;
+}

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

@@ -1,16 +1,14 @@
-.sts-table__add_filter data-controller="mensa-add-filter" data-mensa-add-filter-mensa-table-outlet=".mensa-table#table-#{table.table_id}"
-  button.relative.w-full.cursor-default.rounded-md.bg-white.dark:bg-gray-800.py-1.5.pl-3.pr-6.text-left.text-gray-400.dark:text-gray-400.shadow-sm.border.border-dashed.focus:outline-none.focus:ring-2.focus:ring-primary-600.sm:text-sm.sm:leading-6 type="button" data-action="mensa-add-filter#toggle"
-    span.mr-2.block.truncate data-mensa-add-filter-target="description"
-      = t('.add_filter')
-    span.pointer-events-none.absolute.inset-y-0.right-0.flex.items-center.pr-2
-      div class=Mensa.config.icons[:filters_add_filter]
-
-  ul.hidden.absolute.z-10.mt-1.max-h-60.w-64.overflow-auto.rounded-md.bg-white.dark:bg-gray-800.py-1.text-base.shadow-lg.ring-1.ring-black.ring-opacity-5.focus:outline-none.sm:text-sm data-mensa-add-filter-target="filterList"
+.mensa-table__add_filter data-controller="mensa-add-filter" data-mensa-add-filter-mensa-filter-pill-list-outlet="#mensa-filter-pill-list-#{table.table_id}" data-mensa-add-filter-operator-labels-value=operator_labels.to_json
+  button.mensa-table__add_filter__trigger[type="button" title=t("mensa.add_filter.add", default: "Add filter") data-action="mensa-add-filter#openAllColumns"]
+    i.fa-solid.fa-circle-plus
+  ul.hidden.fixed.z-50.max-h-96.overflow-auto.rounded-lg.bg-white.dark:bg-gray-800.p-2.text-base.shadow-lg.ring-1.ring-black.ring-opacity-5.focus:outline-none.sm:text-sm data-mensa-add-filter-target="filterList"
     - table.columns.select(&:filter?).each do |column|
-      li#listbox-option-0.text-gray-900.dark:text-gray-400.hover:bg-gray-100.relative.cursor-default.select-none.py-2.pl-8.pr-4 data-mensa-add-filter-target="filterListItem" data-action="click->mensa-add-filter#selectColumn" data-filter-column-name=column.name
-        .label.font-normal.block.truncate
+      li.text-gray-900.dark:text-gray-300.hover:bg-gray-100.dark:hover:bg-gray-700.relative.cursor-default.select-none.rounded-md.py-2.px-3.flex.items-center.gap-2 data-mensa-add-filter-target="filterListItem" data-action="click->mensa-add-filter#selectColumn mouseenter->mensa-add-filter#columnItemHovered" data-filter-column-name=column.name
+        .label.font-normal.block.truncate.flex-1
           = column.human_name
-        .check.hidden.text-primary-600.absolute.inset-y-0.left-0.flex.items-center.pl-3
+        .check.hidden.text-primary-600.flex.items-center
           .fal.fa-check
+        span.mensa-table__add_filter__enter-hint
+          | ↵ Enter
 
-  div.hidden.sts-table__add_filter__popover_container data-mensa-add-filter-target="valuePopover" id="mensa-filter-value-#{SecureRandom.base36}"
+  div.hidden.mensa-table__add_filter__popover_container data-mensa-add-filter-target="valuePopover" id="mensa-filter-pill-value-#{SecureRandom.base36}"

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

@@ -2,12 +2,18 @@
 
 module Mensa
   module AddFilter
-    class Component < ::Mensa::ApplicationComponent
+    class Component < Mensa::ApplicationComponent
       attr_reader :table
 
       def initialize(table:)
         @table = table
       end
+
+      def operator_labels
+        Mensa::Filter.OPERATORS.to_h do |name, label, _requires_value|
+          [name, label]
+        end
+      end
     end
   end
-end
+end