Update modal forms (#24)

cesium · Jul 26, 2022 · acf3389 · acf3389
1 parent a53fd9d
commit acf3389
Show file tree

Hide file tree

Showing 12 changed files with 116 additions and 51 deletions.
diff --git a/lib/yearbook_web/live/admin/academic_year_live/form_component.html.heex b/lib/yearbook_web/live/admin/academic_year_live/form_component.html.heex
@@ -1,17 +1,36 @@
 <div>
-  <h2><%= @title %></h2>
-
   <.form let={f} for={@changeset} id="academic_year-form" phx-target={@myself} phx-change="validate" phx-submit="save">
-    <%= label(f, :start) %>
-    <%= number_input(f, :start) %>
-    <%= error_tag(f, :start) %>
+    <div class="px-5 py-5 bg-white sm:p-6">
+      <div class="grid grid-cols-6 gap-6">
+        <div class="col-span-6 sm:col-span-6">
+          <label for="title" class="block text-base font-medium text-gray-700">
+            <h2><%= @title %></h2>
+          </label>
+        </div>
 
-    <%= label(f, :finish) %>
-    <%= number_input(f, :finish) %>
-    <%= error_tag(f, :finish) %>
+        <div class="col-span-4 sm:col-span-1">
+          <%= label(f, "Começo", class: "block text-base font-medium text-gray-700") %>
+          <label>
+            <%= select(f, :start, 2022..1970, prompt: "Ano", class: "mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm") %>
+          </label>
+          <div class="px-4 py-3 bg-white-50 text-right sm:px-6"></div>
+          <%= error_tag(f, :start) %>
+        </div>
 
-    <div>
-      <%= submit("Save", phx_disable_with: "Saving...") %>
+        <div class="col-span-4 sm:col-span-1">
+          <%= label(f, "Fim", class: "block text-base font-medium text-gray-700") %>
+          <label>
+            <%= select(f, :finish, 2023..1970, prompt: "Ano", class: "mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm") %>
+          </label>
+          <div class="px-4 py-3 bg-white-50 text-right sm:px-6"></div>
+          <%= error_tag(f, :finish) %>
+        </div>
+      </div>
+      <div class="px-4 py-3 bg-white-50 text-right sm:px-6">
+        <%= submit(class: "inline-flex items-center justify-center rounded-md border border-transparent bg-orange-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 sm:w-auto") do %>
+          Guardar
+        <% end %>
+      </div>
     </div>
   </.form>
 </div>
diff --git a/lib/yearbook_web/live/admin/academic_year_live/index.ex b/lib/yearbook_web/live/admin/academic_year_live/index.ex
@@ -23,7 +23,7 @@ defmodule YearbookWeb.Admin.AcademicYearLive.Index do
 
   defp apply_action(socket, :new, _params) do
     socket
-    |> assign(:page_title, "New Academic year")
+    |> assign(:page_title, "Novo Ano")
     |> assign(:academic_year, %AcademicYear{})
   end
 

diff --git a/lib/yearbook_web/live/admin/academic_year_live/index.html.heex b/lib/yearbook_web/live/admin/academic_year_live/index.html.heex
@@ -13,7 +13,7 @@
     <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
       <%= live_patch to: Routes.admin_academic_year_index_path(@socket, :new) do %>
         <button type="button" class="inline-flex items-center justify-center rounded-md border border-transparent bg-orange-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 sm:w-auto">
-          Novo ano
+          Novo Ano
         </button>
       <% end %>
     </div>

diff --git a/lib/yearbook_web/live/admin/class_live/form_component.html.heex b/lib/yearbook_web/live/admin/class_live/form_component.html.heex
@@ -1,21 +1,47 @@
 <div>
-  <h2><%= @title %></h2>
-
   <.form let={f} for={@changeset} id="class-form" phx-target={@myself} phx-change="validate" phx-submit="save">
-    <%= label(f, :degree_id) %>
-    <%= select(f, :degree_id, Enum.map(@degrees, &{&1.name, &1.id})) %>
-    <%= error_tag(f, :degree_id) %>
+    <div class="px-4 py-5 bg-white sm:p-6">
+      <div class="grid grid-cols-6 gap-6">
+        <div class="col-span-6 sm:col-span-6">
+          <label for="title" class="block text-base font-medium text-gray-700">
+            <h2><%= @title %></h2>
+          </label>
+        </div>
+
+        <div class="col-span-6 sm:col-span-4">
+          <%= label(f, "Curso", class: "block text-base font-medium text-gray-700") %>
+          <label>
+            <%= select(f, :degree_id, Enum.map(@degrees, &{&1.name, &1.id}), class: "mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm") %>
+          </label>
+          <div class="px-4 py-3 bg-white-50 text-right sm:px-6"></div>
+          <%= error_tag(f, :degree_id) %>
+        </div>
+        <div class="px-4 py-3 bg-white-50 text-right sm:px-6"></div>
 
-    <%= label(f, :academic_year_id) %>
-    <%= select(f, :academic_year_id, Enum.map(@academic_years, &{"#{&1.start}/#{&1.finish}", &1.id})) %>
-    <%= error_tag(f, :academic_year_id) %>
+        <div class="col-span-6 sm:col-span-2">
+          <%= label(f, "Ano Letivo", class: "block text-base font-medium text-gray-700") %>
+          <label>
+            <%= select(f, :academic_year_id, Enum.map(@academic_years, &{"#{&1.start}/#{&1.finish}", &1.id}), prompt: "Ano Letivo", class: "mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm") %>
+          </label>
+          <div class="px-4 py-3 bg-white-50 text-right sm:px-6"></div>
+          <%= error_tag(f, :academic_year_id) %>
+        </div>
 
-    <%= label(f, :year) %>
-    <%= number_input(f, :year) %>
-    <%= error_tag(f, :year) %>
+        <div class="col-span-6 sm:col-span-2">
+          <%= label(f, "Ano", class: "block text-base font-medium text-gray-700") %>
+          <label>
+            <%= select(f, :year, 1..5, prompt: "Ano", class: "mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm") %>
+          </label>
+          <div class="px-4 py-3 bg-white-50 text-right sm:px-6"></div>
+          <%= error_tag(f, :year) %>
+        </div>
+      </div>
 
-    <div>
-      <%= submit("Save", phx_disable_with: "Saving...") %>
+      <div class="px-4 py-3 bg-white-50 text-right sm:px-6">
+        <%= submit(class: "inline-flex items-center justify-center rounded-md border border-transparent bg-orange-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 sm:w-auto") do %>
+          Guardar
+        <% end %>
+      </div>
     </div>
   </.form>
 </div>
diff --git a/lib/yearbook_web/live/admin/class_live/index.ex b/lib/yearbook_web/live/admin/class_live/index.ex
@@ -23,7 +23,7 @@ defmodule YearbookWeb.Admin.ClassLive.Index do
 
   defp apply_action(socket, :new, _params) do
     socket
-    |> assign(:page_title, "New Class")
+    |> assign(:page_title, "Nova Turma")
     |> assign(:class, %Class{})
   end
 

diff --git a/lib/yearbook_web/live/admin/degree_live/form_component.html.heex b/lib/yearbook_web/live/admin/degree_live/form_component.html.heex
@@ -1,17 +1,34 @@
 <div>
-  <h2><%= @title %></h2>
-
   <.form let={f} for={@changeset} id="degree-form" phx-target={@myself} phx-change="validate" phx-submit="save">
-    <%= label(f, :name) %>
-    <%= text_input(f, :name) %>
-    <%= error_tag(f, :name) %>
+    <div class="px-5 py-5 bg-white sm:p-6">
+      <div class="grid grid-cols-6 gap-6">
+        <div class="col-span-6 sm:col-span-6">
+          <label for="title" class="block text-base font-medium text-gray-700">
+            <h2><%= @title %></h2>
+          </label>
+        </div>
 
-    <%= label(f, :cycle) %>
-    <%= number_input(f, :cycle) %>
-    <%= error_tag(f, :cycle) %>
+        <div class="col-span-4 sm:col-span-4">
+          <%= label(f, "Curso", class: "block text-base font-medium text-gray-700") %>
+          <%= text_input(f, :name, autocomplete: "off", class: "mt-1 focus:ring-orange-500 focus:border-orange-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md") %>
+          <div class="px-4 py-3 bg-white-50 text-right sm:px-6"></div>
+          <%= error_tag(f, :name) %>
+        </div>
 
-    <div>
-      <%= submit("Save", phx_disable_with: "Saving...") %>
+        <div class="col-span-4 sm:col-span-1">
+          <%= label(f, "Ciclo", class: "block text-base font-medium text-gray-700") %>
+          <label>
+            <%= select(f, :cycle, 1..3, prompt: "Ciclo", class: "mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm") %>
+          </label>
+          <div class="px-4 py-3 bg-white-50 text-right sm:px-6"></div>
+          <%= error_tag(f, :cycle) %>
+        </div>
+      </div>
+      <div class="px-4 py-3 bg-white-50 text-right sm:px-6">
+        <%= submit(class: "inline-flex items-center justify-center rounded-md border border-transparent bg-orange-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 sm:w-auto") do %>
+          Guardar
+        <% end %>
+      </div>
     </div>
   </.form>
 </div>
diff --git a/lib/yearbook_web/live/admin/degree_live/index.ex b/lib/yearbook_web/live/admin/degree_live/index.ex
@@ -23,7 +23,7 @@ defmodule YearbookWeb.Admin.DegreeLive.Index do
 
   defp apply_action(socket, :new, _params) do
     socket
-    |> assign(:page_title, "New Degree")
+    |> assign(:page_title, "Novo Curso")
     |> assign(:degree, %Degree{})
   end
 

diff --git a/lib/yearbook_web/live/admin/degree_live/index.html.heex b/lib/yearbook_web/live/admin/degree_live/index.html.heex
@@ -31,7 +31,7 @@
           </th>
         </tr>
       </thead>
-      <tbody id="classes " class="divide-y divide-gray-200 bg-white">
+      <tbody id="degrees" class="divide-y divide-gray-200 bg-white">
         <%= for degree <- @degrees do %>
           <tr id={"degree-#{degree.id}"}>
             <td class="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-6">

diff --git a/lib/yearbook_web/live/admin/degree_live/show.html.heex b/lib/yearbook_web/live/admin/degree_live/show.html.heex
@@ -9,12 +9,12 @@
 
   <ul>
     <li>
-      <strong>Name:</strong>
+      <strong>Curso:</strong>
       <%= @degree.name %>
     </li>
 
     <li>
-      <strong>Cycle:</strong>
+      <strong>Ciclo:</strong>
       <%= @degree.cycle %>
     </li>
   </ul>

diff --git a/lib/yearbook_web/live/live_helpers.ex b/lib/yearbook_web/live/live_helpers.ex
@@ -31,16 +31,19 @@ defmodule YearbookWeb.LiveHelpers do
 
     ~H"""
     <div id="modal" class="phx-modal fade-in" phx-remove={hide_modal()}>
-      <div id="modal-content" class="phx-modal-content fade-in-scale" phx-click-away={JS.dispatch("click", to: "#close")} phx-window-keydown={JS.dispatch("click", to: "#close")} phx-key="escape">
+      <div id="modal-content" class="shadow overflow-hidden sm:rounded-md phx-modal-content fade-in-scale max-w-7xl" phx-click-away={JS.dispatch("click", to: "#close")} phx-window-keydown={JS.dispatch("click", to: "#close")} phx-key="escape">
         <%= if @return_to do %>
-          <%= live_patch("✖",
-            to: @return_to,
-            id: "close",
-            class: "phx-modal-close",
-            phx_click: hide_modal()
-          ) %>
+          <%= live_patch to: @return_to, id: "close", class: "phx-modal-close", phx_click: hide_modal()  do %>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          <% end %>
         <% else %>
-          <a id="close" href="#" class="phx-modal-close" phx-click={hide_modal()}>✖</a>
+          <a id="close" href="#" class="phx-modal-close" phx-click={hide_modal()}>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </a>
         <% end %>
 
         <%= render_slot(@inner_block) %>

diff --git a/test/yearbook_web/live/admin/academic_year_live_test.exs b/test/yearbook_web/live/admin/academic_year_live_test.exs
@@ -25,8 +25,8 @@ defmodule YearbookWeb.Admin.AcademicYearLiveTest do
     test "saves new academic_year", %{conn: conn} do
       {:ok, index_live, _html} = live(conn, Routes.admin_academic_year_index_path(conn, :index))
 
-      assert index_live |> element("a", "Novo ano") |> render_click() =~
-               "New Academic year"
+      assert index_live |> element("a", "Novo Ano") |> render_click() =~
+               "Novo Ano"
 
       assert_patch(index_live, Routes.admin_academic_year_index_path(conn, :new))
 

diff --git a/test/yearbook_web/live/admin/degree_live_test.exs b/test/yearbook_web/live/admin/degree_live_test.exs
@@ -27,7 +27,7 @@ defmodule YearbookWeb.Admin.DegreeLiveTest do
       {:ok, index_live, _html} = live(conn, Routes.admin_degree_index_path(conn, :index))
 
       assert index_live |> element("a", "Novo Curso") |> render_click() =~
-               "New Degree"
+               "Novo Curso"
 
       assert_patch(index_live, Routes.admin_degree_index_path(conn, :new))