From 846e01e88be184604b037f94294f300a631fffa4 Mon Sep 17 00:00:00 2001
From: 199ocero <199ocero@gmail.com>
Date: Fri, 5 Jan 2024 07:22:25 +0800
Subject: [PATCH] added items to show

---
 .../components/activity-section.blade.php     | 113 ++++++++++--------
 src/Components/ActivitySection.php            |  24 +++-
 2 files changed, 83 insertions(+), 54 deletions(-)

diff --git a/resources/views/infolists/components/activity-section.blade.php b/resources/views/infolists/components/activity-section.blade.php
index 2e9b533..2bca0c6 100644
--- a/resources/views/infolists/components/activity-section.blade.php
+++ b/resources/views/infolists/components/activity-section.blade.php
@@ -13,63 +13,78 @@
 
     @if (count($childComponentContainers = $getChildComponentContainers()) &&
             count($childComponentContainers[0]->getComponents()) > 0)
-        @foreach ($childComponentContainers as $index => $container)
-            @php
-                $activityComponents = [
-                    'activityIcon' => null,
-                    'activityBadge' => null,
-                    'activityTitle' => null,
-                    'activityDate' => null,
-                    'activityDescription' => null,
-                ];
+        @php
+            $itemsCount = count($childComponentContainers);
+        @endphp
 
-                foreach ($container->getComponents() as $component) {
-                    $viewIdentifier = $component->getViewIdentifier();
-                    if (array_key_exists($viewIdentifier, $activityComponents)) {
-                        $activityComponents[$viewIdentifier] = $component;
+        <div x-data="{ itemsCount: @js($itemsCount), itemsToShow: @js($getItemsToShow() ?? $itemsCount) }">
+            @foreach ($childComponentContainers as $index => $container)
+                @php
+                    $activityComponents = [
+                        'activityIcon' => null,
+                        'activityBadge' => null,
+                        'activityTitle' => null,
+                        'activityDate' => null,
+                        'activityDescription' => null,
+                    ];
+
+                    foreach ($container->getComponents() as $component) {
+                        $viewIdentifier = $component->getViewIdentifier();
+                        if (array_key_exists($viewIdentifier, $activityComponents)) {
+                            $activityComponents[$viewIdentifier] = $component;
+                        }
                     }
-                }
 
-                extract($activityComponents);
-            @endphp
+                    extract($activityComponents);
+                @endphp
 
-            <!-- Timeline -->
-            <div @class([
-                'flex flex-col',
-                'mb-2' => !$loop->last,
-                'mb-0' => $loop->last,
-            ])>
-                <!-- Date -->
-                {{ $activityDate }}
-                <!-- End Date -->
+                <!-- Timeline -->
+                <div x-show="@js($index) < itemsToShow" @class([
+                    'flex flex-col',
+                    'mb-2' => !$loop->last,
+                    'mb-0' => $loop->last,
+                ])>
+                    <!-- Date -->
+                    {{ $activityDate }}
+                    <!-- End Date -->
 
-                <!-- Item -->
-                <div class="flex gap-x-3">
-                    <!-- Icon -->
-                    {{ $activityIcon }}
-                    <!-- End Icon -->
+                    <!-- Item -->
+                    <div class="flex gap-x-3">
+                        <!-- Icon -->
+                        {{ $activityIcon }}
+                        <!-- End Icon -->
 
-                    <!-- Right Content -->
-                    <div class="grow pt-0.5 mb-10 space-y-1">
-                        {{-- Bagde --}}
-                        @if ($activityBadge)
-                            <div class="flex">
-                                {{ $activityBadge }}
-                            </div>
-                        @endif
-                        {{-- End Badge --}}
-                        {{-- Title --}}
-                        {{ $activityTitle }}
-                        {{-- End Title --}}
-                        {{-- Description --}}
-                        {{ $activityDescription }}
-                        {{-- End Description --}}
+                        <!-- Right Content -->
+                        <div class="grow pt-0.5 mb-10 space-y-1">
+                            {{-- Bagde --}}
+                            @if ($activityBadge)
+                                <div class="flex">
+                                    {{ $activityBadge }}
+                                </div>
+                            @endif
+                            {{-- End Badge --}}
+                            {{-- Title --}}
+                            {{ $activityTitle }}
+                            {{-- End Title --}}
+                            {{-- Description --}}
+                            {{ $activityDescription }}
+                            {{-- End Description --}}
+                        </div>
+                        <!-- End Right Content -->
                     </div>
-                    <!-- End Right Content -->
+                    <!-- End Item -->
                 </div>
-                <!-- End Item -->
+                <!-- End Timeline -->
+            @endforeach
+
+            <!-- Item -->
+            <div x-show="itemsToShow < itemsCount" class="ps-[7px] flex gap-x-3">
+                <button x-on:click="itemsToShow += itemsToShow" type="button"
+                    class="inline-flex items-center text-sm font-medium text-blue-600 hs-collapse-toggle hs-collapse-open:hidden text-start gap-x-1 decoration-2 hover:underline dark:text-blue-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
+                    Show older
+                </button>
             </div>
-            <!-- End Timeline -->
-        @endforeach
+            <!-- End Item -->
+        </div>
     @endif
 </x-filament::section>
diff --git a/src/Components/ActivitySection.php b/src/Components/ActivitySection.php
index 6a010cf..1cebd3f 100644
--- a/src/Components/ActivitySection.php
+++ b/src/Components/ActivitySection.php
@@ -12,28 +12,37 @@ class ActivitySection extends Entry
 {
     protected string $view = 'activity-timeline::infolists.components.activity-section';
 
-    // protected string|Closure|null $description = null;
+    protected string | Closure | null $description = null;
+
+    protected int | Closure | null $itemsToShow = null;
 
     // protected Direction|string $direction = Direction::Vertical;
 
     // protected array|int|null $horizontalItems = null;
 
-    protected bool|Closure|null $isAside = null;
+    protected bool |Closure | null $isAside = null;
 
-    public function description(string|Closure|null $description = null): static
+    public function description(string | Closure | null $description = null): static
     {
         $this->description = $description;
 
         return $this;
     }
 
-    public function aside(bool|Closure|null $condition = true): static
+    public function aside(bool | Closure| null $condition = true): static
     {
         $this->isAside = $condition;
 
         return $this;
     }
 
+    public function itemsToShow(int | Closure $items): static
+    {
+        $this->itemsToShow = $items;
+
+        return $this;
+    }
+
     public function isAside(): bool
     {
         return (bool) ($this->evaluate($this->isAside) ?? false);
@@ -44,12 +53,17 @@ public function getDescription(): string
         return $this->evaluate($this->description);
     }
 
+    public function getItemsToShow(): int | null
+    {
+        return $this->evaluate($this->itemsToShow);
+    }
+
     /**
      * @return array<ComponentContainer>
      */
     public function getChildComponentContainers(bool $withHidden = false): array
     {
-        if ((! $withHidden) && $this->isHidden()) {
+        if ((!$withHidden) && $this->isHidden()) {
             return [];
         }