Add styling and additional logic to search for users

app/assets/stylesheets/users.scss

@@ -1,3 +1,23 @@
 // Place all the styles related to the Users controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: https://sass-lang.com/
+
+.form-tag {
+    display: flex;
+    width: 100%;
+}
+.text-field {
+    flex: 5;
+    margin: 3px;
+}
+.submit-button {
+    flex: 1;
+    margin: 3px;
+}
+.stack {
+    display: flex;
+    flex-direction: column;
+}
+.stack > * + * {
+    margin-top: .5rem;
+}

app/controllers/users_controller.rb

@@ -1,9 +1,12 @@
 class UsersController < ApplicationController
   include SocialAccountsHelper
   before_action :authorize
+  before_action except: %i[show index search]
   helper_method :generate_link, :supported_social_networks
 
-  def show; end
+  def show
+    @user = User.find(params[:id])
+  end
 
   def edit
     return unless authorize_to_update!
@@ -37,6 +40,10 @@ def update_status
   end
 
   def index
+    unless current_user
+      redirect_to(new_user_session_path)
+      return
+    end
     @users = User.all
     @users_to_add = (@users - [current_user]).reject do |user|
       current_user.sent_contact_request?(user)

app/views/layouts/_flash_messages.html.erb

@@ -13,4 +13,4 @@
         <h4><%= log %></h4>
       <% end %>
     </div>
-<% end %>
+<% end %>

app/views/layouts/_footer.html.erb

@@ -1,29 +1,60 @@
+<style>
+    .footer-nav-link::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+    }
+    .nav-bar-entry {
+      position: relative;
+    }
+</style>
+
 <% if user_signed_in? %>
   <div id="navigation">
     <ul class="nav nav-pills nav-justified">
       <li class="nav-item">
-        <a class="nav-link <%= active_link_to_class(root_path, active: :exclusive)%>" href="<%= root_url %>">
-          <i class="fa fa-home"></i>
-        </a></li>
+         <label class="nav-bar-entry">
+          <!-- new path to this when dashboard is rewritten -->
+            <a class="nav-link footer-nav-link <%= active_link_to_class(root_path, active: :exclusive)%>" href="<%= root_url %>">
+            <i class="fa fa-home"></i>
+          </a>
+        </label>
+      </li>
       <li class="nav-item">
-        <a class="nav-link <%= active_link_to_class(chat_path, active: :exclusive)%>" href="<%= chat_path %>">
-          <i class="fa fa-comments"></i>
-        </a></li>
+        <!-- please update the path when reworked the chat -->
+          <label class="nav-bar-entry">
+          <a class="nav-link footer-nav-link <%= active_link_to_class(root_path, active: :exclusive)%>" href="<%= chat_path %>">
+            <i class="fa fa-comments"></i>
+          </a>
+        </label>
+      </li>
       <li class="nav-item">
-        <a class="nav-link <%= active_link_to_class(user_contacts_path(current_user), active: :exclusive)%>"
-           href="<%= user_contacts_path(current_user) %>">
-          <i class="fa fa-address-book"></i>
-        </a></li>
+        <label class="nav-bar-entry">
+          <a class="nav-link footer-nav-link <%= active_link_to_class(user_contacts_path(current_user), active: :exclusive)%>" 
+            href="<%= user_contacts_path(current_user) %>">
+            <i class="fa fa-address-book"></i>
+          </a>
+        </label>
+      </li>
       <li class="nav-item">
         <!-- please add the right path here when history view created -->
-        <a class="nav-link" href="">
-          <i class="fa fa-history"></i>
-        </a></li>
+        <label class="nav-bar-entry">
+          <a class="nav-link footer-nav-link" href="">
+            <i class="fa fa-history"></i>
+          </a>
+        </label>
+      </li>
       <li class="nav-item">
-        <a class="nav-link <%= active_link_to_class(edit_user_path(current_user), active: :exclusive)%>"
-           href="<%= edit_user_path(current_user) %>">
-          <i class="fa fa-cog"></i>
-        </a></li>
+        <label class="nav-bar-entry">
+          <a class="nav-link footer-nav-link <%= active_link_to_class(edit_user_path(current_user), active: :exclusive)%>" 
+            href="<%= edit_user_path(current_user) %>">
+            <i class="fa fa-cog"></i>
+          </a>
+        </label>
+      </li>
     </ul>
   </div>
 <% end %>

app/views/users/search.html.erb

@@ -1,42 +1,18 @@
-<div class="jumbotron">
-    <h2><%= I18n.t('user.lists') %></h2>
+<%= stylesheet_link_tag 'users', media: 'all', 'data-turbolinks-track': 'reload' %>
 
-      <%# https://getbootstrap.com/docs/5.0/layout/grid/#auto-layout-columns %>
+<div class="stack">
+  <%= form_tag(search_users_path, method: "get", class: "form-tag justify-content-between") do %>
+    <%= text_field_tag :search, params[:search] , placeholder: I18n.t('user.search.place_holder'), class: "text-field form-control my-2 my-sm-0"%>
+    <%= submit_tag I18n.t('user.search.index') , class: "submit-button btn btn-outline-secondary my-2 my-sm-0"%>
+  <% end %>
 
+  <% @users.each do |user| %>
+    <%= render partial: 'users/card', locals: { user: user, mode: :overview } %>
+  <% end %>
 
-    <div class="row">
-        <div class="col">
-          <%= form_tag(search_users_path, method: "get") do %>
-            <%= label_tag(:search, I18n.t('user.search.for') ) %>
-            <%= text_field_tag :search, params[:search] %>
-            <%= submit_tag I18n.t('user.search.index') %>
-          <% end %>
-        </div>
-    </div>
+  <% @users_to_add.each do |user| %>
+    <%= render partial: 'users/card', locals: { user: user, mode: :add } %>
+  <% end %>
 
-    <table>
-        <thead>
-            <tr>
-                <th><%= I18n.t('user.attributes.username') %></th>
-                <th><%= I18n.t('user.attributes.firstname')%></th>
-                <th><%= I18n.t('user.attributes.lastname')%></th>
-                <th><%= I18n.t('user.attributes.email')%></th>
-            </tr>
-        </thead>
-        <tbody>
-
-        <% @users.each do |user| %>
-          <tr>
-            <td><%= user.username%></td>
-            <td><%= user.firstname%></td>
-            <td><%= user.lastname%></td>
-            <td><%= user.email %></td>
-            <% if @users_to_add.include? user %>
-              <td><%=  button_to '+', user_contact_requests_path(user), method: :post, id: user.id  %></td>
-            <% end %>
-          </tr>
-        <% end %>
-
-        </tbody>
-    </table>
 </div>
+

config/locales/en.yml

@@ -71,6 +71,7 @@ en:
     search:
       index: 'Search'
       for: 'Search for:'
+      place_holder: 'Username, email, ...'
     contact_request:
       approved: 'Contact request approved'
       denied: 'Contact request denied'

config/routes.rb

@@ -5,6 +5,7 @@
   devise_for :users
   # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
   root to: 'home#dashboard'
+  get 'search', to: 'users#search'
 
   resources :users, only: %i[show edit update index] do
     patch 'status', to: 'users#update_status', as: 'update_status', on: :member

spec/features/user_search_spec.rb

@@ -7,9 +7,16 @@
 
   describe 'without filter' do
     let!(:users) { FactoryBot.create_list(:user, 3) }
+    let(:second_user) { FactoryBot.create :user }
 
     before { visit search_users_path }
 
+    it 'is possible to filter by username' do
+      visit search_users_path(search: second_user.username[0..2])
+      # It is possible to search for the user via its user name but the user name it self is not displayed.
+      expect(page).to have_text(second_user.firstname)
+    end
+
     it 'shows all other users when no filter is given' do
       users.each { |user| expect(page).to have_text(user.email) }
     end

spec/views/users/search.html.erb_spec.rb

@@ -2,15 +2,23 @@
 
 RSpec.describe 'users/search', type: :view do
   let(:users) { FactoryBot.create_list(:user, 3) }
+  let(:contacts) { FactoryBot.create_list(:user, 3) }
+  let(:user1) { FactoryBot.create :user }
 
   before do
-    assign(:users, users)
+    assign(:users, contacts)
     assign(:users_to_add, users)
-    sign_in users.first
+    sign_in user1
     render
   end
 
-  it 'renders a list of users before searching' do
+  it 'renders a list of contacts' do
+    contacts.each do |contact|
+      expect(rendered).to match contact.email
+    end
+  end
+
+  it 'renders a list of users' do
     users.each do |user|
       expect(rendered).to match user.email
     end