Go 244/blank results visualization (#504)

Add empty states

---------

Co-authored-by: stage-rl <[email protected]>
Co-authored-by: Jan Suchal <[email protected]>

app/components/admin/tags/tags_list_component.html.erb

@@ -9,6 +9,7 @@
     <div class="self-stretch flex-col justify-start items-start flex">
       <%= render Admin::Tags::TagsListRowComponent.with_collection(@simple_tags) %>
     </div>
+    <%= blank_results_area %>
   </div>
   <div class="self-stretch bg-white rounded-md border border-gray-200 flex-col justify-start items-start flex">
     <div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">

app/components/admin/tags/tags_list_component.rb

@@ -1,4 +1,5 @@
 class Admin::Tags::TagsListComponent < ViewComponent::Base
+  renders_one :blank_results_area
   def initialize(simple_tags:)
     @simple_tags = simple_tags
   end

app/components/common/blank_results_component.html.erb

@@ -0,0 +1,6 @@
+<div class="mx-auto text-center p-12">
+  <%= render Common::IconComponent.new(@icon, classes: "mx-auto size-20 text-gray-400") %>
+
+  <h3 class="mt-2 text-sm font-semibold text-gray-900"><%= @header %></h3>
+  <p class="mt-1 text-sm text-gray-500 max-w-md mx-auto"><%= @description %></p>
+</div>

app/components/common/blank_results_component.rb

@@ -0,0 +1,21 @@
+module Common
+  class BlankResultsComponent < ViewComponent::Base
+    def initialize (reason = :not_found)
+      @reason = reason
+    end
+
+    def before_render
+      icon_mappings = {
+        filters: "bookmark-slash",
+        rules: "funnel-slash",
+        tags: "tag-slash",
+        not_found: "magnifying-glass",
+        boxes: "inbox-stack",
+      }
+
+      @header = t "blank_results.#{@reason}.header"
+      @description = t "blank_results.#{@reason}.description"
+      @icon = icon_mappings[@reason]
+    end
+  end
+end

app/components/common/icon_component.rb

@@ -26,7 +26,12 @@ class IconComponent < ViewComponent::Base
       "paper-airplane" => "M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5",
       "document-arrow-down" => "M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m.75 12 3 3m0 0 3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z",
       "document-text" => "M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z",
-      "folder-arrow-down" => "m9 13.5 3 3m0 0 3-3m-3 3v-6m1.06-4.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+      "folder-arrow-down" => "m9 13.5 3 3m0 0 3-3m-3 3v-6m1.06-4.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z",
+      "magnifying-glass" => "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z",
+      "bookmark-slash" => "m3 3 1.664 1.664M21 21l-1.5-1.5m-5.485-1.242L12 17.25 4.5 21V8.742m.164-4.078a2.15 2.15 0 0 1 1.743-1.342 48.507 48.507 0 0 1 11.186 0c1.1.128 1.907 1.077 1.907 2.185V19.5M4.664 4.664 19.5 19.5",
+      "funnel-slash" => "M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3ZM2 2l20 20",
+      "tag-slash" => "M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z M6 6h.008v.008H6V6ZM3 21l18-18",
+      "inbox-stack" => "m7.875 14.25 1.214 1.942a2.25 2.25 0 0 0 1.908 1.058h2.006c.776 0 1.497-.4 1.908-1.058l1.214-1.942M2.41 9h4.636a2.25 2.25 0 0 1 1.872 1.002l.164.246a2.25 2.25 0 0 0 1.872 1.002h2.092a2.25 2.25 0 0 0 1.872-1.002l.164-.246A2.25 2.25 0 0 1 16.954 9h4.636M2.41 9a2.25 2.25 0 0 0-.16.832V12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 12V9.832c0-.287-.055-.57-.16-.832M2.41 9a2.25 2.25 0 0 1 .382-.632l3.285-3.832a2.25 2.25 0 0 1 1.708-.786h8.43c.657 0 1.281.287 1.709.786l3.284 3.832c.163.19.291.404.382.632M4.5 20.25h15A2.25 2.25 0 0 0 21.75 18v-2.625c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125V18a2.25 2.25 0 0 0 2.25 2.25Z",
     }.freeze
 
     def initialize(icon, classes: "", stroke_width: 1.5)

app/components/filters/filters_list_component.html.erb

@@ -11,5 +11,6 @@
         <%= render Filters::FiltersListRowComponent.new(user) %>
       <% end %>
     </div>
+    <%= blank_results_area %>
   </div>
 </div>

app/components/filters/filters_list_component.rb

@@ -1,4 +1,5 @@
 class Filters::FiltersListComponent < ViewComponent::Base
+  renders_one :blank_results_area
   def initialize(filters)
     @filters = filters
   end

app/components/message_threads_table_component.html.erb

@@ -9,5 +9,6 @@
       </ul>
       <%= next_page_area %>
     <% end %>
+    <%= blank_results_area %>
   </div>
 </div>

app/components/message_threads_table_component.rb

@@ -1,6 +1,7 @@
 class MessageThreadsTableComponent < ViewComponent::Base
   renders_many :message_threads
   renders_one :next_page_area
+  renders_one :blank_results_area
 
   def initialize(filter:, filter_subscription:)
     @filter = filter

app/components/settings/rules/automation_rules_list_component.html.erb

@@ -12,6 +12,8 @@
           <%= automation_rule %>
         <% end %>
       </div>
+
+      <%= blank_results_area %>
     </div>
     <div class="self-stretch bg-white rounded-md border border-gray-200 flex-col justify-start items-start flex">
       <div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">

app/components/settings/rules/automation_rules_list_component.rb

@@ -1,3 +1,4 @@
 class Settings::Rules::AutomationRulesListComponent < ViewComponent::Base
   renders_many :automation_rules
+  renders_one :blank_results_area
 end

app/lib/sidebar_menu.rb

@@ -36,7 +36,7 @@ def admin_menu
       TW::SidebarMenuDividerComponent.new(name: 'Administrácia'),
       TW::SidebarMenuItemComponent.new(name: 'Používatelia', url: admin_tenant_users_path(Current.tenant), icon: Icons::UsersComponent.new),
       TW::SidebarMenuItemComponent.new(name: 'Prístup', url: admin_tenant_tag_groups_path(Current.tenant), icon: Icons::LockClosedComponent.new),
-      TW::SidebarMenuItemComponent.new(name: 'Schránky', url: admin_tenant_boxes_path(Current.tenant), icon: Icons::RectangleStackComponent.new),
+      TW::SidebarMenuItemComponent.new(name: 'Schránky', url: admin_tenant_boxes_path(Current.tenant), icon: Common::IconComponent.new("inbox-stack")),
       TW::SidebarMenuItemComponent.new(name: 'API Prepojenia', url: admin_tenant_api_connections_path(Current.tenant), icon: Icons::RectangleStackComponent.new),
       TW::SidebarMenuItemComponent.new(name: 'Skupiny', url: admin_tenant_groups_path(Current.tenant), icon: Icons::UserGroupsComponent.new),
       TW::SidebarMenuItemComponent.new(name: 'Štítky', url: admin_tenant_tags_path(Current.tenant), icon: Icons::TagComponent.new),

app/views/admin/boxes/index.html.erb

@@ -2,62 +2,70 @@
   <div class="self-stretch bg-white rounded-md border border-gray-200 flex-col justify-start items-start flex">
     <div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">
       <div class="grow shrink basis-0 text-gray-900 text-xl font-semibold leading-[35px]">ÚPVS Schránky</div>
-      <% if Current.tenant.api_connections.where(type: "Govbox::ApiConnectionWithOboSupport" ).any? %>
+      <% if Current.tenant.api_connections.where(type: "Govbox::ApiConnectionWithOboSupport").any? %>
         <%= link_to new_admin_tenant_boxes_upvs_box_path, data: { turbo_frame: "modal" }, class: "px-3.5 py-2.5 bg-blue-600 rounded-md justify-center items-center gap-2.5 flex" do %>
           <p class="text-white text-base font-medium leading-normal">Pripojiť novú schránku</p>
         <% end %>
       <% end %>
     </div>
     <div class="self-stretch flex-col justify-start items-start flex">
-      <% @boxes.where(type: "Upvs::Box").each do |box| %>
-        <div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">
-        <div class="grow basis-0 flex-col justify-start items-start gap-1 inline-flex">
-            <div class="text-center text-gray-900 text-lg font-medium leading-loose">
-              <%= render Common::BoxLabelComponent.new(box, "items-start justify-start gap-0" ) %>
+      <% if @boxes.where(type: "Upvs::Box").any? %>
+        <% @boxes.where(type: "Upvs::Box").each do |box| %>
+          <div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">
+            <div class="grow basis-0 flex-col justify-start items-start gap-1 inline-flex">
+              <div class="text-center text-gray-900 text-lg font-medium leading-loose">
+                <%= render Common::BoxLabelComponent.new(box, "items-start justify-start gap-0") %>
+              </div>
+              <div class="text-center text-gray-500 text-base font-normal leading-normal">
+                <%= box.name %>, URI: <%= box.uri %>
+              </div>
             </div>
-            <div class="text-center text-gray-500 text-base font-normal leading-normal">
-              <%= box.name %>, URI: <%= box.uri %>
+            <div class="justify-start items-start gap-2 flex">
+              <%= link_to edit_polymorphic_path([:admin, box.tenant, :boxes, box]), data: { turbo_frame: "modal" } do %>
+                <%= render Common::EditButtonComponent.new %>
+              <% end %>
             </div>
           </div>
-          <div class="justify-start items-start gap-2 flex">
-            <%= link_to edit_polymorphic_path([:admin, box.tenant, :boxes, box]), data: { turbo_frame: "modal" } do %>
-              <%= render Common::EditButtonComponent.new %>
-            <% end %>
-          </div>
-        </div>
         <% end %>
+      <% else %>
+        <%= render Common::BlankResultsComponent.new(:boxes) %>
+      <% end %>
     </div>
   </div>
 
   <% if Current.tenant.feature_enabled?(:fs_api) %>
     <div class="self-stretch bg-white rounded-md border border-gray-200 flex-col justify-start items-start flex">
       <div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">
         <div class="grow shrink basis-0 text-gray-900 text-xl font-semibold leading-[35px]">FS Schránky</div>
-        <% if Current.tenant.api_connections.where(type: "Fs::ApiConnection" ).any? %>
+        <% if Current.tenant.api_connections.where(type: "Fs::ApiConnection").any? %>
           <%= link_to new_admin_tenant_boxes_fs_box_path, data: { turbo_frame: "modal" }, class: "px-3.5 py-2.5 bg-blue-600 rounded-md justify-center items-center gap-2.5 flex" do %>
             <p class="text-white text-base font-medium leading-normal">Pripojiť novú schránku</p>
           <% end %>
         <% end %>
       </div>
-      <div class="self-stretch flex-col justify-start items-start flex">
-        <% @boxes.where(type: "Fs::Box").each do |box| %>
-          <div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">
-          <div class="grow basis-0 flex-col justify-start items-start gap-1 inline-flex">
-              <div class="text-center text-gray-900 text-lg font-medium leading-loose">
-                <%= render Common::BoxLabelComponent.new(box, "items-start justify-start gap-0" ) %>
+      <% if @boxes.where(type: "Fs::Box").any? %>
+        <div class="self-stretch flex-col justify-start items-start flex">
+          <% @boxes.where(type: "Fs::Box").each do |box| %>
+            <div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">
+              <div class="grow basis-0 flex-col justify-start items-start gap-1 inline-flex">
+                <div class="text-center text-gray-900 text-lg font-medium leading-loose">
+                  <%= render Common::BoxLabelComponent.new(box, "items-start justify-start gap-0") %>
+                </div>
+                <div class="text-center text-gray-500 text-base font-normal leading-normal">
+                  <%= box.name %>, DIČ: <%= box.settings_dic %>
+                </div>
               </div>
-              <div class="text-center text-gray-500 text-base font-normal leading-normal">
-                <%= box.name %>, DIČ: <%= box.settings_dic %>
+              <div class="justify-start items-start gap-2 flex">
+                <%= link_to edit_polymorphic_path([:admin, box.tenant, :boxes, box]), data: { turbo_frame: "modal" } do %>
+                  <%= render Common::EditButtonComponent.new %>
+                <% end %>
               </div>
             </div>
-            <div class="justify-start items-start gap-2 flex">
-              <%= link_to edit_polymorphic_path([:admin, box.tenant, :boxes, box]), data: { turbo_frame: "modal" } do %>
-                <%= render Common::EditButtonComponent.new %>
-              <% end %>
-            </div>
-          </div>
-        <% end %>
-      </div>
+          <% end %>
+        </div>
+      <% else %>
+        <%= render Common::BlankResultsComponent.new(:boxes) %>
+      <% end %>
     </div>
   <% end %>
 </div>

app/views/admin/tags/index.html.erb

@@ -1 +1,7 @@
-<%= render Admin::Tags::TagsListComponent.new(simple_tags: @simple_tags) %>
+<%= render Admin::Tags::TagsListComponent.new(simple_tags: @simple_tags) do |component| %>
+  <% if @simple_tags.empty? %>
+    <% component.with_blank_results_area do %>
+      <%= render Common::BlankResultsComponent.new(:tags) %>
+    <% end %>
+  <% end %>
+<% end %>

app/views/filters/index.html.erb

@@ -1 +1,8 @@
-<%= render Filters::FiltersListComponent.new(@filters) %>
+<%= render Filters::FiltersListComponent.new(@filters) do |component| %>
+  <% if @filters.empty? %>
+    <% component.with_blank_results_area do %>
+      <%= render Common::BlankResultsComponent.new(:filters) %>
+    <% end %>
+  <% end %>
+<% end %>
+

app/views/message_threads/index.html.erb

@@ -3,14 +3,19 @@
     <meta name="turbo-visit-control" content="reload">
   <% end %>
 <% end %>
-
 <%= render MessageThreadsTableComponent.new(filter: @filter, filter_subscription: @filter_subscription) do |component| %>
-  <% component.with_message_thread do %>
-    <%= render MessageThreadsTableRowComponent.with_collection(@message_threads) %>
-  <% end %>
-  <% if @next_cursor %>
-    <% component.with_next_page_area do %>
-      <%= render Turbo::NextPageAreaComponent.new(id: @next_cursor, url: scroll_message_threads_url(@next_page_params)) %>
+  <% if @message_threads.any? %>
+    <% component.with_message_thread do %>
+      <%= render MessageThreadsTableRowComponent.with_collection(@message_threads) %>
+    <% end %>
+    <% if @next_cursor %>
+      <% component.with_next_page_area do %>
+        <%= render Turbo::NextPageAreaComponent.new(id: @next_cursor, url: scroll_message_threads_url(@next_page_params)) %>
+      <% end %>
+    <% end %>
+  <% else %>
+    <% component.with_blank_results_area do %>
+      <%= render Common::BlankResultsComponent.new(:not_found) %>
     <% end %>
   <% end %>
 <% end %>

app/views/settings/automation_rules/index.html.erb

@@ -1,7 +1,13 @@
 <%= render Settings::Rules::AutomationRulesListComponent.new do |component| %>
-  <% @automation_rules.each do |automation_rule| %>
-    <% component.with_automation_rule do %>
-      <%= render Settings::Rules::AutomationRulesTableRowComponent.new(automation_rule) %>
+  <% if @automation_rules.any? %>
+    <% @automation_rules.each do |automation_rule| %>
+      <% component.with_automation_rule do %>
+        <%= render Settings::Rules::AutomationRulesTableRowComponent.new(automation_rule) %>
+      <% end %>
+    <% end %>
+  <% else %>
+    <% component.with_blank_results_area do %>
+      <%= render Common::BlankResultsComponent.new(:rules) %>
     <% end %>
   <% end %>
 <% end %>

config/locales/sk.yml

@@ -321,4 +321,20 @@ sk:
       other: "%{count} dokumentov"
   bulk:
     signing:
-      nothing_to_sign: "Vo vybraných vláknach sa nenašli žiadne dokumenty so žiadosťou na podpis"
+      nothing_to_sign: "Vo vybraných vláknach sa nenašli žiadne dokumenty so žiadosťou na podpis"
+  blank_results:
+    filters:
+      header: "Žiadne filtre"
+      description: "Nemáte vytvorené žiadne filtre."
+    tags:
+      header: "Žiadne štítky"
+      description: 'Zatiaľ nie sú vytvorené žiadne štítky.'
+    rules:
+      header: "Žiadne pravidlá"
+      description: 'Zatiaľ nie sú vytvorené žiadne pravidlá.'
+    boxes:
+      header: "Žiadne schránky"
+      description: 'Zatiaľ nie sú vytvorené žiadne schránky.'
+    not_found:
+      header: "Žiadne správy"
+      description: "Zvolenému vyhľadávaniu nevyhovuje žiadna správa, skúste vybrať iný štítok alebo zmeniť vyhľadávací výraz."