Ringeliste v0

app/assets/stylesheets/application.css

@@ -12,10 +12,12 @@
 @import "./flash.css";
 @import "./forms.css";
 @import "./image_slider.css";
+@import "./loading_spaces_when_empty.css";
 @import "./map.css";
 @import "./modal.css";
 @import "./radio_slider.css";
 @import "./show-only-if-inside-space-open-in-sidebar.css";
 @import "./space_index.css";
+@import "./space_table.css";
 @import "./star_picker.css";
 @import "./tom_select.css";

app/assets/stylesheets/loading_spaces_when_empty.css

@@ -0,0 +1,12 @@
+.loading-spaces-when-empty {
+    &:empty {
+        @apply flex flex-col gap-4;
+        @apply animate-pulse;
+        &::before {
+            content: "Leter etter lokaler...";
+            display: block;
+            @apply w-full h-48 rounded-sm flex items-center justify-center;
+            @apply bg-gray-100;
+        }
+    }
+}

app/assets/stylesheets/space_table.css

@@ -0,0 +1,89 @@
+body.view-as-table {
+    @apply overscroll-x-contain;
+}
+
+.space_table {
+    @apply table-auto w-full;
+
+    thead {
+        @apply sticky top-0;
+        @apply bg-gray-100;
+        @apply z-5;
+        @apply border-b border-gray-200;
+        th {
+            @apply font-bold;
+            @apply bg-gray-100;
+        }
+    }
+    /* Sticky left column */
+    thead tr th:first-child,
+    tbody tr th:first-child {
+        @apply sticky left-0 z-4;
+    }
+    thead tr th:first-child::after {
+        @apply block absolute shadow-2xl left-0 right-0 top-0 h-screen md:h-screen-below-desktop-menu pointer-events-none;
+        content: "";
+    }
+
+    tbody {
+        th {
+            @apply bg-white;
+            font-weight: inherit;
+            h1, h2 {
+                @apply font-bold text-lg mb-2;
+            }
+        }
+
+        th, td {
+            > :first-child {
+                @apply h-48 overflow-scroll block;
+            }
+        }
+    }
+
+    tr {
+        @apply border-b border-gray-200;
+    }
+
+    th,
+    td {
+        @apply align-top text-left;
+        @apply px-4 py-2;
+        &>:first-child {
+            @apply w-72;
+        }
+        #facilities {
+            @apply w-fit;
+        }
+    }
+    td {
+        @apply relative;
+        @apply bg-white;
+        h1, h2, h3 {
+            @apply font-bold;
+        }
+    }
+
+
+    .inline-editing {
+        @apply pb-6;
+       header {
+           h2, h3 {
+               @apply hidden;
+           }
+       }
+        .edit-button {
+            @apply absolute bottom-0 right-0 z-2;
+        }
+
+        /* Make the form into a modal of sorts */
+        > form {
+            @apply fixed z-20 bg-gray-600/50 inset-0 flex items-center justify-center md:pl-[26%] md:pr-[1%];
+            > section {
+                @apply max-w-prose max-h-fit bg-white p-8;
+                @apply drop-shadow-2xl rounded-lg;
+            }
+        }
+    }
+
+}

app/controllers/concerns/filterable_spaces.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module FilterableSpaces
+  private
+
+  def set_filterable_facility_categories
+    @filterable_facility_categories = FacilityCategory.includes(:facilities).all
+  end
+
+  def set_filterable_space_types
+    @filterable_space_types = SpaceType.all
+  end
+
+  def filter_spaces
+    @spaces = spaces_from_facilities
+
+    set_filterable_facility_categories
+    set_filterable_space_types
+
+    filter_by_location
+    filter_by_title
+    filter_by_space_types
+  end
+
+  def filter_by_title
+    return if params[:search_for_title].blank?
+
+    @spaces = @spaces.filter_on_title(params[:search_for_title])
+  end
+
+  def filter_by_space_types
+    return if params[:space_types].blank?
+
+    space_types = params[:space_types]&.map(&:to_i)
+    @spaces = @spaces.filter_on_space_types(space_types)
+  end
+
+  def location_params_present?
+    params[:north_west_lat].present? && params[:north_west_lng].present? &&
+      params[:south_east_lat].present? && params[:south_east_lng].present?
+  end
+
+  def filter_by_location
+    return unless location_params_present?
+
+    @spaces = @spaces.filter_on_location(
+      params[:north_west_lat],
+      params[:north_west_lng],
+      params[:south_east_lat],
+      params[:south_east_lng]
+    )
+  end
+
+  def sanitize_facility_list(array_of_facility_ids)
+    return [] if array_of_facility_ids.blank?
+
+    array_of_facility_ids.uniq.select { |id| id.to_i.to_s == id }.map(&:to_i)
+  end
+
+  def spaces_from_facilities
+    sanitized_facility_list = sanitize_facility_list(params[:facilities])
+    return Space.order_by_star_rating if sanitized_facility_list.blank?
+
+    Space.filter_and_order_by_facilities(sanitized_facility_list)
+  end
+end

app/controllers/spaces_controller.rb

@@ -1,11 +1,12 @@
 # frozen_string_literal: true
 
 class SpacesController < BaseControllers::AuthenticateController # rubocop:disable Metrics/ClassLength
+  include FilterableSpaces
   include DefineGroupedFacilitiesForSpace
 
   def index
-    @spaces = Space.order updated_at: :desc
-    @space = Space.new
+    set_filterable_facility_categories
+    set_filterable_space_types
   end
 
   def show
@@ -104,26 +105,50 @@ def rect_for_spaces
   end
 
   def spaces_search
-    filtered_spaces = filter_spaces(params)
-    space_count = filtered_spaces.count
-    spaces = filtered_spaces.first(SPACE_SEARCH_PAGE_SIZE)
+    view_as = params[:view_as]
+
+    filter_spaces
+
+    space_count = @spaces.to_a.size
+
+    @spaces = @spaces.limit(SPACE_SEARCH_PAGE_SIZE)
+
+    @spaces = preload_spaces_data_for_view(view_as)
+
+    markers = [] # @spaces.map(&:render_map_marker)
 
-    markers = spaces.map(&:render_map_marker)
+    @experiences = FacilityReview::LIST_EXPERIENCES
 
     facility_ids = params[:facilities]&.map(&:to_i) || []
     render json: {
       listing: render_to_string(
         partial: "spaces/index/space_listings", locals: {
-          spaces:,
+          spaces: @spaces,
           filtered_facilities: Facility.find(facility_ids),
           space_count:,
+          view_as:,
           page_size: SPACE_SEARCH_PAGE_SIZE
         }
       ),
       markers:
     }
   end
 
+  def preload_spaces_data_for_view(view_as)
+    # Fresh query to get all the data for the filtered and ordered spaces, without
+    # the need to include all this data while filtering
+
+    if view_as == "table"
+      Space
+        .includes_data_for_show
+        .find(@spaces.map(&:id)) # This keeps the order of the spaces
+    else
+      Space
+        .includes_data_for_filter_list
+        .find(@spaces.map(&:id)) # This keeps the order of the spaces
+    end
+  end
+
   def check_duplicates
     duplicates = duplicates_from_params
 
@@ -140,7 +165,7 @@ def check_duplicates
           spaces: duplicates
         }
       ),
-      count: duplicates.count
+      count: duplicates.size
     }
   end
 
@@ -172,30 +197,6 @@ def get_address_params(params)
     ) || {}
   end
 
-  def filter_spaces(params)
-    space_types = params[:space_types]&.map(&:to_i)
-
-    spaces = Space.includes([:images]).filter_on_location(
-      params[:north_west_lat],
-      params[:north_west_lng],
-      params[:south_east_lat],
-      params[:south_east_lng]
-    )
-
-    spaces = spaces.filter_on_title(params[:search_for_title]) if params[:search_for_title].present?
-    spaces = spaces.filter_on_space_types(space_types) if space_types.present?
-
-    filter_on_facilities_and_return_ordered_spaces(spaces:, params:)
-  end
-
-  def filter_on_facilities_and_return_ordered_spaces(spaces:, params:)
-    facilities = params[:facilities]&.map(&:to_i)
-
-    return spaces.order("star_rating DESC NULLS LAST") if facilities.blank?
-
-    Space.filter_on_facilities(spaces, params[:facilities])
-  end
-
   def space_params # rubocop:disable  Metrics/MethodLength
     params.require(:space).permit(
       :title,

app/helpers/spaces_helper.rb

@@ -5,7 +5,7 @@ def edit_field(partial, form)
     render partial: "spaces/edit/#{partial}", locals: { form: }
   end
 
-  def inline_editable(field, title_tag = :h2, title_text = Space.human_attribute_name(field), &block)
+  def inline_editable(field, title_tag: :h2, title_text: Space.human_attribute_name(field), &block)
     render partial: "spaces/edit/common/editable_inline", locals: {
       field:,
       title_tag:,

app/javascript/controllers/mapbox_controller.js

@@ -16,7 +16,6 @@ export default class extends Controller {
 
   async initialize() {
     mapboxgl.accessToken = this.element.dataset.apiKey;
-
     await this.parseUrl();
   }
 
@@ -121,6 +120,7 @@ export default class extends Controller {
     this.setOrDeleteToUrl('selectedSpaceTypes', selectedSpaceTypes);
     this.setOrDeleteToUrl('selectedLocation', selectedLocation);
     this.setOrDeleteToUrl('searchForTitle', searchForTitle);
+    this.setOrDeleteToUrl('view_as', this.viewAs);
   }
 
   setOrDeleteToUrl(key, value) {
@@ -154,6 +154,7 @@ export default class extends Controller {
     const selectedSpaceTypes = url.searchParams.get('selectedSpaceTypes');
     const selectedLocation = url.searchParams.get('selectedLocation');
     const searchForTitle = url.searchParams.get('searchForTitle');
+    this.setViewTo(url.searchParams.get("view_as") || "map");
 
     this.parseSelectedFacilities(selectedFacilities);
     this.parseSelectedSpaceTypes(selectedSpaceTypes);
@@ -391,6 +392,7 @@ export default class extends Controller {
 
     return [
       '/spaces_search?',
+      `view_as=${this.viewAs}&`,
       `north_west_lat=${northWest.lat}&`,
       `north_west_lng=${northWest.lng}&`,
       `south_east_lat=${southEast.lat}&`,
@@ -401,8 +403,27 @@ export default class extends Controller {
     ].join('');
   }
 
+  setViewTo(view) {
+    this.viewAs = view;
+    document.body.classList.toggle('view-as-map', view === "map");
+    document.body.classList.toggle('view-as-table', view === "table");
+  }
+
+  setViewToMap() {
+    this.setViewTo("map")
+    this.updateUrl();
+    this.loadNewMapPosition();
+
+  }
+
+  setViewToTable() {
+    this.setViewTo("table")
+    this.updateUrl();
+    this.loadNewMapPosition();
+  }
+
   async loadNewMapPosition() {
-    //document.getElementById('space-listing').innerText = 'Laster...';
+    document.getElementById('space-listing').innerHTML = '';
 
     const spacesInRect = await (await fetch(this.buildSearchURL())).json();