Skip to content

Commit

Permalink
Create tab on edit profile
Browse files Browse the repository at this point in the history
  • Loading branch information
@eltonsantos
eltonsantos committed Sep 27, 2024
1 parent 2d77bc3 commit 59f41a3
Showing 1 changed file with 118 additions and 63 deletions.
181 changes: 118 additions & 63 deletions app/views/devise/registrations/edit.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,131 @@
<div class="container flex animate-up delay-2 bg-white p-8">
<aside class="card bg-white border border-gray-300 rounded-lg p-8 text-center mr-8 justify-center flex flex-col items-center">
<% if resource.avatar? %>
<img src="<%= resource.avatar %>" alt="Avatar" class="rounded-full border-yellow-500 border-4 border-secondary w-28 h-28 mb-4" />
<% else %>
<%= lucide_icon('user-round', class: "rounded-full border-yellow-500 border-4 border-secondary w-28 h-28 mb-4") %>
<% end %>
<h2 class="text-2xl font-semibold mb-4"><%= resource.name %></h2>
<p class="text-lg">
Quantidade de horas que trabalha na semana: <br />
<strong><%= resource.hours_per_week %></strong>
</p>

<div class="flex flex-col items-center mt-4 space-y-4">
<%= link_to "Ver compromissos anteriores", root_path, class: "text-blue-400 font-semibold rounded transition duration-200 hover:text-blue-500" %>
<%= link_to "Histórico de modificações", root_path, class: "text-blue-400 font-semibold rounded transition duration-200 hover:text-blue-500" %>
<%= link_to "Categorias cadastradas", categories_path, class: "text-blue-400 font-semibold rounded transition duration-200 hover:text-blue-500" %>
<%= button_to "Sair", destroy_user_session_path, method: :delete, class: "text-blue-400 font-semibold rounded transition duration-200 hover:text-blue-500" %>
<div class="bg-white p-8">
<div class="tab-section rounded-lg min-h-[400px]">
<div class="flex flex-wrap gap-1 border-b border-stone-300">
<button class="inline-block p-4 text-stone-600 font-semibold rounded-t-lg active"
data-tab-target="#tab1">Editar Perfil</button>
<button class="inline-block p-4 text-stone-600 font-semibold rounded-t-lg active"
data-tab-target="#tab2">Compromissos Anteriores</button>
<button class="inline-block p-4 text-stone-600 font-semibold rounded-t-lg active"
data-tab-target="#tab3">Categorias Cadastradas</button>
<button class="inline-block p-4 text-stone-600 font-semibold rounded-t-lg active"
data-tab-target="#tab4">Histórico de Modificações</button>
</div>
<div class="mt-4">
<div id="tab1" class="tab-content text-gray-700">
<div class="flex">
<aside class="card bg-white border border-gray-300 rounded-lg text-center justify-center flex flex-col items-center w-1/3">
<% if resource.avatar? %>
<img src="<%= resource.avatar %>" alt="Avatar" class="rounded-full border-yellow-500 border-4 border-secondary w-72 h-72 mb-4" />
<% else %>
<%= lucide_icon('user-round', class: "rounded-full border-yellow-500 border-4 border-secondary w-72 h-72 mb-4") %>
<% end %>
<h2 class="text-2xl font-semibold mb-4"><%= resource.name %></h2>
<p class="text-lg">
Quantidade de horas que trabalha na semana: <br />
<strong class="text-5xl"><%= resource.hours_per_week %></strong>
</p>

</aside>
<main class="flex-1">
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, class: 'space-y-4' }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="flex flex-col items-center mt-4 space-y-4">
<%= button_to "Sair", destroy_user_session_path, method: :delete, class: "text-blue-400 font-semibold rounded transition duration-200 hover:text-blue-500" %>
</div>

<div class="field">
<%= f.label :name, class: 'block font-semibold' %>
<%= f.text_field :name, class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Seu nome" %>
</div>
</aside>
<main class="flex-1 p-4">
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, class: 'space-y-4' }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>

<div class="field">
<%= f.label :email, class: 'block font-semibold' %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Seu email" %>
</div>
<div class="field">
<%= f.label :name, class: 'block font-semibold' %>
<%= f.text_field :name, class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Seu nome" %>
</div>

<div class="field">
<%= f.label :avatar, class: 'block font-semibold' %>
<%= f.url_field :avatar, class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "URL da imagem (ex: https://github.com/eltonsantos.png)" %>
</div>
<div class="field">
<%= f.label :email, class: 'block font-semibold' %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Seu email" %>
</div>

<div class="field">
<%= f.label :hours_per_week, class: 'block font-semibold' %>
<%= f.number_field :hours_per_week, step: 0.25, class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Quantidade de horas trabalhadas por semana" %>
</div>
<div class="field">
<%= f.label :avatar, class: 'block font-semibold' %>
<%= f.url_field :avatar, class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "URL da imagem (ex: https://github.com/eltonsantos.png)" %>
</div>

<div class="field">
<%= f.label :password, class: 'block font-semibold' %>
<%= f.password_field :password, autocomplete: "new-password", class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Nova senha (deixe em branco para não alterar)" %>
</div>
<div class="field">
<%= f.label :hours_per_week, class: 'block font-semibold' %>
<%= f.number_field :hours_per_week, step: 0.25, class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Quantidade de horas trabalhadas por semana" %>
</div>

<div class="field">
<%= f.label :password_confirmation, class: 'block font-semibold' %>
<%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Confirme a nova senha" %>
</div>
<div class="field">
<%= f.label :password, class: 'block font-semibold' %>
<%= f.password_field :password, autocomplete: "new-password", class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Nova senha (deixe em branco para não alterar)" %>
</div>

<div class="field">
<%= f.label :current_password, class: 'block font-semibold' %>
<%= f.password_field :current_password, autocomplete: "current-password", class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Senha atual" %>
</div>
<div class="field">
<%= f.label :password_confirmation, class: 'block font-semibold' %>
<%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Confirme a nova senha" %>
</div>

<div class="field">
<%= f.label :current_password, class: 'block font-semibold' %>
<%= f.password_field :current_password, autocomplete: "current-password", class: 'mt-1 block w-full border border-gray-300 rounded-md p-2', placeholder: "Senha atual" %>
</div>

<div class="actions mt-4">
<%= f.submit "Atualizar", class: 'bg-blue-600 text-white font-semibold py-2 px-4 rounded' %>
<div class="actions mt-4">
<%= f.submit "Atualizar", class: 'bg-blue-600 text-white font-semibold py-2 px-4 rounded' %>
</div>
<% end %>

<h3 class="text-lg font-semibold mt-6 border-t-4 border-red-400">Zona de perigo</h3>
<div>
<%= button_to registration_path(resource_name), data: { confirm: "Você tem certeza? Essa ação não poderá ser desfeita e todos os dados serão perdidos!" }, method: :delete, class: 'button orange mt-3 inline-flex items-center bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 font-bold' do %>
<span class="mr-2">
<%= lucide_icon('x', class: 'text-white') %>
</span>
Cancelar minha conta
<% end %>
</div>
</main>
</div>
</div>
<div id="tab2" class="hidden tab-content text-gray-700">
<h4 class="font-bold mt-9 mb-4 text-2xl">Compromissos Anteriores</h4>
<p class="text-xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias aspernatur rem itaque
doloribus culpa similique rerum provident id quos sed.</p>
</div>
<div id="tab3" class="hidden tab-content text-gray-700">
<h4 class="font-bold mt-9 mb-4 text-2xl">Categorias Cadastradas</h4>
<p class="text-xl">Phone no : 0987654321 <br>Address : Netherland</p>
</div>
<div id="tab4" class="hidden tab-content text-gray-700">
<h4 class="font-bold mt-9 mb-4 text-2xl">Histórico de Modificações</h4>
<p class="text-xl">Phone no : 0987654321 <br>Address : Netherland</p>
</div>
<% end %>

<h3 class="text-lg font-semibold mt-6 border-t-4 border-red-400">Zona de perigo</h3>
<div>
<%= button_to registration_path(resource_name), data: { confirm: "Você tem certeza? Essa ação não poderá ser desfeita e todos os dados serão perdidos!" }, method: :delete, class: 'button orange mt-3 inline-flex items-center bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 font-bold' do %>
<span class="mr-2">
<%= lucide_icon('x', class: 'text-white') %>
</span>
Cancelar minha conta
<% end %>
</div>
</main>
</div>
</div>


<script>
const tabs = document.querySelectorAll('[data-tab-target]');
const activeClass = 'text-stone-900';

// Select first tab by default
tabs[0].classList.add(activeClass);
document.querySelector('#tab1').classList.remove('hidden');

tabs.forEach(tab => {
tab.addEventListener('click', () => {
const targetContent = document.querySelector(tab.dataset.tabTarget);
// console.log(targetContent)

document.querySelectorAll('.tab-content').forEach(content => content.classList.add('hidden'));
targetContent.classList.remove('hidden');

// Remove active class from all tabs
document.querySelectorAll('.text-stone-900').forEach(activeTab => activeTab.classList.remove(activeClass));

// Add active class to clicked tab
console.log(tab)
tab.classList.add(activeClass);
});
});
</script>

0 comments on commit 59f41a3

Please sign in to comment.