Add Rating Star Action

ibrahimBougaoua · Aug 24, 2023 · 41f56e7 · 41f56e7
1 parent defcabb
commit 41f56e7
Show file tree

Hide file tree

Showing 6 changed files with 271 additions and 5 deletions.
diff --git a/config/filament-rating-star.php b/config/filament-rating-star.php
@@ -2,5 +2,11 @@
 
 // config for IbrahimBougaoua/FilamentRatingStar
 return [
-
+    'stars' => [
+        'star1' => '1',
+        'star2' => '2',
+        'star3' => '3',
+        'star4' => '4',
+        'star5' => '5',
+    ]
 ];
diff --git a/resources/dist/style.css b/resources/dist/style.css
@@ -0,0 +1,100 @@
+.ratings {
+    position: relative;
+    z-index: 1;
+}
+
+.ratings textarea.form-control {
+    height: 80px;
+    font-size: 14px;
+}
+
+.ratings .stars {
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABaCAYAAACv+ebYAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDcvMDMvMTNJ3Rb7AAACnklEQVRoge2XwW3bMBSGPxa9NxtIGzTAW8DdRL7o3A0qb+BrdNIm9QAm0G7gbJBMwB5MoVJNUSRFIXGqHwhkmXr68hOPNH9ljOEt9OlNqBs4RlrrSmtdpdZ/Ti0EGnvtUoqTHFunBVCkuk6d6mbi83rggdteSa5THDeB3+UDO9z2inatXFum1roESuAReAB29vp15n2/gRfgZK+/gIuIXLxgrfUO+Bnzn0fom4ic+pvRVNuB/QrQ/RB6A7bwLjN8b985krO5MsKd0ElwJvgk1AteCPdCYWI5/SutddQxRUTU3DOzG4hd01EKqQnZuaLBITUh4F0CeLYm5CDw6PjuFTjaz9+BLwE1I8VO9StwAEoRaUSkseMHO+aqcWq2qwcdfQCOIvIy8dwDV/c/YL6zvWDbnQ3QuH5hltQEreM1dH/n6g28gT8eWLVUqqVKrb+vtGidFkCR6vp+0uLAba8k1/eRFh1ue0W7dv4sqpaSjGnR1Fy8YNWyY8W0aGpO/c1oqu3AKmlxCL0BW3iXGb637xzJ2VwZ4U7oJDgTfBLqBS+Ee6EQeMpULVFHUVOzPC3aNR2lkJotLbr0vtKiqWlMTcNaaXHQ0QfgaGqcaVG1jNLibGcbYyb/eDIlT6bjyZS+51JqtrS4gTfw/wzWqkKrKrU8fQPR6gKAmDKlPM3x1WkBFKmu0xxf3fZR5jnFdbzjv257JbmOdzx22yvadZzjW7e9ol27HWtVkjEtIubiB2u1Y8W0iJhTfzOe6uvAKmlxCL0FX+FdZvjevnMkd3Plgzuh0+A88EmoH7wM7oVC6AaiVdwuI2Z5WrRrOk4BNVtadOl9pUXENIhpWCstDjr6ABwR40yLaDVKi7Od7U1/Z0pzpjNngtNiaM2WFj8++A+motm0NTqjmwAAAABJRU5ErkJggg==") repeat-x 0 0;
+    width: 150px;
+}
+
+.ratings .stars:before,
+.ratings .stars:after {
+    display: table;
+    content: "";
+}
+
+.ratings .stars:after {
+    clear: both;
+}
+
+.ratings .stars input[type=radio] {
+    position: absolute;
+    opacity: 0;
+}
+
+.ratings .stars input[type=radio].star-5:checked~span {
+    width: 100%;
+}
+
+.ratings .stars input[type=radio].star-4:checked~span {
+    width: 80%;
+}
+
+.ratings .stars input[type=radio].star-3:checked~span {
+    width: 60%;
+}
+
+.ratings .stars input[type=radio].star-2:checked~span {
+    width: 40%;
+}
+
+.ratings .stars input[type=radio].star-1:checked~span {
+    width: 20%;
+}
+
+.ratings .stars label {
+    display: block;
+    width: 30px;
+    height: 30px;
+    margin: 0 !important;
+    padding: 0 !important;
+    text-indent: -99999rem;
+    float: left;
+    position: relative;
+    z-index: 10;
+    background: transparent !important;
+    cursor: pointer;
+}
+
+.ratings .stars label:hover~span {
+    background-position: 0 -30px;
+}
+
+.ratings .stars label.star-5:hover~span {
+    width: 100% !important;
+}
+
+.ratings .stars label.star-4:hover~span {
+    width: 80% !important;
+}
+
+.ratings .stars label.star-3:hover~span {
+    width: 60% !important;
+}
+
+.ratings .stars label.star-2:hover~span {
+    width: 40% !important;
+}
+
+.ratings .stars label.star-2:hover~span {
+    width: 20% !important;
+}
+
+.ratings .stars span {
+    display: block;
+    width: 0;
+    position: relative;
+    top: 0;
+    left: 0;
+    height: 30px;
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABaCAYAAACv+ebYAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDcvMDMvMTNJ3Rb7AAACnklEQVRoge2XwW3bMBSGPxa9NxtIGzTAW8DdRL7o3A0qb+BrdNIm9QAm0G7gbJBMwB5MoVJNUSRFIXGqHwhkmXr68hOPNH9ljOEt9OlNqBs4RlrrSmtdpdZ/Ti0EGnvtUoqTHFunBVCkuk6d6mbi83rggdteSa5THDeB3+UDO9z2inatXFum1roESuAReAB29vp15n2/gRfgZK+/gIuIXLxgrfUO+Bnzn0fom4ic+pvRVNuB/QrQ/RB6A7bwLjN8b985krO5MsKd0ElwJvgk1AteCPdCYWI5/SutddQxRUTU3DOzG4hd01EKqQnZuaLBITUh4F0CeLYm5CDw6PjuFTjaz9+BLwE1I8VO9StwAEoRaUSkseMHO+aqcWq2qwcdfQCOIvIy8dwDV/c/YL6zvWDbnQ3QuH5hltQEreM1dH/n6g28gT8eWLVUqqVKrb+vtGidFkCR6vp+0uLAba8k1/eRFh1ue0W7dv4sqpaSjGnR1Fy8YNWyY8W0aGpO/c1oqu3AKmlxCL0BW3iXGb637xzJ2VwZ4U7oJDgTfBLqBS+Ee6EQeMpULVFHUVOzPC3aNR2lkJotLbr0vtKiqWlMTcNaaXHQ0QfgaGqcaVG1jNLibGcbYyb/eDIlT6bjyZS+51JqtrS4gTfw/wzWqkKrKrU8fQPR6gKAmDKlPM3x1WkBFKmu0xxf3fZR5jnFdbzjv257JbmOdzx22yvadZzjW7e9ol27HWtVkjEtIubiB2u1Y8W0iJhTfzOe6uvAKmlxCL0FX+FdZvjevnMkd3Plgzuh0+A88EmoH7wM7oVC6AaiVdwuI2Z5WrRrOk4BNVtadOl9pUXENIhpWCstDjr6ABwR40yLaDVKi7Od7U1/Z0pzpjNngtNiaM2WFj8++A+motm0NTqjmwAAAABJRU5ErkJggg==") repeat-x 0 -60px;
+    -webkit-transition: width 0.5s;
+    -o-transition: width 0.5s;
+    transition: width 0.5s;
+}
diff --git a/resources/views/actions/rating-star.blade.php b/resources/views/actions/rating-star.blade.php
@@ -0,0 +1,134 @@
+<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
+  @php
+      $id = $getId();
+      $isDisabled = $isDisabled();
+      $statePath = $getStatePath();
+      $options = config('filament-rating-star.stars');
+  @endphp
+
+  <div class="ratings">
+    <div class="stars mb-3">
+      @foreach ($options as $key => $value)
+            @php
+                $shouldOptionBeDisabled = $isDisabled || $isOptionDisabled($key, $value);
+            @endphp
+            <input
+                @disabled($shouldOptionBeDisabled)
+                id="{{ $key }}"
+                name="{{ $id }}"
+                type="radio"
+                value="{{ $value }}"
+                wire:loading.attr="disabled"
+                {{ $applyStateBindingModifiers('wire:model') }}="{{ $statePath }}"
+                class="star-{{ $value }}"
+            />
+            <label class="star-{{ $value }}" for="{{ $key }}"></label>
+        @endforeach
+        <span></span>
+    </div>
+  </div>
+
+</x-dynamic-component>
+
+<style>
+.ratings {
+  position: relative;
+  z-index: 1;
+}
+
+.ratings textarea.form-control {
+  height: 80px;
+  font-size: 14px;
+}
+
+.ratings .stars {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABaCAYAAACv+ebYAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDcvMDMvMTNJ3Rb7AAACnklEQVRoge2XwW3bMBSGPxa9NxtIGzTAW8DdRL7o3A0qb+BrdNIm9QAm0G7gbJBMwB5MoVJNUSRFIXGqHwhkmXr68hOPNH9ljOEt9OlNqBs4RlrrSmtdpdZ/Ti0EGnvtUoqTHFunBVCkuk6d6mbi83rggdteSa5THDeB3+UDO9z2inatXFum1roESuAReAB29vp15n2/gRfgZK+/gIuIXLxgrfUO+Bnzn0fom4ic+pvRVNuB/QrQ/RB6A7bwLjN8b985krO5MsKd0ElwJvgk1AteCPdCYWI5/SutddQxRUTU3DOzG4hd01EKqQnZuaLBITUh4F0CeLYm5CDw6PjuFTjaz9+BLwE1I8VO9StwAEoRaUSkseMHO+aqcWq2qwcdfQCOIvIy8dwDV/c/YL6zvWDbnQ3QuH5hltQEreM1dH/n6g28gT8eWLVUqqVKrb+vtGidFkCR6vp+0uLAba8k1/eRFh1ue0W7dv4sqpaSjGnR1Fy8YNWyY8W0aGpO/c1oqu3AKmlxCL0BW3iXGb637xzJ2VwZ4U7oJDgTfBLqBS+Ee6EQeMpULVFHUVOzPC3aNR2lkJotLbr0vtKiqWlMTcNaaXHQ0QfgaGqcaVG1jNLibGcbYyb/eDIlT6bjyZS+51JqtrS4gTfw/wzWqkKrKrU8fQPR6gKAmDKlPM3x1WkBFKmu0xxf3fZR5jnFdbzjv257JbmOdzx22yvadZzjW7e9ol27HWtVkjEtIubiB2u1Y8W0iJhTfzOe6uvAKmlxCL0FX+FdZvjevnMkd3Plgzuh0+A88EmoH7wM7oVC6AaiVdwuI2Z5WrRrOk4BNVtadOl9pUXENIhpWCstDjr6ABwR40yLaDVKi7Od7U1/Z0pzpjNngtNiaM2WFj8++A+motm0NTqjmwAAAABJRU5ErkJggg==") repeat-x 0 0;
+  width: 150px;
+}
+
+.ratings .stars:before,
+.ratings .stars:after {
+  display: table;
+  content: "";
+}
+
+.ratings .stars:after {
+  clear: both;
+}
+
+.ratings .stars input[type=radio] {
+  position: absolute;
+  opacity: 0;
+}
+
+.ratings .stars input[type=radio].star-5:checked~span {
+  width: 100%;
+}
+
+.ratings .stars input[type=radio].star-4:checked~span {
+  width: 80%;
+}
+
+.ratings .stars input[type=radio].star-3:checked~span {
+  width: 60%;
+}
+
+.ratings .stars input[type=radio].star-2:checked~span {
+  width: 40%;
+}
+
+.ratings .stars input[type=radio].star-1:checked~span {
+  width: 20%;
+}
+
+.ratings .stars label {
+  display: block;
+  width: 30px;
+  height: 30px;
+  margin: 0 !important;
+  padding: 0 !important;
+  text-indent: -99999rem;
+  float: left;
+  position: relative;
+  z-index: 10;
+  background: transparent !important;
+  cursor: pointer;
+}
+
+.ratings .stars label:hover~span {
+  background-position: 0 -30px;
+}
+
+.ratings .stars label.star-5:hover~span {
+  width: 100% !important;
+}
+
+.ratings .stars label.star-4:hover~span {
+  width: 80% !important;
+}
+
+.ratings .stars label.star-3:hover~span {
+  width: 60% !important;
+}
+
+.ratings .stars label.star-2:hover~span {
+  width: 40% !important;
+}
+
+.ratings .stars label.star-2:hover~span {
+  width: 20% !important;
+}
+
+.ratings .stars span {
+  display: block;
+  width: 0;
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 30px;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABaCAYAAACv+ebYAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDcvMDMvMTNJ3Rb7AAACnklEQVRoge2XwW3bMBSGPxa9NxtIGzTAW8DdRL7o3A0qb+BrdNIm9QAm0G7gbJBMwB5MoVJNUSRFIXGqHwhkmXr68hOPNH9ljOEt9OlNqBs4RlrrSmtdpdZ/Ti0EGnvtUoqTHFunBVCkuk6d6mbi83rggdteSa5THDeB3+UDO9z2inatXFum1roESuAReAB29vp15n2/gRfgZK+/gIuIXLxgrfUO+Bnzn0fom4ic+pvRVNuB/QrQ/RB6A7bwLjN8b985krO5MsKd0ElwJvgk1AteCPdCYWI5/SutddQxRUTU3DOzG4hd01EKqQnZuaLBITUh4F0CeLYm5CDw6PjuFTjaz9+BLwE1I8VO9StwAEoRaUSkseMHO+aqcWq2qwcdfQCOIvIy8dwDV/c/YL6zvWDbnQ3QuH5hltQEreM1dH/n6g28gT8eWLVUqqVKrb+vtGidFkCR6vp+0uLAba8k1/eRFh1ue0W7dv4sqpaSjGnR1Fy8YNWyY8W0aGpO/c1oqu3AKmlxCL0BW3iXGb637xzJ2VwZ4U7oJDgTfBLqBS+Ee6EQeMpULVFHUVOzPC3aNR2lkJotLbr0vtKiqWlMTcNaaXHQ0QfgaGqcaVG1jNLibGcbYyb/eDIlT6bjyZS+51JqtrS4gTfw/wzWqkKrKrU8fQPR6gKAmDKlPM3x1WkBFKmu0xxf3fZR5jnFdbzjv257JbmOdzx22yvadZzjW7e9ol27HWtVkjEtIubiB2u1Y8W0iJhTfzOe6uvAKmlxCL0FX+FdZvjevnMkd3Plgzuh0+A88EmoH7wM7oVC6AaiVdwuI2Z5WrRrOk4BNVtadOl9pUXENIhpWCstDjr6ABwR40yLaDVKi7Od7U1/Z0pzpjNngtNiaM2WFj8++A+motm0NTqjmwAAAABJRU5ErkJggg==") repeat-x 0 -60px;
+  -webkit-transition: width 0.5s;
+  -o-transition: width 0.5s;
+  transition: width 0.5s;
+}
+</style>
diff --git a/resources/views/columns/rating-star-column.blade.php b/resources/views/columns/rating-star-column.blade.php
@@ -1,10 +1,10 @@
 @php
-    $isDisabled = $isDisabled();
-    $state = $getState();
+  $isDisabled = $isDisabled();
+  $state = $getState();
 @endphp
 
 <div class="flex flex-row-reverse justify-center p-10">
-  @for ($i=1;$i<=5;$i++)
+  @for ( $i=1; $i <= count(config('filament-rating-star.stars')); $i++ )
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="25" height="25">
       <path d="M15.765,2.434l2.875,8.512l8.983,0.104c0.773,0.009,1.093,0.994,0.473,1.455l-7.207,5.364l2.677,8.576 c0.23,0.738-0.607,1.346-1.238,0.899L15,22.147l-7.329,5.196c-0.63,0.447-1.468-0.162-1.238-0.899l2.677-8.576l-7.207-5.364 c-0.62-0.461-0.3-1.446,0.473-1.455l8.983-0.104l2.875-8.512C14.482,1.701,15.518,1.701,15.765,2.434z" 
       fill="{{ ( $state <= $i ) ? '#ffc107' : '#ddd' }}" />

diff --git a/src/Actions/RatingStar.php b/src/Actions/RatingStar.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace IbrahimBougaoua\FilamentRatingStar\Actions;
+
+use Filament\Forms\Components\Radio;
+
+class RatingStar extends Radio
+{
+    protected string $view = 'filament-rating-star::actions.rating-star';
+
+    public static function make(?string $name = 'rating'): static
+    {
+        return parent::make($name);
+    }
+}
diff --git a/src/FilamentRatingStarServiceProvider.php b/src/FilamentRatingStarServiceProvider.php
@@ -5,6 +5,8 @@
 use IbrahimBougaoua\FilamentRatingStar\Commands\FilamentRatingStarCommand;
 use Spatie\LaravelPackageTools\Package;
 use Spatie\LaravelPackageTools\PackageServiceProvider;
+use Filament\Support\Assets\Css;
+use Filament\Support\Facades\FilamentAsset;
 
 class FilamentRatingStarServiceProvider extends PackageServiceProvider
 {
@@ -19,7 +21,16 @@ public function configurePackage(Package $package): void
             ->name('filament-rating-star')
             ->hasConfigFile()
             ->hasViews()
-            ->hasMigration('create_filament-rating-star_table')
             ->hasCommand(FilamentRatingStarCommand::class);
     }
+
+    public function packageBooted(): void
+    {
+        FilamentAsset::register(
+            [
+                Css::make('filament-rating-star-styles', __DIR__ . '/../resources/dist/style.css')
+            ],
+            'ibrahimbougaoua/filament-rating-star'
+        );
+    }
 }