Packages

backpex

0.18.3
0.19.6 0.19.5 0.19.4 0.19.3 0.19.2 0.19.1 0.19.0 0.18.3 0.18.2 0.18.1 0.18.0 0.17.4 0.17.3 0.17.2 0.17.1 0.17.0 0.16.3 0.16.2 0.16.1 0.16.0 0.15.3 0.15.2 0.15.1 0.15.0 0.14.0 0.13.0 0.12.0 0.11.0 0.10.0 0.9.1 0.9.0 0.8.2 0.8.1 0.8.0 0.7.1 0.7.0 0.6.0 0.5.1 0.5.0 0.4.0 0.3.2 0.3.1 0.3.0 0.2.0 0.1.1

Highly customizable administration panel for Phoenix LiveView applications.

HexDocs

Current section

Files

Jump to
Readme
45 Versions
13 Dependencies
Dependants
Files
Activity
backpex lib backpex html resource resource_index_table.html.heex
Raw

lib/backpex/html/resource/resource_index_table.html.heex 

<table class="table">

  <thead class="bg-base-100 text-base-content uppercase">

    <tr id="row-headers" phx-hook="BackpexStickyActions" class="border-b-2">

      <th :if={Enum.any?(filter_item_actions(@item_actions, :index))}>

        <input

          phx-click="toggle-item-selection"

          type="checkbox"

          class="checkbox checkbox-sm"

          checked={@select_all}

          aria-label={Backpex.__("Select all items", @live_resource)}

        />

      </th>

      <th :for={{name, %{label: label} = field_options} <- @fields} :if={active?(@active_fields, name)} class="h-12">

        <div class={["text-xs font-medium", align(field_options), index_column_class(assigns, field_options)]}>

          <%= if Enum.member?(@orderable_fields, name) do %>

            <.order_link

              live_resource={@live_resource}

              socket={@socket}

              params={@params}

              label={label}

              name={name}

              query_options={@query_options}

            />

          <% else %>

            {label}

          <% end %>

        </div>

      </th>

      <th class={["bg-base-100", sticky_col_class()]}>

        <span class="sr-only">{Backpex.__("Actions", @live_resource)}</span>

      </th>

    </tr>

  </thead>

  <tbody>

    <tr

      :for={{item, index} <- Enum.with_index(@items)}

      id={"row-item-#{LiveResource.primary_value(item, @live_resource)}"}

      class={index_row_class(assigns, item, selected?(@selected_items, item), index)}

      phx-hook="BackpexStickyActions"

    >

      <td :if={Enum.any?(filter_item_actions(@item_actions, :index))} class="relative">

        <div :if={selected?(@selected_items, item)} class="bg-base-content absolute inset-y-0 left-0 w-0.5" />

        <input

          id={"select-input-#{LiveResource.primary_value(item, @live_resource)}"}

          phx-click="update-selected-items"

          phx-value-id={LiveResource.primary_value(item, @live_resource)}

          type="checkbox"

          class="checkbox checkbox-sm"

          checked={selected?(@selected_items, item)}

          aria-label={

            Backpex.__(

              {"Select item with id: %{id}", %{id: LiveResource.primary_value(item, @live_resource)}},

              @live_resource

            )

          }

        />

      </td>

      <td :for={{name, field_options} <- @fields} :if={active?(@active_fields, name)} class="text-base-content/75">

        <div class={[align(field_options), index_column_class(assigns, field_options)]}>

          <.resource_field name={name} item={item} {assigns} />

        </div>

      </td>

      <td class={[

        index_row_class(assigns, item, selected?(@selected_items, item), index),

        sticky_col_class(),

        "text-base-content/75 z-10 w-0 px-6"

      ]}>

        <div class={["flex items-center justify-end space-x-2"]}>

          <%= for {key, action} <- filter_item_actions(@item_actions, :row),

                  @live_resource.can?(assigns, key, item) do %>

            <%= if Backpex.ItemAction.has_link?(action) do %>

              <.link

                id={"item-action-#{key}-#{LiveResource.primary_value(item, @live_resource)}"}

                navigate={action.module.link(assigns, item)}

                aria-label={action.module.label(assigns, item)}

                phx-hook="BackpexTooltip"

                data-tooltip={action.module.label(assigns, item)}

              >

                {action.module.icon(assigns, item)}

              </.link>

            <% else %>

              <button

                id={"item-action-#{key}-#{LiveResource.primary_value(item, @live_resource)}"}

                type="button"

                phx-click="item-action"

                phx-value-action-key={key}

                phx-value-item-id={LiveResource.primary_value(item, @live_resource)}

                aria-label={action.module.label(assigns, item)}

                phx-hook="BackpexTooltip"

                data-tooltip={action.module.label(assigns, item)}

              >

                {action.module.icon(assigns, item)}

              </button>

            <% end %>

          <% end %>

        </div>

      </td>

    </tr>

  </tbody>

</table>