added empty state

199ocero · Jan 14, 2024 · a28c640 · a28c640
1 parent 457b36c
commit a28c640
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 14 deletions.
diff --git a/resources/views/components/empty-state.blade.php b/resources/views/components/empty-state.blade.php
@@ -0,0 +1,25 @@
+@props([
+    'description' => null,
+    'heading',
+    'icon',
+])
+
+<div {{ $attributes->class(['fi-ta-empty-state px-6 py-12']) }}>
+    <div class="grid max-w-lg mx-auto text-center fi-ta-empty-state-content justify-items-center">
+        <div class="p-3 mb-4 bg-gray-100 rounded-full fi-ta-empty-state-icon-ctn dark:bg-gray-500/20">
+            <x-filament::icon :icon="$icon"
+                class="w-6 h-6 text-gray-500 fi-ta-empty-state-icon dark:text-gray-400" />
+        </div>
+
+        <h4
+            {{ $attributes->class(['fi-ta-empty-state-heading text-base font-semibold leading-6 text-gray-950 dark:text-white']) }}>
+            {{ $heading }}
+        </h4>
+
+        @if ($description)
+            <p {{ $attributes->class(['fi-ta-empty-state-description text-sm text-gray-500 dark:text-gray-400']) }}>
+                {{ $description }}
+            </p>
+        @endif
+    </div>
+</div>
diff --git a/resources/views/infolists/components/activity-section.blade.php b/resources/views/infolists/components/activity-section.blade.php
@@ -36,27 +36,25 @@
 
                 <!-- Timeline -->
                 <div x-show="@js($index) < totalShowItemsCount" :key="@js(rand())"
-                    @class([
-                        'flex flex-col',
-                    ])>
+                    @class(['flex flex-col'])>
                     <!-- Item -->
-                      <div class="flex gap-x-3">
+                    <div class="flex gap-x-3">
                         <!-- Icon -->
                         <div @class([
-                                "relative last:after:hidden",
-                                "after:absolute after:top-7 after:bottom-0 after:start-4 after:w-px after:-translate-x-[0.5px] after:bg-gray-300 dark:after:bg-gray-700" => !$loop->last
-                            ])>
-                            {{ $activityIcon}}
+                            'relative last:after:hidden',
+                            'after:absolute after:top-7 after:bottom-0 after:start-4 after:w-px after:-translate-x-[0.5px] after:bg-gray-300 dark:after:bg-gray-700' => !$loop->last,
+                        ])>
+                            {{ $activityIcon }}
                         </div>
                         <!-- End Icon -->
 
                         <!-- Right Content -->
                         <div @class([
-                                "grow pt-1 space-y-1",
-                                "mb-7" => !$loop->last,
-                                "mb-0" => $loop->last
+                            'grow pt-1 space-y-1',
+                            'mb-7' => !$loop->last,
+                            'mb-0' => $loop->last,
                         ])>
-                            <div class="flex justify-between items-center space-x-5">
+                            <div class="flex items-center justify-between space-x-5">
                                 <!-- Title -->
                                 {{ $activityTitle }}
                                 <!-- End Title -->
@@ -69,7 +67,7 @@
                             {{-- End Description --}}
                         </div>
                         <!-- End Right Content -->
-                      </div>
+                    </div>
                 </div>
                 <!-- End Timeline -->
             @endforeach
@@ -88,5 +86,7 @@ class="cursor-pointer hover:underline">
             </div>
             <!-- End Show More -->
         </div>
+    @else
+        <x-activity-timeline::empty-state :description="$getEmptyStateDescription()" :heading="$getEmptyStateHeading()" :icon="$getEmptyStateIcon()" />
     @endif
 </x-filament::section>
diff --git a/src/Components/ActivitySection.php b/src/Components/ActivitySection.php
@@ -6,9 +6,12 @@
 use Filament\Infolists\ComponentContainer;
 use Filament\Infolists\Components\Entry;
 use Illuminate\Database\Eloquent\Model;
+use JaOcero\ActivityTimeline\Concerns\HasEmptyState;
 
 class ActivitySection extends Entry
 {
+    use HasEmptyState;
+
     protected string $view = 'activity-timeline::infolists.components.activity-section';
 
     protected string|Closure|null $description = null;
@@ -106,7 +109,7 @@ public function getShowItemsColor(): string
      */
     public function getChildComponentContainers(bool $withHidden = false): array
     {
-        if ((! $withHidden) && $this->isHidden()) {
+        if ((!$withHidden) && $this->isHidden()) {
             return [];
         }
 

diff --git a/src/Concerns/HasEmptyState.php b/src/Concerns/HasEmptyState.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace JaOcero\ActivityTimeline\Concerns;
+
+use Closure;
+use Illuminate\Contracts\Support\Htmlable;
+use Illuminate\Contracts\View\View;
+
+trait HasEmptyState
+{
+    protected View | Htmlable | Closure | null $emptyState = null;
+
+    protected string | Htmlable | Closure | null $emptyStateDescription = null;
+
+    protected string | Htmlable | Closure | null $emptyStateHeading = null;
+
+    protected string | Closure | null $emptyStateIcon = null;
+
+
+    public function emptyStateDescription(string | Htmlable | Closure | null $description): static
+    {
+        $this->emptyStateDescription = $description;
+
+        return $this;
+    }
+
+    public function emptyStateHeading(string | Htmlable | Closure | null $heading): static
+    {
+        $this->emptyStateHeading = $heading;
+
+        return $this;
+    }
+
+    public function emptyStateIcon(string | Closure | null $icon): static
+    {
+        $this->emptyStateIcon = $icon;
+
+        return $this;
+    }
+
+    public function getEmptyStateDescription(): string | Htmlable | null
+    {
+        return $this->evaluate($this->emptyStateDescription);
+    }
+
+    public function getEmptyStateHeading(): string | Htmlable
+    {
+        return $this->evaluate($this->emptyStateHeading) ?? 'No ' . str($this->getName())->title();
+    }
+
+    public function getEmptyStateIcon(): string
+    {
+        return $this->evaluate($this->emptyStateIcon) ?? 'heroicon-o-x-mark';
+    }
+}