Update questionnaires views

app/views/oodle/questionnaires/_form.html.erb

@@ -1,4 +1,8 @@
-<%= form_with(model: questionnaire) do |form| %>
+<%= render Oodle::CardComponent.new(
+      title: questionnaire.name,
+      id: "form_questionnaire"
+) do %>
+<%= form_with(model: questionnaire, html: { data: { turbo: "false" }, class: "w-full px-4" }) do |form| %>
   <% if questionnaire.errors.any? %>
     <div style="color: red">
       <h2><%= pluralize(questionnaire.errors.count, "error") %> prohibited this questionnaire from being saved:</h2>
@@ -11,32 +15,41 @@
     </div>
   <% end %>
 
-  <div>
-    <%= form.label :name, style: "display: block" %>
-    <%= form.text_field :name %>
-  </div>
+  <div class="flex flex-wrap justify-between gap-4 my-5">
+    <div class="w-3/4 flex flex-col gap-4">
+      <%= form.label :name, class:"block text-gray-700 text-sm font-bold" %>
+      <%= form.text_field :name, class: "shadow appearance-none border border-red-500 rounded-md w-full py-1.5 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" %>
+    </div>
 
-  <div>
-    <%= form.label :start_date, style: "display: block" %>
-    <%= form.datetime_field :start_date %>
+    <div class="w-1/4 flex flex-col gap-4">
+      <%= form.label :duration, class:"block text-gray-700 text-sm font-bold" %>
+      <%= form.number_field :duration,
+              value: questionnaire.duration,
+              class: "shadow appearance-none border border-red-500 rounded-md py-1.5 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" %>
+    </div>
   </div>
 
-  <div>
-    <%= form.label :end_date, style: "display: block" %>
-    <%= form.datetime_field :end_date %>
-  </div>
+  <div class="grid grid-cols-2 gap-4 mb-5">
+    <div class="col-span-1 flex flex-col gap-4">
+      <%= form.label :start_date, class:"block text-gray-700 text-sm font-bold" %>
+      <%= form.datetime_field :start_date,
+              value: questionnaire.start_date.strftime("%Y-%m-%d %H:%M"),
+              class: "shadow appearance-none border border-red-500 rounded-md w-full py-1.5 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" %>
+    </div>
 
-  <div>
-    <%= form.label :duration, style: "display: block" %>
-    <%= form.number_field :duration %>
-  </div>
+    <div class="col-span-1 flex flex-col gap-4">
+      <%= form.label :end_date, class:"block text-gray-700 text-sm font-bold" %>
+      <%= form.datetime_field :end_date,
+              value: questionnaire.end_date.strftime("%Y-%m-%d %H:%M"),
+              class: "shadow appearance-none border border-red-500 rounded-md w-full py-1.5 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" %>
+    </div>
 
-  <div>
-    <%= form.label :manager_id, style: "display: block" %>
-    <%= form.text_field :manager_id %>
   </div>
 
-  <div>
-    <%= form.submit %>
+  <div class="my-4 flex justify-between">
+    <%= form.submit nil, class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+    <%= link_to "Back", questionnaires_path, class: "w-auto rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
   </div>
 <% end %>
+
+<% end %>

app/views/oodle/questionnaires/_questionnaire.html.erb

@@ -1,63 +1,71 @@
 <% 
+  # Define las acciones para el cuestionario
   show_action = link_to("Show", questionnaire, data: { turbo_frame: "_top" }, class: "px-3 py-1.5 border border-blue-500 text-blue-500 hover:bg-blue-200 hover:text-blue-700 rounded-md font-medium")
   manager_actions = [
-    link_to("Edit", edit_questionnaire_path(questionnaire), class: "px-3 py-1.5 border border-blue-500 text-blue-500 hover:bg-blue-200 hover:text-blue-700 rounded-md font-medium"),
-    button_to("Destroy", questionnaire, method: :delete, data: { turbo_confirm: "Are you sure?" }, class: "px-3 py-1.5 border border-blue-500 text-blue-500 hover:bg-blue-200 hover:text-blue-700 rounded-md font-medium")
+    link_to("Edit", edit_questionnaire_path(questionnaire), data: { turbo_frame: "_top" }, class: "px-3 py-1.5 border border-blue-500 text-blue-500 hover:bg-blue-200 hover:text-blue-700 rounded-md font-medium", aria: { label: "Edit questionnaire" }),
+    button_to("Destroy", questionnaire, method: :delete, data: { turbo_confirm: "Are you sure?" }, class: "px-3 py-1.5 border border-red-500 text-red-500 hover:bg-red-200 hover:text-red-700 rounded-md font-medium", aria: { label: "Delete questionnaire" })
   ]
 
-
-actions = [] 
-actions = [ show_action ] unless action_name == "show"
-actions.concat(manager_actions) if Current.user.manager?
-
+  # Condicionalmente define las acciones a mostrar
+  actions = []
+  actions = [show_action] unless action_name == "show"
+  actions.concat(manager_actions) if Current.user.manager?
 %>
 
 <%= render Oodle::CardComponent.new(
       title: questionnaire.name,
       id: dom_id(questionnaire),
       actions: actions
-    ) do%>
-
-    <div id="<%= dom_id questionnaire %>" class="<%= questionnaire.available? ? 'bg-slate-100' : 'bg-slate-400' %> rounded-lg p-12 relative px-8">
-      <% if @user_questionnaire.present? %>
-        <span class="absolute -top-2 -right-2 text-sm text-green-500 rounded-full px-2 py-1 bg-green-100">
-          <%= number_to_percentage(@user_questionnaire.progress, precision: 2) %>
-        </span>
-      <p class="my-5">
+    ) do %>
+  
+  <section id="<%= dom_id(questionnaire) %>" class=" rounded-lg relative px-8 py-6">
+    <% if @user_questionnaire.present? %>
+      <span class="absolute -top-2 -right-2 text-sm text-green-500 rounded-full px-2 py-1 bg-green-100">
+        <%= number_to_percentage(@user_questionnaire.progress, precision: 2) %>
+      </span>
+      <p class="my-5 flex gap-4">
         <strong class="block font-medium mb-1">Score:</strong>
         <%= @user_questionnaire.score.to_f %>
       </p>
-      <% end %>
-
-      <p class="my-5">
-        <strong class="block font-medium mb-1">Manager:</strong>
-        <%= questionnaire.manager_id %>
-      </p>
+    <% end %>
 
-      <p class="my-5">
-        <strong class="block font-medium mb-1">Name:</strong>
-        <%= questionnaire.name %>
-      </p>  
-
-      <p class="my-5">
-        <strong class="block font-medium mb-1">Available in:</strong>
-
-        <% if questionnaire.available? %>
-          <span>Open</span>  
-        <% elsif questionnaire.start_date > Time.zone.now %>
-          <%= time_ago_in_words(questionnaire.start_date) %>
-        <% else %>
-          <span>Closed</span>
-        <% end %>
-      </p>
+    <p class="my-5 flex gap-4">
+      <strong class="block font-medium mb-1">Manager:</strong>
+      <%= questionnaire.manager.email_address %>
+    </p>
 
-      <p class="my-5">
-        <strong class="block font-medium mb-1">End date:</strong>
-        <%= questionnaire.end_date %>
-      </p>
-    </div>
+    <p class="my-5 flex gap-4">
+      <strong class="block font-medium mb-1">Name:</strong>
+      <%= questionnaire.name %>
+    </p>  
+
+    <p class="my-5 flex gap-4">
+      <strong class="block font-medium mb-1">Availability:</strong>
+      <% if questionnaire.available? %>
+        <span class="text-green-500 font-semibold">Open</span>
+      <% elsif questionnaire.start_date > Time.zone.now %>
+        <span class="text-amber-500 font-semibold"><%= time_ago_in_words(questionnaire.start_date) %> until open</span>
+      <% else %>
+        <span class="text-red-500 font-semibold">Closed</span>
+      <% end %>
+    </p>
+
+    <p class="my-5">
+      <strong class="block font-medium mb-1">End Date:</strong>
+      <%= questionnaire.end_date %>
+    </p>
+  </section>
 
   <% if action_name == "show" %>
-    <%= button_to "Mark as completed", mark_as_completed_answer_path(params[:id]), method: :post, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" if questionnaire.available? && !@user_questionnaire.completed? %>
+    <footer>
+      <% if !Current.user.manager? && questionnaire.available? && !@user_questionnaire.completed? %>
+        <%= button_to "Mark as completed",
+                      mark_as_completed_answer_path(params[:id]),
+                      method: :post,
+                      class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium",
+                      aria: { label: "Mark questionnaire as completed" } %>
+      <% end %>
+    </footer>
   <% end %>
+
 <% end %>

app/views/oodle/questionnaires/edit.html.erb

@@ -1,12 +1,7 @@
 <% content_for :title, "Editing questionnaire" %>
 
-<h1>Editing questionnaire</h1>
-
-<%= render "form", questionnaire: @questionnaire %>
-
-<br>
-
-<div>
-  <%= link_to "Show this questionnaire", @questionnaire %> |
-  <%= link_to "Back to questionnaires", questionnaires_path %>
-</div>
+<section class="container mx-auto px-4">
+<%= turbo_frame_tag "edit_quesitonnaire" do %>
+  <%= render "form", questionnaire: @questionnaire %>
+<% end  %>
+</section>

app/views/oodle/questionnaires/index.html.erb

@@ -9,6 +9,15 @@
     <%= link_to "New questionnaire", new_questionnaire_path, class: "px-3 py-1.5 border border-blue-500 text-blue-500 hover:bg-blue-200 hover:text-blue-700 rounded-md font-medium" if Current.user.manager? %>
   </div>
 
+  <div class="flex items-center gap-4">
+    <% ["open", "closed", "pending"].each do |status| %>
+      <% active = params[:sorted] == status ? "bg-blue-300 text-blue-500" : "" %>
+      <%= link_to status.capitalize,
+            questionnaires_path(sorted: status),
+            class: "rounded-lg py-3 px-5 bg-blue-100 hover:bg-blue-200 inline-block font-medium" %>
+    <% end %>
+  </div>
+
   <div id="questionnaires" class="w-full grid grid-cols-3 gap-4 ">
     <%= render @questionnaires%>
   </div>

app/views/oodle/questionnaires/new.html.erb

@@ -1,5 +1,7 @@
 <% content_for :title, "New questionnaire" %>
 
-<h1>New questionnaire</h1>
-
-<%= render "form", questionnaire: @questionnaire %>
+<section class="container mx-auto px-4">
+<%= turbo_frame_tag "new_quesitonnaire" do %>
+  <%= render "form", questionnaire: @questionnaire %>
+<% end  %>
+</section>