Created
June 28, 2024 02:07
-
-
Save Bishwas-py/cd1a62885bc6343dd9eaf10cf9ebe66f to your computer and use it in GitHub Desktop.
lib/live_view_studio_web/components/layouts/sort_components.ex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| defmodule LiveViewStudioWeb.SortComponents do | |
| use Phoenix.Component | |
| def valid_sort_by(%{"sort_by" => sort_by}) do | |
| String.to_atom(sort_by) | |
| end | |
| def valid_sort_by(_), do: :id | |
| def toggled_sort_order(opts, sort_by) do | |
| if opts.sort_by == sort_by do | |
| case opts.sort_order do | |
| :asc -> "desc" | |
| :desc -> "asc" | |
| end | |
| else | |
| opts.sort_order | |
| end | |
| end | |
| attr :opts, :map, required: true | |
| attr :sort_by, :atom, required: true | |
| def hero_icon(%{opts: %{sort_by: sort_by, sort_order: :asc}} = assigns) | |
| when sort_by == assigns.sort_by do | |
| ~H""" | |
| <Heroicons.chevron_up class="h-5 w-5" /> | |
| """ | |
| end | |
| def hero_icon(%{opts: %{sort_by: sort_by, sort_order: :desc}} = assigns) | |
| when sort_by == assigns.sort_by do | |
| ~H""" | |
| <Heroicons.chevron_down class="h-5 w-5" /> | |
| """ | |
| end | |
| def hero_icon(assigns), do: ~H"" | |
| end | |
| ``` | |
| ``` | |
| defmodule LiveViewStudioWeb.DonationsLive do | |
| use LiveViewStudioWeb, :live_view | |
| alias LiveViewStudio.Donations | |
| import LiveViewStudioWeb.SortComponents | |
| def mount(_params, _session, socket) do | |
| donations = Donations.list_donations() | |
| socket = | |
| assign(socket, | |
| donations: donations | |
| ) | |
| {:ok, socket, temporary_assigns: [donations: []]} | |
| end | |
| def handle_params(unsigned_params, _uri, socket) do | |
| sort_by = valid_sort_by(unsigned_params) | |
| sort_order = Map.get(unsigned_params, "sort_order") || "asc" | |
| opts = %{ | |
| sort_by: sort_by, | |
| sort_order: sort_order |> String.to_atom() | |
| } | |
| donations = | |
| Donations.list_donations(opts) | |
| socket = assign(socket, donations: donations, opts: opts) | |
| {:noreply, socket} | |
| end | |
| attr :opts, :map, required: true | |
| attr :sort_by, :atom, required: true | |
| slot :inner_block, required: true | |
| defp sort_link(assigns) do | |
| ~H""" | |
| <.link | |
| class="flex items-center gap-2" | |
| patch={ | |
| ~p"/donations?#{%{sort_by: @sort_by, sort_order: toggled_sort_order(@opts, @sort_by)}}" | |
| } | |
| > | |
| <.hero_icon sort_by={@sort_by} opts={@opts} /> | |
| <%= render_slot(@inner_block) %> | |
| </.link> | |
| """ | |
| end | |
| end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment