Packages

phoenix_kit

1.7.69
1.7.208 1.7.207 1.7.206 1.7.205 1.7.204 1.7.203 1.7.202 1.7.201 1.7.200 1.7.199 1.7.198 1.7.197 1.7.196 1.7.194 1.7.193 1.7.192 1.7.191 1.7.190 1.7.189 1.7.187 1.7.186 1.7.185 1.7.184 1.7.183 1.7.182 1.7.181 1.7.180 1.7.179 1.7.178 1.7.177 1.7.176 1.7.175 1.7.174 1.7.173 1.7.172 1.7.171 1.7.170 1.7.169 1.7.168 1.7.167 1.7.166 1.7.165 1.7.164 1.7.162 1.7.161 1.7.160 1.7.159 1.7.157 1.7.156 1.7.155 1.7.154 1.7.153 1.7.152 1.7.151 1.7.150 1.7.149 1.7.146 1.7.145 1.7.144 1.7.143 1.7.138 1.7.133 1.7.132 1.7.131 1.7.130 1.7.128 1.7.126 1.7.125 1.7.121 1.7.120 1.7.119 1.7.118 1.7.117 1.7.116 1.7.115 1.7.114 1.7.113 1.7.112 1.7.111 1.7.110 1.7.109 1.7.108 1.7.107 1.7.106 1.7.105 1.7.104 1.7.103 1.7.102 1.7.101 1.7.100 1.7.99 1.7.98 1.7.97 1.7.96 1.7.95 1.7.94 1.7.93 1.7.92 1.7.91 1.7.90 1.7.89 1.7.88 1.7.87 1.7.86 1.7.85 1.7.84 1.7.83 1.7.82 1.7.81 1.7.80 1.7.79 1.7.78 1.7.77 1.7.76 1.7.75 1.7.74 1.7.71 1.7.70 1.7.69 1.7.66 1.7.65 1.7.64 1.7.63 1.7.62 1.7.61 1.7.59 1.7.58 1.7.57 1.7.56 1.7.55 1.7.54 1.7.53 1.7.52 1.7.51 1.7.49 1.7.44 1.7.43 1.7.42 1.7.41 1.7.39 1.7.38 1.7.37 1.7.36 1.7.34 1.7.33 1.7.31 1.7.30 1.7.29 1.7.28 1.7.27 1.7.26 1.7.25 1.7.24 1.7.23 1.7.22 1.7.21 1.7.20 1.7.19 1.7.18 1.7.17 1.7.16 1.7.15 1.7.14 1.7.13 1.7.12 1.7.11 1.7.10 1.7.9 1.7.8 1.7.7 1.7.6 1.7.5 1.7.4 1.7.3 1.7.2 1.7.1 1.7.0 1.6.20 1.6.19 1.6.18 1.6.17 1.6.16 1.6.15 1.6.14 1.6.13 1.6.12 1.6.11 1.6.10 1.6.9 1.6.8 1.6.7 1.6.6 1.6.5 1.6.4 1.6.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2 1.3.1 1.3.0 1.2.10 1.2.9 1.2.8 1.2.7 1.2.5 1.2.4 1.2.2 1.2.1 1.2.0 1.1.0 1.0.0

A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more

HexDocs

Current section

Files

Jump to
Readme
222 Versions
38 Dependencies
Dependants
Files
Activity
phoenix_kit lib modules newsletters web lists.html.heex
Raw

lib/modules/newsletters/web/lists.html.heex 

<PhoenixKitWeb.Components.LayoutWrapper.app_layout

  flash={@flash}

  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}

  page_title="Newsletter Lists"

  current_path={@url_path}

  project_title={@project_title}

>

  <div class="container flex-col mx-auto px-4 py-6">

    <.admin_page_header

      back={Routes.path("/admin")}

      title="Newsletter Lists"

      subtitle="Manage your email subscriber lists"

    />



    <%!-- Actions Bar --%>

    <div class="flex justify-end mb-6">

      <.pk_link navigate="/admin/newsletters/lists/new" class="btn btn-sm btn-primary">

        <.icon name="hero-plus" class="w-4 h-4 mr-1" /> New List

      </.pk_link>

    </div>



    <%!-- Confirm Modal --%>

    <%= if @show_confirm_modal do %>

      <div class="modal modal-open">

        <div class="modal-box">

          <h3 class="font-bold text-lg mb-4">{@confirm_title}</h3>

          <p class="mb-4">{@confirm_message}</p>

          <div class="modal-action">

            <button phx-click="hide_confirm" class="btn btn-outline">Cancel</button>

            <button phx-click="confirm_action" class="btn btn-error">{@confirm_title}</button>

          </div>

        </div>

      </div>

    <% end %>



    <%!-- Lists Table (desktop) --%>

    <%= if length(@lists) > 0 do %>

      <div class="hidden md:block">

        <.table_default variant="zebra" size="sm" class="w-full">

          <.table_default_header>

            <.table_default_row>

              <.table_default_header_cell>Name</.table_default_header_cell>

              <.table_default_header_cell>Slug</.table_default_header_cell>

              <.table_default_header_cell>Status</.table_default_header_cell>

              <.table_default_header_cell>Subscribers</.table_default_header_cell>

              <.table_default_header_cell>Actions</.table_default_header_cell>

            </.table_default_row>

          </.table_default_header>



          <.table_default_body>

            <%= for list <- @lists do %>

              <.table_default_row>

                <.table_default_cell>

                  <div class="font-medium">{list.name}</div>

                  <%= if list.is_default do %>

                    <span class="badge badge-xs badge-info ml-1">Default</span>

                  <% end %>

                  <%= if list.description do %>

                    <div class="text-xs text-base-content/60 mt-0.5">{list.description}</div>

                  <% end %>

                </.table_default_cell>

                <.table_default_cell class="font-mono text-xs">

                  {list.slug}

                </.table_default_cell>

                <.table_default_cell>

                  <%= if list.status == "active" do %>

                    <span class="badge badge-sm badge-success">Active</span>

                  <% else %>

                    <span class="badge badge-sm badge-ghost">Archived</span>

                  <% end %>

                </.table_default_cell>

                <.table_default_cell>

                  {list.subscriber_count}

                </.table_default_cell>

                <.table_default_cell>

                  <div class="flex gap-1">

                    <.pk_link

                      navigate={"/admin/newsletters/lists/#{list.uuid}/members"}

                      class="btn btn-xs btn-outline"

                      title="View members"

                    >

                      <.icon name="hero-users" class="w-3 h-3 hidden sm:inline" />

                      <span class="sm:hidden whitespace-nowrap">Members</span>

                    </.pk_link>

                    <.pk_link

                      navigate={"/admin/newsletters/lists/#{list.uuid}/edit"}

                      class="btn btn-xs btn-outline"

                      title="Edit"

                    >

                      <.icon name="hero-pencil" class="w-3 h-3 hidden sm:inline" />

                      <span class="sm:hidden whitespace-nowrap">Edit</span>

                    </.pk_link>

                    <button

                      phx-click="show_confirm"

                      phx-value-action="delete"

                      phx-value-uuid={list.uuid}

                      class="btn btn-xs btn-outline btn-error"

                      title="Delete"

                    >

                      <.icon name="hero-trash" class="w-3 h-3 hidden sm:inline" />

                      <span class="sm:hidden whitespace-nowrap">Delete</span>

                    </button>

                  </div>

                </.table_default_cell>

              </.table_default_row>

            <% end %>

          </.table_default_body>

        </.table_default>

      </div>



      <%!-- Lists Cards (mobile) --%>

      <div class="md:hidden mb-6">

        <div class="space-y-3">

          <%= for list <- @lists do %>

            <div class="card card-border card-sm bg-base-100">

              <div class="card-body gap-3">

                <%!-- Header: name + status --%>

                <div class="flex items-start justify-between gap-2">

                  <div class="flex flex-col min-w-0">

                    <span class="font-medium text-sm truncate">{list.name}</span>

                    <%= if list.is_default do %>

                      <span class="badge badge-xs badge-info mt-0.5">Default</span>

                    <% end %>

                  </div>

                  <%= if list.status == "active" do %>

                    <span class="badge badge-sm badge-success">Active</span>

                  <% else %>

                    <span class="badge badge-sm badge-ghost">Archived</span>

                  <% end %>

                </div>



                <%!-- Body: key/value grid --%>

                <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">

                  <div class="text-base-content/60">Slug</div>

                  <div class="font-mono text-xs">{list.slug}</div>



                  <div class="text-base-content/60">Subscribers</div>

                  <div>{list.subscriber_count}</div>

                </div>



                <%!-- Footer: actions --%>

                <div class="card-actions justify-end pt-1 border-t border-base-200">

                  <.pk_link

                    navigate={"/admin/newsletters/lists/#{list.uuid}/members"}

                    class="btn btn-xs btn-outline"

                  >

                    <.icon name="hero-users" class="w-3 h-3" /> Members

                  </.pk_link>

                  <.pk_link

                    navigate={"/admin/newsletters/lists/#{list.uuid}/edit"}

                    class="btn btn-xs btn-outline"

                  >

                    <.icon name="hero-pencil" class="w-3 h-3" /> Edit

                  </.pk_link>

                  <button

                    phx-click="show_confirm"

                    phx-value-action="delete"

                    phx-value-uuid={list.uuid}

                    class="btn btn-xs btn-outline btn-error"

                  >

                    <.icon name="hero-trash" class="w-3 h-3" /> Delete

                  </button>

                </div>

              </div>

            </div>

          <% end %>

        </div>

      </div>

    <% else %>

      <div class="text-center py-12">

        <.icon name="hero-list-bullet" class="w-16 h-16 mx-auto mb-4 opacity-30" />

        <h3 class="text-lg font-medium text-base-content mb-2">No newsletter lists yet</h3>

        <p class="text-base-content/70 mb-4">

          Create your first list to start managing subscribers.

        </p>

        <.pk_link navigate="/admin/newsletters/lists/new" class="btn btn-primary btn-sm">

          <.icon name="hero-plus" class="w-4 h-4 mr-1" /> Create First List

        </.pk_link>

      </div>

    <% end %>

  </div>

</PhoenixKitWeb.Components.LayoutWrapper.app_layout>