GO-200/admin_others_target_UX

.gitignore

@@ -9,6 +9,7 @@
 
 .idea
 .vscode
+.streerc
 .rdbg*
 
 # Ignore all logfiles and tempfiles.

app/components/admin/boxes/box_form_component.html.erb

@@ -0,0 +1,43 @@
+<%= tag.turbo_frame id: 'modal' do %>
+  <div class="fixed inset-0 z-40 p-2" role="dialog" aria-modal="true">
+    <div class="fixed inset-0 transition-opacity bg-gray-400 bg-opacity-75" aria-hidden="true"></div>
+    <div class="relative flex items-center justify-center">
+      <div class="flex flex-col justify-start items-start overflow-hidden rounded-lg bg-white border border-gray-300" style="box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.1);">
+        <div class="flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 overflow-hidden gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
+          <div class="flex flex-col justify-start items-start flex-grow relative">
+            <p class="self-stretch flex-grow-0 flex-shrink-0 text-xl font-semibold text-left text-gray-900"><%= @action == :new ? 'Nová schránka' : 'Zmena údajov o schránke'%></p>
+            <p class="flex-grow-0 flex-shrink-0 text-xs text-left text-gray-500">Základné informácie o schránke</p>
+          </div>
+          <%= render Common::CloseButtonComponent.new(link_to: admin_tenant_boxes_path(Current.tenant)) %>
+        </div>
+        <%= form_with model:[:admin, Current.tenant, @box] do |form| %>
+          <div class="flex flex-col justify-start items-start self-stretch w-96">
+            <div class="flex justify-start items-center self-stretch gap-4 p-6">
+              <div class="flex flex-col justify-start items-start self-stretch flex-grow overflow-hidden gap-2 rounded-md">
+                <%= form.text_field :name, placeholder: "Názov schránky", class:"block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+              </div>
+            </div>
+            <div class="flex justify-start items-center self-stretch gap-4 p-6">
+              <div class="flex flex-col justify-start items-start self-stretch flex-grow overflow-hidden gap-2 rounded-md">
+                <%= form.text_field :uri, placeholder: "ico://sk/12345678", class:"block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+              </div>
+            </div>
+            <div class="flex justify-start items-center self-stretch gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
+              <div class="flex flex-col justify-start items-start self-stretch flex-grow overflow-hidden gap-2 rounded-md">
+                <%= form.text_field :short_name, placeholder: "Skrátený názov - ABC", class:"block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+              </div>
+            </div>
+          </div>
+          <div class="flex justify-start items-start self-stretch flex-grow-0 flex-shrink-0 gap-2 p-6">
+            <%= link_to admin_tenant_boxes_path(Current.tenant), class: "flex justify-center items-center flex-grow relative overflow-hidden gap-2.5 px-3.5 py-2.5 rounded-md bg-white border border-gray-300", data: { turbo_frame: "_top" } do %>
+              <p class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-gray-900">Zahodiť</p>
+            <% end %>
+            <%= form.button class:"flex justify-center items-center flex-grow relative overflow-hidden gap-2.5 px-3.5 py-2.5 rounded-md bg-blue-600", data: { turbo_frame: "_top" } do %>
+              <p class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-white"><%= @action == :new ? 'Vytvoriť' : 'Uložiť' %></p>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>

app/components/admin/boxes/box_form_component.rb

@@ -0,0 +1,6 @@
+class Admin::Boxes::BoxFormComponent < ViewComponent::Base
+  def initialize(box:, action:)
+    @box = box
+    @action = action
+  end
+end

app/components/admin/boxes/box_rename_component.html.erb

@@ -0,0 +1,28 @@
+<div class="relative" data-controller="dropdown"
+                data-dropdown-active-target="#dropdown-button"
+                data-dropdown-active-class="bg-gray-50"
+                data-dropdown-invisible-class ="opacity-0 scale-95"
+                data-dropdown-visible-class ="opacity-100 scale-100"
+                data-dropdown-entering-class="ease-out duration-100"
+                data-dropdown-enter-timeout="100"
+                data-dropdown-leaving-class="ease-in duration-75"
+                data-dropdown-leave-timeout="75"
+                >
+  <div id="dropdown-button" data-action="click->dropdown#toggle click@window->dropdown#hide" role="button" data-dropdown-target="button" tabindex="0" class="inline-block select-none">
+    <button type="button" class="flex items-center" id="message-thread-rename-button" aria-expanded="false" aria-haspopup="true">
+      <p class="text-xl font-semibold text-left text-gray-900"><%= @box.name %></p>
+    </button>
+  </div>
+  <div data-dropdown-target="menu" class="transform transition hidden opacity-0 scale-95">
+    <%= form_with model:[:admin, @box.tenant, @box], method: :patch, class:"flex justify-stretch items-center absolute -top-10 gap-2" do |form| %>
+      <%= form.text_field :name, class:"flex text-base text-left text-gray-400 grow rounded-md bg-white border border-gray-400" %>
+      <%= button_tag type: 'submit' do %>
+        <div class="flex justify-center items-center gap-2.5 px-2.5 py-1.5 rounded-md bg-blue-600">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="  w-5 h-5 relative" preserveAspectRatio="xMidYMid meet">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7069 5.29303C16.8944 5.48056 16.9997 5.73487 16.9997 6.00003C16.9997 6.26519 16.8944 6.5195 16.7069 6.70703L8.70692 14.707C8.51939 14.8945 8.26508 14.9998 7.99992 14.9998C7.73475 14.9998 7.48045 14.8945 7.29292 14.707L3.29292 10.707C3.11076 10.5184 3.00997 10.2658 3.01224 10.0036C3.01452 9.74143 3.11969 9.49062 3.3051 9.30521C3.49051 9.1198 3.74132 9.01464 4.00352 9.01236C4.26571 9.01008 4.51832 9.11087 4.70692 9.29303L7.99992 12.586L15.2929 5.29303C15.4804 5.10556 15.7348 5.00024 15.9999 5.00024C16.2651 5.00024 16.5194 5.10556 16.7069 5.29303Z" fill="white"></path>
+          </svg>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>

app/components/admin/boxes/box_rename_component.rb

@@ -0,0 +1,5 @@
+class Admin::Boxes::BoxRenameComponent < ViewComponent::Base
+  def initialize(box)
+    @box = box
+  end
+end

app/components/admin/boxes/boxes_list_component.html.erb

@@ -0,0 +1,15 @@
+<div class="w-full p-4 flex-col justify-start items-start gap-4 inline-flex">
+  <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]">Pripojené schránky</div>
+      <%= link_to new_admin_tenant_box_path, 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ť schránku</p>
+      <% end %>
+    </div>
+    <div class="self-stretch flex-col justify-start items-start flex">
+      <% @boxes.each do |box| %>
+        <%= render Admin::Boxes::BoxesListRowComponent.new(box) %>
+      <% end %>
+    </div>
+  </div>
+</div>

app/components/admin/boxes/boxes_list_component.rb

@@ -0,0 +1,5 @@
+class Admin::Boxes::BoxesListComponent < ViewComponent::Base
+  def initialize(boxes)
+    @boxes = boxes
+  end
+end

app/components/admin/boxes/boxes_list_row_component.html.erb

@@ -0,0 +1,23 @@
+<div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">
+  <div class="flex justify-start items-start flex-grow-0 flex-shrink-0 w-[45px] gap-2">
+    <div class="flex justify-center items-center relative overflow-hidden gap-1.5 px-2 py-1 rounded-md bg-<%= @box.color %>-100 border border-<%= @box.color %>-400">
+      <p class="flex-grow-0 flex-shrink-0 text-sm text-left text-<%= @box.color %>-600"><%= @box.short_name || @box.name[0] %></p>
+    </div>
+  </div>
+  <div class="grow shrink 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 Admin::Boxes::BoxRenameComponent.new(@box) %>
+    </div>
+    <div class="text-center text-gray-500 text-base font-normal leading-normal">
+      <%= @box.uri %>
+    </div>
+  </div>
+  <div class="justify-start items-start gap-2 flex">
+    <%= link_to edit_admin_tenant_box_path(@box.tenant, @box), data: { turbo_frame: :modal }  do %>
+      <%= render Common::EditButtonComponent.new %>
+    <% end %>
+    <%= button_to admin_tenant_box_path(@box.tenant, @box), method: :delete do %>
+      <%= render Common::DeleteButtonComponent.new %>
+    <% end %>
+  </div>
+</div>

app/components/admin/boxes/boxes_list_row_component.rb

@@ -0,0 +1,5 @@
+class Admin::Boxes::BoxesListRowComponent < ViewComponent::Base
+  def initialize(box)
+    @box = box
+  end
+end

app/components/admin/groups/group_form_component.html.erb

@@ -8,29 +8,29 @@
             <p class="self-stretch flex-grow w-[521px] text-xl font-semibold text-left text-gray-900"><%= @group.name %></p>
             <p class="flex-grow-0 flex-shrink-0 text-xs text-left text-gray-500">Používatelia v skupine</p>
           </div>
-          <%= link_to admin_tenant_groups_path(Current.tenant), data: { turbo_frame: "_top" } do %>
-            <%= render Common::CloseButtonComponent.new %>
-          <% end %>
+          <%= render Common::CloseButtonComponent.new(link_to: admin_tenant_groups_path(Current.tenant)) %>
         </div>
         <div class="flex flex-col justify-start items-start self-stretch flex-grow-0 flex-shrink-0">
-          <% if @step.in? [:new, :edit] %>
-            <%= form_with url: search_non_members_admin_tenant_group_path(Current.tenant, @group), class:"flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200" do |form| %>
+          <% if !@readonly %>
+            <%= form_with url: search_non_members_admin_tenant_group_path(Current.tenant, @group),
+                          data: { controller: 'debounce', debounce_target: 'form'},
+                          class:"flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200" do |form| %>
               <div class="flex w-full items-center rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600">
                 <div class="p-2">
                   <%= render Icons::SearchComponent.new %>
                 </div>
                 <%= tag.turbo_frame id:'user-search-results' %>
                 <%= form.search_field :name_search, value: params[:name_search], placeholder: "Vyhľadaj používateľa pre pridanie do skupiny",
-                  oninput: "this.form.requestSubmit()",
+                  data: { action: 'input->debounce#search' },
                   onreset: "this.form.requestSubmit()",
                   class: "block w-full flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" %>
               </div>
             <% end %>
           <% end %>
           <div class="flex flex-col justify-start items-start self-stretch divide-y relative gap-2 p-2 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
             <% @group.group_memberships.each do |group_membership| %>
-              <div class="self-stretch p-6 flex justify-start items-start gap-6 flex">
-                <% if @step.in? [:new, :edit] %>
+              <div class="self-stretch p-6 flex justify-start items-start gap-6">
+                <% if !@readonly %>
                   <%= render Admin::Groups::MembersListRowComponent.new(group_membership) %>
                 <% else %>
                   <%= render Admin::Groups::MembersListRowViewOnlyComponent.new(group_membership) %>

app/components/admin/groups/group_form_component.rb

@@ -1,6 +1,6 @@
 class Admin::Groups::GroupFormComponent < ViewComponent::Base
-  def initialize(group:, step:)
+  def initialize(group:, readonly: false)
     @group = group
-    @step = step
+    @readonly = readonly
   end
 end

app/components/admin/groups/groups_list_component.html.erb

@@ -34,9 +34,9 @@
         <div class="text-center text-gray-900 text-lg font-medium leading-loose">Pridať používateľov</div>
         <div class="text-center text-gray-500 text-base font-normal leading-normal">Existujúci používatelia môžu byť rozdelení do skupín, napríklad podľa zodpovednosti</div>
       </div>
-      <div class="px-3.5 py-2.5 bg-white rounded-md border border-gray-300 justify-center items-center gap-2.5 flex">
-        <div class="text-gray-900 text-base font-medium leading-normal">Nastaviť používateľov</div>
-      </div>
+      <%= link_to admin_tenant_users_path, class:"px-3.5 py-2.5 bg-white rounded-md border border-gray-300 justify-center items-center gap-2.5 flex" do %>
+        <p class="text-gray-900 text-base font-medium leading-normal">Nastaviť používateľov</p>
+      <% end %>
     </div>
     <div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">
       <div class="w-8 h-8 relative">
@@ -46,9 +46,9 @@
         <div class="text-center text-gray-900 text-lg font-medium leading-loose">Určiť prístup skupín k správam</div>
         <div class="text-center text-gray-500 text-base font-normal leading-normal">Jednotlivé skupiny používateľov (ako aj samotný používatelia) môžu mať rozdielny prístup k správam</div>
       </div>
-      <div class="px-3.5 py-2.5 bg-white rounded-md border border-gray-300 justify-center items-center gap-2.5 flex">
-        <div class="text-gray-900 text-base font-medium leading-normal">Nastaviť prístup</div>
-      </div>
+      <%= link_to admin_tenant_tag_groups_path, class:"px-3.5 py-2.5 bg-white rounded-md border border-gray-300 justify-center items-center gap-2.5 flex" do %>
+        <p class="text-gray-900 text-base font-medium leading-normal">Nastaviť prístup</p>
+      <% end %>
     </div>
   </div>
 </div>

app/components/admin/groups/groups_list_row_component.html.erb

@@ -18,14 +18,14 @@
   </div>
   <div class="justify-start items-start gap-2 flex">
     <% if @group.is_modifiable? %>
-      <%= link_to edit_members_admin_tenant_group_path(@group.tenant, @group), data: { turbo_frame: :modal }  do %>
+      <%= link_to edit_members_admin_tenant_group_path(@group.tenant, @group) do %>
         <%= render Common::EditButtonComponent.new %>
       <% end %>
-      <%= button_to admin_tenant_group_path(@group.tenant, @group), method: :delete, data: { turbo_frame: :modal }  do %>
+      <%= button_to admin_tenant_group_path(@group.tenant, @group), method: :delete do %>
         <%= render Common::DeleteButtonComponent.new %>
       <% end %>
     <% else %>
-      <%= link_to admin_tenant_group_path(@group.tenant, @group), data: { turbo_frame: :modal }  do %>
+      <%= link_to show_members_admin_tenant_group_path(@group.tenant, @group) do %>
         <%= render Common::ShowButtonComponent.new %>
       <% end %>
     <% end %>

app/components/admin/groups/member_add_popup_component.html.erb

@@ -5,9 +5,7 @@
         <div class="flex flex-col justify-start items-start flex-grow relative">
           <p class="self-stretch flex-grow text-m font-semibold text-left text-gray-900">Pridaj používateľa do skupiny</p>
         </div>
-        <%= link_to edit_members_admin_tenant_group_path(Current.tenant, @group), data: { turbo_frame: "modal" } do %>
-          <%= render Common::CloseButtonComponent.new %>
-        <% end %>
+        <%= render Common::CloseButtonComponent.new(link_to: edit_members_admin_tenant_group_path(Current.tenant, @group), target_frame: 'modal') %>
       </div>
       <div class="flex flex-col justify-start items-start self-stretch flex-grow-0 flex-shrink-0">
         <div class="flex flex-col justify-start items-start self-stretch p-6 divide-y">