Add form to select displayed areas

assets/css/app.scss

@@ -126,4 +126,9 @@ ul.slots-list > li {
 
 ul.slots-list > li ~ li {
   margin-left:  0.5em;
-}
+}
+
+select#zones_filter_zones {
+  height: min-content;
+  width: auto;
+}

lib/vaccins_web/live/index.ex

@@ -19,6 +19,7 @@ defmodule VaccinsWeb.IndexLive do
        location_cs: LocationStore.LocationRaw.changeset(%{}),
        display_cs: false
      )
+     |> set_all_areas
      |> init_area_filters()
      |> set_title()}
   end
@@ -30,11 +31,15 @@ defmodule VaccinsWeb.IndexLive do
   end
 
   @impl true
-  def handle_params(params, _url, socket) when params == %{}, do: {:noreply, socket}
+  def handle_params(params, _url, socket) when params == %{},
+    do:
+      {:noreply,
+       socket
+       |> assign(noob_mode: false, area_filters: socket.assigns.all_areas, params: params)}
 
   def handle_params(params, _url, socket)
       when is_map_key(params, "noob") or is_map_key(params, "geographic_areas") do
-    all_areas = get_all_areas(socket)
+    all_areas = socket.assigns.all_areas
     areas = params |> Map.get("geographic_areas", all_areas)
 
     {:noreply,
@@ -47,6 +52,16 @@ defmodule VaccinsWeb.IndexLive do
   end
 
   @impl true
+  def handle_event("zones_filter_change", %{"zones_filter" => %{"zones" => zones}}, socket) do
+    {:noreply,
+     socket |> push_patch(to: Routes.index_path(socket, :index, geographic_areas: zones))}
+  end
+
+  def handle_event("zones_filter_change", params, socket)
+      when not is_map_key(params, "zones_filter") do
+    {:noreply, socket |> push_patch(to: Routes.index_path(socket, :index))}
+  end
+
   def handle_event("add_location", %{"location_raw" => params}, socket) do
     case params |> LocationStore.add_location() do
       :ok -> {:noreply, socket |> push_patch(to: Routes.index_path(socket, :index))}
@@ -97,7 +112,7 @@ defmodule VaccinsWeb.IndexLive do
     {:noreply, socket}
   end
 
-  defp filter(locations, assigns = %{area_filters: filters}),
+  defp filter(locations, %{area_filters: filters}),
     do:
       locations
       |> Enum.filter(&(&1.geographic_area in filters))
@@ -123,7 +138,9 @@ defmodule VaccinsWeb.IndexLive do
     end)
   end
 
-  defp init_area_filters(socket), do: socket |> assign(area_filters: socket |> get_all_areas)
+  defp set_all_areas(socket), do: socket |> assign(all_areas: socket |> get_all_areas)
+
+  defp init_area_filters(socket), do: socket |> assign(area_filters: socket.assigns.all_areas)
 
   defp get_all_areas(%{assigns: %{locations: locations}}),
     do: locations |> Enum.map(& &1.geographic_area) |> MapSet.new()

lib/vaccins_web/live/index_live.html.leex

@@ -60,6 +60,11 @@
   </form>
 <% end %>
 
+<%= f = form_for :zones_filter, "#", [phx_change: :zones_filter_change] %>
+  <%= label f, :zones, "Filtrer par zones" %>
+  <%= multiple_select f, :zones, @all_areas |> Enum.map(& {&1, &1}), selected: @area_filters |> MapSet.to_list %>
+</form>
+
 <table class="locations-list">
   <thead>
     <tr><%= VaccinsWeb.LocationComponent.render_table_header(@is_local?) %></tr>