Refactor progress components to use a new Progress class for better code reuse

Author: a7medKhalid

resources/views/tables/columns/circle-progress.blade.php

@@ -1,28 +1,14 @@
 @php
-    $total = $getState()['total'];
-    $progress = $getState()['progress'];
-    $progress = $total > 0 ? ($progress / $total) * 100 : 0;
-
-    if($progress === 100){
-        $progressColor = '#2980b9';
-    } else if($progress > 50){
-        $progressColor = '#27ae60';
-    } else if($progress > 25){
-        $progressColor = '#f39c12';
-    } else {
-        $progressColor = '#e74c3c';
-    }    
-    
-    $displayProgress = $progress === 100 ? number_format($progress, 0) : number_format($progress, 2);
+    $data = $column->getProgressData($getState());
 @endphp
 
 <div class="progress-circle" style="
     background: conic-gradient(
-        {{ $progressColor }} {{ $displayProgress * 3.6 }}deg,
-        #e5e7eb {{ $displayProgress * 3.6 }}deg
+        {{ $data['progressColor'] }} {{ $data['displayProgress'] * 3.6 }}deg,
+        #e5e7eb {{ $data['displayProgress'] * 3.6 }}deg
     );">
     @if($column instanceof \LaraZeus\Progress\Tables\Columns\CircleProgress && $column->getCanShow())
-        <small>{{ $displayProgress }}%</small>
+        <small>{{ $data['displayProgress'] }}%</small>
     @endif
 </div>
 
@@ -55,4 +41,4 @@
         font-size: 8pt;
         z-index: 2;
     }
-</style>
+</style>

resources/views/tables/columns/progress-bar.blade.php

@@ -1,30 +1,16 @@
 @php
-    $total = $getState()['total'];
-    $progress = $getState()['progress'];
-    $progress = $total > 0 ? ($progress / $total) * 100 : 0;
-
-    if($progress === 100){
-        $progressColor = '#2980b9';
-    } else if($progress > 50){
-        $progressColor = '#27ae60';
-    } else if($progress > 25){
-        $progressColor = '#f39c12';
-    } else {
-        $progressColor = '#e74c3c';
-    }
-
-    $displayProgress = $progress === 100 ? number_format($progress, 0) : number_format($progress, 2);
+    $data = $column->getProgressData($getState());
 @endphp
 
 <div class="progress-container">
-    <div class="progress-bar" style="width: {{ $displayProgress }}%; background-color: {{ $progressColor }};"></div>
+    <div class="progress-bar" style="width: {{ $data['displayProgress'] }}%; background-color: {{ $data['progressColor'] }};"></div>
     <div class="progress-text">
         @if($column instanceof \LaraZeus\Progress\Tables\Columns\ProgressBar && $column->getCanShow())
             <small @class([
-                'text-gray-700' => $displayProgress !== 100,
-                'text-white' => $displayProgress === 100
+                'text-gray-700' => $data['displayProgress'] !== 100,
+                'text-white' => $data['displayProgress'] === 100
                 ])>
-                {{ $displayProgress }}%
+                {{ $data['displayProgress'] }}%
             </small>
         @endif
     </div>
@@ -77,4 +63,4 @@
             background-position: 0 0;
         }
     }
-</style>
+</style>

src/Tables/Columns/CircleProgress.php

@@ -2,23 +2,7 @@
 
 namespace LaraZeus\Progress\Tables\Columns;
 
-use Filament\Tables\Columns\Column;
-
-class CircleProgress extends Column
+class CircleProgress extends Progress
 {
-    protected bool $canShow = true;
-
     protected string $view = 'lara-zeus-progress::tables.columns.circle-progress';
-
-    public function hideProgressValue($canShow = false): static
-    {
-        $this->canShow = $canShow;
-
-        return $this;
-    }
-
-    public function getCanShow(): bool
-    {
-        return $this->canShow;
-    }
 }

src/Tables/Columns/Progress.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace LaraZeus\Progress\Tables\Columns;
+
+use Filament\Tables\Columns\Column;
+
+class Progress extends Column
+{
+    protected bool $canShow = true;
+
+    public function hideProgressValue($canShow = false): static
+    {
+        $this->canShow = $canShow;
+
+        return $this;
+    }
+
+    public function getCanShow(): bool
+    {
+        return $this->canShow;
+    }
+
+    public function getProgressData(array $state): array
+    {
+        $total = $state['total'] ?? 0;
+        $progress = $state['progress'] ?? 0;
+        $progress = $total > 0 ? ($progress / $total) * 100 : 0;
+
+        if ($progress === 100) {
+            $progressColor = '#2980b9';
+        } elseif ($progress > 50) {
+            $progressColor = '#27ae60';
+        } elseif ($progress > 25) {
+            $progressColor = '#f39c12';
+        } else {
+            $progressColor = '#e74c3c';
+        }
+
+        $displayProgress = $progress === 100 ? number_format($progress, 0) : number_format($progress, 2);
+        $displayProgress = (int) round($displayProgress);
+
+        return [
+            'progress' => $progress,
+            'progressColor' => $progressColor,
+            'displayProgress' => $displayProgress,
+        ];
+    }
+}

src/Tables/Columns/ProgressBar.php

@@ -2,23 +2,7 @@
 
 namespace LaraZeus\Progress\Tables\Columns;
 
-use Filament\Tables\Columns\Column;
-
-class ProgressBar extends Column
+class ProgressBar extends Progress
 {
-    protected bool $canShow = true;
-
     protected string $view = 'lara-zeus-progress::tables.columns.progress-bar';
-
-    public function hideProgressValue($canShow = false): static
-    {
-        $this->canShow = $canShow;
-
-        return $this;
-    }
-
-    public function getCanShow(): bool
-    {
-        return $this->canShow;
-    }
 }