save

Author: tgaeta

app/controllers/job_applications_controller.rb

@@ -4,7 +4,7 @@ class JobApplicationsController < ApplicationController
   def index
     @job_applications = filter_and_sort_job_applications
     @job_application_count = @job_applications.count
-    @job_applications = @job_applications.paginate(page: params[:page], per_page: 10)
+    @job_applications = @job_applications.paginate(page: params[:page], per_page: 10).order(created_at: :desc)
 
     @pagination_info = {
       current_page: @job_applications.current_page,
@@ -29,10 +29,9 @@ def new
   end
 
   def edit
-    @job_application = JobApplication.find_by(id: params[:id])
-    if @job_application.nil?
-      Rails.logger.error "Job Application with id #{params[:id]} not found"
-      redirect_to root_path, alert: "Job Application not found"
+    respond_to do |format|
+      format.html
+      format.turbo_stream { render turbo_stream: turbo_stream.replace(dom_id(@job_application), partial: "form", locals: {job_application: @job_application, title: "Edit"}) }
     end
   end
 
@@ -104,6 +103,8 @@ def destroy
 
   def set_job_application
     @job_application = JobApplication.find(params[:id])
+  rescue ActiveRecord::RecordNotFound
+    redirect_to root_path, alert: "Job application not found."
   end
 
   def job_application_params

app/frontend/controllers/flash_message_controller.js

@@ -10,7 +10,17 @@ export default class extends Controller {
   show() {
     this.element.classList.remove('hidden');
     setTimeout(() => {
-      this.element.classList.add('hidden');
-    }, 5000);
+      this.fadeOut();
+    }, 2000); // Start fading out after 4 seconds
+  }
+
+  fadeOut() {
+    const flashMessage = this.element.querySelector('.flash-message');
+    if (flashMessage) {
+      flashMessage.classList.add('fade-out');
+      setTimeout(() => {
+        this.element.classList.add('hidden');
+      }, 500); // Duration of fade-out animation
+    }
   }
 }

app/helpers/application_helper.rb

@@ -1,12 +1,34 @@
 module ApplicationHelper
   def flash_class(type)
+    base_class = "border-l-4 p-4 mb-4 rounded-md"
     case type.to_sym
-    when :notice then "bg-blue-100 border-blue-500 text-blue-700"
-    when :success then "bg-green-100 border-green-500 text-green-700"
-    when :error then "bg-red-100 border-red-500 text-red-700"
-    when :alert then "bg-yellow-100 border-yellow-500 text-yellow-700"
-    else "bg-gray-100 border-gray-500 text-gray-700"
-    end + " border-l-4 p-4 mb-4"
+    when :notice
+      "bg-blue-100 border-blue-500 text-blue-700 #{base_class}"
+    when :success
+      "bg-green-100 border-green-500 text-green-700 #{base_class}"
+    when :error
+      "bg-red-100 border-red-500 text-red-700 #{base_class}"
+    when :alert
+      "bg-yellow-100 border-yellow-500 text-yellow-700 #{base_class}"
+    else
+      "bg-gray-100 border-gray-500 text-gray-700 #{base_class}"
+    end
+  end
+
+  def progress_bar_class(type)
+    base_class = "rounded-md"
+    case type.to_sym
+    when :notice
+      "bg-blue-500 #{base_class}"
+    when :success
+      "bg-green-500 #{base_class}"
+    when :error
+      "bg-red-500 #{base_class}"
+    when :alert
+      "bg-yellow-500 #{base_class}"
+    else
+      "bg-gray-500 #{base_class}"
+    end
   end
 
   def sort_link_to(name, column)

app/views/application/_flash_messages.html.erb

@@ -1,6 +1,36 @@
-<div data-controller="flash-message" class="hidden">
+<style>
+  @keyframes flash-progress {
+    from {
+      width: 100%;
+      left: 0;
+    }
+    to {
+      width: 0;
+      left: 0;
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  .flash-progress-bar {
+    animation: flash-progress 2s linear forwards;
+  }
+
+  .flash-message.fade-out {
+    animation: fade-out 0.5s forwards;
+  }
+</style>
+<div data-controller="flash-message" class="hidden relative">
   <% flash.each do |type, message| %>
-    <div class="<%= flash_class(type) %>" role="alert">
+    <div class="<%= flash_class(type) %> flash-message relative" role="alert">
+      <div class="flash-progress-bar absolute top-0 left-0 h-1 w-full <%= progress_bar_class(type) %>"></div>
       <%= message %>
     </div>
   <% end %>

app/views/job_applications/_form.html.erb

@@ -8,9 +8,8 @@
       <div class="px-8 py-6">
         <%= form_with(model: job_application, local: false, class: "space-y-6") do |form| %>
           <% if job_application.errors.any? %>
-            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4" role="alert">
-              <p class="font-bold">Error:</p>
-              <p><%= pluralize(job_application.errors.count, "error") %> prohibited this job application from being saved:</p>
+            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4 rounded-md" role="alert">
+              <p><%= pluralize(job_application.errors.count, "error") %></p>
               <ul class="list-disc list-inside">
                 <% job_application.errors.full_messages.each do |message| %>
                   <li><%= message %></li>

app/views/job_applications/index.html.erb

@@ -1,3 +1,6 @@
+<div id="flash_messages">
+  <%= render 'flash_messages' %>
+</div>
 <div class="my-2 md:my-8">
   <div class="mb-8 flex justify-between items-center">
     <h2 class="hidden md:block md:text-2xl font-semibold text-gray-700 shadow-2xl">

app/views/layouts/application.html.erb

@@ -12,7 +12,6 @@
   </head>
   <body class="bg-gray-100">
     <div class="container mx-auto px-4 py-4">
-      <%= render 'flash_messages' %>
       <%= yield %>
     </div>
   </body>