Stars refactor (#29)

rapidez · Jan 15, 2025 · 2052ffc · 2052ffc
1 parent 5dd06ed
commit 2052ffc
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 101 deletions.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ If you'd like to show product reviews on out-of-stock product pages you need to
 Add the stars where you'd like in `resources/views/vendor/rapidez/product/overview.blade.php`:
 ```blade
 @if($product->reviews_score)
-    <stars :score="{{ $product->reviews_score }}" :count="{{ $product->reviews_count }}"></stars>
+    <x-rapidez-reviews::stars :score="$product->reviews_score" :count="$product->reviews_count" />
 @endif
 ```
 
@@ -54,7 +54,8 @@ And the form to add a review:
 
 Add somewhere in `resources/views/category/partials/listing/item.blade.php`:
 ```blade
-<stars v-if="item.reviews_score" :score="item.reviews_score" :count="item.reviews_count"></stars>
+<x-rapidez-reviews::stars v-if="item.reviews_count" count="item.reviews_count" score="item.reviews_score"/>
+
 ```
 
 ## Views

diff --git a/resources/js/components.js b/resources/js/components.js
diff --git a/resources/js/components/StarInput.vue b/resources/js/components/StarInput.vue
diff --git a/resources/js/components/Stars.vue b/resources/js/components/Stars.vue
diff --git a/resources/js/package.js b/resources/js/package.js
diff --git a/resources/views/components/stars.blade.php b/resources/views/components/stars.blade.php
@@ -0,0 +1,25 @@
+@props(['score' => 0, 'count' => null])
+
+<div {{ $attributes->twMerge('flex items-center gap-1') }}>
+    <div class="relative">
+        <div class="flex gap-0.5">
+            @for ($star = 0; $star < 5; $star++)
+                <x-heroicon-s-star class="text-muted/50 size-5" />
+            @endfor
+        </div>
+        <div
+            v-bind:style="{ width: ({{ $score }} || 0) + '%'}"
+            style="width: {{ (int)$score }}%"
+            class="absolute inset-0 flex gap-0.5 overflow-hidden"
+        >
+            @for ($star = 0; $star < 5; $star++)
+                <x-heroicon-s-star class="size-5 shrink-0 text-yellow-400" />
+            @endfor
+        </div>
+    </div>
+    @if ($count)
+        <span class="text-sm" v-text="'(' + ({{ $count }} || 0) + ')'">
+            ({{ (int)$count }})
+        </span>
+    @endif
+</div>
diff --git a/resources/views/form.blade.php b/resources/views/form.blade.php
@@ -13,26 +13,34 @@
                     <div class="flex flex-wrap w-full">
                         <div class="w-full">
                             <graphql query='@include('rapidez-reviews::queries.ratingsMetadata')'>
-                                <div v-cloak v-if="data" slot-scope="{ data }">
-                                    <div class="mb-2" v-for="(rating, index) in data.productReviewRatingsMetadata.items">
+                                <div v-if="data" v-cloak slot-scope="{ data }">
+                                    <div v-for="(rating, index) in data.productReviewRatingsMetadata.items" class="mb-2">
                                         <x-rapidez::label>@{{ rating.name }}</x-rapidez::label>
-                                        <star-input v-model="variables.ratings[index]" :rating="rating">
-                                            <fieldset class="flex items-center" slot-scope="{ rating, isActive, _renderProxy: starInput }">
-                                                <label v-for="ratingValue in rating.values">
-                                                    <x-heroicon-s-star class="size-5 cursor-pointer" v-bind:class="isActive(ratingValue) ? 'text' : 'text-muted'"/>
-                                                    <input class="sr-only" type="radio" v-model="starInput.value" :name="'stars' + rating.id" :value="{ id: rating.id, value_id: ratingValue.value_id }" required />
-                                                </label>
-                                            </fieldset>
-                                        </star-input>
+                                        <div class="flex items-center gap-0.5">
+                                            <label
+                                                v-for="ratingValue in rating.values"
+                                                class="cursor-pointer text-muted/50 hover:text-yellow-400 [&:has(~label:hover)]:text-yellow-400"
+                                                v-bind:class="{
+                                                    '!text-yellow-400': ratingValue.value <= rating.values.find((ratingValue) => ratingValue.value_id == variables.ratings[index]?.value_id)?.value,
+                                                }"
+                                                v-bind:title="ratingValue.label"
+                                            >
+                                                <input
+                                                    v-model="variables.ratings[index]"
+                                                    type="radio"
+                                                    class="sr-only"
+                                                    v-bind:name="'rating-' + rating.id"
+                                                    v-bind:value="{ id: rating.id, value_id: ratingValue.value_id }"
+                                                    required
+                                                />
+                                                <x-heroicon-s-star class="size-5 shrink-0 transition" />
+                                            </label>
+                                        </div>
                                     </div>
                                 </div>
-                                <div v-else class="blur animate-pulse mb-2">
-                                    <x-rapidez::label>@lang('Rating')</x-rapidez::label>
-                                    <div class="flex">
-                                        @for ($i = 0; $i < 5; $i++)
-                                            <x-heroicon-s-star class="size-5 cursor-pointer text-muted" />
-                                        @endfor
-                                    </div>
+                                <div v-else class="mb-2">
+                                    <x-rapidez::label>@lang('Rating') *</x-rapidez::label>
+                                    <x-rapidez-reviews::stars score="0" />
                                 </div>
                             </graphql>
                             <div class="space-y-2">
@@ -54,7 +62,7 @@
                             <x-rapidez::button.secondary type="submit">
                                 @lang('Submit Review')
                             </x-rapidez::button.secondary>
-                            <span v-if="mutated" v-cloak class="ml-3 text-green-500">
+                            <span v-if="mutated" class="ml-3 text-green-500" v-cloak>
                                 @lang('You submitted your review for moderation.')
                             </span>
                         </div>

diff --git a/resources/views/reviews.blade.php b/resources/views/reviews.blade.php
@@ -15,7 +15,7 @@
                     <div itemprop="reviewRating" itemtype="https://schema.org/Rating" itemscope>
                         <meta itemprop="ratingValue" v-bind:content="review.average_rating" />
                         <meta itemprop="bestRating" content="100" />
-                        <stars class="mt-1" v-bind:score="review.average_rating"></stars>
+                        <x-rapidez-reviews::stars score="review.average_rating" />
                     </div>
                     <strong class="block mt-3" itemprop="name">@{{ review.summary }}</strong>
                     <p class="mt-1 text-sm" itemprop="reviewBody">@{{ review.text }}</p>
@@ -31,7 +31,7 @@
                 @{{ new Date(Date.now()).toLocaleDateString() }}
             </span>
         </div>
-        <stars class="mt-1" :score="100"></stars>
+        <x-rapidez-reviews::stars />
         <strong class="block mt-3">
             @lang('Be the first to write a review')
         </strong>