mensa 0.1.0 → 0.1.3

data/app/components/mensa/application_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Mensa
+  class ApplicationComponent < ViewComponent::Base
+    include ViewComponent::Slotable
+    include ActionView::Helpers::TranslationHelper
+    include Satis::Concerns::ContextualTranslations
+    include Mensa::ApplicationHelper
+
+    attr_accessor :original_view_context
+  end
+end

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

@@ -0,0 +1 @@
+td = cell.render(:html)

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Mensa
+  class Cell
+    class Component < ::Mensa::ApplicationComponent
+      with_collection_parameter :column
+
+      attr_reader :cell
+
+      def initialize(row:, column:)
+        @cell = ::Mensa::Cell.new(row: row, column: column)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+.mensa-table {
+  &__control_bar {
+    @apply pl-2 pt-1.5 pr-2;
+  }
+}

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

@@ -0,0 +1,15 @@
+.mensa-table__control_bar data-mensa-table-target="controlBar"
+  .flex.space-x-2.justify-right
+    button.flex.justify-right.cursor-pointer.py-1.5.h-full.text-gray-400 class="#{table.supports_views? ? 'w-8' : 'w-4'}" data-action="mensa-table#openFiltersAndSearch"
+      - if table.supports_views?
+        i class=Mensa.config.icons[:control_bar_search]
+      i class=Mensa.config.icons[:control_bar_filter]
+    /- if view_columns_sorting?
+      button.cursor-pointer.w-6.h-full.text-gray-400
+        i class=Mensa.config.icons[:control_bar_edit]
+    - if view_condensed_toggle?
+      button.cursor-pointer.w-6.h-full.text-gray-400 data-action="mensa-table#condenseExpand"
+        i data-mensa-table-target="condenseExpandIcon" class=Mensa.config.icons[:control_bar_compress]
+    - if table.config[:render]&.key?(:xlsx)
+      button.cursor-pointer.w-6.h-full.text-gray-400 data-action="mensa-table#export"
+        i data-mensa-table-target="exportIcon" class=Mensa.config.icons[:control_bar_export]

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Mensa
+  module ControlBar
+    class Component < ::Mensa::ApplicationComponent
+      attr_reader :table
+
+      def initialize(table:)
+        @table = table
+      end
+
+      def view_columns_sorting?
+        table.view_columns_sorting?
+      end
+
+      def view_condensed_toggle?
+        table.view_condensed_toggle?
+      end
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+.mensa-table {
+  &__filters {
+    @apply p-2 shadow-lg border-b dark:bg-gray-700 dark:border-gray-600;
+
+    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;
+    }
+
+    a.filter.selected {
+      @apply bg-gray-100 text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:bg-gray-200;
+    }
+
+  }
+}

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

@@ -0,0 +1,14 @@
+.mensa-table__filters.hidden data-mensa-table-target="filters"
+  .block
+    nav
+      .flex.space-x-2.overflow-none.whitespace-nowrap.scroll-p-0[aria-label="Tabs"]
+        / existing filters first
+        - table.active_filters.each do |filter|
+          .relative
+            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-6
+                = filter
+              span.pointer-events-none.absolute.inset-y-0.right-0.flex.items-center.pr-2
+                .fal.fa-angle-down
+
+        = render Mensa::AddFilter::Component.new(table: table)

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Mensa
+  module Filters
+    class Component < ::Mensa::ApplicationComponent
+      attr_reader :table
+
+      def initialize(table:)
+        @table = table
+      end
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+import ApplicationController from 'mensa/controllers/application_controller'
+
+export default class FiltersComponentController extends ApplicationController {
+  static targets = [
+    'list',
+  ]
+  static values = {
+    supportsViews: Boolean
+  }
+
+  connect () {
+    super.connect()
+  }
+}

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

@@ -0,0 +1,54 @@
+.mensa-table {
+  thead {
+    tr {
+      @apply divide-x divide-gray-200 dark:divide-gray-600
+    }
+
+    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;
+      }
+
+      .title {
+        @apply w-full pr-3;
+      }
+
+      .actions {
+        @apply pr-3 flex items-center;
+
+        .action {
+          @apply cursor-pointer;
+          /*.fa-arrow-down-arrow-up {*/
+            @apply opacity-0;
+          /*}*/
+        }
+      }
+    }
+
+    th:hover {
+      .actions {
+        .action {
+          /*.fa-arrow-down-arrow-up {*/
+            @apply opacity-100;
+          /*}*/
+        }
+      }
+    }
+  }
+  &__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

@@ -0,0 +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]

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Mensa
+  module Header
+    class Component < ::Mensa::ApplicationComponent
+      with_collection_parameter :column
+
+      include TablesHelper
+
+      attr_reader :table
+      attr_reader :column
+
+      def initialize(table:, column:)
+        @table = table
+        @column = column
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Mensa
+  module RowAction
+    class Component < ::Mensa::ApplicationComponent
+      with_collection_parameter :action
+
+      attr_reader :table
+      attr_reader :row
+      attr_reader :action
+
+      def initialize(table:, row:, action:)
+        @table = table
+        @row = row
+        @action = action
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+.mensa-table {
+  &__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;
+    }
+    
+    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;
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+.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"
+          = 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"
+          = t('.save')
+    - unless table.supports_views?
+      = render Mensa::ControlBar::Component.new(table: table)
+

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Mensa
+  module Search
+    class Component < ::Mensa::ApplicationComponent
+      attr_reader :table
+
+      def initialize(table:)
+        @table = table
+      end
+    end
+  end
+end

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

@@ -0,0 +1,62 @@
+import ApplicationController from 'mensa/controllers/application_controller'
+
+import { get } from '@rails/request.js'
+
+export default class SearchComponentController extends ApplicationController {
+  static targets = [
+    'resetSearchButton',
+    'searchInput'
+  ]
+  static outlets = [
+    "mensa-table"
+  ]
+  connect () {
+    super.connect()
+    this.monitorSearch()
+  }
+
+  monitorSearch (event) {
+    if (this.searchInputTarget.value.length >= 1) {
+      this.resetSearchButtonTarget.classList.remove('hidden')
+      this.searchInputTarget.focus();
+    } else {
+      this.resetSearchButtonTarget.classList.add('hidden')
+    }
+  }
+
+  resetSearch (event) {
+    this.searchInputTarget.value = ''
+    this.searchInputTarget.focus()
+    this.resetSearchButtonTarget.classList.add('hidden')
+
+    let turboFrame = this.element.closest('turbo-frame')
+    let url = this.ourUrl
+    url.searchParams.delete('query')
+
+    get(url, {
+      responseKind: 'turbo-stream'
+    })
+  }
+
+  search (event) {
+    if (this.query.length < 3) {
+      return
+    }
+
+    // FIXME: This doesn't prevent searching twice on enter, the turbo-frame URL doesn't change
+    let url = this.ourUrl
+    if(url.searchParams.get('query') === this.query) {
+      return
+    }
+
+    url.searchParams.append('query', this.query)
+
+    get(url, {
+      responseKind: 'turbo-stream'
+    })
+  }
+
+  get query() {
+    return this.searchInputTarget.value
+  }
+}

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

@@ -0,0 +1,7 @@
+.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"
+  = render Mensa::Search::Component.new(table: table)
+  div id="filters-#{table.table_id}"
+    = render Mensa::Filters::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_path(table.name, turbo_frame_id: table.table_id) target="_top" loading="lazy" data-mensa-table-target="turboFrame"

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Mensa
+  module Table
+    class Component < ::Mensa::ApplicationComponent
+      include TablesHelper
+
+      attr_reader :table
+
+      def initialize(table_name, config = {}, **options)
+        @table = Mensa.for_name(table_name, config)
+        @table.component = self
+      end
+    end
+  end
+end

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

@@ -0,0 +1,72 @@
+import ApplicationController from 'mensa/controllers/application_controller'
+import { get } from '@rails/request.js'
+
+export default class TableComponentController extends ApplicationController {
+  static targets = [
+    'controlBar',           // Bar with buttons
+    'condenseExpandIcon',   // Icon
+    'filters',              // Tabs or list of filters
+    'views',                // Tabs or list of views
+    'viewButtons',          // Cancel and save buttons for views
+    'search',               // Search bar
+    'view',                 // View contains table element
+    'turboFrame'            // The turbo-frame
+  ]
+  static values = {
+    supportsViews: Boolean
+  }
+
+  connect () {
+    super.connect()
+  }
+
+  openFiltersAndSearch(event) {
+    if(this.supportsViewsValue) {
+      this.viewButtonsTarget.classList.remove('hidden')
+      this.searchTarget.classList.remove('hidden')
+      this.viewsTarget.classList.add('hidden')
+      this.filtersTarget.classList.remove('hidden')
+    } else {
+      this.controlBarTarget.classList.add('hidden')
+      this.viewButtonsTarget.classList.remove('hidden')
+      this.filtersTarget.classList.remove('hidden')
+    }
+  }
+
+  cancelFiltersAndSearch(event) {
+    if(this.supportsViewsValue) {
+      this.searchTarget.classList.add('hidden')
+      this.viewButtonsTarget.classList.add('hidden')
+      this.filtersTarget.classList.add('hidden')
+      this.viewsTarget.classList.remove('hidden')
+    } else {
+      this.controlBarTarget.classList.remove('hidden')
+      this.viewButtonsTarget.classList.add('hidden')
+      this.filtersTarget.classList.add('hidden')
+    }
+  }
+
+  saveFiltersAndSearch(event) {
+
+  }
+
+  condenseExpand (event) {
+    if (this.viewTarget.classList.contains('mensa-table__condensed')) {
+      this.viewTarget.classList.remove('mensa-table__condensed')
+      this.condenseExpandIconTarget.classList.add('fa-compress')
+      this.condenseExpandIconTarget.classList.remove('fa-expand')
+    } else {
+      this.viewTarget.classList.add('mensa-table__condensed')
+      this.condenseExpandIconTarget.classList.remove('fa-compress')
+      this.condenseExpandIconTarget.classList.add('fa-expand')
+    }
+  }
+
+  export(event) {
+    let url = this.ourUrl
+    url.pathname += ".xlsx"
+    get(url, {
+    }).then(() => {
+    })
+  }
+}

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

@@ -0,0 +1,6 @@
+tr *row.link_attributes
+  = render(Mensa::Cell::Component.with_collection(table.display_columns, row: row))
+  - if table.actions?
+    td.flex.space-x-2
+      = render(Mensa::RowAction::Component.with_collection(table.actions, row: row, table: table))
+      |  

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Mensa
+  module TableRow
+    class Component < ::Mensa::ApplicationComponent
+      with_collection_parameter :row
+
+      include TablesHelper
+
+      attr_reader :table
+      attr_reader :row
+
+      def initialize(table:, row:)
+        @table = table
+        @row = row
+      end
+    end
+  end
+end

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

@@ -0,0 +1,82 @@
+.mensa-table {
+  @apply bg-white dark:bg-gray-500 dark:border-gray-700;
+
+  .badge {
+    @apply bg-primary-100 text-primary-600 hidden ml-3 rounded-full text-xs font-medium md:inline-block py-0.5 px-2.5;
+  }
+  table {
+    @apply min-w-full divide-y divide-gray-50 dark:divide-gray-800 border-0;
+
+    thead {
+      @apply bg-gray-100 top-0 dark:bg-gray-700 dark:font-medium dark:text-gray-400 dark:lowercase;
+
+      /* tr and th moved to header */
+    }
+    tbody {
+
+      @apply divide-y divide-gray-200 dark:divide-gray-600;
+
+      tr {
+        @apply cursor-pointer bg-white dark:bg-gray-800 divide-x divide-gray-400 divide-opacity-25 hover:bg-gray-100 dark:hover:bg-gray-700;
+
+        &:nth-child(even) {
+          @apply bg-gray-50 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700;
+        }
+      }
+
+      td {
+        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400;
+      }
+    }
+  }
+
+  .paging {
+    @apply flex items-center justify-between border-t border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-3 sm:px-6;
+
+    .pagy-info {
+      @apply text-sm text-gray-700;
+      b {
+        @apply font-medium;
+      }
+    }
+
+    .pagy-nav.pagination {
+      @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
+    }
+
+    .page.next a {
+      @apply relative no-underline inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
+    }
+
+    .page.next a.disabled {
+      @apply relative no-underline inline-flex items-center rounded-r-md border border-gray-300 bg-slate-100 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
+    }
+
+    .page.prev a {
+      @apply relative no-underline inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
+    }
+
+    .page.prev a.disabled {
+      @apply relative no-underline inline-flex items-center rounded-l-md border border-gray-300 bg-slate-100 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
+    }
+
+    .page a, .page.gap {
+      @apply no-underline bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20;
+    }
+
+    .page.active a {
+      @apply no-underline z-10 border-primary-500 bg-primary-50 text-primary-600 relative inline-flex items-center border text-sm font-medium focus:z-20;
+    }
+  }
+
+  &__condensed {
+    table {
+      tbody {
+        td {
+          @apply pl-4 py-2;
+        }
+      }
+    }
+  }
+
+}

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

@@ -0,0 +1,17 @@
+.overflow-y-auto class=(table.view_condensed? ? "mensa-table__condensed" : "") data-mensa-table-target="view"
+  table.w-full
+    - if table.show_header?
+      thead
+        tr
+          = render(Mensa::Header::Component.with_collection(table.columns.select(&:visible?).reject(&:internal?), table: table))
+          - if table.actions?
+            th
+
+    tbody
+      = render(Mensa::TableRow::Component.with_collection(table.rows, table: table))
+
+  - if table.pagy_details&.pages > 1 || table.pagy_details.count == 0
+    .paging
+      == pagy_info(table.pagy_details)
+      - if table.pagy_details&.pages > 1
+        == pagy_nav(table.pagy_details, link_extra: 'data-turbo-frame="_self"')

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+# Presents a single table-view, also in use when just one table is in view
+module Mensa
+  module View
+    class Component < ::Mensa::ApplicationComponent
+      include TablesHelper
+
+      attr_reader :table
+
+      def initialize(table)
+        @table = table
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+.mensa-table {
+  &__views {
+    @apply p-2 pl-4 shadow-lg border-b dark:bg-gray-700 dark:border-gray-600;
+
+    a.view {
+      @apply bg-gray-100 text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:bg-gray-200 rounded-md px-3 py-1.5 text-sm;
+    }
+
+    a.view.selected {
+      @apply bg-gray-300 text-gray-800 dark:bg-gray-500 hover:bg-gray-400;
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+.mensa-table__views data-mensa-table-target="views"
+  .sm:hidden
+    label.sr-only[for="tabs"]
+      | Select a tab
+    select#tabs.block.w-full.rounded-md.border-gray-300.focus:border-indigo-500.focus:ring-indigo-500[name="tabs"]
+      - table.all_views.each.with_index do |view, index|
+        option = view.name
+  .hidden.sm:block
+    nav.flex.justify-between[aria-label="Tabs"]
+      .flex.space-x-2.overflow-x-auto.whitespace-nowrap.scroll-p-0
+        - table.all_views.each.with_index do |view, index|
+          = link_to(table.path(table_view_id: view.id, turbo_frame_id: table.table_id), "data-turbo-frame": table.table_id, class: "view #{(view == table.table_view) || (!view.persisted? && table.table_view.blank?) ? 'selected' : ''}") do
+            = view.name
+
+        a.text-gray-600.dark:text-gray-400.hover:text-gray-800.hover:bg-gray-200.rounded-md.px-3.py-1.5.text-sm[href="#" title=t("new_view", default: "New view")]
+          .fal.fa-plus
+      - if table.supports_views?
+        = render Mensa::ControlBar::Component.new(table: table)

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

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Mensa
+  module Views
+    class Component < ::Mensa::ApplicationComponent
+      # renders_many :views
+      attr_reader :table
+
+      def initialize(table:)
+        @table = table
+      end
+    end
+  end
+end