mitgliederverwaltung/lib/mv_web/live/member_live/index.html.heex

<Layouts.app flash={@flash} current_user={@current_user}>
  <.header>
    {gettext("Members")}
    <:actions>
      <.button
        :if={Enum.any?(@members, &MapSet.member?(@selected_members, &1.id))}
        id="copy-emails-btn"
        phx-hook="CopyToClipboard"
        phx-click="copy_emails"
        aria-label={gettext("Copy email addresses of selected members")}
      >
        <.icon name="hero-clipboard-document" />
        {gettext("Copy emails")} ({Enum.count(@members, &MapSet.member?(@selected_members, &1.id))})
      </.button>
      <.button
        :if={Enum.any?(@members, &MapSet.member?(@selected_members, &1.id))}
        href={"mailto:?bcc=#{@members |> Enum.filter(&(MapSet.member?(@selected_members, &1.id) && &1.email)) |> Enum.map(& &1.email) |> Enum.join(",")}"}
        aria-label={gettext("Open email program with BCC recipients")}
      >
        <.icon name="hero-envelope" />
        {gettext("Open in email program")}
      </.button>
      <.button variant="primary" navigate={~p"/members/new"}>
        <.icon name="hero-plus" /> {gettext("New Member")}
      </.button>
    </:actions>
  </.header>

  <.live_component
    module={MvWeb.Components.SearchBarComponent}
    id="search-bar"
    query={@query}
    placeholder={gettext("Search...")}
  />

  <.table
    id="members"
    rows={@members}
    row_click={fn member -> JS.navigate(~p"/members/#{member}") end}
    dynamic_cols={@dynamic_cols}
    sort_field={@sort_field}
    sort_order={@sort_order}
  >
    
<!-- <:col :let={member} label="Id">{member.id}</:col> -->
    <:col
      :let={member}
      label={
        ~H"""
        <.input
          type="checkbox"
          name="select_all"
          phx-click="select_all"
          checked={MapSet.equal?(@selected_members, @members |> Enum.map(& &1.id) |> MapSet.new())}
          aria-label={gettext("Select all members")}
          role="checkbox"
        />
        """
      }
    >
      <.input
        type="checkbox"
        name={member.id}
        phx-click="select_member"
        phx-value-id={member.id}
        checked={MapSet.member?(@selected_members, member.id)}
        phx-capture-click
        phx-stop-propagation
        aria-label={gettext("Select member")}
        role="checkbox"
      />
    </:col>
    <:col
      :let={member}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_first_name}
          field={:first_name}
          label={gettext("First name")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {member.first_name} {member.last_name}
    </:col>
    <:col
      :let={member}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_email}
          field={:email}
          label={gettext("Email")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {member.email}
    </:col>
    <:col
      :let={member}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_street}
          field={:street}
          label={gettext("Street")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {member.street}
    </:col>
    <:col
      :let={member}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_house_number}
          field={:house_number}
          label={gettext("House Number")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {member.house_number}
    </:col>
    <:col
      :let={member}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_postal_code}
          field={:postal_code}
          label={gettext("Postal Code")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {member.postal_code}
    </:col>
    <:col
      :let={member}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_city}
          field={:city}
          label={gettext("City")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {member.city}
    </:col>
    <:col
      :let={member}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_phone_number}
          field={:phone_number}
          label={gettext("Phone Number")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {member.phone_number}
    </:col>
    <:col
      :let={member}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_join_date}
          field={:join_date}
          label={gettext("Join Date")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {member.join_date}
    </:col>
    <:action :let={member}>
      <div class="sr-only">
        <.link navigate={~p"/members/#{member}"}>{gettext("Show")}</.link>
      </div>

      <.link navigate={~p"/members/#{member}/edit"}>{gettext("Edit")}</.link>
    </:action>

    <:action :let={member}>
      <.link
        phx-click={JS.push("delete", value: %{id: member.id}) |> hide("#row-#{member.id}")}
        data-confirm={gettext("Are you sure?")}
      >
        {gettext("Delete")}
      </.link>
    </:action>
  </.table>
</Layouts.app>