Add filter by local group on events list

app/controllers/public/events_controller.rb

@@ -2,21 +2,23 @@ class Public::EventsController < Public::BaseController
   layout "public"
 
   def index
+    events = Event.all
     if params[:scope] == "past"
-      @events = Event.all
-        .before(Date.today.beginning_of_day, field: :ends_at)
-        .order(starts_at: :desc).map(&method(:decorate))
+      events = events
+        .before(Time.now, field: :ends_at)
+        .order(ends_at: :desc)
     else
-      @events = Event.all
-        .after(Date.today.beginning_of_day, field: :starts_at)
-        .order(starts_at: :desc).map(&method(:decorate))
+      events = events
+        .after(Time.now, field: :starts_at)
+        .order(starts_at: :desc)
     end
+    if params[:local_group_id]
+      events = events.where(local_group_id: params[:local_group_id])
+    end
+    @events = events.map(&method(:decorate))
   end
 
   def show
     @event = EventDecorator.new(Event.friendly.find(params[:id]))
   end
-
-  private
-
 end

app/helpers/public/event_helper.rb

@@ -0,0 +1,5 @@
+module Public::EventHelper
+  def params_for_events
+    request.params.slice("local_group_id", "scope")
+  end
+end

app/javascript/css/public.scss

@@ -45,12 +45,14 @@
 @import './public/components/form';
 @import './public/components/icon';
 @import './public/components/label';
+@import './public/components/no_data';
 @import './public/components/spacer';
 
 @include xr-public-button;
 @include xr-public-form;
 @include xr-public-icon;
 @include xr-public-label;
+@include xr-public-no-data;
 @include xr-public-spacer;
 
 body {

app/javascript/css/public/components/no_data.scss

@@ -0,0 +1,41 @@
+@mixin xr-public-no-data {
+  .no-data {
+    margin-bottom: 1rem;
+    padding: 2rem;
+    background-image: repeating-linear-gradient(45deg,
+      $color-extra-light-gray, $color-extra-light-gray 10px,
+      $white 10px, $white 20px);
+    color: $dark-gray;
+    text-align: center;
+
+    .no-data-image {
+      margin-bottom: 1rem;
+
+      img {
+        max-width: 10rem;
+      }
+    }
+
+    .no-data-notice {
+      line-height: 1.2;
+
+      small {
+        display: block;
+        margin-top: .5rem;
+      }
+    }
+
+    &--smaller {
+      padding: 1rem 2rem;
+      text-align: left;
+
+      .no-data-image {
+        margin-bottom: 0;
+
+        img {
+          height: 5rem;
+        }
+      }
+    }
+  }
+}

app/views/layouts/icons/_calendar.html.slim

@@ -0,0 +1,10 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <defs>
+        <style>.a{fill:none;stroke-linecap:round;stroke-linejoin:round;}</style>
+    </defs>
+    <rect class="a" x="0.5" y="2.501" width="23" height="21" rx="1" ry="1"></rect>
+    <line class="a" x1="5.5" y1="0.501" x2="5.5" y2="5.501"></line>
+    <line class="a" x1="18.5" y1="0.501" x2="18.5" y2="5.501"></line>
+    <line class="a" x1="0.5" y1="7.501" x2="23.5" y2="7.501"></line>
+</svg>

app/views/layouts/icons/_compass_arrow.html.slim

@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <defs>
+        <style>.a{fill:none;stroke-linecap:round;stroke-linejoin:round;}</style>
+    </defs>
+    <path class="a" d="M12.013,22.122a.5.5,0,0,1-.943-.231V12.93H2.109a.5.5,0,0,1-.231-.943L21.66,1.666a.5.5,0,0,1,.674.674Z"></path>
+</svg>

app/views/public/events/_list.html.slim

@@ -0,0 +1,33 @@
+- if events.any?
+  - events.each do |event|
+    .card
+      .card-section
+        .grid-x.grid-margin-x
+          .cell.auto
+            h3
+              = link_to event.name, public_event_path(event)
+              br
+              small
+                span.inline-icon
+                  = render "layouts/icons/calendar"
+                =<> event.starts_at(date_only: true)
+                - if event.local_group
+                  span.inline-icon
+                    = render "layouts/icons/compass_arrow"
+                  =< event.local_group.name
+                - else
+                  span.label.label--warm-yellow = _("NATIONAL EVENT")
+
+          - if event.facebook_url.presence
+            .cell.shrink
+              = sanitize(event.facebook_button)
+
+        - if event.description.presence
+          p
+            small
+              = event.excerpt
+    .spacer-1
+- else
+  = render "public/shared/no_data",
+           primary: _("No event planned."),
+           image_src: "streamline/ux/calendar.svg"

app/views/public/events/_list_link.html.slim

@@ -0,0 +1,8 @@
+- if params[:scope] == "past"
+  = link_to _("Upcoming events"),
+            public_events_path(local_group_id: params[:local_group_id]),
+            class: "expanded secondary button"
+- else
+  = link_to _("Past events"),
+            public_events_path(scope: "past", local_group_id: params[:local_group_id]),
+            class: "expanded secondary button"

app/views/public/events/index.html.slim

@@ -11,33 +11,19 @@
     - else
       = _("Upcoming events")
 
-- if @events.any?
-  - @events.each do |event|
-    .card
-      .card-section
-        .grid-x.grid-margin-x
-          .cell.auto
-            h3
-              = link_to event.name, public_event_path(event)
-              br
-              small = event.starts_at(date_only: true)
-          - if event.facebook_url.presence
-            .cell.shrink
-              = sanitize(event.facebook_button)
+.grid-x.grid-margin-x
+  .cell.small-12.medium-auto
+    = select_tag :local_group_id,
+                 options_for_select( \
+                   LocalGroup.all.order("LOWER(name)").map { |lg| [ lg.name, lg.id, { 'data-url': url_for(params_for_events.merge(local_group_id: lg.id)) } ] },
+                   params[:local_group_id] \
+                 ),
+                 include_blank: _("All local groups and national events"),
+                 onchange: "if (this.value) { window.location.href=this.options[this.selectedIndex].getAttribute('data-url') } else { window.location.href='#{url_for(params_for_events.merge(local_group_id: nil))}' }"
+  .cell.hide-for-small-only.medium-shrink
+    = render "public/events/list_link"
 
-        - if event.description.presence
-          p
-            small
-              = event.excerpt
-    .spacer-1
-- else
-  p = _("No event planned.")
+= render partial: "public/events/list", locals: { events: @events }
 
-- if params[:scope] == "past"
-  = link_to _("Upcoming events"),
-            public_events_path,
-            class: "expanded hollow button"
-- else
-  = link_to _("Past events"),
-            public_events_path(scope: "past"),
-            class: "expanded hollow button"
+.show-for-small-only
+  = render "public/events/list_link"

app/views/public/shared/_no_data.html.slim

@@ -0,0 +1,11 @@
+.no-data
+  - if local_assigns[:image_src]
+    .no-data-image
+      = image_tag image_src, alt: ""
+  .no-data-notice
+    - if local_assigns[:primary]
+      strong = primary
+    - if local_assigns[:primary] and local_assigns[:secondary]
+      br
+    - if local_assigns[:secondary]
+      small = secondary