Packages

phoenix_kit

1.7.58
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
221 Versions
38 Dependencies
Dependants
Files
Activity
phoenix_kit lib modules posts web groups.html.heex
Raw

lib/modules/posts/web/groups.html.heex 

<PhoenixKitWeb.Components.LayoutWrapper.app_layout

  flash={@flash}

  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}

  page_title="Post Groups"

  current_path={@url_path}

  project_title={@project_title}

>

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

    <%!-- Header Section --%>

    <.admin_page_header

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

      title="Post Groups"

      subtitle="Organize your posts into collections"

    >

      <:actions>

        <.link

          navigate={Routes.path("/admin/posts/groups/new")}

          class="btn btn-primary btn-sm"

        >

          + New Group

        </.link>

      </:actions>

    </.admin_page_header>



    <%!-- Search Bar --%>

    <div class="bg-base-200 rounded-lg p-6 mb-6">

      <.form for={%{}} phx-change="search" class="space-y-4">

        <div class="form-control">

          <label class="label">

            <span class="label-text font-semibold">Search Groups</span>

          </label>

          <div class="input-group">

            <input

              type="text"

              name="search[query]"

              value={@search_query}

              placeholder="Search by name or description..."

              class="input input-bordered w-full"

            />

            <%= if @search_query != "" do %>

              <button

                type="button"

                phx-click="clear_search"

                class="btn btn-square"

              >

                <.icon name="hero-x-mark" class="w-5 h-5" />

              </button>

            <% end %>

          </div>

        </div>



        <div class="flex gap-2">

          <button type="button" phx-click="refresh" class="btn btn-ghost btn-sm">

            <.icon name="hero-arrow-path" class="w-4 h-4 mr-2" /> Refresh

          </button>

        </div>

      </.form>

    </div>



    <%!-- Groups Grid --%>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <%= if @loading do %>

        <div class="col-span-full text-center py-12">

          <span class="loading loading-spinner loading-lg"></span>

          <p class="mt-2">Loading groups...</p>

        </div>

      <% else %>

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

          <div class="col-span-full text-center py-12">

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

              <.icon name="hero-folder-open" class="w-16 h-16 mx-auto mb-4 opacity-50" />

              <%= if @search_query != "" do %>

                <p class="text-lg mb-2">No groups found</p>

                <p class="text-sm">

                  Try adjusting your search or

                  <button phx-click="clear_search" class="link link-primary">

                    clear search

                  </button>

                </p>

              <% else %>

                <p class="text-lg mb-2">No groups yet</p>

                <p class="text-sm mb-4">Create your first group to start organizing posts</p>

                <.link

                  navigate={Routes.path("/admin/posts/groups/new")}

                  class="btn btn-primary"

                >

                  <.icon name="hero-plus" class="w-5 h-5 mr-2" /> Create First Group

                </.link>

              <% end %>

            </div>

          </div>

        <% else %>

          <%= for group <- @groups do %>

            <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">

              <div class="card-body">

                <%!-- Group Header --%>

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

                  <div class="flex-1">

                    <h2 class="card-title text-xl">

                      <.icon name="hero-folder" class="w-5 h-5" />

                      {group.name}

                    </h2>



                    <%!-- Visibility Badge --%>

                    <div class="mt-1">

                      <span class={"badge #{visibility_badge_class(group.visibility)}"}>

                        {format_visibility(group.visibility)}

                      </span>

                    </div>

                  </div>



                  <%!-- Actions --%>

                  <div class="flex gap-1">

                    <button

                      phx-click="view_group"

                      phx-value-id={group.uuid}

                      class="btn btn-xs btn-ghost"

                      title="View group"

                    >

                      <.icon name="hero-eye" class="w-4 h-4" />

                    </button>

                    <button

                      phx-click="edit_group"

                      phx-value-id={group.uuid}

                      class="btn btn-xs btn-ghost"

                      title="Edit group"

                    >

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

                    </button>

                    <button

                      phx-click="delete_group"

                      phx-value-id={group.uuid}

                      data-confirm="Are you sure you want to delete this group? Posts will not be deleted."

                      class="btn btn-xs btn-ghost text-error"

                      title="Delete group"

                    >

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

                    </button>

                  </div>

                </div>



                <%!-- Description --%>

                <%= if group.description do %>

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

                    {group.description}

                  </p>

                <% end %>



                <%!-- Stats --%>

                <div class="flex items-center gap-4 text-sm mb-3">

                  <div class="flex items-center gap-1">

                    <.icon name="hero-document-text" class="w-4 h-4 text-base-content/60" />

                    <span class="font-semibold">{length(group.posts || [])}</span>

                    <span class="text-base-content/60">posts</span>

                  </div>



                  <%= if group.slug do %>

                    <div class="flex items-center gap-1 text-base-content/60">

                      <.icon name="hero-link" class="w-4 h-4" />

                      <code class="text-xs">{group.slug}</code>

                    </div>

                  <% end %>

                </div>



                <%!-- Dates --%>

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

                  Created {Calendar.strftime(group.inserted_at, "%b %d, %Y")}

                </div>



                <%!-- Actions --%>

                <div class="card-actions justify-end mt-4">

                  <.link

                    navigate={Routes.path("/admin/posts/groups/#{group.uuid}")}

                    class="btn btn-primary btn-sm"

                  >

                    <.icon name="hero-eye" class="w-4 h-4 mr-1" /> View Posts

                  </.link>

                </div>

              </div>

            </div>

          <% end %>

        <% end %>

      <% end %>

    </div>

  </div>

</PhoenixKitWeb.Components.LayoutWrapper.app_layout>