Skip to content

Commit

Permalink
feat: still trying to make the component use 2 times fo the same page
Browse files Browse the repository at this point in the history
  • Loading branch information
@AfonsoMartins26
AfonsoMartins26 committed Oct 6, 2024
1 parent 2c85587 commit bbc6074
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 58 deletions.
68 changes: 24 additions & 44 deletions lib/atomic_web/components/image_uploader.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,51 +20,31 @@ defmodule AtomicWeb.Components.ImageUploader do
~H"""
<div>
<div class="shrink-0 1.5xl:shrink-0">
<.live_file_input upload={@uploads.image} class="hidden" />
<div class={
"#{if length(@uploads.image.entries) != 0 do
"hidden"
end} #{@class} border-2 border-gray-300 border-dashed rounded-md"
} phx-drop-target={unique_ref}>
<div class="flex h-full items-center justify-center px-6">
<div class="flex flex-col items-center justify-center space-y-1">
<svg class="size-12 mx-auto text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div class="flex flex-col items-center text-sm text-gray-600">
<label for="file-upload" class="relative cursor-pointer rounded-md font-medium text-orange-500 hover:text-red-800">
<a onclick={"document.getElementById('#{unique_ref}').click()"}>Upload a file</a>
</label>
<p class="pl-1">or drag and drop</p>
</div>
<p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
</div>
</div>
</div>
<section>
<%= for entry <- @uploads.image.entries do %>
<%= for err <- upload_errors(@uploads.image, entry) do %>
<p class="alert alert-danger"><%= Phoenix.Naming.humanize(err) %></p>
<.live_file_input upload={@uploads[@upload_name]} class="hidden" id={unique_ref <> "_file"} />
<section>
<%= for entry <- @uploads[@upload_name].entries do %>
<%= for err <- upload_errors(@uploads[@upload_name], entry) do %>
<p class="alert alert-danger"><%= Phoenix.Naming.humanize(err) %></p>
<% end %>
<article class="upload-entry">
<figure class="w-[400px]">
<.live_img_preview entry={entry} />
<div class="flex">
<figcaption>
<%= if String.length(entry.client_name) < 30 do %>
<%= entry.client_name %>
<% else %>
<%= String.slice(entry.client_name, 0..30) <> "... " %>
<% end %>
</figcaption>
<button type="button" phx-click="cancel-image" phx-target={@target} phx-value-ref={entry.ref} aria-label="cancel" class="pl-4">
<.icon name="hero-x-mark-solid" class="size-5 text-gray-400" />
</button>
</div>
</figure>
</article>
<% end %>
<article class="upload-entry">
<figure class="w-[400px]">
<.live_img_preview entry={entry} />
<div class="flex">
<figcaption>
<%= if String.length(entry.client_name) < 30 do %>
<%= entry.client_name %>
<% else %>
<%= String.slice(entry.client_name, 0..30) <> "... " %>
<% end %>
</figcaption>
<button type="button" phx-click="cancel-image" phx-target={@target} phx-value-ref={entry.ref} aria-label="cancel" class="pl-4">
<.icon name="hero-x-mark-solid" class="size-5 text-gray-400" />
</button>
</div>
</figure>
</article>
<% end %>
</section>
</section>
</div>
</div>
"""
Expand Down
24 changes: 15 additions & 9 deletions lib/atomic_web/live/profile_live/form_component.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ defmodule AtomicWeb.ProfileLive.FormComponent do
def mount(socket) do
{:ok,
socket
|> allow_upload(:picture, accept: @extensions_whitelist, max_entries: 1)}
|> allow_upload(:picture_1, accept: @extensions_whitelist, max_entries: 1)
|> allow_upload(:picture_2, accept: @extensions_whitelist, max_entries: 1)}
end

@impl true
Expand Down Expand Up @@ -68,21 +69,26 @@ defmodule AtomicWeb.ProfileLive.FormComponent do
end

defp consume_image_data(socket, user) do
consume_uploaded_entries(socket, :image, fn %{path: path}, entry ->
consume_uploaded_entries(socket, :picture_1, fn %{path: path}, entry ->
Accounts.update_user(user, %{
"image" => %Plug.Upload{
"image_1" => %Plug.Upload{
content_type: entry.client_type,
filename: entry.client_name,
path: path
}
})
end)
|> case do
[{:ok, user}] ->
{:ok, user}

_errors ->
{:ok, user}
end
consume_uploaded_entries(socket, :picture_2, fn %{path: path}, entry ->
Accounts.update_user(user, %{
"image_2" => %Plug.Upload{
content_type: entry.client_type,
filename: entry.client_name,
path: path
}
})
end)

{:ok, user}
end
end
39 changes: 34 additions & 5 deletions lib/atomic_web/live/profile_live/form_component.html.heex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,11 @@
<div class="flex flex-col text-sm w-full sm:w-96 text-red-600"><%= error_tag(f, :phone_number) %></div>
</div>
</div>
<.live_file_input upload={@uploads.picture} class="hidden" />
<a onclick={"document.getElementById('#{@uploads.picture.ref}').click()"}>
<.live_component module={AtomicWeb.Components.ImageUploader} id="uploader_1" uploads={@uploads} upload_name={:picture_1} target={@myself} />
<!-- se tirar o <a> o codigo funciona mas não faz upload -->
<a onclick={"document.getElementById('#{@uploads[@upload_name].ref}').click()"}>
<div class={
"#{if length(@uploads.picture.entries) != 0 do
"#{if length(@uploads.picture_1.entries) != 0 do
"hidden"
end} relative w-40 h-40 ring-2 ring-zinc-300 rounded-full cursor-pointer bg-zinc-400 sm:w-48 group sm:h-48 hover:bg-tertiary"
}>
Expand All @@ -59,8 +60,36 @@
</div>
</div>
<section>
<%= for entry <- @uploads.picture.entries do %>
<%= for err <- upload_errors(@uploads.picture, entry) do %>
<%= for entry <- @uploads.picture_1.entries do %>
<%= for err <- upload_errors(@uploads.picture_1, entry) do %>
<p class="alert alert-danger"><%= Phoenix.Naming.humanize(err) %></p>
<% end %>
<article class="flex relative items-center w-40 h-40 sm:w-48 sm:h-48 bg-white rounded-full cursor-pointer upload-entry group">
<div class="flex absolute z-10 justify-center items-center w-full h-full rounded-full">
<.icon name="hero-camera" class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white text-opacity-0 rounded-full group-hover:text-opacity-100" />
</div>
<figure class="flex justify-center items-center w-full h-full rounded-full group-hover:opacity-80">
<.live_img_preview entry={entry} class="object-cover object-center rounded-full w-40 h-40 sm:w-48 sm:h-48 border-4 border-white" />
</figure>
</article>
<% end %>
</section>
</a>
<.live_component module={AtomicWeb.Components.ImageUploader} id="uploader_2" uploads={@uploads} upload_name={:picture_2} target={@myself} />
<!-- se tirar o <a> o codigo funciona mas não faz upload -->
<a onclick={"document.getElementById('#{@uploads[@upload_name].ref}').click()"}>
<div class={
"#{if length(@uploads.picture_2.entries) != 0 do
"hidden"
end} relative w-40 h-40 ring-2 ring-zinc-300 rounded-full cursor-pointer bg-zinc-400 sm:w-48 group sm:h-48 hover:bg-tertiary"
}>
<div class="flex absolute justify-center items-center w-full h-full">
<.icon name="hero-camera" class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white group-hover:text-opacity-70" />
</div>
</div>
<section>
<%= for entry <- @uploads.picture_2.entries do %>
<%= for err <- upload_errors(@uploads.picture_2, entry) do %>
<p class="alert alert-danger"><%= Phoenix.Naming.humanize(err) %></p>
<% end %>
<article class="flex relative items-center w-40 h-40 sm:w-48 sm:h-48 bg-white rounded-full cursor-pointer upload-entry group">
Expand Down

0 comments on commit bbc6074

Please sign in to comment.