Show or hide streamed calendars on the client side based on their visibility field

Author: codeanpeace

lib/live_cal_web/components/core_components.ex

@@ -510,7 +510,7 @@ defmodule LiveCalWeb.CoreComponents do
           phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
           class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700"
         >
-          <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
+          <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50" data-visibility={elem(row, 1).visibility}>
             <td
               :for={{col, i} <- Enum.with_index(@col)}
               phx-click={@row_click && @row_click.(row)}

lib/live_cal_web/live/calendar_live/index.html.heex

@@ -7,13 +7,22 @@
   </:actions>
 </.header>
 
+<.button phx-click={JS.toggle(to: "[data-visibility='public']")}>
+  Toggle visibility of public calendars
+</.button>
+
+<.button phx-click={JS.toggle(to: "[data-visibility='private']")}>
+  Toggle visibility of private calendars
+</.button>
+
 <.table
   id="calendars"
   rows={@streams.calendars}
   row_click={fn {_id, calendar} -> JS.navigate(~p"/calendars/#{calendar}") end}
 >
   <:col :let={{_id, calendar}} label="Name"><%= calendar.name %></:col>
   <:col :let={{_id, calendar}} label="Description"><%= calendar.description %></:col>
+  <:col :let={{_id, calendar}} label="Visibility"><%= calendar.visibility %></:col>
   <:action :let={{_id, calendar}}>
     <div class="sr-only">
       <.link navigate={~p"/calendars/#{calendar}"}>Show</.link>

priv/repo/seeds.exs

@@ -9,3 +9,14 @@
 #
 # We recommend using the bang functions (`insert!`, `update!`
 # and so on) as they will fail if something goes wrong.
+
+alias LiveCal.Repo
+alias LiveCal.Scheduling
+
+[
+  %Scheduling.Calendar{name: "Holidays", description: "time for an adventure", visibility: :public},
+  %Scheduling.Calendar{name: "Birthdays", description: "remember to find gifts", visibility: :private},
+  %Scheduling.Calendar{name: "Meetups", description: "channeling inner social butterfly", visibility: :private},
+  %Scheduling.Calendar{name: "Sport Matches", description: "oggy oggy oggy, oi oi oi", visibility: :public}
+] |> Enum.map(&Repo.insert!/1)
+