From d732f23db0e8e5dba643f5e94be1c0ae3be17ffd Mon Sep 17 00:00:00 2001
From: kinoppyd <ppyd@kinoppyd.dev>
Date: Wed, 21 Aug 2024 09:09:05 +0900
Subject: [PATCH] Add teams skeleton screen

---
 app/views/schedules/_table_skeleton.html.erb |   8 +-
 app/views/teams/show.html.erb                | 110 ++++++++++---------
 2 files changed, 63 insertions(+), 55 deletions(-)

diff --git a/app/views/schedules/_table_skeleton.html.erb b/app/views/schedules/_table_skeleton.html.erb
index 80c23011..662ab754 100644
--- a/app/views/schedules/_table_skeleton.html.erb
+++ b/app/views/schedules/_table_skeleton.html.erb
@@ -42,13 +42,13 @@
               </div>
             </th>
             <td>
-              <div class="p-2"><%= render partial: "card_skeleton" %></div>
+              <div class="p-2"><%= render partial: "schedules/card_skeleton" %></div>
             </td>
             <td>
-              <div class="p-2"><%= render partial: "card_skeleton" %></div>
+              <div class="p-2"><%= render partial: "schedules/card_skeleton" %></div>
             </td>
             <td>
-              <div class="p-2"><%= render partial: "card_skeleton" %></div>
+              <div class="p-2"><%= render partial: "schedules/card_skeleton" %></div>
             </td>
           </tr>
         <% end %>
@@ -59,7 +59,7 @@
         <div class="h-2 m-4 bg-slate-300 rounded"></div>
         </p>
         <% 5.times do %>
-          <div class="p-2"><%= render partial: "card_skeleton" %></div>
+          <div class="p-2"><%= render partial: "schedules/card_skeleton" %></div>
         <% end %>
       </div>
     </div>
diff --git a/app/views/teams/show.html.erb b/app/views/teams/show.html.erb
index 677ed9af..aba2ae9c 100644
--- a/app/views/teams/show.html.erb
+++ b/app/views/teams/show.html.erb
@@ -48,61 +48,69 @@
 </div>
 
 
-<div data-controller="schedule-table" class="max-w-[1120px] mx-auto">
-  <div class="flex overflow-x-auto overflow-y-hidden gap-2 p-0">
-    <div class="relative flex sm:block justify-center flex-grow shrink-0 basis-auto m-1 before:absolute before:left-0 before:right-0 before:bottom-0 before:border-b-[1px]">
-      <% @schedule_table.days.each do |day| %>
-        <button data-action="click->schedule-table#switch" value="<%= day %>" class="tab-button bg-transparent appearance-none font-bold font-base text-[rgb(112,109,101)] h-10 solid border-0 border-b-[3px] px-4 sm:px-6 box-border border-b-transparent hover:bg-[rgb(248,247,246)] hover:text-[rgb(35,34,30)]">
-          <%= day %>
-        </button>
-      <% end %>
-    </div>
-  </div>
-  <div class="mt-4 overflow-y-auto">
-    <% @schedule_table.days.each do |day| %>
-      <div id="schedule-<%= day %>" class="schedule-table hidden">
-        <table class="hidden sm:table h-full w-full border-collapse border-spacing-0">
-          <thead>
-            <th class="p-4 text-sm leading-4 border border-solid border-[rgb(214,211,208)] w-auto min-w-[184px] text-left"><%= I18n.t('table.start_end') %></th>
-            <% @schedule_table[day].track_list.each do |track| %>
-              <th class="p-4 text-sm leading-4 border border-solid border-[rgb(214,211,208)] w-auto text-center"><%= track %></th>
-            <% end %>
-          </thead>
-          <tbody>
-            <% @schedule_table[day].rows.each do |row| %>
-              <% @selected = @plan.plan_schedules.map(&:schedule).any? { row.schedules.include?(_1) } %>
-              <tr class="align-baseline">
-                <th class="py-2 px-0 align-baseline">
-                  <div class="flex flex-col gap-1">
-                    <div class="flex items-center">
-                      <p class="text-xl font-normal mr-4 shrink-0"><%= row.start_end %></p>
-                      <hr class="w-full h-[1px] mr-4 bg-[rgb(214,211,208)] border-none">
-                    </div>
-                    <p class="text-sm font-bold text-[rgb(112,109,101)] text-left"><%= row.timezone %></p>
-                    <div class="p-2 pl-4 flex flex-wrap">
-                      <% @team.active_profiles.reject { |prof| row.schedules.any? { @member_schedules_map[prof.id].include?(_1.id) } }.each do |prof| %>
-                        <img src="<%= prof.avatar_url %>" class="h-12 w-12 rounded-full border-2 border-black bg-white ml-[-16px] mt-1" />
-                      <% end %>
+<% if turbo_frame_request? %>
+  <%= turbo_frame_tag "teams" do %>
+    <div data-controller="schedule-table" class="max-w-[1120px] mx-auto">
+      <div class="flex overflow-x-auto overflow-y-hidden gap-2 p-0">
+        <div class="relative flex sm:block justify-center flex-grow shrink-0 basis-auto m-1 before:absolute before:left-0 before:right-0 before:bottom-0 before:border-b-[1px]">
+          <% @schedule_table.days.each do |day| %>
+            <button data-action="click->schedule-table#switch" value="<%= day %>" class="tab-button bg-transparent appearance-none font-bold font-base text-[rgb(112,109,101)] h-10 solid border-0 border-b-[3px] px-4 sm:px-6 box-border border-b-transparent hover:bg-[rgb(248,247,246)] hover:text-[rgb(35,34,30)]">
+              <%= day %>
+            </button>
+          <% end %>
+        </div>
+      </div>
+      <div class="mt-4 overflow-y-auto">
+        <% @schedule_table.days.each do |day| %>
+          <div id="schedule-<%= day %>" class="schedule-table hidden">
+            <table class="hidden sm:table h-full w-full border-collapse border-spacing-0">
+              <thead>
+              <th class="p-4 text-sm leading-4 border border-solid border-[rgb(214,211,208)] w-auto min-w-[184px] text-left"><%= I18n.t('table.start_end') %></th>
+              <% @schedule_table[day].track_list.each do |track| %>
+                <th class="p-4 text-sm leading-4 border border-solid border-[rgb(214,211,208)] w-auto text-center"><%= track %></th>
+              <% end %>
+              </thead>
+              <tbody>
+              <% @schedule_table[day].rows.each do |row| %>
+                <% @selected = @plan.plan_schedules.map(&:schedule).any? { row.schedules.include?(_1) } %>
+                <tr class="align-baseline">
+                  <th class="py-2 px-0 align-baseline">
+                    <div class="flex flex-col gap-1">
+                      <div class="flex items-center">
+                        <p class="text-xl font-normal mr-4 shrink-0"><%= row.start_end %></p>
+                        <hr class="w-full h-[1px] mr-4 bg-[rgb(214,211,208)] border-none">
+                      </div>
+                      <p class="text-sm font-bold text-[rgb(112,109,101)] text-left"><%= row.timezone %></p>
+                      <div class="p-2 pl-4 flex flex-wrap">
+                        <% @team.active_profiles.reject { |prof| row.schedules.any? { @member_schedules_map[prof.id].include?(_1.id) } }.each do |prof| %>
+                          <img src="<%= prof.avatar_url %>" class="h-12 w-12 rounded-full border-2 border-black bg-white ml-[-16px] mt-1" />
+                        <% end %>
+                      </div>
                     </div>
-                  </div>
-                </th>
-                <% @schedule_table[day].track_list.each do |track| %>
+                  </th>
+                  <% @schedule_table[day].track_list.each do |track| %>
                     <td>
                       <div class="p-2"><%= row.tracks[track] ? render("schedules/card", schedule: row.tracks[track], mode: :team, inactive: @selected) : nil %></div>
                     </td>
-                <% end %>
-              </tr>
-            <% end %>
-          </tbody>
-        </table>
-        <div class="sm:hidden" id="mobile-table-<%= day %>">
-          <% @schedule_table[day].rows.each do |row| %>
-            <%= render partial: 'mobile_table_row', locals: { row: row, plan: @plan, track_list: @schedule_table[day].track_list } %>
-          <% end %>
-        </div>
+                  <% end %>
+                </tr>
+              <% end %>
+              </tbody>
+            </table>
+            <div class="sm:hidden" id="mobile-table-<%= day %>">
+              <% @schedule_table[day].rows.each do |row| %>
+                <%= render partial: 'mobile_table_row', locals: { row: row, plan: @plan, track_list: @schedule_table[day].track_list } %>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
       </div>
-    <% end %>
-  </div>
-</div>
+    </div>
+  <% end %>
+<% else %>
+  <%= turbo_frame_tag "teams", src: team_path(@team) do %>
+    <%= render partial: "schedules/table_skeleton", locals: { schedule_table: @schedule_table } %>
+  <% end %>
+<% end %>
 
 <%= turbo_frame_tag "modal" %>