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

@@ -44,8 +44,11 @@ def index
   end
 
   def search
-    @users = User.search(params[:search]).where.not(id: current_user.id)
-    @users_to_add = @users.reject do |user|
+    other_users = User.search(params[:search]).where.not(id: current_user.id)
+    @users_to_add = other_users.reject do |user|
+      current_user.sent_contact_request?(user)
+    end
+    @users = other_users.select do |user|
       current_user.sent_contact_request?(user)
     end
   end

app/views/layouts/_footer.html.erb

@@ -26,4 +26,4 @@
         </a></li>
     </ul>
   </div>
-<% end %>
+<% 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.placeholder'), 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:'
+      placeholder: 'Username, email, ...'
     contact_request:
       approved: 'Contact request approved'
       denied: 'Contact request denied'