Skip to content

Commit

Permalink
Add filter parsing/serializing with UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@tfwright
tfwright committed Nov 17, 2024
1 parent b1b458c commit 091b503
Show file tree
Hide file tree
Showing 6 changed files with 342 additions and 63 deletions.
58 changes: 54 additions & 4 deletions assets/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -490,11 +490,34 @@ input[type="submit"] {
@apply font-semibold;
}

#pagination-modal label {
#settings-modal label {
@apply bg-inherit;
@apply w-1/2;
}

#list-filters > div:nth-child(1) {
@apply flex;
@apply justify-evenly;
}

#list-filters div > div:nth-child(1) {
@apply flex;
}

#list-filters > div > div:nth-child(2) {
@apply flex;
@apply justify-evenly;
}

#list-filters div > div:nth-child(2) > * {
@apply w-1/4;
@apply leading-5;
}

#list-filters > div:last-of-type {
@apply justify-start;
}

.resource__table dd {
@apply mb-5;
}
Expand Down Expand Up @@ -670,6 +693,10 @@ input[type="submit"] {
@apply pb-6;
}

.field__array--row input:not(first-of-type) {
@apply mr-2;
}

.field__array--group a.button__add {
@apply absolute;
@apply -left-0;
Expand Down Expand Up @@ -841,21 +868,44 @@ input[type="submit"] {
@apply mr-2;
}

.modal input {
@apply grow;
.modal__title {
@apply text-lg;
@apply font-bold;
@apply border-b-2;
}

.modal__title {
.modal__tabs {
@apply border-b-2;
}

.modal__tabs > .modal__title--active {
@apply text-lg;
@apply font-bold;
@apply border-b-2;
@apply inline-block;
@apply mr-2;
@apply border-0;
}

.modal__tabs > .modal__title {
@apply inline-block;
@apply mr-2;
@apply border-0;
@apply cursor-pointer;
}

.modal form > div {
@apply flex;
@apply my-1;
@apply items-center;
}

.modal form > input[type="submit"] {
@apply w-24;
@apply mx-auto;
}


.modal form > div:last-of-type {
@apply mb-3;
}
Expand Down
63 changes: 59 additions & 4 deletions dist/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1242,11 +1242,34 @@ input[class$="-loading"] + div nav:before {
font-weight: 600;
}

#pagination-modal label {
#settings-modal label {
background-color: inherit;
width: 50%;
}

#list-filters > div:nth-child(1) {
display: flex;
justify-content: space-evenly;
}

#list-filters div > div:nth-child(1) {
display: flex;
}

#list-filters > div > div:nth-child(2) {
display: flex;
justify-content: space-evenly;
}

#list-filters div > div:nth-child(2) > * {
width: 25%;
line-height: 1.25rem;
}

#list-filters > div:last-of-type {
justify-content: flex-start;
}

.resource__table dd {
margin-bottom: 1.25rem;
}
Expand Down Expand Up @@ -1448,6 +1471,10 @@ input[class$="-loading"] + div nav:before {
padding-bottom: 1.5rem;
}

.field__array--row input:not(first-of-type) {
margin-right: 0.5rem;
}

.field__array--group a.button__add {
position: absolute;
left: -0px;
Expand Down Expand Up @@ -1717,6 +1744,10 @@ input[class$="-loading"] + div nav:before {
opacity: 1;
}

.opacity-30 {
opacity: 0.3;
}

.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
Expand Down Expand Up @@ -1837,21 +1868,45 @@ input[type="submit"] {
margin-right: 0.5rem;
}

.modal input {
flex-grow: 1;
.modal__title {
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
border-bottom-width: 2px;
}

.modal__title {
.modal__tabs {
border-bottom-width: 2px;
}

.modal__tabs > .modal__title--active {
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
border-bottom-width: 2px;
display: inline-block;
margin-right: 0.5rem;
border-width: 0px;
}

.modal__tabs > .modal__title {
display: inline-block;
margin-right: 0.5rem;
border-width: 0px;
cursor: pointer;
}

.modal form > div {
display: flex;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
align-items: center;
}

.modal form > input[type="submit"] {
width: 6rem;
margin-left: auto;
margin-right: auto;
}

.modal form > div:last-of-type {
Expand Down
131 changes: 114 additions & 17 deletions lib/live_admin/components/resource/index.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ defmodule LiveAdmin.Components.Container.Index do
socket =
socket
|> assign(assigns)
|> assign(search: assigns.search || "")
|> assign_async(
[:records],
fn ->
Expand Down Expand Up @@ -60,9 +61,13 @@ defmodule LiveAdmin.Components.Container.Index do
/>
</form>
<button
phx-click="search"
phx-value-query=""
phx-target={@myself}
phx-click={
JS.show(to: "#settings-modal")
|> JS.add_class("hidden", to: "#settings-modal > div > div:nth-child(2)")
|> JS.remove_class("hidden", to: "#settings-modal > div > div:nth-child(3)")
|> JS.remove_class("opacity-30", to: "#settings-modal .modal__title:nth-child(2)")
|> JS.add_class("opacity-30", to: "#settings-modal .modal__title:nth-child(1)")
}
class="flex items-center justify-center px-2 border-l"
>
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
Expand Down Expand Up @@ -229,7 +234,7 @@ defmodule LiveAdmin.Components.Container.Index do
class="resource__action--secondary"
phx-click={
JS.show(
to: "#pagination-modal",
to: "#settings-modal",
transition: {"ease-in duration-300", "opacity-0", "opacity-100"}
)
}
Expand Down Expand Up @@ -296,19 +301,71 @@ defmodule LiveAdmin.Components.Container.Index do
</div>
</div>
</div>
<.modal id="pagination-modal">
<div class="modal__title"><%= trans("Page") %></div>
<form phx-submit="go" phx-target={@myself}>
<div>
<label><%= trans("Number") %></label>
<input type="number" name="page" value={@page} />
</div>
<div>
<label><%= trans("Size") %></label>
<input type="number" name="per" value={@per} />
</div>
<input type="submit" value="Go" phx-click={JS.hide(to: "#pagination-modal")} />
</form>
<.modal id="settings-modal">
<div class="modal__tabs">
<a
class="modal__title"
phx-click={
JS.add_class("hidden", to: "#settings-modal > div > div:nth-child(3)")
|> JS.remove_class("hidden", to: "#settings-modal > div > div:nth-child(2)")
|> JS.remove_class("opacity-30")
|> JS.add_class("opacity-30", to: "#settings-modal .modal__title:nth-child(2)")
}
>
<%= trans("Page") %>
</a>
<a
class="modal__title opacity-30"
phx-click={
JS.add_class("hidden", to: "#settings-modal > div > div:nth-child(2)")
|> JS.remove_class("hidden", to: "#settings-modal > div > div:nth-child(3)")
|> JS.remove_class("opacity-30")
|> JS.add_class("opacity-30", to: "#settings-modal .modal__title:nth-child(1)")
}
>
<%= trans("Filters") %>
</a>
</div>
<div>
<form phx-submit="go" phx-target={@myself}>
<div>
<label><%= trans("Number") %></label>
<input type="number" name="page" value={@page} />
</div>
<div>
<label><%= trans("Size") %></label>
<input type="number" name="per" value={@per} />
</div>
<input type="submit" value={trans("Go")} phx-click={JS.hide(to: "#settings-modal")} />
</form>
</div>
<div class="hidden">
<form phx-submit="update_filters" phx-target={@myself} id="list-filters">
<%= for {{col, val}, i} <- @search |> LiveAdmin.View.parse_search() |> Enum.with_index() do %>
<div>
<div>
<a href="#" class="button__remove" phx-click={JS.exec("alert('remove')")} />
</div>
<div>
<select name={"filters[#{i}][field]"}>
<option selected={is_nil(col)}><%= trans("any") %></option>
<%= for {field, _, _} <- Resource.fields(@resource, @config) do %>
<option selected={col == to_string(field)}><%= to_string(field) %></option>
<% end %>
</select>
<select name={"filters[#{i}][operator]"} disabled="disabled">
<option>contains</option>
</select>
<input type="text" name={"filters[#{i}][param]"} value={val} />
</div>
</div>
<% end %>
<div>
<a href="#" phx-target={@myself} phx-click="add_filter" class="button__add" />
</div>
<input type="submit" value={trans("Apply")} phx-click={JS.hide(to: "#settings-modal")} />
</form>
</div>
</.modal>
</div>
"""
Expand Down Expand Up @@ -336,6 +393,46 @@ defmodule LiveAdmin.Components.Container.Index do
)}
end

@impl true
def handle_event("add_filter", _, socket = %{assigns: assigns}) do
new_search =
socket.assigns.search
|> LiveAdmin.View.parse_search()
|> Enum.concat([{"*", "_"}])
|> Enum.map_join(" ", fn
{field, param} -> "#{field}:#{param}"
end)

{:noreply,
push_patch(socket,
to:
route_with_params(socket.assigns,
params: list_link_params(assigns, search: new_search)
)
)}
end

@impl true
def handle_event("update_filters", %{"filters" => filter_params}, socket = %{assigns: assigns}) do
new_search =
filter_params
|> Map.values()
|> Enum.filter(fn p -> p["param"] != "" end)
|> Enum.map_join(" ", fn
%{"field" => "any", "param" => param} -> "*:#{param}"
%{"field" => field, "param" => param} -> "#{field}:#{param}"
{field, param} -> "#{field}:#{param}"
end)

{:noreply,
push_patch(socket,
to:
route_with_params(socket.assigns,
params: list_link_params(assigns, search: new_search)
)
)}
end

@impl true
def handle_event(
"action",
Expand Down
Loading

0 comments on commit 091b503

Please sign in to comment.