Add API to add cards to the dashboard from a plugin

Azuriom · Feb 8, 2020 · fdf7f65 · fdf7f65
1 parent 78e14a2
commit fdf7f65
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 3 deletions.
diff --git a/app/Extensions/Plugin/AdminDashboardCardComposer.php b/app/Extensions/Plugin/AdminDashboardCardComposer.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace Azuriom\Extensions\Plugin;
+
+use Illuminate\Support\Arr;
+use Illuminate\View\View;
+
+abstract class AdminDashboardCardComposer
+{
+    /**
+     * Get the cards to add to the admin dashboard.
+     * Each card should contains:
+     * - 'color' : A Bootstrap color (e.g: success)
+     * - 'icon' : A FontAwesome 5 icon (e.g: fas fa-rocket)
+     * - 'name' : The name of the card
+     * - 'value' : The value of the card
+     *
+     * @return array
+     */
+    abstract public function getCards();
+
+    /**
+     * Bind data to the view.
+     *
+     * @param  View  $view
+     * @return void
+     */
+    public function compose(View $view)
+    {
+        $cards = Arr::get($view, 'cards', []);
+
+        $view->with('cards', $this->getCards() + $cards);
+    }
+}
diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php
@@ -17,9 +17,9 @@
     @endif
 
     @foreach($apiAlerts as $alertLevel => $alertMessage)
-            <div class="alert alert-{{ $alertLevel }} shadow-sm" role="alert">
-                {!! $alertMessage !!}
-            </div>
+        <div class="alert alert-{{ $alertLevel }} shadow-sm" role="alert">
+            {!! $alertMessage !!}
+        </div>
     @endforeach
 
     <!-- Content Row -->
@@ -92,6 +92,24 @@
                 </div>
             </div>
         </div>
+
+        @foreach($cards ?? [] as $card)
+            <div class="col-xl-3 col-md-6 mb-4">
+                <div class="card border-left-{{ $card['color'] }} shadow h-100 py-2">
+                    <div class="card-body">
+                        <div class="row no-gutters align-items-center">
+                            <div class="col mr-2">
+                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">{{ trans($card['name']) }}</div>
+                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $card['value'] }}</div>
+                            </div>
+                            <div class="col-auto">
+                                <i class="{{ $card['icon'] }} fa-2x text-gray-300"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        @endforeach
     </div>
 
     <div class="row">