Update Users#index

app/assets/images/pictograms/account-remove-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M1.46,8.88L2.88,7.46L5,9.59L7.12,7.46L8.54,8.88L6.41,11L8.54,13.12L7.12,14.54L5,12.41L2.88,14.54L1.46,13.12L3.59,11L1.46,8.88M15,4A4,4 0 0,1 19,8A4,4 0 0,1 15,12A4,4 0 0,1 11,8A4,4 0 0,1 15,4M15,5.9A2.1,2.1 0 0,0 12.9,8A2.1,2.1 0 0,0 15,10.1C16.16,10.1 17.1,9.16 17.1,8C17.1,6.84 16.16,5.9 15,5.9M15,13C17.67,13 23,14.33 23,17V20H7V17C7,14.33 12.33,13 15,13M15,14.9C12,14.9 8.9,16.36 8.9,17V18.1H21.1V17C21.1,16.36 17.97,14.9 15,14.9Z" /></svg>

app/assets/images/pictograms/checkbox-marked-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M19,19H5V5H15V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V11H19M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z" /></svg>

app/assets/stylesheets/application.css

@@ -214,3 +214,44 @@ form input[type=submit] {
   margin: 1.5rem auto 0 auto;
   padding: 0.75rem;
 }
+
+table.items {
+  border-spacing: 0;
+  border: 1px solid #dddddd;
+  border-radius: 0.2rem;
+  font-size: 0.85rem;
+  margin: 1rem auto 0 auto;
+}
+table.items th {
+  font-size: 0.8rem;
+}
+table.items th,
+table.items tr:hover {
+  background-color: #f3f3f3;
+}
+table.items th,
+table.items td:not(.svg):not(.actions) {
+  padding: 0.8rem;
+}
+table.items td {
+  border-top: 1px solid #dddddd;
+}
+table.items td a {
+  border-color: #dddddd;
+  color: #909090;
+  font-weight: normal;
+  margin-right: 0.25rem;
+  padding: 0.25rem;
+}
+table.items td:not(:first-child) {
+  color: #909090;
+  fill: #909090;
+  text-align: center;
+}
+table.items td.actions {
+  text-align: right;
+}
+table.items svg {
+  height: 1.2rem;
+  width: 1.2rem;
+}

app/helpers/application_helper.rb

@@ -48,9 +48,11 @@ module ApplicationHelper
     current = html_options.delete(:current)
     return "" if (current == :hide) && (url_for(options) == request.path)
 
-    classes = class_names(html_options[:class], "image-button", active: current == :active)
     name = svg_tag("pictograms/#{image}.svg#icon") + name if image
-    link_to name, options, class: classes
+    classes = class_names(html_options[:class], "image-button", active: current == :active)
+    html_options.merge!(class: classes) { |k, v1, v2| "#{v1} #{v2}" }
+
+    link_to name, options, html_options
   end
 
   def svg_tag(source, options = {})

app/views/users/_user.html.erb

@@ -1,12 +0,0 @@
-<div id="<%= dom_id user %>">
-  <p>
-    <strong>Email:</strong>
-    <%= user.email %>
-  </p>
-
-  <p>
-    <strong>Status:</strong>
-    <%= user.status %>
-  </p>
-
-</div>

app/views/users/index.html.erb

@@ -1,10 +1,21 @@
-<div id="users">
+<table class="items" id="users">
+  <tr>
+    <th><%= User.human_attribute_name(:email).capitalize %></th>
+    <th><%= User.human_attribute_name(:status).capitalize %></th>
+    <th><%= User.human_attribute_name(:created_at).capitalize %> <sup>UTC</sup></th>
+    <th><%= User.human_attribute_name(:confirmed_at).capitalize %></th>
+    <th><%= t :actions %></th>
+  </tr>
   <% @users.each do |user| %>
-    <%= render user %>
-    <p>
-      <%= link_to "Show this user", user %>
-    </p>
+    <tr>
+      <td><%= user.email %></td>
+      <td><%= user.status %></td>
+      <td><%= user.created_at.to_fs(:db_without_sec) %></td>
+      <td class="svg">
+        <%= svg_tag "pictograms/checkbox-marked-outline.svg#icon" if user.confirmed_at.present? %>
+      </td>
+      <td class="actions"><%= image_link_to "Delete", "account-remove-outline", user_path(user),
+                                data: { turbo: true, turbo_method: :delete } %></td>
+    </tr>
   <% end %>
-</div>
-
-<%= link_to "New user", new_user_path %>
+</table>

config/initializers/time_formats.rb

@@ -0,0 +1 @@
+Time::DATE_FORMATS[:db_without_sec] = "%Y-%m-%d %H:%M"

config/locales/en.yml

@@ -3,7 +3,10 @@ en:
     attributes:
       user:
         email: e-mail
+        status: status
         password: password
+        created_at: registration
+        confirmed_at: confirmed
   users:
     passwords:
       edit:
@@ -19,6 +22,7 @@ en:
   layouts:
     application:
       users: Users
+  actions: Actions
   or: or
   register: Register
   sign_in: Sign in