Add done task percentage

app/assets/stylesheets/application.css

@@ -1,10 +1,32 @@
-/*
+/* application.css */
- * This is a manifest file that'll be compiled into application.css.
+
- *
+body {
- * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
+  font-family: sans-serif;
- * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
+  background-color: #f9f9f9;
- * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
+  margin: 18px;
- * depending on specificity.
+  padding: 0;
- *
+}
- * Consider organizing styles into separate files for maintainability.
+
- */
+li {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 10px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between; 
+  align-items: center;          
+}
+
+.task-actions {
+  display: flex;
+  gap: 8px;      
+}
+
+.done-task {
+  background-color: #f0f0f0;  
+  color: #888;               
+}
+
+.done-task .task-title {
+  text-decoration: line-through; 
+}

app/views/projects/index.html.erb

@@ -1,15 +1,35 @@
 <h1>Projects</h1>
 
-<ul>
+<div class="projects-list">
+  <ul>
     <% @projects.each do |project| %>
-    <li><h3><a href="<%= project_path(project) %>"><%= project.project_name %></a></h3></li> 
+      <% total_tasks = project.tasks.count %>
+      <% done_tasks_count = project.tasks.where(status: "done").count %>
 
+      <li>
+        <div class="project-item">
+            <%= link_to project.project_name, project_path(project) %>
+        </div>
+        
+
+        <div class="project-actions">
           <%= link_to "Destroy", project_path(project), data: {
                 turbo_method: :delete,
                 turbo_confirm: "Are you sure?"
               } %>
+        </div>
+
+        <div class="project-done">
+          <% if total_tasks.zero? %>
+            No tasks yet
+          <% else %>
+            Done tasks: <%= ((done_tasks_count.to_f / total_tasks) * 100).round %>%
           <% end %>
-</ul>
+        </div>
+      </li>
+    <% end %>
+  </ul>
+</div>
 
 <br>
 <h2><%= link_to "Add Project", new_project_path %></h2>

app/views/projects/show.html.erb

@@ -2,19 +2,21 @@
 <p><%= @project.description %></p>
 
 <%= turbo_frame_tag "tasks" do %>
-  <ul id="tasks_list">
-    <% # First: pending or in-progress tasks %>
-    <%= render @project.tasks.reject { |t| t.status == "done" } %>
 
-    <% done_tasks = @project.tasks.select { |t| t.status == "done" } %>
+  <ul id="active_tasks">
-    <% if done_tasks.any? %>
+    <% @project.tasks.where(status: %w[to_do in_progress]).each do |task| %>
-      <%= render done_tasks %>
+      <%= render partial: "tasks/task", locals: { task: task } %>
     <% end %>
   </ul>
+
+  <ul id="done_tasks">
+    <% @project.tasks.where(status: "done").each do |task| %>
+      <%= render partial: "tasks/task", locals: { task: task } %>
+    <% end %>
+  </ul>
+
 <% end %>
 
 <%= turbo_frame_tag "new_task" do %>
-  <br>
-  <h2>Add New Task</h2>
   <%= render "tasks/form", project: @project, task: Task.new %>
 <% end %>

app/views/tasks/_form.html.erb

@@ -1,3 +1,5 @@
+<h2>Add New Task</h2>
+
 <%= form_with model: [project, task], local: false do |f| %>
   <p>
     <%= f.label :title %><br>
@@ -6,7 +8,7 @@
 
   <p>
     <%= f.label :status %><br>
-    <%= f.select :status, Task.statuses.keys %>
+    <%= f.select :status, Task.statuses.keys.reject { |s| s == "done" } %>
   </p>
 
   <%= f.submit "Create Task" %>

app/views/tasks/_task.html.erb

@@ -1,4 +1,3 @@
-<turbo-frame id="<%= dom_id(task) %>">
   <li id="<%= dom_id(task) %>" class="task-item <%= 'done-task' if task.status == 'done' %>">
   <div class="task-title"><%= task.title %></div>
   <div class="task-status"><%= task.status.titleize %></div>
@@ -17,4 +16,3 @@
           class: "task-btn destroy-btn" %>
   </div>
 </li>
-</turbo-frame>

app/views/tasks/complete.turbo_stream.erb

@@ -1,3 +1,3 @@
 <%= turbo_stream.replace dom_id(@task) do %>
-  <%= render @task %>
+  <%= render partial: "tasks/task", locals: { task: @task } %>
 <% end %>

app/views/tasks/create.turbo_stream.erb

@@ -1,6 +1,6 @@
-<%= turbo_stream.append "tasks" do %>
+<%= turbo_stream.prepend "active_tasks" do %>
-  <%= render @task %>   <!-- renders _task.html.erb -->
+    <%= render partial: "tasks/task", locals: { task: @task } %>
-<% end %>
+  <% end %>
 
 <%= turbo_stream.replace "new_task" do %>
   <%= render "tasks/form", project: @project, task: Task.new %>