|
| 1 | +defmodule YearbookWeb.EntryFormComponent do |
| 2 | + @moduledoc """ |
| 3 | + Entry form component. |
| 4 | + """ |
| 5 | + use YearbookWeb, :live_component |
| 6 | + alias Yearbook.Entries |
| 7 | + alias YearbookWeb.Components.PhotoUploadCard |
| 8 | + import YearbookWeb.Components.PhotoUploadCard |
| 9 | + |
| 10 | + @impl true |
| 11 | + def render(assigns) do |
| 12 | + ~H""" |
| 13 | + <div class="w-full flex justify-center"> |
| 14 | + <div class="w-full max-w-2xl"> |
| 15 | + <header class="mb-10"> |
| 16 | + <h2 class="text-3xl font-bold text-gray-900 tracking-tight"> |
| 17 | + Novo Pedido |
| 18 | + </h2> |
| 19 | + <p class="text-sm text-gray-500 mt-2"> |
| 20 | + Preenche os dados para apareceres no Yearbook. |
| 21 | + </p> |
| 22 | + </header> |
| 23 | +
|
| 24 | + <.form |
| 25 | + for={@form} |
| 26 | + id="entry-form" |
| 27 | + as={:entry} |
| 28 | + phx-target={@myself} |
| 29 | + phx-change="validate" |
| 30 | + phx-submit="save" |
| 31 | + class="space-y-6" |
| 32 | + > |
| 33 | + <.input field={@form[:year]} type="hidden" value={@current_year} /> |
| 34 | +
|
| 35 | + <div class="flex flex-col md:flex-row gap-12 items-start"> |
| 36 | + <div class="grow w-full space-y-6 mt-2"> |
| 37 | + <div> |
| 38 | + <label class="block text-xs font-semibold text-gray-600 mb-2">Nome</label> |
| 39 | + <.input |
| 40 | + field={@form[:name]} |
| 41 | + type="text" |
| 42 | + placeholder="Ex: Angela Martin" |
| 43 | + class="w-full px-5 py-4 rounded-2xl bg-white border border-gray-300 focus:bg-white focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 transition-all outline-none text-sm" |
| 44 | + /> |
| 45 | + </div> |
| 46 | +
|
| 47 | + <div> |
| 48 | + <label class="block text-xs font-semibold text-gray-600 mb-2">Frase</label> |
| 49 | + <.input |
| 50 | + field={@form[:text]} |
| 51 | + type="textarea" |
| 52 | + maxlength="200" |
| 53 | + rows="7" |
| 54 | + placeholder="Max 200 caracteres" |
| 55 | + class="w-full px-5 py-4 rounded-2xl bg-white border border-gray-300 focus:bg-white focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 transition-all outline-none text-sm resize-none" |
| 56 | + /> |
| 57 | + </div> |
| 58 | + </div> |
| 59 | +
|
| 60 | + <div class="shrink-0 w-full md:w-64 flex justify-center md:pt-8"> |
| 61 | + <.photo_upload_card |
| 62 | + upload={@uploads.photo} |
| 63 | + staged_photo_path={@staged_photo_path} |
| 64 | + show_upload_button={false} |
| 65 | + /> |
| 66 | + </div> |
| 67 | + </div> |
| 68 | +
|
| 69 | + <label class="group flex items-center gap-3 px-2 py-4 rounded-2xl bg-orange-50 border border-orange-100 cursor-pointer"> |
| 70 | + <.input |
| 71 | + field={@form[:masters]} |
| 72 | + type="checkbox" |
| 73 | + class="hidden" |
| 74 | + /> |
| 75 | +
|
| 76 | + <div class="flex justify-center items-center w-5 h-5 rounded border border-gray-300 bg-white group-has-checked:bg-orange-200 group-has-checked:border-orange-300"> |
| 77 | + <.icon |
| 78 | + name="hero-check" |
| 79 | + class="size-4 text-gray-900 hidden group-has-checked:block" |
| 80 | + /> |
| 81 | + </div> |
| 82 | +
|
| 83 | + <span class="text-sm font-medium text-gray-700 mt-1"> |
| 84 | + Acabei o Mestrado |
| 85 | + </span> |
| 86 | + </label> |
| 87 | +
|
| 88 | + <div class="pt-4"> |
| 89 | + <button |
| 90 | + type="submit" |
| 91 | + phx-disable-with="A enviar..." |
| 92 | + disabled={upload_in_progress?(@uploads.photo, @staged_photo_path)} |
| 93 | + class="w-full py-4 rounded-2xl bg-black text-white text-xs font-bold tracking-widest uppercase hover:bg-gray-900 hover:shadow-lg transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed" |
| 94 | + > |
| 95 | + <%= if upload_in_progress?(@uploads.photo, @staged_photo_path) do %> |
| 96 | + A carregar foto... |
| 97 | + <% else %> |
| 98 | + Enviar Pedido |
| 99 | + <% end %> |
| 100 | + </button> |
| 101 | + </div> |
| 102 | + </.form> |
| 103 | + </div> |
| 104 | + </div> |
| 105 | + """ |
| 106 | + end |
| 107 | + |
| 108 | + @impl true |
| 109 | + def mount(socket) do |
| 110 | + {:ok, |
| 111 | + socket |
| 112 | + |> assign(:staged_photo_path, nil) |
| 113 | + |> allow_upload(:photo, |
| 114 | + accept: ~w(.jpg .jpeg .png), |
| 115 | + auto_upload: true, |
| 116 | + progress: &handle_progress/3, |
| 117 | + max_entries: 1, |
| 118 | + max_file_size: 5_000_000 |
| 119 | + )} |
| 120 | + end |
| 121 | + |
| 122 | + @impl true |
| 123 | + def update(%{entry: entry} = assigns, socket) do |
| 124 | + current_year = Date.utc_today().year |
| 125 | + changeset = Entries.change_entry(entry, %{"year" => current_year}) |
| 126 | + |
| 127 | + {:ok, |
| 128 | + socket |
| 129 | + |> assign(assigns) |
| 130 | + |> assign(:current_year, current_year) |
| 131 | + |> assign(:staged_photo_path, Map.get(assigns, :staged_photo_path)) |
| 132 | + |> assign_form(changeset)} |
| 133 | + end |
| 134 | + |
| 135 | + @impl true |
| 136 | + def update(assigns, socket) do |
| 137 | + {:ok, assign(socket, assigns)} |
| 138 | + end |
| 139 | + |
| 140 | + @impl true |
| 141 | + def handle_event("validate", %{"entry" => entry_params}, socket) do |
| 142 | + changeset = |
| 143 | + socket.assigns.entry |
| 144 | + |> Entries.change_entry(entry_params) |
| 145 | + |> Map.put(:action, :validate) |
| 146 | + |
| 147 | + {:noreply, assign_form(socket, changeset)} |
| 148 | + end |
| 149 | + |
| 150 | + @impl true |
| 151 | + def handle_event("validate", _params, socket) do |
| 152 | + {:noreply, socket} |
| 153 | + end |
| 154 | + |
| 155 | + @impl true |
| 156 | + def handle_event("save", %{"entry" => entry_params}, socket) do |
| 157 | + entry_params = |
| 158 | + entry_params |
| 159 | + |> Map.put("photo", socket.assigns.staged_photo_path) |
| 160 | + |> Map.put_new("year", socket.assigns.current_year) |
| 161 | + |
| 162 | + case Entries.create_entry(entry_params) do |
| 163 | + {:ok, _entry} -> |
| 164 | + {:noreply, |
| 165 | + socket |
| 166 | + |> put_flash(:info, "Entrada criada com sucesso!") |
| 167 | + |> redirect(to: socket.assigns.patch)} |
| 168 | + |
| 169 | + {:error, %Ecto.Changeset{} = changeset} -> |
| 170 | + {:noreply, assign_form(socket, changeset)} |
| 171 | + end |
| 172 | + end |
| 173 | + |
| 174 | + defp assign_form(socket, %Ecto.Changeset{} = changeset) do |
| 175 | + assign(socket, :form, to_form(changeset)) |
| 176 | + end |
| 177 | + |
| 178 | + defp handle_progress(:photo, entry, socket) do |
| 179 | + if entry.done? do |
| 180 | + file_path = |
| 181 | + consume_uploaded_entry(socket, entry, fn %{path: path} -> |
| 182 | + {:ok, PhotoUploadCard.store_photo(path, entry)} |
| 183 | + end) |
| 184 | + |
| 185 | + {:noreply, assign(socket, :staged_photo_path, file_path)} |
| 186 | + else |
| 187 | + {:noreply, socket} |
| 188 | + end |
| 189 | + end |
| 190 | + |
| 191 | + defp upload_in_progress?(upload, staged_photo_path) do |
| 192 | + staged_photo_path == nil and upload.entries != [] |
| 193 | + end |
| 194 | +end |
0 commit comments