mensa 0.2.5 → 0.3.0

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

@@ -0,0 +1,7 @@
+.mensa-empty-state
+  .mensa-empty-state__icon
+    i class=Mensa.config.icons[:search]
+  h3.mensa-empty-state__title = t("mensa.empty_state.title", model: model_name_plural)
+  p.mensa-empty-state__subtitle = t("mensa.empty_state.subtitle")
+  button.mensa-empty-state__button type="button" data-action="click->mensa-table#cancelFiltersAndSearch"
+    = t("mensa.empty_state.clear_button")

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Mensa
+  module EmptyState
+    class Component < ::Mensa::ApplicationComponent
+      attr_reader :table
+
+      def initialize(table:)
+        @table = table
+      end
+
+      # "orders", "users", etc. — used inside the translated heading.
+      def model_name_plural
+        table.model.model_name.human.pluralize.downcase
+      end
+    end
+  end
+end

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

@@ -0,0 +1,23 @@
+.mensa-filter-pill {
+    @apply inline-flex items-stretch text-xs;
+
+    &__chip {
+        @apply flex items-center gap-1 pl-2 pr-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 rounded-l-md cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors;
+    }
+
+    &__column {
+        @apply text-gray-600 dark:text-gray-300;
+    }
+
+    &__operator {
+        @apply rounded px-1 bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300;
+    }
+
+    &__value {
+        @apply rounded pl-1 bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-400 font-medium;
+    }
+
+    &__remove {
+        @apply inline-flex items-center justify-center px-1.5 text-gray-400 bg-gray-100 dark:bg-gray-700 rounded-r-md hover:text-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-200 cursor-pointer transition-colors;
+    }
+}

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

@@ -1,6 +1,9 @@
-.relative.mensa-filter-pill data-controller="mensa-filter-pill" data-mensa-filter-pill-column-name-value=filter.column.name data-mensa-filter-pill-value-value=filter.value data-mensa-filter-pill-operator-value=filter.operator
-  button.relative.w-full.cursor-default.rounded-md.bg-white.dark:bg-gray-800.py-1.5.pl-3.text-left.text-gray-900.dark:text-gray-400.shadow-sm.ring-1.ring-inset.ring-gray-300.dark:ring-gray-600.focus:outline-none.focus:ring-2.focus:ring-primary-600.sm:text-sm.sm:leading-6[type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"]
-    span.block.truncate.pr-8
-      = filter
-    span.pointer-events-none.absolute.inset-y-0.right-0.flex.items-center.pr-2
-      .fa.fal.fa-xmark
+.mensa-filter-pill data-controller="mensa-filter-pill" data-mensa-filter-pill-mensa-filter-pill-list-outlet="#mensa-filter-pill-list-#{filter.table.table_id}" data-mensa-filter-pill-column-name-value=filter.column.name data-mensa-filter-pill-value-value=(filter.operator_with_value? ? (filter.value.is_a?(Array) ? filter.value.to_json : filter.value) : nil ) data-mensa-filter-pill-operator-value=filter.operator data-mensa-filter-pill-operator-without-value-value=("true" unless filter.operator_with_value?) data-view-filter=("true" if view_filter?)
+  button.mensa-filter-pill__chip[type="button" data-action="click->mensa-filter-pill#edit"]
+    span.mensa-filter-pill__column = filter.column.human_name
+    span.mensa-filter-pill__operator = filter.operator_label
+    - formatted_value = filter.value.is_a?(Array) ? filter.value.join(", ") : filter.value
+    - if formatted_value.present? && filter.operator_with_value?
+      span.mensa-filter-pill__value = formatted_value
+  button.mensa-filter-pill__remove[type="button" title="Remove filter" data-action="click->mensa-filter-pill#remove"]
+    i.fa-solid.fa-xmark

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

@@ -10,6 +10,15 @@ module Mensa
       def initialize(filter:)
         @filter = filter
       end
+
+      def view_filter?
+        view = filter.table.table_view
+        return false unless view
+
+        view_filters = view.config&.dig(:filters) || view.config&.dig("filters") || {}
+        col = filter.column.name.to_s
+        view_filters.key?(col) || view_filters.key?(col.to_sym)
+      end
     end
   end
 end

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

@@ -1,12 +1,52 @@
-import ApplicationController from 'mensa/controllers/application_controller'
+import ApplicationController from "mensa/controllers/application_controller";
 
 export default class FilterPillComponentController extends ApplicationController {
-  static values = {
-    columnName: String,
-    operator: String,
-    value: String,
-  };
-
-  connect() {
-  }
-}
+    static outlets = ["mensa-filter-pill-list"];
+
+    static values = {
+        columnName: String,
+        operator: String,
+        value: String,
+    };
+
+    connect() {}
+
+    // Re-opens the value selector for this filter's column (reusing the
+    // add-filter popover), pre-selected to the current value. Choosing a new
+    // value re-requests the table via the add-filter flow.
+    edit(event) {
+        event.preventDefault();
+
+        if (!this.hasMensaFilterPillListOutlet) return;
+
+        let value = this.hasValueValue ? this.valueValue : null;
+        if (this.hasValueValue) {
+            try {
+                value = JSON.parse(value);
+            } catch {}
+        }
+
+        this.mensaFilterPillListOutlet.editFilter(
+            this.columnNameValue,
+            value,
+            this.operatorValue,
+            this.element,
+        );
+    }
+
+    // Removes this filter pill and re-requests the table with the remaining
+    // filters. The list controller reads the active filters straight from the
+    // DOM, so we drop our element first, then ask it to refresh.
+    remove(event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const list = this.hasMensaFilterPillListOutlet
+            ? this.mensaFilterPillListOutlet
+            : null;
+
+        this.element.remove();
+
+        if (list) list.refreshFilters();
+    }
+}

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

@@ -1,14 +1,63 @@
 .mensa-table {
-  &__filters {
-    @apply p-2 shadow-lg border-b dark:bg-gray-700 dark:border-gray-600;
+    &__search-bar {
+        @apply flex items-center gap-1.5 flex-1 min-w-0 h-full px-2;
 
-    a.filter {
-      @apply bg-gray-200 dark:bg-gray-500 hover:bg-gray-400 text-gray-800 rounded-md px-3 py-1.5 text-sm;
-    }
+        &__pills-area {
+            @apply flex flex-1 flex-wrap items-center gap-1 min-w-0;
+        }
+
+        &__input-wrapper {
+            @apply relative flex items-center flex-1 min-w-[4rem];
+        }
+
+        &__search-icon {
+            @apply absolute left-2 text-gray-400 pointer-events-none -ml-4;
+            font-size: 0.9rem;
+            /* icon is after input in DOM but floats left via absolute positioning */
+        }
+
+        &__input {
+            @apply w-full bg-transparent text-xs text-gray-700 dark:text-gray-200 placeholder:text-gray-400;
+            /* Override @tailwindcss/forms — direct CSS beats attribute selector specificity */
+            border: none !important;
+            outline: none !important;
+            box-shadow: none !important;
+            padding: 0 0.25rem 0 1.5rem;
 
-    a.filter.selected {
-      @apply bg-gray-100 text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:bg-gray-200;
+            &:focus {
+                border: none !important;
+                outline: none !important;
+                box-shadow: none !important;
+            }
+
+            /* Hide the icon that follows when input has content (placeholder not shown) */
+            &:not(:placeholder-shown) ~ .mensa-table__search-bar__search-icon {
+                display: none;
+            }
+        }
+
+        &__clear {
+            @apply flex-none p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 cursor-pointer;
+        }
     }
+}
+
+/* Hide placeholder when visible filter pills exist.
+   User-added pills (no data-view-filter) are always visible.
+   View-filter pills are only visible when the eye toggle is showing them. */
+.mensa-table__search-bar__pills-area:has(.mensa-filter-pill:not([data-view-filter="true"]))
+    .mensa-table__search-bar__input::placeholder,
+.mensa-table:not(.mensa-table--view-filters-hidden)
+    .mensa-table__search-bar__pills-area:has(.mensa-filter-pill[data-view-filter="true"])
+    .mensa-table__search-bar__input::placeholder {
+    opacity: 0;
+}
 
-  }
-}
+/* Hide search icon under the same conditions */
+.mensa-table__search-bar__pills-area:has(.mensa-filter-pill:not([data-view-filter="true"]))
+    .mensa-table__search-bar__search-icon,
+.mensa-table:not(.mensa-table--view-filters-hidden)
+    .mensa-table__search-bar__pills-area:has(.mensa-filter-pill[data-view-filter="true"])
+    .mensa-table__search-bar__search-icon {
+    display: none;
+}

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

@@ -1,8 +1,11 @@
-.mensa-table__filters.hidden id="mensa-filter-pill-list-#{table.table_id}" data-controller="mensa-filter-pill-list" data-mensa-table-target="filterList" 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]"
-  .block
-    nav
-      .flex.space-x-2.overflow-none.whitespace-nowrap.scroll-p-0[aria-label="Tabs"]
-        / existing filters first
-        = render Mensa::FilterPill::Component.with_collection(table.active_filters)
-
-        = render Mensa::AddFilter::Component.new(table: table)
+- has_filterable_columns = table.columns.any?(&:filter?)
+.mensa-table__search-bar id="mensa-filter-pill-list-#{table.table_id}" 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-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]"
+  .mensa-table__search-bar__pills-area
+    = render Mensa::FilterPill::Component.with_collection(table.active_filters)
+    - if has_filterable_columns
+      = render Mensa::AddFilter::Component.new(table: table)
+    .mensa-table__search-bar__input-wrapper
+      input.mensa-table__search-bar__input[type="text" name="search_query" autocomplete="off" placeholder=t(has_filterable_columns ? ".search" : ".search_only") data-mensa-filter-pill-list-target="searchInput" data-action="input->mensa-filter-pill-list#monitorSearch keydown.enter->mensa-filter-pill-list#search keydown.esc->mensa-filter-pill-list#resetSearch focus->mensa-filter-pill-list#searchFocused keydown.down->mensa-filter-pill-list#navigateDown keydown.up->mensa-filter-pill-list#navigateUp" value=params[:query]]
+      i.mensa-table__search-bar__search-icon class=Mensa.config.icons[:search]
+  button.mensa-table__search-bar__clear.hidden[type="button" data-mensa-filter-pill-list-target="resetSearchButton" data-action="mensa-filter-pill-list#resetSearch"]
+    i.fas.fa-xmark