Filter form for bookables for sellers

malmostad · Jan 30, 2018 · 7bd72f1 · 7bd72f1
1 parent b7df43f
commit 7bd72f1
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 48 deletions.
diff --git a/app/assets/javascripts/filter.js b/app/assets/javascripts/filter.js
@@ -0,0 +1,49 @@
+// Filter list of bookables for seller
+jQuery(document).ready(function($) {
+  var filter = {};
+  var $filterForm = $("#filter-form");
+
+  if ($filterForm.length) {
+    var $items = $("#booking-schedule tbody tr");
+
+    // Filter list on filter form change
+    $filterForm.find("select").change(function() {
+      readFilterForm();
+      updateList();
+    });
+  }
+
+  // Perform filtering based on data-x attributes
+  function updateList() {
+    // Build a somewhat complex selector to show/hide bookables
+    var selector = "";
+    if (!!filter.filter_place) selector += "[data-place='" + filter.filter_place + "']";
+    if (!!filter.filter_date) selector += "[data-date='" + filter.filter_date + "']";
+    if (!!filter.filter_time_slot) selector += "[data-time-slot='" + filter.filter_time_slot + "']";
+
+    $items.filter(":hidden").show();
+
+    // "All" selected for all select menues
+    if (!selector) {
+      $items.filter(":hidden").show();
+    }
+    else {
+      $items.each(function() {
+        $this = $(this);
+
+        if ($this.is(selector) ) {
+          $this.show();
+        }
+        else {
+          $this.hide();
+        }
+      });
+    }
+  }
+
+  function readFilterForm() {
+    filter.filter_place = $("#filter_place option:selected").val();
+    filter.filter_date = $("#filter_date option:selected").val();
+    filter.filter_time_slot = $("#filter_time_slot option:selected").val();
+  }
+});
diff --git a/app/assets/stylesheets/bookings.scss b/app/assets/stylesheets/bookings.scss
@@ -0,0 +1,56 @@
+#filter-form {
+  margin-bottom: 1em;
+  .form-row {
+    float: left;
+  }
+  label {
+    margin-bottom: .2em;
+  }
+  select {
+    width: emize(200);
+    margin: 0 1em .5em 0;
+  }
+  .form-row.neighborhood {
+    clear: left;
+  }
+  .status {
+    clear: left;
+  }
+  .form-row.reset {
+    display: none;
+    label {
+      visibility: hidden;
+    }
+    input {
+      display: block;
+    }
+  }
+  @media (max-width: 60em) {
+    .form-row {
+      float: none;
+      .control-label {
+        @include columns(4);
+      }
+      .form-control {
+        @include columns(8, true);
+      }
+    }
+  }
+  @media (max-width: 40em) {
+    .form-row {
+      @include clearfix();
+      margin: .2em 0 .6em;
+      .control-label {
+        @include columns(12);
+      }
+      .form-control {
+        @include columns(12);
+      }
+    }
+    .form-row.reset {
+      .control-label {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/app/controllers/seller_bookings_controller.rb b/app/controllers/seller_bookings_controller.rb
@@ -19,7 +19,10 @@ def index
 
   def schedule
     @bookings = Booking.includes(:place, :time_slot, :company).present.order(:date, 'time_slots.from', 'places.name')
-    @bookable_periods = BookingPeriod.includes(bookings: [:place, :time_slot, :company]).bookables
+    @dates = @bookings.map(&:date).uniq
+    @places = Place.all
+    @time_slots = TimeSlot.all
+    @bookable_periods = BookingPeriod.bookables
   end
 
   def update

diff --git a/app/views/seller_bookings/_bookable_periods.html.haml b/app/views/seller_bookings/_bookable_periods.html.haml
@@ -1,22 +1,23 @@
-%h1.box-title= 'Pågående bokningsperioder'
-- if @bookable_periods.empty?
-  .box-content
-    .help-block= 'För närvarande finns det inga försäljningsperioder som är bokningsbara.'
-- else
-  .box-content
-    .help-block= 'För närvarande är följande försäljningsperioder bokbara'
-  %table.full.wrap
-    %tbody
-      %thead
-        %tr
-          %th Kan bokas från och med
-          %th Kan bokas till och med
-          %th Försäljning startar
-          %th Försäljning slutar
-    - @bookable_periods.each do |bookable_period|
+%section.box.index
+  %h1.box-title= 'Pågående bokningsperioder'
+  - if @bookable_periods.empty?
+    .box-content
+      .help-block= 'För närvarande finns det inga försäljningsperioder som är bokningsbara.'
+  - else
+    .box-content
+      .help-block= 'För närvarande är följande försäljningsperioder bokbara'
+    %table.full.wrap
       %tbody
-        %tr
-          %td= bookable_period.booking_starts_at.to_formatted_s(:date_and_time)
-          %td= bookable_period.booking_ends_at.to_formatted_s(:date_and_time)
-          %td= bookable_period.starts_at
-          %td= bookable_period.starts_at
+        %thead
+          %tr
+            %th Kan bokas från och med
+            %th Kan bokas till och med
+            %th Försäljning startar
+            %th Försäljning slutar
+      - @bookable_periods.each do |bookable_period|
+        %tbody
+          %tr
+            %td= bookable_period.booking_starts_at.to_formatted_s(:date_and_time)
+            %td= bookable_period.booking_ends_at.to_formatted_s(:date_and_time)
+            %td= bookable_period.starts_at
+            %td= bookable_period.starts_at
diff --git a/app/views/seller_bookings/_schedule_filter.html.haml b/app/views/seller_bookings/_schedule_filter.html.haml
@@ -0,0 +1,14 @@
+.box-content
+  %form#filter-form.basic{ action: root_path, method: :get }
+    .form-row.neighborhood
+      = label_tag :place, "Plats:", class: "control-label"
+      = select :booking_schedule, :filter_place, @places.map { |place| [ place.name, place.id ] },
+        { include_blank: "Visa alla" }, { class: "form-control input-sm", id: :filter_place }
+    .form-row.category
+      = label_tag :date, "Dag:", class: "control-label"
+      = select :booking_schedule, :filter_date, @dates.map { |date| [ date.to_s ] },
+        { include_blank: "Visa alla" }, { class: "form-control input-sm", id: :filter_date }
+    .form-row.owner-type
+      = label_tag :time_slot, "Tid:", class: "control-label"
+      = select :booking_schedule, :filter_time_slot, @time_slots.map { |time_slot| [interval(time_slot), time_slot.id] },
+        { include_blank: "Visa alla" }, { class: "form-control input-sm", id: :filter_time_slot }
diff --git a/app/views/seller_bookings/_schedule_list.html.haml b/app/views/seller_bookings/_schedule_list.html.haml
@@ -1,23 +1,25 @@
-%h1.box-title= h1
-%table.full.wrap
-  %tbody
-    %thead
-      %tr
-        %th Plats
-        %th Dag
-        %th Tid
-        %th
+%section.box.index
+  %h1.box-title= h1
+  = render 'schedule_filter'
+  %table.full.wrap#booking-schedule
+    %tbody
+      %thead
+        %tr
+          %th Plats
+          %th Dag
+          %th Tid
+          %th
 
-      %tbody
-        - @bookings.each do |booking|
-          %tr
-            %td= booking.place.name
-            %td= booking.date
-            %td= interval(booking.time_slot)
-            %td
-              - if booking.free?
-                .actions= link_to 'Boka', seller_booking_path(booking), method: :patch, class: "btn btn-primary btn-sm"
-              - elsif current_seller.allowed_to_manage_booking(booking)
-                = 'Bokad av er'
-              - else
-                = 'Bokad'
+        %tbody
+          - @bookings.each do |booking|
+            %tr{ data: { 'place': booking.place.id, 'date': booking.date, 'time-slot': booking.time_slot.id }}
+              %td= booking.place.name
+              %td= booking.date
+              %td= interval(booking.time_slot)
+              %td
+                - if booking.free?
+                  .actions= link_to 'Boka', seller_booking_path(booking), method: :patch, class: "btn btn-primary btn-sm"
+                - elsif current_seller.allowed_to_manage_booking(booking)
+                  = 'Bokad av er'
+                - else
+                  = 'Bokad'
diff --git a/app/views/seller_bookings/schedule.html.haml b/app/views/seller_bookings/schedule.html.haml
@@ -1,8 +1,6 @@
 - title 'Gör ny bokning'
 
-%section.box.index
-  = render 'bookable_periods'
+= render 'bookable_periods'
 
 - if @bookable_periods.present?
-  %section.box.index
-    = render 'schedule_list'
+  = render 'schedule_list'