Fixed Participant Show page. Add new worker now will autofill on user entry based on already entered Workers.

app/controllers/employments_controller.rb

@@ -19,6 +19,10 @@ class EmploymentsController < ApplicationController
       redirect_to participant_path(participant), notice: 'Employment was successfully removed.'
     end
   
+    def index
+      @employments = Employment.all # or however you need to retrieve the data
+    end
+    
     private
   
     def set_employment

app/controllers/participants_controller.rb

@@ -12,7 +12,7 @@ class ParticipantsController < ApplicationController
     @workers = @participant.workers  # Fetch associated workers
     @employment = Employment.new  # Initialize a new Employment object
     @participant = Participant.includes(employments: :worker).find(params[:id])
-    @employments = @participant.employments.joins(:worker).order('workers.last_name')
+    @employments = @participant.employments.includes(:worker).order('workers.last_name')
   end
   
 
@@ -58,15 +58,18 @@ class ParticipantsController < ApplicationController
 
   def link_worker
     @participant = Participant.find(params[:id])
-    employment = @participant.employments.new(employment_params)
-    if employment.save
+    @employment = @participant.employments.new(employment_params)
+  
+    if @employment.save
       redirect_to @participant, notice: 'Worker was successfully linked.'
     else
-      # Assuming you have a show or edit page to render
-      render 'show', alert: 'Failed to link worker.'
+      Rails.logger.debug @employment.errors.full_messages
+      flash[:alert] = @employment.errors.full_messages.to_sentence
+      render 'show'
     end
   end
   
+  
   private
 
   def set_participant
@@ -92,4 +95,5 @@ class ParticipantsController < ApplicationController
   def employment_params
     params.require(:employment).permit(:worker_id, :start_date, :end_date)
   end
+  
 end

app/controllers/workers_controller.rb

@@ -39,6 +39,18 @@ class WorkersController < ApplicationController
       redirect_to workers_path
     end
 
+    def search
+      if params[:term]
+        # Assuming you want to search by first name or last name
+        @workers = Worker.where('first_name LIKE ? OR last_name LIKE ?', "%#{params[:term]}%", "%#{params[:term]}%")
+      else
+        @workers = Worker.all
+      end
+  
+      # Format the response as needed by your autocomplete component
+      render json: @workers.map { |worker| { label: "#{worker.first_name} #{worker.last_name}", value: worker.id } }
+    end
+  
     private
       def worker_params
         params.require(:worker).permit(:first_name, :last_name, :address, :phone, :email, :dob, :ssn, :gender)

app/views/participants/_form.html.erb

@@ -160,6 +160,7 @@
 </script>
 
 
+<%# This is to auto complete the Employer field on hand entry %>
 
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

app/views/participants/index.html.erb

@@ -9,7 +9,7 @@
 
 
   <table class="table table-striped table-hover">
-    <thead class="table-dark">
+    <thead class="table-light">
       <tr>
         <th>First Name</th>
         <th>Last Name</th>
@@ -40,8 +40,8 @@
             <% end %>
           </td>
           <td>
-            <%= link_to edit_participant_path(participant), class: 'btn btn-sm btn-warning' do %>
-            <i class="bi bi-pencil-fill"></i> <!-- Pencil icon for 'Edit' -->
+          <%= link_to edit_participant_path(participant), class: 'btn btn-sm btn-info' do %>
+            <i class="bi bi-pencil-fill" style="color: white;"></i> <!-- Pencil icon for 'Edit' with white color -->
           <% end %>
           </td>
         </tr>

app/views/participants/show.html.erb

@@ -62,8 +62,9 @@
 
 
 <h2 class="mt-4">Linked Workers</h2>
+<% if @employments.present? %>
   <table class="table table-striped">
-  <thead class="table-dark">
+    <thead class="table-light">
       <tr>
         <th>Worker Name</th>
         <th>Start Date</th>
@@ -81,7 +82,7 @@
             <%= link_to worker_path(employment.worker), class: 'btn btn-sm btn-secondary' do %>
               <i class="bi bi-eye"></i> <!-- Eyeball icon for 'Show' -->
             <% end %>
-          <%= link_to edit_employment_path(employment), class: 'btn btn-sm btn-warning' do %>
+            <%= link_to edit_employment_path(employment), class: 'btn btn-sm btn-info' do %>
               <i class="bi bi-pencil-fill"></i> <!-- Pencil icon for 'Edit' -->
             <% end %>
           </td>
@@ -89,13 +90,18 @@
       <% end %>
     </tbody>
   </table>
+<% else %>
+  <p>No employments available.</p>
+<% end %>
 
 <br>
 
+
 <%= form_with(model: [@participant, @employment], url: link_worker_participant_path(@participant), method: :post, class: 'row g-3') do |form| %>
   <div class="col-md-6">
-    <%= form.label :worker_id, "Add New Worker", class: 'form-label' %>
-    <%= form.collection_select :worker_id, Worker.all, :id, :full_name, { include_blank: true, prompt: "Select a Worker" }, { class: 'form-select' } %>
+    <%= form.label :worker_name, "Add New Worker", class: 'form-label' %>
+    <%= text_field_tag :worker_name, nil, id: 'worker-autocomplete', class: 'form-control', placeholder: 'Start typing worker name...' %>
+    <%= hidden_field_tag 'employment[worker_id]', nil, id: 'selected-worker-id' %>
   </div>
 
   <div class="col-md-3">
@@ -112,3 +118,35 @@
     <%= form.submit "Link Worker", class: 'btn btn-dark' %>
   </div>
 <% end %>
+
+
+<%# This is for autocompleting the Worker field to return users in the system %>
+
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
+<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
+
+<script>
+$(document).ready(function() {
+  $('#worker-autocomplete').autocomplete({
+    source: function(request, response) {
+      $.ajax({
+        url: '/workers/search', // Updated endpoint for searching workers
+        dataType: "json",
+        data: { term: request.term },
+        success: function(data) {
+          response(data);
+        }
+      });
+    },
+    minLength: 2, // Minimum characters to trigger the search
+    select: function(event, ui) {
+      // Function to handle selection
+      $('#worker-autocomplete').val(ui.item.label); // ui.item.label should contain the name of the worker
+      $('#selected-worker-id').val(ui.item.value); // Set the worker ID in the hidden field
+      return false;
+    }
+  });
+});
+</script>
+

config/routes.rb

@@ -15,7 +15,10 @@ Rails.application.routes.draw do
     end
   end
   
-  resources :workers 
+  resources :workers do
+    get 'search', on: :collection
+  end
+  
   resources :vendors
   resources :employments, only: [:edit, :update, :destroy]
   resources :employers do

package.json

@@ -2,13 +2,17 @@
   "dependencies": {
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-transform-optional-chaining": "^7.23.4",
     "@hotwired/turbo-rails": "^8.0.0-beta.2",
     "@rails/ujs": "^7.1.3",
-    "@rails/webpacker": "5.4.4",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12"
+    "@rails/webpacker": "5.4.4"
   },
   "devDependencies": {
-    "webpack-dev-server": "^3"
+    "@babel/core": "^7.23.9",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/preset-env": "^7.23.9",
+    "webpack": "^5.90.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   }
 }